html, body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	overflow-x:hidden;
}

.skrollable {
	/* First-level skrollables are positioned relative to window */
	position:fixed;

	/* Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable */
	z-index:100;
}

.skrollr-mobile .skrollable {
	/* May cause issues on Android default browser (see #331 on GitHub). */
	position:absolute;
}

.skrollable .skrollable {
	/* Second-level skrollables are positioned relative their parent skrollable */
	position:absolute;
}

.skrollable .skrollable .skrollable {
	/* Third-level (and below) skrollables are positioned static */
	position:static;
}

/*my stuff*/
footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	height: 140px;
}


#prelogin .modal-body p{
    color: #111;
}

#globalNav, footer {
	z-index: 500;
}
h1 {
	font-size: 4em;
	color: #fff;
	text-shadow: 1px 0px 7px rgba(0,0,0,0.2) !important;
	margin: 0 0 5px;
	line-height: 1;
	font-weight: 300;
}
h2 {
	font-size: 1.5em;
	color: #fff;
	text-shadow: 1px 0px 7px rgba(0,0,0,0.2) !important;
	margin: 0;
	line-height: 1;
	font-weight: 700;
}
#signInBtn {
	margin: 15px 0 0;
	background: rgba(0,0,0,0.3);
	color: #fff;
	border: solid 3px #fff;
	border-radius: 25px;
	padding: 6px 15px;
	transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-webkit-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
}
#signInBtn:hover {
	background: #d97a08;
	transition: background .6s ease-out;
	-moz-transition: background .6s ease-out;
	-webkit-transition: background .6s ease-out;
	-o-transition: background .6s ease-out;
}

/*scroll down icon*/
/*#scrollContainer {
	height: 90px;
    bottom: 230px;
    text-align: center;
    color: #fff;
    width: 100%;
}*/
#scrollContainer {
    height: 90px;
    bottom: 164px;
    text-align: center;
    color: #fff;
    width: 100%;
    position: fixed;
    z-index: 999;
}
#scrollContainer span {
	display: block;
	margin-bottom: 5px;
}
.icon-scroll,
.icon-scroll:before {
	position: absolute;
	left: 50%;
}
.icon-scroll {
	width: 40px;
	height: 70px;
	margin-left: -20px;
	box-shadow: inset 0 0 0 3px #fff;
	border-radius: 25px;
	display: inline-block;
}
.icon-scroll:before {
	content: '';
	width: 8px;
	height: 8px;
	background: #fff;
	margin-left: -4px;
	top: 8px;
	border-radius: 4px;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: scroll;
	animation-name: scroll;
}
@-webkit-keyframes scroll {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(46px);
		transform: translateY(46px);
	}
}
@keyframes scroll {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(46px);
		transform: translateY(46px);
	}
}

#set-height {
	display: block;
	height: 42349px;
}
video {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: calc(100% - 210px);
	width: auto;
	height: auto;
	z-index: -100;
	top: 70px;
}
p {
	color: #fff;
}


#mosaic-img {
	top: 74px;
	bottom: 143px;
	width: 100%;
}
#mosaic-img > div {
	padding: 0;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#mosaic-img > div:before {
	content: '';
	display: inline-block;
	height: 100%;
	width: 100%;
}
#mosaic-img > div.mos2:before {
	background: rgba(0,0,0,0.3);
}
#mosaic-img .topRow {
	height: 66%;
	overflow: hidden;
	border-right: solid 3px #fff;
    border-bottom: solid 3px #fff;
    position: relative;
}
#mosaic-img .botRow {
	height: 34%;
	overflow: hidden;
	border-right: solid 3px #fff;
}
#mosaic-img .topRow:last-child, #mosaic-img .botRow:last-child {
	border-right: none;
}
#mosaic-img > img {
	min-width: 100%;
	min-height: 100%;
	height: auto;
	opacity: 0;
}
.animatedTxt {
	top: 54%;
	width: 100%;
	text-align: center;
	height: 90px;
	position: absolute !important;
}
.mos1 {
	background-image: url(/files/live/sites/common/files/images/homepage/TouristCouple.jpg);
}
#mosaic-img > div.mos2 {
	background-image: url(/files/live/sites/common/files/images/homepage/new-comp-2.jpg);
	background-size: inherit;
	background-position-y: top;
}
.mos2 h1 {
	position: absolute !important;
	top: 50%;
	text-align: center;
	width: 100%;
	height: 76px;
	margin-top: -38px;
}
.mos3 {
	background-image: url(/files/live/sites/common/files/images/homepage/Waterpark_family.jpg);
}
.mos4 {
	background-image: url(/files/live/sites/common/files/images/homepage/Hotelroom.jpg);
}
.mos5 {
	background-image: url(/files/live/sites/common/files/images/homepage/familysking-resized.jpg);
}
.bubbles {
	opacity: 1;
	height: 100%;
	width: 100%;
	top: 0;
	position: absolute !important;
	z-index: 1;
	overflow: hidden;
}
.bubbles video {
	position: absolute !important;
	top: 0;
	bottom: 0;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}
#signInBtn {
	top: 65%;
	position: absolute;
	z-index: 2;
	min-width: 88px; 
    width: auto;
	margin-left: -44px;
	left: 50%;
}

/* smaller than 992px */
@media screen and (max-width: 992px) {
	#mosaic-img {
	    transform-origin:50% 0 !important;
	}
}

/* smaller than 768px */
@media screen and (max-width: 768px) {
	#mosaic-img {
	    top: 52px;
	    bottom: 137px;
	    transform: scale(1) !important;
	}
	#mosaic-img > div.mos2 {
	    height: 100%;
	    background-size: auto 3000px;
	}
	#mosaic-img .topRow {
		border: none;
		height: 100%;
	}
	.animatedTxt {
	    margin-top: -80px;
	}
	.mos2 h1 {
	    font-size: 60px;
	}
}

/* small screen adjustment */
@media screen and (min-height: 0px) and (max-height: 434px){
	h1.animatedTxt{
		font-size: 4em;
		top: 10% !important;
	}
	.animatedTxt h2{
		display: none;
	}
	#signInBtn{
		top:30%;
	}
	 #mosaic-img .topRow{
    	min-height: 300px;
    }
    .botRow{
    	display: none;
    }
}

@media screen and (min-height: 435px) and (max-height: 500px){
    #mosaic-img .topRow{
    	height: 100%;
    	min-height: 400px;
    }
    h1.animatedTxt{
    	font-size: 4em;
    	top: 12% !important;
    }
    .animatedTxt h2{
    	font-size: 1.7em;
    }
    .animatedTxt{
    	top: 29%;
    }
    #signInBtn{
		top:37%;
	}
    .botRow{
    	display: none;
    }
}

@media screen and (min-height: 500px) and (max-height: 600px){
    #mosaic-img .topRow{
    	height: 100%;
    	min-height: 400px;
    }
    h1.animatedTxt{
    	font-size: 4em;
    	top: 26% !important;
    }
    .animatedTxt h2{
    	font-size: 2em;
    }
    .animatedTxt{
    	top: 44%;
    }
    #signInBtn{
		top:55%;
	}
    .botRow{
    	display: none;
    }
}



/* Keep text together on regular screens */
@media screen and (min-height: 601px) and (max-height: 749px){
    h1.animatedTxt{
    	font-size: 5em;
    	top: 30% !important;
    }
    .animatedTxt h2{
    	font-size: 2em;
    }
    .animatedTxt{
        top: 49%;
    }
    #signInBtn{
        top: 60%;
    }
    #mosaic-img .topRow{
    	height: 100.5%;
    	min-height: 400px;
    }
    .botRow{
    	display: none;
    }
}

/* Keep text together on v tall screens */
@media screen and (min-height: 750px) and (max-height: 949px){
    h1.animatedTxt{
    	top: 32% !important;
    	font-size: 6em;
    }
    .animatedTxt h2{
    	font-size: 2.5em;
    }
    .animatedTxt{
        top: 56%;
    }
    #signInBtn{
        top: 68%;
    }
}
@media screen and (min-height: 950px) and (max-height: 1050px){
    h1.animatedTxt{
    	top: 32% !important;
    	font-size: 6em;
    }
    .animatedTxt h2{
    	font-size: 2.5em;
    }
    .animatedTxt{
        top: 52%;
    }
    #signInBtn{
        top: 65%;
    }
}


@media screen and (min-height: 1050px){
     h1.animatedTxt{
    	top: 32% !important;
    	font-size: 6em;
    }
    .animatedTxt h2{
    	font-size: 2.5em;
    }
    .animatedTxt{
        top: 50%;
    }
    #signInBtn{
        top: 62%;
    }
}
@media screen and (min-height: 1120px) and (max-height: 1200px){
    #mosaic-img .topRow{
    	max-height: 600px;
    }
    .botRow{
    	min-height: 40% !important;
    }
}
@media screen and (min-height: 1201px){
    #mosaic-img .topRow{
    	height:50%;
    }
    .botRow{
    	min-height: 50% !important;
    }
}


/* **** Mobile **** */

/* 5 Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: portrait) {
  	h1.animatedTxt{
  	    font-size: 4em;
    	top: 42% !important;
    }
    .animatedTxt{
    	top: 60%;
    }
    .animatedTxt h2{
    	margin-top: 0;
    	font-size: 1.5em;
    }
    #signInBtn{
    	top: 60%;
    }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: landscape) {
	h1.animatedTxt{
  		font-size: 3em;
		top: 35%!important;
    }    	
	#signInBtn {
		top: 24%;
	}
	.animatedTxt{
		top: 60%;
	}
	.animatedTxt h2{
		margin-top: 0;
	}
	footer{
		bottom:-20px;
	}
	#progress{
		display: none;
	}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (orientation: portrait) { 
		h1.animatedTxt{
  	    	font-size: 4em;
    		top: 43% !important;
    	}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    	}
    	#signInBtn{
    		top: 63%;
    	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (orientation: landscape) { 
  	    h1.animatedTxt{
  	    	font-size: 4em;
    		top: 36%!important;
    	}    	
    	#signInBtn {
    		top: 30%;
		}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    	}
}


/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) { 
		h1.animatedTxt{
  	    	font-size: 4em;
    		top: 46% !important;
    	}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    		font-size: 2em;
    	}
    	#signInBtn{
    		top: 63%;
    		font-size: 16px;
    	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 
  	    h1.animatedTxt{
  	    	font-size: 4em;
    		top: 36%!important;
    	}    	
    	.animatedTxt h2{
    		display: block;    		
    	}
    	.animatedTxt{
    		top:;
    	}
    	#signInBtn {
    		top: 43%;
		}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    	}
}

/* iPhone 5 Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  	h1.animatedTxt{
  	    font-size: 4em;
    	top: 42% !important;
    }
    .animatedTxt{
    	top: 60%;
    }
    .animatedTxt h2{
    	margin-top: 0;
    	font-size: 1.5em;
    }
    #signInBtn{
    	top: 60%;
    }
}

/* iPhone 5 Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	h1.animatedTxt{
  		font-size: 3em;
		top: 35%!important;
    }    	
	#signInBtn {
		top: 24%;
	}
	.animatedTxt{
		top: 60%;
	}
	.animatedTxt h2{
		margin-top: 0;
	}
	footer{
		bottom:-20px;
	}
	#progress{
		display: none;
	}
}

/* iPhone 6 */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
		h1.animatedTxt{
  	    	font-size: 4em;
    		top: 43% !important;
    	}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    	}
    	#signInBtn{
    		top: 63%;
    	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  	    h1.animatedTxt{
  	    	font-size: 4em;
    		top: 36%!important;
    	}    	
    	#signInBtn {
    		top: 30%;
		}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    	}
}


/* iPhone 6 Plus */
/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
		h1.animatedTxt{
  	    	font-size: 4em;
    		top: 46% !important;
    	}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    		font-size: 2em;
    	}
    	#signInBtn{
    		top: 63%;
    		font-size: 16px;
    	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  	    h1.animatedTxt{
  	    	font-size: 4em;
    		top: 36%!important;
    	}    	
    	.animatedTxt h2{
    		display: block;    		
    	}
    	.animatedTxt{
    		top:;
    	}
    	#signInBtn {
    		top: 43%;
		}
    	.animatedTxt{
    		top: 60%;
    	}
    	.animatedTxt h2{
    		margin-top: 0;
    	}
}