/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, 
button,
input, 
select, 
textarea { 
    color: #222;
}



body {
	overflow-x:hidden;
}



html {
    font-size: 1em;
    line-height: 1.4;
}
html, body {
	height:100%;
	margin:0;
	padding:0;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}


.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}




/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

ul {
	list-style:none
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Reset Styles
   ========================================================================== */

ul, li, p, h1, h2, h3, h4, h5, h6 {padding:0; margin:0; font-weight:normal}
a {text-decoration:none}
img {max-width:100%}

a img {
	border:none
}


/* ==========================================================================
   Backgrounds
   ========================================================================== */


.container-bg {
	 height:100%;
	 width:100%;
	 position:fixed;
}

.overview-bg {
	background: url(../images/bg-overview.jpg) no-repeat left top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.city-bg {
	background: url(../images/bg-city.jpg) no-repeat left top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.beach-bg {
	background: url(../images/bg-beach.jpg) no-repeat left top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.country-bg {
	background: url(../images/bg-country.jpg) no-repeat left top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}




/* ==========================================================================
   (Global) Text Styles
   ========================================================================== */

h1, h2, h3 {
		font-family: "Origo", "Helvetica Neue", Helvetica, Arial, sans-serif;
		line-height: 1.3;
}

h2 {
	font-size: 2rem;
	font-weight: 400;
	/* margin-bottom: -10px; */

}

h3 {
	font-size: 2.4rem;
	font-weight: 400;}

h4 {
	font-size:0.8rem;
	font-weight: 400;
	text-transform:uppercase;
	letter-spacing:0.5px;
	color: #6d0f58;
}

p {
	font-size: 1rem;
	line-height: 1.3;
	font-weight: 300;
	margin-bottom: 33px;
}

p a {
	font-weight: 400;
	color: #222;
}

ul {
	list-style:none
}

.text-btn {
	background-color:#e90006;
	padding: 9px 12px 11px;
	-webkit-border-radius: 4px; 
  	-moz-border-radius: 4px; 
 	border-radius: 4px;
 	transition:all ease 0.2s;
 	text-align:center
}

.text-btn:hover {
	background-color:#9b090d;
}

.text-btn img {
	width:100px
}

.content-page-header {
	max-width:350px
}


/* ==========================================================================
   (Global) Layout & Structure
   ========================================================================== */

.left-list {
	margin-right:5%
}

#secret-escapes-bar {
	position:absolute;
	background-color: #000;
	background-color: rgba(0,0,0,0.6);
	top:0px;
	z-index: 800;
	width:100%
}
	.secret-escapes-bar-logo {
		width:200px;
		float:left;
		padding: 30px 0px 30px 25px;}

	.secret-escapes-bar-nav {
		float:left;
		padding-top: 35px;}

	.secret-escapes-bar-nav li {
		float:left;
		margin-left:20px
	}

	.secret-escapes-bar-nav li a {
		color:#d4d4d4;
		text-transform:uppercase;
		font-size:0.8rem;
		padding-bottom:3px;
		transition:all ease 0.2s 
	}

	.secret-escapes-bar-nav li a:hover {
		color:#fff;
		border-bottom:1px solid #ff8c00 
	}

	.secret-escapes-bar-client {
		float:right;
		width:130px;
		padding:30px 4%;
		/* background-color:#000
	 */}

	.secret-escapes-bar-client a {
		text-decoration:none;
		border:none
	}

	.secret-escapes-bar-client a img {
		text-decoration:none;
		border:none
	}





/* ==========================================================================
   Fixed Page Elements
   ========================================================================== */

#wrapper {
    min-width: 100%;
    min-height: 100%;
    background-color: #000;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    z-index: 1;
}

.top-logo {
	position:absolute;
	top: 40px;
	left: 3%;
}

.top-logo img {
	width:160px
}

.content-logo {
	display: none;
	position:relative;
	margin-bottom: 440px;
}

.content-logo img {
	width:160px
}

.partnership {
	position:absolute;
	bottom: 30px;
	right: 4.5%;
	text-align: right;
	font-family: "Origo", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.partnership p {
	font-size: 1.1rem;
	margin-bottom: 2px;
	color:#fff;
	padding-right:3px
}

.partnership img {
	width: 120px;
	margin-bottom: 12px;
}

.bg-photo-location {
	position:absolute;
	right:4%;
	top: 36px;
	background: url(../images/photo-icon.svg) no-repeat top right;
	text-align: right;
	width: 120px;
	background-size: 25px;
	padding-top: 30px;
}

.bg-photo-location p {
	color:#969697;
	font-size: 0.7rem;
}


/*============ Navigation ============*/


.nav {
	position:absolute;
	bottom:40px;
	left: 2%;
	color:#fff;
}

.nav ul {
	margin-bottom: 20px;}

.nav li {
	font-size: 0.9em;
	font-weight:500;
	margin-bottom: 9px;
	padding-left:18px
}

.nav li a {
	color:#fff;
	transition:color ease 0.3s
}

.nav li a:hover {color:#e90006}


.nav p {
	font-size: 0.7rem;
	padding-left:22px;
	color: #969697;
	margin-bottom: 2px;
}


.selected-button {
	width:10px;
	height:10px;
	-webkit-border-radius: 6px; 
  	-moz-border-radius: 6px; 
  	border-radius: 6px;
  	position:absolute;
  	left:0;
  	background-color: #e90006;
}

.selected-button-overview {top: 3px;}
.selected-button-city {top: 33px;}
.selected-button-beach {top: 61px;}
.selected-button-country {top: 89px;}


#social-icons {
	padding-left: 12px;
	margin-bottom: 0;
}

#social-icons li {
	float:left;
	width: 30px;
	padding: 5px;
	transition:all ease 0.3s;
}

#social-icons li:hover {
	opacity:0.7
}



/*============ Mobile Navigation ============*/


#mobile-nav {
  display:none;
  float: right;

}

#mobile-nav #menu {
  display:none;
  background-color: #000000;
  width:100%;
  padding: 20px 0;
  position: absolute;
  z-index: 900;
  left: 0;
  top:0;
}

#mobile-nav a {
  color:#A5A5A5 !important
}

#mobile-nav a:hover {
  color:#fff !important
}

#mobile-nav a#pull:after {  
        content:"";   
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;  
        top: 10px;  
    } 

#mobile-nav #menu-open img {
  width:20px; 
}

#mobile-nav #menu-close img {
  width:22px; 
  height:22px;
  /* margin: 25px 0%; */}

#mobile-nav ul {
  	padding-top: 60px;
	
  	/* border-bottom: 1px solid #2A2A2A; */
	
  	padding-bottom: 25px;
	
  	margin-bottom: 0px;}

#mobile-nav .secret-escapes-bar-logo {
	position:absolute;
	z-index: 910;}

#mobile-nav li {
  width: 80%;
  display: inline-block;
  padding: 0 30px;
}

#mobile-nav li a {
  display:block;
  padding: 5px 0;
  font-size: 0.85rem;
}

.mobile-partnership {
	padding: 10px 0 5px 31px;
}

.mobile-partnership p  {
	font-size: 0.75rem;
	color: #A5A5A5;
	margin-bottom: 8px;}

.mobile-partnership img {
	width:120px
}

#menu-close {
  text-align: right;
  position: absolute;
  top: 35px;
  right: 45px;
  z-index: 0;
}

.mobile-menu-button {
	/* width:80%; */
	padding: 35px 45px 0;
	text-align:right
}

.footer-nav {
	position:relative;
	color:#fff;
	display: none;
	background-color: #1F1F1F;
  	width:100%;
	padding-bottom: 30px;
	z-index: 9999;
}

.footer-nav li a {
	color: #A5A5A3;
	display:block;
  	padding: 11px 0;
}

.footer-nav ul {
	width: 80%;
 	
	padding: 30px 10%;
}

.footer-nav li {
  border-bottom: 1px solid #2A2A2A;
}



/*============ Main Content Block ============*/


.main {
	position:absolute;
	width: 60%;
	margin: 45vh 20% 0 20%;
	z-index: 500;
}

#page-content {
	background-color: rgba(250, 250, 250, 0.93);
	padding: 50px 60px 0px 60px;
	margin-bottom: 60px;
}

#page-content h2 {
	color: #001;
	letter-spacing: 1px;
	font-size: 5rem;
}

#page-content h3 {
	color: #000;
	margin-bottom: 10px;}


#page-content ul {
	margin-top:40px
}

#page-content .img-wrapper {
	background-color: #fff;
	margin-bottom: 20px;}

#page-content ul h4 {
	margin: 4px 0 12px 0;}

#page-content ul p {
	font-size: 0.9rem;}

#page-content p a {
	color: #6d0f58;
	transition: color ease 0.2s;
	font-weight: 500
	
}

#page-content p a:hover {
	color: #a84c93;
}


#page-content li {
	float:left;
	width:47.5%;
	margin-bottom: 64px;
	position:relative
}

#page-content li img {
	transition: opacity ease 0.5s;
	opacity:1
}

#page-content li img:hover {
	opacity:0.7
}

#page-content li span {
	position:absolute;
	top:-5px;
	left:-5px;
	padding:5px 8px;
	font-weight:600;
	font-size:0.8rem
;
	z-index: 100;
}

#page-content .left-list {
	margin-right:5%
}

.offers-cta {
	margin-bottom:35px;
	background-color: rgba(250, 250, 250, 0.93);
	position: relative;
	padding:20px
}

.offers-cta img {
	opacity:1
	transition:ease opacity 0.3s
}

.offers-cta img:hover {
	opacity:0.85
	
}


.products {
	margin: -60px 0 60px 0;
}

.comp-banner {
	position:relative;
	margin-bottom: 50px;}

	.comp-banner h2, .comp-banner p {
		position:absolute;
		z-index:999;
		color:#fff;
		left:6%
	}

	.comp-banner h2 {
		font-size:6rem;
		top:30px
	}

	.comp-banner p {
		font-size:1rem;
		top: 34%;
		font-weight:300;
		width:50%
	}

	.comp-banner .text-btn {
		display: block;
		width: 138px;
		margin-top: 21px;
	}

.mobile-comp-banner {
	display: none
}
		

/*============ Overview Styles ============*/

#overview {
	margin: 45vh 20% 0 20%;
}

.page-head {
	margin-bottom:60px;
}

.page-head h1 {
	color:#fff;
	font-size: 2em;
	font-weight: 500;
	line-height:normal;
	width:100%;
	float:left;
}

	#overview .overview-title-img {
		max-width:720px;
		margin-bottom:20px;
		display: block;
	} 

	#overview .mobile-overview-title-img {
		max-width: 100%;
		margin-bottom:20px;
		display: none;
	}

	#overview .overview-sub-img {
		max-width:270px;
		margin-bottom: 0px;
	} 

	#overview .page-head p {
		font-size: 1.15em;
		font-weight:700;
		color:#fff
	;
		margin-top: 24px;
		line-height: 1.5;
}


.home-panels {
	margin-bottom:80px;
	background-color: #fff;
}

	.home-panel {
		float:left;
		width: 33.333333333333%;
		background-color:#fff;
		padding-bottom:10px
	;
		/* min-height: 460px; */
}

	.middle-home-panel {
		background-color:#eee;
		height: 100%;
}

	.home-panel-img {
		background-color:#000;
		position:relative;
		text-align:center
	}

	.home-panel-img img {
		opacity:0.65;
		transition:all ease 0.3s
	}

	.home-panel-img img:hover {
		opacity:1
	}

	.home-panel-img h2 {
		position:absolute;
		width:100%;
		color:#fff;
		z-index:999;
		font-size:2.4rem;
		text-indent: 9999px;
		margin-top:-24px
	;
		overflow: none;
}

	.home-panel-text {
		padding:26px
	}

	.home-panel-text p {
		font-size:0.9rem;
		font-weight:300;
		margin-bottom: 34px;
		min-height: 130px;
}

	.home-panel-text .text-btn {
		width:100%;
	}

#love-is-on {
	position:relative
}

#love-is-on p {
	position:absolute;
	color:#fff;
	left: 6.5%;
	top:38%;
	width:38%;
	font-size:0.9rem;
	line-height:1.5
}

#love-is-on p.quote {
	top:80%;
	font-weight:700;
}

#love-is-on p.cite {
	top:85%;
	font-size:0.65rem;
	color:#e90006;
	font-weight:700;
}

.mobile-love-is-on-text {
	display: none;
	background-color: #000;
}

.mobile-love-is-on-text p {
	color:#fff;
	padding: 30px 30px 0 30px;
	font-size:0.9rem;
	line-height:1.5
}


#video-container {
	margin-bottom:50px;
	padding: 40px;
	background: #000;
}

.hashtag {
	width:100%;
	text-align:center;
	padding:40px 0 10px
}

.hashtag img {
	width:200px
}


/* ==========================================================================
   Content Pages
   ========================================================================== */

.products img {
	float:left;
	width:50%
}



/* ==========================================================================
   Footer
   ========================================================================== */

#page-footer {
	color:#fff;
	margin:20px 0 70px;
	position:relative;
}


#page-footer ul {
	position:absolute;
	right:0px;
	top:-10px
}


#page-footer li {
	width: 60px !important;
	float: none !important;
	display:inline-block;
	margin-left:15px
}





/* ==========================================================================
   Media Queries
   ========================================================================== */



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

	.partnership, .bg-photo-location {
		display:none
	}

	.main {
		width: 70%;
		margin: 55vh 8% 0 22%;
	}

	#overview {
		margin: 40vh 8% 0 22%;
	}

	.overview-bg, .city-bg, .beach-bg, .country-bg {
		background-attachment: scroll;
	}

	#page-footer {
		margin: 20px 0 25px;
	}

	#page-footer ul {
		position: relative;
	}

	#page-footer li {
		margin:25px 15px 0 0;
	}

			p.quote, p.cite  {
		display: none
	}


}




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

	.nav, .partnership, .top-logo  {
		display:none;
	}

	#mobile-nav  {
		display:block;
		position: absolute;
		width: 100%;
		z-index: 900;
	}

	.secret-escapes-bar-nav {
		display:none
	}

	.secret-escapes-bar-nav, .secret-escapes-bar-client {
		display:none
	}



	.content-logo {
		display:block
	}

	.main, #overview {
		position:relative;
		width: 80%;
		margin: 0 10%;
		padding-top: 30px;
		z-index: 500;
	}

	#overview {
		padding-top: 240px;
	}

	.footer-nav {
		display: inline-block
	}



	#page-content p {
		font-size: 1em;
	}

	.home-panel-img img {
		opacity:1;
	}

}


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




}



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

	#overview .overview-title-img {
		max-width: 100%;
		margin-bottom: 20px;
		display: block;
	}

	#overview .overview-sub-img {
		width:300px
	}




}


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





}

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

	#love-is-on {
		display: none
	}

	.mobile-love-is-on-text {
		display: inline-block;
	}

	#video-container {
		margin-bottom:50px;
		padding: 0px 30px;
	}

	.hashtag {
		width: 100%;
		text-align: center;
		padding: 30px 0;
	}

	.hashtag img {
		width:150px
	}

	.home-panels {
		margin-bottom: 40px;
	}

	.comp-banner {
		display: none
	}

	.mobile-comp-banner {
		display: inline-block;
		margin-bottom: 80px;
	}

	#overview .overview-title-img {
		display: none;
	}
	
	#overview .mobile-overview-title-img {
		display: block;
	}

	.home-panels {
		background:none
	}

	.home-panel {
		width: 100%;
		min-height:none;
		margin-bottom:35px
	}

	.home-panel p {
		min-height: 0px;
	}

	.home-panel-img img {
		opacity:1;
	}

}


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

	#page-footer h1 {
		line-height:1.1
	}

	#overview li, #page-content li, .page-offers li {
		float: left;
		width: 100%;
		margin-bottom: 44px;
	}

	.content-logo {
		margin-bottom: 200px;
	}

	.page-head {
		margin-bottom: 30px;
	}

	#overview .page-head h1, #overview .page-head h1.subheadline {
		top:0px;
		left:0px;
		font-size: 1.34rem;
		margin-left: 0;
		padding: 15px 16px 9px;
		max-width: none;
	} 

	#overview-intro-copy p {
		font-size:1rem !important;
		line-height:1.4  !important
	}

	#overview .page-head h2.hero-caption {
		bottom: 0px;
		right: 0px;
		float:left
		margin-bottom:30px;
		padding: 11px 10px 7px;
}
	.overview-bg {
		background-position: right top ;
	}

	.city-bg {
		background-position: center top ;
	}

	.beach-bg {
		background-position: -100px top;
	}

	.country-bg {
		background-position: -150px top;
	}

	.products img {
	width:100%
	}

	#overview .overview-sub-img {
	width: 200px;
	}


	.content-page-header {
		max-width: 100%;
	}





