#windows-h {
    height: 50vh;
    width: 40vw;
    margin-top: auto;
    margin-bottom: auto;
}

.win-1 {
    width: 14.5vw;
    height: 15.5vw;
    background-color: black;
    position: absolute;
    top: 3vw;
    right: 23vw;
    border-radius: 0.3em;
    
}

.header {
    display: flex;
    width: 100%;
    height: 20px;
    justify-content: space-between;
    
}



.w-title {
    text-align: left;
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.c-w {
    color: black;
    width: 15px;
    height: 15px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin: 2px;
}

.w-icons {
    display: flex;
    align-items: center;
    align-content: center;    
    height: 100%;
}

.i-win-1 img {
    position: absolute;
    width: 13vw;
    height: 13vw;
    
    top:67%;
    left: 50%;
    transform: translate(-50%,-67%);
    
    
}

.win-2 {
    width: 14.5vw;
    height: 15.5vw;
    background-color: black;
    position: absolute;
    top: 25vw;
    left: 12vw;
    border-radius: 0.3em;
    
}


.win-3 {
    width: 25vw;
    height: 17vw;
    background-color: black;
    position: absolute;
    top: 5vw;
    left: 20vw;
    border-radius: 0.3em;
    
}



.i-win-3 {
    position: absolute;
    width: 95%;
    height: 86%;
    background-color: white;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    margin: none;
    
}

.header-3 {
    display: flex;
    width: 100%;
    height: 20px;
    justify-content: space-between;
    
}

.i-win-3 p {
    color: black;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13vw;
    text-align: center;

    
    
}

.win-4 {
    width: 51.3vw;
    height: 16.5vw;
    background-color: black;
    position: absolute;
    top: 23vw;
    right: 12vw;
    border-radius: 0.3em;
    
}



.i-win-4 {
    position: absolute;
    width: 97%;
    height: 85%;
    background-color: white;
    
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    
}

.header-4 {
    display: flex;
    width: 100%;
    height: 20px;
    justify-content: space-between;
    
}

.i-win-4 p {
    color: black;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13vw;
    text-align: center;
}

.win-5 {
    width: 25vw;
    height: 28.5vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 51vw;
    left: 20vw;
    border-radius: 0.3em;
    
}

.win-5 p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.i-win-5 {
    position: absolute;
    width: 96%;
    height: 92%;
    background-color: rgb(0, 0, 0);
    top:50%;
    left: 50%;
    transform: translate(-50%,-48%);
    overflow: hidden;
}

.header-5 {
    display: flex;
    width: 100%;
    height: 20px;
    justify-content: space-between;
    color: black;
   
}

.i-win-5 p {
    color: rgb(255, 255, 255);
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.117vw;
    text-align: left;
    margin-left: 2%;
    margin-top: 2%;
}

.c-w-b {
    color: rgb(255, 255, 255);
    width: 15px;
    height: 15px;
    background-color: rgb(0, 0, 0);
    margin-left: auto;
    margin-right: auto;
    top:1vh;
    margin-bottom: 0;
}


.win-6 {
    width: 21vw;
    height: 25vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 67vw;
    right: 21vw;
    border-radius: 0.3em;
    
}

.win-6 p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.win-7 {
    width: 21vw;
    height: 21.8vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 87vw;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.3em;
    
}

.win-7 p{
    margin-left: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.win-7 img {
    filter: grayscale(100);
}

.win-7 img:hover {
    filter: none;
}

#text {
    display: flex;
    
    font-size: 0.8vw;
    position: absolute;
    top: 100%;
    right:0.2vw;
    /*right: 34.5em;*/
}

#text p {
    margin: 0;
    margin-top: 4px;
}

.win-8 {
    width: 60vw;
    height: 35vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 117vw;
    left: 10vw;
    border-radius: 0.3em;
    
}

.win-8 p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.i-win-8 {
    position: absolute;
    width: 96%;
    height: 92%;
    background-color: rgb(0, 0, 0);
    top:50%;
    left: 50%;
    transform: translate(-50%,-49%);
    overflow: hidden;
    color:black;
}

#carouselExampleCaptions img{
    filter: grayscale(100%) blur(5px);
    
}

#carouselExampleCaptions img:hover{
    filter: none;
}

#carouselExampleDark img{
    filter: grayscale(100%) blur(5px);
    
}

#carouselExampleDark img:hover{
    filter: none;
}

#carouselExampleCaptions p {
    font-size: 1.2vw;
    text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
#carouselExampleCaptions h5 {
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
     font-size: 2vw;
}

#carouselExampleDark h5{
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow:
    -1px -1px 0 #ffffff,  
     1px -1px 0 #ffffff,
    -1px  1px 0 #ffffff,
     1px  1px 0 #ffffff;
     font-size: 2vw;
}

.win-9 {
    width: 60vw;
    height: 35vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 156vw;
    right: 10vw;
    border-radius: 0.3em;
    
}

.win-9 p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}


.win-nav {
    width: 30vw;
    height: 10vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 53vw;
    left: 52vw;
    
    border-radius: 0.3em;
    
}

.i-win-nav {
    position: absolute;
    width: 98%;
    height: 80%;
    background-color: rgb(0, 0, 0);
    top:50%;
    left: 50%;
    transform: translate(-50%,-43%);
    overflow: hidden;
}

.i-win-nav p {
    color: rgb(255, 255, 255);
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.117vw;
    margin-top: 0.5vw;
}

.win-nav p{
    margin-left: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.117vw;
    
}


#nav-buttons{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#nav-buttons p {
    color: rgb(255, 255, 255);
    
    
    text-align: center;
    margin-top: 0.5vw;
}

button {
    height: 2.5vw;
    width: auto;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.win-comms {
    width: 40vw;
    height: 25vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 195vw;
    left: 18vw;
    border-radius: 0.3em;
    
}

.win-comms p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.i-win-comms {
    position: absolute;
    width: 98%;
    height: 92%;
    background-color: rgb(0, 0, 0);
    top:50%;
    left: 50%;
    transform: translate(-50%,-47.5%);
    overflow: hidden;
    

}

.i-win-comms button {
    width: 10vw;
    border-color: white;
}

.i-win-comms button:hover {
    background-color: black;
    color: white;
}

.i-win-comms p {
    color: rgb(255, 255, 255);
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.117vw;
    text-align: left;
    margin-left: 2%;
    margin-top: 2%;
}


.win-social {
    width: 40vw;
    height: 24.5vw;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 219vw;
    right: 18vw;
    border-radius: 0.3em;
    
}

.win-social p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.i-win-social {
    position: absolute;
    width: 98%;
    height: 92%;
    background-color: rgb(0, 0, 0);
    top:50%;
    left: 50%;
    transform: translate(-50%,-47%);
    overflow: hidden;
}

.i-win-social p {
    color: rgb(255, 255, 255);
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.117vw;
    text-align: left;
    margin-left: 2%;
    margin-top: 2%;
}

.win-end {
    width: 30vw;
    height: 10vw;
    background-color: rgb(0, 0, 0);
    position: absolute;
    top: 256vw;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.3em;
    margin-bottom: 2vw;
}

.win-end p{
    margin: 2px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    
    
}

.i-win-end {
    position: absolute;
    width: 98%;
    height: 80%;
    background-color: rgb(255, 255, 255);
    top:50%;
    left: 50%;
    transform: translate(-50%,-42%);
    overflow: hidden;
}

.i-win-end h1 {
    color: rgb(0, 0, 0);
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 5vw;
    text-align: center;
    
}

.desc {
    position: absolute;
    font-size: 1.5vw;
    color: rgb(0, 0, 0);
    margin: 0;
    bottom: 0.5vw;
    left: 3vw;
}

#add {
    font-size: 0.8vw;
}


@media only screen and (max-width: 1280px) {
    .win-5 {
        width: 40vw;
        height: 45vw;
        left: 10vw;
    }
    .win-6 {
        width: 36vw;
        height: 40vw;
        right: 10vw;
        top: 75vw;
    }
    .win-7 {
        width: 36vw;
        height: 36.7vw;
        top: 112vw;
    }
    #text {
        font-size: 1.5vw;
    }
    .i-win-5 p {
        font-size: 1.75vw;
    }
    #add {
        font-size: 1.2vw;
    }
    .win-8 {
        width: 75vw;
        height: 44.4vw;
        top:160vw;
    }
    .win-9 {
        width: 75vw;
        height: 44.4vw;
        top: 210vw;
    }
    .win-nav {
        width: 35vw;
        height: 15vw;
        left: 55vw;
    }
    button {
        height: 3vw;
        width: auto;
    }
    .i-win-nav p {
        font-size: 1.75vw;
    }
    .win-comms {
        top:261vw;
        width: 60vw;
        height: 38vw;
    }
    .i-win-comms p {
        font-size: 1.75vw;
    }
    .win-social {
        top: 296vw;
        width: 60vw;
        height: 37vw;
    }
    .i-win-social p {
        font-size: 1.75vw;
    }
    .win-end {
        top: 345vw;
        width: 48vw;
        height: 15vw;}
    .i-win-end h1 {
        font-size: 8vw;
        text-align: center;
    }
    .desc {
        font-size: 2vw;
        left: 8vw;
    }
  }

  @media only screen and (max-width: 1024px) {
    .win-4 {
        width: 78vw;
        height: 22vw;
        
        top: 36vw;
        left: 50%;
        transform: translateX(-50%);  
    }
    .i-win-4 p {
        position: absolute;
        font-size: 20vw;
        text-align: left;
        bottom: -6vw;
    }
    .win-3 {
        width: 34vw;
        height: 22vw;
        
        top: 11vw;
        left: 50%;
        transform: translateX(-50%);  
        
        
    }
    .i-win-3 p {
        position: absolute;
        font-size: 20vw;
        bottom: -6vw;
        left:5vw;
    }
    .win-1 {
        width: 20vw;
        height: 22vw;
        
        top: 11vw;
        right: 9vw;
        
        
    }
    .i-win-1 img {
        width: 18vw;
        height: 18vw;
        
        
    }
    .win-2 {
        width: 20vw;
        height: 22vw;
        
        top: 11vw;
        left: 9vw;
        
        
    }

    .header-5 {
        font-size: 2.5vw;
    }
    .c-w-b {
        font-size: 2.5vw;
        height: 2vw;
        width: 2vw;
    }
    .w-icons {
        margin-top: 1vw;
        margin-right: 0.2vw;
    }

    .win-5 {
        width: 68vw;
        height: 78vw;
        left: 50%;
        transform: translateX(-50%);  
        top: 100vw;
    }
    #add {
        font-size: 2vw;
    }
    .win-6 {
        width: 45vw;
        height: 47vw;
        left: 10vw;
        top: 180vw;
    }
    .win-7 {
        width: 40vw;
        height: 42.5vw;
        top: 212vw;
        left: 70vw;
    }
    .i-win-5  {
        height: 90%;
        transform: translate(-50%,-47%);
    }
    #text {
        font-size: 2vw;
    }
    #text img {
        height: 2vh;
    }
    .i-win-5 p {
        font-size: 3vw;
    }
    .win-8 {
        width: 85vw;
        height: 52vw;
        top:270vw;
        left: 50%;
        transform: translateX(-50%);  
    }
    .i-win-8 {
        
        width: 98%;
        height: 91%;
        background-color: rgb(0, 0, 0);
        top:50%;
        left: 50%;
        transform: translate(-50%,-46.5%);
        
    }
    .win-9 {
        width: 85vw;
        height: 52vw;
        top:327vw;
        left: 50%;
        transform: translateX(-50%);  
    }
    .win-nav {
        width: 50vw;
        height: 20vw;
        left: 50%;
        transform: translateX(-50%);  
        top: 75vw;
    }
    button {
        height: 3vw;
        width: auto;
        font-size: 2vw;
    }
    .i-win-nav p {
        font-size: 3vw;
    }
    .win-comms {
        top:390vw;
        width: 80vw;
        height: 65vw;
        left: 50%;
        transform: translateX(-50%);  
    }
    .i-win-comms p {
        font-size: 3vw;
    }
    .i-win-comms {
        
        width: 98%;
        height: 92%;
        
        top:50%;
        left: 50%;
        transform: translate(-50%,-47.5%);
        
    }
    .i-win-comms button {
        width: 15vw;
    }
    .win-social {
        top: 460vw;
        width: 80vw;
        height: 77vw;
        left: 50%;
        transform: translateX(-50%);  
    }
    .i-win-social p {
        font-size: 3vw;
    }
    .win-end {
        top: 550vw;
        width: 48vw;
        height: 15vw;}
    .i-win-end h1 {
        font-size: 8vw;
        margin: 0;
        margin-left: 0.5vw;
    }
}