/*
Theme Name: Hinkle2015
Author: Mike Hollos
Author URI: http://www.zodiacprinting.com
Version: 1.0
*/
@font-face {
    font-family: 'open-sans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open-sans';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
:focus{ outline-color:transparent; outline-style:none; }
body{ margin:0; padding:0; color:#4f4a43; font:14px 'open-sans', Arial, sans-serif; line-height:1.5; background:#83392d url(images/bg-diagonal.png); }
a{ color:#83392d; font:bold 14px 'open-sans', Arial, sans-serif; }
a:hover{ color:#e68319; text-decoration:underline; }
img{ border:0; }
.buttonHover:hover{ filter:brightness(115%); -webkit-filter:brightness(115%); -moz-filter:brightness(115%); -o-filter:brightness(115%); -ms-filter:brightness(115%); }
#container{ width:100%; max-width:1230px; margin:0 auto; }
#containerBackground{ position:absolute; width:100%; max-width:1230px; background:url(images/bg-shadow.png) repeat-y top center; margin:0; padding:0; }
#pageTitle{ width:100%; max-width:1120px; background:#5f859d url(images/bg-diagonal-blue.png); }
#pageTitle h1{ margin:0; padding:20px 0 20px 20px; color:#fff; font:22px 'open-sans', Arial, sans-serif; }
#pageContent{ width:96%; max-width:1080px; margin:40px auto 0; }
#pageContent h2{ margin:25px 0 10px; color:#83392d; font:22px 'open-sans', Arial, sans-serif; }
#pageContent span{ color:#83392d; font:bold 14px 'open-sans', Arial, sans-serif; }
#pageContentBottom{ clear:both; width:100%; max-width:1120px; margin:40px 0; border-bottom:3px solid #bdd8e9; }
@media (min-width: 1201px) {
  #containerPadding{ width:91.0569%; /*1230px x 0.910569 = 1120px*/ margin:0 auto; }
}
@media (max-width: 1200px) {
  #containerPadding{ width:98%; max-width:1120px; margin:0 auto; }
}
@media (min-width: 761px) {
  #pageContent .pageContentImage{ float:right; width:90%; max-width:400px; margin:10px; border:6px solid #fff; }
}
@media (max-width: 760px) {
  #pageContent .pageContentImage{ float:none; width:90%; max-width:400px; margin:10px; border:6px solid #fff; }
}

/* -----------------------------------*/
/* ---------->>> HEADER <<<-----------*/
/* -----------------------------------*/
#header{ width:100%; max-width:1120px; }
#header:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
#logo{ display:inline-block; float:left; width:75%; max-width:300px; margin:32px 0 26px 0; }
#logo img{ width:100%; }
#headerContent{ display:inline-block; float:right; max-width:820px; padding:15px 0; text-align:right; }
#phoneContact{ display:inline-block; }
#phoneContact p{ display:inline-block; padding:0 20px 0 0; color:#83392d; font:15px 'open-sans', Arial, sans-serif; vertical-align:middle; }
#phoneContact img{ margin:0 0 0 6px; }
@media (min-width: 1201px) {
  #mobileNavButton{ display:none; }
  #phoneContact img{ display:inline-block; vertical-align:middle; }
  #nav{ display:block !important; margin:0; padding:0; text-align:center; }
  #nav ul{ margin:15px 0 0 0; padding:0; list-style-type:none;}
  #nav li{ display:inline-block; list-style-type:none; padding:0 12px 0 24px; background:url(images/nav-divider.png) no-repeat center left; }
  #nav li.first{ padding:0 12px 0 0; background:none; }
  #nav li.last{ padding:0 0 0 24px; }
  #nav li a{ color:#4c4e39; font:bold 15px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #nav li a:hover{ color:#e68319; text-decoration:none; }
}
@media (min-width: 980px) and (max-width: 1200px) {
  #mobileNavButton{ display:none; }
  #phoneContact img{ display:inline-block; vertical-align:middle; }
  #nav{ display:block !important; margin:0; padding:0; text-align:center; }
  #nav ul{ margin:15px 0 0 0; padding:0; list-style-type:none;}
  #nav li{ display:inline-block; list-style-type:none; padding:0 12px 0 24px; background:url(images/nav-divider.png) no-repeat center left; }
  #nav li.first{ padding:0 12px 0 0; background:none; }
  #nav li.last{ padding:0 0 0 24px; }
  #nav li a{ color:#4c4e39; font:bold 15px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #nav li a:hover{ color:#e68319; text-decoration:none; }
}
@media (min-width: 690px) and (max-width: 979px) {
  #phoneContact p, #nav{ display:none; }
  #mobileNavButton{ display:inline-block; }
  #mobileNavButton img{ width:48px; margin:32px 0 0 0; vertical-align:middle; }
  #phoneContact img{ display:inline-block; margin:32px 6px 0 0; vertical-align:middle; }
  #nav{ display:none; width:200px; position:absolute; top:100px; right:8px; margin:0; padding:0; text-align:left; border:3px solid #83392d; background:#fff; }
  #nav ul{ margin:0; padding:0; list-style-type:none;}
  #nav li{ display:block; list-style-type:none; border-bottom:1px solid #bdd8e9; background:none; }
  #nav li.first{ background:none; }
  #nav li.last{ border-bottom:none; background:none; }
  #nav li a{ display:block; padding:15px; color:#4c4e39; font:bold 15px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #nav li a:hover{ color:#e68319; text-decoration:none; background:#fff6e9; }
}
@media (max-width: 689px) {
  #phoneContact, #nav{ display:none; }
  #mobileNavButton{ display:inline-block; }
  #mobileNavButton img{ width:48px; margin:32px 0 0 0; vertical-align:middle; }
  #phoneContact img{ display:none; }
  #nav{ display:none; width:98%; position:absolute; top:108px; right:0px; margin:0; padding:0; text-align:center; border:3px solid #83392d; background:#fff; }
  #nav ul{ margin:0; padding:0; list-style-type:none;}
  #nav li{ display:block; list-style-type:none; border-bottom:1px solid #bdd8e9; background:none; }
  #nav li.first{ background:none; }
  #nav li.last{ border-bottom:none; background:none; }
  #nav li a{ display:block; padding:15px; color:#4c4e39; font:bold 15px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #nav li a:hover{ color:#e68319; text-decoration:none; background:#fff6e9; }
}

#nav li.portal-link a { text-transform: uppercase; color: #e68319; }
#nav li.portal-link a:hover { color: #ffbc49; }

/* -----------------------------------*/
/* ---------->>> FOOTER <<<-----------*/
/* -----------------------------------*/
#footer{ width:100%; max-width:1120px; margin:0 0 25px 0; }
#footerContent li.last{ padding:0; }
#footerContent li a:hover{ color:#e68319; text-decoration:none; }
#copyright a{ color:#4f4a43; font:12px 'open-sans', Arial, sans-serif; text-decoration:none; }
#copyright a:hover{ color:#e68319; text-decoration:underline; }
div.fb-like-box{ width:100%; overflow:hidden; }
@media (min-width: 1201px) {
  #footerContent{ display:inline-block; width:70%; margin:0; padding:0; }
  #copyright{ display:inline-block; margin:25px 0; color:#4f4a43; font:12px 'open-sans', Arial, sans-serif; vertical-align:middle; }
  #copyright p{ display:block; margin:0; }
  #footerContent ul{ margin:15px 0; padding:0 0 25px 0; list-style-type:none; border-bottom:1px solid #bdd8e9; }
  #footerContent li{ display:inline-block; list-style-type:none; padding:0 25px 0 0; }
  #footerContent li a{ color:#4f4a43; font:bold 13px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #footerLogos{ display:inline-block; margin:0; vertical-align:middle; }
  #facebookAPI{ display:inline-block; float:right; width:300px; height:190px; background:#fff; border-right:6px solid #fff; }
  #footerLogos img{ margin:0 25px 0 0; vertical-align:middle; }
}
@media (min-width: 980px) and (max-width: 1200px) {
  #footerContent{ display:inline-block; width:65%; margin:0; padding:0; }
  #footerContent li a{ color:#4f4a43; font:bold 13px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #copyright{ display:inline-block; margin:15px 0; color:#4f4a43; font:12px 'open-sans', Arial, sans-serif; vertical-align:middle; }
  #copyright p{ display:inline-block; margin:0; }
  #footerContent ul{ margin:15px 0; padding:0 0 25px 0; list-style-type:none; border-bottom:1px solid #bdd8e9; }
  #footerContent li{ display:inline-block; list-style-type:none; padding:0 25px 0 0; }
  #footerLogos{ display:inline-block; margin:0; vertical-align:middle; }
  #facebookAPI{ display:inline-block; float:right; width:300px; height:190px; background:#fff; border-right:6px solid #fff; }
  #footerLogos img{ margin:0 15px; vertical-align:middle; }
}
@media (min-width: 615px) and (max-width: 979px) {
  #footerContent{ display:block; width:100%; margin:0; padding:0; text-align:center; }
  #copyright{ display:inline-block; margin:15px 0; color:#4f4a43; font:12px 'open-sans', Arial, sans-serif; vertical-align:middle; }
  #copyright p{ display:inline-block; margin:0; }
  #footerContent ul{ margin:15px 0; padding:0 0 25px 0; list-style-type:none; border-bottom:1px solid #bdd8e9; }
  #footerContent li{ display:inline-block; list-style-type:none; padding:0 15px 0 0; }
  #footerContent li a{ color:#4f4a43; font:bold 13px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #footerLogos{ display:inline-block; margin:0; vertical-align:middle; }
  #facebookAPI{ display:block; float:none; width:95%; height:190px; margin:0 auto; background:#fff; border-right:6px solid #fff; }
  #footerLogos img{ margin:0 15px; vertical-align:middle; }
}
@media (max-width: 614px) {
  #footerContent{ display:block; width:100%; margin:0; padding:0; text-align:center; }
  #copyright{ display:inline-block; margin:15px 0; color:#4f4a43; font:12px 'open-sans', Arial, sans-serif; vertical-align:middle; }
  #copyright p{ display:inline-block; margin:0; }
  #footerContent ul{ margin:15px 0; padding:0; list-style-type:none; border-bottom:1px solid #bdd8e9; }
  #footerContent li{ display:block; list-style-type:none; margin:0; padding:0; border-top:1px solid #bdd8e9; }
  #footerContent li a{ display:block; padding:10px 0; color:#4f4a43; font:bold 13px 'open-sans', Arial, sans-serif; text-decoration:none; }
  #footerLogos{ display:inline-block; margin:0; vertical-align:middle; }
  #facebookAPI{ display:block; float:none; width:95%; height:190px; margin:0 auto; background:#fff; border-right:6px solid #fff; }
  #footerLogos img{ display:block; margin:15px auto; vertical-align:middle; }
}

/* -----------------------------------*/
/* ----->>> HOMEPAGE BANNERS <<<------*/
/* -----------------------------------*/
#banner{ width:100%; max-width:1120px; }
#banner img{ width:100%; }
#smallBanner1 img, #smallBanner2 img{ width:100%; max-width:400px; }
@media (min-width: 1201px) {
  #smallBanners{ width:100%; max-width:840px; margin:-80px auto 0; }
  #smallBanner1{ display:inline-block; padding:0 15px 0 0; }
  #smallBanner2{ display:inline-block; padding:0 0 0 15px; }
}
@media (min-width: 980px) and (max-width: 1200px) {
  #smallBanners{ width:100%; max-width:840px; margin:-80px auto 0; }
  #smallBanner1{ display:inline-block; padding:0 15px 0 0; }
  #smallBanner2{ display:inline-block; padding:0 0 0 15px; }
}
@media (min-width: 615px) and (max-width: 979px) {
  #smallBanners{ width:100%; max-width:840px; margin:-80px auto 0; text-align:center; }
  #smallBanner1{ display:inline-block; width:45%; padding:0 10px; }
  #smallBanner2{ display:inline-block; width:45%; padding:0 10px; }
}
@media (max-width: 614px) {
  #smallBanners{ width:85%; max-width:840px; margin:-30px auto 10px; text-align:center; }
  #smallBanner1{ display:block; width:100%; padding:0; }
  #smallBanner2{ display:block; width:100%; padding:0; }
}

/* -----------------------------------*/
/* ----->>> HOMEPAGE CONTENT <<<------*/
/* -----------------------------------*/
#headline{ width:100%; max-width:925px; margin:35px auto; text-align:center; }
#headline h1{ margin:0; color:#f3942e; font:22px 'open-sans', Arial, sans-serif; }
#aboutText{ width:95%; margin:0 auto; padding:15px 0; }
#aboutText .slogan{ width:90%; max-width:440px; height:auto; }
#aboutText a{ color:#83392d; font:bold 14px 'open-sans', Arial, sans-serif; text-decoration:none; }
#aboutText a:hover{ color:#e68319; text-decoration:underline; }
#aboutText li { margin:5px 0; }
#aboutText li a{ color:#e68319; font:14px 'open-sans', Arial, sans-serif; text-decoration:underline; }
#aboutText li a:hover{ color:#83392d; text-decoration:underline; }
@media (min-width: 1201px) {
  #aboutContent{ margin:25px auto; padding:0; background:#fff url(images/hinkle-roofing-truck-1958.jpg) no-repeat bottom right; border:6px solid #fff; }
  #aboutText p{ width:60%; }
  #aboutText p.first{ width:90%; }
}
@media (min-width: 980px) and (max-width: 1200px) {
  #aboutContent{ margin:25px auto; padding:0; background:#fff url(images/hinkle-roofing-truck-1958.jpg) no-repeat bottom right; border:6px solid #fff; }
  #aboutText p{ width:60%; }
  #aboutText p.first{ width:90%; }
}
@media (min-width: 615px) and (max-width: 979px) {
  #aboutContent{ margin:25px auto; padding:0 0 150px 0; background:#fff url(images/hinkle-roofing-truck-1958.jpg) no-repeat bottom right; border:6px solid #fff; }
  #aboutText p{ width:90%; }
}
@media (max-width: 614px) {
  #aboutContent{ margin:25px auto; padding:0 0 200px 0; background:#fff url(images/hinkle-roofing-truck-1958.jpg) no-repeat bottom right; border:6px solid #fff; }
  #aboutText p{ width:90%; }
}

/* -----------------------------------*/
/* ----->>> PROJECT GALLERY <<<-------*/
/* -----------------------------------*/
#projectGallery img{ margin:20px; border:3px solid #fff; }
#projectGallery img:hover{ border:3px solid #e68319; }

/* -----------------------------------*/
/* ------->>> CONTACT PAGE <<<--------*/
/* -----------------------------------*/
#contactInfo{ margin:0; vertical-align:top; }
#contactInfo p{ margin:20px 0; }
#contactInfo span{ display:block; font-weight:bold; }
#contactFormContainer{ margin:20px 0; background:#5f859d; vertical-align:top; }
#contactForm{ width:90%; margin:0 auto; padding:10px 0; }
#contactForm p{ text-align:left; }
#contactForm input[type="text"], #contactForm input[type="email"], #contactForm input[type="tel"]{ width:90%; height:35px; padding:0 0 0 10px; font:14px Arial, sans-serif; border:none; }
#contactForm textarea { display:inline-block; width:90%; height:100px; padding:5px 0 0 10px; font:14px Arial, sans-serif; border:none; }
#contactForm input[type=submit]{ width:180px; height:30px; color:#fff; font:bold 14px 'open-sans', Arial, sans-serif; background:#83392d; border:none; border-radius:6px; cursor:pointer; }
#contactForm input[type=submit]:hover{ background-color:#a8402f; }
#contactForm p.sendButton{ text-align:right; margin:20px 46px 20px 0; }
#contactForm div.wpcf7-validation-errors{ margin:2px 0 0; padding:10px; color:#4f4a43; font-size:11px; font-weight:bold; line-height:1.2; text-transform:uppercase; background:#ffff33; }
#contactForm span.wpcf7-not-valid-tip{ margin:2px 0 0; color:#ffff33; font-size:11px; font-weight:bold; text-transform:uppercase; }
#contactForm div.wpcf7-mail-sent-ok{ margin:2px 0 0; color:#4f4a43; font-size:11px; font-weight:bold; text-transform:uppercase; background:#cbefac; border:none; }
#contactForm div.wpcf7-validation-errors{ border:none; }
@media (min-width: 1025px) {
  #contactInfo{ display:inline-block; width:48%; }
  #contactFormContainer{ display:inline-block; float:right; width:48%; max-width:410px; }
  #contactForm input[type="text"], #contactForm input[type="email"], #contactForm input[type="tel"], #contactForm textarea{ max-width:346px; }
}
@media (min-width: 481px) and (max-width: 1024px) {
  #contactInfo{ display:block; width:100%; }
  #contactFormContainer{ display:block; width:100%; }
}
@media (max-width: 480px) {
  #contactInfo{ display:block; width:100%; }
  #contactFormContainer{ display:block; width:100%; }
}