@charset "utf-8";
/* CSS Document */
/*
Theme Name: SACDZN
Author: Steve Cotroneo, Mike Patton
Author URI: https://sacdzn.com/, http://mikedpatton.com/dev/
Version: 1.0
*/
/***************** GENERAL ****************************/.commerce {float:right}html,body{ background-color:#fff;  font-family:proxima-nova, sans-serif; font-size:0; }
body{ padding:0px; }

#pageWrapper{ max-width:1300px; margin:0 auto 0;}

h1{ font-size:32px; color:#333; letter-spacing: .2px;}
h2{ font-size:24px; font-weight:normal; color:#686F72; line-height: 1.5; }
h3{ font-size:14px; color:#333; font-weight:normal; }
p{ font-size:16px; color:#555;}
h4{ font-size:14px; color:#40404a;font-weight:normal; font-style: italic;}a,a:hover{ color:inherit; }
img{ max-width:100%; }

.b{ font-weight:bold; }
.sb{ font-weight:600; }

.circle{ display:inline-block; width:30px; height:30px; background-image:url(images/arrowBlk.png); background-size:contain; background-repeat:no-repeat; background-position:center; vertical-align:top; }
.circle.blue{ background-image:url(images/arrowBl.png); }
#mainContent .circle a{ color:inherit; }

img{ height:auto; }
img.alignright { float: right; margin: 0 0 1em 1em; max-width:48%; }
img.alignleft { float: left; margin: 0 1em 1em 0; max-width:48%; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
hr { margin-top: 23px; }


/***************** HEADER ****************************/
#header{ position:fixed; padding:0px; background-color:#fff; width:100%; top: 0px; z-index:99; border-bottom: solid 1px #cccccc; }
#header .wrapper{ max-width:1360px; margin:0 auto; position:relative; }
#logo{ display:inline-block; margin-top:20px; margin-bottom:20px; }
#mainNav{ font-family:proxima-nova,sans-serif; display:inline-block; margin-top:10px; position:absolute; right:90px; font-size:0; }
#mainNav ul{ list-style:none; margin:0; }
#mainNav li{ display:inline-block; padding:0 15px; line-height:40px; color:#2e2e2e; border:2px solid #fff; }#mainNav li a{ color:inherit; font-size:18px; font-weight:600; display:block; }
#mainNav li:hover{ /*border-color:#0d5f99;*/ border-color:#fff; position:relative; color:#6cade1; z-index:99;}
#mainNav li#menu-item-256{ border-color:#6cade1; margin-left:5px; }
#mainNav li#menu-item-256:hover{ color:#6cade1; background-color:#fff; }

/***************** PORTFOLIO ****************************/

.copy{ margin:56px 0px; }
.portfolioItem{ width:49%; display:inline-block; vertical-align:top; margin-bottom:45px; position:relative; }
.portfolioItem.even{ margin-right:2%; }
.portfolioItemImg{ height:345px; background-position:center; background-size:cover;}
.portfolioItem span{ display:inline-block; margin-left:0px; margin-top:10px; font-size:14px; letter-spacing: .1px; color:#686F72;font-weight:400;}
.portfolioItem span.title{ margin-left:0px; margin-right: 10px; }
.portfolioItem span.subtitle{ font-style: 400; }
.portfolioItemImg:hover{color:#fff;}
#mainContent .portfolioItem a{ color:#fff; }
.artpaddingbottom { padding-bottom: 15px; }

.portfolioHover { position:absolute; width:100%; height:345px; top:0; left:0; background-color:rgba(108,173,225,.95); display:table; opacity:0; overflow: hidden;

    -webkit-transition:  .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;}

.portfolioHover p{ 
	font-size:20px; font-weight:600; color:#fff !important; 
	display:table-cell; 
		/*vertical-align:middle; */
	text-align:center !important; 
		/*line-height:30px !important;*/
	letter-spacing: 1px; 
	opacity:0;
	position: relative;
	top: 45%;
	left: 50%; 
	transform: translateX(-50%); 
	animation-name: viewmorehoveranimationout;
	-webkit-animation-duration: .25s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
 	-webkit-animation-fill-mode: forwards;
		/*-webkit-transition:  .3s ease-in-out .25s;
		-moz-transition: .3s ease-in-out .25s;
		-o-transition: .3s ease-in-out .25s;
		transition: .3s ease-in-out .25s; */
}
.portfolioHover:hover p { 
		/*opacity:1;*/
	animation-name: viewmorehoveranimationin;
	-webkit-animation-duration: .5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: .3s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards; }


@keyframes viewmorehoveranimationin {
	0% { opacity: 0; transform: translateX(-100%); }
	50% { opacity: .25; }
	75% { opacity: .6; }
	100% { opacity: 1; transform: translateX(-50%); }
}

@keyframes viewmorehoveranimationout {
	0% { opacity: 1; transform: translateX(-50%); }
	100% { opacity: 0; transform: translateX(-100%); }
}

#mainContent .portfolioItem .portfolioHover a{ color:#fff; vertical-align:middle;}

.portfolioHover p span{ margin:0; }

.portfolioHover:hover{ opacity:1; }

/***************** PORTFOLIO MATTER  ****************************/
.mattersvg { text-align:center;}
.mattersvgsingle { width: 30%; margin: 0; display: inline-block;}


/***************** MAIN CONTENT HOME  ****************************/
#mainContent .home h1{ font-size:25px; font-weight:normal; color:#333; line-height: 1.5; margin:50px 110px 60px;  text-transform:none; text-align: center; }
#mainContent .homeh1 { text-align: center; font-size:32px; margin-bottom:20px; }
#mainContent .copy-home h2{ margin: 60px 200px 40px; }
#mainContent .homeLogos { width: 100%; margin: 0 0 24px 0; }
#mainContent .homeLogos .blocks-gallery-item { height:130px; padding: 30px 0px; margin-top: 8px; margin-bottom: 8px; background-color: #efeeee; }
#mainContent .homeLogos .blocks-gallery-item figure { height: 50%; }
#mainContent .homeLogos .blocks-gallery-item img { max-width: 80%; margin:auto; max-height: 100%; }
#breadcrumbs {display: none;}
#mainContent .wp-block-gallery .blocks-gallery-item img { width: 100% !important; }

/***************** MAIN CONTENT WORK  ****************************/
#mainContent .work h1{ font-size:22px; font-weight:normal; color:#555; line-height: 1.5; margin:120px 140px 60px;  text-transform:none; text-align: center;}

/***************** MAIN CONTENT ABOUT  ****************************/
#mainContent .about-sac-designs h1{ font-size:22px; color: #333; margin:60px 200px 10px; text-align: center;  }
#mainContent .graphic-design-agency { text-align:center; }
#mainContent .graphic-design-agency h2 { margin: 36px 200px 12px; }
#mainContent .about-sac-designs h2{ font-size:22px; font-weight:normal; color:#555; line-height: 1.5; margin:0px 200px 60px; text-align: center;
	padding-bottom: 60px;
	/*border-bottom:1px solid #b2b3b6; */
	}

.serviceItem{ background-color: #fff;
	background-size:cover;
	border-bottom:1px solid #b2b3b6;
	padding:40px 200px 40px; }

.serviceItem:last-child { border:none; }
.serviceItem p { 
	font-size:22px;
	font-weight:normal;
	color:#555;
	text-align: center;
	padding-bottom: 30px;
	color:#686F72;
	line-height: 1.5;
	margin:0px 0px 30px; }

.serviceItem .title {
	font-size:22px;
	color: #333;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	padding-bottom: 40px; padding-top: 60px;
	margin: 0; }

.serviceItem h4 { font-size:18px; }

.serviceItem .aboutstats { font-size: 18px; padding: 20px; line-height: 1.25;
	margin-top: 20px; }
.serviceItem .bigstat { font-size: 44px; color: #686F72; 
	float:left; padding-right: 28px;
	position: relative; top: -6px;
	font-weight: bold; }

/***************** MAIN CONTENT TEAM  ****************************/

#mainContent .team h1{ font-size:22px;  margin:60px 200px 10px; text-align: center; text-transform:uppercase; }
#mainContent .team h2{ font-size:22px; font-weight:normal; color:#555; line-height: 1.5; margin:0px 200px 60px; text-align: center; }

/***************** MAIN CONTENT CONTACT  ****************************/

#mainContent .contact-sac h1{ font-size:22px; margin:60px 200px 10px; text-align: center; text-transform:uppercase; }
#mainContent .contact-sac h2{ font-size:22px; font-weight:normal; color:#555; line-height: 1.5; margin:0px 200px 40px; text-align: center; }

/***************** MAIN CONTENT BLOG  ****************************/
#Blog {margin: 50px}
#mainContent .blogItem h1{ font-size:24px; font-weight:normal; color:#414141; line-height: 1.5; text-transform:none;margin:0px 70px 30px;}#mainContent .blogItem h2{ font-size:24px; font-weight:normal; color:#414141; line-height: 1.5; text-transform:none; margin:0px 200px 60px;}#mainContent {padding:0px 0; max-width:1200px; margin:0 auto; margin-top:0px;}
#mainContent h1{ font-size:22px; margin:100px 200px 0px; text-transform:uppercase; }
#mainContent .fw{ margin-top:80px; }

.wpcf7 form.sent .wpcf7-response-output { border-color: none !important; height:40px; background-color:#46b450; color: white; font-size:20px;}

/***************** read more BLOG  ****************************/
#mainContent .copy p{ font-size:20px; font-weight:normal; color:#555; line-height: 1.5; margin:0px 200px 10px; text-align: left; }
.blog-copy p{ font-size:20px; font-weight:normal; color:#555; line-height: 1.5; margin:0px 200px 10px; text-align: left; }#mainContent a{ color:#00aeef;}.line.col{ width:49%; }
.hero{ background-position:center; background-size:cover; margin:60px -60px 30px -60px; }

#mainContent .copy .blogItem p{ margin:0 0 10px; }
/***************** HOME (button)****************************/
.homeHero{ padding:75px;  margin:34px -60px 0px -60px; line-height:100px; text-transform: uppercase; font-family:"alternate-gothic-no-2-d"; }
.homeHero #heroh1{color: #ffffff; font-family: 'alternate-gothic-no-2-d'; line-height: 130px; font-size:160px; font-weight:normal; margin: 100px 140px 0px; }
#mainContent .homeHero #homeHeroBtn { margin: 60px 140px 0px; }
#quotes{ background-color:#eff0e9; background-image:url(images/greyBg.jpg); background-size:cover; padding:70px; }
#quotes h3{ /*margin:0 30px 20px;*/ line-height: 1.5; font-size:22px; color:#626a6d; margin:20px 140px 30px; text-align: left;text-transform:none;}
#mainContent .homeHeroBtn a { color:#9fcee3; }

/***************** Quote****************************/
#quotes h3:before{ content:"\201C"; display:block; float:left; font-size:30px; margin-left:-18px; line-height:40px; }

#quotes h3:after{ content:"\201D";display:inline-block; font-size:30px; line-height:40px; margin-left:-3px; vertical-align:top; }
#quotes p{ margin:0px 140px; line-height: 1.1; color:#626a6d; font-size:16px;}
#quotes .quoteNav{ margin-top:0px; margin-left:0; font-size:18px; font-weight:300; }
.quoteNav p, .quoteNav span{ display:inline-block; line-height:30px; }
.quoteNav p{  }

#quotes li{ display:none; }
#quotes li.active{ display:block; }
/*.serviceItem .circle{ width:36px; font-weight:bold; font-size:26px }*/

/***************** TEAM ****************************/
@keyframes teamMemberLoad {
	0% {opacity: 0; transform: translate(0px, -20px);}
	75% { opacity: .8;}
	100% {opacity: 1; transform: translate(0px, 0px);}
}
.teamMember{ width:49%; display:inline-block; margin-bottom:80px; text-align:center; opacity:0;
	animation: teamMemberLoad .5s ease-in 1s 1 forwards; }
.teamMember:nth-child(3) { animation-delay: 0s; }
.teamMember:nth-child(4) { animation-delay: 0s; }
.teamMember:nth-child(5) { animation-delay: .5s; }
.teamMember:nth-child(6) { animation-delay: .5s; }
.teamMember.even{ margin-right:2%; }
#mainContent .teamMember h1{ margin:0 auto; text-align: center;}
.teamMember p{ max-width:265px; margin:0 auto; }
.teamMember p.title{ margin:20px auto 0; }
/***************** BLOG ****************************/
.blog-copy{ margin-bottom:60px; }
.blogItem{ margin:0px 80px; padding:20px 20px; position:relative; margin-bottom:2px; }
.blogItem h3{ font-size:36px;}
#Blog .blogItem{ margin:1%; position:relative; padding:0; display:inline-block; vertical-align:top; width:48%; }
#Blog .blogItem h3{ font-size:28px;}
.blogItemImg{ width:auto; background-size:cover; background-repeat:no-repeat; margin-bottom:30px; }
/*.blogContent {margin-top: 90px}*/
p.byLine{ padding-bottom:0px; color:#b2b3b6; }
p.dateLine{ color:#b2b3b6; font-size:16px; margin-bottom:10px; margin-top:-20px;}
p.dateLine span{ margin-right:10px; display:inline-block; }

/***************** CONTACT ****************************/

form{ margin-left: auto; margin-right: auto; }
#mainContent .copy form p{ margin:0; margin-bottom:20px; text-align:center;}
.wpcf7-form p { text-align: center; }
.wpcf7-form textarea { width: 80%; }


input{ height:55px; padding: 0px 20px; font-size:18px; color:#000000; background-color:#F8F8F8; border:none; box-shadow: inset 0px 0px 0px; /*#eeeeee;*/ border-radius: 3px; }

textarea{ padding:10px 17px; font-size:18px; color:#000000; background-color:#F8F8F8; border:none; height:130px; box-shadow: inset 1px 1px 2px 0 #ddd; border-radius: 3px;}

input[type="submit"]{ padding:15px 30px; color: #fff; background-color:#f69138; margin:0 auto;}.wpcf7 input[type="text"],

.wpcf7 input[type="email"]{width: 80%;}

.wpcf7 textarea { background:#F8F8F8; color:#000; }

div.wpcf7-validation-errors{ border:0; font-size:16px; }

 
::-webkit-input-placeholder {
   color: #666;
}
 
:-moz-placeholder { /* Firefox 18- */
   color: #666;
}
 
::-moz-placeholder {  /* Firefox 19+ */
   color: #666;
}
 
:-ms-input-placeholder { 
   color: #666; 
}

/***************** SINGLE ****************************/
.singleSocial{ text-align:center; margin:40px; }
.singleSocial a{ margin:10px; display:inline-block; width:43px; height:42px; background-position:0 0; }
.singleSocial a:hover{ background-position:0 42px; }
 
.previousPost{ padding-left:35px; background-image:url(images/prevArrow.png); background-repeat:no-repeat; height:38px; display:block; float:left; padding-top:24px; margin-left: 20px }
.nextPost{ padding-right:35px; background-image:url(images/nextArrow.png); background-repeat:no-repeat; background-position:right; height:38px; display:block; float:right; padding-top:24px; text-align:right; margin-right: 20px }
.itemNav p{ font-size:12px; color:#404048; margin:0; text-transform:uppercase; line-height:10px; }
.nextPost p{padding-top: 3px}
/*.itemNav p.title{ font-size:19px; font-weight:bold; line-height:32px; }*/
.itemNav {margin-top: 50px}
/***************** FOOTER ****************************/
#map{ height:500px; }
.footerMenu ul{ margin:0; padding:0; border-bottom:1px solid #bbb8be; margin-bottom:0px; }
.footerMenu li{ padding:0px 80px; border-top:1px solid #b7bcc1; }
.footerMenu li a{ font-size:22px; font-weight:600; color:#31393d; display:block; padding:30px 0; }
.footerMenu li a:after{ content:""; float:right; display:inline-block; width:36px; height:36px; background-image:url(images/arrowBlk.png); background-size:contain; background-repeat:no-repeat; background-position:center; }
.footerMenu li.current-menu-item{ display:none; }#footer{ padding:40px 120px 30px; background-color:#333; background-image:url(images/homeHeroBg.png); background-size:cover; }
#footer p{ margin:0px 0; font-size:14px; color:#666; }
#footer .title{ font-size:16px; font-weight:bold; }
#footer .address{ display:inline-block; width:25%; vertical-align:top; }
#footer .address a{ color:#f69138;}
#footer .middle{ width:50%; display:inline-block; vertical-align:top; text-align:center; }

a.cta{ font-size:22px; color:#fff; padding:0 15px; line-height:50px; background-color:#f69138; border-radius:3px; display:inline-block; margin-top:10px; }
#footer .social{ width:25%; display:inline-block; vertical-align:top; text-align:right; }
#footer .social a{ margin:10px; display:inline-block; width:43px; height:42px; background-position:0 0; }
#footer .social a:hover{ background-position:0 42px; }
#copyright{ padding-top:30px; }

#footNav, #footer, #quotes{ margin:0 /*-50px;*/ }.menu-link{ font-family: arial; font-size:27px; margin-top:7px;  font-weight: bold; margin-right:30px; position:absolute; right: 0; width:30px; }


#BGvid {
	/*min-width:100%;*/
	min-height:100vh;
	/*position: absolute;
	top:0; left:0;*/
	z-index: -100;
    background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover;
    -moz-background-size: cover;
}


/*************VIEWPOINT-COWS***********************/
#cowsdiv {
	width:840px; margin-left:200px; }
#cowbegone480  { display: block; }
#cowbegone100 { display: block; }


/*************NATIONWIDE-BANNERS***********************/
#natbannersdiv {
	width:970px; margin-left:auto; margin-right:auto; }
.natbegone970  { display: block; }
.natreplace300  { display: none; }


/*************VIDEOS FULL SCREEN YOUTUBE***********************/
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/**************INFOGRAPH-OF ALL OUR WORK*****************/
#mainContent #Jul6Infograph {
	width: 100%;
	margin: 0;
}
#Jul6Infograph .bold { font-weight:bold; }

#mainContent #infographbanner {
	width: 100%;
	background-color: #404041; color: white;
	text-align: center;
	padding: 6px 0px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 32px;
	margin: 15px 0px 25px 0px; 
}
#Jul6Infograph #infogrphmotiondesign {
	width:100%; padding-bottom: 40px;
}
#Jul6Infograph #infogrphdigitaldesign {
	width:100%; padding-bottom: 40px;
}
#Jul6Infograph #infogrphprintdesign {
	width:100%; padding-bottom: 40px;
}
#mainContent #infographbanner .greyed {
	color: #d0d2d3;
}

#Jul6Infograph #infographtitle {
	padding-top:20px;
	padding-bottom:10px
}

#Jul6Infograph .infographtext {
	vertical-align: top;
	width: 50%;
	display: inline-block;
}
#Jul6Infograph .infographpie.desk {
	vertical-align: top;
	display: inline-block;
	margin-top: 20px;
	width: 45%;
	margin-left:4%;
	text-align: left;
}
#Jul6Infograph .infographpie.mobile {
	display: none;
	width: 100%;
	text-align: center;
}
#Jul6Infograph .infographpie img {
	width: 100%;
}
#Jul6Infograph .infographpie.mobile img {
	width: 75%;
	max-width:600px;
}
#Jul6Infograph h3 {
	font-family: "alternate-gothic-no-2-d";
	text-transform: uppercase;
	font-size: 40px;
	margin-bottom: 4px;
}
#Jul6Infograph ul {
	list-style: none; margin: 0px 20px 10px 0px;
	float:left;
}
#Jul6Infograph li {
	font-size:18px;
	color:#555555;
	line-height:1.5;
	width: max-content; 
}
#mainContent #Jul6Infograph p{
	clear:both;
	font-size: 18px;
}
#Jul6Infograph svg {
	height:28px;
	margin-right: 15px;
}
.twentybfsixb { color:#20bf6b; fill:#20bf6b; }
.zerothreeeighteightcfive { color:#0388c5; fill:#0388c5; }
.fsevenbseventhreeone { color:#f7b731; fill:#f7b731; }
.faeighttwothreeone { color: #fa8231; fill: #fa8231; }
.zerofbninebone { color:#0fb9b1; fill: #0fb9b1; }
.eighteightfiftyfourdzero { color:#8854d0; fill: #8854d0; }
.ebthreebfivea { color:#eb3b5a; fill: #eb3b5a; }
.afivebonectwo { color:#a5b1c2; fill: #a5b1c2; }
.st1 { opacity:0.3; fill:#FFFFFF; }
.black { color:#000000; fill:#000000; }
@media (max-width: 800px) {
	#Jul6Infograph .infographpie.desk {
		display: none;
	}
	#Jul6Infograph .infographpie.mobile {
		display: block;
	}
	#Jul6Infograph .infographtext {
	width: 100%;
	display: block;
}
}
@media (max-width: 420px) {
	#mainContent #infographbanner {
		font-size: 24px;
	}
}

/*------------- BLOG-ANNIVERSARY -------------*/
#mainContent #Anniv2018 {
	width: 100%;
	margin: 0;
}
#Anniv2018 .bold { font-weight:bold; }

#mainContent #infographbanner {
	width: 100%;
	background-color: #404041; color: white;
	text-align: center;
	padding: 6px 0px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 32px;
	margin: 15px 0px 25px 0px; 
}
#mainContent #SACbornbanner {
	width: 100%;
	background-color: #0388c5; color: white;
	text-align: center;
	padding: 12px 0px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 48px;
	margin: 15px 0px 25px 0px; 
}
#mainContent #infographbanner .greyed {
	color: #d0d2d3;
}

#Anniv2018 #infographtitle {
	padding-top:20px;
	padding-bottom:10px
}

#Anniv2018 .timeLineItem {
	width: 100%;
	display: block;
	padding-top: 60px;
	text-align: center;
}
#Anniv2018 h3 {
	font-family: "alternate-gothic-no-2-d";
	text-transform: uppercase;
	text-align: left;
	font-size: 40px;
	margin: 0px 0px 4px 0px;
}
#Anniv2018 .subhead {
	font-family: "proxima nova";
	text-transform: uppercase;
	text-align: left;
	font-size: 20px;
	margin: 0px; padding: 0px;
}
#Anniv2018 ul {
	list-style: none; margin: 0px 20px 10px 0px;
	float:left;
}
#Anniv2018 li {
	font-size:18px;
	color:#555555;
	line-height:1.5;
	width: max-content; 
}
#mainContent #Anniv2018 p{
	display: inline-block;
	width: 80%;
	text-align: left;
	font-size: 18px;
}
#Anniv2018 svg {
	height:28px;
	margin-right: 15px;
}
#Anniv2018 .infographtitle {
	display: block;
	width: 400px;
	text-align:left;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
}
#Anniv2018 .timelineicon {
	display: inline-block;
}
#Anniv2018 .titletext {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding-left: 25px;
}
#Anniv2018 .calloutbox {
	background-color: #e6e6e6;
	width: 100%;
	padding: 40px;
	margin: 20px 0px;
}
#Anniv2018 .calloutbox h4 {
	color: #0388c5;
	font-family: 'proxima nova';
	font-style: normal;
	font-size: 26px;
	padding: 0; margin: 0;
	text-transform: uppercase;
}
#Anniv2018 .calloutbox p {
	color: #000000;
	font-family: 'proxima nova';
	font-size: 26px;
	padding-bottom:0; margin-bottom:0px;
}

/************HOLDIAY 2018************/
.blogContent .holidayblogimagesthirds {width: 100%;}
.blogContent .holidayblogimagesthirds .holidayblogimagescontainer { padding-left:30%; padding-bottom:220px; margin:1.25%; background: url(https://sacdzn.com/wp-content/uploads/2018/12/00100dPORTRAIT_00100_BURST20181219153620526_COVER.jpg); background-size: cover; display:inline; }
.blogContent .holidayblogimagesthirds .holidayblogimagescontainer img { display:none; }


/******** ANIMATION BLOGS **********/
.blogfacts { padding: 20px 50px; font-size: 28px !important; text-transform: uppercase; color:#f69138; }




/********** VALENTINES 2019 ********/
#mainContent .reasons-for-animation .blogContent h2 {
	margin: 30px 0px 6px;
}
#mainContent .reasons-for-animation .blogContent h3 {
	margin: 6px 0px 12px;
}
#mainContent .reasons-for-animation .blogContent .wp-block-image {
	margin-top:60px;
}
#mainContent .reasons-for-animation .blogContent .wpcf7 {
	margin-top: 50px;
}
#mainContent .reasons-for-animation .blogContent .paddingtop {
	padding-top:40px;
}





/********** ANIMATION HTML 5 ********/
#mainContent .html5-animations .blogContent h2 {
	margin: 30px 0px 6px;
	font-size: 36px;
}
#mainContent .html5-animations .blogContent h3 {
	margin: 6px 0px 12px;
	font-size:24px;
}
#mainContent .html5-animations .blogContent .wp-block-image {
	margin-top:60px;
}
#mainContent .html5-animations .blogContent .wpcf7 {
	margin-top: 50px;
}
#mainContent .html5-animations .blogContent .paddingtop {
	padding-top:40px;
}
#mainContent .html5-animations .blogContent li {
	font-size: 20px; 
	color: #555;
}
#mainContent .html5-animations .blogContent .flashisdead {
	max-width: 700px;
}
#mainContent .html5-animations .blogContent .htmllogos {
	vertical-align:initial;
	max-height:100px;
	max-width:20%;
	display:inline-block;
	padding-right: 5%;
	margin:0;
}
#mainContent .html5-animations .blogContent .apptitles {
	display:inline-block;
	width: 75%;
}
#mainContent .html5-animations .blogContent .htmlapps {
	padding-bottom:20px; padding-top: 10px;
}
#mainContent .html5-animations .blogContent .centered {
	text-align: center;
}
#mainContent .html5-animations .blogContent .twobanners {
	width: 640px; margin-left: auto; margin-right: auto;
}
@media (max-width: 590px){	
	#mainContent .html5-animations .blogContent .htmllogos {
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
		padding-right: 0;
	}
	#mainContent .html5-animations .blogContent .apptitles {
		display: block;
		width: 100%;
	}
}
@media (max-width: 769px){
	#mainContent .html5-animations .blogContent .desk {
		display:none;
	}
}
















/***************** MEDIA QUERIES ****************************/
@media (max-width: 1540px){	.wrapper{ padding:0px 10px; }
	.homeHero, .hero{ margin:34px -60px 0 -60px } 
	.homeHero{ padding-right:75px; }
	#footNav, #footer, #quotes { margin:0; }
	#mainContent .portfolioItem a span{ margin:0px 10px; }
	#mainContent .portfolioItem a span.title{ margin-right:0; }
}
@media (max-width: 1330px){

	.homeHero, .hero{ margin:34px -20px; }
	#cowsdiv { width:auto; margin:0px 100px 0px 200px; }
	#cow160 { padding-right:15px; }

}
@media (max-width: 1024px){

	.homeHero, .hero{ margin:30px 0px; }
	#mainContent .homeHero #homeHeroBtn { margin: 0px 75px 0px 30px; }

	#footer{ padding:60px 30px 30px; }

	.homeHero{ font-size:100px !important; line-height:85px !important; padding:90px 75px 50px 70px !important; margin: 15px -30px; }
	
	.homeHero #heroh1{ font-size:100px !important; line-height:85px !important; padding:90px 75px 50px 70px !important; margin: 15px -30px; }

}

@media (max-width: 970px){
	#natbannersdiv { width:300px; }
	.natbegone970  { display: none; }
	.natreplace300  { display: block; }
}

@media (min-width:769px){

	.primaryNav .dt{ display:block; }

	.mobile{ display:none; }

	.menu-link{ display:none; }

	.mobileNav{ width:100px; height:20px;  float:right; overflow:hidden;}
	

}
@media (max-width: 768px){

	.primaryNav{ display:none; }

	.navContainer .primaryNav { display:block; }

	#mainNav{ margin-top:0; right:0; }
	#mainContent .homeHero #homeHeroBtn { margin: 0px 75px 0px 43px; }
    #Blog {margin-top: 80px}
	#logo{ margin:15px 0; line-height:20px; max-width:70%; }	.mobileNav{ width:100px; height:20px;  float:right; overflow:hidden;}	.portfolioItem, .portfolioItem.even{ /*display:block; width:auto; margin:30px 15px; */}
	#mainContent .portfolioItem a span{ margin-top:0; margin-bottom:0; }
	.footerMenu li{ padding:0 30px; }
	.footerMenu li a{ font-size:18px; padding:20px 0; }
	.footerMenu li a:after{ width:25px; height:25px; }
	#mainContent h2{ margin:auto 15px; font-size:20px; }
	#mainContent .graphic-design-agency h2 { margin:auto 15px; }
	#mainContent h1{ font-size:22px; color:#555; margin:100px 20px 10px; line-height: 1.3; text-align:left; }
	#mainContent h2{ font-size:18px; color:#555; margin:0px 20px 60px; line-height: 1.3;text-align:left; }
	#mainContent .contact-sac h1{ font-size:22px; color:#555; margin:0px 30px 10px; line-height: 1.4; text-align:center; }
	#mainContent .contact-sac h2{ font-size:18px; color:#555; margin:0px 55px 30px; line-height: 1.4;text-align:center;}
	#mainContent .blogItem h1{ font-size:18px; color:#555; margin:0px 20px 10px; line-height: 1.3;}
	#mainContent .blogItem h2{ font-size:18px; color:#555; margin:0px 20px 60px; line-height: 1.3;}
	#mainContent .home h1{ font-size:18px; color:#555; margin:0px 55px 40px; text-align:center; letter-spacing:0px; line-height: 1.4;}
	#mainContent .copy-home h2 { margin: 60px 20px 0px; }
	#mainContent .about-sac-designs h1{ font-size:22px; text-align:center; color:#333; margin:0px 30px 10px; letter-spacing:.1px; line-height: 1.3;}
	#mainContent .about-sac-designs h2{ font-size:18px; text-align: center; color:#555; margin:0px 55px 60px; letter-spacing:.1px; line-height: 1.4;}
	#mainContent .work h1{ font-size:18px; text-align:center;  color:#555; margin:100px 55px 60px 55px; line-height: 1.4;}
	#mainContent .team h1{ font-size:20px; color:#555; margin:0px 30px 10px; letter-spacing:.1px; text-align:center; line-height: 1.4;}
	#mainContent .team h2{ font-size:18px; color:#555; margin:0px 55px 60px; text-align:center; line-height: 1.4;}
	#mainContent .copy p{ font-size:16px; margin:20px 20px 20px; }
	#mainContent .fw{ margin-top:40px; }
	#quotes{ padding:15px; }
	#quotes h3{ font-size:16px; margin:0px 20px 0px;text-align:left;letter-spacing:0px; line-height: 1.4; }
	#quotes p{ font-size:13px; margin:0 20px; }
	#quotes .quoteNav p{ display:block; margin:10px auto; text-align:center; }
	#footer div, #footer .address, #footer .middle, #footer .social{ display:block; width:auto; text-align:center; margin-bottom:30px; }
	#footer p{ font-size:17px; }
	.homeHero{ font-size:95px !important; line-height:80px !important; padding:75px 70px 40px 50px !important; margin: 10px 0px 30px 0px; }
	.homeHero #heroh1{ font-size:95px !important; line-height:80px !important; padding:75px 70px 40px 50px !important; margin: 15px 0px 30px 0px; }
	.homeHeroBtn{ font-size: 18px !important; display: inline-block; border: 2px solid #7197D2; border-radius: 0px !important; line-height: 30px !important; text-transform: lowercase; font-family: proxima-nova,sans-serif; padding: 1px 10px !important; }
	.navContainer{ background-color:rgba(0,0,0,.95); position:fixed; top:50px; width:100%; height:100%; z-index: 10 }
	.navContainer ul{ list-style:none; margin: 0px; margin-top:10px; padding:0; }
	.navContainer li{ color:#fff; font-size:18px; padding:15px 0; margin:0; text-align:center; border-bottom: 1px solid #262626; }
	.hero{ max-height:450px !important; }	.navContainer li:hover{ color:#6cade1; }
	.serviceItem{ padding:40px; }
	.serviceItem p { line-height:normal; margin:0px 10px 10px 10px; } 
	.serviceItem p.title{ margin-bottom:10px; }
	.teamMember{ width:auto; margin:30px auto; display:block; }
	.teamMember:nth-child(3) { animation-delay: 0s; }
	.teamMember:nth-child(4) { animation-delay: .4s; }
	.teamMember:nth-child(5) { animation-delay: .8s; }
	.teamMember:nth-child(6) { animation-delay: 1.2s; }
	.teamMember:nth-child(7) { animation-delay: 1.6s; }
	.portfolioItemImg, .portfolioHover{ height:250px; }
	a.cta{ line-height:22px; padding:10px 20px; }	.serviceItem p{ font-size:16px; }
	.serviceItem p.title{ font-size:20px; }
	.blogItem{ padding:0; margin:15px; }
	.reach-out form{ margin-top:20px; }
	#map{ height:300px; }
	.contact-sac form{ padding:0 40px; }
	
	#Blog .blogItem{ display:block; width:auto; margin-bottom:50px; }
	
	#cowsdiv { width:auto; margin:0px 20px 0px 20px; }

}

@media (max-width: 660px){
	#cowbegone480  { display: none; }
	#cowbegone100 { display: none; }
}


@media (max-width: 600px){

	.portfolioItem, .portfolioItem.even{ display:block; width:auto; margin:30px 15px; }

	.homeHero{ font-size:75px !important; line-height:65px !important; padding:75px 60px 30px 50px !important; margin: 10px 0px 30px 0px; }
	.homeHero #heroh1{ font-size:75px !important; line-height:65px !important; padding:75px 60px 30px 50px !important; margin: 15px 0px 30px 0px; }

        #Blog {margin-top: 80px !important}
	.hero{ max-height:300px !important; }

	#mainContent .team h2{text-align:left; margin:0px 40px 60px }

	#mainContent .team h1{text-align:left; margin:0px 40px 10px;}

	#mainContent .home h1{  text-align: left !important; margin:0px 40px 40px;}

	#mainContent .about-sac-designs h1{ text-align: left; margin:0px 40px 10px;}

	#mainContent .about-sac-designs h2{ text-align: left; margin:0px 40px 60px; }

	#mainContent .work h1{ text-align: left; margin:100px 40px 60px; }

	#mainContent .contact-sac h1{ margin:0px 40px 10px; text-align:left !important; }

	#mainContent .contact-sac h2{ margin:0px 40px 30px; text-align:left;}
	
	#mainContent .homeLogos { width: 90%; margin: 0px 5% 24px 5%; }

	#Blog {margin-top: 70px}
}

/*@media (max-width: 580px){ iframe { width:100%; height:250px;} }*/

@media (max-width: 420px){

	.homeHero{ font-size:70px !important; line-height:56px !important; padding:50px 20px 40px 30px !important; margin: 10px 0px 25px 0px; }
	.homeHero #heroh1 { font-size:70px !important; line-height:56px !important; padding:90px 20px 40px 30px !important; margin: 20px 0px 25px 0px; }
	#mainContent .homeHero #homeHeroBtn { margin: 0px 75px 0px 20px; }

}
.homeHeroBtn {margin-top: 20px}div.wpcf7 img.ajax-loader{ margin-top:20px; position:absolute; }

.summary  {float: left; margin-top: 50px}
.images {float: left; margin-top: 50px}
#sidebar {display: block}
.variations .tr {border: none}


/*================================================
====================THE STORE=====================
================================================*/

/*----------------PRODUCTS------------------------*/
.product .variations_form {
	background-color: none; }
.product .variations {
	border: 0; margin: 0; }

.product td { padding-bottom: 20px; 
	border-width: 0; }
.product tr { border-width: 0; }
.product .label {
	border-radius: 0;
	border: 0;
	color: #555;
	height: 20px;
 	padding: 20px 20px 20px 0; 
	outline: 0;
	font-size: 16px; }

.product .single_add_to_cart_button {
	font-family: proxima-nova, sans-serif;
	width: 157px;
	height: 41px;
	background-color: lightgrey;
	border-radius: 8px;
	font-weight: 600;
	text-transform: uppercase;
	color: #555;
	letter-spacing: 1px;
	border: none;
	font-size: 15px; }

.product .quantity {
	margin: 20px 0; }

.product .qty {
	font-family: proxima-nova, sans-serif;
	width: 70px;
	height: 36px;
	padding: 0px 15px;
	font-size: 15px;
	color: #686F72;
	background-color: white;
	border: 2px solid grey;
	border-radius: 8px;
	box-shadow: none; }

.quantity:before { content: "Quantity"; color: #555;
	font-size: 16px; width:71px; padding-right: 11px; height: 100px; }

.product .variations select {
	color: #686F72;
	background-color: white;
	height: 36px;
	width: auto;
	border: 2px solid #686F72;
	font-size: 16px;
	font-family: proxima-nova;
	padding: 10px }


/*---------------------PRODUCT PAGE----------------------*/

/*.copy{ margin:56px 0px; }*/
.products { margin: 0; }
.products li { width:32%; display:inline-block; vertical-align:top; 
	margin-right: 1%; margin-bottom:45px; 
	position:relative; }
.products .price { font-size: 16px; }
.products .amount { padding-right: 5px; padding-left: 10px; }
.products li .button { 
	margin-left: 8px; 
	font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: bold;
	padding: 8px 18px; 
	border-radius: 10px; 
	background-color: #e1e1e1;
	border: none; }
.products li img { opacity: 1; }
.site-main .images { background-color: lightslategrey; height: 482px; width: 400px; margin-right: 60px; }
.thumbnails.columns-3 { height: 75px; overflow: hidden; margin-top: 7px; }
.thumbnails .zoom { display: inline-block; width: 32%; margin-right: 2%; }
.zoom.last { margin-right: 0; }

/*.portfolioItem.even{ margin-right:2%; }
.portfolioItemImg{ height:345px; background-position:center; background-size:cover;}
.portfolioItem span{ display:inline-block; margin-left:0px; margin-top:10px; font-size:14px; letter-spacing: .1px; color:#686F72;font-weight:400;}
.portfolioItem span.title{ margin-left:0px; margin-right: 10px; }
.portfolioItem span.subtitle{ font-style: 400; }*/

select.orderby { height: 36px; width: 350px; font-size: 18px; color: #555; font-family: Proxima Nova; border: 2px solid #555; background-color: ghostwhite; -webkit-border-radius: 20px; }

.site-main { max-width: 1200px; margin: 0 auto; }
.site-main .page-title { font-size: 32px; color: #555555; margin-bottom: 0px; padding-top: 40px; width: 350px; }
.site-main .woocommerce-result-count { font-size: 18px; color: #555; width: 350px; display: inline-block; }
.site-main .woocommerce-ordering { width: 350px; margin:0px; display: inline-block; margin-bottom: 40px; }

.site-main .products .woocommerce-LoopProduct-link h3 { margin-top: 15px; margin-bottom: 5px; margin-left: 10px; color: #555; }
.site-main .products li .button { float:right; position: relative; bottom: 22px; }
.site-main .products li { width: 31%; margin-right:2%; background-color: khaki; min-width: 255px; }
.site-main .related .products li { height: 260px; }
.related .products li img { height:190px; width: 100%; }
/*I wanted the images to be this big but just overflowhidden but I can't figure it outtttt*/


@media (max-width: 855px){
	.site-main .products li { width: 48%; }
}

@media (max-width: 575px){
	.site-main .products li { width: 100%; margin-right: 0px; }
}
@media (max-width: 1280px){
	.site-main { margin: 0px 20px; }
}

/*==============BLOG--ZOMBIE=============*/

.zom { font-size: 22px; text-transform: uppercase; font-weight: bold; }
.zom .rednum { color: red; }
#Zombie.zomb.post.text { margin-bottom: 30px; }
.zom.one { width: auto; display: inline-block; }
.zom.two { width: auto; display: inline-block; position: relative; left: -140px; top: 7px; }
.zom.three { width: auto; display: inline-block; }
.zom.four { width: auto; display: inline-block; margin-bottom: 80px; padding-left:0; position:static; bottom: 0; }
.zom.five { width: auto; display: inline-block; position: relative; top: 65px; }
.zom.six { width: auto; display: inline-block; }
.zom.seven { width: 560px; display: inline-block; transform: translate(0px,10px); }

.zomb.eye { display: inline; height: 130px; width: auto; position: relative; top: -48px; left: -10px; }
.zomb.head { display: inline; height: 200px; width: auto; }
.zomb.pinhand { display: inline; height: 200px; width: auto; }
.zomb.pinhand.right { padding-left:10px; position: static; transform: translate(0px,0px); }
.zomb.pinhand.left { position: static; transform: translate(0px,0px); }
.zomb.pinhand.mobile { display: none; }
.zomb.box { display: inline; height: 170px; width: auto; float: left; }
.zomb.flex { display: inline; height: 170px; width: auto; padding-bottom:15px; }
.zomb.help { display: inline; height: 310px; width: auto; float:right; padding-left: 45px; padding-bottom: 20px; }
.zomb.walk { display: inline; height: 300px; width: auto; padding-bottom: 20px; }

.zomzom { margin:50px 0px 50px 0px; }

.caption { font-size: 16px; margin: 10px 0px 60px 0px; font-weight: 200; }

@media (max-width: 1150px){
	.zom.five { width: 440px; }
}
@media (max-width: 1147px){
	.zom.two { width:460px; }
}
@media (max-width: 1035px){
	.zom.three { width:330px; }
}
@media (max-width: 1005px){
	.zomb.eye { position: static; }
}
@media (max-width: 993px){
	.zom.four { width:345px; margin-bottom: 50px; }
}
@media (max-width: 993px){
	.zom.seven { width: 420px; transform: translate(0px, 30px); }
}
@media (max-width: 975px){
	.zom.two { width:340px; }
}
@media (max-width: 857px){
	.zom.two { width: auto; display: block; position: static; margin-top: 15px; }
}
@media (max-width: 845px){
	.zom.three { padding-bottom: 90px; }
	.zomb.pinhand.right { position: absolute; transform: translate(-99px,0px); }
}
@media (max-width: 835px){
	.zom.five { width:360px; top: 70px; }
	.zom.seven { width: 302px; transform: translate(0px, 50px); }
}
@media (max-width: 793px){
	.zom.four { padding-left: 20px; margin-bottom: 20px; position: relative; bottom: 20px; width: 265px; }
}
@media (max-width: 589px){
	.zomb.flex { display: block; margin: auto; }
	.zom.five { position:static; width: auto; }
}
@media (max-width: 565px){
	.zomb.box { float:none; display: block; margin: auto; }
	.zom.four { padding-left: 0px; margin-bottom: 20px; position: static; bottom: 0px; width: auto; }
}
@media (max-width: 565px){
	.zomb.walk { display: block; margin: auto; height: 240px; }
	.zom.seven { width: auto; transform: translate(0px, 0px); }
}
@media (max-width: 510px){
	.giphy-embed { width: 100%; height: auto; }
}
@media (max-width: 505px){
	.zom.three { padding-bottom: 30px; margin-left: 40px; }
	.zomb.pinhand { height: 130px; }
	.zomb.pinhand.right { position: absolute; transform: translate(-92px,19px); }
	.zomb.pinhand.left { position: absolute; transform: translate(-51px,0px); }
}
@media (max-width: 480px){
	.zomb.help { padding-left: 0px; display: block; margin: auto; float: none; height: 250px; transform: translate(-25px,0px); }
}
@media (max-width: 390px){
	.zom.three { margin-left:25px; }
	.zomb.pinhand { height: 138px; }
	.zomb.pinhand.right { transform: translate(-120px,21px); }
	.zomb.pinhand.left { transform: translate(-53px,7px); }
}
@media (max-width: 384px){
	.zom.three { width: auto; display: block; margin-left: 0; padding-bottom: 0; }
	.zomb.pinhand { height: 138px; }
	.zomb.pinhand.right { display: none; }
	.zomb.pinhand.left { display: none; }
	.zomb.pinhand.mobile { display: block; margin: auto; }
}

@media (max-width: 340px){
	.zomb.head { width: auto; height: auto; }
}



/*------- sac facts ------------*/
.sacfacts { text-align:center; width:100%; }


/*------- Increase Sales Blog --------*/
.nop { display:inline-block; vertical-align:top; }