/*TS Studio CSS*/

body{
    background: #e7e7e7;
}

.model{
    display: flex;
    justify-content: center;
    align-items: top;
    position: fixed;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.8);
    z-index: 1;
    backdrop-filter: blur(3px);
}

.modelBox{
    z-index: 2;
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    max-width: 85%;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    overflow: auto;
           display: flex;
       flex-wrap: wrap;
              gap:15px;
}

.modelBox img{
    max-width: 100%;
    object-fit: cover;
}

.modeldesc{
    margin-top:-10px;
    
}


.modelInfo{
    width:38%;
       display: flex;
       flex-wrap: wrap;
       flex-direction: column;
       overflow: auto;
}

.modelHero{
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   gap:15px;
   width:50%;
}

.modelHero img{
    object-fit:contain;
}

.modelGallery{
       display: flex;
       flex-wrap: wrap;
       gap:4px;
   width:100%;
   overflow: auto;
}

.modelGallery img{
    width: 48%;
    object-fit: cover;
}


@media only screen and (max-width: 800px) {

    .modelBox{
        max-width: 99%;
        width: 99%;
    }

    .modelInfo{
        width: 100%;
    }

    .modelHero{
        width: 100%;;
    }

    .modelGallery img{
    width: 100%;
}

}

.close{
    position: relative  ;
   top:40px;
   left:85%;
    font-weight: 800;
    font-size: 1.3em;
    cursor: pointer;
    z-index: 443;
    
    background: black;
    color:white;
    width:25px;
    height:25px;
    text-align: center;
    border-radius: 7px;
}

.mainwrap{
    width: 95%;
    margin:0 auto;
}

.headImg{
    width:100%;
    margin-bottom: -15px;
    max-height: 240px;
}

.headImg img{
   max-height: 240px;
   width: 100%;
   object-fit: cover;
}




.blurb{
    background-color: #222;
    color:white;
    width:100%;
    height:100px;
}

.blurb h3{
 text-align: center;
 font-size: 1.75em;
 padding-top: 35px;
}




.heroGrid{
display:flex;
flex-wrap:wrap;
gap:20px;
width:100%;
/*justify-content: center;*/
}

.heroGrid img{
flex-grow: 1;
flex: 1 0 50%;
max-width:  calc(50% - 20px);
max-height: 500px;
object-fit:cover;
cursor: pointer;
}

.heroGridTag{
background:cyan;
min-width:100%;
flex:0 0 100%;


transition: all 0.4s ease-in-out;

}







.off{
display: none;
opacity: 0;
height: 0;
overflow: hidden;
flex: 0 0 100;
transition: all 0.4s ease-in-out;
}


@media only screen and (max-width: 800px) {

    .vinyet{
   background-position-x: center; 
   background-position-y: -10px; 
   background-size: cover;  
   height: 140px;
}


.heroGrid img{
flex-grow: 1;
flex: 1 0 100%;
max-width:  calc(100% - 5px);

}

}

@media only screen and (max-width: 600px) {

.blurb{
    font-size: .9em;
}

.blurb h3{
    padding:20px;
}

}