/*
* EM Scale
* 72.5em = 1176px
* 62.5em = 1000px
*/


/* header section */
body, p { font-family: 'Lato', arial, sans-serif; color: #222222; font-size: 1.05em;  }
h1, h2, h3, h4, h5, h6 { font-family: 'Lato', arial, sans-serif; color: #222222; }
.contain-to-grid .top-bar { max-width: 72.5em; padding: 0 1em; }
.row { max-width: 72.5em; } 
.full-width { max-width: none; }
.full-width .row { max-width: 72.5em; margin: 0 auto; }
.full-width .full-width { max-width: none; }
.no-pad-right { padding-right: 0; }
.no-pad-left{ padding-left: 0; }
.red, .red:hover, .red:active, .red:focus { color: #ED3937; }
.red-btn { background-color: #ED3937; color: #fff; display: inline-block; text-align: center; padding: 0.15em 0.5em; font-size: 3em; font-weight: 300; border-radius: 0.25em; }
.red-btn:hover { color: #fff; }
.c-text { text-align: center; }
.clear { display: block; clear: both; }
.top-partial { left: 50%; margin-left: -36.25em; padding: 0 2em; }
.off-canvas .logo { float: left; height: 65%; width: auto; margin-top: 0.4em; }
ul.off-canvas-list { list-style-type: none; padding: 0; margin: 0; }
.off-canvas .tab-bar, .left-off-canvas-menu { background: #1D242D; }
ul.off-canvas-list li label { background: #242C38; border-top: none; } 
.left-off-canvas-menu ul.right { float: none !important; margin-left: 0; } 
.left-off-canvas-menu ul.off-canvas-list li.menu-item-has-children > a:after { content: "\BB"; margin-left: 0.5rem; display: inline; }
.off-canvas-list .menu-item-has-children .sub-menu { -webkit-backface-visibility: hidden; width: 13.88889rem; top: 0; bottom: 0; position: absolute; margin: 0; overflow-x: hidden; overflow-y: auto; background: #333333; z-index: 1002; box-sizing: content-box; -webkit-overflow-scrolling: touch; -ms-transform: translate(-100%, 0); -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); left: 0; -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -ms-transition: -ms-transform 500ms ease; -o-transition: -o-transform 500ms ease; transition: transform 500ms ease; }
.sub-menu.dropdown, .sub-menu.offcanvas-overlap-right, .sub-menu.offcanvas-overlap { -ms-transform: translate(0%, 0); -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); }
.sub-menu.dropdown  { -webkit-backface-visibility: hidden; width: 13.88889rem; top: 0; bottom: 0; position: absolute; margin: 0; overflow-x: hidden; overflow-y: auto; background: #333333; z-index: 1002; box-sizing: content-box; -webkit-overflow-scrolling: touch; -ms-transform: translate(-100%, 0); -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); left: 0; -webkit-transition: -webkit-transform 500ms ease; -moz-transition: -moz-transform 500ms ease; -ms-transition: -ms-transform 500ms ease; -o-transition: -o-transform 500ms ease; transition: transform 500ms ease; }
ul.off-canvas-list li a:hover { background: #41759B; }
.top-bar { height: auto; background: transparent;}
.top-bar-container { position: absolute; z-index: 5; background-color: #fff; }
.top-bar-section li:not(.has-form) a:not(.button), .top-bar-section ul li { background: transparent; }
.top-bar-section li.active:not(.has-form) a:not(.button) { background: transparent; border-bottom: 3px solid #ED3937; }
.top-bar-section li:not(.has-form) a:not(.button):hover { background-color: transparent; color: #ED3937;}
.top-bar-section ul li>a { font-family: 'Lato', arial, sans-serif; font-size: 1em; font-weight: 300; }
.top-bar .name h1 a, .top-bar .name h2 a, .top-bar .name h3 a, .top-bar .name h4 a, .top-bar .name p a, .top-bar .name span a { color: #444; }
.top-bar .name { height: auto; }
.top-bar .name .logo { width: auto; height: 69px; padding: 12px 0; }
.top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form) a:not(.button) { padding: 12px 0.9375rem 9px; color: #444; }
.top-bar-section li.active:not(.has-form) a:not(.button):hover { background: transparent; color: #ED3937; }
.top-bar-section .has-dropdown>a:after { top: 50%; }
.slider-container { padding: 100px 0 0; }
.slider-container .slider { margin: 0 0 0px; }
.slider-container .slider li { position: relative; }
.slider-container .slider li img { width: 100%; }
.home-main-boxed .slide-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 40px 0; background: rgba(0,0,0,0.5); color: #fff;  }

.full-width-cta { background: #1D242D; }
.full-width-cta h2 { text-align: center; padding: 15px 0; color: #fff; text-transform: uppercase; font-size: 2em; line-height: 2em; margin: 0; }

/*Full Width Slider*/
.home-main-full { height: 100%; }
.home-main-full .slider li { width: 100%; height: 100%; height: 100vh; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.home-main-full .slider-container { padding: 0; }
.home-main-full .slide-left { position: relative; background: none; } 
.home-main-full .slide-left{ padding: 11em 3em 0 0; }
.home-main-full .slide-left h1 { position: relative; color: #fff; font-weight: 700; line-height: 1em; font-size: 3.15em; }
.home-main-full .slide-left p { color: #ffffff; font-size: 1.225em; line-height: 1.75em; }
.home-main-full .slide-left .slide-button { position: relative; color: #fff; border: 3px solid #fff; padding: 0.25em 0.5em 0.25em 1.75em; font-size: 1.75em; border-radius: 2px; -moz-border-radius: 2px; letter-spacing: 0.025em; display: block; text-align: center; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;}
.home-main-full .slide-right { padding: 8em 0em 0; } 

/*Home Page*/
.home .container, .full-width-page .container, .contact-page .container { padding: 69px 0 0;  }
.home-header img { width: 100%; height: auto; }
.home-header { position: relative; height: 600px; padding: 2em 3em; }
.home-header .header-border { display: block; width: 100%; height: 385px; max-width: 72.5em; margin: 8em auto 0; position: relative;}
.home-header .phone-demo { position: absolute; bottom: -160px; left: 2.5em; }
.home-header .phone-demo .iphone { background: url("/material/views/novoroll/assets/img/iphone.png") no-repeat top center/ 320px; display: block; width: 320px; height: 690px; float: left; position: relative; }
.home-header .phone-demo .iphone video { position: absolute; top: 77px; width: 289px; height: auto; display: block; left: 15px;  }
.home .entry-content { padding: 5.5em 0 3em; color: #222;  }
.home-header .header-caption { background: rgba(51, 51, 51, 0.65); position: absolute; bottom: 54px; text-align: left; padding: 1em; color: #fff; font-size: 2.5em; line-height: 1.25em; font-weight: bold; text-shadow: 0px 1px 1px #000;  }
.home-header .header-caption span { font-weight: 700; text-transform: none; font-size: 1.1em; }
.home-header .header-caption ul { margin: 15px 0 0; padding-left: 1em; }
.home-header .header-caption ul li { font-size: 1.35em; display: block; clear: both; }
.home .page-wrapper .entry-content .row:first-child { padding: 2.5em 0; border-bottom: 1px solid #F2F2F2; }
.flat-iphone img { width: 65%; display: block; margin: -0.75em auto 0;  }
.section-two { font-weight: 300; font-size: 1em; }
.section-two .columns:first-child { font-size: 1.1em;  } 
.section-two .columns:first-child ul { margin-left: 2em; }
.section-two ul li { margin: 0.5em 0;  }
.flat-ipad img { display: block; margin: 0 auto; width: 65%;  }
.what-we-do { font-weight: 300; font-size: 1.75em; color: #222;  }
#home-replay { position: absolute; width: 80px; bottom: -20px; left: 50%; text-align: right; padding: 1em 0 0.5em; margin: 0 0 -15px -40px; }
.replay { background: url("/material/views/novoroll/assets/img/replay.png") no-repeat 12px 8px / 22px; }
.caption-container { float: right; margin: 0; }
.benefits { font-size: 1.1em; }

/*Universal Pages*/
.page-container { padding: 25px 0 0; }
.page-wrapper { padding: 0;  }
.page-wrapper .entry-content {  }
.header-image { padding: 8em 13.5em;  }
.header-caption { background: rgba(255,255,255,0.75); padding: 1em 1.5em; font-size: 2em; font-weight: 300; letter-spacing: 0.018em; color: #222; line-height: 1.35em; }
.header-caption h2 { font-weight: 300; color: #222; }
.page-wrapper .entry-content h2, .page-wrapper .entry-content p { font-weight: 300; }
.full-width .entry-content .red-bg { background-color: #ed3937; color: #fff; margin: 0 0; }
.red-bg h2, .red-bg p { color: #fff; }
.entry-content .right { padding: 0 0 0 1em; }
.page-wrapper .entry-content .red-bg p { font-weight: 500; }
.page-wrapper .entry-content .row { padding: 2.5em 0; }
.page-wrapper .entry-content .section { padding: 5em 5em 2em;  }
.page-wrapper .entry-content .section.red-bg { overflow: hidden; padding: 5em; }

/*Advertisers Page*/
.page-wrapper .entry-content .advertisers { padding: 5em 5em;  }
.page-wrapper .entry-content .advertisers .columns { border-radius: 0.75em; margin: 0; padding: 0 1.25em; }
.page-wrapper .entry-content .advertisers .inner-content { border: 1px solid #ED3937; border-radius: 0.35em; padding: 0 0 3em; }
.page-wrapper .entry-content .advertisers .inner-content p { padding: 0em 1.5em; color: #222;  }
.page-wrapper .entry-content .advertisers .inner-content h2 { text-align: center; border-bottom: 1px solid #EF4137; line-height: 1.25em; padding: 0.35em 0.05em; font-size: 2em; margin: 0 0 0.5em; }
.page-wrapper .entry-content .advertisers .inner-content h2.brand-safety { padding: 1em 0.5em;  }

/*Video Units Page*/
.page-wrapper .entry-content .video-units { padding: 3em 0 3em;  }
.video-units .unit-buttons h2 { text-align: center; font-weight: 500; font-size: 2em; margin: 0 auto 1em; }
.video-units .unit-buttons ul { list-style: none; margin: 0; padding: 0; }
.video-units .unit-buttons ul li { margin: 0; padding: 0; }
.video-units .unit-buttons ul li a { text-align: center; color: #ED3937; border: 1px solid #ED3937; padding: 0.9em 0; display: block; clear: both; margin: 1.5em auto; width: 85%; -moz-border-radius: 0.65em; border-radius: 0.65em; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;  }
.video-units .unit-buttons ul li .active, .video-units .unit-buttons ul li a:hover { background-color: #ED3937; color: #fff; }
.video-units #playMovie { color: #ED3937; clear: both; padding: 2em 0 2em 2em; display: inline-block; font-weight: normal; background-position: 14px 27px; margin-left: -30px; }
.phone-demo { position: relative; }
.phone-demo .iphone { background: url("/material/views/novoroll/assets/img/iphone.png") no-repeat top center/ 355px; width: 355px; height: 760px; float: left; margin-bottom: 0em;}
.phone-demo video { position: absolute; top: 87px; left: 33px; width: 320px; height: auto; display: none;  }
.phone-demo video.active { display: block; }
.video-nav-buttons { list-style: none; margin: 0; padding: 5em 0 0; }
.video-nav-buttons li { display: inline-block; float: left; }
.video-nav-buttons li a { color: #ED3937; padding: 0.85em 1.9em; border: 1px solid #ED3937; background-color: transparent; background: url("/material/views/novoroll/assets/img/arrows.png") no-repeat 0px 0px / 50px; -webkit-transition: background-color 0.25s ease; -moz-transition: background-color 0.25s ease; -o-transition: background-color 0.25s ease; transition: background-color 0.25s ease; }
.video-nav-buttons li a:hover { background-color: #ED3937; }
.video-nav-buttons li a.previous { border-right: none; margin-right: -1px; border-top-left-radius: 0.35em; border-bottom-left-radius: 0.35em; background-position: 24px 18px; }
.video-nav-buttons li a.previous:hover { background-position: -17px 18px; }
.video-nav-buttons li a.next { border-top-right-radius: 0.35em; border-bottom-right-radius: 0.35em; background-position: -16px -11px; }
.video-nav-buttons li a.next:hover { background-position: 25px -11px ; }
.unit-description h2 { color: #222; font-size: 2.25em;  }
.unit-description h2 span { display: block; clear: both; font-size: 0.7em; margin: 0.5em 0; font-weight: 700; letter-spacing: 0.03em; }
.unit-description div { display: none; }
.unit-description div.active { display: block; padding: 5em 0 0; }

/*.phone-demo .replay { position: absolute; width: 80px; bottom: -20px; left: 50%; text-align: right; padding: 1em 0 0.5em; margin: 0 0 -15px -40px; }*/
.replay { background: url("/material/views/novoroll/assets/img/replay.png") no-repeat 12px 8px / 22px; display: none; }

/*Publishers aPage*/
.people-icon { position: relative; display: block; z-index: 0; margin: 0 auto 0em; width: 50%; margin-top: 3.5em; }
.people.icon:before {  }
.people-icon:after {  }
.samsung { z-index: 9999;}
.samsung img { display: block; margin: 0 auto -8em; width: 100%; z-index: 999; }
.page-wrapper .entry-content .section .left:before { position: absolute; content: ''; width: 2px; height: 200px; background-color: #fff; top: -84px; left: 50%; }
.page-wrapper .entry-content .section .left:after { position: absolute; content: ''; width: 2px; height: 200px; background-color: #fff; bottom: -170px; left: 50%; }

/*Contact Page*/
.contact-page header { background: #ED3937; padding: 2em 0; } 
.contact-page header h1 { color: #fff; text-align: center; font-weight: 300; }
.contact-page .page-wrapper.columns { padding: 0; }
.contact-page .columns { padding: 0 2em; }
.contact-page .entry-content { padding: 3em 8em; }
.contact-page .contact-info { border-left: 1px solid #f2f2f2; line-height: 1.5em; color: #222;  }
.contact-page .contact-info .red { font-weight: 700; }
.contact-page .company { margin-bottom: 0em; display: block; line-height: 2em; font-size: 1.2em;  }
#map { width: 100%; height: 300px; margin-top: 1em; }
#map img { max-width: none; }
.contact-page input[type="submit"] { background: #ED3937; color: #fff; border: none; padding: 0.75em 1.5em; font-family: 'Lato', arial, sans-serif; font-size: 0.75em; font-weight: 100; border-radius: 0.2em;  }
.contact-page .phone, .contact-page .email { background: url("/material/views/novoroll/assets/img/contact-sprite.png") no-repeat 0px 0px / 30px; padding: 0.15em 0 0.15em 2em; }
.contact-page .phone { background-position: 2px 7px;  }
.contact-page .email { background-position: 0px -26px; background-size: 25px;  }
.contact-page form input[type="text"], .contact-page form input[type="email"], .contact-page form textarea { border-radius: 0.25em; }
.contact-page form textarea { height: 255px;  }


/* Desktop Ad Units Page*/
.desktop-ad-units img { display: block; margin: -6em auto 4em; width: 75%; height: auto; }
.desktop-ad-units .button {     background: #ED3937; color: white; cursor: pointer; border-bottom: 4px solid #BA1E1C; padding: 1.5em 3em; font-size: 1.25em;}

/*footer*/
.footer-menu { list-style: none; text-align: center; margin: 1em 0 0; }
.footer-menu li { display: inline-block; margin: 0 0.75em; }
.footer-menu li a { color: #fff; text-transform: uppercase; font-size: 0.8em }
.copyright-message { text-align: center; margin: 2.5em auto 0; font-weight: 300; font-size: 0.85em }
.copyright-message a { color: #fff; }
footer { background: #404041; padding: 4em 0 2em; }
footer .widget { list-style: none; }
footer .copyright { background: #404041; padding: 12px 0; color: #ffffff; margin-top: 40px !important; border-top: 2px solid #969696; }
.seals { list-style: none; text-align: center; display: block; margin: 6em 0 0; }
.seals li { display: inline-block; margin: 0 15px; }

.section-clients { text-align: center; font-weight: 300;     border-bottom: 1px solid #F2F2F2; }
.section-clients h2 { text-align: center; position: relative; margin: 0 auto 0em; }
.section-clients h3 { text-align: center; text-transform: uppercase; position: relative; margin: 0 auto 1em; font-size: 1.1em; font-weight: 700; letter-spacing: 0.25em; }
/*.section-clients h2:after { content: ''; position:  absolute; bottom: -15px; left: 50%; width: 150px; margin-left: -75px; height: 2px; background: #ED3937;  }*/
.section-clients h3:after { content: ''; position:  absolute; bottom: -15px; left: 50%; width: 50px; margin-left: -25px; height: 2px; background: #ED3937;  }
.section-clients ul { list-style: none; text-align: center; margin: 2em auto 0; display: block;clear: both; text-align: center; }
.section-clients ul li { display: inline-block; float: none; list-style: none; width: 16%; height: auto; padding: 0 3%; }
.section-clients ul.publishers li { width: 25%; }
.section-clients ul.publishers h3 { margin-bottom: -1.5em; }

/*Medium Screens*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {

	.title-area { padding: 10px 0 0; }  
	.top-bar .name .logo { height: 50px; padding: 12px 0;  }
	.top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form) a:not(.button) { padding: 12px 12px 9px;  }
	.header-image { padding: 5em 7.5em; }

	/*Home Page*/
	.home-header .phone-demo { left: 0em; }
	.home-header .header-caption { text-align: left; font-size: 1.75em; position: absolute; padding: 0.5em; }
	.section-clients ul.publishers h3 { margin: 1em auto 1em; }

	/*video ad units page*/
	.unit-description div.active { padding: 4em 0 0; display: block; clear: both;  }
	.video-units #playMovie { display: block; width: 100px; margin-left: 115px; }
	.video-nav-buttons { padding: 3em 0 5em; margin: 1em 0; }


	/*Publishers page*/
	.page-wrapper .entry-content .section .left:after { bottom: -180px; }
	.page-wrapper .entry-content .section.red-bg { padding: 3em; }
	.people-icon { margin-top: 50%; }

	/*Contact Page*/
	.contact-page .entry-content { padding: 3em 0;  }

}


@media only screen and (min-width: 40.063em) and (max-width: 50em) {
	
	/*Home Page*/
	.home-header .phone-demo { left: -2em; }
	.home-header .header-caption { text-align: left; font-size: 1.75em; position: relative; padding: 1.5em; }
	

}

@media only screen and (max-width: 40em) {

	/*Universal*/
	.tab-bar { background: #ED3937; }
	.left-small { border-right: solid 1px #C82523; }
	.header-image { padding: 0; }
	.mobile-logo { display: block; height: 45px; width: auto; margin: 0 auto; padding: 10px 0; } 
	.header-caption { text-align: center; padding: 1em;}
	.home-header .header-border { margin: 0 0 0 0; }

	/*Home*/
	.home .container, .full-width-page .container, .contact-page .container { padding: 0; }
	.home-header .phone-demo { left: 0; position: relative; bottom: 0;  }
	.home-header .phone-demo .iphone { position: relative; background: url("/material/views/novoroll/assets/img/iphone.png") no-repeat top center/ 240px; display: block; width: 240px; height: 540px; position: relative; margin: 0 auto; float: none;  }
	.home-header .phone-demo .iphone video { top: 58px; width: 217px; left: 11px; }
	.home .entry-content { padding: 0 0 3em; clear: both;}
	.flat-iphone img, .flat-ipad img { width: 30% }
	.home-header { padding: 2em 0; }
	.home-header .header-caption { top: -35px; text-align: center; padding: 1em 0.5em; width: 100%; font-size: 2.25em; }
	.caption-container { margin: 0;  } 
	#home-replay { display: none; }
	.red-btn { font-size: 2.5em; }
	.seals li { margin: 5px 5px; }
	.home-header .header-border { height: 116%; }

	/*Video Units Page*/
	.unit-description h2 { font-size: 1.75em; }
	.unit-description div.active { padding: 1em 0 0; }
	.video-nav-buttons { padding: 1em 0 0; margin: 0em 0 4em; }
	.phone-demo .iphone { width: 290px; height: 620px; float: none; background: url("/material/views/novoroll/assets/img/iphone.png") no-repeat top center/ 290px; }
	.video-units #playMovie { display: none; }
	.phone-demo video { top: 71px; left: 29px; width: 262px; height: auto; }

	/*Advertisers Page*/
	.page-wrapper .entry-content .advertisers .columns { margin: 0 auto 4em; }
	.page-wrapper .entry-content .advertisers { padding: 2em 1em; }

	/*Publishers page*/
	.samsung img { margin: 0 auto 1em; width: 90%;  }
	.people-icon { margin: 0 auto 2em; }
	.page-wrapper .entry-content .section .left:before { }
	.page-wrapper .entry-content .section .left:after { display: none; }
	.page-wrapper .entry-content .section.red-bg .right { text-align: center; padding-left: 0; }
	.page-wrapper .entry-content .section, .page-wrapper .entry-content .section.red-bg { padding: 2em; }

	/*Contact Page*/
	.contact-page header { background: #fff; border-bottom: 1px solid #f0f0f0; padding: 2em 1em; }
	.contact-page header .entry-title { color: #ED3937; font-size: 1.75em;  }
	.contact-page .entry-content { padding: 1em;  }
	.contact-page .contact-info { margin: 1.5em 0 0; border-top: 1px solid #f0f0f0; padding-top: 1.5em; border-left: none;  }
	.contact-page .company { line-height: 1em; }
	.contact-page .columns { padding: 1.5em 0; }


}

@media only screen and (max-width: 40em) and (orientation:landscape) {

	.home-header { height: 300px; }
	.home-header .header-border { height: 137%; }

	/*.phone-demo .iphone { width: 290px; height: 620px; float: none; background: url("/material/views/novoroll/assets/img/iphone.png") no-repeat top center/ 290px; }*/

}

@media (max-width: 763px) {
	.section-clients ul li { width: 50%; }
	.section-clients ul.publishers li { width: 50%; display: block;margin: 0 auto; clear: both; }
	.section-clients ul.publishers { margin: 7em 0 0; }
	.section-clients ul.publishers h3 { margin-bottom: 1.5em; }



}

.offices {
	display: block;
	clear: both;
	max-width: 50rem;
	margin: 0 auto;
	padding: 2.5rem 0;
}


.offices li {
	width: 50%;
	display: inline-block;
	list-style: none;
	color: white;
	float: left;
	text-align: center;
}

.offices h5 {
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 1rem;
}