/* Theme Name: Kem Design Services LLC Theme URI: Author: the Development team Author URI: https://wordpress.org/ Description: A theme for WordPress 5. Requires at least: WordPress 4.9.6 Version: 1.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: wp5default Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. WP5 Default is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ @font-face { font-family: 'Gotham-Book'; src: url('assets/fonts/gotham/Gotham-Book.svg#Gotham-Book') format('svg'), url('assets/fonts/gotham/Gotham-Book.ttf') format('truetype'), url('assets/fonts/gotham/Gotham-Book.woff') format('woff'); src: url('assets/fonts/gotham/GothamBook.eot'); src: url('assets/fonts/gotham/GothamBook.eot?#iefix') format('embedded-opentype'), url('assets/fonts/gotham/GothamBook.woff2') format('woff2'); font-weight: normal; font-style: normal; } /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Layouts # Fonts # Buttons # Search # Flexbox # Forms ## Contact Us Form # Menus ## Main Menu ## Social Menu # Header # Banner # Contents # Footer # Inner Pages # Blog Page ## Blog Single Page # Error Page # Responsive --------------------------------------------------------------*/ html {} body {font-family: 'Open Sans', sans-serif; margin: 0 auto; width: 100%; min-width: 320px; font-size: 18px; color: #333;} /*################################### ## Layouts ###################################*/ .screen-reader-text {clip: rect(1px, 1px, 1px, 1px); position: absolute !important; word-wrap: normal !important; overflow: hidden; height: 1px; margin: -1px; padding: 0; width: 1px; border: 0;} .container {width: 100%; max-width: 1630px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;} .grecaptcha-badge {bottom: 57px !important; z-index: 99999;} .home .panel-grid {margin-bottom: 0 !important;} img {transition: all .3s linear; height: auto; max-width: 100%;} input:focus, button:focus, textarea:focus {outline: none;} #cookie-law-info-bar {padding: 8px 25px !important; box-shadow: 0 0 10px #333 !important;} /*################################### ## Fonts ###################################*/ a, a:visited {text-decoration: none !important; text-decoration: none; transition: all .3s linear; color: #333;} a:hover {color: #1A6C98 !important;} a:focus {outline: none !important;} h1, h2, h3, h4, h5, h6 {font-family: 'Gotham-Book', sans-serif; font-weight: normal; line-height: 120%; margin: 0; color: #333;} h1, .home h2 {font-size: 40px} .inner h2 {font-size: 35px;} h3 {font-size: 25px;} h4 {font-size: 18px;} h5 {font-size: 13px;} p, ul, ol {letter-spacing: .02em; line-height: 180%; font-weight: 400; font-size: 18px; color: #333; margin: 0 0 30px;} p:last-of-type {margin-bottom: 0;} .cli-style-v2 {font-size: 10pt !important;} /*################################### ## Buttons ###################################*/ .btn, button.btn {width: auto; min-width: 210px; text-align: center; font-family: 'Gotham-Book', sans-serif; font-weight: 700; font-size: 13px; color: #FFF !important; background: #00A85D; position: relative; z-index: 1; transition: all .3s linear; display: inline-block; padding: 20px 10px; box-sizing: border-box; white-space: nowrap; border: none;} .btn:hover {text-shadow: 0px 5px 10px #000; box-shadow: 0 0 8px #333; color: #FFF !important;} .btn:after {content: "\f061"; font-family: 'Font Awesome 6 Free'; font-weight: 700; color: #FFF; display: inline-block; vertical-align: middle; margin-left: 10px;} .btn::before {content: ""; background: linear-gradient(transparent, rgba(255, 255, 255, .5)); position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all .3s linear; transform: scaleY(0); z-index: -1; transform-origin: top;} .btn:hover::before {transform: scaleY(1);} /*################################### ## Search ###################################*/ .sidebar form, .error-404 form {position: relative; max-width: 700px; margin: 10px auto;} .sidebar input[type="search"], .error-404 input[type="search"] {width: 100%; padding: 5px 10px;} .sidebar input[type="submit"], .error-404 input[type="submit"] {background: #B02D32; border: none; position: absolute; padding: 6px; right: 0; top: 0;} .sidebar .widget:not(:nth-of-type(1)) {background: rgba(255, 255, 255, .5);border-bottom: 1px solid #CCC;padding-bottom: 20px;margin-bottom: 20px; padding: 10px 20px;} .sidebar input[type="submit"], .error-404 input[type="submit"] {transition: all .4s linear;} .sidebar input[type="submit"]:hover, .error-404 input[type="submit"]:hover {box-shadow: 0px 0px 20px #000;} .search #content {text-align: center;} .search #content header {margin-bottom: 20px;} .search #content header .page-description {font-size: 25px; font-weight: 600;} .search #content article {margin-bottom: 30px; box-shadow: 2px 2px 5px #333; padding: 20px; box-sizing: border-box; text-align: left;} .search #content article h2 {margin: 0 !important;} .search-form {display: flex; max-width: 800px; margin: 30px auto 0 !important;} .search-form label {width: 80%;} .search-form input {height: 30px;} .search-form input.search-field {width: 100%; padding: 0 10px; box-sizing: border-box;} .search-form input.search-submit {width: 20%; background: #00A85D; border: none; color: #FFF; position: relative;} /*################################### ## Flexbox ###################################*/ .dflex {display: flex; display: -webkit-flex;} .sb-flex {justify-content: space-between; -webkit-justify-content: space-between;} .sa-flex {justify-content: space-around; -webkit-justify-content: space-around;} .cn-flex {justify-content: center; -webkit-justify-content: center;} .fe-flex {justify-content: flex-end; -webkit-justify-content: flex-end;} .fs-flex {justify-content: flex-start; -webkit-justify-content: flex-start;} .start-align {align-items: flex-start; -webkit-align-items: flex-start;} .cn-align {align-items: center; -webkit-align-items: center;} .end-align {align-items: flex-end; -webkit-align-items: flex-end;} .wrap-flex {flex-wrap: wrap; -webkit-flex-wrap: wrap;} /*################################### ## Forms ###################################*/ form p {margin: 0 0 10px !important;width: 100%;} form label {display: block; color: #FFF;} form input[type="submit"] {transition: all .5s linear;} /*Contact Us Form*/ .ctc-form {text-align: center;max-width: 900px; margin: 0 auto; } .ctc-form input:not([type="checkbox"]):not([type="submit"]), .ctc-form textarea {font-family: 'Open Sans', sans-serif; box-shadow: 2px 2px 2px #000;letter-spacing: .03em; border: 1px solid #000; box-sizing: border-box; border-radius: 0; background: none; font-weight: 400; font-size: 15px; padding: 19px;color: #000; width: 100%; } .ctc-form label {color: #000;} .wpcf7-response-output {text-align: center; background: #fff; color: #333;} .wpcf7-acceptance span.wpcf7-list-item {margin: 0;} .wpcf7-form .wpcf7-spinner {display: none; vertical-align: middle; margin-top: 10px;} .wpcf7-form.submitting .wpcf7-submit {pointer-events: none;} .wpcf7-form.submitting .wpcf7-spinner {display: inline-block;} /*################################### ## Menus ###################################*/ /*Main Menu*/ .main-navigation {} .main-navigation ul {-webkit-justify-content: space-around; justify-content: space-around; display: -webkit-flex; list-style: none; display: flex; margin: 0; padding: 0;} .main-navigation ul#top-menu > li {margin-left: 2.4vw;} .main-navigation ul#top-menu > li:first-of-type {margin-left: 0;} .main-navigation ul#top-menu > li > a::after {content: ""; width: 100%; height: 5px; background: #00A85D; transform: scale(0); transition: all .3s linear; transform-origin: left; position: absolute; bottom: 0; left: 0;} .main-navigation ul#top-menu > li > a:hover, .main-navigation ul#top-menu > li.current-menu-item > a {color: #00A85D !important;} .main-navigation ul#top-menu > li > a:hover::after, .main-navigation ul#top-menu > li.current-menu-item > a::after {transform: scale(1);} .main-navigation ul li a {font-family: 'Gotham-Book', sans-serif; font-weight: 400; font-size: 16px; color: #FFF; line-height: 120%; position: relative; padding-bottom: 26px;} .main-navigation ul ul.sub-menu {position: absolute; flex-direction: column; margin-top: 50px; visibility: hidden; opacity: 0; transition: all .2s linear;} .main-navigation ul ul.sub-menu li a {padding: 10px 15px; box-sizing: border-box; background: #000000CC; display: block;} .main-navigation ul#top-menu > li:hover ul.sub-menu {margin-top: 21px; visibility: visible; opacity: 1;} .main-navigation ul ul li a:hover, .main-navigation ul ul li.current-menu-item a {color: #FFF !important; background: #00A85D;} /*Social Menu*/ .social-navigation .svg-icon {display: none;} .social-navigation ul {display: flex; display: -webkit-flex; align-items: center;} .social-navigation ul li {margin-right: 15px;} .social-navigation ul li a {color: #CEA43F;} /*################################### ## Header ###################################*/ .site-header {position: relative;} #header {position: absolute; top: 0; left: 0; width: 100%; z-index: 999; padding-top: 20px;} #header .hd-logo {margin-right: auto;} #header .hd-tel {margin-left: 3.5vw;} #header .hd-tel a {position: relative; display: inline-flex; align-items: center; font-family: 'Gotham-Book', sans-serif; color: #FFF;} #header .hd-tel a::before {content: "\f095"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 13px; width: 35px; height: 35px; display: flex; display: -webkit-flex; align-items: center; justify-content: center; margin-right: 10px; background: #00A85D; color: #FFF; border-radius: 50%; transition: all .3s linear;} #header .hd-tel a:hover::before {background: #1A6C98;} #header .hd-logo img{width:100%;max-width:200px;} /*################################### ## Banner ###################################*/ #banner {position: relative;} #banner img {min-height: 200px; object-fit: cover;} #banner .metaslider .flexslider {margin: 0;} #banner .metaslider img {min-height: 250px;} #banner .metaslider ul.slides {position: relative;} #banner .metaslider ul.slides::before, .inner #banner::before {content: ""; background: linear-gradient(to bottom, #000000B3, transparent); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3;} #banner .metaslider .flex-control-nav {bottom: 50px; z-index: 4;} #banner .metaslider .flex-control-nav li a {width: 9px; height: 9px; border: 1px solid #FFF !important; background: #FFF !important;} #banner .metaslider .flex-control-nav li a.flex-active {background: transparent !important; border-color: #D3D3D3 !important;} /*################################### ## Contents ###################################*/ .home #content h1, .home #content h2 {color: #196C98; margin-bottom: 30px;} .home #content h5 {color: #878787; letter-spacing: .2em; margin-bottom: 10px;} .site-content {position: relative;} .cn-logo {height: 160px; overflow: hidden;} .cn-logo .logo-wrap {align-items: center !important; text-align: center;} .cn-logo .logo-wrap > div {width: auto !important;} .cn-logo .logo-wrap > .panel-grid-cell:nth-of-type(2) {min-width: 400px;} .cn-logo .logo-wrap > .panel-grid-cell:nth-of-type(2) img {display: block; margin: 0 auto;} .cn-logo .logo-item > div {display: flex; display: -webkit-flex; flex-direction: column-reverse; padding: 25px 0; position: relative;} .cn-logo .logo-item img {opacity: .4; transition: all .3s linear; position: relative; top: -1px;} .cn-logo .logo-item h3 {font-family: 'Open Sans', sans-serif; font-size: 21px; color: #FFF; transform: scaleY(0); transition: all .3s linear; height: 1px; overflow: hidden; opacity: 0; visibility: hidden; transform-origin: bottom; position: absolute; bottom: 0; left: 0; width: 100%; font-weight: 700;} .cn-logo .logo-item:hover img {opacity: 1; top: -10px;} .cn-logo .logo-item:hover h3 {transform: scaleY(1); opacity: 1; visibility: visible; height: auto;} .cn-wlc {padding: 95px 0; position: relative;} .cn-wlc::before {content: ""; background: #F6F6F6; position: absolute; width: 67%; height: 100%; top: 0; left: 0; z-index: -1;} .cn-wlc img {display: block; margin: 0 auto;} .cn-wlc img:hover {transform: scale(.95);} .cn-wlc .wlc-text {max-width: 600px; padding-right: 20px; box-sizing: border-box;} .cn-wlc .wlc-text .btn {margin: 20px 45px 0 0;} .cn-wrap {background-position: top right; background-repeat: no-repeat; background-size: auto !important;} .cn-svc {padding: 115px 0 50px;} .cn-svc .svc-wrap {align-items: unset !important; margin-top: 35px;} .cn-svc .svc-wrap .panel-grid-cell {padding: 77px 20px; box-sizing: border-box; box-shadow: 0 10px 40px #0000001A; background: #FFF;} .cn-svc .svc-wrap .widget_media_image {display: flex; display: -webkit-flex; justify-content: center; flex-direction: column-reverse; text-align: center;} .cn-svc .svc-wrap img {display: block; margin: 0 auto 40px;} .cn-svc .svc-wrap h3 {font-size: 18px; transition: all .3s linear;} .cn-svc .svc-wrap .panel-grid-cell:hover img {transform: scale(1.1);} .cn-svc .svc-wrap .panel-grid-cell:hover h3 {color: #00A85D;} .cn-team {padding: 60px 0 80px;} .cn-team .container {max-width: 1210px;} .cn-team .team-wrap {margin-top: 20px;} .cn-team .team-wrap .widget_media_image {overflow: hidden; margin-bottom: 0 !important;} .cn-team .team-wrap img {display: block; margin: 0 auto;} .cn-team .team-wrap img:hover {transform: scale(1.1);} .cn-team .team-wrap .textwidget {padding: 0 5px; box-sizing: border-box;} .cn-team .team-wrap h3 {margin: 45px 0 20px; color: #196C98;} /*################################### ## Footer ###################################*/ #footer {position: relative; background: #F7F7F7; padding: 85px 0 0;} #footer .container {max-width: 1650px;} #footer .ft-col {padding: 10px; box-sizing: border-box;} #footer .ft-col ul {list-style: none; padding: 0; margin: 0;} #footer .ft-col ul li {line-height: 150%; font-size: 16px;} #footer .ft-col ul li:not(:last-of-type) {margin-bottom: 22px;} #footer .ft-col h4 {margin-bottom: 30px; color: #1B6D98; letter-spacing: .2em;} #footer .ft-col1 p {max-width: 340px; font-size: 16px;} #footer .ft-logo {margin-bottom: 35px;} #footer .ft-info ul li {display: -webkit-flex; display: flex;} #footer .ft-info ul li i {color: #00A85D; font-size: 18px; width: 18px; text-align: center; margin-right: 10px; position: relative; top: 1px;} #footer .ft-info .ft-add {max-width: 320px;} #footer .copyright {margin-top: 90px;} #footer .copyright .container {max-width: 1630px;} #footer .copyright p {border-top: 1px solid #D6D6D6; text-align: center; line-height: 120%; padding: 30px 0; font-family: 'Gotham-Book', sans-serif; font-size: 13px; color: #1B6D98; text-transform: uppercase;} #footer .ft-logo img {max-width: 250px; /*300px;*/} #footer i.fab.fa-facebook-square, #footer i.fab.fa-linkedin {font-size: 30px;margin: 10px;} /*################################### ## Inner Pages ###################################*/ .inner #content {padding: 30px 0; min-height: 500px;} .inner #content .container {max-width: 1365px;} .inner #content h1 {margin: 0 auto 30px; text-align: center;} .inner #content h2, .inner #content h3, .inner #content h4, .inner #content h5 {margin: 30px 0 20px;} .inner #content li {margin-bottom: 5px;} /*################################### ## Blog Page ###################################*/ .blog #content article {box-shadow: 2px 2px 5px #333; margin-bottom: 25px; padding: 20px; box-sizing: border-box;} .blog #content article h2 {font-size: 30px; margin-bottom: 10px;} .blog #content article .post-thumbnail {width: 35%; padding-right: 30px; box-sizing: border-box;} .blog #content article .post-thumbnail img {width: 100%; height: 100%; object-fit: cover;} .blog #content article .entry-content {width: 100%;} .blog #content article .entry-content header {margin-bottom: 20px;} .blog #content article .entry-content .read-more {text-align: right; margin-top: 10px;} /*Single Page*/ .single #content header .post-meta {text-align: center;} .single #content header .post-meta h5 {margin: 0 0 30px;} .single #content .post-thumbnail img {width: 100%; max-width: 800px; display: block; margin: 0 auto 25px;} /*################################### ## Error Page ###################################*/ .error-404 {text-align: center;} /*################################### ## Responsive ###################################*/ @media screen and (max-width: 1620px) { .cn-svc .svc-wrap .panel-grid-cell {padding: 4vw 20px; width: calc(25% - 3.5vw) !important;} } @media screen and (max-width: 1336px) { #header .hd-logo img {max-width: 300px;} } @media screen and (max-width: 1200px) { .cn-logo {height: 150px;} .cn-logo .logo-wrap > .panel-grid-cell:nth-of-type(2) {min-width: inherit; padding: 0 50px;} .cn-logo .logo-item img {max-width: 300px !important; width: 100%;} .cn-logo .logo-item h3 {font-size: 1.5vw;} .blog #content article .post-thumbnail {width: 45%;} .blog #content article .entry-content {width: 55%;} .cn-svc .svc-wrap .panel-grid-cell {padding: 3.5vw 20px !important; width: calc(25% - 3vw) !important;} .cn-svc .svc-wrap h3 {font-size: 15px;} .cn-svc .svc-wrap img {margin: 0 auto 1.2vw} .cn-team .team-wrap .panel-grid-cell {width: calc(33.33% - 30px) !important;} #footer .ft-wrap .ft-col {max-width: calc(25% - 10px);} } @media screen and (max-width: 960px) { #header .hd-logo img {max-width: 200px;} .main-navigation ul li a {padding-bottom: 15px;} .cn-logo {height: auto;} .cn-logo .logo-item h3 {bottom: 10px;} .cn-wlc {padding: 30px 0 30px;} .cn-wlc::before {width: 100%;} .cn-wlc .wlc-wrap {flex-direction: column-reverse !important;} .cn-wlc .wlc-wrap > div {width: 100% !important;} .cn-wlc .wlc-text {margin-top: 30px; text-align: center; max-width: 100%;} .cn-wlc .wlc-text .btn {margin: 0 0 20px;} .cn-wlc .wlc-text .owner {display: block;} .cn-svc {padding: 30px 0;} .cn-svc .svc-wrap h3 {font-size: 14px;} .cn-svc .svc-wrap {margin-top: 10px;} .cn-team {padding: 30px 0;} #footer {padding: 30px 0 0;} } @media screen and (max-width: 800px) { .home #content h1, .home #content h2 {margin-bottom: 20px;} p, ul, ol {margin: 0 0 20px;} #wprmenu_bar {box-shadow: 0 0 2px #333; min-width: 320px;} html body div.wprm-overlay {background: rgba(0, 0, 0, .7);} #wprmenu_bar .bar_logo {height: 35px; position: relative; top: -5px;} .logged-in #wprmenu_menu_ul {top: 32px !important;} #wprmenu_menu_ul li {border-bottom: 1px solid rgba(255, 255, 255, .05);} #mg-wprm-wrap li.menu-item a {padding: 10px 15px;} #header {z-index: 999999;} #header .hd-tel {position: fixed;} #header .hd-tel a span {display: none;} #header .hd-tel a {position: fixed; top: 3px; right: 90px;} .logged-in #header .hd-tel a {top: 35px;} #header .hd-tel a::before {background: #236a95; margin-right: 0;} #banner .metaslider .flex-control-nav {bottom: 10px;} .blog #content article .blogWrap {flex-direction: column; justify-content: center; align-items: center;} .blog #content article .post-thumbnail, .blog #content article .entry-content {width: 100%;} .blog #content article .post-thumbnail {padding-right: 0;} .blog #content article .entry-content .read-more {text-align: center; margin-top: 20px;} .blog #content article .entry-content header {text-align: center;} #footer .ft-wrap {flex-direction: column; justify-content: center; align-items: center; text-align: center;} #footer .ft-wrap .ft-col {width: 100%; max-width: 100%;} #footer .ft-col1 p {max-width: 100%;} #footer .ft-col {margin-bottom: 25px;} #footer .ft-col h4 {margin-bottom: 20px;} #footer .ft-col ul li:not(:last-of-type) {margin-bottom: 15px;} #footer .ft-info ul li {flex-direction: column;} #footer .ft-info ul li i {margin-right: 0; margin-bottom: 5px;} #footer .ft-info .ft-add {max-width: 100%;} #footer .copyright {margin-top: 30px;} .cta{background: #006600 url("../images/common/phonecall.png") no-repeat center center;border-bottom-left-radius: 40px;border-top: 2px solid #DDC019 ;border-top-left-radius: 40px;bottom: 1%;display: block;height: 80px;position: fixed;right: 0;text-decoration: none; text-indent: -9999em;width: 100px;z-index: 999;} } @media screen and (max-width: 782px) { .logged-in #wprmenu_menu_ul {top: 46px !important;} .logged-in #header .hd-tel a {top: 49px;} } @media screen and (max-width: 780px) { .cn-logo .logo-wrap .panel-grid-cell {margin-bottom: 0 !important;} .cn-logo .logo-item h3 {font-size: 16px;} .cn-wlc {padding: 30px 0 0;} .cn-svc .svc-wrap {flex-direction: row !important; flex-wrap: wrap !important;} .cn-svc .svc-wrap .panel-grid-cell {width: calc(50% - 10px) !important; margin-bottom: 20px !important; padding: 7vw 20px !important;} .cn-team .team-wrap .panel-grid-cell {width: 100% !important;} .cn-team .team-wrap h3 {margin: 20px 0 10px;} h1 {font-size: 35px;} .inner h2 {font-size: 30px;} } @media screen and (max-width: 600px) { } @media screen and (max-width: 480px) { .cn-svc .svc-wrap .panel-grid-cell {width: 100% !important;} }