@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Work+Sans:200,300,400);

@font-face{
	font-family:'FontAwesome';
	src:url(https://stela.com/assets/fontawesome-webfont-50bbe9192697e791e2ee4ef73917aeb1b03e727dff08a1fc8d74f00e4aa812e1.eot);
	src:url(https://stela.com/assets/fontawesome-webfont-50bbe9192697e791e2ee4ef73917aeb1b03e727dff08a1fc8d74f00e4aa812e1.eot?#iefix) format("embedded-opentype"),
		url(https://stela.com/assets/fontawesome-webfont-7dacf83f51179de8d7980a513e67ab3a08f2c6272bb5946df8fd77c0d1763b73.woff2) format("woff2"),
		url(https://stela.com/assets/fontawesome-webfont-adbc4f95eb6d7f2738959cf0ecbc374672fce47e856050a8e9791f457623ac2c.woff) format("woff"),
		url(https://stela.com/assets/fontawesome-webfont-ae19e2e4c04f2b04bf030684c4c1db8faf5c8fe3ee03d1e0c409046608b38912.ttf?v=4.6.3) format("truetype"),
		url(https://stela.com/assets/fontawesome-webfont-8e3586389bb4cd01b3f85bb3b622739bde6627f28bba63a020c223ca9cf1b9ae.svg?v=4.6.3#fontawesomeregular) format("svg");
}



/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Work Sans", Helvetica, Arial, "sans-serif";
	font-weight: 100;
	background:#000;
}


/* PLACEMENT */
.section {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	width:100%;
	padding:0 0 400px;
}

.background-fixed, .background-pulse {
	margin: 0 auto;
	overflow: hidden;
	width:100%;
	height:100%;
	background-size: cover;
	background-position: 50% 50%;
}

.background-fixed {
	position: fixed;
}

.background-pulse {
	position: fixed;
	animation: bgGrow 20s infinite ease-in-out;
}

.background-reveal {
	position: relative;
	background-attachment: fixed;
	background-size: cover;
	box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.4);
}

@keyframes bgGrow {
  	0%, 100% {
    	transform: scale(1.0);
  	}
  	50% {
    	transform: scale(1.1);
  	}
}

.container {
	position: relative;
	margin: 0 auto;
	height: 100%;
}


.content {
	position: relative;
	margin: 0 auto;
	max-width: 640px;
	text-align: center;
}

.content p {
	margin:0 auto;
}

.centered {
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.copy-img-grid1 {
	position:absolute;
	right:0;
	width:80%;
}


.scn-prem-content {
	width:80%;
	position:relative;
	padding:0 0 200px;
}

.scn-prem-copy {
	position:absolute;
	width:40%;
	right:0%;
	top:0%;
}

.scn-prem-copy-card {
	position: relative;
	padding:20px 10px!important;
	border-radius:10px;
	border-right:1px solid rgba(255,255,255,0.4);
}

.scn-prem-copy-card p {
	width:90%;
}


.section-title {
	position:relative;
	width:80%;
	left:20%;
	padding:200px 0!important;
}

.scene-cover {
	position:absolute;
	height:100%;
	width:0%;
	background-color:rgba(0,0,0,0.5);
	z-index:10;
	bottom:0%;
	border-bottom:1px solid rgba(255,255,255,0.1);
}

.scene-cover-image {
	position:absolute;
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position: 100% 100%;
	z-index:10;
	bottom:0%;
	height:100%;
	width:0%;
	opacity: 1;
}

.close-logo {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	z-index:100;
}



/* EFFECTS */

.screen-overlay-black {
	background-color: #000;
	opacity: 0.5;
	width:100%;
	height:100%;
	position:absolute;
}

.screen-overlay-white {
	background-color: #fff;
	opacity: 0.8;
	width:100%;
	height:100%;
	position:absolute;
}

.img-line {
	height:1px;
	background:rgba(255,255,255,0.3);
	position:absolute;top:50%;
	right:0;
	transform:translateY(-1px);
}

.img-display {
	width:100%;
	height:600px;
	background-size:cover;
	background-repeat:no-repeat;
	box-shadow: 3px 3px 8px rgba(0,0,0,0.75);
	border-radius: 8px;
}

.img-container {
	position:absolute;
	z-index:10;
	right:0;
}

.lines {
	background-color:rgba(255,255,255,0.8)!important;
	padding:0 0 0 0!important;
}

.dt-only {
	display:inherit;
}


/* UI ELEMENTS */
.ui-logo{
	position:absolute;
	top:5%;
	width:15%;
}

.ui-logo img {
	position:relative;
	width:60%;
	left:50%;
	transform:translateX(-50%);
	max-width:100px;
}

.ui-logo a {
	opacity:0.7;
}

.ui-logo a:hover {
	opacity:1;
}


.ui-download {
	position:absolute;
	top:5%;
	right:5%;
	color:rgba(255,255,255,0.8);
	font-size:2em;
}

.ui-download i {
	padding:0 5px;
}

.ui-progress {
	position:absolute;
	left:15%;
	width:1px;
	height:100%;
}

.ui-social {
	position:absolute;
	width:15%;
	bottom:5%;
	left:0;
	color:rgba(255,255,255,0.8);
	font-size:1.4em;
	text-align:center;
}

.ui-social i {
	padding:15px 0;
}

.ui-social a, .ui-download a {
	color:rgba(255,255,255,0.8);
}

.ui-social a:hover, .ui-download a:hover {
	color:rgba(255,255,255,1);
}

/* FONTS */


p {
	position: relative;
	padding: 10px 0;
	line-height: 1.4em;
	font-size: 1.2em;
}

p.small {
	font-size: 0.8em;
	position: relative;
	line-height: 1.4em;
}

h1 {
	position: relative;
	padding: 30px 0;
	line-height: 1em;
	font-size:8em;
	margin-left:-7px;
}

h2 {
	position: relative;
	padding: 10px 0;
	line-height: 1em;
	font-size:3.4em;
}

.txt-label {
	position: relative;
	padding: 10px 0;
	line-height: 1em;
	font-size:0.8em;
	text-transform: uppercase;
	font-weight: 300;
}

.card-label {
	position:absolute;
	transform: rotateZ(-90deg);
	transform-origin: right bottom;
	left:-10px;
	top:0%;
	text-align: right;
	width:15%;
	padding:0;
}

.card-label-inner {
	position:absolute;
	transform: rotateZ(-90deg);
	transform-origin: right bottom;
	right:10px;
	top:0%;
	text-align: right;
	width:auto;
	padding:0;
}

b, strong {
	font-weight:500;
}

i {
	font-style: italic;
}


.white{
	color:#fff;
}

.black p, .black h2 {
	font-weight: 300;
}

.black{
	color:#666;
}

.disclaimer {
	color:#999;
	font-size: 0.7em;
	line-height: 1.4em;
	font-weight: 300;
}

.black .disclaimer {
	color:#666;
}

.white .disclaimer {
	color:#AAA;
}

.font-caps {
	text-transform: uppercase;
}

.font-blue {
	color:#29a9e0;
}

.no-break {
	white-space:nowrap;
}

.separate-section {
	margin:30px auto 0;
	padding-top:20px;
	border-top:1px solid #999;
}

.policy p {font-size:1em;font-weight:500;}
.policy h1 {color:#1a76b7;}
.policy h2 {color:#1a76b7;padding-top:50px;font-weight:300;}
.policy h3 {padding:10px 40px;font-size:1.5em;font-weight:500;}
.policy h4 {padding:10px 40px;font-size:1.2em;font-weight:bold;}
.policy ul, .policy ol {padding:10px 60px;}
.policy li {padding:12px 0px;list-style:disc;font-size:1em;line-height:1.2em;font-weight:500;}
.policy ol li {list-style:decimal;}
.policy ol ul li {list-style:circle;}



/* CTA */

a {
	color:#1a76b7;
	text-decoration:none;
	cursor: pointer;
}

a:hover {
	color:#29a8e0;
	text-decoration:underline;
	cursor: pointer;
}

.cta {
	position: relative;
	padding:0 20px;
	margin:40px auto;
	white-space: nowrap;
	cursor: pointer;
}

.cta a {
	position: relative;
	color:#fff;
	text-decoration: none;
	padding:14px 40px;
	cursor: pointer;
	border-radius: 100px;
}

.cta a.small {
	position: relative;
	padding:5px 15px;
	margin:40 auto;
	font-size: 0.8em;
	white-space: nowrap;
	cursor: pointer;
}

.cta a:hover {
	opacity: 0.5;
	cursor: pointer;
}

.cta span {

}

.cta-flash {
	position:absolute;
	top:0;
	left:0%;
	width:46px;
	height:46px;
	background-color:#fff;
	border-radius: 100px;
	opacity:0.3;
	animation: move 5s infinite ease-in-out;
}

@keyframes move {
  	0%, 30% {
    	opacity: 0;
    	left:0%;
		width:46px;
  	}
	50%, 100% {
    	opacity: 0;
    	left:79%;
		width:46px;
  	}
  	30% {
    	opacity: 0;
  	}
  	40% {
    	opacity: 0.4;
		width:80px;
  	}
	
	
}

.blue {
	background-color:#29a9e0;
}
.green {
	background-color:#66cccc;
}

.ghost {
	border:rgba(102,102,102,0.60) 1px solid;
	background-color: rgba(255,255,255,0.40);
	color:#666!important;
}

.ghost-b {
	border:rgba(204,204,204,0.60) 1px solid;
	background-color: rgba(0,0,0,0.20);
	color:#fff!important;
}


.app_badge {
	position: relative;
	width:150px;
	padding:10px;
	cursor: pointer;
}

.badges {
	position: relative;
	margin:10px auto;
}

.badges-nav {
	float:right;
	margin:-70px 0 -20px;
}

.badges-nav .app_badge {
	width:100px;
}

.footer-badges {
	text-align: right;
	padding:0 0 20px;
}

.footer-badges .app_badge {
	position: relative;
	width:100px;
	padding:0 5px;
	cursor: pointer;
}

.cta-download-label-group {
	margin:40px 0 0;
} 

.cta-download-label {
	font-size:0.8em;
	text-transform: uppercase;
	font-weight: bold;
	transform: translateY(-50%);
}


.scroll-begin {
	position:fixed;
	bottom:5%;
	color:#999;
	text-align:center;
	left:50%;
	transform:translateX(-50%) translateY(0);
	z-index:10000;
	animation: begin 1s infinite;
	opacity:0;
}
@keyframes begin {
  	0% {
    	transform: translateX(-50%) translateY(0);
  	}
  	50% {
    	transform: translateX(-50%) translateY(-10px);
  	}
	100% {
    	transform: translateX(-50%) translateY(0);
  	}
	}


/* FOOTER */

footer {
	padding:40px;
	background:#000;
	color:#fff;
}

footer a {
	color:#999;
	text-decoration: none;
}

footer a:hover {
	color:#333;
}

footer nav a {
	padding:0 5px;
	white-space: nowrap;
}

#social-icons {
	margin:0;
}

#social-icons a {
	color:#fff;
	padding:0 10px;
}

#social-icons a:hover{
	color:#999;
}

nav i {
	margin:0 10px 10px;
}

.copyright, nav {
	margin: 15px 0;
}

.footer-logo {
	margin:0 auto 20px;
}


.footer-logo img {
	width:60px;
	height:60px;
	border-radius: 10px;
}

.footer-quote {
	margin:0 0 40px;
}






/* MEDIA */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) {
.dt-only {
	display:none;
}
	
.section {
	padding:0 0 100px;
}
	
.section-title {
	padding:100px 0!important;
}
	
.ui-logo{
	top:2%;
}

.ui-download {
	top:10%;
	left:5%;
	right:auto;
	font-size:1.2em;
}
	
.ui-download a {
	float:left;
	clear: both;
}

.ui-download i {
	padding:10px 0px;
}
	
.ui-social {
	bottom:3%;
	font-size:1.2em;
}
	
.scn-prem-content {
	width:80%;
	position:relative;
	padding:0 0 100px;
}

.scn-prem-copy {
	position:relative;
	width:100%;
	right:auto;
	left:15%;
	top:0%;
}
	
.img-display {
	width:100%;
}
	
h2 {
	font-size:2.2em;
}
	
p {
	font-size: 1.2em;
}	

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

	
.ui-logo{
	top:4%;
}
	
.ui-download {
	top:10%;
	left:6%;
	right:auto;
	font-size:1.6em;
}
	
.ui-download a {
	float:left;
	clear: both;
}

.ui-download i {
	padding:10px 0px;
}
	
.ui-social {
	bottom:3%;
	font-size:1.6em;
}
	
.scn-prem-content {
	width:80%;
	position:relative;
	padding:0 0 100px;
}

.scn-prem-copy {
	position:relative;
	width:100%;
	right:auto;
	left:10%;
	top:0%;
}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
.scn-prem-content {
	width:80%;
	position:relative;
	padding:0 0 200px;
}

.scn-prem-copy {
	position:absolute;
	width:40%;
	left:auto;
	right:0%;
	top:0%;
}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

}

/* iPad 3 (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio : 2),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (min-resolution: 192dpi) { 

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1048px) {
.dt-only {
	display:inline;
}
	
.section {
	padding:0 0 600px;
}
	
.section-title {
	padding:200px 0!important;
}
	
.ui-logo{
	top:5%;
}
	
.ui-download {
	top:5%;
	left:auto;
	right:5%;
	font-size:2em;
}
	
.ui-download a {
	float:none;
	clear:none;
}

.ui-download i {
	padding:0 5px;
}
	
.ui-social {
	bottom:5%;
	font-size:1.4em;
}
	

.scn-prem-content {
	width:80%;
	position:relative;
	padding:0 0 200px;
}

.scn-prem-copy {
	position:absolute;
	width:40%;
	left:auto;
	right:0%;
	top:0%;
}
	
.img-display {
	width:100%;
}
	
.preview .img-display {
	height:600px;
}
	

h2 {
	font-size: 3em;
}
	
p {
	font-size: 1.2em;
}
	
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	
}

/* Retina displays ----------- */
@media  only screen 
and (-webkit-min-device-pixel-ratio : 2), 
only screen 
and (min-resolution: 192dpi) {

}