/* used specifically for mobile nav on ipads and phones */

@media (max-width:1024px) {

	

		body.isMobile{
			overflow-y: visible;
			overflow-x: hidden;
		}

		body.isMobile .section-wrapper{
			transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			-webkit-transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			-moz-transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			-o-transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			transform: translate(0);
			-webkit-transform:  translate(0);
			-moz-transform: translate(0);
			-o-transform: translate(0);
			-ms-transform: translate(0);
			-webkit-backface-visibility: hidden;
		}

		body.isMobile .mobile-see-nav{
			display:block;
			position: fixed;
			top:0;
			left:0;
			width:100%;
			height:68px;
			background: transparent url('/media-brochures/micro-site/images/mobile-see-nav-btn.jpg') no-repeat 0 0;
			z-index: 1001;
			background: #111;
		}
		body.isMobile .display-btn{
			cursor: pointer;
			position: absolute;
			top:15px;
			left:0;
			width:46px;
			height:38px;
			background: transparent url('/media-brochures/micro-site/images/mobile-see-nav-btn.jpg') no-repeat 0 0;
		}
		body.isMobile .mobile-home{
			position: absolute;
			top: 16px;
			left:71px;
			font-family: 'Source Sans Pro', sans-serif;
			font-size: 25px;
			color: #fff;
			font-weight: 300;
			text-decoration: none;
			text-transform: uppercase;
		}

		body.isMobile nav {
			position: fixed;
			top:0;
			margin:0;
			z-index: 1000;
			text-align: center;
			height: 100%;
			width:195px;
			background-color: rgba(27, 27, 27, 1);
			border-right:1px solid #434343;
			transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			-webkit-transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			-moz-transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			-o-transition:All .4s cubic-bezier(1.000, 0.000, 0.000, 1.000);
			transform: translate(-100%);
			-webkit-transform:  translate(-100%);
			-moz-transform: translate(-100%);
			-o-transform: translate(-100%);
			-ms-transform: translate(-100%);
			-webkit-backface-visibility: hidden;
		}

		body.isMobile nav ul {
			position: absolute;
			top:0;
			left:0;
		}


		body.isMobile nav ul li {
			display: block;
			float: left;
			width:100%;
			height: auto;
			border:none;
			text-align: right;
			margin: 0;
			padding: 0;
			margin: 0;
		}

		body.isMobile nav ul li:first-child {
			display: none;
		}

		body.isMobile nav ul li:nth-child(2) {
			padding-top:46px;
		}

		body.isMobile nav a {
		display: block;
		float: right;
		font-size: 24px;
		line-height: 22px;
		margin: 10px 0;
		padding: 0 13px 0;
		}

		body.isMobile nav.expanded {
			transform: translate(0px);
			-webkit-transform: translate(0px);
			-moz-transform: translate(0px);
			-o-transform: translate(0px);
			-ms-transform: translate(0px);
		}

		body.isMobile .section-wrapper.expanded {
			transform: translate(195px);
			-webkit-transform: translate(195px);
			-moz-transform: translate(195px);
			-o-transform: translate(195px);
			-ms-transform: translate(195px);
		}

		.container.serv-list.action img{
			width:100%;
		}

        body.isMobile section#Audience-Data, body.isMobile section#Cross-Device-Targeting, body.isMobile section#Whats-New {
            padding-top: 35px;
        }
}



 /* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	.sep-call-out {
			padding-bottom: 10px;
		}

	/*seperator fixes*/
		div.separator.bkg-2 .sep-call-out{
    		margin: 193px 0 0
		}
		div.separator.bkg-3 .sep-call-out{
    		margin: 205px 0 0;
		}
		div.separator.bkg-4 .sep-call-out{
    		margin: 200px 0 0 0;
		}

		div.separator.bkg-5 .sep-call-out{
    		margin: 208px 0 0 0;
		}


		div.separator p.supplier {padding:10px 0 0 0;}

		.tdetails ul li {
			font-size: 11px;
		}

		p.proj-title {
		    font-size: 15px;
		}

		.affiliates ul li {
		    padding: 0 0 0 20px;
		}

		/*seperator fixes*/
		div.separator p{
			font-size: 24px;
    		line-height: 26px;
		}


		div.separator p.supplier {padding:10px 0 0 0;}

		.container.serv-list.action img{
			width:100%;
		}

}

@media (min-width: 481px) and (max-width: 767px) {

		#intro header {
			height: 500px;
		}
		
		header .intro-line {
			width: 450px;
		}
		.title {
			padding-top: 179px;
		}

		
		header h1 {
			font-size: 90px;
			line-height: 66px;
			margin: 15px 0 0;
		}
		
		header h1 span {
			margin: 10px 0;
			font-size: 50px;
			line-height: 47px;
		}
		
		header .title p {
			padding: 30px 20px 0;
			font-size: 22px;
			line-height: 28px;
		}

		h2{
			font-size: 50px
		}

		.sep-call-out {
			padding-bottom: 20px;
		}

		/*seperator fixes*/
		div.separator.bkg-2 .sep-call-out{
    		margin: 158px 0 0;
		}
		div.separator.bkg-3 .sep-call-out{
    		margin: 147px 0 0;
		}
		div.separator.bkg-4 .sep-call-out{
    		margin: 145px 0 0;
		}
		div.separator.bkg-5 .sep-call-out{
    		margin: 194px 0 0;
		}
		div.separator p{
			font-size: 27px;
    		line-height: 31px;
    		padding: 16px 0 0;
		}

		div.separator p.supplier {padding:10px 0 0 0;}

		.container.serv-list.action img{
			width:100%;
		}

 }

/* Landscape phones and down */
@media (max-width: 480px) { 

		#intro header {
			height: 478px;
		}

		h1, h2 {
			margin-bottom: 40px;
			margin-top: 30px;
		}	


		h2{
			font-size: 37px;
			line-height: 54px;
		} 
	
		header .title {
			position: relative;
			padding-top: 166px;
		}
		
		
		header h1 {
			font-size: 60px;
    		line-height: 35px;
    		margin-bottom: 3px;
		}

		header h1 img {
			width: 100%;
		}
		
		header h1 span {
			font-size: 30px;
			line-height: 28px;
			margin: 0;
			padding: 10px 0;
		}
		
		header .title p {
			font-size: 18px;
			line-height: 24px;
			padding-top:10px;
			padding-left: 0;
			padding-right: 0;
		}


		/*seperator fixes*/
		div.separator.bkg-2 .sep-call-out{
			margin: 162px 0 0;
		}
		div.separator.bkg-3 .sep-call-out{
			margin: 145px 0 0;
		}
		div.separator.bkg-4 .sep-call-out{
			margin: 135px 0 0 0;
			padding-bottom: 20px;
		}

		div.separator.bkg-5 .sep-call-out{
			margin: 173px 0 0 0;
		}


		div.separator p{
			font-size: 24px;
    		line-height: 26px;
		}

		div.separator p.supplier {padding:10px 0 0 0;}


		.affiliates ul li {
		    padding: 0 0 0 10px;
		}

		.container.serv-list.action img{
			width:100%;
		}

 }