:root {
    --color-primary: #eb2f64;
    --color-primary-light: #FF3366;
    --color-primary-dark: #BA265D;

    --color-primary-blue-1:rgb(47, 85, 114);
    --color-primary-blue-2:rgb(124, 147, 163);
    
    --color-primary-purple-1:rgb(140, 158, 255);




    --color-grey-light-1: #faf9f9;
    --color-grey-light-2: #f4f2f2;
    --color-grey-light-3: #f0eeee;
    --color-grey-light-4: #ccc;
    --color-grey-light-5: #778;
    --color-grey-light-6: rgba(0,0,0,.4);
    --color-grey-light-7: #f5f5f5;

    
    --color-grey-dark-1: #333;
    --color-grey-dark-2: #777;
    --color-grey-dark-3: #999;
    --color-grey-dark-0:rgba(36, 36, 28, 0.8);
    --color-grey-dark-4:rgb(154, 160, 186);

    --color-brown-light-1: rgb(213, 149, 65);

    --shadow-dark: 0 2rem 6rem rgba(0,0,0,.3);
    --shadow-light: 0 2rem 5rem rgba(0,0,0,.06);

    --line: 1px solid var(--color-grey-light-2);
}





/*General Styles*/
@keyframes fadein {
  100% {
    opacity: 1; } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  font: normal 16px "Quicksand", "Arial" , sans-serif;
  color: #333; }


body{
  background-color:#ffffff;

}



/*
nav {
  list-style: none; }
nav li a {
  text-decoration: none;
  opacity: 0.75;
  color: #fee; }
nav li a:hover {
  opacity: 1; }
*/
  
h2 a{
  text-decoration:none;
  color:#fff;


}
/*
section li.offers i{
    margin:auto;
    
}
*/

a.btn {
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  background-color: var(--color-grey-light-6);
  opacity: 1; 
  text-decoration:none;
  color:var(--color-grey-light-1);

}

.hero a.btn {
  padding: 20px 46px; }

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 80px; }

/* section:not(.hero):nth-child(even) {
    background-color: #f5f5f5; }
*/
section.packages{
   background-color: #f5f5f5;

}

.grid {
  width: 97%;
  max-width: 970px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style:none;

}

hr {
  width: 250px;
  height: 3px;
  background-color:var(--color-grey-light-5);
  border: 0;
  margin: 50px auto; }

section h3.title {
  text-transform: capitalize;
  font: 32px "Roboto", sans-serif;
  margin-bottom: 30px;
  text-align: center;
  color:var(--color-grey-dark-1);
  font-weight: 100;
  text-transform:uppercase;
 }

section h3.title strong.dest{
  color:var(--color-grey-dark-1);
  font-weight: 700; 

}

section p{
color:var(--color-grey-dark-1);
font-size:1rem;
}

section p {
  max-width: 775px;
  line-height: 1.75;
  padding: 0 20px;
  margin-bottom: 30px;
  text-align: center; }

@media (max-width: 800px) {
  section {
    padding: 0px 25px 0px 0px; } }

/*Header Styles*/
header {
  
  width: 100%;
 
  align-items: center;
  padding: 35px 100px 0;
  animation: 1s fadein 0.5s forwards;
  opacity: 0;
  color: #fff; 
  z-index:2;
  

}

header h2 {
  font-family: "Roboto", sans-serif; }
/*
header nav {
  display: flex;
  margin-right: -15px; }
header nav li {
  margin: 0 15px; }
  */

@media (max-width: 1180px) {
  header {
    padding: 0;
    flex-direction: column; }
  header h2 {
    margin-bottom: 15px; } }

/*Hero Styles*/
.hero {
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  color: #fff;
  z-index:-1;
    
}

.hero .background-image {
 background-image: url(../img/hero.jpg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-clip: content-box;
  background-size: cover;
  background-position: top;
  

  background-repeat:no-repeat;
  
  z-index: -1;
  background-color: #80a3db;
     }
@media (max-width: 670px){
    .hero .background-image {
 background-image: url(../img/hero-sm2.jpg);
    }
}

.hero h1 {
  font: bold 2rem "Roboto", sans-serif;
  margin-bottom: 15px;
  text-transform:uppercase;
    z-index: -1;

 }

.hero h3 {
  font: normal 28px "Open Sans", sans-serif;
  margin-bottom: 40px; }

.hero-content-area {
  opacity: 0;
  margin-top: 100px;
  animation: 1s slidefade 1s forwards;
  background-color: black;
  width:40%;
    height:20%;
  padding: 50px;
}

@keyframes slidefade {
  100% {
    opacity: 0.7;
    margin: 0; } }

@media (max-width: 800px) {
  .hero {
    min-height: 600px; }
  .hero h1 {
    font-size: 48px; }
  .hero h3 {
    font-size: 18px; }
  .hero h1 {
    font-size: 28px; }
  .hero a.btn {
    padding: 15px 40px; } }


    /* titles */

.title-pics{
 


}


/* destination section 'meals'  */

.section-meals {
    padding: 0;
}

.travelpictures-showcase {
    list-style: none;
    width: 100%;
}

.travelpictures-showcase li {
    display: block;
    float: left;
    width: 33%;


}

.travelpicture {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;

}

.travelpicture img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    vertical-align:bottom;
}

.travelpicture img:hover {
    opacity: 1;
    -webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);

}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}


/*Destinations Section*/





.destinations .grid li {
  height: 550px;
  
  background-clip: content-box;
  background-size: contain;
  background-position: center;
  list-style: none;

  background-repeat:no-repeat;

 }

.destinations .grid .wrapper-img-overlay-text{
  flex-basis: 36%;
  position:relative;
   }

.destinations .grid .wrapper-img-overlay-text-lg {
  flex-basis:100%;
  position:relative;
 }

.destinations .grid li.Xlarge {
  flex-basis: 100%;
   }

.destinations .grid li.large,
.destinations .grid li.small {
  border-radius:3px;
   }
 {
  border-radius:3px;
   }


.pics-grid{
  margin-top:40px;


}

.belize {
  position: relative; }

#corozal {
  position: absolute;
  top: 5%;
  left: 20%; }

@media (max-width: 600px)  {
    
    .destinations .grid li {
  height: 250px;
 

 }

    div.captcha--wrapper > .captcha{
 /*       width:100%;
        
        
      
    flex-direction: column;
    align-items: space-around;
    margin-top:20px;
    */

}

}
/*
  .travelpictures-showcase li {
    display: block;
    float: left;
    width: 80%;
}
.travelpicture img{
  margin:0 auto;
}
.travelpicture{
background-color:transparent;
}
*/


.wrapper-title{
	display:none;
}

section p{
  margin:0;
  font-size:0.85rem;
	padding:0;


}

.testimonials .quote{
margin:20px 0;

}

.travelpicture img {

    opacity: 0.7;
    width: 100%;
    height: auto;
    /*-webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; */
    transition:  opacity 0.5s;
}

.travelpicture img:hover {
    opacity: 1;
   /* -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08); */
}

.travelpictures-showcase li {
    display: block;
    float: left;
    width: 33%;



}


.popup__content{
    width:100%;
    
    
}

div.popup__wrapper-image{
    max-width:100%;
    margin-top:150px;
   
}
}



@media (max-width: 1100px) {
  .destinations .grid .wrapper-img-overlay-text,
  .destinations .grid .wrapper-img-overlay-text-lg {
    flex-basis: 100%; }

}

@media (max-width: 800px) {
  .destinations .grid .wrapper-img-overlay-text-lg,
 .destinations .grid .wrapper-img-overlay-text
  {
    flex-basis: 100%; }
.destinations .grid .wrapper-img-overlay-text
  {
    margin-bottom:30px; } }

/*
@media (max-width: 440px) {
  .destinations .grid li
   {
    height:400px;
  }
}
*/



.destinations .grid .wrapper-img-overlay-text:hover .img-text{
  opacity:1;
}

.location-links{
  color:var(--color-greydark-1);

}

figcaption{

position:absolute;
  bottom:0%;
  left:0;
  font-size:110%;
  color:var(--color-grey-light-1);
  background-color:var(--color-grey-dark-0);
  display:block;
  width:100%;

  padding:20px;
  
  opacity:.5;
  transition:all .7s;
  display:flex;
  

}

.figcaption--text{
  margin:0 auto;

}
figure{

position:relative;
with:90%;
margin: 0 auto;

}

.destinations .grid .wrapper-img-overlay-text-lg:hover .img-text-lg{
  opacity:1;
}
/*Packages Section*/
.packages .grid li {
  padding: 50px;
  flex-basis: 50%;
  text-align: center; }

.packages .grid li i {
  color: #8c9eff; }

.packages .grid li h4 {
  font-size: 30px;
  margin: 25px 0;
  color: #3f51b5; }

@media (max-width: 800px) {
  .packages .grid li {
    flex-basis: 100%;
    padding: 20px; 
    
    } }






/*Testimonials Section*/
.testimonials .quote {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  margin: 40px 0 25px;
  color:var(--color-brown-light-1); }

@media (max-width: 800px) {
  .testimonials .quote {
    font-size: 18px;
    margin: 15px 0; }
  .testimonials .author {
    font-size: 14px; } }

/*Contact Section
.contact form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 60%; }

.contact form .btn {
  padding: 18px 42px; }

.contact form input {
  padding: 15px;
  margin-right: 30px;
  font-size: 18px;
  color: #555;
  flex: 1; } */

@media (max-width: 1000px) {
  .contact form input {
    flex-basis: 80%;
    margin: 0 0 20px 0; } }

/*Footer Section*/
footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-image: linear-gradient(to top, rgba(30,30,30,.8), white);
  color: #fff;
  padding: 20px 0; }

footer ul {
  display: flex; }

footer ul li {
  margin-left: 16px; }

footer p {
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0.6;
  align-self: center; }

@media (max-width: 1100px) {
  footer {
    flex-direction: column; }
  footer p {
    text-align: center;
    margin-bottom: 20px; }
  footer ul li {
    margin: 0 8px; } }

.wrapper-map {
  display: flex; }



#wrapper-sous-massa {
  position: absolute;
  top: 10%;
  left: 45%;
  
  }

 #wrapper-lkest{

  position: absolute;
  top: 70%;
  left: 35%;

 

  }

 #wrapper-moon-landscape{

  position: absolute;
  top: 20%;
  left: 15%;

 

  }

  #wrapper-azgor{

  position: absolute;
  top: 22%;
  left: 47%;
 


  }

#wrapper-dra-valley{
  position: absolute;
  top: 25%;
  left: 18%;
  



}
   

#wrapper-jbel-sahro{
   position: absolute;
  top: 35%;
  left: 25%;
  



}

  #wrapper-bk-sunset{

  position: absolute;
  top: 49%;
  left: 30%;
  


  }


.image-container {
  position: relative;
  padding: 20px; }

.image-container img {
  width: 100%;
  height: auto; }

.hero {
  border-bottom: 10px solid;
	border-bottom-color: linear-gradient(to top, white, rgba(119,119,136,.5)) 30 stretch;
  
 }

/* mixins  */





/* Popup container - can be anything you want */


/* Add animation (fade in the popup) */


.popup{

position:fixed;
background-color:rgba(30,30,30,.85);
height:100vh;
width:100%;
top:0;
left:0;
opacity:0;
visibility:hidden;



}

.popup:target{
  opacity:1;
visibility:visible;

}

.popup__content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80%;
    height:500px;
    background-color:transparent;
    box-shadow: 0px 20px 40px rgba(30,30,30,.2);
    border-radius: 3px;
    display:flex;


}




.popup__image{
  max-width:100%;
  background-position:center;
  border-radius:3px;
}

.popup__wrapper-image{
    max-width:70%;
    height:auto;
    overflow:hidden;
    background-color:transparent;
    position:relative;
    margin:0 auto;
  


}

.popup__close{
  position:absolute;
  top:1%;
  right:2%;
  color:black;


}


nav {
  list-style-type:none;
  margin:0;
  padding:0;
  
}

/*Create a horizontal list with spacing*/
nav li {
  display:inline-block;
  margin:0;
  
}

#menu li a {
  display:block;
  min-width:140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  color: #fff;
  opacity:0.9;

  text-decoration: none;
  border:1px solid white;
  border-radius:3px;
  transition: opacity 2s;

}

#menu li:hover a{
  background:rgba(63, 81, 181, 0.8);

}

header{
display:flex;
justify-content:space-between;

}





ul {
list-style:none;

}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: var(--color-primary-blue-1);
  text-align: center;
  padding: 10px 0;
  display: none;
}


/* mobile menu */

#js--menu{
  display:none;

}

.mobile-menu{
display:none;

}








@media screen and (min-width : 763px){
  header{
position:absolute;
  }

    .contact-form-width{
    width:100% !important;
        margin-left:0;
}

}

/*
@media screen and (max-width : 1190px){
#menu li a {
  display:block;
  min-width:100px;
  height: 50px;
  padding:0 10px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  opacity:0.9;
  text-decoration: none;
  border:1px solid white;
  border-radius:3px;
  transition: opacity 2s;
}
} */
@media screen and (max-width : 762px){

  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
 

#js--menu{
  display:block;
  width:100vw;
  color:#fff;
  text-align:center;
  background-color:var(--color-primary-blue-1);
  font-size:1.25rem;
  height:2.8rem;
  padding:10px;
}

.mobile-menu li, .mobile-menu li a{
width:100vw;
background-color:var(--color-primary-blue-2);
}

.mobile-menu li:hover, .mobile-menu li a:hover{
width:100vw;
background-color:var(--color-primary-blue-1);
}

.mobile-menu li{

border:1px solid white;
 text-align:center;

}

#menu li a {
background:var(--color-primary-blue-2);
margin-bottom:0;   
}
.mobile-menu li a{
  
  
  height: 50px;
 
  line-height: 50px;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  color: #fff;
  opacity:0.9;
  
  text-decoration: none;
  
 
  transition: opacity 2s;


}
  #menu{
    
      display:none;
    
   
    
    


  }




  

  .wrapper-title{
display:none;

  }
}

@media screen and (max-width : 500px){
    
    .hero-content-area{
    width:80%;
    height:50%
}
  .hero-content-area h1{
font-size:28px;

  }
}

@media screen and (max-width : 780px){
        .hero-content-area{
    width:60%;
    height:50%
}
    

  .hero-content-area h1{
font-size:28px;

  }
}

@media screen and (max-width:1200px){
    .hero-content-area{
    width:60%;
    height:31%;

}

}

/* overlay menu  */


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
    opacity:.85;    
   
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

.wrapper-top-row{
	display:flex;
	justify-content:space-around;
	align-items:center;
	
	padding:15px;
	z-index:1;

}



.wrapper-fixed-bar{
	position:relative;


}

.wrapper-top-row{

position:fixed;
background-image:linear-gradient(to bottom, rgba(30,30,30,.8), white);
width:100%;
height:70px;

}

.wrapper-text-on-card{
	background:rgba(248,248,248,0.5);
	padding:25px;
	border-radius:3px;
	box-shadow:1px 1px 3px #000000;
	transition: all .2s;

}

.wrapper-text-on-card:hover{
box-shadow:2px 2px 5px #000000;
background:rgba(244,244,244,0.5);


}
strong.dest{
	text-shadow:.5px .5px 1px #000000;

}

.headerback{
	background-image: url(../img/headerback.jpg);
    

}

.lawfirm{
	background-image: url(../img/lawfirm-md.jpg);
   

}

.villa{
	background-image:url(../img/villa.jpg);
}

.menztailor{
	background-image:url(../img/menztailor-md.jpg);
}
.eatwell{
	background-image:url(../img/eatwell-md.jpg);
}
.chocolux{
	background-image:url(../img/chocolux.jpg);
}
.purnatur{
	background-image:url(../img/purnatur.jpg);
}
.flame{
	background-image:url(../img/flame.jpg);
}

.hotel{
	background-image:url(../img/hotel.png);
}
.travel{
	background-image:url(../img/travel.png);
}

.demo-websites{
	background-color:rgba(200,200,200,.3);


}


 #theImage {
        width: 100%;
        height: auto;
    }
    #container {
        width: 90%;
        margin: 0 auto;
    }


@media (max-width:500px){

	.contact form{
	width:100%;
    margin:auto;
	}
	.headerback{
	background-image: url(../img/interior-deco-rd.png);}
    
    .lawfirm{
	background-image: url(../img/lawfirm-rd.png);}
     .funder{
	background-image: url(../img/funder-rd.png);}
    
	.mixtape{
	background-image: url(../img/mixtape-rd.png);
	width:100%;
	height:auto;
	}
      .flame{
	background-image: url(../img/flame-rd.png);
	}
    .hotel{
	background-image: url(../img/hotel-rd.png);
	}
	.risotto{
	background-image: url(../img/risotto-rd.png);
	}
	.travel{
	background-image: url(../img/travel-rd.png);
	}
	.menshair{
	background-image: url(../img/menshair-rd.png);
	}

}

div.mobile-menu-span{
	display:flex;
	justify-content: center;

}

a{
	outline:0;
}



.zIndexMinusOne{
z-index:-1;
}

.overlay .closebtn{
    top:55px;
}


/*
@media screen and (max-width: 767px) {
.overlay{
display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.8;
		background: rgba(0,0,0,1);

}
}   */




.img-wrapper{
    z-index:1000;
}
.overlay a{
font-weight:900;
    color:white;
}

.wrapper-fixed-bar{
    z-index:10;
}

header{
    z-index:999;
}

.packages{
    z-index:1;

}

.contact{
  background-color:var(--color-grey-light-7);
    
}
.contact form input{
  max-width:500px;
margin:0 auto 30px;
}

textarea{
   border-radius:0; 
    max-width:500px;
    min-height:200px;
    margin:0 auto 30px;
}


.send-btn{
    height:30px;
    width:80px;
    background-color:white;
    border:solid #31436b 2px;
    border-radius:2px;
    color:black;
}

#contact-title{
margin-bottom:30px;
}

.form-control{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

header{
z-index:200;

}

section{
    z-index:1;
}
/*
div.captcha{
    display:flex;
    justify-content:center;
}
*/
button{
    margin:0 auto;
}

.form-complete{
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.captcha{
      display:flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top:20px;
    

}

.captcha--wrapper{
  display:flex;
    flex-direction: row;
    justify-content: center;
    
    margin-bottom:30px;
}
#capta_image{
    
}

#captcha_reload{
    
    text-decoration:none;
}

.wrapper--text-contact-us h2{
    text-align:center;
    margin-bottom:16px;
}

.wrapper--text-contact-us{
    
    margin-bottom:26px;
}

.wrapper--text-contact-us{
    max-width:500px;
}

    section i.fa{
        color:dodgerblue;
        margin: 50px 0 20px 0;

}

.row-editor{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;

}

.column{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    flex:1;
    padding:30px;
    justify-content: center;
    
    background-color: snow;
    margin:10px;
    
    
    

}

.text-column {
    display:flex;
    flex-direction: column;
}
.text-column p{
    text-align: left;
}

.text-column i,
.text-column h4{
    align-self: center;
}



@media (max-width: 700px) {
    .column{
        flex:100%;   }
    
}




.pics-websites{
    background-color:lightgray;


}

.captcha-btn{
    margin-left:34px;

}

  div.captcha{
        display:flex;
      flex-direction: column;
        justify-content: center;
        
        
}


@media screen and (max-width: 700px) {
    div.captcha{
        display:flex;
        justify-content: center;
        flex-direction: column;
        
}
    .captcha-btn{
        margin-left: 0;
        margin-top: 18px;
}
    
    .captcha-btn{
        height:40px;
}
    
}

.navbar{
    z-index:200;
}

.navbar-brand{
    padding-left: 30px;
}