@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */


/* Global font settings */
body, p, #menu li, .radio, .Camo, .MapWrapper, .AdDescription, .Dev-Map {
    font-family: 'Josefin Slab', serif;
}

p {
    font-size: 30px; /* Adjusted for readability */
}

h1, h2, h3, h4 {
    font-family: 'Cinzel', serif;
    font-weight: 400;
	text-align:left;
}


.topnav {
	display:none;
}

.topnav a {
	display:none;
}

.dropdown {
	width:100%;
	height:55px;
    background-color:#cdcdcd;
    position: relative;
    display:block;
}

.Logo2 {
    position:relative;
	display:block;
    width: 80px;
    height: 35px;
	margin-top:-15px;
	margin-left:100px;
    padding-right: 60px;
	z-index:200;

}



/* Menu toggle */

#menuToggle
{
  display: block;
  position: relative;
  top: 15px;
  left: 15px;
  
  z-index: 25;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 20; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/* hamburger */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #44575d;
  border-radius: 3px;
  z-index: 25;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* Transform hamburger into a crossmark. */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #44575d;
}


#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * absolute positioned at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 180px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 120px;
  
  background:#cdcdcd;
  list-style-type: none;
  text-decoration:none;

  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 16px;
  color:#44575d;
  font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
  font-size:16px;
  text-decoration:none;
}

#menu li:hover {
    color: #edae27;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

/* Add a color to the active/current link */
.menu a.active {
    background-color:rgba(102,51,51,.7);
    color:#FFF;
}

a:link, a:visited {
	color:#BAB1AE;
    text-decoration: none;
    cursor: auto;
}

a:link:active, a:visited:active {
   color:#FFF;
   text-decoration: none;
}

/* End of Menu toggle */

/* Back to top button */

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 40px; 
    right: 30px;
    z-index: 99; 
    border: none;
    outline: none;
    background-color:#b7a265;
    color: white; 
    cursor: pointer;
    padding: 15px; 
	box-shadow: 5px 5px 10px rgba(51,51,51,.4);
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/* End of back to top button */


h1 {
	color:#eae9e8;
	font-size:150%;
	line-height:1.1;
}


h4 {
	color:#718390;
	font-size:180%;
	font-family: 'Cinzel', 'Playfair Display', serif;
	line-height:1;
	text-align:left;
	}

h3 {
	font-size:14px;
	line-height:150%;
	color:#fff;
	}
	
h5 {
	color:#b7a265;
	font-size:110%;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-weight:200;
}


p {
	font-size:90%;
}



.copyrightline {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #777777;
	text-align:justify;
}
.Connect {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 9px;
	color: #BAB1AE;
	text-align:left;
}	


/* Mobile layout */


.gridContainer {
	width: 100%;
	max-width: 1232px;
	padding-left: 0%;
	padding-right: 0%;
	margin: 0%;
}

 


.Smartphone {
  width:100%;
  position: relative;
  height: 600px;
  overflow: hidden;
 }
  

.Desktop {
	display:none;
	}

.Handy {
  width: 60%;
  height: 160px;
  margin-top:5%;
  margin-left:15%;
  margin-right:15%;
  padding-right:5%;
  padding-left:5%;
  background-image:url(../_images/CS-Logo-gold.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  position: absolute;
  z-index:10;
}


.slider {
	overflow: hidden;
	height: 600px;
	width: 100%;
	margin-left:0%;
	margin-right:0%;
	margin-top:0px;
	display:block;
	z-index:-200;
	position: scroll;
}

.slider figure div{
	width: 33.333%;
	float: left;
}

.slider figure img{
	width: 100%;
	float: left;
}

.slider figure{
	position: relative;
	width: 300%;
	margin: 0;
	left: 0;
	animation: 30s slidy infinite;
	overflow:hidden;
}


.FirstContainer {
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	position:relative;
	display:block;
	background-color:#f3f1ef;
}

.Situation {
	width:80%;
	margin-left:5%;
	margin-right:5%;
	padding-bottom:20px;
	padding-right:5%;
	padding-left:5%;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	background-color:#f3f1ef;
	color:#b7a265;
	line-height:1.7;
	z-index:20;
}




.Pattern {
	width:100%;
	height:60px;
	top:-80px;
	background-image:url(../_images/Mayan-Pattern.svg);
	background-size:contain;
	background-repeat:repeat-x;
	background-color:#f3f1ef;
	z-index:200;
}


.RetailStrategy {
	width:100%;
	padding-bottom:20px;
	min-height:80px;
	position: relative;
	display:block;
	background-image:url(../_images/LeavesH.jpg);
	background-size:cover;
	background-attachment:scroll;
	background-repeat:no-repeat;
	
}

.RetailContainer {
	width:100%;
	padding-top: 40px;
	padding-bottom: 80px;
	position:relative;
	display:block;
	background-color:#bebdb2;
	background-image:url(../_images/Mayan-Pattern-Sand.svg);
	background-repeat:repeat;
	background-size:auto;
}


.OurCoffee {
	width:75%;
	background-color:#eee;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	padding-top: 40px;
	padding-left:7.5%;
	padding-right:7.5%;
	padding-bottom: 40px;
	margin-left:5%;
	margin-right:5%;
	margin-top:40px;
	margin-bottom:40px;
	color:#b7a265;
	line-height:1.7;
	z-index:20;
}

.SideCoffee {
	width:90%;
	min-height:400px;
	margin-right:5%;
	margin-left:5%;
	background-image:url(../_images/Palapa.jpg);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;

}

.small-logo {
	width:40%;
	margin-right:20%;
	margin-left:40%;
	padding-bottom:40px;
	margin-right:0%;
	margin-top:20px;
	margin-bottom:80px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
}

.Caye {
	width:100%;
	padding-top: 40px;
	padding-bottom: 20px;
	position:relative;
	min-height:600px;
	display:block;
	background-color:#bebdb2;
	background-image:url(../_images/Turquoise_seaV.jpg);
	background-repeat:repeat-x;
	background-size:cover;
	background-position:center;
	background-attachment:scroll;
}


.FloorplanText {
	width:75%;
	background-color:rgba(243,241,239,.9);
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	padding-top: 20px;
	padding-left:7.5%;
	padding-right:7.5%;
	padding-bottom:60px;
	margin-left:5%;
	margin-right:5%;
	margin-top:20px;
	margin-bottom:20px;
	color:#b7a265;
	line-height:1.7;
	z-index:20;
}

.FloorplanPic {
	width:90%;
	min-height:300px;
	margin-right:5%;
	margin-left:5%;
	background-image:url(../_images/Yachtsman.jpg);
	opacity:.95;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
}



.SideCoffee2 {
	width:100%;
	min-height:250px;
	margin-right:0%;
	margin-left:0%;
	margin-top:60px;
	background-image:url(../_images/3D-rendering.jpg);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;

}

.OurCoffee2 {
	width:70%;
	background-color:#eee;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	padding-top: 40px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom: 40px;
	margin-left:10%;
	margin-top:80px;
	margin-bottom:80px;
	color:#b7a265;
	line-height:1.7;
	z-index:20;
}

.Specials {
	Position: relative;
	display:block;
	width:100%;
	padding-top:20px;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:0px;
	padding-bottom:40px;
	background-color:#BEBDB2;
}

.Dev-Map {
	Position: relative;
	display:block;
	margin-left:10%;
	width:90%;
	padding-top:20px;
	margin-right:0%;
	margin-bottom:20px;
	padding-bottom:20px;
	background-color:#BEBDB2;
	text-align:center;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:120%;
	color:#718390;
}

.MapWrapper {
	width:90%;
	padding-top:0px;
	margin-left:5%;
	margin-right:5%;
	margin-top:0px;
	padding-bottom:0px;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	color:#b7a265;
	line-height:1.7;
}

.InteractiveMap {
	width:100%;
	margin-top:0px;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:40px;
	z-index:100;

}

.InteractiveMap img {
	width:100%; 
	background-repeat:no-repeat;
	background-size:contain;

}



.InteractiveMap:hover {
	background-image:url(../_images/Interactive-Map-Active.jpg);
	cursor:pointer;
	width:100%;
	background-repeat:no-repeat;
	background-size:contain;
	z-index:200;	
}




 /* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.2;}

/* The Modal (background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(153,153,153,0.9);
	color:#eee;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	color:fff;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}



/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}



.OurBeer {
	width:40%;
	background-color:#eee;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	padding-top: 40px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom: 40px;
	margin-bottom:40px;
	margin-left:5%;
	margin-top:80px;
	margin-bottom:80px;
	margin-right:10%;
	color:#b7a265;
	line-height:1.7;
	position:relative;
}







.Camo {
	text-align:center;
	padding-top: 10px;
	  font-family:Georgia, "Times New Roman", Times, serif;
  color:#FFF;
  font-size:24px; 
  position:relative;
  display:block;
}



.SecondContainer {
	padding-top: 30px;
	padding-left:50px;
	padding-right:50px;
	position:relative;
	min-height: 760px;
	clear:right;
	color:#b7a265;
	padding-bottom: 80px;
	position:relative;
	display:block;
	
}


.Branding {
	list-style-type: none;
    margin-top: 10px;
    padding-left: 0;
	padding-bottom:40px;
	position:relative;
	dispaly:block;
}






.AdContainer {
	width:90%;
	margin-left:5%;
	margin-right:5%;
	padding-bottom: 20px;
	position:relative;
	display:block;

}

.image-row {
	min-height:700px;
	width:90%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left:5%;
	margin-right:5%;
	padding-bottom:20px;
	position:relative;
	display:block;

}


.sectThree3 {
	width:100%;
	padding-bottom:40px;
	position:relative;
	display:block;
	background-color:#f2f4f5;
}



.AdDescription {
	width:75%;
	padding-top:20px;
	margin-left:5%;
	margin-right:5%;
	margin-top:40px;
	padding-bottom:60px;
	padding-left:7.5%;
	padding-right:7.5%;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	color:#b7a265;
	background-color:#ddd;
	line-height:1.7;

}

.OneMinute {
	width:100%;
	margin-top:40px;
	padding-bottom:40px;
}


#Footer3 {
	margin-left:0;
	margin-bottom:0;
	padding-bottom:20px;
	width: 100%;
	display:block;
	flex-direction:row;
	justify-content: center top;
	background-color:#E7E7E7;
	font-family: 'Lato', sans-serif;
    font-weight: 700;
	font-size: 18px;
	line-height:2;
	color: #000000;
}
#Info2 {
	margin-left:7.5%;
	padding-top:10px;
	padding-bottom:20px;
	width:47.5%;
	display:block;
	font-size:12px;
	text-decoration:none;
	font-family: 'Lato', sans-serif;
    font-weight: 700;
	line-height:1.5;
	background-color:#E7E7E7;
	color: #000000;
}

#LogoBox {
    background-image: url("../_images/Ignite-logoMd.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%; /* Ensures responsiveness */
    max-width: 200px; /* Constrains max width to 300px */
    max-height: 80px; /* Maintains aspect ratio */
    padding-top: 100px;
	padding-bottom: 0;
	padding-left: -25px;
	text-indent: 20px; /* Indents the first line by 20px */
}

#LogoBox2 {
    width: 100%; /* Ensures responsiveness */
    max-width: 250px; /* Constrains max width to 300px */
	padding-left: 40px;
	position: relative;
	height: 60px;
	margin-bottom: 10px;
}


#Info2 a {
	color: #000000;
	text-decoration:none;
	cursor:pointer;

}

#Info2 a:visited {
	color: #777777;
	text-decoration: none;
    cursor: pointer;

}

#Icons2 {
	margin-left:22.5%;
	margin-top:20px;
	width: 22.5%;
	margin-right:0%;
	display: flex;
	flex-direction: column;
  	justify-content:top;
	padding-top:20px;
	background-color:#E7E7E7;
	color: #536e84;
}

.Social {
	width: 25%;
	height:40px;
	display: inline-block;
}

.Social img {
	width: 25px;
	height:25px;
	display: inline-block;
	opacity:.5;	
}

.Social img:hover {
	opacity:1;	
	cursor:pointer;
}


.copyright {
	position:relative;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:0;
	padding-top:10px;
	padding-bottom:0px;
	padding-right:10%;
	padding-left:10%;
	width:80%;
	min-height:40px;
	display: block;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	font-color:#536e84;
	background-color:#E7E7E7;
}

/* Tablet Layout: 480px and below. */


@media only screen and (min-width: 481px) {
	
.image-row {
	min-height:1320px;

}	
	
	
.Dev-Map {

	font-size:140%;
}

.Smartphone {
  display:none;
 }
  

.Desktop {
  display:block;
  width:100%;
  position: relative;
  height: 300px;
  overflow: hidden;
}


/* Slideshow container */
.slideshow-container {
  width:100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.7);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.Threeedots {
	Width: 100%;
	height: 600px;
	position:relative;
	top:-200px;
	
}

.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  top:-200px;
  z-index:20;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .7}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .7}
  to {opacity: 1}
}



input {
  display: none;
}

.radio {
	width: 15px;
	height: 15px;
	overflow: hidden;
	margin: 10px 10px 0 0;
	padding: 0;
	text-align: center;
	font-family:"Times New Roman", Times, serif;
	text-decoration: none;
	font-size: 14px;
	color: #000;
	font-weight: 900;
	cursor: pointer;
	border: 2px solid #fff;
	border-radius: 50%;
	display: inline-block;
  	transition: background-color .4s;
	opacity:.6;
	top:500px;
	z-index:400;
	position:relative;
}

.radio:hover {
  background-color: #727272;
}

input:checked ~ .radio {
	color: #FFF;
	background-color: #000;
  	opacity: 1;
}

.img-box {
  width:100%;
  min-height:600px;
  margin:0px auto;
  position: relative;
  overflow: hidden;
}

#one, #two, #three {
  opacity: 0;
  -webkit-transform: translate(0,30px);
  transition-property: -webkit-transform, opacity;
  transition-duration: .5s;
  position: absolute;
}

#img-1:checked ~ .img-box #one,
#img-2:checked ~ .img-box #two,
#img-3:checked ~ .img-box #three {
  opacity: 1;
  -webkit-transform: translate(0,0);
}

#img-1:checked ~ .nav label #dot-1.radio,
#img-2:checked ~ .nav label #dot-2.radio,
#img-3:checked ~ .nav label #dot-3.radio {
  color: #FFF;
  background-color: #000;
}

.nav {
  width: 120px;
  margin: 0 auto;
}


.radio {
	width: 15px;
	height: 15px;
	overflow: hidden;
	margin: 10px 10px 0 0;
	padding: 0;
	text-align: center;
	font-family:"Times New Roman", Times, serif;
	text-decoration: none;
	font-size: 14px;
	color: #000;
	font-weight: 900;
	cursor: pointer;
	border: 2px solid #fff;
	border-radius: 50%;
	display: inline-block;
  	transition: background-color .4s;
	opacity:.6;
	top:500px;
	z-index:400;
	position:relative;
}

.radio:hover {
  background-color: #727272;
}


.Handy {
  width: 30%;
  height: 160px;
  margin-top:5%;
  margin-left:30%;
  margin-right:30%;
  padding-right:5%;
  padding-left:5%;
  background-image:url(../_images/CS-Logo-gold.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  position: absolute;
  z-index:10;
}

.FirstContainer {
	width:100%;
	padding-top:40px;
	padding-bottom:0px;
	display:block;
	background-color:#f3f1ef;
	overflow:hidden;
	position:relative;
	z-index:200;
}

.MapWrapper {
	width:80%;
	padding-top:0px;
	margin-left:10%;
	margin-right:10%;
	margin-top:0px;
	padding-bottom:0px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	text-align:justify;
	color:#b7a265;
	line-height:1.8;

}

.InteractiveMap {
	width:100%;
	padding-bottom:40px;
	z-index:100;
}

.InteractiveMap img {
	width:100%;
	background-repeat:no-repeat;
	background-size:contain;
}

.InteractiveMap:hover {
	width:100%;
	background-image:url(../_images/Interactive-Map-Active.jpg);
	cursor:pointer;
	background-repeat:no-repeat;
	background-size:contain;
	z-index:200;	
}

.small-logo {
	width:30%;
	margin-right:30%;
	margin-left:40%;
	padding-bottom:40px;
	margin-right:0%;
	margin-top:20px;
	margin-bottom:80px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;

}
	
/* Desktop Layout: 480px and below. */
	
@media only screen and (min-width: 769px) {	

p {
	font-size:100%;
}



.dropbtn {
    display:none;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    display:none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    display: none;
}
.dropdown {
	display:none;
}

.dropdown-content {
    top:-400px;
	z-index: -100;
}

.topnav {
   	display:block;
    background-color:#DDD;
    overflow:hidden;
	width:86%;
	padding-left: 7%;
	padding-right:7%;
	z-index:200;
	position: relative;
}

.logo {
    display: inline-block;
    vertical-align: central;
    width: 144px;
    height: 55px;
	margin-top:-15px;
	margin-left:24px;
    padding right: 60px;
       /* if you want it vertically middle of the navbar. */
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: inline-block;
	position:relative;
	height:35px;
    color: #536e84;
    text-align: center;
	vertical-align:-20px;
	padding-top: 20px;
	badding-bottom:12px;
	padding-left:16px;
	padding-right:16px;
    text-decoration: none;
	font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: rgba(0,0,0,.7);
    color: white;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color:rgba(102,51,51,.7);
    color: #536e84;
}

a:link, a:visited {
	color:#536e84;
    text-decoration: none;
    cursor: auto;
}

a:link:active, a:visited:active {
   color:#536e84;
}

.gridContainer {
	width: 100%;
	max-width: 1232px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}

h1 {
	color:#eae9e8;
	font-size:180%;
	line-height:1.2;
}

	
h5 {
	color:#b7a265;
	font-size:120%;
	font-family: 'Cinzel', 'Playfair Display', serif;
	font-weight:200;
	}

.Smartphone {
  width:100%;
  position: relative;
  height: 600px;
  overflow: hidden;
}
  
.Smartphone {
  display:none;
}
  

.Desktop {
  display:block;
  width:100%;
  position: relative;
  height: 600px;
  overflow: hidden;
}


/* Slideshow container */
.slideshow-container {
  width:100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.7);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.Threeedots {
	Width: 100%;
	height: 600px;
	position:relative;
	top:-200px;
	
}

.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  top:-200px;
  z-index:20;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3s;
  animation-name: fade;
  animation-duration: 3s;
}

@-webkit-keyframes fade {
  from {opacity: .7}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .7}
  to {opacity: 1}
}



input {
  display: none;
}

.radio {
	width: 15px;
	height: 15px;
	overflow: hidden;
	margin: 10px 10px 0 0;
	padding: 0;
	text-align: center;
	font-family:"Times New Roman", Times, serif;
	text-decoration: none;
	font-size: 14px;
	color: #000;
	font-weight: 900;
	cursor: pointer;
	border: 2px solid #fff;
	border-radius: 50%;
	display: inline-block;
  	transition: background-color .4s;
	opacity:.6;
	top:500px;
	z-index:400;
	position:relative;
}

.radio:hover {
  background-color: #727272;
}

input:checked ~ .radio {
	color: #FFF;
	background-color: #000;
  	opacity: 1;
}

.img-box {
  width:100%;
  min-height:600px;
  margin:0px auto;
  position: relative;
  overflow: hidden;
}

#one, #two, #three {
  opacity: 0;
  -webkit-transform: translate(0,30px);
  transition-property: -webkit-transform, opacity;
  transition-duration: .5s;
  position: absolute;
}

#img-1:checked ~ .img-box #one,
#img-2:checked ~ .img-box #two,
#img-3:checked ~ .img-box #three {
  opacity: 1;
  -webkit-transform: translate(0,0);
}

#img-1:checked ~ .nav label #dot-1.radio,
#img-2:checked ~ .nav label #dot-2.radio,
#img-3:checked ~ .nav label #dot-3.radio {
  color: #FFF;
  background-color: #000;
}

.nav {
  width: 120px;
  margin: 0 auto;
}





.Handy {
  width: 30%;
  height: 160px;
  margin-top:5%;
  margin-left:10%;
  margin-right:60%;
  padding-right:5%;
  padding-left:5%;
  background-image:url(../_images/CS-Logo-gold.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;
  position: absolute;
  z-index:20;
 }


.FirstContainer {
	width:100%;
	padding-top:40px;
	padding-bottom:0px;
	display:block;
	background-color:#f3f1ef;
	overflow:hidden;
	position:relative;
	z-index:200;
}

.Sun {
	width:500px;
	margin-left:60%;
	min-height:500px;
	z-index:15;
	background-image:url(../_images/Mayan_Sun.svg);
	background-position:top right;
	background-size:cover;
	background-repeat:no-repeat;
	animation: walk-left 61s infinite;
	transition-timing-function: linear;
	transform-origin:center;
	overflow:hidden;
	position: absolute;
	top:-150px;
	right:-150px;
	opacity:0.4;
	z-index:20;
}

.Pyramid {
	width:100%;
	margin-left:0%;
	min-height:350px;
	left:0px;
	bottom:100px;
	z-index:15;
	background-image:url(../_images/Mayan_Palace.svg);
	background-position:bottom left;
	background-size:contain;
	background-repeat:no-repeat;
	overflow:hidden;
	position: absolute;
	opacity:0.4;
	z-index:1;
}

.Situation {
	width:60%;
	margin-left:10%;
	margin-right:10%;
	padding-bottom:40px;
	padding-right:10%;
	padding-left:10%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	background-color:#f3f1ef;
	color:#718390;
	line-height:1.7;
	z-index:200;
	overflow:hidden;
}

@keyframes  walk-left {
	0% {
		transform:rotate(0deg)
	}
		
	100% {
		transform:rotate(360deg)
	}	

}



.Pattern {
	width:100%;
	height:80px;
	top:-80px;
	background-image:url(../_images/Mayan-Pattern.svg);
	background-size:contain;
	background-repeat:repeat-x;
	background-color:#f3f1ef;
}


.RetailStrategy {
	width:100%;
	padding-bottom:20px;
	min-height:80px;
	position: relative;
	display:block;
	background-image:url(../_images/Leaves.jpg);
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
	
}

.RetailContainer {
	width:100%;
	padding-top: 40px;
	padding-bottom: 80px;
	position:relative;
	display:block;
	background-color:#bebdb2;
	background-image:url(../_images/Mayan-Pattern-Sand.svg);
	background-repeat:repeat;
	background-size:auto;
}

.Region {
	Width:90%;
	margin:0 5%;
	display:flex;
	flex-direction: row;
  	justify-content: center;
	
}


.OurCoffee {
	width:47.5%;
	padding-top: 40px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom: 40px;
	margin-left:0%;
	margin-right:0%;
	margin-top:80px;
	margin-bottom:80px;
	background-color:#eee;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	color:#b7a265;
	line-height:1.7;
	z-index:20;
}

.SideCoffee {
	width:37.5%;
	margin-right:0%;
	margin-left:0%;
	padding-bottom: 40px;
	margin-top:80px;
	margin-bottom:80px;
	background-image:url(../_images/Palapa.jpg);
	background-size:cover;
	background-position:right bottom;
	background-repeat:no-repeat;
	position:relative;

}

.small-logo {
	width:40%;
	margin-left:50%;
	padding-bottom:40px;
	margin-right:0%;
	margin-top:20px;
	margin-bottom:80px;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;

}



.Caye {
	width:100%;
	padding-top: 40px;
	padding-bottom: 80px;
	position:relative;
	min-height:600px;
	display:flex;
	flex-direction: row;
  	justify-content: center;
	background-color:#bebdb2;
	background-image:url(../_images/Turquoise_seaH.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
}


.FloorplanText {
	width:35%;
	background-color:rgba(243,241,239,.9);
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	padding-top: 40px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom: 40px;
	margin-left:7.5%;
	margin-top:80px;
	margin-bottom:80px;
	color:#b7a265;
	line-height:1.7;
	z-index:20;
}

.FloorplanPic {
	width:42.5%;
	min-height:250px;
	margin-right:5%;
	margin-left:0%;
	background-image:url(../_images/Yachtsman.jpg);
	opacity:.95;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
}



.Coffee2 {
	width:80%;
	min-height:250px;
	margin-right:10%;
	margin-left:10%;
	background-image:url(../_images/3D-rendering.jpg);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;

}

.OurCoffee2 {
	width:70%;
	background-color:#eee;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	text-align:justify;
	padding-top: 40px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom: 40px;
	margin-left:10%;
	margin-top:80px;
	margin-bottom:80px;
	color:#b7a265;
	line-height:2.5;
	z-index:20;
}


.Specials {
	Position: relative;
	display:block;
	width:100%;
	padding-top:20px;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:0px;
	padding-bottom:40px;
	background-color:#BEBDB2;
}
.Dev-Map {
	Position: relative;
	display:block;
	margin-left:10%;
	width:90%;
	padding-top:20px;
	margin-right:0%;
	margin-bottom:20px;
	padding-bottom:20px;
	background-color:#BEBDB2;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	color:#eee;
}


.MapWrapper {
	width:70%;
	padding-top: 0px;
	margin-left:15%;
	margin-right:15%;
	margin-top:0px;
	padding-bottom:0px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	text-align:justify;
	color:#b7a265;
	line-height:1.8;

}



.InteractiveMap {
	width:100%;
	margin-top:0px;
	margin-left:0%;
	margin-right:0%;
	height:700px;
	padding-bottom:40px;

}

.InteractiveMap img {
	width:100%;

}

.InteractiveMap:hover {
	background-image:url(../_images/Interactive-Map-Active.jpg);
	cursor:pointer;
	width:100%;
	background-repeat:no-repeat;
	background-size:contain;
	
	z-index:200;
	
}



.OurBeer {
	width:40%;
	background-color:#eee;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	text-align:justify;
	padding-top: 40px;
	padding-left:5%;
	padding-right:5%;
	padding-bottom: 40px;
	margin-left:5%;
	margin-top:80px;
	margin-bottom:80px;
	margin-right:10%;
	color:#b7a265;
	line-height:2.5;
	position:relative;
}

.BeerOfMonth {
	width:20%;
	min-height:250px;
	margin-right:5%;
	margin-left:10%;
	background-image:url(../_images/BeerOfMonth.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	display:inline-block;

}





.Camo {
	text-align:center;
	padding-top: 10px;
	  font-family:Georgia, "Times New Roman", Times, serif;
  color:#FFF;
  font-size:24px; 
  position:relative;
  display:block;
}



.SecondContainer {
	padding-top: 30px;
	padding-left:50px;
	padding-right:50px;
	position:relative;
	min-height: 760px;
	clear:right;
	color:#b7a265;
	padding-bottom: 80px;
	display:block;
	
}


.Branding {
	list-style-type: none;
    margin-top: 10px;
    padding-left: 0;
	padding-bottom:40px;
	position:relative;
	dispaly:block;
}




.AdContainer {
	width:90%;
	margin-left:5%;
	margin-right:5%;
	padding-bottom: 20px;
	position:relative;
	display:block;

}

.image-row {
	min-height:700px;
	width:90%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left:5%;
	margin-right:5%;
	padding-bottom:20px;
	position:relative;
	display:block;

}


.sectThree3 {
	width:100%;
	padding-bottom:40px;
	position:relative;
	display:block;
	background-color:#f2f4f5;
}



.AdDescription {
	width:70%;
	padding-top: 20px;
	margin-left:10%;
	margin-right:20%;
	margin-top:40px;
	padding-bottom:60px;
	font-family:'Josefin Slab', Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	text-align:justify;
	color:#b7a265;
	background-color:#ddd;
	line-height:1.7;

}

.OneMinute {
	width:100%;
	margin-top:40px;
	margin-left:0%;
	margin-right:0%;
	padding-bottom:40px;
}







 /* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.2;}

/* The Modal (background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(153,153,153,0.9);
	color:#eee;
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	color:fff;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}



/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}





.slider{
	overflow: hidden;
	height: 600px;
	width: 100%;
	margin-left:0%;
	margin-right:0%;
	margin-top:0px;
	display:block;
	z-index:-200;
	position: scroll;
}

.slider figure div{
	width: 33.333%;
	float: left;
}

.slider figure img{
	width: 100%;
	float: left;
}

.slider figure{
	position: relative;
	width: 300%;
	margin: 0;
	left: 0;
	animation: 30s slidy infinite;
	overflow:hidden;
}

.SummaryTitle {
	min-height:200px;
	width:100%;
	padding-bottom:40px;
	position: relative;
	display:block;
	float:left;
}

.SummaryContainer {
	width:80%;
	margin-left:10%;
	margin-right:10%;
	background-color:#2d2624;
	padding-bottom:20px;
	border-radius:15px;
}

.SummaryContent {
	width:80%;
	padding-top: 50px;
	padding-left:10%;
	padding-right:10%;
	badding-bottom:0px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	text-align:justify;
	color:#eae9e8;
	background-color:#2d2624;
	line-height:1.8;
	padding-bottom:40px;
	border-radius:15px;
}

.subsection {
	margin:80px 0;	
}

.ResultsRow {
	width:87%;
	background-color:#2d2624;
	min-height:380px;
	position:relative;
	margin-left:13%;
	display:table;
	padding-bottom:20px;
}

.Quote0 {
	width:18%;
	float:left;
	background-color:#228a9d;
	height:auto;
	margin-top: 20px;
	margin-bottom:20px;
	margin-right:3%;
	margin-left:3%;
	padding-top:20px;
	padding-left: 15px;
	padding-right:15px;
	pabbing-bottom:20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:11px;
	line-height:1.8;
	text-align:justify;
	color:#eae9e8;
	dispaly:table-cell;
	border-radius:10px;
	}


#Footer3 {
	position:relative;
	margin-top:0px;
	margin-left:0;
	height:200px;
	width: 100%;
	display:block;
	background-color:#E7E7E7;
	font-family: 'Lato', sans-serif;
    font-weight: 700;
	font-size: 24px;
	line-height:2;
	color: #000000;
	text-align:left;
}

#Info2 {
	position: relative;
	margin-left: 10%;
	padding-top:10px;
	padding-bottom:10px;
	max-width:400px;
	display: block;
	font-family: 'Lato', sans-serif;
    font-weight: 700;
	font-size:14px;
	line-height:1.5;
	background-color:#E7E7E7;
	color: #000000;
}

#Info2 a {
	color: #000000;
	text-decoration:none;
	cursor:pointer;
}
	
#Icons2 {
	clear: none;
	float: right;
	margin-left:5%;
	margin-top:20px;
	width: 40%;
	min-height:40px;
	display: flex;
	flex-direction: row;
  	justify-content: center center;
	padding-top:20px;
	background-color:#E7E7E7;
	color: #536e84;
}

.Social {
	width: 20%;
	height:20px;
	display: inline-block;
	}

.Social img {
	width: 25px;
	height:25px;
	display: inline-block;
	opacity:.5;	
}

.Social img:hover {
	opacity:1;	
	cursor:pointer;
}

.copyright {
	position:relative;
	padding-left:10%;
	padding-right:10%;
	margin:0;
	padding-top:30px;
	padding-bottom:0px;
	width:80%;
	min-height:40px;
	display: block;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	color:#777777;
	font-size:12px;
	font-color:#536e84;
	background-color:#E7E7E7;
}




@keyframes slidy{
	0%{
		left: 0%
	}

	16%{
		left: 0%;
	}

	20%{
		left: -100%;
	}

	40%{
		left: -100%;
	}

	44%{
		left: -200%;
	}

	64%{
		left: -200%;
	}

	68%{
		left: -100%;
	}

	88%{
		left: -100%;
	}

	92%{
		left: 0%;
	}

	100%{
		left: 0%;
	}
}




/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
} 

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}