/* 35em is also 560px (if basefont is 16px) */
@media only screen and (min-width: 35rem) {

   
        /*----------- BODY --------------*/


        /*----------- HEADER --------------*/
            /*header img{width:60px;}
            header h1{font-size:2rem;}
            header h2{font-size:1rem;}


        /*----------- NAVIGATION --------------*/


        nav button {display:none;}
            
        nav ul.hide {display:block;}

        nav ul {margin-left: 2%;}

        nav ul li{
            float:left;
        }

        nav ul li a {
            border:none;
            border-right: 1px solid rgba(0,0,0,0.3);
            padding: .6rem 1rem;
        } 



        /*----------- MAIN --------------*/

        .smallImgTxt, .map {
            float:right;
            margin: 0px 0px 15px 15px;
            display:block;
            box-shadow: 0 0 30px #777;
        }

        .smallImgTxt2{
            float:left;
            margin: 0px 15px 15px 0px;
            display:block;
            box-shadow: 0 0 30px #777;
        }

        .herodiv{
            position:relative;
            margin-bottom: .5em;
        }

        
        .hero-ph { 
            margin: 0;
            width: 100%;
        }

        .contactusbox{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }  

        .map {
            display:grid;
        }
        .hidden{display:block}

        section#forecast{
            display:grid;
            grid-template-columns:1fr 1fr 1fr 1fr 1fr;
            box-shadow: 0px 10px 13px -7px rgb(190, 189, 189), 5px 5px 5px 0px rgba(0,0,0,0.3);
        }

        section#forecast div{
            text-align:center;
            border: 1px solid grey;
        }
        section#forecast span{
            background-color: #abfaa9;
            margin: 0;
            padding: 1rem 0;
            display:block;
        }

        .gallery-gridcontainer{
            display:grid;
            grid-template-columns:1fr 1fr;
            row-gap: 15px;
            column-gap: 5px;
            justify-content: center;
            align-items: center; 
            text-align: center;

        }

        #rating.slider {
            width:30%;
        }
        
    div.homecards section {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
  
    div.homecards section img {
        grid-row: 1 / 6;
    }
    div.homecards :nth-child(2) :nth-child(6) {
        grid-column: 4 / 2;
    }

 
/*----------- FOOTER --------------*/
    
}/* end of media query */