/* CSS Document */ button:focus { outline:none !important; } .stButton .stLarge:hover {background-position:0px !important;} * {box-sizing: border-box; background-repeat:no-repeat;} /* ----- HTML STYLES ----- */ /* undo default styling of common (X)HTML browsers */ :link,:visited { text-decoration:none } ul,ol { list-style:none } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;} p {font-size:18px; line-height:1.5em;} p, li, a, input, select {font-family: 'Montserrat', sans-serif; font-weight:300;} p a {} h1,h2,h3,h4,h5,h6, h1 a, h2 a, h3 a ,h4 a, h5 a, h6 a {font-weight:700; font-family: 'Montserrat', sans-serif; line-height:1.3em;} a img,:link img,:visited img { border:none; } address {font-style:normal;} .ErrorLabel {display:none;} input {-webkit-appearance: none;} .videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; } .videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;} #container {position: relative; max-width: 100%; margin: 0px auto; text-align: left;} #container>main, #container>main>div, header, footer {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;} #container #testimonials>div {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;} .wrapper {margin: 0 auto; width: 1400px; max-width: 100%;} .content {float: left; width: 90%; max-width: 100%; margin:0 5%; position:relative;} a.skip-link {display:none;} img.years25 {position:absolute; bottom:-50px; left:0px; z-index:300;} img.mask {width:100%; height:10px; position:absolute; z-index:10;} .margin {padding:40px 0;} .topMargin {padding:40px 0 0 0;} .red {background-color:#b22f44;} .grey {background-color:#555555;} .greyMedium {background-color:#888888;} .greyLight {background-color:#e1e2e1;} .imageDivider {height:200px; background-image:url(/wp-content/themes/electrio/assets/image-banner.jpg); background-size:cover; background-position:center center;} .copy.quarter {margin-bottom:50px; width:100%;} .copy.quarter:last-child {margin-bottom:0px;} .copy {text-align:left; float:left;} .copy.white {color:#ffffff;} .copy.marginTop {margin-top:40px;} .copy.large p {font-size:22px;} .copy p {font-size:16px; margin-bottom:20px;} .copy p:last-child {margin-bottom:0px;} .copy p a {color:#b22f44;} .copy p a:hover {text-decoration:underline;} .copy.white p a {color:#fff; font-weight:bold;} .copy p a:hover {text-decoration:underline;} .copy ul {margin-bottom:20px;} .copy ul li {font-size:16px; line-height:1.5em; list-style-type:disc; margin-left:20px; margin-bottom:5px;} .copy ul li ul {margin-top:5px; margin-bottom:0px;} .copy li a {color:#b22f44;} .copy li a:hover {text-decoration:underline;} .copy img {margin-bottom:20px;} .copy a.readMore {clear:left; display:inline-block; color:#b22f44; font-weight:700; } h1, h2, h1 a, h2 a {font-weight:700; text-transform:none; font-family: 'Montserrat', sans-serif; line-height:1.3em;} h3, h4, h5, h6, h3 a ,h4 a, h5 a, h6 a {font-weight:300; text-transform:none; font-family: 'Montserrat', sans-serif; line-height:1.3em;} .copy h1 {margin-bottom:15px;} .copy h2 {font-size:22px; padding-bottom:30px; margin-bottom:30px; background-image:url(/wp-content/themes/electrio/assets/divider.png); background-position: bottom left;} .copy h2 span {color:#888888;} .copy h3 {font-weight:bold; font-size:22px; margin-bottom:20px; padding-bottom:20px; background-image:url(/wp-content/themes/electrio/assets/divider.png); background-position: bottom left;} .copy h5 {font-size:16px; font-weight:300; margin-bottom:20px; color:#b22f44;} .copy a.readmore {display:inline-block; text-transform:none; width:42px; height:42px; background-size:cover; background-image:url(/wp-content/themes/electrio/assets/read-more.png);} .copy a.readmore:hover {animation:spin 0.5s linear 1; background-image:url(/wp-content/themes/electrio/assets/read-more.png);} .copy p a.phone {font-weight:300; color:#fff; font-size:20px; background-image:url(/wp-content/themes/electrio/assets/icon-phone.png); background-position:left center; background-size:25px auto; padding-left:40px; margin:0 40px 20px 0; display: inline-block;} .copy p a.email {font-weight:300; color:#fff; font-size:20px; background-image:url(/wp-content/themes/electrio/assets/icon-email.png); background-position:left center; background-size:25px auto; padding-left:40px; display: inline-block;} .copy p a.phone:hover {text-decoration:none;} .copy p a.email:hover {text-decoration:none;} img.serviceLogo {display:none;} @media only screen and (min-width: 768px) { img.years25 {position:absolute; bottom:-48px; left:0px; z-index:300;} .margin {padding:50px 0;} .imageDivider {height:344px;} .copy.quarter {float:left; width:50%; padding-right:5%;} .copy.quarter:nth-child(odd) {clear:left;} .copy {text-align:left;} .copy.wide {width:100%;} .copy h2 {font-size:40px; background-position: bottom left;} .copy p {font-size:18px;} .copy.large p {font-size:32px;} .copy.first p:first-of-type {font-size:22px; line-height:1.4em;} .copy.large p {font-size:32px;} .copy p a.phone {font-size:32px; background-size:35px auto; padding-left:50px; margin:20px 60px 0 0; line-height:40px;} .copy p a.email {font-size:32px; background-size:35px auto; padding-left:50px; margin:20px 0 0 0; line-height:40px;} .red .copy h3 {font-size:40px; margin-bottom:40px;} .red .copy p {font-size:30px;} } @media only screen and (min-width: 1024px) { .margin {padding:50px 0;} .copy.quarter {width:25%; padding-right:5%; margin-bottom:0px;} .copy.quarter:nth-child(odd) {clear:none;} .copy {width:75%;} } @media only screen and (min-width: 1280px) { .margin {padding:80px 0;} .copy.wide {width:100%;} .copy.wide p {width:65%;} .copy.wide h2 {width:65%;} .copy.wide h3 {width:65%;} .copy.wide ul {width:65%;} .copy.first p:first-of-type {width:100%;} .topMargin {padding:80px 0 0 0;} .copy h2 {background-position: bottom left;} } @media only screen and (min-width: 1600px) { img.serviceLogo {display:block; -webkit-filter: brightness(1000%); filter: brightness(1000%); position:absolute; left:-120px;} } .fadeIn {position: relative; -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0.3s; -webkit-animation-fill-mode: forwards;} @-webkit-keyframes fadeIn {from {opacity:0; top:50px; } to {opacity:1; top:0px; }} .fader {opacity:0;} /* ----- HEADER STYLES ----- */ /* ----- HEADER STYLES ----- */ /* ----- HEADER STYLES ----- */ header {text-align:center; z-index: 200;} header a.logo {float:left; margin-bottom:10px; background-image:url(/wp-content/themes/electrio/assets/electrio-logo.png); margin-top:0px; display:block; width:188px; height:45px; background-size:contain; background-repeat:no-repeat;} .page-template-homepage header {position:absolute;} .page-template-homepage header a.logo {background-image:url(/wp-content/themes/electrio/assets/electrio-logo-white.png);} p.phone {margin-bottom:15px;} p.phone a {font-weight:700; color:#888888; margin-bottom:15px;} .page-template-homepage p.phone a {color:#ffff;} .page-template-homepage #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {color:#fff;} .page-template-homepage #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {color:#fff;} @media only screen and (min-width: 768px) { header {height:115px;} header .content {height:115px;} header a.logo {margin-top:37px;} p.phone {float:right; padding:10px 0px 0px 0; margin-bottom:0;} #mega-menu-wrap-menu-1 {margin-top:15px;} } @media only screen and (min-width: 1280px) { #mega-menu-wrap-menu-1 {margin-top:0px;} } /* ----- BANNER STYLES ----- */ /* ----- BANNER STYLES ----- */ /* ----- BANNER STYLES ----- */ .banner.cycle-slide-active .image {transform: scale(1.2);} #banner {height:360px;} #banner .content {height:360px;} #banner h1 {text-transform:none; background-color:transparent; font-size:32px; width:100%; padding:0px; bottom:110px;} #homeBanner {height:600px; z-index:1; overflow:hidden;} #homeBanner .cycle-slideshow {float:left; width: 100%; margin:0;} #homeBanner .cycle-slideshow .banner {height:600px; position:relative; width:100%;} #homeBanner .cycle-slideshow .banner .image {height:600px; position: absolute; background-size: cover; background-position: center center; transition: transform 6s ease; width:100%; z-index:-100; } #homeBanner .cycle-slideshow .banner .content {height:600px;z-index:100;} #homeBanner .cycle-slideshow .banner .content .message {position:absolute; top:40%; float:left; z-index:300;} #homeBanner .cycle-slideshow .banner h1 {display:block; color:#ffffff; font-size:26px; margin-bottom:40px;} #homeBanner .cycle-slideshow .banner a {background-image:url(/wp-content/themes/electrio/assets/read-more-white.png); background-position:left center; padding-left:80px; color:#fff; font-size:18px; line-height:42px; height:42px; display:block;} #homeBanner .scroller-pager {position:absolute; bottom:80px; z-index:150;} #homeBanner .scroller-pager span {cursor:pointer; display:block; width:20px; height:20px; border:1px solid #fff; border-radius:20px; float:left; color:transparent; margin-right:10px;} #homeBanner .scroller-pager span.cycle-pager-active {background-color:#fff;} #banner {height:360px; background-size:cover; background-position:center center; position:relative; width:100%;} #banner .content {height:360px;} #banner h1 {display:block; color:#fff; text-transform:none; font-size:32px; width:100%; padding:0px; position:absolute; bottom:110px;} @media only screen and (min-width: 768px) { #banner h1 {font-size:50px; width:75%; bottom:160px;} #banner {height:460px;} #banner .content {height:460px;} #homeBanner {height:100vh;} #homeBanner .cycle-slideshow .banner {height:100vh;} #homeBanner .cycle-slideshow .banner .image {height:100vh;} #homeBanner .cycle-slideshow .banner .content {height:100vh;} #homeBanner .cycle-slideshow .banner h1 {width:80%; font-size:32px; } #homeBanner .cycle-slideshow .banner a {font-size:30px;} } @media only screen and (min-width: 1024px) { #homeBanner .cycle-slideshow .banner h1 {width:70%; font-size:50px;} } @media only screen and (min-width: 1280px) { } /* ----- FORM STYLES ----- */ /* ----- FORM STYLES ----- */ /* ----- FORM STYLES ----- */ .spacer {float:left; width:100%; margin-bottom:20px;} .spacer input[type=text] {width:100%; padding:10px; color:#888888; font-size:18px;} .spacer textarea {padding:10px; width:100%; height:164px; color:#888888; font-size:18px; font-family: 'Montserrat', sans-serif; resize:none; border:none;} #contactForm input[type=submit] {cursor:pointer; float:left; display:inline-block; clear:both; background-color:#ffffff; color:#b22f44; font-size:18px; text-transform:uppercase; padding:12px 40px; font-weight:700;} #contactForm input[type=submit]:hover {background-color:#555; color:#FFF;} #contactForm {float:left; width:100%; margin-top:40px;} #contactForm .newsletter {border:1px solid #ffffff; padding:15px;} #contactForm .newsletter p { color:#ffffff; font-size:16px; margin-bottom:10px;} #contactForm .newsletter p a {color:#ffffff; text-decoration:underline;} [type="radio"]:checked,[type="radio"]:not(:checked) {position: absolute; left: -9999px;} [type="radio"]:checked + label, [type="radio"]:not(:checked) + label {position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size:16px; margin-bottom:10px;} [type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 100%; background: #fff;} [type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after {content: ''; width: 12px; height: 12px; background: #555; position: absolute; top: 4px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;} [type="radio"]:not(:checked) + label:after {opacity: 0; -webkit-transform: scale(0); transform: scale(0);} [type="radio"]:checked + label:after {opacity: 1; -webkit-transform: scale(1); transform: scale(1);} @media only screen and (min-width: 768px) { .formLeft {float:left; width:47.5%;} .formRight {float:right; width:47.5%;} } /* ----- ACCREDITATION STYLES ----- */ /* ----- ACCREDITATION STYLES ----- */ /* ----- ACCREDITATION STYLES ----- */ #accreditations {margin:20px 0 40px 0;} #accreditations .cycle-slideshow, #accreditations .cycle-carousel-wrap {width:100%; float:left;} #accreditations .accreditation {width:100%; text-align:center;} #accreditations .accreditation img {max-width:80%;} @media only screen and (min-width: 768px) { #accreditations {margin:30px 0 50px 0;} #accreditations .accreditation {width:50%;} } @media only screen and (min-width: 1024px) { #accreditations {margin:40px 0 60px 0;} #accreditations .accreditation {width:25%;} } /* ----- FOOTER STYLES ----- */ /* ----- FOOTER STYLES ----- */ /* ----- FOOTER STYLES ----- */ footer .content {border-top:1px solid #fff; padding-top:30px;} footer .footerContact {float:left; margin-bottom:40px;} footer .content .copy:last-child {clear:left;} ul#menu-footernav {float:left; clear:both; margin-bottom:30px;} ul#menu-footernav li {margin-bottom:20px;} ul#menu-footernav li a {color:#fff; font-size:16px; font-weight:bold;} ul#menu-footernav li a:hover {color:#ffffff;} @media only screen and (min-width: 768px) { ul#menu-footernav {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;} ul#menu-footernav {float:left; clear:none; margin-bottom:100px;} footer .footerContact {float:right; max-width:400px;} } ul#menu-policynav {float:left; clear:both; margin-bottom:30px;} ul#menu-policynav li {margin-bottom:10px;} ul#menu-policynav li a {color:#fff; font-size:14px; } ul#menu-policynav li a:hover {color:#ffffff;} @media only screen and (min-width: 768px) { ul#menu-policynav li {float:left; margin-right:20px; padding-right:20px; border-right:1px solid #fff;} ul#menu-policynav li:last-child {border-right:0px; margin-right:0px; padding-right:0px;} } footer .copy p {color:#fff;font-size:14px; text-transform:none; text-align:left; line-height:2em;} /* ----- HOMEPAGE STYLES ----- */ /* ----- HOMEPAGE STYLES ----- */ /* ----- HOMEPAGE STYLES ----- */ #serviceLinks {float:left; margin-top:60px; position:relative;} #serviceLinks .cycle-slideshow, #serviceLinks .cycle-carousel-wrap {float:left; width:100%;} #serviceLinksList {float:left; width:100%; margin-top:80px;} #serviceLinksList .serviceLink {float:left;} .serviceLink {width:100%; text-align:left; vertical-align:top; margin-bottom:60px;} .serviceLink:last-child {margin-bottom:0px;} .serviceLink img {margin:0 0 15px 0; display:block;} .serviceLink img:first-child {margin:0 0 30px 0;} .serviceLink h3 {font-weight:700; margin-bottom:20px; font-size:22px;} .serviceLink p {margin-bottom:20px; white-space:normal;} .serviceLink a {display:inline-block; width:42px; height:42px; background-size:cover; background-image:url(/wp-content/themes/electrio/assets/read-more.png);} .serviceLink a:hover {animation:spin 0.5s linear 1;} @keyframes spin { 0% {transform: rotate(0);} 100% {transform: rotate(180deg); } } @media only screen and (min-width: 768px) { .serviceLink {width:47.5%; margin-left:5%; text-align:left; margin-bottom:40px; } #serviceLinksList .serviceLink:nth-child(2n+1) {clear:left; margin-left:0;} .serviceLink img {margin:0 0 20px 0;} .serviceLink img:first-child {margin:0 0 40px 0;} } @media only screen and (min-width: 1024px) { .serviceLink {width:33.333%; padding:0 2%; margin-left:0;} #serviceLinksList .serviceLink:nth-child(2n+1) {clear:none; } #serviceLinksList .serviceLink:nth-child(3n+1) {clear:left; } } @media only screen and (min-width: 1024px) { #serviceLinks .pagers {display:block;} #serviceLinks .pagers .prev {display: block; width: 26px; height: 46px; background-image: url(/wp-content/themes/electrio/assets/arrow-left-red.png); position:absolute; top:115px; left:-30px; background-repeat: no-repeat; cursor: pointer;} #serviceLinks .pagers .next {display: block; width: 26px; height: 46px; background-image: url(/wp-content/themes/electrio/assets/arrow-right-red.png); position:absolute; top:115px; right:-30px; background-repeat: no-repeat; cursor: pointer;} } @media only screen and (min-width: 1600px) { #serviceLinks .pagers .prev {left:-80px;} #serviceLinks .pagers .next {right:-80px;} } #testimonial .cycle-slideshow {display:flex; } .testimonialPreview img {margin-bottom:40px;} .testimonialPreview {width:100%;} .testimonialPreview p {color:#ffffff; font-size:18px; font-weight:300;} .testimonialPreview p strong {font-weight:700;} @media only screen and (min-width: 768px) { .testimonialPreview {width:80%; } .testimonialPreview p {font-size:24px;} } @media only screen and (min-width: 1024px) { .testimonialPreview {width:60%; } } #sectors .cycle-slideshow {width:100%; float:left;} #sectors .cycle-carousel-wrap {width:100%; float:left;} .noScroll .sectorPreview {float:left; margin-bottom:40px;} .sectorPreview {width:100%; vertical-align:top;} .sectorPreview img {margin:0 0 40px 0; display:block; filter: brightness(0%);} .sectorPreview h3 {font-weight:700; margin-bottom:20px; font-size:22px; white-space:normal;} .sectorPreview p {white-space:normal;} .sectorPreview a {display:inline-block; width:42px; height:42px; background-size:cover; background-image:url(/wp-content/themes/electrio/assets/read-more-white.png);} .sectorPreview a:hover {background-image:url(/wp-content/themes/electrio/assets/read-more-white-hover.png);} .greyMedium .sectorPreview {-webkit-filter: brightness(1000%); filter: brightness(1000%);} .greyMedium .sectorPreview h3 {color:#ffffff;} .greyMedium .sectorPreview p {color:#ffffff; } #sectorLinks {margin-top:50px; float:left; width:100%;} #sectorLinks .sectorPreview {float:left; margin-bottom:40px;} @media only screen and (min-width: 768px) { .sectorPreview {width:50%; padding:0 4% 0 0%; text-align:left;} .sectorPreview img {margin:0 0 40px 0;} #sectors .pagers {display:none;} #sectorLinks .sectorPreview:nth-child(odd) {clear:left;} #sectorLinks .sectorPreview:nth-last-of-type(-n+2) {margin-bottom:0px;} } @media only screen and (min-width: 1024px) { .noScroll .sectorPreview {width:33.33%; padding:0 4% 0 0;} .sectorPreview {width:33.33%; padding:0 2%;} #sectors .pagers {display:block;} #sectors .pagers .prev {display: block; width: 26px; height: 46px; background-image: url(/wp-content/themes/electrio/assets/arrow-left-red.png); position:absolute; top:90px; left:-30px; background-repeat: no-repeat; cursor: pointer;} #sectors .pagers .next {display: block; width: 26px; height: 46px; background-image: url(/wp-content/themes/electrio/assets/arrow-right-red.png); position:absolute; top:90px; right:-30px; background-repeat: no-repeat; cursor: pointer;} #sectorLinks .sectorPreview:nth-child(odd) {clear:none;} #sectorLinks .sectorPreview:nth-child(3n+1) {clear:left;} #sectorLinks .sectorPreview:nth-last-of-type(-n+3) {margin-bottom:0px;} } @media only screen and (min-width: 1280px) { .noScroll .sectorPreview {width:25%; padding:0 4% 0 0;} .sectorPreview {width:25%; padding:0 2%;} #sectors .pagers .prev {left:-80px;} #sectors .pagers .next {right:-80px;} #sectorLinks .sectorPreview:nth-child(3n+1) {clear:none;} #sectorLinks .sectorPreview:nth-child(4n+1) {clear:left;} #sectorLinks .sectorPreview:nth-last-of-type(-n+4) {margin-bottom:0px;} } /*#V2 SECTORS#*/ .sectorOverview {float:left; width:100%; padding-top:80px; margin:80px 0 0 0; filter: brightness(0%);} .sectorOverview:hover {filter: brightness(100%);} .sectorOverview h3 {font-size:25px; font-weight:bold; margin-bottom:20px;} .sectorOverview p {display:none; } .sectorOverview p.active {display:block;} .sectorOverview p a.readmore {cursor:pointer; margin-top:20px; display:inline-block; width:42px; height:42px; background-size:cover; background-image:url(/wp-content/themes/electrio/assets/read-more.png);} @media only screen and (min-width: 768px) { .sectorOverview {width:45%; margin:80px 0 0 5%;} .sectorOverview:nth-child(2n+1) {clear:left; margin:80px 0 0 0;} } @media only screen and (min-width: 1024px) { .sectorOverview {width:30%; margin:80px 0 0 5%;} .sectorOverview:nth-child(2n+1) {clear:none; margin:80px 0 0 5%;} .sectorOverview:nth-child(3n+1) {clear:left; margin:80px 0 0 0;} } /* ----- TESTIMONIALS STYLES ----- */ /* ----- TESTIMONIALS STYLES ----- */ /* ----- TESTIMONIALS STYLES ----- */ #testimonials .copy p {font-size:20px; color:#555555;} #testimonials .copy p.name {text-transform:uppercase; font-weight:700;} #testimonials .margin:nth-of-type(3n+1) {background-color:#888888;} #testimonials .margin:nth-of-type(3n+1) .copy p {color:#ffffff;} #testimonials .margin:nth-of-type(3n+2) {background-color:#e1e2e1;} @media only screen and (min-width: 768px) { #testimonials .copy p {font-size:24px;} } /* ----- CASE STUDY STYLES ----- */ /* ----- CASE STUDY STYLES ----- */ /* ----- CASE STUDY STYLES ----- */ #filters {float:left; width:100%; margin-top:30px;} #filters .filter {float:left; width:100%; margin-bottom:20px;} #filters .filter select {width:100%; font-weight:normal; font-size:16px; text-transform:none; padding:10px; color:#888888; border:1px solid #888888;} #filters .filter select option {font-weight:normal;} @media only screen and (min-width: 768px) { #filters .filter {float:left; width:45%; margin-right:5%; } } @media only screen and (min-width: 1024px) { #filters .filter {width:30%; margin-right:3.3333%;} } #caseStudyList {float:left; width:100%; margin-top:60px;} .caseStudyPreview {float:left; margin-bottom:60px;} .caseStudyPreview:last-child {margin-bottom:0px;} .caseStudyPreview .copy {width:100%;} .caseStudyPreview .image {width:100%; height:185px; margin-bottom:30px; overflow:hidden;} .caseStudyPreview .image a {width:100%; height:185px; background-size:cover; background-position:center center; display:block; transition: all 0.5s;} .caseStudyPreview .image a:hover {transform:scale(1.2);} .caseStudyPreview img {margin-bottom:20px;} .caseStudyPreview h2 {text-align:left; font-size:22px; margin-bottom:40px;} .caseStudyPreview .copy h3 {font-weight:normal; margin-bottom:5px; padding-bottom:0px; background-image:none;} @media only screen and (min-width: 768px) { .caseStudyPreview .image {height:270px;} .caseStudyPreview .image a {height:270px;} .caseStudyPreview {width:45%; margin-right:5%; padding-right:0px;} .caseStudyPreview:nth-child(2n+1) {clear:left;} .caseStudyPreview:nth-last-of-type(-n+2) {margin-bottom:0px;} .caseStudyPreview h2 {text-align:left; font-size:28px; background-position: bottom left;} } @media only screen and (min-width: 1024px) { .caseStudyPreview {width:30%; margin-right:3.3333%;} .caseStudyPreview.caseStudySingle {width:45%; margin-right:5%;} .caseStudyPreview:nth-child(2n+1) {clear:none;} .caseStudyPreview:nth-child(3n+1) {clear:left;} .caseStudyPreview:last-child {display:block;} #caseStudyFeed .caseStudyPreview {width:30%; margin-right:5%; padding-right:0%; clear:none; margin-bottom:0px;} #caseStudyFeed .caseStudyPreview:last-child {margin-right:0px;} } .caseStudy {float:left; width:100%;} .sideFilters {float:right; width:100%; margin-top:50px;} .sideFilters h3 {color:#000; font-size:16px; font-weight:700; padding-bottom:20px; margin-bottom:20px; background-image:url(/wp-content/themes/electrio/assets/divider.png); background-position: bottom left;} .sideFilters a {color:#000; font-size:16px; text-transform:none; display:block; margin-bottom:10px;} .sideFilters a:hover {color:#b22f44;} .caseStudy .image {margin-bottom:30px; height:320px; background-size:cover; background-position:center center;} .caseStudy .copy {width:100%;} .caseStudy img {margin-bottom:20px;} .caseStudy h3 {padding-bottom:0px; background-image:none;} @media only screen and (min-width: 768px) { .caseStudy {width:65%;} .sideFilters {width:30%; margin-top:0px;} .caseStudy .image {height:420px;} } .caseStudyPreviewList {float:left; margin-top:30px;} .caseStudyPreviewList .copy {width:100%;} .caseStudyPreviewList .image {width:100%; height:185px; margin-bottom:50px; overflow:hidden;} .caseStudyPreviewList .image a {width:100%; height:185px; background-size:cover; background-position:center center; display:block; transition: all 0.5s;} .caseStudyPreviewList .image a:hover {transform:scale(1.2);} .caseStudyPreviewList img {margin-bottom:10px;} .caseStudyPreviewList .copy h3 {font-weight:normal; margin:15px 0 5px 0; padding-bottom:0px; background-image:none;} @media only screen and (min-width: 768px) { .caseStudyPreviewList .image {height:270px;} .caseStudyPreviewList .image a {height:270px;} .caseStudyPreviewList {width:30%; margin-right:5%;} .caseStudyPreviewList:last-child {margin-right:0;} } #gallery {float:left; width:100%; margin:20px 0 30px 0;} #gallery a.gallery {float:left; width:48%; padding-top:48%; background-size:cover; background-repeat:no-repeat; margin:0 2% 2% 0;} @media only screen and (min-width: 640px) { #gallery a.gallery {width: 31.3333%; padding-top:31.3333%} } @media only screen and (min-width: 960px) { #gallery a.gallery {width:23%; padding-top:23%;} } /* ----- NEWS STYLES ----- */ /* ----- NEWS STYLES ----- */ /* ----- NEWS STYLES ----- */ /*#V2 NEWS# */ .newsLeft {width:100%; float:left; margin-top:40px;} .news {float:left; width:100%;} .news .copy {width:100%;} .news .image {float:left; width:100%; height:320px; background-size:cover; margin-bottom:30px; background-position:center center;} .news img {margin-bottom:20px;} .newsFilters {float:left; width:100%; } .newsFilter {margin-bottom:0px; margin-top:60px;} .newsFilter h3 {color:#000; font-size:16px; padding-bottom:20px; font-weight:700; margin-bottom:20px; background-image:url(/wp-content/themes/electrio/assets/divider.png); background-position: bottom left;} .newsFilter a {color:#000; font-size:16px; text-transform:none; display:block; margin-bottom:10px;} .newsFilter a:hover {color:#b22f44;} .newsPreview {float:left; margin-bottom:60px;} .newsPreview:last-child {margin-bottom:0px;} .newsPreview img {margin-bottom:20px;} .newsPreview .copy {width:100%;} .newsPreview .image {width:100%; height:185px; margin-bottom:30px; overflow:hidden; } .newsPreview .image a {display:block; height:185px; background-size:cover; background-position:center center; transition: all 0.5s;} .newsPreview .image a:hover {transform:scale(1.2);} .newsPreview h2 {text-align:left; font-size:22px; margin-bottom:40px;} .newsPreview h3 {font-weight:300; margin-bottom:5px; padding-bottom:0px; background-image:none;} @media only screen and (min-width: 768px) { .news .image {height:420px;} .newsPreview .image {height:270px;} .newsPreview .image a {height:270px;} .newsPreview {width:50%; padding-right:5%;} .newsPreview:nth-child(odd) {clear:left;} .newsPreview:nth-last-of-type(-n+2) {margin-bottom:0px;} .newsPreview h2 {font-size:28px; background-position: bottom left;} } @media only screen and (min-width: 1024px) { .newsLeft {width:65%;} .newsFilters {float:right; width:30%;} ..newsFilter {margin-bottom:60px; margin-top:0px;} } .pager {float:left; width:100%;} /* ----- ABOUT STYLES ----- */ /* ----- ABOUT STYLES ----- */ /* ----- ABOUT STYLES ----- */ #usps .cycle-slideshow {width:100%; float:left;} #usps .cycle-carousel-wrap {width:100%; float:left;} #usps .sectorPreview img {filter: brightness(100%);} @media only screen and (min-width: 768px) { #usps .pagers {display:none;} } @media only screen and (min-width: 1024px) { #usps .pagers {display:block;} #usps .pagers .prev {background-image:url(/wp-content/themes/electrio/assets/arrow-left-red.png);} #usps .pagers .prev {left:-40px;} #usps .pagers .next {background-image:url(/wp-content/themes/electrio/assets/arrow-right-red.png);} #usps .pagers .next {right:-40px;} } @media only screen and (min-width: 1280px) { #usps .pagers .prev {left:-80px;} #usps .pagers .next {right:-80px;} } /* ----- CONTACT STYLES ----- */ /* ----- CONTACT STYLES ----- */ /* ----- CONTACT STYLES ----- */ #map {height:400px;} @media only screen and (min-width: 768px) { #map {height:600px;} } /* ----- LOGIN STYLES ----- */ /* ----- LOGIN STYLES ----- */ /* ----- LOGIN STYLES ----- */ .logon-page-background {float:left; width:100%;} .logon-panel {float:left; margin-bottom:20px; width:100%;} .logon-panel .form-group {float:left; clear:left; margin-bottom:20px; width:100%;} .logon-panel label {color:#555555; margin-top:5px; float:left; margin-right:20px; font-weight:700; text-transform:uppercase; font-family: 'Montserrat', sans-serif; } .logon-panel input[type=text] {float:left; border:1px solid #888888; padding:5px; font-family: 'Montserrat', sans-serif; color:#555;} .logon-panel input[type=password] {float:left; border:1px solid #888888; padding:5px; font-family: 'Montserrat', sans-serif; color:#555;} .logon-panel input[type=checkbox] {-webkit-appearance: none; background-color: #fafafa; border: 1px solid #888; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative;} .logon-panel input[type=checkbox]:active, .logon-panel input[type=checkbox]:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} .logon-panel input[type=checkbox]:checked {background-color: #e9ecee;border: 1px solid #888;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); color: #99a1a7;} .logon-panel input[type=checkbox]:checked:after {content: '\2714'; font-size: 14px; position: absolute; top: 0px; left: 3px; color: #555;} .logon-panel input[type=submit] {cursor:pointer; float: left; display: inline-block; clear: both; background-color: #b22f44; color: #fff; font-size: 18px; text-transform: uppercase; padding: 12px 40px; font-weight: 700;} .logon-panel .logon-remember-me-checkbox {float:left; margin-bottom:20px;} .logon-panel .logon-remember-me-checkbox label {text-transform:none; font-size:14px;} a.logon-password-retrieval-link {clear:left; float:left; color:#b22f44;} /* ----- CLIENT DOCUMENT LIBRARY STYLES ----- */ /* ----- CLIENT DOCUMENT LIBRARY STYLES ----- */ /* ----- CLIENT DOCUMENT LIBRARY STYLES ----- */ .MediaFileUploader {float:left; width:100%; margin-bottom:30px; font-family: 'Montserrat', sans-serif; } .MediaFileUploader input[type=submit] {cursor:pointer; float: left; display: inline-block; clear: both; background-color: #b22f44; color: #fff; font-size: 18px; text-transform: uppercase; padding: 12px 40px; font-weight: 700;} .MediaFileUploader input[type=submit]:hover {background-color:#555555;} .MediaFileUploader input[type=file] {margin-bottom:20px; } .MediaFileUploader .editing-form-label-cell {color:#555555; margin-bottom:20px; float:left; margin-right:20px; font-weight:700; text-transform:uppercase; font-family: 'Montserrat', sans-serif; } .downloads {float:left; width:100%; margin-bottom:30px;font-family: 'Montserrat', sans-serif; } .downloads span.Name {display:none;} .downloads a {color:#b22f44;} .downloads a:hover {text-decoration:underline;} .logoutButton {float:left; width:100%; margin-bottom:30px;} .logoutButton input[type=submit] {cursor:pointer; float: left; display: inline-block; clear: both; background-color: #b22f44; color: #fff; font-size: 18px; text-transform: uppercase; padding: 12px 40px; font-weight: 700;} .logoutButton input[type=submit]:hover {background-color:#555;} .MediaGalleryDetail img {max-width:100%; height:auto !important;} .MediaGalleryDetailBottom {float:left; clear:left;} .MediaGalleryDetailBottom a { cursor:pointer; float: left; display: inline-block; clear: both; background-color: #b22f44; color: #fff; font-size: 18px; text-transform: uppercase; padding: 12px 40px; font-weight: 700;} .MediaGalleryDetailBottom a:after {content:'Download';} .MediaGalleryDetailBottom a:hover {text-decoration:none; background-color:#555;} .MediaGalleryDetailBottom a img {display:none;} .MediaGalleryContent p {float:left; width:100%; clear:left;} .MediaGalleryPagger a {margin-bottom:10px; float:left; cursor:pointer; float: left; display: inline-block; clear: both; background-color: #b22f44; color: #fff; font-size: 18px; text-transform: uppercase; padding: 12px 40px; font-weight: 700;} .MediaGalleryPagger a:before {content:'< ';} .MediaGalleryPagger a:hover {text-decoration:none; background-color:#555;} .MediaGalleryDetail {float:left; clear:left;} @media only screen and (min-width: 1024px) { #usps .pagers {display:block;} #usps .pagers .prev {display: block; width: 26px; height: 46px; background-image: url(/wp-content/themes/electrio/assets/arrow-left-red.png); position:absolute; top:115px; left:-30px; background-repeat: no-repeat; cursor: pointer;} #usps .pagers .next {display: block; width: 26px; height: 46px; background-image: url(/wp-content/themes/electrio/assets/arrow-right-red.png); position:absolute; top:115px; right:-30px; background-repeat: no-repeat; cursor: pointer;} } @media only screen and (min-width: 1600px) { #usps .pagers .prev {left:-80px;} #usps .pagers .next {right:-80px;} } /*#V2 GALLERY#*/ #galleryV2 {} #galleryV2 .galleryImage {float:left; width:100%; height:230px; margin:0 0 30px 0; overflow:hidden;} #galleryV2 .galleryImage a {float:left; width:100%; height:230px; background-size:cover; background-position:center center; transition: all .5s; image-rendering: -webkit-optimize-contrast } .galleryImage:hover a {transform: scale(1.2);} @media only screen and (min-width: 768px) { #galleryV2 .galleryImage {width:47.5%; margin-left:5%;} #galleryV2 .galleryImage:nth-child(2n+1) {clear:left; margin-left:0px;} } @media only screen and (min-width: 1024px) { #galleryV2 .galleryImage {width:31%; margin-left:3.5%;} #galleryV2 .galleryImage:nth-child(2n+1) {clear:none; margin-left:3.5%;} #galleryV2 .galleryImage:nth-child(3n+1) {clear:left; margin-left:0px;} }