@font-face{
    font-family: LinotypeZapfino-One;        
    src: url('../fonts/LinotypeZapfino-One.ttf'); 
}

body {
	background-color: #000;
	
	font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #9aa6af;
	text-rendering: optimizelegibility;
	
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	
	-moz-tap-highlight-color:rgba(0,0,0,0); 
	-moz-text-size-adjust: none;
	-moz-font-smoothing: antialiased;
	
	-ms-tap-highlight-color:rgba(0,0,0,0); 
	-ms-text-size-adjust: none;
	-ms-font-smoothing: antialiased;
}
a {text-decoration: none;color: #fff;}
a[href="http://www.mgiquitos.com"] { 
    color: #A9CF46;
    position: relative;         	
    padding: 0 4px 0 4px;
    font-size: 14px;
    z-index: 9999;
}

.container {
	overflow: hidden;
	background-color: #000;

/*  Prevents Flickering  */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}


header {
	height: 60px;
	position: relative;
	background-color: #222;
    /*background-color: #f3f5f6;*/
}
header h1 {
	color: #fff;
    /*color: #9aa6af;*/
	text-align: left;
    font-family: "LinotypeZapfino-One";
	font-size: 50px;    
	line-height: 60px;
	font-weight: normal;
	padding-left: 20px;
}
.hide{ display: none !important;}
.show{ display: block !important;}

.burger {
	position: absolute;
	float: left;
	padding: 10px;
	top: 4px;
	left: 10px;
	
	display: none;
}
.burger li {
	width: 30px;
	height: 4px;
	background-color: #fff;
	border-radius: 3px;
	margin: 5px 0;
}
.burger.open li {background-color: #d9dde1;}


/* BODY*/
.body-section section{
	width: 90%;
	padding: 15px;
	margin: 0px auto;

}
.body-section p{
	line-height: 25px;
	font-size: 14px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
	text-align: justify;
}
.body-section section > div{
	border: 1px dashed rgba(190, 196, 202, 0.9);
	padding: 15px;
	margin: 10px 0px 10px 0px;
	background-color: #313030;
}

.body-section article{
	display: inline-block;
	/*vertical-align: top;*/
	width: 40%;
	min-width: 220px;
	margin-left: 40px;
}
.body-section article > p{
	line-height: 25px;
	font-size: 14px;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
	text-align: justify;

}
.body-section img {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	margin-left: 40px;
}
/*  END BODY */

/*============= Form ====================*/
.body-section article.form{
	display: inline-block;
	width: 65%;
	min-width: 220px;
	margin-left: 10px;
}
.input-group{
	margin-bottom: 20px;
	display: inline-block;
	position: relative;
	margin-right: 20px;
}
span.input-group-btn{padding: 1px;}
.btn-success {
    color: #FFF;
	background-color: #00AC7A;
	border-color: #017D59;
	display: inline-block;
	height: 42px;
	width: 52px;
	vertical-align: top;
}
input.form-control{
	font-size: 12px;
	padding: 5px;
	width: 260px;
	height: 30px;
}
.text-group textarea:focus, input.form-control:focus {
    border-color: #00AC7A;
    outline: 5px none;
    transition: all 0.3s ease 0s;
}
.text-group{margin-bottom: 20px; width:91% }
.text-group textarea{
	width: 100%;
	resize:none;
}
.text-area{padding: 30px auto;}
.send{width: 92%}
.btn-send{
	float: right;
	font-size: 15px;
	width: 90px;
	height: 50px;
	color: #FFF;
	background-color: #00AC7A;
	border-color: #017D59;

}
	
li.body-section aside.contact{vertical-align: top; width: 32%}
aside.contact div{width: 100%;}
aside.contact ul > li{
	padding-top: 10px;
	border-bottom: 1px solid #DDD;
	padding-bottom: 10px;
}
aside.contact span{display: inline-block;vertical-align: top; margin-left: 5px;}

/*==============End form==================*/

/*================accommodations-section==============*/
.accommodations-section{
	width: 90%;
	margin: 0 auto;
} 
.accommodations-section section, aside{
	display: inline-block;
	vertical-align: top;
}
.accommodations-section section{
	width: 72%;
	margin-right: 20px;
	/*border: 1px white solid;*/
	padding: 10px;

}
.accommodations-section aside{
	width: 20%;
	padding: 10px 10px 10px 10px;
	margin-left: 20px;
	/*border: 1px white solid;*/
	background-color: #222;
}
	.tags-container{
		width: 100%;
		margin-top:10px;
		margin-bottom: 10px;
	}
	h4.heading{
		color: #6ADAB9;
		padding-bottom: 20px;
		position: relative;
		font-size: 18px;
		margin-bottom: 10px;
	}
	h4.heading::before{
		content: "";
	    position: absolute;
	    left: 0px;
	    bottom: 0px;
	    height: 2px;
	    width: 65px;
	    border-bottom: 2px solid #7F9AA0;
	    margin-bottom: 5px;
	}
	.tags-container ul{width: 100%; margin-bottom: 10px;}
	.tags-container ul >li {margin-bottom: 4px; margin-right: 1px; height: 32px; display: inline-block;}
	.tags-container  li > a{
		padding: 8px 10px;
		background: #0A0C0E none repeat scroll 0% 0%;
		color: #FFF;
		display: inline-block;
		font-size: 15px;
	}
.accommodations-section section > article{
	display: block;
	width: 100%
}
.accommodations-section article > p{
		font-size: 13px;
		line-height: 25px;
		text-align: justify;
	}
.accommodations-section section > img, video {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*=============END accommodations-section=============*/
/*============= Photo section ======================*/
section.photo-section{
	width: 95%;
	display: block;
}
section.photo-section article,
section.photo-section img{
	margin-left: 0px; width: 80%; margin: 0 auto;
}
section.photo-section img{padding: 10px;}
section.photo-section p{font-size: 14px; text-align: justify;}
	
section.photo-section .vertical{
	display: inline-block;
	vertical-align: top;
	height: 550px;
	width: 450px;
	margin-left: 55px;
}
/*============== end photo section==================*/

/*  Removable CSS  */

.header-section,
.body-section,
.footer-section,
.body-accommodations
{padding: 20px;}

.header-section {background: url('../img/bg.png') repeat scroll 0% 0% #333;}
.body-section {background: url('../img/bg.png') repeat scroll 0% 0% #333;}
.footer-section {background: url('../img/bg.png') repeat scroll 0% 0% #222;}

li.body-accommodations{background: url('../img/bg.png') repeat scroll 0% 0% #333;}

.placefiller {
	text-align: center;
	font-size: 20px;
	border: 1px dashed rgba(190, 196, 202, 0.5);
}
.header-section .placefiller {line-height: 300px;}
.header-section .title{ color: #fff; font-weight: bold; text-align: center; padding: 10px 0; }
.header-section .title h1{ font-family: "LinotypeZapfino-One"; font-size: 110px; padding: 10px 0 20px 0;}
.header-section .title span{ display: block; font-family: "arial";font-size: 15px;}
.header-section section{padding: 10px; margin: 0 auto; width: 80%}
.header-section section > img{margin: 0 auto; display: inline-block; width: 75%}
.header-section section > aside{
	display: inline-block;
	vertical-align: top;
	width: 20%;
}
.body-section .placefiller {line-height: 900px;}
.footer-section .placefiller {
	line-height: 200px;
	border: 1px dashed rgba(190, 196, 202, 0.9);
}
.footer-section p  { text-align: center; padding: 5px 0;}
.footer-section p  span{ display: block;}
a[href="http://www.mgiquitos.com"]:after{
        display: block;
        position: absolute;
        content: "";
        /*background: url('../img/logo_mg.png') center center no-repeat 64px 64px;*/
        background-image: url('../img/logo_mg.png');
        background-size: 64px 64px;
        background-origin: center center;
        background-repeat: no-repeat;
        right: -70px;
        bottom: 0;
        width: 64px;
        height: 64px;
        z-index: 9999;
        transform: rotate(0deg) scale(0);
        -moz-transform: rotate(0deg) scale(0);
        -webkit-transform: rotate(0deg) scale(0);
        -ms-transform: rotate(0deg) scale(0);
        transition: all ease-in-out 500ms 2ms;
        -webkit-transition: all ease-in-out 500ms 2ms;
        -moz-transition: all ease-in-out 500ms 2ms;
        -ms-transition: all ease-in-out 500ms 2ms;        
    }

    a[href="http://www.mgiquitos.com"]:hover:after{ transform:  rotate(360deg) scale(1); -moz-transform:  rotate(360deg) scale(1); -webkit-transform:  rotate(360deg) scale(1); -ms-transform:  rotate(360deg) scale(1); }

@media only screen and (min-width: 1367px) {
    header {
	height: 60px;
	z-index: 2;
	background-color: #060a0c;
	
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	
		/* starting point */
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	}
    
    .burger {display: block;}
	/*  Nav Drawer Layout  */
	nav {position: relative;}

	nav ul {
		height: 100%;
		overflow-y: auto;
	}
	nav ul li {
		display: block;
		float: none;
	}
	nav ul li a {
		padding: 20px 22px;
		letter-spacing: 3px;
		font-size: 14px;
        display: block;
	}
	nav ul li a.logo {
		display: none;
	}
	nav ul li a.active {
		color: #fff;
		background-color: #141e23;
	}
	nav ul li a:hover {
		color: #fff;
		background-color: #19252c;
	}
    
    nav li div{ 
        display: none;
        position:relative;   
        width: 100%;
        background-color:#226666;
    }
    
    /*nav li:hover div{
        display:block;        
    }
    nav li div ul{    
        display: block;    
    }
    nav li div li a{ display: block; padding: 10px 10px 10px 20px;}*/
    
	nav > ul > li:first-child > a.active,
	nav > ul > li:first-child > a:hover 
	{border-radius: 10px 0 0 0;}

	.header-section {margin-top: 60px;}

	/* NAVIGATION ANNIMATION */
	nav {
		width: 93%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		background-color: #1D2D35;
		border-radius: 8px;
		
		/* starting point */
		opacity: .3;
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-moz-transform: translate3d(5%,0,0)scale(.97);
		transform: translate3d(5%,0,0)scale(.97);
	}

	/*Nav Expanding Open Effect*/
	nav.open {
		opacity: 1;

		-webkit-transform: translate3d(0,0,0)scale(1);
		-webkit-animation: slideIn .35s ease-in-out;
		
		-moz-transform: translate3d(0,0,0)scale(1);
		-moz-animation: slideIn .35s ease-in-out;
		
		transform: translate3d(0,0,0)scale(1);
		animation: slideIn .35s ease-in-out;
	}
		@-webkit-keyframes slideIn {
			0%       {opacity: .3;
						-webkit-transform: translate3d(5%,0,0)scale(.97);}
			100%  {opacity: 1;
						-webkit-transform: translate3d(0,0,0)scale(1);}
		}
		@-moz-keyframes slideIn {
			0%      {opacity: .3;
						-moz-transform: translate3d(5%,0,0)scale(.97);}
			100%  {opacity: 1;
						-moz-transform: translate3d(0,0,0)scale(1);}
		}
		@keyframes slideIn {
			0%      {opacity: .3;
						transform: translate3d(5%,0,0)scale(.97);}
			100%  {opacity: 1;
						transform: translate3d(0,0,0)scale(1);}
		}

	/*Nav Shrinking Closed Effect*/
	nav.close {
		opacity: .3;
		
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-webkit-animation: slideOut .3s ease-in-out;
		
		-moz-transform: translate3d(5%,0,0)scale(.97);
		-moz-animation: slideOut .3s ease-in-out;
		
		transform: translate3d(5%,0,0)scale(.97);
		animation: slideOut .3s ease-in-out;
	}
	@-webkit-keyframes slideOut {
		0%      {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
	}
	@-moz-keyframes slideOut {
		0%      {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
	}
	@keyframes slideOut {
		0%      {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
	}

    header h1 {        
        text-align: center;
        font-size: 25px;
        padding-left: 25px;
        display: block;
    }
    /*.header-section .title{ padding: 5px 0; }
    .header-section .title h1{ font-size: 40px; padding: 10px 0 10px 0;}
    .header-section .title span{ font-size: 13px;} 
    .header-section img{margin: 0 auto; display: block; width: 94%; height: 370px;}*/
    
}

@media only screen and (max-width: 1366px) {
    nav {
        position: absolute;
        top: 0;
        right: 5px;
    }
    nav ul li {
        position: relative;
        float: left;	
        display: inline-block;
    }
    nav ul li a {
        font-size: 11px;
        color: #fff;
        /*color: #9aa6af;*/
        padding: 24px 15px;	
        display: block;
    }
    nav ul li a:hover {color: #9aa6af;}

    nav li div{ 
        display: none;
        position:absolute;    
        left:0;        
        min-width:100px;
        background-color:#226666;	
        z-index:9999;
        opacity:0;
        margin-top: -2px;
    }
    nav li:hover div{
        display:block;
        z-index:9999;
        opacity:1;
    }
    nav li div ul{    
        display: block;    
    }
    nav li div li a{ display: block; padding: 10px 10px 10px 20px;}
}

@media only screen and (max-width: 1199px) {
    nav {
        position: absolute;
        top: 0;
        right: 5px;
    }
    nav ul li {
        position: relative;
        float: left;	
        display: inline-block;
    }
    nav ul li a {
        font-size: 11px;
        color: #fff;
        /*color: #9aa6af;*/
        padding: 24px 15px;	
        display: block;
    }
    nav ul li a:hover {color: #9aa6af;}

    nav li div{ 
        display: none;
        position:absolute;    
        left:0;        
        min-width:100px;
        background-color:#226666;	
        z-index:9999;
        opacity:0;
        margin-top: -2px;
    }
    nav li:hover div{
        display:block;
        z-index:9999;
        opacity:1;
    }
    nav li div ul{    
        display: block;    
    }
    nav li div li a{ display: block; padding: 10px 10px 10px 20px;}
        
	header {
		height: 60px;
		position: relative;
		background-color: #222;
   	}
	header h1 {
		color: #fff;
	    text-align: left;
	    font-family: "LinotypeZapfino-One";
		font-size: 25px;    
		line-height: 60px;
		font-weight: normal;
		padding-left: 20px;
	}
       
    .header-section .title{ padding: 5px 0; }
    .header-section .title h1{ font-size: 40px; padding: 10px 0 10px 0;}
    .header-section .title span{ font-size: 13px;} 
    .header-section section{padding: 10px; margin: 0 auto; width: 90%}
	.header-section section > img{margin: 0 auto; display: inline-block; width: 65%}
	.header-section section > aside{
		display:inline-block;
		vertical-align: top;
		width: 30%;
		margin-left: 0px;
	}
	/*        tripadvisor       */
	.header-section .TA_certificateOfExcellence{
		padding: 10px;
		display: block;
		vertical-align: none;
		width: 100%;
		margin-right: 0px;
	}
	.header-section div#CDSWIDCOE{
		width: 85%;
		height: 126px;
		margin: 0 auto;
	}
	.header-section div#CDSWIDCOE .widCOE .widCOETitle {
    	font: bold 9px Arial,Georgia,"Bitstream Vera Sans",Helvetica,sans-serif;
    	color: #000;
    	padding-top: 5px;
    	z-index: 3;
    	position: relative;
	}
	.header-section .widCOELogo{
		width: 100%;
		height:90px;
	}
	.header-section .widCOELink{
		font-size: 8px;
	}
	.header-section  img.widCOEImg{
		width: 100px;
		height:90px;
	}
	.header-section .TA_cdswritereviewlg{width: 100%; display: block;}
	.header-section #CDSWIDWRL{
		width: 100%;
		max-width: none;
	}
	#CDSWIDWRL .widWRLReview{
		margin: 0 auto;
		width: 94%; 
		padding: 5px;
	}
	#CDSWIDWRL .widWRLReview textarea{width: 100%; /*max-width: none;*/}

	#CDSWIDWRL img {
   		max-width: 70%;
    	height: 27px;

	}
	#CDSWIDWRL .widWRLData {
    	padding: 8px 10px 15px;
    	background-color: #FFF;
    	max-height: 225px;
    	position: relative;
    	overflow: hidden;
    	width: 97%;
	}
	/*   End     tripadvisor       */

    .header-section,
	.body-section,
	.footer-section 
	{padding: 15px;} 

    .body-section section{
		width: 98%;
		padding: 15px 0px 15px 0px;
		margin: 0px auto;
	}
	.body-section section > div{
		border: 1px dashed rgba(190, 196, 202, 0.9);
		padding: 15px;
		margin: 10px 0px 10px 0px;
		background-color: #313030;
	} 

	.body-section article{
		display: inline-block;
		vertical-align: top;
		width: 100%;
		/*min-width: 220px;*/
		margin-left: 0px;
	}
	.body-section article > p{
		line-height: 20px;
		font-size: 13px;
		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
		text-align: justify;

	}
	.body-section img {
		display: inline-block;
		vertical-align: top;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px
	}
		/*============= Form ====================*/
	.body-section article.form{
		display:inline-block;
		width: 65%;
		min-width: 220px;
		margin-left: 0px;
	}
	.input-group{
		margin-bottom: 20px;
		display: inline-block;
		/*position: relative;*/
		margin-right: 0px;
	}
	span.input-group-btn{padding: 1px;}
	.btn-success {
	    color: #FFF;
		background-color: #00AC7A;
		border-color: #017D59;
		display: inline-block;
		height: 42px;
		width: 52px;
		vertical-align: top;
	}
	input.form-control{
		font-size: 12px;
		padding: 5px;
		width: 212px;
		height: 30px;
	}
	.text-group textarea:focus, input.form-control:focus {
	    border-color: #00AC7A;
	    outline: 5px none;
	    transition: all 0.3s ease 0s;
	}
	.text-group{margin-bottom: 20px; width:98% }
	.text-group textarea{
		width: 98%;
		resize:none;
	}
	.text-area{padding: 30px auto;}
	.send{width: 97%; height: 50px; margin-bottom: 15px}
	.btn-send{
		float: right;
		font-size: 15px;
		width: 90px;
		height: 40px;
		color: #FFF;
		background-color: #00AC7A;
		border-color: #017D59;

	}
		
	li.body-section aside.contact{display: inline-block; vertical-align: top; width: 32%}
	aside.contact div{width: 100%;}
	aside.contact ul > li{
		padding-top: 10px;
		border-bottom: 1px solid #DDD;
		padding-bottom: 10px;
	}
	aside.contact span{display: inline-block;vertical-align: top; margin-left: 5px;}

	/*==============End form==================*/

	/*================accommodations-section==============*/
	.accommodations-section{
		width: 98%;
		margin: 0 auto;
	} 
	.accommodations-section section, aside{
		display: inline-block;
		vertical-align: top;
	}
	.accommodations-section section{
		width: 70%;
		margin-right: 20px;
		padding: 10px;
		margin: 0 auto;

	}
	.accommodations-section aside{
		width: 25%;
		padding: 10px 10px 10px 10px;
		margin-left: 20px;
		background-color: #222;
		margin: 0 auto;
	}
		.tags-container{
			width: 100%;
			margin-top:10px;
			margin-bottom: 10px;
		}
		h4.heading{
			color: #6ADAB9;
			padding-bottom: 20px;
			position: relative;
			font-size: 18px;
			margin-bottom: 10px;
		}
		h4.heading::before {
		    content: "";
		    position: absolute;
		    left: 0px;
		    bottom: 0px;
		    height: 2px;
		    width: 65px;
		    border-bottom: 2px solid #7F9AA0;
		    margin-bottom: 5px;
		}
		.tags-container ul{width: 98%; margin-bottom: 15px;}
		.tags-container ul >li {margin-bottom: 7px; margin-right: 1px; width: 100px; display: inline-block;}
		.tags-container  li > a{
			padding: 8px 10px;
			background: #0A0C0E none repeat scroll 0% 0%;
			color: #FFF;
			display: inline-block;
			font-size: 15px;
		}
	.accommodations-section section > article{
		display: block;
		width: 100%
	}
	.accommodations-section article > p{
			font-size: 13px;
			line-height: 25px;
			text-align: justify;
		}
	.accommodations-section section > img{
		display: block;
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/*=============END accommodations-section=============*/
	/*============= Photo section ======================*/
	section.photo-section{
		width: 95%;
		display: block;
	}
	section.photo-section article,
	section.photo-section img{
		margin-left: 0px; width: 80%; margin: 0 auto;
	}
	section.photo-section img{padding: 10px;}
	section.photo-section p{font-size: 14px; text-align: justify;}
		
	section.photo-section .vertical{
		display: inline-block;
		vertical-align: top;
		height: 450px;
		width: 350px;
		margin-left:50px;
	}

}

@media only screen and (max-width: 979px) {
    
    header {
	height: 60px;
	z-index: 2;
	background-color: #060a0c;
	
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	
		/* starting point */
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	}
	
	.burger {display: block;}
	/*  Nav Drawer Layout  */
	nav {position: relative;}

	nav ul {
		height: 100%;
		overflow-y: auto;
	}
	nav ul li {
        position: relative;
		display: block;
		float: none;
	}
	nav ul li a {
		padding: 20px 22px;
		letter-spacing: 3px;
		font-size: 14px;
	}
	nav ul li a.logo {
		display: none;
	}
	nav ul li a.active {
		color: #fff;
		background-color: #141e23;
	}
	nav ul li a:hover {
		color: #fff;
		background-color: #19252c;
	}
	nav > ul > li:first-child > a.active,
	nav > ul > li:first-child > a:hover 
	{border-radius: 10px 0 0 0;}
    
    nav ul li > div{ 
        display: none!important;
        position:relative !important;   
        width: 100% !important;
        background-color:#226666 !important;
        opacity: 1 !important;
        margin-top: 0 !important;
    }
    
    /*nav li:hover div{
        display:block;        
    }
    nav li div ul{    
        display: block;    
    }*/
    nav li div li a{ display: block; padding: 20px 22px !important;}

	.header-section {margin-top: 60px;}

	/* NAVIGATION ANNIMATION */
	nav {
		width: 93%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		background-color: #1D2D35;
		border-radius: 8px;
		
		/* starting point */
		opacity: .3;
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-moz-transform: translate3d(5%,0,0)scale(.97);
		transform: translate3d(5%,0,0)scale(.97);
	}

	/*Nav Expanding Open Effect*/
	nav.open {
		opacity: 1;

		-webkit-transform: translate3d(0,0,0)scale(1);
		-webkit-animation: slideIn .35s ease-in-out;
		
		-moz-transform: translate3d(0,0,0)scale(1);
		-moz-animation: slideIn .35s ease-in-out;
		
		transform: translate3d(0,0,0)scale(1);
		animation: slideIn .35s ease-in-out;
	}
		@-webkit-keyframes slideIn {
			0%       {opacity: .3;
						-webkit-transform: translate3d(5%,0,0)scale(.97);}
			100%  {opacity: 1;
						-webkit-transform: translate3d(0,0,0)scale(1);}
		}
		@-moz-keyframes slideIn {
			0%      {opacity: .3;
						-moz-transform: translate3d(5%,0,0)scale(.97);}
			100%  {opacity: 1;
						-moz-transform: translate3d(0,0,0)scale(1);}
		}
		@keyframes slideIn {
			0%      {opacity: .3;
						transform: translate3d(5%,0,0)scale(.97);}
			100%  {opacity: 1;
						transform: translate3d(0,0,0)scale(1);}
		}

	/*Nav Shrinking Closed Effect*/
	nav.close {
		opacity: .3;
		
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-webkit-animation: slideOut .3s ease-in-out;
		
		-moz-transform: translate3d(5%,0,0)scale(.97);
		-moz-animation: slideOut .3s ease-in-out;
		
		transform: translate3d(5%,0,0)scale(.97);
		animation: slideOut .3s ease-in-out;
	}
	@-webkit-keyframes slideOut {
		0%      {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
	}
	@-moz-keyframes slideOut {
		0%      {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
	}
	@keyframes slideOut {
		0%      {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
	}

    header h1 {        
        text-align: center;
        font-size: 25px;
        padding-left: 25px;
        display: block;
    }


    .header-section .title{ padding: 5px 0; }
    .header-section .title h1{ font-size: 40px; padding: 10px 0 10px 0;}
    .header-section .title span{ font-size: 13px;} 
   .header-section section{padding: 10px; margin: 0 auto; width: 90%}
	.header-section section > img{margin: 0 auto; display: block; width: 100%}
	.header-section section > aside{
		display:block;
		vertical-align: top;
		width: 100%;
		margin-left: 0px;
	}
	/*        tripadvisor       */
	.header-section .TA_certificateOfExcellence{
		padding: 10px;
		display: inline-block;
		vertical-align: top;
		width: 30%;
		margin-right: 25px;
	}
	.header-section div#CDSWIDCOE{
		width: 100%;
		height: 126px;
		/*margin: 0 auto;*/
	}
	.header-section div#CDSWIDCOE .widCOE .widCOETitle {
    	font: bold 12px Arial,Georgia,"Bitstream Vera Sans",Helvetica,sans-serif;
    	color: #000;
    	padding-top: 5px;
    	z-index: 3;
    	position: relative;
	}
	.header-section .widCOELogo{
		width: 100%;
		height:90px;
	}
	.header-section .widCOELink{
		font-size: 10px;
	}
	.header-section  img.widCOEImg{
		width: 100px;
		height:90px;
	}
	.header-section .TA_cdswritereviewlg{
		width: 62%; 
		display: inline-block;
		vertical-align: top;
		margin-top: 10px;
	}
	.header-section #CDSWIDWRL{
		width: 100%;
		max-width: none;
	}
	#CDSWIDWRL .widWRLReview{
		margin: 0 auto;
		width: 94%; 
		padding: 5px;
	}
	.header-section #CDSWIDWRL .widWRLReview textarea{width: 92%; max-width: none;}

	#CDSWIDWRL img {
   		max-width: 70%;
    	height: 27px;

	}
	#CDSWIDWRL .widWRLData {
    	padding: 8px 10px 15px;
    	background-color: #FFF;
    	max-height: 225px;
    	position: relative;
    	overflow: hidden;
    	width: 97%;
	}
	/*   End     tripadvisor       */

    .header-section,
	.body-section,
	.footer-section 
	{padding: 10px;}

    .body-section section{
		width: 98%;
		padding: 15px 0px 15px 0px;
		margin: 0px auto;
	}
	.body-section section > div{
		border: 1px dashed rgba(190, 196, 202, 0.9);
		padding: 15px;
		margin: 10px 0px 10px 0px;
		background-color: #313030;
	} 

	.body-section article{
		display: block;
		vertical-align: top;
		width: 100%;
		/*min-width: 220px;*/
		margin-left: 0px;
	}
	.body-section article > p{
		line-height: 20px;
		font-size: 13px;
		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
		text-align: justify;

	}
	.body-section img {
		display: block;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px
	}
	/*============= Form ====================*/
	.body-section article.form{
		display: block;
		width: 100%;
		min-width: 220px;
		margin-left: 0px;
	}
	.input-group{
		margin-bottom: 20px;
		display: inline-block;
		/*position: relative;*/
		margin-right: 20px;
	}
	span.input-group-btn{padding: 1px;}
	.btn-success {
	    color: #FFF;
		background-color: #00AC7A;
		border-color: #017D59;
		display: inline-block;
		height: 42px;
		width: 52px;
		vertical-align: top;
	}
	input.form-control{
		font-size: 12px;
		padding: 5px;
		width: 260px;
		height: 30px;
	}
	.text-group textarea:focus, input.form-control:focus {
	    border-color: #00AC7A;
	    outline: 5px none;
	    transition: all 0.3s ease 0s;
	}
	.text-group{margin-bottom: 20px; width:98% }
	.text-group textarea{
		width: 98%;
		resize:none;
	}
	.text-area{padding: 30px auto;}
	.send{width: 97%; height: 50px; margin-bottom: 15px}
	.btn-send{
		float: right;
		font-size: 15px;
		width: 90px;
		height: 40px;
		color: #FFF;
		background-color: #00AC7A;
		border-color: #017D59;

	}
		
	li.body-section aside.contact{display: block; width: 100%}
	aside.contact div{width: 60%;}
	aside.contact ul > li{
		padding-top: 10px;
		border-bottom: 1px solid #DDD;
		padding-bottom: 10px;
	}
	aside.contact span{display: inline-block;vertical-align: top; margin-left: 5px;}

	/*==============End form==================*/


	/*================accommodations-section==============*/
	.accommodations-section{
		width: 98%;
		margin: 0 auto;
	} 
	.accommodations-section section, aside{
		display: block;
		/*vertical-align: top;*/
	}
	.accommodations-section section{
		width: 95%;
		margin-right: 20px;
		padding: 10px;
		margin: 0 auto;

	}
	.accommodations-section aside{
		width: 92%;
		padding: 10px 10px 10px 10px;
		margin-left: 20px;
		background-color: #222;
		margin: 0 auto;
	}
		.tags-container{
			width: 32%;
			margin-top:10px;
			margin-bottom: 10px;
			display: inline-block;
			vertical-align: top;
		}
		h4.heading{
			color: #6ADAB9;
			padding-bottom: 20px;
			position: relative;
			font-size: 18px;
			margin-bottom: 10px;
		}
		h4.heading::before {
		    content: "";
		    position: absolute;
		    left: 0px;
		    bottom: 0px;
		    height: 2px;
		    width: 65px;
		    border-bottom: 2px solid #7F9AA0;
		    margin-bottom: 5px;
		}
		.tags-container ul{width: 100%; margin-bottom: 10px;}
		.tags-container ul >li {margin-bottom: 4px; margin-right: 1px; height: 32px; display: inline-block;}
		.tags-container  li > a{
			padding: 8px 10px;
			background: #0A0C0E none repeat scroll 0% 0%;
			color: #FFF;
			display: inline-block;
			font-size: 15px;
		}
	.accommodations-section section > article{
		display: block;
		width: 100%
	}
	.accommodations-section article > p{
			font-size: 13px;
			line-height: 25px;
			text-align: justify;
		}
	.accommodations-section section > img{
		display: block;
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/*=============END accommodations-section=============*/
	/*============= Photo section ======================*/
	section.photo-section{
		width: 100%;
		display: block;
		padding-left: 0px;
	}
	section.photo-section article,
	section.photo-section img{
		margin-left: 0px; width: 90%; margin: 0 auto;
	}
	section.photo-section img{padding: 10px;}
	section.photo-section p{font-size: 14px; text-align: justify;}
		
	section.photo-section .vertical{
		display: inline-block;
		vertical-align: top;
		height: 420px;
		width: 320px;
		margin-left: 20px;
	}

}

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

	header {
		height: 60px;
		z-index: 2;
		background-color: #060a0c;
		
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		
			/* starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	header h1 {
		color: #ffffff;
		text-align: center;
		padding-left: 0;
		display: block;
	}
	.header-section .title{ padding: 5px 0; }
    .header-section .title h1{ font-size: 40px; padding: 10px 0 10px 0;}
    .header-section .title span{ font-size: 10px;}   
    .header-section img{margin: 0 auto; display: block; width: 94%; height: 250px;}

    .header-section,
	.body-section,
	.footer-section 
	{padding: 15px;}
	 

	.burger {display: block;}


	/*  Nav Drawer Layout  */
	nav {position: relative;}

	nav ul {
		height: 100%;
		overflow-y: auto;
	}
	nav li {
		display: block;
		float: none;
	}
	nav li a {
		padding: 20px 22px;
		letter-spacing: 3px;
		font-size: 14px;
	}
	nav li a.logo {
		display: none;
	}
	nav li a.active {
		color: #fff;
		background-color: #141e23;
	}
	nav li a:hover {
		color: #fff;
		background-color: #19252c;
	}
	nav > li:first-child > a.active,
	nav > li:first-child > a:hover 
	{border-radius: 10px 0 0 0;}
    
    nav li div{ 
        display: none;
        position:relative;        
        width: 100%;
        background-color:#226666;	        
        opacity:1 !important;
        margin-top: 0 !important;
    }
    /*nav li:hover div{
        display:block;
        z-index:9999;
        opacity:1;
    }
    nav li div ul{    
        display: block;    
    }*/
    nav li div li a{ display: block; padding: 20px 22px !important;}

	.header-section {margin-top: 60px;}


	/* NAVIGATION ANNIMATION */
	nav {
		width: 93%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		background-color: #1d2d35;
		border-radius: 8px;
		
		/* starting point */
		opacity: .3;
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-moz-transform: translate3d(5%,0,0)scale(.97);
		transform: translate3d(5%,0,0)scale(.97);
	}

	/*Nav Expanding Open Effect*/
	nav.open {
		opacity: 1;

		-webkit-transform: translate3d(0,0,0)scale(1);
		-webkit-animation: slideIn .35s ease-in-out;
		
		-moz-transform: translate3d(0,0,0)scale(1);
		-moz-animation: slideIn .35s ease-in-out;
		
		transform: translate3d(0,0,0)scale(1);
		animation: slideIn .35s ease-in-out;
	}
	@-webkit-keyframes slideIn {
		0%       {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
	}
	@-moz-keyframes slideIn {
		0%      {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
	}
	@keyframes slideIn {
		0%      {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
	}

	/*Nav Shrinking Closed Effect*/
	nav.close {
		opacity: .3;
		
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-webkit-animation: slideOut .3s ease-in-out;
		
		-moz-transform: translate3d(5%,0,0)scale(.97);
		-moz-animation: slideOut .3s ease-in-out;
		
		transform: translate3d(5%,0,0)scale(.97);
		animation: slideOut .3s ease-in-out;
	}
	@-webkit-keyframes slideOut {
		0%      {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
	}
	@-moz-keyframes slideOut {
		0%      {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
	}
	@keyframes slideOut {
		0%      {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
	}
	/*============= Photo section ======================*/
	section.photo-section{
		width: 100%;
		display: block;
		padding-left: 0px;
	}
	section.photo-section article,
	section.photo-section img{
		margin-left: 0px; width: 90%; margin: 0 auto;
	}
	section.photo-section img{padding: 10px;}
	section.photo-section p{font-size: 14px; text-align: justify;}
		
	section.photo-section .vertical{
		display: block;
		height: 350px;
		width: 280px;
		margin: 0 auto;
	}


}



	/* CONTENT ANNIMATION */
	.content {
		/* starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		z-index: 1;
	}

	/*Content Sliding Open Effect*/
	header.open,
	.content.open 
	{   
		-webkit-transform: translate3d(240px,0,0);
		-webkit-animation: open .5s ease-in-out;
		
		-moz-transform: translate3d(240px,0,0);
		-moz-animation: open .5s ease-in-out;
		
		transform: translate3d(240px,0,0);
		animation: open .5s ease-in-out;
	}
	@-webkit-keyframes open {
		0%      {-webkit-transform: translate3d(0,0,0);}
		70%    {-webkit-transform: translate3d(260px,0,0);}
		100%  {-webkit-transform: translate3d(240px,0,0);}
	}
	@-moz-keyframes open {
		0%      {-moz-transform: translate3d(0,0,0);}
		70%    {-moz-transform: translate3d(260px,0,0);}
		100%  {-moz-transform: translate3d(240px,0,0);}
	}
	@keyframes open {
		0%      {transform: translate3d(0,0,0);}
		70%    {transform: translate3d(260px,0,0);}
		100%  {transform: translate3d(240px,0,0);}
	}

	/*Content Sliding Closed Effect*/
	header.close,
	.content.close 
	{
		-webkit-transform: translate3d(0,0,0);
		-webkit-animation: close .3s ease-in-out;
		
		-moz-transform: translate3d(0,0,0);
		-moz-animation: close .3s ease-in-out;
		
		transform: translate3d(0,0,0);
		animation: close .3s ease-in-out;
	}
	@-webkit-keyframes close {
		0%      {-webkit-transform: translate3d(240px,0,0);}
		100%  {-webkit-transform: translate3d(0,0,0);}
	}
	@-moz-keyframes close {
		0%       {-moz-transform: translate3d(240px,0,0);}
		100%  {-moz-transform: translate3d(0,0,0);}
	}
	@keyframes close {
		0%       {transform: translate3d(240px,0,0);}
		100%  {transform: translate3d(0,0,0);}
	}


@media only screen and (max-width: 480px) {
    
    header h1 {        
        text-align: center;
        font-size: 25px;
        padding-left: 25px;
        display: block;
    }

    .header-section .title{ padding: 5px 0; }
    .header-section .title h1{ font-size: 40px; padding: 10px 0 10px 0;}
    .header-section .title span{ font-size: 10px;}   
    .header-section section{padding: 10px; margin: 0 auto; width: 90%}
	.header-section section > img{margin: 0 auto; display: block; width: 100%}
	.header-section section > aside{
		display:block;
		vertical-align: top;
		width: 100%;
		margin-left: 0px;
	}
	/*        tripadvisor       */
	.header-section .TA_certificateOfExcellence{
		padding: 10px;
		display: block;
		vertical-align: none;
		width: 100%;
		margin-right: 0px;
	}
	.header-section div#CDSWIDCOE{
		width: 70%;
		height: 126px;
		margin: 0 auto;
	}
	.header-section div#CDSWIDCOE .widCOE .widCOETitle {
    font: bold 9px Arial,Georgia,"Bitstream Vera Sans",Helvetica,sans-serif;
    color: #000;
    padding-top: 5px;
    z-index: 3;
    position: relative;
	}
	.header-section .widCOELogo{
		width: 100%;
		height:90px;
	}
	.header-section .widCOELink{
		font-size: 8px;
	}
	.header-section  img.widCOEImg{
		width: 100px;
		height:90px;
	}
	.header-section .TA_cdswritereviewlg{width: 100%; display: block;}
	.header-section #CDSWIDWRL{
		width: 100%;
		max-width: none;
	}
	#CDSWIDWRL .widWRLReview{
		margin: 0 auto;
		width: 94%; 
		padding: 5px;
	}
	#CDSWIDWRL .widWRLReview textarea{width: 100%; /*max-width: none;*/}

	#CDSWIDWRL img {
   		max-width: 70%;
    	height: 27px;

	}
	#CDSWIDWRL .widWRLData {
    	padding: 8px 10px 15px;
    	background-color: #FFF;
    	max-height: 225px;
    	position: relative;
    	overflow: hidden;
    	width: 97%;
	}
	/*   End     tripadvisor       */

    .header-section,
	.body-section,
	.footer-section,
	.body-accommodations 
	{padding: 10px;}

    .body-section section{
		width: 98%;
		padding: 10px 0px 15px 0px;
		margin: 0px auto;
	}
	.body-section section > div{
		border: 1px dashed rgba(190, 196, 202, 0.9);
		padding: 15px;
		margin: 10px 0px 10px 0px;
		background-color: #313030;
	} 

	.body-section article{
		display: block;
		vertical-align: top;
		width: 100%;
		/*min-width: 220px;*/
		margin-left: 0px;
	}
	.body-section article > p{
		line-height: 22px;
		font-size: 12px;
		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
		text-align: justify;

	}
	.body-section img {
		display: block;
		width: 100%;
		margin-left: 0px;
		margin-top: 5px
	}
	/*============= Form ====================*/
	.body-section article.form{
		display: block;
		width: 100%;
		min-width: 220px;
		margin-left: 0px;
	}
	.input-group{
		margin-bottom: 20px;
		display: block;
		/*position: relative;*/
		margin-right: 0px;
	}
	span.input-group-btn{padding: 1px;}
	.btn-success {
	    color: #FFF;
		background-color: #00AC7A;
		border-color: #017D59;
		display: inline-block;
		height: 42px;
		width: 52px;
		vertical-align: top;
	}
	input.form-control{
		font-size: 12px;
		padding: 5px;
		width: 230px;
		height: 30px;
	}
	.text-group textarea:focus, input.form-control:focus {
	    border-color: #00AC7A;
	    outline: 5px none;
	    transition: all 0.3s ease 0s;
	}
	.text-group{margin-bottom: 20px; width:98% }
	.text-group textarea{
		width: 100%;
		resize:none;
	}
	.text-area{padding: 30px auto;}
	.send{width: 97%; height: 50px; margin-bottom: 15px}
	.btn-send{
		float: right;
		font-size: 15px;
		width: 90px;
		height: 40px;
		color: #FFF;
		background-color: #00AC7A;
		border-color: #017D59;

	}
		
	li.body-section aside.contact{display: block; width: 100%}
	aside.contact div{width: 100%;}
	aside.contact ul > li{
		padding-top: 10px;
		border-bottom: 1px solid #DDD;
		padding-bottom: 10px;
	}
	aside.contact span{display: inline-block;vertical-align: top; margin-left: 5px;}

	/*==============End form==================*/


	/*================accommodations-section==============*/
	.accommodations-section{
		width: 98%;
		margin: 0 auto;
	} 
	.accommodations-section section, aside{
		display: block;
		/*vertical-align: top;*/
	}
	.accommodations-section section{
		width: 95%;
		margin-right: 20px;
		padding: 10px;
		margin: 0 auto;

	}
	.accommodations-section aside{
		width: 90%;
		padding: 10px 10px 10px 10px;
		margin-left: 20px;
		background-color: #222;
		margin: 0 auto;
	}
		.tags-container{
			width: 100%;
			margin-top:10px;
			margin-bottom: 10px;
		}
		h4.heading{
			color: #6ADAB9;
			padding-bottom: 20px;
			position: relative;
			font-size: 18px;
			margin-bottom: 10px;
		}
		h4.heading::before {
		    content: "";
		    position: absolute;
		    left: 0px;
		    bottom: 0px;
		    height: 2px;
		    width: 65px;
		    border-bottom: 2px solid #7F9AA0;
		    margin-bottom: 5px;
		}
		.tags-container ul{width: 100%; margin-bottom: 10px;}
		.tags-container ul >li {margin-bottom: 4px; margin-right: 1px; height: 32px; display: inline-block;}
		.tags-container  li > a{
			padding: 8px 10px;
			background: #0A0C0E none repeat scroll 0% 0%;
			color: #FFF;
			display: inline-block;
			font-size: 15px;
		}
	.accommodations-section section > article{
		display: block;
		width: 100%
	}
	.accommodations-section article > p{
			font-size: 13px;
			line-height: 25px;
			text-align: justify;
		}
	.accommodations-section section > img{
		display: block;
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/*=============END accommodations-section=============*/
	/*============= Photo section ======================*/
	section.photo-section{
		width: 100%;
		display: block;
		padding-left: 0px;
	}
	section.photo-section article,
	section.photo-section img{
		margin-left: 0px; width: 90%; margin: 0 auto;
	}
	section.photo-section img{padding: 10px;}
	section.photo-section p{font-size: 14px; text-align: justify;}
		
	section.photo-section .vertical{
		display: block;
		height: 350px;
		width: 280px;
		margin: 0 auto;
	}
}