/*basics*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Leckerli+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Loved+by+the+King&family=Pacifico&family=Reenie+Beanie&display=swap');
*{margin:0; padding:0; box-sizing:border-box;}
body{font-family: 'Montserrat', 'Open Sans', sans-serif; letter-spacing:1px; font-weight:500;}


/* header & nav */
header{width:100%; z-index:1; position:absolute;}
nav{width:100%; position:fixed;  padding:20px 0px; transition:.4s; background-color:rgb(255, 255, 255);}
nav li{display:inline-block; padding: 0 3em; list-style-type:none;}
nav a{text-decoration:none; color:black; font-size:12px; padding-bottom:5px; }
nav a:hover{border-bottom:2px solid rgb(174, 190, 165);}
#rightnav{float:right; width:33%; text-align:left;padding-top:5px;}
#leftnav{float:left; width:33%; text-align:right;padding-top:5px;}


/* logo */
#logo{padding-bottom:8px; width:33%; line-height:28px; float:left; text-align:center; transition:0.4s; text-decoration:none;}
#logo-text{font-family: 'Leckerli One', 'Cedarville Cursive', 'Loved By The King', 'Reenie Beanie', 'Pacifico', cursive; text-align:center; font-size:40px; transition:0.3s; color:black;}


/* index banner */
.banner{background-image:url(../images/banner.jpg); height:100vh;  margin:0 auto; background-size:cover; }
.banner-content{text-align:center; color:white; font-weight:200; width:100%; margin:0 auto; padding-top:35vh; top:0; background:rgba(68, 68, 68, 0.1); height:100vh;}
.banner-content h1{font-size:5vw; font-weight:500;padding-bottom:60px;}
.ban-btn{text-decoration:none; transition:0.2s; background-color:#ecdda6; 
    color:black; padding:25px 20px; text-align:center; font-size:16px; width:200px; text-decoration:none; margin:0 auto;}
.ban-btn:hover{color:white; background-color:transparent; border:2px solid white;}


/* index main div one */
.main-one{height:93vh; background-color:#ecdda6; padding:50px;}
#left-one{background-image:url(../images/glampin.jpg); height:100%; padding:50px; display:block; width:45%; float:left; background-size:cover; }
#right-one{width:55%; float:right; padding:100px; text-align:center; font-size:20px; line-height:30px;}
.main-btn{background-color:white; width:180px; padding:20px 30px; font-size:14px;  text-decoration:none; color:black;}
.main-btn:hover{text-decoration:underline; text-decoration-color:black;}


/* index main div two */
.main-two h2{font-weight:500;width:90%; margin:70px auto 40px; }
.main-places{width:90%; margin:0 auto; height:60vh;}
.main-place-img{width:20%; height:40vh; margin:0 auto; float:left;}
.main-place-img h4{padding-bottom:4px; width:95%; margin:0 auto;}
.main-place-img p{font-size:15px; width:95%; margin:0 auto;}
.main-place-img a{color:black; text-decoration:none;}
.main-place-img a:hover{text-decoration:underline;}

#img1{background-image:url(../images/place.jpg); width:95%; margin:0 auto; height:35vh; background-size:cover;}
#img2{background-image:url(../images/place2.jpg); width:95%; height:35vh;margin:0 auto; background-size:cover;}
#img3{background-image:url(../images/place3.jpg); width:95%; height:35vh; margin:0 auto;background-size:cover;}
#img4{background-image:url(../images/place4.jpg); width:95%; height:35vh;margin:0 auto; background-size:cover;}
#img5{background-image:url(../images/place5.jpg); width:95%; height:35vh; margin:0 auto;background-size:cover;}


/* index main div three */
.main-three{height:80vh; text-align:center; padding-top:5vh; background-color:rgb(174, 190, 165)}
.main-three-host{width:60%; background-color:white; height:45vh; margin:10vh auto;}
.main-three h2{padding:50px 0 20px 0; font-size:30px; font-weight:700;}
.main-three p{padding-bottom:40px;}
.main-three-btn{background-color:#ecdda6; width:180px; padding:20px 30px; font-size:14px;  text-decoration:none; color:black;}
.main-three-btn:hover{text-decoration:underline; text-decoration-color:black;}


/* email form */
.email-div{height:40vh; font-weight:300;  background-color:rgb(222, 231, 233) ; padding-top:50px; font-size:20px; text-align:center;}
.email-div h4{margin-bottom:50px;}
label{padding-right:12px;}
#email{padding:12px 5px; margin:0; border:1px solid grey;}
#email:focus{outline:none; }
#submit{border:none; margin:0; font-family:'Montserrat', sans-serif;  font-weight:500; text-transform:uppercase; font-size:12px; padding:13px;color:black;  cursor:pointer; background-color:#ecdda6}
#submit:hover{text-decoration:underline;}


/* places banner */
.banner-place{background-image:url(../images/tent2.jpg); height:100vh;  margin:0 auto; background-size:cover;}
.banner-place-content{color:white; font-weight:200; width:80%; margin:0 auto; padding-top:40vh; top:0; height:100vh;}
.banner-place h1{font-size:5vw; text-align:left; padding-bottom:20px;font-weight:500;}


/* places banner form */
.form-place{background-color:#ecdda6; border-radius:4px; padding:3vh 3%; height:16vh; color:black; width:95%; }
.form-place input{height:10vh; background-color:white; font-size:16px; float:left; border:none; font-family:'Montserrat', sans-serif;}
.form-place input:focus{outline:none;}
#search{padding-left:40px; width:55%; -webkit-appearance: none;box-shadow:3px 3px 10px rgba(131, 131, 131, 0.5)}
#search::-webkit-search-cancel-button{-webkit-appearance: none; -moz-appearance:none;}
#select{float:left; margin:0 1%; width:22%; font-family:'Montserrat', sans-serif; font-size:16px; height:10vh; padding-left:30px; 
    border:none; box-shadow:3px 3px 10px rgba(131, 131, 131, 0.5)}
#select:focus{outline:none;}
#place-submit{float:right; width:20%; background-color:rgb(174, 190, 165);height:10vh; padding:20px; cursor:pointer; text-align:center;  color:black; font-size:16px;}
#place-submit:hover{text-decoration:underline;}


/* places first div */
.place-one h2{font-weight:500;width:90%; margin:70px auto 40px; }
.places-one{width:90%; margin:0 auto; height:60vh;}
.place-img-one{width:20%; height:40vh; margin:0 auto; float:left;}
.place-img-one h4{padding-bottom:4px; width:95%; margin:0 auto;}
.place-img-one p{font-size:15px; width:95%; margin:0 auto;}
.place-img-one a{color:black; text-decoration:none;}
.place-img-one a:hover{text-decoration:underline;}


/* places second div */
.place-two h2{font-weight:500; width:90%; margin:0px auto 40px; }
.places-two{width:80%; margin:0px auto; height:51vh;}
.place-img-two{width:33%; height:40vh; margin:0 auto; float:left;}
.place-img-two h4{width:95%; margin:0 auto;}
.place-img-two a{color:black; text-decoration:none;}
.place-img-two a:hover{text-decoration:underline; }

#place-two-img1{background-image:url(../images/camping.jpg); width:95%; height:40vh; margin:0 auto;background-size:cover;}
#place-two-img2{background-image:url(../images/rv2.jpg); width:95%; height:40vh; margin:0 auto;background-size:cover;}
#place-two-img3{background-image:url(../images/glamping.jpg); width:95%; height:40vh; margin:0 auto;background-size:cover;}


/* places third div */
.place-three h2{font-weight:500; width:90%; margin:70px auto 40px; }
.places-three{width:85%; margin:60px auto 40px; height:40vh;}
.place-list ul{list-style-type: none;}
.place-list li{padding-bottom:18px; font-size:15px; width:95%; margin:0 auto;}
.place-list{width:20%; height:40vh; margin:0 auto; float:left;}
.place-list a{color:black; text-decoration:none;}
.place-list a:hover{text-decoration:underline;}


/* about page */
.banner-about{background-image:url(../images/about.jpg); height:100vh;  margin:0 auto; background-size:cover;}
.about-us{padding:40px 100px; width:70%; height:38vh;}
.about-us p{line-height:25px; padding-bottom:100px;}
.about-us-two{width:80%;padding:30px 100px; margin:80px auto 80px auto;height:80vh;}
table{height:30vh; width:100%;}
.right{width:30%; text-align:left;}
tr:nth-of-type(even){background-color:rgb(245, 245, 245)}
td{padding:25px;}
tr{width:100%;}
th{text-align:left; font-size:20px;padding-left:25px;padding-bottom:20px;}


/* account */
.account{height:100vh; background-color:#ecdda6; }
#left-account{background-image:url(../images/account.jpg); height:100%; display:block; width:45%; float:left; background-size:cover; }
#right-account{width:55%; float:right; padding:0px 120px;text-align:center; font-size:20px; line-height:30px;}
#right-account h2{padding-top:28vh; padding-bottom:20px; margin:0;font-weight:500;}
#right-account p{font-size:16px; padding-bottom:20px;}
#account-email, #account-password{height:8vh; padding:0 20px; font-family:'Montserrat', sans-serif;margin:6px auto; font-size:16px; width:70%;}
#account-submit{height:8vh; width:70%; padding:0 20px;  margin:6px auto; font-size:16px; border:none; background-color:rgb(174, 190, 165); font-family:'Montserrat', sans-serif}
#account-submit:hover{cursor:pointer;}
#account-email:focus{outline:none;}
#account-password:focus{outline:none;}
#account-submit:focus{outline:none;}
#account-submit:hover{text-decoration:underline;}
#right-account a{text-decoration:none; font-size:14px; color:black;}
#right-account a:hover{text-decoration:underline;}


/* contact first div */
.contact{height:120vh; background-color:rgb(222, 231, 233)}
#left-contact{background-image:url(../images/contact.jpg); height:100%; display:block; width:45%; float:left; background-size:cover; }
#right-contact{width:55%; float:right; padding:0px 120px;text-align:center; font-size:20px; line-height:30px;}
#right-contact h2{padding-top:23vh; padding-bottom:20px; margin:0;font-weight:500;}
#right-contact p{font-size:16px; padding-bottom:20px;}
#contact-email, #contact-password, #contact-fn, #contact-ln{height:8vh; font-family:'Montserrat', sans-serif; padding:0 20px; margin:6px auto; font-size:16px; width:70%;}
#contact-submit{height:8vh; width:70%; padding:0 20px;  margin:6px auto; font-size:16px; border:none; background-color:rgb(174, 190, 165); font-family:'Montserrat', sans-serif}
#contact-submit:hover{cursor:pointer;}
#contact-email:focus{outline:none;}
#contact-password:focus{outline:none;}
#right-contact a{text-decoration:none; font-size:14px; color:black;}
#right-contact a:hover{text-decoration:underline;}
#contact-text{width:70%; padding:20px 20px; margin:6px auto; font-family:'Montserrat', sans-serif; font-size:16px;}
#contact-text:focus{outline:none;}
#contact-submit{height:8vh; background-color:#ecdda6; font-size:16px; width:70%; margin:6px auto; border:none; font-family:'Montserrat', sans-serif;}
#contact-submit:focus{outline:none;}
#contact-submit:hover{text-decoration:underline;}


/* contact second div */
.contact-two{width:80%; display:block; margin:50px auto; height:20vh;}
.contacts{width:33%; float:left; padding:30px; height:20vh; text-align:center;}
.contacts h4{padding-bottom:15px;}
.contacts a{color:black; text-decoration:none;}
.contacts a:hover{text-decoration:underline;}


/*footer */
footer{padding:50px 0; text-align:center; font-weight:300;}
footer a{color:black; text-decoration:none;}


/* responsive */
.burger{position:absolute; right:50px; top:20px; font-size:40px; cursor:pointer; color:white; display:none; padding:16px 20px;}
#medianav{display:none}
#media-logo{padding-bottom:8px; display:none; width:100%; line-height:28px; float:left; text-align:center; transition:0.4s; text-decoration:none;}
#media-logo-text{font-family: 'Leckerli One', 'Cedarville Cursive', 'Loved By The King', 'Reenie Beanie', 'Pacifico', cursive; text-align:center; 
    font-size:40px; transition:0.3s; color:white;  margin-top:45px;}
#media-logo-text a{text-decoration:none; color:white; }
#see-more{display:none;}
.responsive-form-place{display:none;}
#left-cover{display:none;}


/* media */
@media only screen and (max-width:1100px){
    #media-logo, #media-logo-text{display:block;}
    .burger{display:block;}
    #medianav:checked~nav{display:block;}
    nav{display:none; margin:100px 10%; width:80%;}
    #logo{display:none;}
    #rightnav{width:100%; float:none;  margin:0; text-align:center;}
    #leftnav{width:100%; float:none; margin:0; text-align:center;}
    nav li{width:100%; display:block; margin:0 auto; height:5vh; padding:0px;}
    
    #left-one{display:none;}
    #right-one{width:100%; padding:20px;height:60vh;}
    .main-one{height:60vh;}
    .main-places{width:90%; margin:0 auto; height:58vh;}
    .main-place-img{width:20%; height:40vh; margin:0 auto; float:left;}
    .main-place-img h4{display:none;}
    .main-place-img p{display:none;}
    #see-more{display:block;}
    .main-three{height:70vh;}
    .main-three-host{height:45vh;}
    .main-three-host p {margin:0 10px;}

    .place-one h4{display:none;}
    .place-one p{display:none;}
    .place-list{width:50%;height:28vh;}
    .place-three{height:110vh;}
    .form-place{width:95%;}
    #select{padding-left:10px; font-size:13px;}
    #search{padding-left:10px; font-size:13px;}
    #place-submit{font-size:13px; padding:0px; font-family:'Montserrat', sans-serif;}

    #left-account{width:100%; height:120vh; margin-bottom:40px;}
    #right-account{width:90%; background-color:#ecdda6; height:90vh; margin:18vh 5%; padding:25px; position:absolute;}
    #right-account h2{padding-top:40px;}
    
    #left-contact{width:100%; height:123vh;}
    #right-contact{width:90%; background-color:rgb(222, 231, 233); height:100vh; margin:18vh 5%; padding:25px; position:absolute;}
    .contacts{width:100%;}
    #right-contact h2{padding-top:40px;}

    .about-us{height:52vh; text-align:center; width:80%;padding:0; margin:40px auto;}
    .about-us-two{width:80%; margin:0 auto; height:90vh;padding:0;}
}