h1, h3 { margin-bottom: 40px } .section-featured-post .section-content h2, label, p { margin-bottom: 30px } .icon-tabs li.current, .icon-tabs li:hover, .section-icon-nav ul li a:hover span, a, a:hover { color: #e31e25 } .btn, .btn-alignment.align-center, .careers-form .section-row:last-of-type .section-col, .post-tags a, .section-contact .section-contact-form .section-row:last-of-type .section-col, footer.footer .footer-address { text-align: center } .btn, .post-tags a, a.arrow, a.learn-more { letter-spacing: .15em; text-transform: uppercase } .section-icon-nav ul li a:hover, .section-service-icons ul li a:hover, a { text-decoration: none } .section-featured-post .section-content *, .section-logos.style-2 ul, .section-standard .section-content *, .section-testimonial .section-content div, img { max-width: 100% } html { scroll-behavior: smooth } body { font-family: Roboto, sans-serif; font-size: 18px; overflow-x: hidden } h1 { font-size: 66px; font-weight: 400; letter-spacing: .06em } .fontlight, .service-block .block-col:last-of-type p, h2, h3 { font-weight: 300 } .fontmedium, .section-career-testimonial span:first-of-type, .section-testimonial .section-content .testimonial-author span, h2 strong, h3 strong, label { font-weight: 500 } h2 { font-size: 50px; line-height: 1.4em; margin-bottom: 50px } h2 strong { color: #15b8c3 } h2.embelish:after, h3.embelish:after { display: block; width: 68px; height: 4px; content: " "; margin-top: 16px; background: #e31f26 } .service-block .block-col .block-col-content .btn, .slick-dots li, label.embelish, label.embelish:after { display: inline-block } h3 { font-size: 38px; line-height: 1.4em } h3 strong { color: #00b5c1 !important } label { display: block; font-size: 22px; text-transform: uppercase; letter-spacing: .2em } label.embelish { position: relative; padding-right: 114px } .project-facts ul, nav.nav.desktop ul { margin: 0; padding: 0; list-style: none } label.embelish:before { position: absolute; display: inline-block; align-self: flex-start; top: 16px; right: 0; content: " "; width: 100px; height: 1px; background: #d7d7d7 } label.embelish:after { position: absolute; top: 14px; right: 78px; content: " "; width: 22px; height: 5px; background: #15b8c3 } .padding-standard, main { padding-right: 110px; padding-left: 110px } .padding-vertical-small { padding-top: 50px; padding-bottom: 50px } .padding-vertical-medium { padding-top: 75px; padding-bottom: 75px } .padding-vertical-large { padding-top: 100px; padding-bottom: 100px } .padding-vertical-xlarge { padding-top: 125px; padding-bottom: 125px } .background-cover { background-repeat: no-repeat; background-position: center center; background-size: cover } #alm-filter-1 ul li a:before, .hide-desktop { display: none } .logo-slider ul li img, a { transition: .4s } .flip-card-back, .section-contact .section-contact-form label, .section-hero.section-background *, .section-standard.color-white *, .white, .white *, footer.footer .footer-section-top .footer-nav a { color: #fff } .gray, .gray * { color: #616161 } .lightgray, .lightgray * { color: #767676 } .bg-lightgray { background: #f3f3f3 } .bg-lightblue { background: #15b8c3 } .font-size-17 { font-size: 17px !important } .font-size-20 { font-size: 20px !important } .font-size-22 { font-size: 22px !important } .font-size-24 { font-size: 24px !important } .font-size-26 { font-size: 26px !important } .font-size-34 { font-size: 34px !important } .font-size-44 { font-size: 44px !important } .font-size-46 { font-size: 46px !important } .fontregular, .section-who-services .section-col:first-of-type h2, .technology-sub-heading h3 { font-weight: 400 } .project-facts ul li { position: relative; margin-left: 30px } .project-facts ul li:before { position: absolute; top: 12px; left: -30px; width: 8px; height: 8px; content: " "; border-radius: 4px; background: #e31e25 } .btn, .post-tags a { font-size: 17px; line-height: 1.2em; padding: 16px 34px; border: 3px solid #fff; border-radius: 0; background: 0 0; transition: .4s } .btn-white-image, .careers-form .contact-form-submit.btn, .section-contact .section-contact-form .btn { color: #fff; border: 3px solid #fff; background: rgba(0, 0, 0, .2) } .btn-white-transparent { color: #fff; border: 3px solid #fff; background: 0 0 } .btn-white-transparent:hover { color: #00b5c1 !important; background: #fff } .btn-red-transparent, .contact-page-information .section-contact-form .btn, .post-tags a { color: #e31e25; border: 3px solid #e31e25 } .btn-red-transparent:hover, .btn-white-image:hover, .careers-form .contact-form-submit.btn:hover, .contact-page-information .section-contact-form .btn:hover, .post-tags a:hover, .section-contact .section-contact-form .btn:hover { color: #fff; text-decoration: none; background: #e31e25 } .btn-blue-transparent { color: #15b8c3; border: 3px solid #15b8c3 } .btn-blue-transparent:hover { color: #fff; background: #15b8c3 } .btn-alignment.align-left { text-align: left } .btn-alignment.align-right, .section-open-positions ul li.li-values .li-column:last-of-type, footer.footer .footer-phone { text-align: right } a.arrow, a.learn-more { line-height: 1.1em; color: #d13732; padding-right: 30px; background: url('/wp-content/themes/cylogy/img/icons/icon-arrow-red-right.png') right center no-repeat } a.arrow-white { color: #fff; background: url('/wp-content/themes/cylogy/img/icons/icon-arrow-left-white.png') right center no-repeat } .hometestimonial .slick-slide img, .logo-slider, .section-contact-form .section-row .section-col input[type=email], .section-contact-form .section-row .section-col input[type=tel], .section-contact-form .section-row .section-col input[type=text], .section-contact-form .section-row .section-col select, .section-contact-form .section-row .section-col textarea, .section-portfolio-grid .alm-reveal .section-col-2 .grid-item:nth-of-type(3), .utility-nav, .wpcf7 { width: 100% } input[type=email], input[type=tel], input[type=text], select, textarea { padding: 10px; border: 1px solid #eee; background: rgba(255, 255, 255, .85); outline: 0 } .section-contact input[type=email], .section-contact input[type=tel], .section-contact input[type=text], .section-contact textarea { border: 1px solid #b8b8b8; border-left: 3px solid #d03732 } input[type=email], input[type=tel], input[type=text] { height: 55px } div.wpcf7-response-output { font-size: 20px; color: #fff; padding: 20px; border: none; margin: 0 } div.wpcf7-validation-errors { border: none; margin-bottom: 20px; background: #d03732 } div.wpcf7-mail-sent-ok { font-size: 30px; font-weight: 500 } span.wpcf7-not-valid-tip { color: #d03732 } .wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok { margin-bottom: 20px; padding: 0 !important; color: #15b8c3 } .wpcf7 form .wpcf7-response-output { margin: 2em .5em 1em; padding: .2em 1em; border: 2px solid #00a0d2; color: #46b450 } ::-webkit-input-placeholder { color: #393939 !important; font-size: 18px !important; opacity: .7 !important; font-style: italic !important } ::-moz-placeholder { color: #393939 !important; font-size: 18px !important; opacity: .7 !important; font-style: italic !important } :-ms-input-placeholder { color: #393939 !important; font-size: 18px !important; opacity: .7 !important; font-style: italic !important } :-moz-placeholder { color: #393939 !important; font-size: 18px !important; opacity: .7 !important; font-style: italic !important } nav.nav.desktop { flex-grow: 1 } nav.nav.desktop ul { display: flex; width: 100%; justify-content: flex-end } .section:first-of-type { padding-top: 220px } .section-full-width { width: calc(100% + 220px); margin-left: -110px; margin-right: -110px; padding-left: 110px; padding-right: 100px } .hometestimonial .slide-container span, .icon-tab-content.current, .section-gap, .section-service-icons ul li img, .section-service-icons ul li span, .section-team-members ul li span, .success-story-content-container.current { display: block } .gap-xsm { height: 25px } .gap-sm { height: 50px } .gap-md { height: 75px } .gap-lg { height: 100px } .gap-xl { height: 125px } .gap-xxl { height: 150px } .section-divider-red { display: block; width: 100%; height: 2px } .section-divider-red:before { display: block; width: 86px; height: 2px; content: " "; margin: 0 auto; background: #e31e25 } .section-page-heading .section-content { max-width: 880px } .blog-post-listing .post-item h3, .section-featured-project .section-col:first-of-type .featured-description, .section-home-services .section-content .section-content-container label, .section-page-heading h1, .section-project-hero .section-content h1, .section-related-posts .related-post h3 { margin-bottom: 20px } .section-page-heading .sub-heading { display: block; max-width: 700px; font-size: 34px; margin-right: auto; margin-left: auto } .section-page-heading .sub-heading strong { font-weight: 400; color: #e31e25 } .section-page-heading .divider { display: block; width: 88px; height: 2px; margin: 48px auto; background: #e31e25 } .section-heading .section-content p, .section-page-heading p { font-size: 24px } .section-featured-post .section-content .btn, .section-heading .section-content .btn, .section-page-heading .btn, .section-standard .section-content .btn { margin-top: 30px } .section-hero.section-background { padding-top: 260px; padding-bottom: 260px } .section-hero.section-background .section-content { max-width: 800px } .section-hero.section-background h1 { margin-bottom: 40px; text-shadow: 0 0 12px rgba(0, 0, 0, .5) } .section-hero.section-background p { font-size: 22px; line-height: 1.4em } .section-heading .section-content { max-width: 900px; margin: 0 auto } .project-information .section-col:first-of-type .project-info-lg, .section-heading .section-content h2 { margin-bottom: 50px } .section-home-services { margin-top: 150px; padding-bottom: 80px; background: #f3f3f3 } .section-home-services img { position: relative; max-width: 80%; height: auto; margin-top: -8vw; z-index: 1 } .section-home-services .section-content { position: relative; max-width: 875px; min-height: 400px; border-top: 4px solid #15b8c3; margin-top: -78px; padding: 50px 5%; background: #f3f3f3; z-index: 100 } .section-home-services .section-content:before { position: absolute; width: 100%; height: 400px; top: 0; left: 0; z-index: 1; content: " "; background: #f3f3f3 } .section-home-services .section-content:after { border-radius: 0 0 300px 300px; box-shadow: 0 0 25px rgba(0, 0, 0, .25); content: ''; display: block; height: 350px; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; background: red } .section-home-services .section-content .section-content-container { position: relative; z-index: 50 } .section-home-technology .section-col:first-of-type { position: relative; flex-basis: 50% } .section-home-technology .section-col img.image-main { width: 100%; height: auto; transition: .4s } .section-home-technology .section-col:first-of-type a { background: rgba(0, 0, 0, .3) } .section-home-technology .section-col a:hover+img.image-main { -webkit-filter: invert(40%) grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2); filter: grayscale(100%) brightness(50%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(.8); transition: .4s } .section-home-technology .section-col:last-of-type { flex-basis: 40% } .section-home-technology .section-col .section-image .section-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; z-index: 10 } .section-home-technology .section-col .section-col-content { max-width: 450px } .section-home-technology.img-left .section-col:first-of-type, .service-block.align-right .block-col:first-of-type { order: 2 } .section-home-technology.img-left .section-col:last-of-type, .service-block.align-right .block-col:last-of-type { order: 1 } .section-home-technology.img-left .section-col { align-items: flex-end !important } .section-home-clients { flex-wrap: wrap; padding-top: 95px; padding-bottom: 100px } .section-service-icons ul, .slick-dots { padding: 0; display: flex; list-style: none } .section-home-clients .section-row .section-col:first-of-type { flex-basis: 45%; max-width: 45vw } .section-home-clients .section-row .section-col:last-of-type { position: relative; width: 100%; padding: 110px 30px } .section-home-clients .section-row .section-col:last-of-type:before { position: relative; width: calc(100% + 102px); height: 150px; margin-top: -260px; margin-left: -72px; content: " "; background: #15b8c3 } @media (min-width:1100px) { .section-home-clients .section-row .section-col:last-of-type { max-width: 50vw; min-width: 500px; flex-basis: 50%; margin-right: -100px; padding: 110px 110px 110px 72px } .section-home-clients .section-row .section-col:last-of-type:before { width: calc(100% + 182px) } } .hometestimonial.slider { width: 100%; margin: 0 } .hometestimonial .slick-slide { margin: 0 20px; padding: 0 30px 0 0; background-image: url('/wp-content/themes/cylogy/img/icons/icon-quote-white-left.png'), url('/wp-content/themes/cylogy/img/icons/icon-quote-white-right.png'); background-repeat: no-repeat, no-repeat; background-position: left 90px, right bottom; transition: .3s ease-in-out; opacity: .2 } .flip-card-front, .hometestimonial .slick-next:before, .hometestimonial .slick-prev:before, .section-standard.color-black * { color: #000 } .hometestimonial .slick-active, .section-team-members ul li img:hover { opacity: .5 } .hometestimonial .slick-current, .icon-tabs li.current img, .icon-tabs li:hover img, .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-image a:hover, .section-related-projects ul li:hover .featured-image:after { opacity: 1 } .hometestimonial .slide-container label { margin-bottom: 46px } .hometestimonial .slide-container .testimonial-text, .hometestimonial .slide-container .testimonial-title { font-style: italic; padding-left: 60px } .hometestimonial .slide-container .testimonial-text { margin-bottom: 22px; padding-left: 60px } .hometestimonial .slide-container .testimonial-author { margin-bottom: 5px; padding-left: 60px } .section-home-clients .section-logos { width: 100%; padding: 100px 10px 0 } .section-home-clients .section-logos img { margin-right: 20px; margin-left: 20px; filter: grayscale(1); -webkit-filter: grayscale(1); transition: .4s } .section-home-clients .section-logos .slider-logo.current img { -webkit-filter: none; filter: none } .image-slider { width: 100%; max-width: 1150px; margin: 0 auto } .image-slider .slick-slide { width: calc(100% - 200px) } .image-slider .slick-slide img { width: 100%; height: auto; border: 1px solid #f2f2f2 } .image-slider .slick-arrow, .logo-slider .slick-arrow { position: absolute; top: calc(50% - 30px); transform: translateY(calc(50% - 30px)); width: 32px; height: 61px; border: none; font-size: 0px; background: url('/wp-content/themes/cylogy/img/icons/icon-arrow-left.png') center top no-repeat } .image-slider .slick-next, .logo-slider .slick-next { background: url('/wp-content/themes/cylogy/img/icons/icon-arrow-right.png') center top no-repeat } .image-slider .slick-prev, logo-slider .slick-prev { left: -70px } .image-slider .slick-next { left: initial; right: -70px } .image-slider .slick-arrow:hover, .logo-slider .slick-arrow:hover { background-position: center bottom } .logo-slider .slick-prev { left: -50px } .logo-slider .slick-next { left: initial; right: -50px } .slick-dots { justify-content: center; text-align: center; margin: 100px auto 0 } .slick-dots li button { font-size: 0px; width: 20px; height: 20px; border-radius: 10px; border: none; margin-right: 10px } #alm-filter-1 ul li:last-of-type, .post-tags a:last-of-type, .section-related-projects ul li:last-of-type, .slick-dots li:last-of-type button { margin-right: 0 } .image-slider .slick-active button { background: #13b7c2 !important } .section-service-icons ul { align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 } .section-service-icons ul li { padding-right: 25px; padding-left: 25px; margin-bottom: 40px } .section-service-icons ul li a { display: flex; flex-direction: column; min-width: 170px; align-items: center; justify-content: center } .section-icon-nav ul li a img, .section-service-icons ul li img { margin-bottom: 25px } .section-service-icons ul li span { position: relative; font-size: 18px; color: #393939; font-weight: 500; padding-bottom: 20px; text-transform: uppercase } .section-service-icons ul li a:hover span { color: #e31f26 } .section-service-icons ul li a:hover span:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; content: " "; background: #e31f26 } .section-contact, .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-image, .section-testimonial, .service-block .block-col .block-image { position: relative } .section-contact:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; background: rgba(0, 0, 0, .3); z-index: 1 } .section-contact .section-content { position: relative; z-index: 2 } .section-contact-form { max-width: 750px; margin: 0 auto } .section-contact-form .section-row { display: flex; width: 100%; margin-bottom: 25px; justify-content: space-between } .section-contact-form .section-row .section-col { width: 100%; text-align: left } .section-contact-form .section-row:first-of-type .section-col, .section-contact-form .section-row:nth-of-type(2) .section-col { width: 48% } .section-contact-form .section-row:first-of-type .section-col:first-of-type, .section-contact-form .section-row:nth-of-type(2) .section-col:first-of-type { margin-right: 4% } .section-contact-form .section-row .section-col label { font-size: 14px; margin-bottom: 5px } .section-contact .section-contact-form .section-row .section-col textarea { height: 115px } .service-block { justify-content: space-between } .service-block .block-col:first-of-type { width: calc(50% + 80px); margin-left: -110px } .service-block .block-col:last-of-type { width: 45%; display: flex } .service-block.style-1 .block-col .block-image:before { position: absolute; top: 22px; left: 22px; width: 100%; height: 100%; content: " "; background: #13b7c2; z-index: -1 } .service-block.align-right .block-col .block-image:before { top: 22px; left: -22px } .service-block.style-1 .block-col .block-image:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; background: rgba(0, 0, 0, .4); z-index: 1 } .service-block .block-col .block-image h2 { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; text-align: center; z-index: 2 } .section-career-testmionial .section-col .section-image img, .section-who-services .section-col:last-of-type img, .service-block .block-col .block-image img, .service-block.style-3 .block-col:first-of-type img, .service-block.style-4 .block-col:first-of-type img { width: 100%; height: auto } .service-block .block-col .block-col-content, .service-block.align-right .block-col:first-of-type, .service-block.style-4.align-right .block-col:first-of-type { margin: 20px; align-self: flex-end } .service-block.align-right .block-col .block-col-content, .service-block.align-right .block-col:last-of-type, .service-block.style-4.align-right .block-col:last-of-type { align-self: flex-start } .service-block .block-col .block-col-content p { font-size: 22px; line-height: 1.6em } .service-block.style-2 { align-items: flex-start !important; margin-bottom: 30px } .service-block.style-2:last-of-type { margin-bottom: 0 } .service-block.style-2 .block-col:first-of-type { width: calc(60% + 110px); z-index: 49 } .service-block.style-2 .block-col:last-of-type { width: 55%; padding: 50px 38px; margin-top: -65px; margin-left: -35px; z-index: 50 } .service-block.style-2.align-right .block-col:last-of-type { margin-top: -65px; margin-right: -35px } .service-block.style-2 .block-col-content h3:after { display: block; width: 92px; height: 4px; content: " "; margin-top: 20px; margin-bottom: 20px; background: #e31e25 } .service-block.style-2 .block-col-content p { font-size: 20px } .service-block.style-3 { flex-direction: column; align-items: flex-start !important } .service-block.style-3 .block-col:first-of-type { width: 75%; margin-left: -110px; order: 1 !important; z-index: 44 } .service-block.style-3 .block-col:last-of-type { width: 85%; display: block; background: #f2f2f2; padding: 90px; align-self: flex-end; margin-top: -20vw; z-index: 45; order: 2 !important } .service-block.style-4 { align-content: stretch !important; align-items: flex-start !important } .service-block.style-4 .block-col:first-of-type, .service-block.style-4 .block-col:last-of-type { width: 58% } .service-block.style-4 .block-col:first-of-type { margin-left: 0; margin-bottom: 75px } .service-block.style-4 .block-col:last-of-type { padding: 5%; margin-top: 75px; align-self: stretch !important } .service-block.style-4.align-left .block-col:first-of-type { margin-right: -10%; z-index: 9 } .service-block.style-4.align-left .block-col:last-of-type { margin-left: -10%; z-index: 10; background: #f2f2f2 } .service-block.style-4.align-right .block-col:first-of-type { margin-left: -10%; margin-right: 0; z-index: 9 } .service-block.style-4.align-right .block-col:last-of-type { margin-right: -10%; z-index: 10; background: #f2f2f2 } .service-block .block-col .block-col-content, .service-block.align-right .block-col:first-of-type, .service-block.style-4 .block-col:last-of-type .block-col-content, .service-block.style-4.align-right .block-col:first-of-type { align-self: flex-start !important } .service-block.style-4 h3 { margin-bottom: 16px } .service-block.style-4 h3:after { display: block; width: 68px; height: 3px; content: " "; margin-top: 16px; background: #e31f26 } .service-block.style-4 .block-col:last-of-type p { font-size: 1.4vw } .section-testimonial .section-content { max-width: 800px; z-index: 2 } .section-featured-project:after, .section-project-hero:after, .section-testimonial:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; background: rgba(0, 0, 0, .5); z-index: 1 } .section-testimonial .section-content label { font-size: 18px; margin-bottom: 35px } .section-testimonial .section-content .testimonial-text { font-style: italic; padding: 16px 66px 0; background-image: url('/wp-content/themes/cylogy/img/icons/icon-quote-blue-left.png'), url('/wp-content/themes/cylogy/img/icons/icon-quote-blue-right.png'); background-repeat: no-repeat, no-repeat; background-position: left top, right bottom } .section-testimonial .section-content .testimonial-author { text-transform: uppercase; margin-top: 70px; margin-bottom: 30px } .success-slider { width: 800px; height: 300px } .success-slider .slick-slide { width: 252px; height: 300px; text-align: center } .success-slider div img { position: relative; width: 210px; height: auto; top: 17px; filter: grayscale(1); -webkit-filter: grayscale(1); transition: .3s; margin-right: auto; margin-left: auto } .success-slider div .slick-current img { top: 0; width: 252px; filter: none; -webkit-filter: none; transition: .3s } .success-slider .slick-arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 50px; height: 50px; border: none; font-size: 0px; background: url('/wp-content/themes/cylogy/img/icons/icon-arrow-black-left.png') center center no-repeat } .success-slider .slick-prev { left: -5vw } .success-slider .slick-next { left: initial; right: -5vw; background: url('/wp-content/themes/cylogy/img/icons/icon-arrow-black-right.png') center center no-repeat } .section-related-projects .project-logo, .team-modal { top: 50%; transform: translateY(-50%) translateX(-50%); left: 50% } .success-story-content { position: relative; display: flex; flex-direction: column; padding-bottom: 100px } .success-story-content-container { display: none; max-width: 1100px; margin-right: auto; margin-left: auto; text-align: center } .success-story-content-container label { font-size: 16px; font-weight: 400 } .icon-tab-content p, .success-story-content-container .success-story-text { line-height: 1.8em } .section-icon-tabs { align-items: center } .icon-tabs { display: flex; max-width: 1100px; align-items: center; justify-content: space-between; align-content: stretch; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #d7d7d7 } .icon-tabs li { position: relative; display: flex; max-height: 204px; min-height: 204px; width: 25%; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-right: 25px; padding-left: 25px; transition: .4s } .icon-tabs li img { margin-bottom: 25px; opacity: .3; transition: .4s } .icon-tabs li span { position: relative; display: block; min-height: 72px; font-size: 20px; text-transform: uppercase; text-align: center; font-weight: 500 } .icon-tabs li.current:after, .icon-tabs li:hover:after { content: " "; display: block; position: absolute; top: calc(100% - 4px); left: 0; width: 100%; height: 4px; background: #e31e25 } .icon-tab-content { display: none; max-width: 1100px; text-align: center; margin-top: 50px } .icon-tab-content .btn { margin-top: 15px } .section-standard .section-content { max-width: 870px; margin: 0 auto } .section-project-about .section-content p, .section-standard .section-content li, .section-standard .section-content p, .section-tech-content .section-col:last-of-type p { font-size: 22px; font-weight: 300; line-height: 1.8em } .contact-page-information .contact-col:first-of-type { display: flex; flex-basis: 65%; justify-content: flex-end; padding-right: 56px } .contact-page-information .contact-col:first-of-type .section-contact-form { max-width: 1000px } .contact-page-information .contact-col:last-of-type { flex-basis: 356px; min-width: 356px; padding-left: 56px; border-left: 1px solid #cfcfcf } .contact-page-information .contact-col:last-of-type:before { display: block; content: " "; margin-bottom: 25px; width: 200px; height: 5px; background: #d03732 } .contact-page-information .contact-col:last-of-type h3 { text-transform: uppercase; margin-bottom: 0 } .contact-page-information .contact-col:last-of-type .corporate-address { color: #5f5f5f; margin-bottom: 40px } .contact-page-information .contact-col:last-of-type .corporate-fax, .contact-page-information .contact-col:last-of-type .corporate-phone { margin-bottom: 18px } .contact-page-information .contact-col:last-of-type .corporate-email, .contact-page-information .contact-col:last-of-type .corporate-fax, .contact-page-information .contact-col:last-of-type .corporate-phone { padding-left: 29px; background-repeat: no-repeat; background-position: left center } .contact-page-information .contact-col:last-of-type .corporate-email a, .contact-page-information .contact-col:last-of-type .corporate-fax, .contact-page-information .contact-col:last-of-type .corporate-phone a { color: #5f5f5f } .contact-page-information .contact-col:last-of-type .corporate-phone { background-image: url('/wp-content/themes/cylogy/img/icons/icon-phone.png') } .contact-page-information .contact-col:last-of-type .corporate-fax { background-image: url('/wp-content/themes/cylogy/img/icons/icon-fax.png') } .contact-page-information .contact-col:last-of-type .corporate-email { background-image: url('/wp-content/themes/cylogy/img/icons/icon-email.png') } .section-featured-project, .section-portfolio-grid .alm-reveal .section-col .grid-item { position: relative; margin-bottom: 20px } .section-featured-project .section-col:first-of-type { display: flex; flex-direction: column; width: 70%; z-index: 2; align-items: flex-start; justify-content: center; padding: 52px 50px 55px 10% } .section-featured-project .section-col:first-of-type img.project-logo { margin-bottom: 85px } .section-featured-project .section-col:first-of-type .white-logo img.project-logo { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1) } .section-featured-project .section-col:first-of-type label { position: relative; font-size: 17px; padding-left: 16px; line-height: 24px; margin-bottom: 25px } .section-featured-project .section-col:first-of-type label:before { position: absolute; top: 0; left: 0; width: 5px; height: 22px; content: " "; background: #fff } .section-featured-project .section-col:first-of-type h2 { margin-bottom: 15px } .section-portfolio-grid .alm-reveal { display: flex; justify-content: space-between; align-items: space-between } .section-portfolio-grid .alm-reveal:not(:first-child) { margin-top: 20px } .section-portfolio-grid .alm-reveal .section-col { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between } .section-portfolio-grid .alm-reveal .section-col-1 { min-width: calc(40% - 10px); margin-right: 10px } .section-portfolio-grid .alm-reveal .section-col-2 { min-width: calc(60% - 10px); margin-left: 10px } .section-portfolio-grid .alm-reveal .section-col-1 .grid-item { width: 100%; margin-bottom: 20px } .section-portfolio-grid .alm-reveal .section-col-2 .grid-item:first-of-type, .section-portfolio-grid .alm-reveal .section-col-2 .grid-item:nth-of-type(2), .section-portfolio-grid .alm-reveal .section-col-2 .grid-item:nth-of-type(4), .section-portfolio-grid .alm-reveal .section-col-2 .grid-item:nth-of-type(5) { width: calc(50% - 10px) } .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-image a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); transition: .4s; opacity: 0; z-index: 50 } .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-image img { position: relative; width: 100%; height: auto; z-index: 49 } .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-content { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 20px } .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-content span { display: block; margin-top: 10px; text-align: center } .section-portfolio-grid .alm-reveal .section-col .grid-item .grid-content .grid-logo { max-width: 220px; height: auto; max-height: 100px } .section-portfolio-grid .alm-btn-wrap, .section-related-projects .btn { margin-top: 50px } .section-portfolio-grid .alm-btn-wrap .alm-load-more-btn { height: auto !important; font-size: 18px !important; font-weight: 400 !important; color: #e31e25 !important; text-transform: uppercase !important; line-height: 1.2em !important; padding: 16px 44px !important; border: 3px solid #e31e25 !important; border-radius: 0 !important; text-align: center !important; background: 0 0 !important; letter-spacing: .15em !important; transition: .4s !important } .section-portfolio-grid .alm-btn-wrap .alm-load-more-btn:hover { color: #fff !important; background: #e31e25 !important } .section-portfolio-grid .alm-btn-wrap .alm-load-more-btn.done:hover { color: #e31e25 !important; background: 0 0 !important } .section-portfolio-grid .alm-btn-wrap .alm-load-more-btn:before { top: 5px !important } .section-portfolio-grid .alm-reveal .section-col-1.section-col-expanded { flex-direction: row; justify-content: flex-start; min-width: 100% } .section-portfolio-grid .alm-reveal .section-col-1.section-col-expanded .grid-item:first-of-type { width: calc(40% - 10px) } .section-portfolio-grid .alm-reveal .section-col-1.section-col-expanded .grid-item:last-of-type { width: calc(30% - 15px); margin-left: 20px } .single-project main { margin-top: 132px } .section-project-hero { position: relative; width: calc(100% - 22px); min-height: 650px; margin-left: 132px; justify-content: space-between; padding-right: 0; padding-left: 0 } .section-project-hero .section-content { display: flex; flex-grow: 1; align-items: center; padding: 40px 40px 40px 8vw; z-index: 2 } .section-project-hero .section-content .section-content-text h2 { font-size: 2vw; margin-bottom: 25px } .section-project-hero .section-content .section-content-text p { font-size: 24px; max-width: 700px } .section-project-hero .section-image { display: flex; flex-basis: 45%; position: relative; justify-content: flex-end; align-items: flex-end; padding-top: 50px } .section-project-hero .section-image img { width: 100%; min-width: 400px; max-width: 600px; height: auto } .project-information { padding-left: 132px } .project-information .hz-separator { display: block; width: 100%; height: 1px; background: #ccc; margin: 40px 0 45px } .project-information .section-col:first-of-type { width: 60%; max-width: 90%; flex-grow: 1 } .project-information .section-col:first-of-type p { font-weight: 300; line-height: 2em } .project-information .section-col:last-of-type { width: 40%; padding-left: 50px } .project-information .project-facts li { font-size: 22px; margin-bottom: 30px } .project-partners img { display: block; margin-bottom: 50px; filter: grayscale(1); -webkit-filter: grayscale(1); transition: .4s } .project-partners a:hover img { filter: grayscale(0); -webkit-filter: grayscale(0) } .section-icon-nav ul { display: flex; flex-wrap: wrap; list-style: none; justify-content: center; margin: 0; padding: 0 } .section-icon-nav ul li { display: flex; flex-direction: column; flex-wrap: wrap; min-width: 230px; max-width: 230px; margin: 0 10px 60px } .section-icon-nav ul li a { position: relative; display: flex; width: 100%; height: 260px; flex-direction: column; justify-content: flex-start; align-items: center; border: 1px solid #ebebeb; padding: 20px; background: #f9f9f9; transition: .4s } .section-icon-nav ul li a:after { position: absolute; content: " "; width: 100%; height: 4px; line-height: 4px; bottom: 0; left: 0; color: #fff; background: #e31e25; transition: .4s } .section-icon-nav ul li a:hover:after { position: absolute; content: "Learn More >"; width: 100%; line-height: 35px; height: 35px; bottom: 0; left: 0 } .section-icon-nav ul li a span { display: block; color: #393939; text-transform: uppercase; line-height: 1.4em; font-size: 20px; font-weight: 500 } .section-project-about img.main-image { margin: 0 auto; border-left: 15px solid #f2f2f2 } .section-project-about .section-content { max-width: 875px; padding: 40px; margin-top: -90px; background-color: #f9f9f9 } .section-project-about .section-content .section-icon { min-width: 180px; margin-right: 20px } .section-project-about .section-content .section-icon img { width: 125px; height: auto } .section-project-about .section-content h2 { font-size: 34px } .section-project-about .section-content h2:after, .service-block .block-col:last-of-type h2:after { display: block; content: " "; width: 95px; height: 4px; margin-top: 20px; background: #e31e25 } .section-related-projects ul { display: flex; justify-content: center; align-items: center; list-style: none; margin: 0; padding: 0 } .section-related-projects ul li { position: relative; width: calc(50% - 27px); margin-right: 54px; padding-top: 10px; padding-left: 10px } .section-related-projects ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50 } .section-related-projects ul li .featured-image img { position: relative; width: 100%; height: auto; margin: 10px; transition: .4s } .section-related-projects ul li .featured-image:after { position: absolute; display: block; width: calc(100% - 20px); height: calc(100% - 30px); top: 20px; left: 30px; content: " "; background: #e31e25; z-index: -1; opacity: 0; transition: .4s } .section-related-projects ul li:hover .featured-image img { margin: 0 20px 20px 0 } .section-related-projects .project-logo { position: absolute; width: 230px; height: 154px; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: contain; transition: .4s } .section-related-projects li:hover .project-logo { margin-top: -10px; margin-left: -10px } .section-logos ul { display: flex; flex-wrap: wrap; max-width: 1200px; justify-content: center; align-items: center; list-style: none; margin: 0 auto; padding: 0 } .section-logos ul li { display: flex; justify-content: center; align-items: center; align-content: stretch; flex-basis: 270px; width: 270px; text-align: center; margin-bottom: 70px; padding: 0 20px } .section-logos.style-2 ul li { width: 25%; flex-basis: 25% } .section-logos.style-2 h2:after { display: block; content: " "; width: 100px; height: 4px; margin: 26px auto 0; background: #e31e25 } .section-logos.style-2 ul li img { filter: grayscale(1); -webkit-filter: grayscale(1); transition: .4s; opacity: .5 } .logo-slider ul li a:hover img, .section-logos.style-2 ul li a:hover img { filter: grayscale(0); -webkit-filter: grayscale(0); opacity: 1 } .section-who-services .section-col:first-of-type { display: flex; justify-content: center; width: 45% } .section-who-services .section-col:first-of-type p { font-size: 22px; line-height: 1.8em } .section-who-services .section-col:first-of-type .section-content { max-width: 550px; padding-bottom: 100px } .section-who-services .section-col:first-of-type .section-content:before { display: block; content: " "; width: 100%; max-width: 430px; height: 4px; margin-bottom: 45px; background-color: #e31e25 } .section-who-services .section-col:last-of-type { width: 55%; margin-right: -110px } .section-team-members { padding-top: 188px; padding-bottom: 80px; margin-top: -89px; background: #f2f2f2 } .section-team-members ul { display: flex; width: 100%; justify-content: center; align-items: center; list-style: none; flex-wrap: wrap; margin: 0; padding: 0 } .section-team-members ul li { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33.3333%; padding: 0 10px; margin-bottom: 60px } .section-team-members ul li img { width: 100%; max-width: 240px; height: auto; border-radius: 50%; margin-bottom: 25px; border: 4px solid #15b8c3; transition: .4s } .section-team-members ul li.show-modal { cursor: pointer } .section-team-members ul li .team-member-title { font-size: 15px; margin-top: 10px; text-transform: uppercase } .team-modal { position: fixed; display: none; width: 90%; max-width: 800px; margin: auto; border: 4px solid #15b8c3; padding: 50px 30px 30px; background: #fff; z-index: 99999 } .team-modal-close a { position: absolute; top: 10px; right: 10px; color: #000; width: 30px; height: 30px; text-align: center } .team-modal-close a:before { display: block; content: "X"; font-weight: 500 } .team-member-modal-bg { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99998; background: rgba(0, 0, 0, .7) } .technology-sub-heading { padding-top: 60px } .technology-sub-heading h3 strong { color: #00b5c1 } .section-technology-grid { flex-wrap: wrap; padding: 0 } .flip-card { background-color: transparent; width: 50%; height: 30vw; min-height: 450px; perspective: 3000px } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform .8s; transform-style: preserve-3d } .flip-card-back, .flip-card:hover .flip-card-inner { transform: rotateY(180deg) } .flip-card-back, .flip-card-front { position: absolute; width: 100%; height: 100%; backface-visibility: hidden } .flip-card-front .logo { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center } .flip-card-front .logo img { max-width: 70%; height: auto } .flip-card-content { position: relative; display: flex; align-items: center; justify-content: center; z-index: 999 } .flip-card-back:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; z-index: 49; background: rgba(227, 30, 37, .5) } .flip-card-back .flip-card-content { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 500px; height: 100%; align-items: center; justify-content: center; color: #fff; padding: 20px; z-index: 50; margin: 0 auto } .flip-card-back .flip-card-content .btn { position: relative; display: block; color: #fff; border: 3px solid #fff; margin-top: 35px; background: rgba(0, 0, 0, 0); z-index: 100 } .flip-card-back .flip-card-content .btn:hover { background: rgba(0, 0, 0, .4) } .flip-card-back .flip-card-content .logo img { width: auto; max-height: 100px; margin-bottom: 35px } .logo-slider .logo-slide-content { display: flex; justify-content: space-around; align-items: center; height: 400px } .logo-slider .logo-slide-content>ul { display: flex; flex-direction: column; justify-content: space-around; height: 100%; list-style: none; margin: 0; padding: 0 } .logo-slider .logo-slide-content>ul>li { display: flex; align-items: center; justify-content: center; text-align: center; padding-right: 20px; padding-left: 20px; margin-bottom: 50px } .section-tech-content { position: relative; width: 100% } .section-tech-content:before { content: " "; position: absolute; width: 10%; height: 100%; z-index: 10; background: #fff } .section-tech-content .section-col:first-of-type { position: relative; width: 50%; min-width: 45%; margin-top: -25px; margin-bottom: 45px; z-index: 11 } .section-tech-content .section-col:first-of-type a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center } .section-tech-content .section-col:last-of-type { width: 50%; padding: 50px 50px 120px; align-self: flex-end } .section-tech-content .section-col:last-of-type .section-content { max-width: 600px; align-self: flex-start } .section-tech-content .section-col:last-of-type a { color: #e31f26; font-weight: 400 } .section-partner-bg-content .section-col:first-of-type { display: flex; width: 46%; justify-content: center } .section-partner-bg-content .section-col:last-of-type { width: 56% } .section-partner-bg-content .section-col:last-of-type .section-content { max-width: 525px } .section-open-positions ul { display: flex; flex-direction: column; width: 100%; list-style: none; margin: 0; padding: 0 } .section-open-positions ul li { display: flex; align-items: center; padding: 50px 0; border-bottom: 1px solid #c2c2c2 } .section-open-positions ul li.li-labels { padding-top: 0; padding-bottom: 10px } .section-open-positions label { font-size: 17px !important; color: #00b5c1 !important } .section-open-positions ul li .li-column { width: 35%; padding-right: 50px } .section-open-positions ul li .li-column:last-of-type { width: 30% } .section-open-positions ul li:first-of-type, .section-open-positions ul li:last-of-type { border: none } .section-open-positions ul li:nth-of-type(2) { padding-top: 0 } .section-open-positions ul li.li-values .li-column:first-of-type { font-size: 26px; font-weight: 300 } .section-open-positions ul li.li-values .btn { font-size: 16px } .section-career-testmionial .section-col { display: flex; flex-direction: column; width: 50% } .section-career-testmionial .section-col:first-of-type { align-items: flex-end; padding-right: 25px } .section-career-testmionial .section-col:last-of-type { max-width: 640px } .section-career-testmionial .section-col .section-image { position: relative; width: 90%; max-width: 500px } .section-career-testmionial .section-col .section-image:before { position: absolute; top: 10px; left: -10px; width: 100%; height: 100%; content: " "; z-index: -1; background: #e31e25 } .section-career-testmionial .section-col .section-content { font-style: italic; padding: 60px 30px 50px 50px; background-image: url('/wp-content/themes/cylogy/img/icons/icon-quote-blue-left.png'), url('/wp-content/themes/cylogy/img/icons/icon-quote-blue-right.png'); background-repeat: no-repeat, no-repeat; background-position: left top, right bottom } .section-career-testmionial .testimonial-author { font-size: 17px; text-transform: uppercase; padding: 35px 0 0 50px !important } .section-career-testimonial span:last-of-type { color: red !important; font-weight: 400 } .careers-form input, .careers-form textarea { color: #000 !important; border: 1px solid #b8b8b8; border-left: 3px solid #d03732 } footer.footer, footer.footer .footer-phone a { color: rgba(255, 255, 255, .4) } .single-post article { padding: 0 132px } .section-heading-post a.back-to-insights { display: block; color: #e31e25; margin-bottom: 30px } .single-post .post-category { text-transform: uppercase; margin-bottom: 20px; color: #ccc } .single-post .post-meta { margin-bottom: 34px } .single-post .post-category a { color: #393939; margin-right: 10px; margin-left: 10px } .single-post .post-category a:first-of-type { margin-left: 0 } .single-post .post-category:after { display: block; content: " "; width: 22px; height: 5px; margin-top: 18px; background-color: #15b8c3 } .single-post .post-author img { width: 60px; height: 60px; border-radius: 50%; margin-right: 20px } .single-post .post-author-name span { font-style: italic } .single-post .featured-image img { width: 100%; height: auto; margin-bottom: 38px } .single-post .section-post-content h2 { font-size: 34px; margin-bottom: 20px } .single-post .section-post-content h3 { font-size: 26px; font-weight: 500; margin-bottom: 20px } .single-post .section-post-content p { line-height: 2em; font-weight: 300 } .section-cta { min-height: 350px; border-top: 5px solid #15b8c3; border-bottom: 5px solid #15b8c3; margin: 45px 0 } .section-cta .section-col:first-of-type { flex-grow: 1; padding: 50px 40px 50px 0 } .section-cta .section-col:first-of-type p { font-size: 26px; font-weight: 500; line-height: 1.4em } .section-cta .section-col:last-of-type { position: relative; min-width: 40% } .section-cta .section-col:last-of-type:after { position: absolute; top: 0; left: 0; width: 80%; height: 100%; content: " "; background: -moz-linear-gradient(left, #fff 0, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(left, #fff 0, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0) 100%) } .section-related-posts { flex-wrap: wrap; border-top: 1px solid #d9d9d9; padding-top: 50px } .section-related-posts h2 { width: 100%; text-align: center; margin-bottom: 0 } .section-related-posts .related-post { width: 390px; margin: 50px 30px 0 } .blog-post-listing .post-item img, .section-related-posts .related-post img { width: 100%; height: auto; margin-bottom: 25px } .post-tags { flex-wrap: wrap; margin-top: 30px; margin-bottom: 60px } .post-tags a { font-weight: 500; line-height: 1.2; margin-right: 20px; white-space: nowrap; padding: 15 25px 15px; margin-bottom: 10px } .post-back-link { padding: 60px 0 100px } .section-featured-post { width: calc(100% - 20px); max-width: 1740px; min-height: 500px; padding-bottom: 20px; margin: 20px auto 0 } .section-featured-post .section-content { width: 45%; max-width: 590px; align-self: flex-end; padding: 80px 50px; margin-top: -20px; margin-right: -20px } .section-featured-post label { position: relative; height: 22px; line-height: 22px; padding-left: 24px } .section-featured-post label:before { position: absolute; top: -1px; left: 0; display: inline-block; content: " "; width: 6px; height: 22px; margin-right: 18px; background-color: #15b8c3 } .blog-post-listing { justify-content: center } .blog-post-listing .alm-paging-content { display: flex; flex-wrap: wrap; justify-content: center } .blog-post-listing .post-item { width: 390px; margin: 0 30px 30px } a.alm-filters-edit { display: none !important } .section-blog-posts .alm-btn-wrap { display: block !important; visibility: visible !important; max-width: 1740px; margin: 0 auto; border-top: 1px solid #ccc; padding-top: 50px; padding-bottom: 60px } ul.blog-post-paging li { height: 20px; border-right: 1px solid #ccc } ul.blog-post-paging li:last-of-type { border-right: none } ul.blog-post-paging li a { font-size: 22px; font-weight: 700; color: #4c4c4c; border: none !important; line-height: 20px; padding: 0 30px !important; background: 0 0 !important } ul.blog-post-paging li a:hover, ul.blog-post-paging li.active a { color: #d13732 !important } .blog-filters { max-width: 1740px; margin: 0 auto 65px; padding-bottom: 30px; border-bottom: 1px solid #ccc } #alm-filters-blogfilters { display: flex; justify-content: space-between; align-items: center } #alm-filter-1 { display: flex; flex-grow: 1 } #alm-filter-1 h3 { font-size: 22px; font-weight: 400; text-transform: uppercase; margin: 0 10px 0 0; padding: 0 } #alm-filter-1 ul { display: flex; align-items: center; margin-top: -2px } #alm-filter-1 ul li { margin: 0 20px 0 0 } #alm-filter-1 ul li a { font-size: 22px; font-weight: 400; color: #393939; padding: 0 0 0 25px } #alm-filter-1 ul li a:hover { text-decoration: underline; color: #d13732 } #alm-filter-1 ul li a.active { color: #d13732 } #alm-filter-1 ul li a:after { top: 8px; border-color: #000 } #alm-filter-2 { height: 54px; width: 355px; border-left: 1px solid #ccc; padding-left: 40px } #alm-filter-2 input#search-text { height: 54px; border: none; font-size: 18px; padding: 10px 50px 10px 25px; border-bottom: 3px solid #d03732; background: #f3f3f3 } #alm-filter-2 .alm-filter--text-wrap button { margin-left: -40px; border: none; font-size: 0; box-shadow: none; background: url('/wp-content/themes/cylogy/img/icons/icon-search-red.png') center center no-repeat } .section-404 { padding-bottom: 150px } footer.footer { padding-bottom: 50px; background: #252525 } footer.footer .footer-section-top .footer-info { flex-basis: 33%; line-height: 2em } footer.footer .footer-section-top .footer-info .logo { margin-bottom: 54px } footer.footer .footer-section-top .footer-nav { flex-basis: 33%; align-self: flex-end; padding-top: 60px } footer.footer .footer-section-top .footer-nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 } footer.footer .footer-section-top .footer-nav ul li { position: relative; flex-basis: 50%; padding-bottom: 22px } footer.footer .footer-section-bottom { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 50px; padding-top: 50px } footer.footer .footer-section-bottom div { flex-basis: 33% } *, :after, :before { -moz-box-sizing: border-box; box-sizing: border-box } .clear:after, .clear:before { content: ' '; display: table } .clear:after { clear: both } img { vertical-align: bottom } a:active, a:focus, a:hover, input:focus { outline: 0 } @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none) { .service-block.style-3 { flex-direction: row; align-items: flex-start !important; margin-bottom: 50px } .service-block.style-3 .block-col:last-of-type { width: 85%; display: block; background: #f2f2f2; padding: 90px; align-self: flex-end; margin-top: 0; z-index: 45 } .service-block.align-left.style-3 .block-col:first-of-type { margin-top: 60px } .service-block.align-right.style-3 .block-col:first-of-type { order: 2 !important } .service-block.align-right.style-3 .block-col:last-of-type { order: 1 !important } .service-block.align-left.style-3 .block-col:last-of-type { margin-left: -50px } #alm-filter-2 .alm-filter--text-wrap button { position: relative; left: -40px; margin-left: 0 } .section-cta { min-height: auto } .section-cta .section-col:first-of-type { max-width: 70%; flex-grow: 0 } .section-cta .section-col:first-of-type * { max-width: 100% } .section-cta .section-col:last-of-type { min-width: 30% } } @media only screen and (min-width:1023px) { header.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999 } header.header .logo { width: 132px; transition: .4s } header.header nav.nav.desktop { padding-left: 20px; transition: .4s } header.header .utility-nav { margin-bottom: 22px } header.header .utility-nav>ul>li { position: relative; font-size: 16px; font-weight: 500; padding-right: 10px; padding-left: 10px } header.header .utility-nav>ul>li:before { position: absolute; display: inline-block; content: " "; left: 0; top: 2px; width: 1px; height: 20px; background: rgba(255, 255, 255, .2) } header.header .utility-nav>ul>li:first-of-type:before { display: none } header.header .utility-nav>ul>li:last-of-type { padding-right: 0 } header.header .primary-nav>ul>li>a, header.header .utility-nav>ul>li>a, header.header.scroll .primary-nav ul li>a, header.header.scroll .utility-nav ul>li a { color: #fff } header.header .primary-nav>ul>li { font-size: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-left: 62px } header.header .primary-nav>ul>li:first-child { margin-left: 0 } .error404 header.header .utility-nav ul>li>a, .header-dark header.header .utility-nav ul>li>a { color: rgba(0, 0, 0, .7) } .error404 header.header .primary-nav ul>li>a, .header-dark header.header .primary-nav>ul>li>a { color: #000 } header.header .primary-nav>ul>li.current_page_item>a, header.header .primary-nav>ul>li>a:hover { text-decoration: underline } .error404 header.header .utility-nav>ul>li:before, .header-dark header.header .utility-nav>ul>li:before { background: rgba(0, 0, 0, .2) !important } header.header.scroll { background: rgba(37, 37, 37, .7) } header.header.scroll .logo { width: 70px } header.header.scroll .utility-nav { margin-bottom: 10px } header.header.scroll .utility-nav a { font-size: 12px } header.header.scroll .utility-nav ul>li:before { background: rgba(255, 255, 255, .2) } .primary-nav>ul>li { position: relative } nav.nav.desktop .primary-nav .sub-menu { position: absolute; display: flex; flex-direction: column; left: 50%; transform: translateX(-50%); top: -9999px; width: auto !important; min-width: 300px; padding-top: 10px; padding-bottom: 10px; background: rgba(19, 183, 194, .9); transition: opacity .4s; opacity: 0 } nav.nav.desktop .primary-nav ul>li:hover>.sub-menu { top: 50px; opacity: 1 } nav.nav.desktop .primary-nav ul>li>a { padding-bottom: 20px } nav.nav.desktop .primary-nav ul>li:hover>a { text-decoration: underline; cursor: pointer } nav.nav.desktop .primary-nav .sub-menu:before { position: relative; display: inline-block; content: " "; top: -25px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 15px 15px; padding: 0; border-color: transparent transparent #13b7c2; opacity: .9; z-index: -1 } nav.nav.desktop .primary-nav .sub-menu:after { position: absolute; top: -25px; left: 0; width: 100%; height: 25px; content: " "; z-index: -1 } nav.nav.desktop .primary-nav .sub-menu li { display: flex; width: 100% } nav.nav.desktop .primary-nav .sub-menu li:first-of-type { margin-top: -10px } nav.nav.desktop .primary-nav .sub-menu li a { display: block; width: 100%; color: #fff; font-weight: 400; text-decoration: none; padding: 10px 20px; transition: .4s } nav.nav.desktop .primary-nav .sub-menu li a:hover { text-decoration: none; background: rgba(255, 255, 255, .3) } li#menu-item-339 .sub-menu { min-width: 330px } } @media only screen and (max-width:1100px) { .padding-standard, .section-full-width, main { padding-right: 20px; padding-left: 20px } .padding-vertical-large, .padding-vertical-medium, .padding-vertical-small, .padding-vertical-x-large { padding-top: 40px; padding-bottom: 40px } .section-full-width { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px } .image-slider { width: calc(100% - 60px) } .logo-slider { width: calc(100% - 100px) } .image-slider .slick-prev { left: -40px } .image-slider .slick-next { left: initial; right: -40px } .logo-slider .slick-arrow { width: 30px; height: 30px; background-size: 16px auto } .logo-slider .slick-prev { left: -50px } .logo-slider .slick-next { left: initial; right: -50px } .section-project-hero { width: calc(100% - 22px); margin-left: 132px; justify-content: space-between; padding-right: 0; padding-left: 0 } .section-home-clients { padding: 0 0 100px } .section-home-clients .section-row { flex-direction: column } .section-home-clients .section-row .section-col:first-of-type { flex-basis: 100%; max-width: 100vw; padding: 80px 20px } .section-home-clients .section-logos { flex-wrap: wrap; justify-content: center !important; align-items: center; min-width: 200px } .section-home-clients .section-logos img { margin-bottom: 50px } } @media only screen and (max-width:1023px) { header.header { position: absolute; top: 0; left: 0; width: 100% } header.header .logo { width: 132px; min-width: 50px !important } button#responsive-menu-button { width: 30px !important; height: 30px !important; right: 20px !important } .responsive-menu-box { width: 20px !important; height: 20px !important } button#responsive-menu-button .responsive-menu-box { color: #fff !important } .responsive-menu-inner, .responsive-menu-inner:after, .responsive-menu-inner:before { width: 20px !important; height: 3px !important; border-radius: 0 !important } .responsive-menu-inner::after, .responsive-menu-inner::before { margin-left: -5px } .responsive-menu-inner { left: 5px !important; width: 15px !important } .responsive-menu-inner::before { top: -10px !important } .responsive-menu-inner::after { bottom: -10px !important } } .responsive-menu-boring.is-active .responsive-menu-inner::after { bottom: -10px !important; transform: rotate(0) !important } .responsive-menu-boring.is-active .responsive-menu-inner::before { top: -10px !important; opacity: 1 !important; transform: rotate(0) !important } .responsive-menu-boring.is-active .responsive-menu-box { top: 2px; left: 1px; transform: rotate(-45deg) !important } .header-dark .responsive-menu-boring .responsive-menu-inner, .header-dark .responsive-menu-boring .responsive-menu-inner::after, .header-dark .responsive-menu-boring .responsive-menu-inner::before { background: #000 !important } .responsive-menu-boring.is-active .responsive-menu-inner, .responsive-menu-boring.is-active .responsive-menu-inner::after, .responsive-menu-boring.is-active .responsive-menu-inner::before { background: #e31e25 !important } #responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link { text-transform: uppercase; height: 60px !important; line-height: 60px !important; border-bottom: 1px solid #e5e5e5 !important } #responsive-menu-additional-content { padding-top: 0 !important } #responsive-menu-additional-content .logo { width: 70px } #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow { top: 16px !important; right: 22px !important } #responsive-menu-container #responsive-menu li.responsive-menu-item a .responsive-menu-subarrow img { width: 15px !important; height: auto !important } @media only screen and (max-width:1300px) { .blog-filters #alm-filters-blogfilters { max-width: 100%; flex-direction: column } #alm-filter-2 { border-left: none; padding-left: 0 } } @media only screen and (max-width:1022px) { .post-meta .post-author, .section-portfolio-grid .alm-reveal .section-col .grid-item, .service-block { margin-bottom: 20px } .full-width-responsive { width: calc(100% + 40px) !important; margin-right: -20px !important; margin-left: -20px !important; padding-right: 20px !important; padding-left: 20px !important } .hide-responsive { display: none !important } .hide-desktop { display: inherit !important } .padding-vertical-xlarge { padding-top: 50px; padding-bottom: 50px } .service-block { flex-direction: column; justify-content: space-between } .service-block .block-col:first-of-type { width: calc(100% - 20px); margin-left: 0 } .service-block .block-col:last-of-type { width: 100%; margin-top: 40px } .service-block .block-col .block-image, .service-block.align-right .block-col .block-image { width: calc(100% + 40px); margin-right: -20px; margin-left: -20px; padding: 0 !important } .service-block .block-col .block-image { top: 0 !important; left: 0 !important; right: 0 !important } .service-block.align-right .block-col:first-of-type { order: 1; margin-left: 0; margin-right: 0 } .service-block.align-right .block-col:first-of-type, .service-block.style-4.align-right .block-col:first-of-type { align-self: center } .service-block .block-col .block-col-content { padding-right: 20px; padding-left: 20px } .service-block .block-col .block-col-content p, .service-block.style-4 .block-col:last-of-type p { font-size: 20px } .service-block.style-2 .block-col:first-of-type, .service-block.style-2 .block-col:last-of-type { width: 100% } .service-block.style-2 .block-col:last-of-type { margin-top: 0 !important; margin-right: 0 !important; margin-left: 0 !important } .service-block.style-3 .block-col:first-of-type { width: 100%; margin-left: 0; order: 1 !important; z-index: 44 } .service-block.style-3 .block-col:last-of-type { width: 100%; padding: 20px; align-self: center; margin-top: 0; order: 2 !important } .service-block.style-4 { align-content: flex-start !important } .service-block.style-4 .block-col { margin-top: 0 !important; margin-bottom: 0 !important; z-index: 9 } .service-block.style-4 .block-col:last-of-type { padding: 40px 0; align-self: center !important } .flip-card-back, .flip-card-back:before, .section-who-services .section-col:last-of-type, .service-block.style-1 .block-col .block-image::before { display: none } .contact-page-information, .section-career-testmionial, .section-related-projects ul, .section-who-services { flex-direction: column } .section-who-services .section-col:first-of-type { display: flex; justify-content: center; width: 100% } .section-who-services .section-col:first-of-type .section-content { max-width: 100% } .section-team-members { margin-top: 40px; padding-top: 20px; padding-bottom: 20px } .section-team-members ul li { width: calc(50% - 20px); padding: 0 10px } .section-testimonial .section-content .testimonial-text { padding: 30px 0; line-height: 1.3em; font-size: 18px !important; background-image: url('/wp-content/themes/cylogy/img/icons/icon-quote-blue-left.png'), url('/wp-content/themes/cylogy/img/icons/icon-quote-blue-right.png'); background-repeat: no-repeat, no-repeat; background-position: left top, right bottom; background-size: 20px auto, 20px auto } .section-portfolio-grid .alm-reveal { display: flex; flex-direction: column; justify-content: space-between; align-items: space-between } .section-portfolio-grid .alm-reveal .section-col-1 { justify-content: space-between; margin-right: 0 } .section-portfolio-grid .alm-reveal .section-col-1 .grid-item { width: calc(50% - 10px) } .section-portfolio-grid .alm-reveal .section-col-2 { min-width: 100%; margin-left: 0; justify-content: space-between; align-content: stretch } .section-technology-grid { padding-right: 0; padding-left: 0 } .section-featured-post, .section-project-hero { margin-right: -20px; margin-left: -20px; padding-right: 20px; width: calc(100% + 40px) } .flip-card:hover .flip-card-inner { transform: rotateY(0) } .section-open-positions ul li { flex-direction: column; align-items: flex-start; padding: 30px 0; margin-bottom: 30px; border-bottom: 1px solid #c2c2c2 } .section-open-positions label { margin-bottom: 8px } .section-open-positions ul li.li-values .li-column { width: 100% !important; font-size: 20px !important; font-weight: 300 !important; text-align: left !important; padding-bottom: 18px } .section-career-testmionial .section-col { width: 100% !important; align-items: flex-start !important; margin: 0 !important; padding-right: 0 !important } .section-career-testmionial .section-col:first-of-type { align-items: center !important; margin-bottom: 50px !important } .section-career-testmionial .section-col .section-content { font-size: 20px !important; background-size: 20px auto; padding: 40px 0 } .section-career-testmionial .testimonial-author { padding: 35px 0 0 !important } .contact-page-information .contact-col { flex-basis: 100% !important; min-width: 100% !important; justify-content: flex-end; padding: 0 !important } .contact-page-information .contact-col:first-of-type { margin-bottom: 40px; border-right: none !important } .contact-page-information .contact-col:last-of-type { border: none !important } .icon-tabs li span { font-size: 16px } .section-featured-post { padding-top: 30vw; padding-left: 20px; background-position: center top; background-size: 100% auto } .section-featured-post .section-content { position: relative; width: 100%; max-width: 100%; align-self: center; padding: 40px 20px; margin-top: 0; margin-left: auto; margin-right: auto } #alm-filter-2 { display: block; width: 355px } #alm-filter-2 select { width: 355px } #alm-filter-2 .alm-filter--title { text-align: center } #alm-filter-2 input { margin-left: -10px } .post-meta { flex-direction: column; align-items: flex-start !important } .blog-post-listing .post-item { width: calc(50% - 20px); margin: 0 10px 30px } .single-post article { padding: 0 20px } .section-heading-post h1 { font-size: 36px !important } .single-post .section-post-content p { line-height: 1.4em } .blog-intro-text p { font-size: 22px !important } .post-tags a { font-size: 16px; padding: 10px 15px } .section-related-posts .related-post { width: calc(50% - 20px); margin: 50px 10px 0 } .section-project-hero { justify-content: space-between; padding-left: 20px } .project-information { flex-direction: column; padding-left: 20px } .project-information .section-col:first-of-type, .project-information .section-col:last-of-type { width: 100%; padding-right: 0; padding-left: 0 } .project-information .project-facts li, .section-project-about .section-content p { font-size: 18px } .section-logos ul { margin-top: 30px; justify-content: center } .section-project-about { width: calc(100% + 40px); margin: 0 -20px } .section-project-about img.main-image { width: 100%; border-left: none } .section-project-about .section-content { flex-direction: column; width: 100%; padding: 20px; margin-top: 0 } .section-project-about .section-content .section-icon { margin-right: 0; padding-top: 30px; padding-bottom: 10px } .section-project-about .section-content .section-icon img { width: auto; max-height: 80px } .section-related-projects ul li { position: relative; width: 100%; margin-right: 0 !important; margin-left: 0 !important; padding-top: 0; padding-left: 0; margin-bottom: 20px } .section-related-projects li .project-logo, .section-related-projects li:hover .project-logo { margin: 0 !important } } @media only screen and (max-width:768px) { .section:first-of-type { padding-top: 180px } h1 { font-size: 34px } .section-heading .section-content h2, h2 { font-size: 34px !important; margin-bottom: 20px } .section-page-heading p, .section-project-hero .section-content .section-content-text p { font-size: 20px } h3 { font-size: 30px; margin-bottom: 20px } label { font-size: 18px } .gap-md, .gap-sm, .gap-xsm { height: 20px } .gap-lg { height: 30px } .gap-xl { height: 40px } .gap-xxl { height: 50px } .slick-dots { margin: 20px auto 0 } .section-home-services .section-content::after, .section-related-projects ul li .featured-image:after, .section-service-icons, .section-tech-content:before { display: none } .section-hero.section-background { padding-top: 160px; padding-bottom: 80px } .footer-section-bottom, .footer-section-top, .section-home-technology, .section-partner-bg-content { flex-direction: column } .section-home-technology .section-col { flex-basis: 100% !important; width: 100% } .section-home-technology .section-col:first-of-type { margin-bottom: 20px } .section-home-technology.img-left .section-col:first-of-type { order: 1 } .section-home-technology .section-col .section-col-content, .section-partner-bg-content .section-col:last-of-type .section-content { max-width: 100% } .section-home-services { margin-top: 20px; padding-bottom: 20px } .section-home-services img { width: calc(100% + 40px); max-width: 200%; margin-top: 0; margin-right: -20px; margin-left: -20px } .hometestimonial .slick-slide { margin: 0 20px; padding: 0 30px 0 0; background-image: url('/wp-content/themes/cylogy/img/icons/icon-quote-white-left.png'), url('/wp-content/themes/cylogy/img/icons/icon-quote-white-right.png'); background-repeat: no-repeat, no-repeat; background-position: left 60px, right bottom } .hometestimonial .testimonial-text { padding-top: 20px; font-size: 18px } .hometestimonial .slide-container .testimonial-author, .hometestimonial .slide-container .testimonial-text, .hometestimonial .slide-container .testimonial-title { padding-left: 0 } .service-block.style-2 .block-col:last-of-type { padding: 30px 10px } .section-contact-form .section-row { flex-wrap: wrap; margin-bottom: 0 } .section-contact-form .section-row .section-col { width: 100% !important; margin-right: 0 !important; margin-bottom: 20px } .section-team-members ul li { width: 100%; padding: 0 10px } .team-member-modal-bg { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99998; background: rgba(0, 0, 0, .7) } .team-modal { width: 95%; max-height: 95vh; margin: auto; border: 2px solid #15b8c3; padding: 40px 20px 20px; z-index: 99999 } .team-modal .team-modal-content { max-height: calc(95vh - 60px); overflow-y: scroll; padding-right: 10px } .icon-tab-content { display: block !important; margin-bottom: 40px } .flip-card { width: 100%; height: 45vh; min-height: 300px } .success-slider { width: 80%; height: 300px } .success-slider .slick-arrow { top: 40%; transform: translateY(-50%); width: 30px; height: 30px; background-size: 20px auto } .success-slider .slick-prev { left: -30px } .success-slider .slick-next { left: initial; right: -30px; background-size: 20px auto } .section-featured-project { position: relative } .section-featured-project .section-col:first-of-type { width: 100%; z-index: 50 } .section-portfolio-grid .alm-reveal .grid-item { min-width: 100% } .section-project-hero { position: relative; overflow: hidden } .section-project-hero .section-content { display: flex; flex-grow: 0; width: 100%; align-items: center; padding: 50px 20px; z-index: 50 } .section-project-hero .section-content .section-content-text h2 { font-size: 28px !important } .section-project-hero .section-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; flex-basis: 100%; justify-content: flex-end; align-items: flex-end; padding-top: 0; z-index: 49 } .section-project-hero .section-image img { max-width: 400px; height: auto } .section-project-hero .section-image:before { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5) } .section-related-projects .project-logo { position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; width: 180px; height: 120px; background-size: 90% auto } .section-related-projects ul li .featured-image img, .section-related-projects ul li:hover .featured-image img { margin: 0 } .section-tech-content { flex-wrap: wrap; margin-bottom: 20px } .section-tech-content .section-col:first-of-type { min-height: 350px } .section-tech-content .section-col { width: 100% !important } .section-tech-content .section-col:last-of-type { padding: 50px 20px; align-self: flex-end } .section-tech-content .section-col:last-of-type .section-content { max-width: 100%; align-self: flex-start } .section-partner-bg-content .section-col { width: 100% !important; text-align: center } .blog-post-listing .post-item { width: 100%; margin: 0 0 30px } .section-related-posts .related-post { width: 100%; margin: 50px 0 0 } .image-slider { width: 100% } footer.footer .footer-section-top .footer-info { flex-basis: 100% } footer.footer .footer-section-top .footer-nav { flex-basis: 100%; align-self: flex-start } .footer-section-bottom div { width: 100%; text-align: left !important; padding-bottom: 30px } } @media only screen and (max-width:480px) { header.header .logo { width: 90px; min-width: 50px !important } .section:first-of-type { padding-top: 150px } .single-project .image-slider.slider { display: none } #alm-filter-2 { width: 100% } .section-heading-post h1 { font-size: 30px !important } .section-cta { flex-direction: column } .section-cta .section-col { width: 100%; min-width: 100% } .section-cta .section-col:last-of-type { min-height: 200px } .section-cta .section-col:last-of-type:after { width: 100%; background: -moz-linear-gradient(top, #fff 0, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 99%); background: -webkit-linear-gradient(top, #fff 0, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 99%); background: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 99%) } } a:active, a:focus { outline: 0 !important } .alignnone, .wp-caption.alignleft, .wp-caption.alignnone, a img.alignnone { margin: 5px 20px 20px 0 } .aligncenter, div.aligncenter { display: block; margin: 5px auto } .alignright, a img.alignright { float: right; margin: 5px 0 20px 20px } .alignleft, a img.alignleft { float: left; margin: 5px 20px 20px 0 } #toc_container, a img.aligncenter { margin-left: auto; margin-right: auto } a img.aligncenter { display: block } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center } .wp-caption.alignright { margin: 5px 0 20px 20px } .wp-caption img { border: 0; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto } .gallery-caption, .wp-caption .wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px } @media print { blockquote, img, pre, tr { page-break-inside: avoid } * { background: 0 0 !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")" } abbr[title]:after { content: " (" attr(title) ")" } .ir a:after, a[href^="#"]:after, a[href^="javascript:"]:after { content: "" } blockquote, pre { border: 1px solid #999 } thead { display: table-header-group } img { max-width: 100% !important } @page { margin: .5cm } h2, h3, p { orphans: 3; widows: 3 } h2, h3 { page-break-after: avoid } } .grecaptcha-badge { opacity: 0 } .optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle button { border-bottom: 1px solid #999; padding-bottom: 1px; color: #fff !important; cursor: pointer; outline: 0 !important } @media screen and (max-width:1023px) { header.header nav.nav.desktop { display: none !important } } .service-block.align-left .block-col .block-image img { border-radius: 0 25px 25px 0 } .service-block.align-right .block-col .block-image img { border-radius: 25px 0 0 25px } .service-block.align-left .block-col:first-of-type { margin-left: -110px } .service-block.align-right .block-col:first-of-type { margin-right: -110px } #toc_container { background: #f9f9f9; border: 1px solid #aaa; display: table; font-size: 95%; margin-bottom: 1em; padding: 20px; max-width: fit-content } .toc_title { font-weight: 700; text-align: center } #toc_container li, #toc_container ul, #toc_container ul li { list-style: none !important; margin-left: -20px }