@font-face { font-family: Chalkboard; src: url('../fonts/Chalkboard.ttc'); }
@font-face { font-family: Lora;
src: url('fonts/Lora-VariableFont_wght.ttf'); }

.header a:link{color: #dfd1e6; text-decoration:none;}
.header a:visited{color: #dfd1e6; text-decoration:none;}
.header a:hover {background-color:#49464a ; text-decoration:none;}


/* Mobile */

body {
    
    background-color: #825d8b;
    
    display: grid;
    grid-template-columns: 0% auto 0%;
    
}

.grid-container {
    
    grid-column: 2/3;
    
    display: grid;
    grid-template-rows: 14vh auto auto;

    border-style: solid;
    border-width: 1.5px;
}


.grid-container .logo{
    grid-column: 1/-1;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: center;

    border-style: solid;
    border-width: 0px;


    
    
    display: grid;
    grid-template-rows: 74.5% 25.5%;
    overflow: hidden;

}

.logo .top-flower{
    background-image: url("../Pictures/logo.png");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
    grid-row: 1/2;
}

.logo .name{
    font-family: Lora;
    font-size: 19;
    padding-top: .2vh;
    background-color: #C1BDC3;
    
    -webkit-transform:scale(1.2,1);
    
    
    grid-row: 2/3;
}


.grid-container .header {
    grid-column: 1/-1;
    grid-row-start: 2;
    grid-row-end: 3;
    text-align: center;
    padding: 7px;

    align-items: center;

    Font-size: 14;
    font-family: chalkboard;
    
    display: grid;
    grid-template-columns: 4fr 6fr 4fr 4fr 4fr; 
    grid-template-rows: 1fr;
  
    Background-color: #000000;
    border-style: solid;
    border-width: 0px;
}

.header .headerHome {
    grid-column: 1 / 2;
    grid-row-start: 1;
    grid-row-end: 1;   
  
    

    border-style: solid;
    border-width: 0px;

}
.header .headerPage1 {
    grid-column: 2 / 3;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}
.header .headerOrder {
    grid-column: 3 / 4;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}
.header .headerFAQs {
    grid-column: 4 / 5;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}
.header .headerContact {
    grid-column: 5 / 6;
    grid-row-start: 1;
    grid-row-end: 1;
  

    border-style: solid;
    border-width: 0px;

}

.grid-container .menu{
    background-color: ghostwhite;
    text-align: center;
    align-items: center;
    
        
    grid-row: 3/4;
    
    color: black;
    
    padding-bottom: 0px;

    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    
    border-style: solid;
    border-width: 1px 0px 2px 0px;
    
    align-self: center;
    overflow: hidden;
    
}


.menu a:link{color: black; text-decoration:underline;}
.menu a:visited{color: black; text-decoration:none;}
.menu a:hover {background-color:lightcyan; text-decoration: underline;}

.menu a{
    
    padding: 3px;
    
}


.grid-container .main {
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 4;
    grid-row-end: 5;
    text-align: center;

    display: grid; 
    grid-template-columns: 100%;
    grid-template-rows: minmax(500px, auto) auto;
    
    overflow: hidden;
    

    background-image: url("../Pictures/background2.jpg");
    background-repeat: repeat;
    background-position: center;
  
    border-style: solid;
    border-width: 0px;
 
}







.main .content{
    
    grid-row: 1/2;
    
    
    
    display: grid;
    grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 13vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 13vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 12vh [cap9-end cap10-end pic11-start pic12-start];
    
    grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;

    
    justify-items: center;
    overflow: hidden;
    
    
}


.content .title{

    
    grid-row: header-start/2;
    grid-column: pic1-start/-2;
    background-color: aliceblue;
    align-self: baseline;
    padding: 5px 2px;
    width: 100%;


}

.title .category{
    
    font-weight: bold;
    font-size: 18;
    
}

.title .categoryabbreviation{
    font-size: 18;
    
}

.content img{
    
    border-width: 2px;
    border-style: solid;
    border-color: blue;
    
    
}

.tall-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.square-image img{
    
    max-width:100%;
    max-height:100%;
    
}

.side-image img{
    
    max-width:100%;
    max-height:100%;
    
}



.content .pic1{ 
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}

.content .cap1{ 
    grid-row: cap1-start/cap1-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic2{ 
    grid-row: pic2-start/pic2-end;
    grid-column: pic2-start/pic2-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap2{ 
    grid-row: cap2-start/cap2-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic3{ 
    grid-row: pic3-start/pic3-end;
    grid-column: pic1-start/pic1-end;
    
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap3{ 
    grid-row: cap3-start/cap3-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic4{ 
    grid-row: pic4-start/pic4-end;
    grid-column: pic2-start/pic2-end;
    
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap4{ 
    grid-row: cap4-start/cap4-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic5{ 
    grid-row: pic5-start/pic5-end;
    grid-column: pic1-start/pic1-end;
    align-self: center;
}
.content .cap5{ 
    grid-row: cap5-start/cap5-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic6{ 
    grid-row: pic6-start/pic6-end;
    grid-column: pic2-start/pic2-end;
    align-self: center;
    padding-top: 15px;
}
.content .cap6{ 
    grid-row: cap6-start/cap6-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic7{ 
    grid-row: pic7-start/pic7-end;
    grid-column: pic1-start/pic1-end;
    align-self: center;

}
.content .cap7{ 
    grid-row: cap7-start/cap7-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic8{ 
    grid-row: pic8-start/pic8-end;
    grid-column: pic2-start/pic2-end;
    align-self: center;
}
.content .cap8{ 
    grid-row: cap8-start/cap8-end;
    grid-column: 4/5;
    align-self: baseline;
    padding-top: 20px;
}

.content .pic9{ 
    grid-row: pic9-start/pic9-end;
    grid-column: pic1-start/pic1-end;
    align-self: center;
}
.content .cap9{ 
    grid-row: cap9-start/cap9-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic10{ 
    grid-row: pic10-start/pic10-end;
    grid-column: pic2-start/pic2-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap10{ 
    grid-row: cap10-start/cap10-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic11{ 
    grid-row: pic11-start/pic11-end;
    grid-column: pic1-start/pic1-end;
    align-self: center;
}
.content .cap11{ 
    grid-row: cap11-start/cap11-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic12{ 
    grid-row: pic12-start/pic12-end;
    grid-column: pic2-start/pic2-end;
    align-self: center;
}
.content .cap12{ 
    grid-row: cap12-start/cap12-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic13{ 
    grid-row: pic13-start/pic13-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
    max-width: 85%;
    align-self: center;
}
.content .cap13{ 
    grid-row: cap13-start/cap13-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic14{ 
    grid-row: pic14-start/pic14-end;
    grid-column: pic2-start/pic2-end;
    align-self: center;
}
.content .cap14{ 
    grid-row: cap14-start/cap14-end;
    grid-column: 4/5;
    align-self: baseline;
    padding-top: 0px;
}
.content .pic15{ 
    grid-row: pic15-start/pic15-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap15{ 
    grid-row: cap15-start/cap15-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic16{ 
    grid-row: pic16-start/pic16-end;
    grid-column: pic2-start/pic2-end;
    align-self: center;
}
.content .cap16{ 
    grid-row: cap16-start/cap16-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic17{ 
    grid-row: pic17-start/pic17-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap17{ 
    grid-row: cap17-start/cap17-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic18{ 
    grid-row: pic18-start/pic18-end;
    grid-column: pic2-start/pic2-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}

.content .cap18{ 
    grid-row: cap18-start/cap18-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic19{ 
    grid-row: pic19-start/pic19-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap19{ 
    grid-row: cap19-start/cap19-end;
    grid-column: 2/3;
    align-self: baseline;
}
.content .pic20{ 
    grid-row: pic20-start/pic20-end;
    grid-column: pic2-start/pic2-end;
    max-height: 100%;
    max-width: 90%;
    align-self: center;
}
.content .cap20{ 
    grid-row: cap20-start/cap20-end;
    grid-column: 4/5;
    align-self: baseline;
}
.content .pic21{ 
    grid-row: pic21-start/pic21-end;
    grid-column: pic1-start/pic1-end;
    align-self: center;
}
.content .cap21{ 
    grid-row: cap21-start/cap21-end;
    grid-column: 2/3;
    align-self: baseline;
    padding-top: 20px;
}

.main .footer {
    Font-family: Chalkboard;
    font-size: 12;
    
    grid-column: 1 / -1;
    Grid-row: -2 / -1;
    padding-bottom: 12px;

}
br {
    line-height: 6px;
 }



@media(min-width: 460px){
    
    body{
        
        grid-template-columns: 2% auto 2%;
        
    }
    
     .logo .name{
        
        font-size: 21;
        -webkit-transform:scale(1.4,1);
        
    }
    
    .grid-container .header {
        
        font-size: 18;
        
    }
    
    .main .content{

        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 6vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 6vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 6vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 6vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 3vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic21{ 
        grid-row: pic21-start/pic21-end;
        grid-column: pic1-start/pic1-end;
    }
    

    
    .main .footer {
        grid-row: -2/-1;
        font-size: 16;

    
    }
    
}

@media (min-width: 550px){
    
    .main .content{
    
        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 15vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 15vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 17vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 15vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic7{ 
        max-height: 100%;
        max-width: 91%;
    }
    .content .pic8{ 
        max-height: 100%;
        max-width: 84%;
        padding-top: 0px;
    }
    .content .pic13{ 
        max-height: 100%;
        max-width: 82%;
    }
    .content .pic17{ 
        max-height: 100%;
        max-width: 85%;
    }
    .content .pic19{ 
        max-height: 100%;
        max-width: 81%;
    }
    .content .pic20{ 
        max-height: 100%;
        max-width: 90%;
    }
    .content .pic21{ 
        max-height: 100%;
        max-width: 93%;
    }
    
}


@media (min-width: 700px){
    
    .main .content{
    
        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 15vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 15vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 17vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 15vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic14{ 
        max-height: 100%;
        max-width: 93%;
    }
    .content .pic15{ 
        max-height: 100%;
        max-width: 86%;
    }
    .content .pic16{ 
        max-height: 100%;
        max-width: 90%;
    }
    
}

@media (min-width: 550px) and (min-height: 900px){
    
    .main .content{
    
        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 15vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 15vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 17vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 15vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic7{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end;
        
        max-height: 100%;
        max-width: 90%;
    }
    .content .pic8{ 
        grid-row: pic8-start/pic8-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 80%;
    }
    
    
}



@media (min-width: 750px){
    
    .logo .name{
        
        font-size: 22;
        -webkit-transform:scale(1.8,1.2);
        
    }
    
}


@media (min-width: 775px){
    
    .main .content{

        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 13vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 2% [pic1-start] auto [pic1-end] 2% [pic2-start] auto [pic2-end] 2% [pic3-start] auto [pic3-end] 2% [pic4-start] auto [pic4-end] 2%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic1{ 
    
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
        max-width: 90%;
    }

    .content .cap1{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic2{ 
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 90%;
    }
    .content .cap2{ 
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic3{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap3{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic4{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap4{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .pic5{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap5{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic6{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap6{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic7{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap7{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic8{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap8{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;
    }

    .content .pic9{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap9{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic10{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap10{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic11{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap11{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic12{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap12{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic13{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap13{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic14{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap14{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic15{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap15{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic16{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap16{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic17{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap17{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic18{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap18{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic19{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap19{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic20{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap20{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic4-start/pic4-end;
    }
    
    
    .content .pic21{ 
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap21{ 
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;
    }

    
    
}

@media (min-width: 850px){
    
    .main .content{

        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 13vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 1.5% [pic1-start] auto [pic1-end] 1% [pic2-start] auto [pic2-end] 1% [pic3-start] auto [pic3-end] 1% [pic4-start] auto [pic4-end] 1.5%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic1{ 
    
        grid-row: pic1-start/pic1-end;
        grid-column: pic1-start/pic1-end;
        max-height: 100%;
        max-width: 90%;
    }

    .content .cap1{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic2{ 
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 90%;
    }
    .content .cap2{ 
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic3{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap3{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic4{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap4{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .pic5{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap5{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic6{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap6{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic7{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap7{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic8{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap8{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;
    }

    .content .pic9{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap9{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic10{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap10{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic11{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap11{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic12{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap12{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic13{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap13{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic14{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap14{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic15{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap15{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic16{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap16{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic17{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap17{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic18{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap18{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic19{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap19{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic20{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap20{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic4-start/pic4-end;
    }
    
    
    .content .pic21{ 
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap21{ 
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;
    }

    
    
}

@media (min-width: 1020px){
    
    .main .content{

        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 13vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 1.5% [pic1-start] auto [pic1-end] 1% [pic2-start] auto [pic2-end] 1% [pic3-start] auto [pic3-end] 1% [pic4-start] auto [pic4-end] 1.5%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic1{ 
    
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
        max-width: 90%;
    }

    .content .cap1{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic2{ 
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 90%;
    }
    .content .cap2{ 
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic3{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap3{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic4{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap4{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .pic5{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap5{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic6{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap6{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic7{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap7{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic8{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap8{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;
    }

    .content .pic9{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap9{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic10{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap10{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic11{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap11{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic12{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap12{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic13{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap13{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic14{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap14{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic15{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap15{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic16{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap16{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic17{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap17{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic18{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap18{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic19{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap19{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic20{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap20{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic4-start/pic4-end;
    }
    
    
    .content .pic21{ 
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap21{ 
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;
    }
}

@media (min-width: 1200px){
    
    .main .content{

        grid-row: 1/2;



        display: grid;
        grid-template-rows: 2vh [header-start] auto [header-end] 1.5vh  [pic1-start pic2-start] auto [pic1-end pic2-end cap1-start cap2-start] 10vh [cap1-end cap2-end pic3-start pic4-start] auto [pic3-end pic4-end cap3-start cap4-start] 10vh [cap3-end cap4-end pic5-start pic6-start] auto [pic5-end pic6-end cap5-start cap6-start] 15vh [cap5-end cap6-end pic7-start pic8-start] auto [pic7-end pic8-end cap7-start cap8-start] 13vh [cap7-end cap8-end pic9-start pic10-start] auto [pic9-end pic10-end cap9-start cap10-start] 10vh [cap9-end cap10-end pic11-start pic12-start];

        grid-template-columns: 1.5% [pic1-start] auto [pic1-end] 1% [pic2-start] auto [pic2-end] 1% [pic3-start] auto [pic3-end] 1% [pic4-start] auto [pic4-end] 1.5%;


        align-items: center;
        overflow: hidden;

    }
    
    .content .pic1{ 
    
    grid-row: pic1-start/pic1-end;
    grid-column: pic1-start/pic1-end;
    max-height: 100%;
        max-width: 85%;
    }

    .content .cap1{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic2{ 
        grid-row: pic2-start/pic2-end;
        grid-column: pic2-start/pic2-end;
        max-height: 100%;
        max-width: 85%;
    }
    .content .cap2{ 
        grid-row: cap2-start/cap2-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic3{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic3-start/pic3-end;
        max-height: 100%;
        max-width: 85%;
    }
    .content .cap3{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic4{ 
        grid-row: pic1-start/pic1-end;
        grid-column: pic4-start/pic4-end;
        max-height: 100%;
        max-width: 85%;
    }
    .content .cap4{ 
        grid-row: cap1-start/cap1-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .pic5{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap5{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic6{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap6{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic7{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap7{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic8{ 
        grid-row: pic3-start/pic3-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap8{ 
        grid-row: cap3-start/cap3-end;
        grid-column: pic4-start/pic4-end;
    }

    .content .pic9{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap9{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic10{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap10{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic11{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap11{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic12{ 
        grid-row: pic5-start/pic5-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap12{ 
        grid-row: cap5-start/cap5-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic13{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap13{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic14{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap14{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic15{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap15{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic16{ 
        grid-row: pic7-start/pic7-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap16{ 
        grid-row: cap7-start/cap7-end;
        grid-column: pic4-start/pic4-end;
    }
    
    .content .pic17{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap17{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .pic18{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .cap18{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic2-start/pic2-end;
    }
    .content .pic19{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .cap19{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic3-start/pic3-end;
    }
    .content .pic20{ 
        grid-row: pic9-start/pic9-end;
        grid-column: pic4-start/pic4-end;
    }
    .content .cap20{ 
        grid-row: cap9-start/cap9-end;
        grid-column: pic4-start/pic4-end;
    }
    
    
    .content .pic21{ 
        grid-row: pic11-start/pic11-end;
        grid-column: pic1-start/pic1-end;
    }
    .content .cap21{ 
        grid-row: cap11-start/cap11-end;
        grid-column: pic1-start/pic1-end;
    }
}

@media (min-width: 1370px){


    .content .pic1{ 
        max-height: 100%;
        max-width: 80%;
    }
    .content .pic2{ 
        max-height: 100%;
        max-width: 80%;
    }
    .content .pic3{ 
        max-height: 100%;
        max-width: 80%;
    }
    .content .pic4{ 
        max-height: 100%;
        max-width: 80%;
    }
    .content .pic5{ 
        padding-top: 58px;
        max-height: 100%;
        max-width: 90%;
    }
    .content .pic6{ 
        padding-top: 58px;
    }
    .content .pic7{ 
        max-height: 100%;
        max-width: 80%;
        padding-bottom: 15px;
    }
    .content .pic8{ 
        max-height: 100%;
        max-width: 73%;
        padding-bottom: 15px;
    }
    .content .pic9{ 
        max-height: 100%;
        max-width: 90%;
    }
    .content .pic10{ 
        max-height: 100%;
        max-width: 85%;
    }
    .content .pic11{ 
        padding-top: 25px;
    }
    .content .pic12{ 
        padding-top: 35px;
    }
    .content .pic13{ 
        padding-bottom: 10px;
    }
    .content .pic14{ 

    }
    .content .pic15{ 

    }
    .content .pic16{ 

    }
    .content .pic17{ 
        
    }
    .content .pic18{ 

    }
    .content .pic19{ 

    }
    .content .pic20{ 

    }

    .content .pic21{ 
        max-height: 100%;
        max-width: 85%;
        padding-bottom: 15px;
    }
}