/*
	Start Mobile base styles are
	Should work on all devices
*/
@font-face {
    font-family: aztecanow;
    src: url('font/MontBlack.otf') format('opentype');
}

@font-face {
    font-family: montBook;
    src: url('font/MontBook.otf') format('opentype');
}

@keyframes fadeBack {
		  0%   {opacity:1;}
		  100%  {opacity:0;}
		}
	@keyframes fadeInOut {
			  0%   {opacity:0;}
			  50%  {opacity:1;}
			  55%  {opacity:1;}
			  100%  {opacity:0;}
			}
	@keyframes fadeIn {
			  0%   {opacity:0;}
			  100%  {opacity:1;}
			}

#heroTitleSwap_1{
	opacity: 1;
	animation-name: fadeBack;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
#heroTitleSwap_2{
	opacity: 0;
	animation-name: fadeInOut;
	animation-duration: 1.5s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}
#heroTitleSwap_3{
	opacity: 0;
	animation-name: fadeInOut;
	animation-duration: 1.5s;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
}
#heroTitleSwap_4{
	opacity: 0;
	animation-name: fadeInOut;
	animation-duration: 1.5s;
	animation-delay: 5s;
	animation-fill-mode: forwards;
}
#heroTitleSwap_5{
	opacity: 0;
	animation-name: fadeInOut;
	animation-duration: 1.5s;
	animation-delay: 6.5s;
	animation-fill-mode: forwards;
}
#heroTitleSwap_6{
	opacity: 0;
	animation-name: fadeInOut;
	animation-duration: 1.5s;
	animation-delay: 8s;
	animation-fill-mode: forwards;
}
#heroTitleSwap_7{
	opacity: 0;
	animation-name: fadeIn;
	animation-duration: 1.5s;
	animation-delay: 9.5s;
	animation-fill-mode: forwards;
}

body, HTML{
	background-color: #3D1CC0;
	padding: 0px;
	margin: 0px;
	font-family: montBook, sans-serif;
	color: #ffffff;
	font-size: 18px;
	line-height: 24px;
}

html:-ms-fullscreen{
	width: 100%;
	/* needed to center contents in IE */
}

a{
	color: white;
}

article{
	overflow: hidden;
}
.daquari{
	color: #00E7BA;
}
.clearfix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
#terms, #privacy, #contactUs{
	margin: 0%;
	width: 100%;
	height: 100%;
	background-color: white;
	color: black;
	font-size: 16px;
	z-index: 999;
	display: block;
}
.contentScroller{
	position: relative;
	height: 100%;
	margin-top: 0px;
	padding-bottom: 10%;
	margin-left: 5%;
	margin-right: 5%;
}
.submitButton{
	width: 100px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 8px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: white;
	background-color: black;
	border: 0px;
	border-radius: 30px;
}
#darken{
	position: fixed;
	top: 0px;
	width: 100%; height: 100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: black;
	z-index: 999;
	opacity: 0;
	display: none;
	transition: 1.5s opacity;
}
#closeVideo{
	position: relative;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	top: 0px;
	right: 0px;
	text-align: right;
}
.closeOverlay{
	position: relative;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	top: 0px;
	right: 0px;
	text-align: right;
}
#theVideo{
	width: 100%;
	height: 90%;
}
.mainContainer{
	position : relative;
	width: 311px;
	margin: auto;
	padding-left: 33px;
	padding-right: 33px;
}

#hero{
	position: relative;
	width: 100%;
	height: 835px;
	background-image: url(../images/BgTopFade.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
}

#homeLogo{
	position: absolute;
	width: 72px;
	height: 72px;
	top: 24px;
	left: 30px;
	background-image: url(../images/AztecaNowLogo.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
}

#footerLogo{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 40px;
	left: 113px;
	background-image: url(../images/AztecaNowLogo.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
}

#heroBrandBG{
	width: 100%;
	height: 640px;
	background-image: url(../images/Bg_AzNowBranding.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
}

#homeHugs{
	position: absolute;
	width: 375px;
	height: 460px;
	top: 375px;
	left: -14px;
	background-image: url(../images/HeroHugs.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
}
#heroCopyBlock{
	position: absolute;
	top: 143px;
	left: 32px;
	width: 308px;
}
.title{
	font-family: aztecaNow, sans-serif;
	color: #ffffff;
	font-size: 28px;
	line-height: 38px;
}
.titleHero{
	font-family: aztecaNow, sans-serif;
	color: #ffffff;
	font-size: 40px;
	color: #FFFFFF;
	letter-spacing: -1.08px;
	line-height: 45px;
}
#titleSwapHolder{
	position: relative;
	height: 65px;
	white-space: nowrap;
}
.titleSwap{
	position: absolute;
}
#heroButtonHolder{
	margin-top: 75px;
	margin-left: 0px;
}
.heroButton{
	float: none;
	padding-right: 0px;
	padding-bottom: 10px;
	text-align: center;
}

#carousel{
	position: relative;
	background-color: #280082;
	height: 200px;
	text-align: center;
	z-index: 990;
	overflow: scroll;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}
#carousel::-webkit-scrollbar { display: none; }

#carouselContainer{
	position: relative;
	left: 18px;
	width: 2030px;
	margin: auto;
	
}
#carousel2{
	position: relative;
	left: -33px;
	padding-left: 33px;
	height: 230px;
	text-align: center;
	z-index: 990;
	overflow: scroll;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}
#carousel2::-webkit-scrollbar { display: none; }

#carouselContainer2{
	position: relative;
	left: 0px;
	width: 1660px;
	
}
.showHolder{
	position: relative;
	float: left;
	width: 241px;
	margin-top: 18px;
	margin-right: 12px;
	cursor: pointer;
}
.lastShow{
	position: relative;
	float: left;
	width: 241px;
	margin-top: 18px;
	margin-right: 0px;
	cursor: pointer;
}
.showDeets{
	font-size: 14px;
	padding-left: 12px;
}
.showDeets2{
	font-size: 16px;
	padding-top: 6px;
}
.showName{
	font-family: aztecaNow, sans-serif;
	font-size: 18px;
	line-height: 16px;
	padding-top: 16px;
	padding-left: 12px;
}
.showImage{
	width: 235px;
	height: 141px;
	background: #000000;
	border-radius: 8px;
	background-size: cover;
}
#corePageBody{
	width: 100%;
	background-image: url(../images/Bg_simpleFade.png);
	background-repeat: repeat-x;
	background-position: top center;
	background-size: 100%;
	padding-top: 100px;

}
.wideCentred{
	font-size: 37px;
	letter-spacing: -0.77px;
	text-align: left;
	line-height: 41px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 900px) {
	.wideCentredSmall{
		font-size: 24px;
		letter-spacing: -0.77px;
		text-align: left;
		line-height: 41px;
		margin-bottom: 218px;
	}
}
@media only screen and (min-width: 900px) {
	.wideCentredSmall{
		font-size: 24px;
		letter-spacing: -0.77px;
		text-align: center;
		line-height: 41px;
		margin-bottom: 218px;
	}
}
.wideCentred2{
	position: relative;
	top: -30px;
	font-size: 20px;
	letter-spacing: -0.5px;
	text-align: left;
	line-height: 28px;
	margin-bottom: 0px;
}
#twoColHolder{
	margin-bottom: 80px;
}
.twoColText{
	float: none;
	width: auto;
}
.colTwo{
	margin-top: 20px;
	margin-left: 0px;
}
#watchAnywhere, #telenovelas, #Descarga{
	position: relative;
	height: 820px;
}
#whyYoullFallInLove{
	position: relative;
	height: 720px;
}
#preguntasFrecuentes{
	margin-top: 100px;
}
.textfloatRight{
	position: absolute;
	top: 365px;
	left: 33px;
	width: 311px;
}
.textfloatLeft{
	position: absolute;
	top: 415px;
	left: 33px;
	width: 311px;
}
.sidepiece{
	font-size: 27px;
	line-height: 34px;
	margin-bottom: 17px;
}
.floorFade{
	position: absolute;
	top: 242px;
	left: -35px;
	width: 1227px;
	height: 190px;
	background-image: url(../images/floorFade.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
	z-index: 0;
}
.rightSide{
	left: 357px;
}
#iPadImage{
	position: absolute;
	top: 0px;
	left: -77px;
	width: 418px;
	height: 322px;
	background-image: url(../images/Ipad.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100%;
	z-index: 991;
}
#iPhomeImage{
	position: absolute;
	top: 0px;
	left: 15px;
	right: auto;
	width: 402px;
	height: 377px;
	background-image: url(../images/iPhones.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100%;
	z-index: 991;
}
#devicesImage{
	position: absolute;
	top: -40px;
	left: -10px;
	width: 400px;
	height: 375px;
	background-image: url(../images/devices.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100%;
	z-index: 991;
}
#showCollection{
	height: 950px;
	width: 1004px;
}
.featureList{
	float: left;
	width: 311px;
	height: auto;
	margin-bottom:5px;
	margin-left: 0px;
}
.featureListFirst{
	margin-left: 0px;
}
.featureTitle{
	color: #00E7BA;
	font-size: 18px;
	line-height: 20px;
}
.comingsoon{
	font-family: montBook, sans-serif;
	font-size: 12px;
}
.featureText{
	font-size: 15px;
	line-height: 19px;
}
#finalImage{
	height: 343px;
	background-image: url(../images/FinalImage.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}


footer{
	background-color: #280082;
	height: 480px;
	overflow: hidden;
}
#copyrightHolder{
	position: absolute;
	top: 218px;
	left: 33px;
	font-size: 16px;
}
#footerButtonHolder{
	position: absolute;
	width: 355px;
	right: 8px;
	top: 340px;
}
/*	END Mobile base styles here

@media screen 
	and (min-width: 700px){
	
	}
*/

@media screen 
	and (min-width: 800px){
	/*
		Start Desktop 1440 and up styles
	*/
	body, HTML{
	font-size: 20px;
	line-height: 28px;
}


	.mainContainer{
		width: 1004px;
		padding-left: 98px;
		padding-right: 98px;
	}
	#hero{
		position: relative;
		width: 100%;
		height: 640px;
		background-image: url(../images/BgTopFade.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: cover;
	}

	#homeLogo{
		position: absolute;
		width: 131px;
		height: 131px;
		top: 39px;
		left: 41px;
		background-image: url(../images/AztecaNowLogo.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}

	#footerLogo{
		position: absolute;
		width: 131px;
		height: 131px;
		top: 63px;
		left: 107px;
		background-image: url(../images/AztecaNowLogo.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}

	#heroBrandBG{
		width: 100%;
		height: 640px;
		background-image: url(../images/Bg_AzNowBranding.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: cover;
	}

	#homeHugs{
		position: absolute;
		width: 586px;
		height: 721px;
		top: 44px;
		left: 43px;
		background-image: url(../images/HeroHugs.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: contain;
	}
	#heroCopyBlock{
		position: absolute;
		top: 120px;
		left: 607px;
		width: auto;
	}
	.title{
		font-family: aztecaNow, sans-serif;
		color: #ffffff;
		font-size: 28px;
		line-height: 38px;
	}
	.titleHero{
		font-family: aztecaNow, sans-serif;
		color: #ffffff;
		font-size: 45px;
		color: #FFFFFF;
		letter-spacing: -1.46px;
		line-height: 45px;
		white-space: nowrap;
	}
	#titleSwapHolder{
		position: relative;
		margin-top: 5px;
		height: 75px;
	}
	.titleSwap{
		position: absolute;
	}
	#heroButtonHolder{
		margin-top: 67px;
		margin-left: 0px;
	}
	.heroButton{
		float: left;
		padding-right: 21px;
		padding-bottom: 0px;
	}

	#carousel{
		position: relative;
		background-color: #280082;
		height: 250px;
		text-align: center;
		z-index: 990;

	}
	#carouselContainer{
		position: relative;
		left: 20px;
	
	}
#carousel2{
	position: relative;
	left: 0px;
	padding-left: 0px;
	height: 230px;
	text-align: center;
	z-index: 990;
	overflow: hidden;
}
#carouselContainer2{
	position: relative;
	left: 0px;
	width: 1004px;
	
}
	.showHolder{
		position: relative;
		float: left;
		width: 241px;
		margin-top: 36px;
		margin-right: 12px;
		cursor: default;
	}
	.lastShow{
		position: relative;
		float: left;
		width: 241px;
		margin-top: 36px;
		margin-right: 0px;
		cursor: default;
	}
	.showDeets{
		font-size: 14px;
		padding-left: 12px;
	}
	.showDeets2{
		font-size: 16px;
		padding-top: 6px;
	}
	.showName{
		font-family: aztecaNow, sans-serif;
		font-size: 18px;
		line-height: 16px;
		padding-top: 16px;
		padding-left: 12px;
	}
	.showImage{
		width: 235px;
		height: 141px;
		background: #000000;
		border-radius: 8px;
		background-size: cover;
	}
	#corePageBody{
		width: 100%;
		background-image: url(../images/Bg_simpleFade.png);
		background-repeat: repeat-x;
		background-position: top center;
		background-size: 100%;
		padding-top: 100px;

	}
	.wideCentred{
		font-size: 44px;
		letter-spacing: -1.04px;
		text-align: center;
		line-height: 51px;
		margin-bottom: 30px;
	}
	.wideCentred2{
		position: relative;
		top: -30px;
		font-size: 24px;
		letter-spacing: -0.5px;
		text-align: center;
		line-height: 51px;
		margin-bottom: 30px;
	}
	#twoColHolder{
		margin-bottom: 118px;
	}
	.twoColText{
		float: left;
		width: 492px;
	}
	.colTwo{
		margin-left: 18px;
		margin-top: 0px;
	}
	#watchAnywhere, #Descarga{
		position: relative;
		height: 626px;
	}
	
	#whyYoullFallInLove{
		position: relative;
		height: 460px;
	}
#preguntasFrecuentes{
	margin-top: 0px;
}
	.textfloatRight{
		position: absolute;
		top: 70px;
		left: 607px;
		width: 492px;
	}
	.textfloatLeft{
		position: absolute;
		top: 85px;
		left: 98px;
		width: 492px;
	}
	.sidepiece{
		font-size: 34px;
		line-height: 38px;
		margin-bottom: 17px;
	}
	.floorFade{
		position: absolute;
		top: 448px;
		left: -335px;
		width: 1227px;
		height: 190px;
		background-image: url(../images/floorFade.png);
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: 100%;
		z-index: 0;
	}
	.rightSide{
		left: 357px;
	}
	#iPadImage{
		position: absolute;
		top: 0px;
		left: -135px;
		width: 679px;
		height: 524px;
		background-image: url(../images/Ipad.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 100%;
		z-index: 991;
	}
	#iPhomeImage{
		position: absolute;
		top: 0px;
		left: auto;
		right: -13px;
		width: 565px;
		height: 531px;
		background-image: url(../images/iPhones.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 100%;
		z-index: 991;
	}
	#devicesImage{
		position: absolute;
		top: 0px;
		left: -6px;
		width: 585px;
		height: 549px;
		background-image: url(../images/devices.png);
		background-repeat: no-repeat;
		background-position: top left;
		background-size: 100%;
		z-index: 991;
	}
	#showCollection{
		height: 1100px;
	}
	.featureList{
		float: left;
		width: 311px;
		height: 120px;
		margin-left: 28px;
	}
	.featureListFirst{
		margin-left: 0px;
	}
	.featureTitle{
		color: #00E7BA;
		font-size: 22px;
		line-height: 24px;
	}
	.comingsoon{
		font-family: montBook, sans-serif;
		font-size: 14px;
	}
	.featureText{
		font-size: 15px;
		line-height: 19px;
	}
	#finalImage{
		height: 482px;
		background-image: url(../images/FinalImage.png);
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: contain;
	}


	footer{
		background-color: #280082;
		height: 270px;
	}
	#copyrightHolder{
		position: absolute;
		top: 96px;
		left: 268px;
		font-size: 16px;
	}
	#footerButtonHolder{
		position: absolute;
		width: 360px;
		right: 50px;
		top: 100px;
	}
	/*	END 1440 base styles here	*/

}