/* General styles */

@font-face {
    font-family: 'din';
  src: url('../fonts/DIN-Regular.eot?#iefix') format('embedded-opentype'),  url('../fonts/DIN-Regular.otf')  format('opentype'),
	     url('../fonts/DIN-Regular.woff') format('woff'), url('../fonts/DIN-Regular.ttf')  format('truetype'), url('../fonts/DIN-Regular.svg#DIN-Regular') format('svg');
  font-weight: normal;
  font-style: normal;

}

.din{
	font-family:'din', serif;	
}

body {
    background-color: #f5f3ef;
	color:#000;
	min-width:300px;
}

#wrapper {
	box-sizing: border-box;
    background-color: #fff;
	box-shadow: 0px -4px 8px #dedede;
	margin:0 auto;
	padding:30px 0 40px 0;
}

/* Navigation Styles */

header {
    padding:0 5% 45px 5%;
}

header .header-logo {
    padding: 0;
    background: url('../images/main-logo.png');
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
    width:100px;
	margin-right:7.5%;
	float:left;
	
}

header #headline{
	font-size:14pt;
	color: #26b3a5;
	padding-top:20px;
	padding-bottom:0px;
	float:left;
	width:100%;
	line-height:1.2em;
}

nav {
   font-family:'din', serif;	
}

nav #desktop-nav {   
}
nav #desktop-nav li, nav #desktop-select, nav #desktop-nav{
	display: inline-block;
		border-right:none;
}
nav #desktop-nav li, nav #desktop-select {
	text-align: center;
	padding: 4px 5px;
	border-right:1px solid #f5f3ef;
	cursor: pointer;
	font-size:9pt;
	-webkit-transition: all ease-out 150ms;
	-moz-transition: all ease-out 150ms;
	-o-transition: all ease-out 150ms;
	transition: all ease-out 150ms;
}
nav #desktop-select{
	cursor: inherit;
	color: #00afa0;
	padding:0;
	margin-right:4px;
	border-right: none;
}
nav #desktop-nav li:first-child{ 
	border-right:1px solid #f5f3ef;
}	
nav #desktop-nav li:last-child{ 
	border-right:none
   
}

nav #desktop-nav li.active, nav #desktop-nav li:hover {
	color:#00afa0;
}

#mobile-nav {
    display: none;
}
#mobile-nav-btn {
    height: 97px;
    width: 80px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 0;
    background: url("../images/mobile-nav-icon.png") no-repeat center center;
    -webkit-background-size: 40px 34px;
    -moz-background-size: 40px 34px;
    -o-background-size: 40px 34px;
    background-size: 40px 34px;
    box-sizing: border-box;
}

#mobile-nav {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 145px;
    left: 0;
    z-index: 9999;
    width: 100%;
    border-top:4px solid #00afa0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    -webkit-transition: all ease-out 200ms;
    -moz-transition: all ease-out 200ms;
    -o-transition: all ease-out 200ms;
    transition: all ease-out 200ms;
}

#mobile-nav li {
    width: 100%;
    background-color: #fff;
    color: #000;
    font-size: 18px;
    padding: 20px 5%;
   	border-bottom:4px solid #00afa0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

nav #mobile-nav li.active {
    background-color: #00afa0;
    color: #fff;
}

nav #mobile-nav ul li {
    width: 100%;
}

#mobile-nav li img {
    position: absolute;
    top: 30px;
    right: 20px;
}
/* Before and After Styles */
.hero-image-area {
    width: 100%;
}

.twentytwenty-overlay {
    display: none;
}

.press-drag-copy {
    background-color: #00afa0;
    color:#fff;
    width: 120px;
    margin-left: 42px;
	margin-top:21px;
	padding:8px 0;
	text-align: center;
    text-transform: uppercase;
	font-size:10pt;

}

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
    background: #00afa0;
}
.twentytwenty-container {
    overflow: visible;
}
.twentytwenty-handle {
    height: 0px;
    width: 100%;
    position: absolute;
    left: 0%;
    top: 50%;
    z-index: 40;
    cursor: pointer;
	margin-left: 0px;
    margin-top: 0px;
}
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
    width: 3px;
    height: 9999px;
    left: 50%;
    margin-left: 0;
}

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
    width: 50%;
    height: 4px;
    top: 50%;
	margin-top:-2px;
}

.twentytwenty-up-arrow {
    border: none;
    width: 36px;
    height: 18px;
    top: 50%;
    margin-top: -20px;
	margin-left:-18px;
    background: url('../images/arrow-up-slider.png') center top no-repeat;
}

.twentytwenty-down-arrow {
    border: none;
    width: 36px;
    height: 18px;
    bottom: 50%;
    margin-bottom:-20px;
	margin-left:-18px;
    background: url('../images/arrow-down-slider.png') center bottom no-repeat;
}

#explore-cont {

}

#explore-cont span {

}

#explore-cont p {

}

#explore-cont a {
 
}

.explore-align {

}

.center-explore-btn {

}

/* Offer Area */

.offer-area {
	margin-top:10px;
    padding: 40px 5% 30px 5%;
	background:#fff;
}

.offer-area h1 {
	font-family: verdana, sans-serif;
	color:#764d2e;
	font-weight: normal;
	font-style: normal;
    text-transform: uppercase;
    font-size: 18px;
	line-height: normal;
    margin-bottom:1em;
}

.offer-area h5 {
    color: #05374e;
    font-size: 20px;
    padding-top: 15px;
}

.offer-area span {
    color: #a9ced3;
}

.offer-area p {

    font-size: 14px;
    font-family: Arial, sans-serif;
    line-height: 1.3;
	margin-bottom:1em;
}

.book-now {
    color: #26b3a5;
    border: none;
    padding:0 42px 0 0;
	min-height:36px;
	background: url(../images/arrow-right-circle.png) center right no-repeat;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
}


.contact-area{
	margin-top:30px;
	padding:0 0 0 5%;
	font-size:10pt;
	line-height:normal;
}

.contact-area h2{
	font-family:Verdana, sans-serif;
	font-size:11pt;
	line-height:120%;
	color:#764d2e;
	font-weight: normal;	
	font-style: normal;
	margin-bottom:0.6em;
}
.contact-area .info{
	font-size:9pt;
	width:220px;
	padding-bottom:20px;
	padding-right:20px;
	border-bottom:1px solid #9c9c9c;
	margin-bottom:20px;
	margin-right:20px;
	
}
.contact-area p.info-text {
    font-family: Helvetica, Arial, sans-serif;
}
/* Footer */

.footer-cont {
    width: 100%;
    display: block;
    margin: 45px auto 0 auto;
    padding: 0 40px;
    box-sizing: border-box;

}

footer {
	margin:0 auto;
	font-family:Helvetica, Arial, sans-serif;
}

footer p {
    width: auto;
    font-size: 10px;
    padding: 10px 0 0px 0;
    line-height: 1.5;
    color: #858585;
}

footer a {
    text-decoration: underline;
    color: #858585;
	margin-bottom:24px;
}

footer p a:visited {
   
}
#footer_logos{
	text-align:center;	
}
#footer_logos li{
	display:inline;
}
#footer_logos a{
	display:inline-block;
	background-image:url(../images/brandbar.png);	
	height:45px;
	width:32px;
}
#brand_bar_HI a{
	width:64px;
	background-position:0px 0;
}
#brand_bar_WA a{
	width:56px;
	background-position:-64px 0;
}
#brand_bar_CH a{
	width:75px;
	background-position:-120px 0;
}
#brand_bar_PY a{
	width:75px;
	background-position:-195px 0;
}
#brand_bar_QQ a{
	width:75px;
	background-position:-270px 0;
}
#brand_bar_DT a{
	width:64px;
	background-position:-345px 0;
}
#brand_bar_ES a{
	width:64px;
	background-position:-415px 0;
}
#brand_bar_GI a{
	width:75px;
	background-position:-480px 0;
}
#brand_bar_HP a{
	width:65px;
	background-position:-558px 0;
}
#brand_bar_RU a{
	width:50px;
	background-position:-625px 0;
}
#brand_bar_HW a{
	width:72px;
	background-position:-670px 0;
}
#brand_bar_HT a{
	width:70px;
	background-position:-750px 0;
}
#brand_bar_GV a{
	width:84px;
	background-position:-818px 0;
}
#brand_bar_HH a{
	width:64px;
	background-position:-902px 0;
}

@media only screen and (min-width: 720px){
	#wrapper{

	}
	header{
		padding-bottom:25px;
	}
	header .header-logo {
   	 height: 118px;
   	 width:118px;	
}
	header #headline{
		float:left;
		width:72.5%;
		font-size:21pt;
		line-height:1.15em;
	}
	.offer-area {
		padding-right:60px;	
	}
	.float-left{
		float:left;	
	}

}

@media only screen and (min-width: 720px) and (max-width: 1009px){
	header #headline{
		padding-top:0px;
	}
	.contact-area .info{
		margin-right:40px;
		margin-bottom:0;	
		border-bottom:0;
		border-right:1px solid #9c9c9c;
		padding-bottom:0;
		
	}
	
}

@media only screen and (min-width: 1010px){
	#wrapper{
		padding-left: 45px;
		padding-right: 45px;
	}
	.offer-area{
		width:75%;
	}
	.contact-area{
		width:25%;	
		margin-top:0px;
		padding-left:20px;
		padding-top:20px;
	}
	.contact-area .info{
		padding-right:20px;
	}
}
@media only screen and (max-width: 1009px){
	.desktop{
		display:none !important;	
	}
}
@media only screen and (min-width: 1010px){
	#wrapper{
	 	width:1100px;
	}
	header #headline{
		padding-top:0px;
		padding-bottom: 15px;
	}
	.press-drag-copy{
		width:360px;
	}
	#mobile-nav-btn{
	 	display: none;
	}
	footer{
		max-width:1100px;
	}

}