@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;600&family=Montserrat:wght@100;400;600&Roboto+Slab:wght@400;700&display=swap');
a:link {
    color:  rgb(71,71,71);
    text-decoration: none;}
a:visited {
     color:  rgb(111, 111, 111);
     text-decoration: none;}
a:hover {color: rgb(52, 136, 204)}
a:active {color: #FF00CC}

* {
    margin: 0;
    padding: 0;
    }

.bigcontainer {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 70% 4fr 3fr;
		grid-template-areas: 
		"mediumcontainer"
		"navigations"
        "navbar";
		}   
.mediumcontainer {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 20fr 23px 3fr 6fr;
      grid-template-areas: 
       "port"
       "licence2"
       "iconscontainer"
       "container";
      grid-area: mediumcontainer;
    
           } 
.iconscontainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 50px;
    padding-left:10%;
    padding-right: 10%;
    padding-top: 3%;
    grid-area: iconscontainer;
}
.container {
        display: grid;
        grid-template-columns: 1fr 4fr 4fr 4fr 1fr 4fr 4fr;
        grid-template-rows: 1fr 2fr 2fr 1fr 2fr 2fr 1fr;
        row-gap: 0px;
        column-gap: 1px;
        grid-template-areas: 
        " . . . . . . . "
        " . min minprice weekly1 . map map"
        " . min minprice weekly2 . map map"
        ". . . . . map map"
        " . max maxprice weekly3 . map map"
        " . max maxprice weekly4 . map map"
        " . . . . . . . ";
        grid-area: container;
}
    .envelope {
        display: flex;
    }
    #portada {
        background-size: cover;   
        background-position: center center; 
        background-repeat: no-repeat;  
        background-color: white;     
        grid-area: port;
    }
#villaname {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Montserrat' , sans-serif;
    font-weight:800;
    letter-spacing: calc(var(--vh, 1vw) * 1);
    font-size: calc(var(--vw, 1vw) * 8);
    color: rgb(250, 250, 250);
    padding: 5;
    border: 0;
    margin: 1vw;
    text-align: center;
    text-justify: top;
    width: 100%; 
}


#transparent {
     height: calc((var(--vh, 1vw) * 35));
     width: 100%;
     object-fit: cover;
     opacity: 0;
}
#licence2 {
    grid-area: licence2;
    display: block;
    height: 20px;
    background-color: rgb(171, 171, 171)

}
#innerlicence2 {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 16px;
    color: white;
}

#table {
    text-align: right;
}
#half {
    font-family: 'Catamaran', sans-serif;
    font-size: 22px;
}

#shower {
    background-image: url(./images/icons/shower.png);
    background-repeat: no-repeat;
    /*margin-right: calc(var(--vh, 1vw) * 1 );
    margin-top: calc(var(--vh, 1vw) * 2.5 );*/
    grid-area: shower;
}

#man {
    background-image: url(./images/icons/man2.png);
    grid-area: man; 
}

#sleeper {
    background-image: url(./images/icons/sleeper.png);
    background-size: contain;
    background-position: left center; 
    background-repeat: no-repeat;
    grid-area: sleeper; 
}
#shower, #man, #sleeper {
    height: 40px;
    width: 40px;
    background-size: contain;
    background-repeat: no-repeat;
}
#baths, #guests, #beds {
    padding-right: 8px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-size: 30px;
    color: rgb(71, 71, 71);
}

#minim, #maxim { 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-size: 22px;
    color: rgb(71, 71, 71);
    text-align: center;
    margin: 0px 0px 0px ;
    padding: calc(var(--vh, 1vw) * 0) 0px 0px calc(var(--vh, 1vw) * 0);
}
#weekly1, #weekly2, #weekly3, #weekly4 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-size: 14px;
    color: rgb(71, 71, 71);
    text-align: left;
    margin: 0px 0px 0px;
    padding: 0px 0px 0px;
    
}
#blank, #blank2 {display: none;}


#minprice, #maxprice {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
    font-size: 28px;
    color: rgb(71, 71, 71);
}
#baths   {grid-area: baths;}
#guests  {grid-area: guests;}
#beds    {grid-area: beds;}
#minim   {grid-area: min;}
#maxim   {grid-area: max;}
#weekly1 {grid-area: weekly1;}
#weekly2 {grid-area: weekly2;}
#weekly3 {grid-area: weekly3;}
#weekly4 {grid-area: weekly4;}
#minprice {grid-area: minprice;}
#maxprice {grid-area: maxprice;}
#blank {grid-area: blank}
#blank2 {grid-area: blank2}
.wap {grid-area: wap;}
.telegram {grid-area: telegram;}
.calendar {grid-area: calendar;}
.container {grid-area: container}
.navigations {grid-area: navigations}


#location {
    background-size: contain;   
    background-position: center center; 
    background-repeat: no-repeat;  
    height: 100px;
    width: 100px;
    margin-right: 10%;
    grid-area: map;
}
#map3 {
    display: none;
}

.navigations {
    display: flexbox;
    height: auto;
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; /*makes it line up with email icon*/
    margin-top: 2%;
    padding-left: 2%;
    padding-right: 4%; /*regulates how close together icons will appear */
}

.pics, .info {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white url(./images/icons/outline.png);
    background-size: contain;   
    background-position: center center; 
    background-repeat: no-repeat; 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Catamaran', sans-serif;
  
    color: rgb(71, 71, 71);
}

.pics { 
    grid-area: pics;
    font-size: 14px;
}
.info {
    grid-area: info;
    font-size: 15.5px;
}
.back, .wap, .telegram, .pics, .info {
    height: 60px;
    width: 60px;
}
.navicon {
    height: 40px;
    width: 40px;
}
.navbar {
    grid-area: navbar;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; /*makes it line up with email icon*/
    padding-top: 6px;
    padding-left: 3%;
    padding-right: 8%; /*regulates how close together icons will appear */
    z-index: 1;
}
#fb, #abb, #utube, #reddit, #strava, #insta {
    height: 30px;
    width: 30px;
}

.fit {
    width: 100%;
    height: 100%;
    
}
#licence {display: none;}
@media only screen and (min-width:768px) {

.bigcontainer {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 70% 2fr 2fr;
		grid-template-areas: 
		"mediumcontainer"
		"navigations"
        "navbar";
		}   
 .mediumcontainer {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 20fr 46px 90px 6fr;          
                 } 
.container {
        display: grid;
        height: 120px;
        padding-top: 40px;
        grid-template-columns: 2fr 1fr 1fr 2fr 2fr 2fr 1fr;
        grid-template-rows: 2fr 2fr 1fr 2fr 2fr 1fr;
        grid-template-areas: 
        "min minprice minprice minprice weekly1 map . "
        "min minprice minprice minprice weekly2 map . "
        ". . . . . map map"
        "max maxprice maxprice maxprice weekly3 map . "
        "max maxprice maxprice maxprice weekly4 map . "   
        ". . . . . map map";
        grid-area: container;
}
#licence, #innerlicence {display: none;}
#licence2 {
    display: block;
    height: 45px;
    background-color: rgb(171, 171, 171)

}
#innerlicence2 {
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    font-size: 22px;
    letter-spacing: 5px;
    color: white;
}
#shower, #man, #sleeper {
    height: 60px;
    width: 60px;
}

.navigations {
    display: grid;
    grid-template-rows: 120px 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2px;
    grid-template-areas: "back info wap telegram pics";
    grid-area: navigations;
}
.back, .wap, .telegram, .pics, .info {
    height: 70px;
    width: 70px;
}
.navicon {
    height: 40px;
    width: auto;
}
.navbar {
    grid-area: navbar;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; /*makes it line up with email icon*/
    margin-top: 30px;
    padding-top: 6px;
    padding-left: 10%;
    padding-right: 10%; /*regulates how close together icons will appear */
    z-index: 1;
    /*background-color: rgb(240, 240, 240);*/

  }
#transparent {
    height: calc((var(--vh, 1vw) * 25)); /*reduce height of transparent link cover to prevent overgrowth of portada*/
    width: 100%;
    object-fit: cover;
    opacity: 0;
}


#blank, #blank2 {
    display:initial; 
}

}

@media only screen and (min-width:1022px) {
    #licence2 {display: none;}
    div #location {display:none;}
    #licence, #innerlicence {display: block;}
    #licence {
        height: 45px;
        background-color: rgb(171, 171, 171)
    
    }
    #innerlicence {
        line-height: 45px;
        text-align: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-family: 'Montserrat', sans-serif;
        font-weight: 100;
        font-size: 22px;
        letter-spacing: 5px;
        color: white;
    }
    .bigcontainer {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 45px 1fr 1fr;
		grid-template-areas: 
		"mediumcontainer"
        "licence"
		"navigations"
        "navbar"
		}
       .mediumcontainer {
        display: grid;
		grid-template-columns: 1fr 6fr;
		grid-template-rows: 260px 280px;
		grid-template-areas: 
        "iconscontainer port"
        "container port";
        grid-area: mediumcontainer;

       }
       .iconscontainer {
        height: 180px;
        flex-direction: column;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-end;
        padding-top: 10%;
        grid-area: iconscontainer;
    }
       .container {
        height: 200px;
        padding-top: 25px;
        display: grid;
        grid-template-columns: 1fr 3fr 2fr;
        grid-template-rows: 4fr 3fr 3fr 4fr 4fr 3fr 4fr;
        grid-template-areas: 
        " . minprice minprice"
        " . min weekly1"
        " . min weekly2"
        " . blank2 blank2"
        " . maxprice maxprice"
        " . max weekly3"
        " . max weekly4";
        grid-area: container;
      
}

.pics, .info  {
    font-size: 30px;

}

.navigations {

    height: 160px;
    background-color: white;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2px;
    grid-template-areas: 
    "back pics wap telegram info mapa"
}

    #villaname {

    font-size: calc(var(--vw, 1vw) * 7);    
    }
    #transparent {
      
        height: calc((var(--vh, 1vw) * 30));
        width: 100%;
        object-fit: cover;
        opacity: 0;
   }
   .envelope {
       padding-top: 10px;
       padding-bottom: 10px;
   }
   #baths, #guests, #beds {
       font-size: 33px;
       padding: 0 10px 0 0 ;
       margin: 0 0 0 0;
   }
   #shower, #man, #sleeper {
    height: 60px;
    width: 60px;
   }
    #half{
        font-size: 21.5px;
    }
    #minprice, #maxprice {
        font-size: 31.6px;
    }

    #minim, #maxim { 
        font-size: 25.8px;
        margin: 0;
        padding: 0;
}
    #weekly1, #weekly2, #weekly3, #weekly4 {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-family: 'Catamaran', sans-serif;
        font-size: 14.36px;
        margin-top: 7.18px; 


}


.wap       {grid-area: wap;}
.telegram  {grid-area: telegram;}
.pics      {grid-area: pics;}
.info      {grid-area: info;}
.mapa      {grid-area:mapa;}

.pics, .info {
    font-size: 22px;
}
.back, .wap, .telegram, .pics, .info, .mapa {
           height: 90px;
           width:  90px;
}

.blank    {
            grid-area:blank; 
            height: 5%; 
            width:auto;}




}