*{
  margin:0;
  padding:0;
  font-family: Century Gothic, Times, Times New Roman, Georgia, serif;

}

body{

  justify-content:center;
  background-image: url("img/background_image.png");

}



h2{
font-size:1.5em;
}

.container{
  width:77%;
  height:70%;
  padding-left:8%;
  padding-right:8%;
  
  overflow:hidden;
  margin:64px;
 

  

}

.logo{
  width:216px;
  cursor:pointer;
  
  position:relative;

    top: 2%;
    right: -19%;
    text-align: center;
    display: block;
    margin-top: 9px;
    margin-bottom: 26px;
    padding-right: 71px;

 
  
}

.small_logo{
width:200px;
cursor:pointer;

position:relative;

top:-20%;
right: -15%;
  margin-top: 16px;


}


nav{

  flex:1;
 

}

nav ul li{
  list-style: none;
  color:#2d2d2d;

  display:block;
  margin-top:10px;
  margin-bottom:10px;
  
}

nav ul li a{
  color: #999;
  text-decoration: none;
 

}

nav ul li a:hover{
  color:white;
}

.col-1 li{
list-style: none;
color:white;
padding-left:20%;


}

.col-1 li a{
  color: #999;
  text-decoration: none;
   font-size:100%;
}

.col-1 li a:hover{
  color:white;
}

.row{
  display:flex;
  
 align-content: flex-end;
  margin:50px 0px;
  border: 7px solid #fff;
  width:100%;
  
  

  
  
}

.col-1{
  flex-basis:50%;
  position:relative;
  
 
  
}

button{
  width:153px;
  cursor:pointer;
  padding:12px 10px;
  outline:none;
  color:#fff;
  background:#7d0913;
  border: 1px solid #845B40;
  border-radius:6px;
  margin-left:20%;
  
  
}

.new_detail li a{
 color:white;
  
}

.new_detail li{
padding-bottom:5px;
}

/*

.col-1::after{
  content:'';
  width:10px;
  height:57%;
  background:linear-gradient(#ff469f,#ff6062);
  position:absolute;
  left:-40px;
  top:8px;
} */


.slider{

  width: 100%;
  height: 500px;
  
  overflow: hidden;
}

.slides{
  width: 1000%;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
 
  
}

.slides input{
  display: none;
}

.slide{
  width: 20%;
  transition: 1s;
  
}

.slide img{
 
  width: 51%;
  height: 500px;
  
  
  
  

}


/*css for manual slide navigation*/

.navigation-manual{
  position: absolute;
  width: 760px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
  
  
}

.manual-btn{
  border: 2px solid #FFFFFF;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  
 
  
  
}

.manual-btn:not(:last-child){
  margin-right: 40px;
}

.manual-btn:hover{
  background: #808080;
 
}

#radio1:checked ~ .first{
  margin-left: 0;
}

#radio2:checked ~ .first{
  margin-left: -20%;
}

#radio3:checked ~ .first{
  margin-left: -40%;
}

#radio4:checked ~ .first{
  margin-left: -60%;
}

#radio5:checked ~ .first{
  margin-left: -80%;
}

#radio6:checked ~ .first{
  margin-left: -100%;
}

#radio7:checked ~ .first{
  margin-left: -120%;
}
#radio8:checked ~ .first{
  margin-left: -140%;
}



/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 760px;
  justify-content: center;
  margin-top: 460px;
  
}

.navigation-auto div{
  border: 2px solid #808080;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
  background: #808080;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
  background: #808080;
}

#radio3:checked ~ .navigation-auto .auto-btn3{
  background: #808080;
}

#radio4:checked ~ .navigation-auto .auto-btn4{
  background: #808080;
}

#radio5:checked ~ .navigation-auto .auto-btn5{
  background: #808080;
}

#radio6:checked ~ .navigation-auto .auto-btn6{
  background: #808080;
}

#radio7:checked ~ .navigation-auto .auto-btn7{
  background: #808080;
}

#radio8:checked ~ .navigation-auto .auto-btn8{
  background: #808080;
}

.col-2{
  position:relative;
  background-color: #f2f2e6;
  width:75%;


}



.description{
 

justify-content: space-between;
    padding: 7px;
    width: 100%;

 
}

.description h2{
  color: #7d0913;
  padding:10px;
  font-family: Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size:100%;

  
}

.description p{
  font-size:14px;
  padding:5px;
}

.description li{
margin-left:15px;
list-style-type: square;
}
.description a{
color:#7d0913;

}
.description a:hover{
color:#777;
}

.description h5{
margin:5px;
color:#777;
}
.remaining-description{

  margin-top:10px;
display:grid;
  
grid-template-columns: 50% auto;

}
.remaining-description p{
font-size:14px;
padding:5px;
}

.remaining-description h2{

font-size:1.5em;
padding:10px;
font-family: Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.remaining-description a{
color:#7d0913;
}

.remaining-description a:hover{
color:#777;
}

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

 

  nav ul li{
      display:block;
      margin-top:10px;
      margin-bottom:10px;
  }

  .row{
      flex-direction:column;
      margin:100px 0;
      width: 100%;
      
  }

  .col-2{
      flex-basis:100%;
      flex-direction: column;
      width:100%;
      height:100%;
    
     
  }
  .direction{
      flex-basis:100%;
  }


  .col-1{
      flex-basis:100%;
  }

 

  .col h2{
    flex-basis:100%;
  }

.description h2 {
  font-size:100%;
  color: #7d0913;
  padding: 0px;
  letter-spacing: normal;
  font-family: Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}
  .logo{
    width:160px;
    cursor:pointer;
    
    position:relative;
left:12%;
top:-20%;
  }
  .button1{
    
   
    margin:2%;
    position:relative;
    left:17%;
  }

  .small_logo{
    width:150px;
   
    
    position:relative;
    left:16%;
  }

  .description{
   background: #f2f2e6;
    left:9%;
    width: 90%;
  height: 100%;
   
   

  }

  button{
    width:110px;
    cursor:pointer;
    outline:none;
    color:#fff;
    background:#7d0913;
    border: 1px solid #845B40;
    border-radius:6px;
    
    
    
  }

  .container{
    width:100%;
    min-height:100%;
    
  
  }

  .col-2{
    position: relative;
    

  }

  .col-2 p{
font-size: 100%;

  }

  .slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slide img {
  width: 90%;
  height: 100%;
}

.navigation-manual {
  position: absolute;
  width: 100%;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.navigation-auto{
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 460px;
  
}

}



.button2{

  
  width:140px;
  cursor:pointer;
  margin-left:-150px;
  margin-top:8px;
  color:#fff;
  background:none;
  border:2px solid #fff;
  border-radius:6px;
  float:right;
  


  
  
  
 
}

div.gallery {
margin: 14px;
float: left;
width: 152px;
  padding-left:25px;
}



div.gallery img {
width: 80%;
height: 90px;
}

div.desc {
padding: 15px;
text-align: center;
}

.map{
  height:315px;
  width:550px;
  padding:0px;
  border:none;
  margin-left: 20px;

}

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

.col-1 li a {
    font-size: 80%;
}
     
     .new_detail li{
     
       font-size:80%;
     }

     
  .container{
 width:77%;
  height:70%;
    
  
  }

  .col-2{
    position: relative;
   
    

  }

  .col-2 p{
font-size: 100%;

  }

  .slider {
    width: 100%;
    height: 519px;
    overflow: hidden;
}
.slide img {
  width: 70%;
  height: 519px;
}

.navigation-manual {
  position: absolute;
  width: 100%;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.navigation-auto{
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 460px;
  
}
     
  }

  .rates-button {
  width: 40%;
  padding: 15px 30px;
  margin-left: 10px;
  font-size: 20px;
  margin-top: 25px;
}
  
.rates-button:hover {
  background-color: #242424;
}

@media only screen and (max-width: 500px) {
  .rates-button {
    width: 100% !important;
  }
}