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;
}
/* HTML5 display-role reset for older browsers */
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;
}

#bottom_ul{
	margin-top: 40px;
	}
	
	
body {
	-webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
	background: #fff;
	color: #fff;
	font-family: 'Avenir LT W01 55 Roman', 'Avenir', helvetica, arial;
	-webkit-transition: background 0.5s ease-in-out;
	-moz-transition: background 0.5s ease-in-out;
	-o-transition: background 0.5s ease-in-out;
	transition: background 0.5s ease-in-out;
}

span {display:block;}

h1, h2 {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 2px;
	color: white;
	font-family: 'Lato', sans-serif;
	}

h2 {margin-bottom: 40px;}

ul,li {
	margin: 0; 
	padding: 0;
	}
	
ul span {
	display: inline-block;
}

ul li {
	line-height: 24px;
	letter-spacing: 1px;
}

ul a {
	text-decoration: none; 
	font-size: 10px; 
	color: white; 
	text-transform: uppercase;
	}

a:hover {color: #fff;}

/*______COLORS_______*/
.color-intro {background: #fff;}
.color-apple {background: #000;}
.color-caudex {background: #76a4c7;}
.color-pmg {background: #00a5b5;}
.color-amex {background: #002664;}
.color-fergie {background: #ac2af6;}
.color-moma {background: #b5b5b5;}
.color-rawlings {background: red;}
.color-undroppable {background: black;}
.color-yogasmoga {background: #DD8820;}
.color-penguin {background: #ff5300;}
.color-poke {background: #848484;}
.color-sixpointsplus {background: #81afed;}
.color-audiblecoffee {background: #fff;}
.color-footer {background: #191919;}
.color-iheard {background: #f04c75;}
.color-cignium {background: #f47c21;}
.color-christine {background: #fa6161;}
.color-sephora{background: #ce1731;}
.color-ashland{background: #c1c8d0;}
.color-adp{background: #7967ae}
.color-ecos{background: #00afd7}

.color-twotrees{background: #275984;}

.color-listen {background:#14bfb1;}

.color-truelearn {background:#00a4e4;}

.color-swell {background: #fff;}

.color-clearme {background: #6ac0f1;}

.color-apds {background: #f5f3f4;}

.color-saasx {background: #00d7d9;}

.color-aereo{background: #2c8692;}

.color-jlusa{background: #000;}

.color-bamberger{background: #aae46a;}

.color-shredreel{background: #292d33;}
.color-gp{background: #3498db;}
.color-behr{background: #f2f2f2;}
.color-recruitme{background: #f76517;}
.color-dotopia{background: #f86028;}
.color-dotopiaadmin{background: #f86028;}
.color-dotopiaapi{background: #f86028;}
.color-rs{background: #0066cc;}
.color-hungry{background: #fff;}
.color-acumen{background: #e52d87;}

.color-monstereverywhere{background: #eee;}
.color-swell .text, .color-apds .text, .color-saasx .text, .color-intro .text, .color-monstereverywhere .text, .color-bamberger .text,.color-audiblecoffee .text,.color-hungry .text, .color-acumen .text, .color-ul-title .text, .color-undefined .text, .color-behr .text{
	color: black;
}

.color-swell nav .active a i, .color-apds nav .active a i, .color-audiblecoffee nav .active a i{
	background: black;
}

nav {
	font-family: 'Lato', sans-serif;
	position: fixed;
	bottom: 10px; left: 20px;
	font-size: 10px;
	text-transform: uppercase;
	top:25%;
	z-index: 9999;
}

nav a {
	display:block;
	height: 9px; width: 150px;
	line-height: 9px;
}

nav i {
	text-indent: -9999px;
	overflow: hidden;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #878787;
	background: rgba(0,0,0, .2);
	display: inline-block;
	_display: block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
}

nav a:hover i{
	background: rgba(0,0,0, 0.5);
}

nav .active a i{
	background: rgba(255,255,255, 1);
	
}

nav li {
	height: 9px;
	line-height: 9px;
	margin-bottom: 9px;
}

nav ul li span {display: inline-block;}
nav ul li span.active{display: inline-block;}

.section {
	width: 100%;
	text-align: center;
	min-height: 500px;
}

.section-wrap {
	max-width: 940px;
	margin: 0 auto;
	padding: 180px 20px 180px 20px;
}

.section-wrap img {
	max-width: 100%;
}

.brand {
	
	margin-bottom: 50px;

}

#brand_id {
	position: fixed;
	top: 20px; left: 20px;

}

.intro-header {
	font-size: 24px;
	line-height: 34px;
	font-weight: bold;
	margin-bottom: 15px;
}

.intro-tagline {
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 40px;
	letter-spacing: 1px;
}

.intro-description,
.description {
	font-size: 24px;
	line-height: 34px;
	font-family: 'Lato', sans-serif;
	margin: 0 auto 40px auto;
	max-width: 790px;
}

.intro-description {
	text-transform: none;
}

.description a {
	text-decoration: none;
	color: white;
}

.launch a {
	color: white;
	text-decoration: none;
}

.launch span {
	display: inline-block;
}

.period, .role, .launch, .client, .agency {
	font-size: 15px;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	line-height: 24px;
	letter-spacing: 1px;
}

.screens {
	margin-top: 80px;
}

.screens img {
	margin-bottom: 40px;
-moz-box-shadow:0px 4px 19px #404040;
-webkit-box-shadow: 0px 4px 19px #404040;
box-shadow: 0px 4px 19px #404040;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 40px;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.screen-text {
	margin: -23px auto 40px auto;
	text-align: center;
	font-size: 14px;
}

.screen-text strong{
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
	font-family: 'Lato', sans-serif;
}

#intro,#footer {
	/* padding: 15% 0 100px 0; */
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
}

#intro{
	    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


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

.section {
width: auto;
padding-left: 180px;
}

}

@media screen and (max-width: 520px) {
.section {
width: 100%;
padding-left: 0;
}

.section {
width: auto;
text-align: center;
min-height: 500px;
padding: 0 15px;
}

nav{
	display: none;
}
}
/* Smartphones (portrait) ----------- */
@media screen and (max-width: 320px) {
.description {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	margin: 0 auto 20px auto;
	line-height: 21px;
}

nav {
	font-family: 'Lato', sans-serif;
	position: fixed;
	bottom: 10px; left: -120px;
	font-size: 10px;
	text-transform: uppercase;
}

#brand_id {

	position: fixed;
	top: 10px; left: -120px;

}



ul a {
	text-decoration: none; 
	font-size: 8px; 
	line-height: 18px;
	color: white; 
	text-transform: uppercase;
}

.brand {
	margin-bottom: 20px;
}

.section-wrap {
	max-width: 940px;
	margin: 0 auto;
	padding: 20px 20px 60px 20px;
}

h2 {
	margin-bottom: 20px;
}

.screens {
	margin-top: 30px;
}

.intro-tagline {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#intro,#footer {
	font-size: 8px;
	padding: 80px 0 0px 0;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
}

.intro-header {
	font-size: 12px;
	line-height: 21px;

}


	
.intro-description,
.description {
	max-width: 790px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	margin: 0 auto 20px auto;
	line-height: 21px;

}


.screen-text {
	margin: -35px auto 20px auto;
	text-align: center;
	font-size: 10px;
	font-family:'Avenir LT W01 65 Medium';
	line-height: 12px;
	
}

.screen-text strong{
	text-transform: uppercase;
	font-size: 8px;
	font-family: 'Lato', sans-serif;
	letter-spacing: 1px;
}

.period, .role, .launch, .client, .agency {
	font-size: 8px;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	line-height: 18px;
	letter-spacing: 1px;
}


body {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition:none;
}

@media screen and (min-width: 321px) and (orientation:landscape) {
.description {
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	margin: 0 auto 20px auto;
	line-height: 21px;
}

ul a {
	text-decoration: none; 
	font-size: 8px; 
	line-height: 18px;
	color: white; 
	text-transform: uppercase;
}

.brand {
	margin-bottom: 20px;
}

.section-wrap {
	max-width: 940px;
	margin: 0 auto;
	padding: 20px 20px 60px 20px;
}

h2 {
	margin-bottom: 20px;
}

.screens {
	margin-top: 30px;
}

#intro,#footer {
	font-size: 8px;
	padding: 80px 0 0px 0;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
}

.screen-text {
	margin: -35px auto 20px auto;
	text-align: center;
	font-size: 10px;
	font-family:'Avenir LT W01 65 Medium';
	line-height: 12px;

}

.screen-text strong{
	text-transform: uppercase;
	font-size: 8px;
	font-family: 'Lato', sans-serif;
	letter-spacing: 1px;
}

.period, .role, .launch, .client, .agency {
	font-size: 8px;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	line-height: 18px;
	letter-spacing: 1px;
}


body {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition:none;
}


}

 .ul-title{
         margin-bottom: 12px;
         margin-top: 31px;
         list-style: none;
         list-style-type: none !important;
         }
         .ul-title span{
         list-style-type: none;
         font-size: 18px;
         }
         #momaVid {
         max-width: 940px;
         -moz-box-shadow: 0px 4px 19px #404040;
         -webkit-box-shadow: 0px 4px 19px #404040;
         box-shadow: 0px 4px 19px #404040;
         }
         .vert-center{
         position: relative;
         top: 50%;
         transform: translateY(-50%);
         position: relative;
         }