/****************************************************************** Site Name: Braftonium Template Author: Yvonne! Stylesheet: Base Mobile Stylesheet Be light and don't over style since everything here will be loaded by mobile devices. You want to keep it as minimal as possible. This is called at the top of the main stylsheet and will be used across all viewports. ******************************************************************/ /* ========================================================================== General Styles ========================================================================== */ body { font-family: 'Calibri'; } main, .home body:not(.page-template-full-width) main { padding: 0 !important; margin: 0 !important; } /* ========================================================================== WordPress Body Classes - style a page with a class ========================================================================== */ .rtl {} /* for sites that are read right to left (i.e. hebrew) */ .home {} /* home page */ .blog {} /* blog template page */ .archive {} /* archive page */ .date {} /* date archive page */ .date-paged-1 {} /* replace the number to the corresponding page number */ .search {} /* search page */ .search-results {} /* search result page */ .search-no-results {} /* no results search page */ .search-paged-1 {} /* individual paged search (i.e. body.search-paged-3) */ .error404 {} /* 404 page */ .single {} /* single post page */ .postid-1 {} /* individual post page by id (i.e. body.postid-73) */ .single-paged-1 {} /* individual paged single (i.e. body.single-paged-3) */ .attachment {} /* attatchment page */ .attachmentid-1 {} /* individual attatchment page (i.e. body.attachmentid-763) */ .attachment-mime-type {} /* style mime type pages */ .author {} /* author page */ .author-nicename {} /* user nicename (i.e. body.author-samueladams) */ .author-paged-1 {} /* paged author archives (i.e. body.author-paged-4) for page 4 */ .category {} /* category page */ .category-1 {} /* individual category page (i.e. body.category-6) */ .category-paged-1 {} /* replace the number to the corresponding page number */ .tag {} /* tag page */ .tag-slug {} /* individual tag page (i.e. body.tag-news) */ .tag-paged-1 {} /* replace the number to the corresponding page number */ .page-template {} /* custom page template page */ .page-template-page-php {} /* individual page template (i.e. body.page-template-contact-php */ .page-paged-1 {} /* replace the number to the corresponding page number */ .page-parent {} /* parent page template */ .page-child {} /* child page template */ .parent-pageid-1 {} /* replace the number to the corresponding page number */ .logged-in {} /* if user is logged in */ .paged {} /* paged items like search results or archives */ .paged-1 {} /* individual paged (i.e. body.paged-3) */ /* ========================================================================== Layout & Grid Styles ========================================================================== */ .wrap { width: 94%; margin: 0 auto; padding-left: 20px !important; padding-right: 20px !important; overflow-wrap: normal; word-wrap: normal; -webkit-hyphens: none; -ms-hyphens: none; -moz-hyphens: none; hyphens: none; } /* ========================================================================== Link Styles ========================================================================== */ a, a:visited { text-decoration: none; color: $link-color; @include transition(all 0.2s ease-in-out); /* on hover */ &:hover, &:focus { color: $link-hover; } /* mobile tap color */ &:link { -webkit-tap-highlight-color : rgba($color: $black, $alpha: .3); } } a.blue-btn { color: $white!important; text-decoration: none!important; } /* ========================================================================== Typography ========================================================================== */ ul { list-style-type: disc; ol { margin-top: 0; } ul { margin-top: 0; list-style-type: circle; ul { list-style-type: disc; } } } ol { list-style-type: decimal; ol, ul { margin-top: 0; } } section > ul { margin: 0 0 1.5em 1.5em; } .widget { .menu button { display: none; } ul { li { ul { padding-left: 1em; } } } } .rotate { @include rotate(90); @include transition(all 0.2s ease-in-out); } /* ========================================================================== H1, H2, H3, H4, H5 styles ========================================================================== */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: 'Oswald-Bold'; a, a:visited { text-decoration: none; color: inherit; } &:first-child { //margin-top: 0; } } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 700; } h5, h6, .h5, .h6 { text-transform: none; } h1 { font-size: 58px; line-height: 68px; } h2 { color: #1E206F; font-size: 36px; line-height: 46px; } h3 { font-size: 28px; line-height: 38px; } /* Widgets */ .nextwidget { margin-bottom: 0; .widget .widget-title { margin: 0; padding: 5px 0; } } /* ========================================================================== Content Styles ========================================================================== */ article { margin: 0; } .page .hentry header { display: none; } /* Containers */ .midi-container { display: block; margin: 0 auto;; max-width: 600px; width: 100%;; } .midi-container { display: block; margin: 0 auto;; max-width: 860px; width: 100%;; } .maxi-container { display: block; margin: 0 auto;; max-width: 991px; width: 100%;; } /* ========================================================================== Header Styles ========================================================================== */ #upper-header { background: #e6ecee; min-height: 55px; padding: 10px 0 8px; width: 100%; .nextwidget { .widget { float: right; max-width: 280px; width: 100%; } } } .header { input { background: transparent; border: 1px solid #80949E; } .searchform { display: block; float: right; input { border-radius: 20px; display: inline-block; outline: none; padding: 0 50px 0 15px; max-width: 200px; } #searchsubmit { background-color: transparent; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: 0; outline: 0; display: inline-block; margin-left: -50px; padding: 5px 15px 0; position: absolute; svg { color: #80949E; } &:hover, &:focus { border: 0; outline: 0; } } } .nextwidget { .widget { .widget-title { display: block; font-family: 'Oswald'; float: left; font-size: 15px; font-weight: normal; line-height: 26px; margin: 0 15px 0; padding: 3px 0px; a { color: #323944; &:hover, &:focus { color: #7e0023; } } } } } } #inner-header { background: #fff; width: 100%; } /* ========================================================================== Navigation Styles ========================================================================== */ nav { .nav { float: right; padding: 0 0 20px; width: 100%; li { margin-right: 10px; margin-left: 10px; a { color: #1E206F; font-family: 'Oswald'; text-align: center; width: calc(100% - 20px); &:focus, &:hover { color: #7e0023; font-weight: normal; font-family: 'Oswald'; } } &.current-menu-item > a, &.current_page_item > a, &.current_page_ancestor > a { color: #7e0023; font-weight: normal; font-family: 'Oswald'; } ul.sub-menu { background: #fff; } } button { color: #1E206F; top: 2px; } } } /* ========================================================================== Banners ========================================================================== */ /* Video banner */ section.brafton_block.homepage-banner .wrap { padding: 0; margin: 0 auto; } .homepage-banner { //background: rgba(50, 57, 68, 0.75); padding: 180px 0 80px; position: relative; overflow: hidden; .black { background: transparent; } h1 { font-family: 'Oswald-Bold'; font-size: 64px; max-width: 500px; line-height: 74px; margin-top: 0; font-weight: 700; } h5 { color: #fff; font-size: 16px; margin: 0; text-transform: uppercase; } #video { top: auto; } } /* Image banner */ .home { .banner { text-align: left; } } .home .banner .wrap, .home .page-template-full-width .banner .wrap { padding: 220px 0 120px; } .banner h1, .page-template-full-width .banner h1, .home .banner h1, .home .page-template-full-width .banner h1 { max-width: 760px; text-align: left; text-transform: none; } .home .banner p, .home .page-template-full-width .banner p { font-family: 'Oswald-Bold'; font-size: 64px; max-width: 500px; line-height: 74px; font-weight: 700; } .banner p, .page-template-full-width .banner p { font-family: 'Oswald-Bold'; font-size: 64px; max-width: 500px; line-height: 74px; font-weight: 700; } /* ========================================================================== Forms, Buttons and Input Fields ========================================================================== */ .wp-block-button__link { background-color: #1E206F; border-radius: 5px; font-family: 'Oswald'; padding: 5px 50px; } input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea, .field { border: 1px solid #444c5d; border-radius: 20px; padding-left: 15px !important; padding-right: 15px !important; } .blue-btn, .hero .read-more, .comment-reply-link, #submit, .button, .btn { background-color: #1E206F; color: #fff; opacity: 1; &:focus, &:hover { opacity: 0.8; outline: 0 !important; } } .btn .blue-btn, .hero .read-more, .comment-reply-link, #submit, .button, a.button { background-color: transparent; border: 1px solid #1E206F; border-radius: 5px; color: #1E206F !important; text-align: center; padding: 5px 50px; width: 100%;; } .btn:hover, .btn:focus, .blue-btn:hover, .blue-btn:focus, .hero .read-more:hover, .hero .read-more:focus, .comment-reply-link:hover, .comment-reply-link:focus, #submit:hover, #submit:focus, .button:hover, .button:focus, a.button:focus, a.button:hover { background-color: #1E206F; border: 1px solid #1E206F; color: #fff !important; } /* ========================================================================== Grid ========================================================================== */ .full { } .quarter { } .third { } .half .list-item { display: flex !important; flex-direction: column !important; } .half .list-item .image { /* border: 1px solid red; */ flex: 1; } .half .list-item .text { /* border: 1px solid red; */ flex: 2; } .image-right { flex-direction: column-reverse; } /* ========================================================================== Content ========================================================================== */ .no-padding, .no-padding .wrap { padding-top: 0 !important; padding-bottom: 0 !important; } .wrap { max-width: 1080px; width: 100%; } .wp-block-group { padding: 60px 0; h2 { margin-bottom: 0; text-align: center; } } .home article > header.article-header { display: none } .intro-section { background-color: #E9EEF0; padding: 60px 0; text-align: center; h5 { font-size: 17px; margin-top: 0; } } section.brafton_block { .wrap { padding: 1.5em 0 !important } &.maroon h2 { border-left: 15px solid #7E0023; padding-left: 20px; } .list-item { .image { height: 100%; img { @media screen and (max-width:768px) { max-width: 80%; } } } } } .maroon { .wp-block-image img { border-bottom: 15px solid #7E0023; width: 100%; } h3 { border-left: 15px solid #7E0023; padding-left: 20px; } ul { list-style-type: none; li { &:before { content: "■"; color: #7E0023; font-weight: bold; display: inline-block; width: 1em; margin-left: 0; } } } .wp-block-button { margin-top: 60px; } .wp-block-button__link { background-color: #7E0023; border-radius: 5px; opacity: 1; padding: 5px 50px; &:hover, &:focus { opacity: 0.7; } } } .blue { .wp-block-image img { border-bottom: 15px solid #0000A7; width: 100%; } h3 { border-left: 15px solid #0000A7; padding-left: 20px; } ul { list-style-type: none; li { &:before { content: "■"; color: #0000A7; font-weight: bold; display: inline-block; width: 1em; margin-left: 0; } } } .wp-block-button { margin-top: 60px; } .wp-block-button__link { background-color: #0000A7; border-radius: 5px; opacity: 1; padding: 5px 50px; &:hover, &:focus { opacity: 0.7; } } } .green { .wp-block-image img { border-bottom: 15px solid #008000; width: 100%; } h3 { border-left: 15px solid #008000; padding-left: 20px; } ul { list-style: none; li { &:before { content: "■"; color: #008000; font-weight: bold; display: inline-block; width: 1em; margin-left: 0; } } } .wp-block-button { margin-top: 60px; } .wp-block-button__link { background-color: #008000;; border-radius: 5px; opacity: 1; padding: 5px 50px; margin-top: 48px; &:focus, &:hover { opacity: 0.7; } } } .yellow { .wp-block-image img { border-bottom: 15px solid #ECC323; width: 100%; } h3 { border-left: 15px solid #ECC323; padding-left: 20px; } ul { list-style-type: none; li { :before { content: "■"; color: #ECC323; font-weight: bold; display: inline-block; width: 1em; margin-left: 0; } } } .wp-block-button { margin-top: 60px; } .wp-block-button__link { background-color: #ECC323; border-radius: 5px; opacity: 1; padding: 5px 50px; &:hover, &:focus { opacity: 0.7 } } } .cta { .container { display: block; } .container > .text, .container > .image { display: block; width: 100%; } .cta-button { display: inline-block; clear: both; margin-top: 20px; position: relative; width: 100%; } } .cta h2 { color: #fff; float: right; text-align: right; max-width: 410px; width: 100%; } .cta p { color: #fff; } .cta .blue-btn { font-family: 'Oswald'; float: right; padding: 5px 50px; } .blog-meta { color: #1E206F; display: block; width: 100%; } .blog--date, .blog--cats { color: #1E206F; display: inline-block; font-size: 14px; line-height: normal; } .blog--date, .blog--cats { color: #1E206F; } .blog--date .far, .blog--cats .far { color: #1E206F; font-size: 14px; line-height: normal; } .blog--cats .fa-bookmark { margin-left: 20px; } .list { h2 { text-align: center; } .list-item { img { margin-bottom: 0; } h3 { font-weight: normal; text-align: center; text-transform: uppercase; } } } .our-services { .container { justify-content: space-evenly; .list { h2 { margin-bottom: 30px; } .count { margin-bottom: 30px; } } } } .our-services.list .container { margin-top: 40px; } .our-services.list .list-item { margin-right: 2.35%; -webkit-flex: 1 1 20%; -ms-flex: 1 1 20%; flex: 1 1 20%; } .our-services.list .list-item a { opacity: 1; } .our-services.list .list-item a:hover, .our-services.list .list-item a:focus { opacity: 0.7; } .our-services.list .list-item img { max-height: 110px; max-width: 110px; } .our-services.list .list-item h3 { color: #1E206F; font-family: 'Oswald'; font-size: 18px; line-height: 28px; } .mejs-container { margin-bottom: 20px; } .recent .list-item { background-color: #fff; border-radius: 5px; } .recent .list-item h3 { color: inherit; line-height: 32px; } .recent .list-item p { display: none; } .blog-listing-section { .list-item { .image { display: none !important; } } &.list { .list-item-content { padding: 20px; } .list-item { h3 { color: #444c5d; margin: 10px 0; font-size: 20px; text-transform: capitalize; line-height: normal; text-align: left; margin-bottom: 20px; } } } } .our-partners { h2 { text-align: center; margin-bottom: 40px; } .wp-block-image { img { @media scareen and (max-width:767px) { display: block; margin: 0 auto; } } } } .request-quote-section { color: #fff; h2 { color: #fff; } .entry-content { p { font-size: 20px; } } } .gform_wrapper { input[type="submit"] { background-color: #fff; border: 1px solid #444c5d; border-radius: 10px; color: #444c5d; font-family: 'Oswald'; float: none; padding: 5px 50px; display: block !important; margin: 0 auto !important; max-width: 200px; width: 100% !important; } li.hidden_label input { margin-bottom: 0; } .gform_wrapper { ul.gform_fields li.gfield { margin: 0; } .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text], .field_sublabel_hidden_label .ginput_complex.ginput_container select { margin-bottom: 0; } textarea.medium { margin-top: 10px; } } } .request-quote-section input[type="submit"]:focus, .request-quote-section input[type="submit"]:hover { background-color: #1E206F; border: 1px solid #1E206F; color: #fff; } .services-listing-grid { position: relative; width: 100%; .container { justify-content: space-evenly; } .image { border: 0; height: 200px; position: relative; @media screen and (max-width:767px) { width: 100%; } &:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(0, 0, 0, .5); } img { height: 100%; object-fit: cover; width: 100%; } } .list-item { position: relative; margin-bottom: 20px !important; -webkit-flex: 1 1 20%; -ms-flex: 1 1 20%; flex: 1 1 20%; } } .services-listing-grid.list h2 { margin-bottom: 60px; } .brafton-block.list-item.center-items{ -webkit-flex: 1 1 20%; -ms-flex: 1 1 20%; flex: 1 1 20%; } .services-listing-grid .list-item .text { position: absolute; height: 100%; width: 100%; align-items: center; display: flex; justify-content: center; z-index: 1; } .services-listing-grid .list-item h3 { font-size: 20px; line-height: 26px; color: #fff; padding: 20px; top: 15px; text-transform: none; display: flex; align-items: center; } section.brafton_block.split-columns { .container { display: block; } .container > .text, .container > .image { -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; margin-left: 2%; margin-top: auto; margin-bottom: auto; } } .wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load { width: 100% !important; height: 100% !important; } .mejs-container { padding-top: 56.25%; } .wp-video, video.wp-video-shortcode { max-width: 100% !important; } video.wp-video-shortcode { position: relative; } .mejs-mediaelement { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mejs-controls { display: none; } .mejs-overlay-play { top: 0; right: 0; bottom: 0; left: 0; width: auto !important; height: auto !important; } .award-list-item .entry-content img { height: auto; max-width: 350px; width: 100%; } .careers-listing { padding-left: 20px; padding-right: 20px; .container { display: block; width: 100%; } } .p-left { padding-left: 20px; @media screen and (min-width:768px) { padding-left: 0; } } .p-right { padding-right: 20px; @media screen and (min-width:768px) { padding-right: 0; } } //section.brafton_block.full-width { section.brafton_block.full-width .container { padding-left: 20px; padding-right: 20px; @media screen and (min-width:768px) { padding-right: 0; padding-left: 0; } } .careers-listing .container > .text, .careers-listing .container > .image { margin: 0 0 40px 0 !important; } .entry-content .contact-details .list-item h3 { text-transform: none; } .entry-content .contact-details .list-item p { text-align: center; } .mejs-overlay-play { background-color: rgba(50, 57, 68, 0.3); } .it-services-list { display: block; .wp-block-column { margin: 0; } } /* ========================================================================== Resources ========================================================================== */ .resource-search .resource-type { padding: 0; .check { border: 1px solid #80949E; border-radius: 20px; } } .post-type-archive-resources #sort-resources, .tax-resource-type #sort-resources { margin: 60px 0; } .post-type-archive-resources .resource-type, .post-type-archive-resources #s, .tax-resource-type .resource-type, .tax-resource-type #s { box-shadow: none !important; } .post-type-archive-resources #s, .tax-resource-type .resource-type, .tax-resource-type #s { border: 1px solid #80949E !important; } .post-type-archive-resources button[form=sort-resources], .tax-resource-type button[form=sort-resources] { margin: 20px 0 0 0 !important; padding-top: 5px; padding-bottom: 5px; } input[type=checkbox]#dropdown:checked ~ .check:after, input[type=checkbox]#dropdown2:checked ~ .check:after { color: #1E206E !important; } input[type=checkbox]#dropdown:checked ~ div, input[type=checkbox]#dropdown2:checked ~ div { padding: 0 20px; } .blog, .archive { .simple { .thumbnail { display: none !important; } .entry-title { background-color: #fff !important; font-size: 28px; line-height: 30px; padding: 15px !important; a { color: #1E206E !important; opacity: 1; &:hover, &:focus { opacity: 0.7; } } } .byline { background-color: transparent !important; color: #7E0023 !important; } .btn { background-color: #1E206F; border-radius: 5px; color: #fff; opacity: 1; padding: 5px 50px; &:hover, &:focus { opacity: 0.7; } } } } .banner p.byline, .page-template-full-width .banner p.byline { font-size: 22px; /*font-size: 18px;*/ /*line-height: 26px;*/ line-height: 32px; max-width: auto; text-align: left; } .ssb-social { a { color: #1E206F; opacity: 1; &:hover, &:focus { opacity: 0.7; } } } .resources { margin: 60px 0 30px; } #inner-content .latest { margin: 0 0 60px; } .check { border: 1px solid #444c5d; border-radius: 20px; box-shadow: none !important; height: 40px; padding: 5px 20px; } .pagination { margin: 40px 0 80px; a, span { color: #1E206F; &:hover, &:focus { background-color: #1E206F;; } } } /* ========================================================================== Footer ========================================================================== */ .footer { background: #333; padding: 50px 0 0; .widget-title { color: #fff; margin-bottom: 20px; text-transform: uppercase; &:nth-of-type(2), &:nth-of-type(3) { display: none; } } ul.menu { li { a { color: #fff; opacity: 1; &:hover, &:focus { color: #fff; opacity: 0.7; } } } } .copyright { background: #1a1a1a; text-transform: uppercase; margin-top: 20px; text-align: center; } .copyright, .copyright-menu { float: none; width: 100%; } .copyright-wrap { background: #1a1a1a; color: #fff; .container { display: block; } .copyright-wrap-item { display: block; width: 100%; &:nth-of-type(2) { } &:nth-of-type(3) { clear: both; float: left; } &:nth-of-type(3) > img { float: left; max-width: 140px; width: 100%; height: auto; } } } } .footer-logo { img { height: auto; margin: 5px 0 0; max-width: 240px; width: 100%; } } .menu-bottom-menu-container { ul { float: none; padding: 23px 0; font-size: 14px; text-align: center; li { display: inline; list-style-type: none; margin-right: 10px; } } } .copyright-section { background: #1a1a1a; padding: 60px 0 20px; } .footer-sm-list { h5 { float: left; margin: 40px 0 0; } } ul.social-navigation { clear: both; float: left; margin: 0 0 40px; li { a { background: #333; border-radius: 20px; padding: 10px; line-height: 0; margin: 1em 0; svg { color: #1a1a1a; font-size: 12px; } } } } /** Overwrites **/ .post-667-block_6033672d524db { .container { @media screen and (max-width:991px) { display: block; } .text { @media screen and (max-width:991px) { flex: 0 0 100%; } } } }