/*
Theme Name: zipdog scratch
Author: Contento Interactive
Author URI: http://contentointeractive.com
Description: Custom Theme for Zipdog. Horizontal page layout.
*/

/*
padding-top: 1%;
padding-left: 10px;
padding-right: 10px;
line-height: 1.25;

On the .ribbon class, there's a css variable "--r" - this changes the angle of the fletches. Your's seem to be --r: .5em;
*/



.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/


* {	
	 font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
	color:#FFF;
	font-size:16px;
/*	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	*/
	 transition: all 0.5s ease;
		
}

html, body {
	-webkit-text-size-adjust: 100%;
	margin:0px !important;
	padding:0px !important;
}
h2 {
	font-size:27px;
	line-height:43px;
	text-align:center;
	font-family: "Roboto", sans-serif;
  	font-weight: 700;
  	font-style: normal;
}
h2.clients, .footer-ribbon {
	font-size:21px;
	line-height:1.9;
	font-family: "Roboto", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	
}
.zipdoglogo {
	width:100%;
	max-width:305px;
	height:auto;
}
.footer-ribbon a {
	font-size:20px;
	line-height:1.9;
	font-family: "Roboto", sans-serif;
  	font-weight: 700;
  	font-style: normal;
}
hr.bkg-line {
	z-index: -5;
    margin-top: -23px;
	height:auto;
	position:relative;
}

p {
	line-height: 1.4;
    font-size: 19px;
	font-family: "Roboto", sans-serif;
 	font-weight: 400;
  	font-style: normal;
	margin-top:40px;
	margin-bottom:47px
}
.horizontalrule {width:100%;height:1px;border-top:1px solid #fff;}
.rows3 {
	display:grid;
	grid-template-columns:1fr 1fr auto;
	width:100%;
	max-width:680px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:89px;
}
.rows3 .item {
	text-align:left;
	padding-left:15px;
	line-height: 1.4;
    font-size: 19px;
	font-family: "Roboto", sans-serif;
  	font-weight: 400;
    font-style: normal;
	position:relative;
	
}
.item .red {
	position:absolute;
	left:0px;
	top:-2px;
}
.red {
	color:#EE4023;
	font-size:25px;
}

a {
	font-style:normal;
	text-decoration:none;
	}

.zip-page {
	text-align:center;
	max-width:790px;
	margin:auto;
	padding-left:5%;
	padding-right:5%;

}
.ribbon {
	margin-top:89px;
	widtH:240px;
	height:43px;
	background-image:url(https://zipdog.net/_zipdog2014_website/wp-content/themes/zipdog-scratch/redesign-img/Red_Ribbon.svg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	margin-left:auto;
	margin-right:auto;
}
.ribbon.client-bkg {
	width:290px;
	background-image:url(https://zipdog.net/_zipdog2014_website/wp-content/themes/zipdog-scratch/redesign-img/clients-ribbon.png);
}
.footer-ribbon {
	background-color:#EE4023;
	width:100%;
	margin-top:89px;
	font-family: "Roboto", sans-serif;
    font-weight: 900;
	display:grid;
	 grid-template-columns: 1fr min-content 1fr;
}
.ribbon.second {
	margin-top:47px;
}

.logos-row-first, .logos-row-second  {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
.logos-row-first img {width:100%;height:auto;margin-top:32px;}
.logos-row-second {max-width:639px;margin-left:auto;margin-right:auto;}
.logos-row-second img {width:100%;height:auto;margin-top:20px;}
.mobilehide {
		display:block;
	}
	.mobileonly {
		display:none;
	}
.logos-row-first {display:grid; grid-template-columns: auto auto auto auto auto; }

.footer-ribbon div {display:flex;align-items:center;justify-content:center;}
.footer-ribbon .first {justify-content:end;text-align:right;}
.footer-ribbon .last {text-align:left;
 justify-content:start;
}
.logos-row-first img, 
.logos-row-second img {width:85% !important;}

h2.clients, .footer-ribbon {padding-top:2px;}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
padding-top: 56.25%;  16:9 /* Aspect Ratio (divide 9 by 16 = 0.5625) */

}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#floating {display:grid;margin-bottom:89px;}
#anchored, #logo-mobile-new {display:none!important;}

#client-ribbon {margin-top:90px;}


/**
 *  Media Queries
 * ----------------------------------------------------------------------------
 */

@media (max-width:788px){
	p {
		max-width:550px;
		margin-left:auto;
		margin-right:auto;
	}
	.rows3 {
		grid-template-columns: 50% 50%;
		max-width: 450px;
        padding-left: 40px;
	}
}

@media (max-width:767px){
	#logo-mobile-new {
		margin-left:auto;
		margin-right:auto;
		max-width:320px;
	}
	h2 {
		font-size:25px;
		line-height:43px;
	}
	.footer-ribbon a {
	font-size:19px;
  	font-weight: 600;
}
	#logo-mobile-new {display:block !important;}
	#logo-mobile-new #pandg-mobile img {
		width:85%;
		height:auto;}

	#logo-mobile-new .logos-row-second {
		grid-template-columns: auto auto;
		justify-content: space-around;
		align-items: center;
	}
	#logo-mobile-new .logos-third-row-mobile {
		align-items: center;
		display:grid;
		grid-template-columns:auto auto auto;
		justify-content: space-around;
	}

	#logo-mobile-new #sumit {
		grid-column:1/2;
	}
	#logo-mobile-new #jj {
		grid-column:3/4;
	}

	#logo-mobile-new #novartis-mobile {
		grid-column:1/2;
	}
	#logo-mobile-new #pandg-mobile {
		grid-column:2/3;
	}
	#logo-mobile-new #pnc-mobile {
		grid-column:2/3;
	}
	#logo-mobile-new #pnc-mobile img {
		width:85%;height:auto;
	}
	#logo-mobile-new .logos-third-row-mobile img {
		width:85%;
		height:auto;
		margin-top:20px;
	}

	#logo-mobile-new .logo-item img {
		width:85%;
		height:auto;
	}

	#logo-mobile-new  #take {
			grid-column: 2 / 3;
		}
	#logo-mobile-new #merk {
		grid-column:3/4;
	}

	#logo-mobile-new {
		text-align:center;
		padding-left:25px;
		padding-right:25px;
		margin-top:25px;
	}

	#logos-desktop {display:none;}
	#wwa-p {margin-bottom:45px;}
	
	.logos-row-first {padding-top:0px;}
	.zipdoglogo {
		max-width:252px;
	}
	.mobilehide {
		display:none;
	}
	.mobileonly {
		display:block;
	}
	.ribbon {
		margin-top:83px;
	}
	p 	{
		margin-top:38px;
		margin-bottom:59px;
	}
	.rows3 {
		grid-template-columns: 100%;
		max-width:230px;
		margin-left:auto;
		margin-right:auto;
	}
	.logos-row-first img {
		margin-top:20px;
	}
	.logos-row-first {
		max-width:320px;
		margin-left:auto;
		margin-right:auto;
	}
	.logos-row-first, .logos-row-second {
		display:grid;
		grid-template-columns:33% 33% 33%;
		justify-content: space-around;
	}
	#logo-mobile-new  .logos-row-first img {
		width:75%;
	}
	#phizer {
		grid-column:1/2;
	}
	#jj {
		grid-column: 2/4;
		margin-right:0px;
	}
	#novartis {
		grid-column:1/3;
	}
	#merk {
		grid-column:3/4;
	
	}
	#pg {
		grid-column:1/2;
		margin-left:20px;
	}
	#sumit {
		grid-column :2/4;
	}
	#take {
		grid-column:1/3;
	}
	#pnc {
		grid-column:3/4;
	}
	.logos-row-second {
		grid-template-columns:auto auto auto;
	}
	
	.logo-item {
		margin-left:auto;
		margin-right:auto;
	}
	.footer-ribbon {
		margin-top:0px;
		padding-top:4px;
		padding-bottom:4px;
		display:grid;
		grid-template-columns:1fr;
	}
	.footer-ribbon a, .footer-ribbon img {
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	.zip-page {
		padding-left:9%;
		padding-right:9%;
	}
	#floating {display:none !important;}
	#anchored {display:grid !important;}
}
@media (max-width:604px){
	.zip-page.mobile-no-padding {
		padding-left:2%;
		padding-right:2%;
	}
	p {
		max-width:390px;
	}
}

@media (max-width:468px){
	p.mobileadjust {
		padding-left:20px;
		padding-right:20px;
	}
}

@media (max-width:464px){
	p.mobileadjust {
		padding-left:19px;
		padding-right:19px;
	}
}
@media (max-width:447px){
	p{
		padding-left:15px;
		padding-right:15px;
	}
	p.mobileadjust {
		padding-left:14px;
		padding-right:14px;
	}
}
@media (max-width:429px){
	p.mobileadjust {
		padding-left:6px;
		padding-right:6px;
	}
}


@media (max-width:415px){
	p.mobileadjust {
		padding-left:0px;
		padding-right:0px;
	}
}

@media (max-width:395px){
	p.mobileadjust {
		padding-left:30px;
		padding-right:30px;
	}
}


@media (max-width:382px){
	p.mobileadjust {
		padding-left:30px;
		padding-right:30px;
	}
	#logo-mobile-new {
		max-width:318px;
		margin-left:auto;
		margin-right:auto;
	}
}

@media (max-width:369px){
	p.mobileadjust {
		padding-left:20px;
		padding-right:20px;
	}
}
@media (max-width:353px){
	p.mobileadjust {
		padding-left:30px;
		padding-right:30px;
	}
}
@media (max-width:298px){
	p.mobileadjust {
		padding-left:15px;
		padding-right:15px;
	}
}

/* Retina-specific styles. */
@media print,
	(-o-min-device-pixel-ratio: 5/4),
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {
}

@media print {
	body {
	
	}

}