/*
Theme Name: JohnnyoTheme
Theme URI: http://johnnyodesign.com/
Author: Johnnyo Design
Author URI: http://johnnyodesign.com/
Description: Sensible design solutions.
*/

/* Import the necessary CSS additions */
@import url( inc/bootstrap.css );
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,600,700,800');

.site-branding {
    position: absolute !important;
    z-index: 1;
}
.navbar {

}
body {
background: #efefef;
background: -moz-linear-gradient(left, #efefef 0%, #ffffff 100%);
background: -webkit-linear-gradient(left, #efefef 0%,#ffffff 100%);
background: linear-gradient(to right, #efefef 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=1 );
font-family: 'Open Sans', sans-serif;
color: #000;
font-weight: 600;
	font-size: 16px;
}
b, strong {
    font-weight: 800;
}
a {
    color: #ba1d1d;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
h1, .h1 {
font-size: 54px;
color: #fff;
}
h2, .h2 {
color: #00afef;
font-size: 48px;
}
h3, .h3 {
font-size: 26px;
color: #00afef;
}
h4, .h4 {
color: #00afef;
}
#secondary h1, #secondary h1{
font-size: 28px;
}
#secondary h2, #secondary .h2{
font-size: 24px;
color: #00afef;
}
#secondary h3, #secondary .h3{
font-size: 12px;
color: #00afef;
}
.svg2 {
    position: absolute;
    top: 0;
}
.header {
    position: relative;
    height: 70vh;
    background-color: #00afef;
}
.int-header {
height: 16vw;
}
.box {
    width: 100%;
    height: 25vw;
    position: absolute;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.int-header .box {
    width: 100%;
    height: 17vw;
    position: absolute;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}
.wave {
    opacity: .4;
    position: absolute;
    top: 3%;
    left: 50%;
    background: #04a2cc;
    /**width: 600vw;
    height: 600vw;
    margin-left: -320vw;
    margin-top: -587vw;**/
width: 582vw;
height: 582vw;
margin-left: -300vw;
margin-top: -568vw;
    transform-origin: 50% 50.01%;
    border-radius: 47%;
    animation: drift 100000ms infinite linear;
}
.int-header .wave {
    opacity: .4;
    position: absolute;
    top: -10%;
    left: 50%;
    background: #04a2cc;
    width: 582vw;
    height: 582vw;
    margin-left: -300vw;
    margin-top: -570vw;
    transform-origin: 50% 50.01%;
    border-radius: 48%;
    animation: drift 100000ms infinite linear;
}
.wave.-two {
  animation: drift 5000ms infinite linear;
  opacity: .1;
  background: yellow;
}
.wave.-three {
  animation: drift 160000ms infinite linear;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
    background: linear-gradient(to bottom, #3b849f, rgba(221, 238, 255, 0) 80%, #eee);
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  line-height: 300px;
  text-align: center;
  transform: translate3d(0, 0, 0);
  color: white;
  text-transform: uppercase;
  font-family: 'Playfair Display', serif;
  letter-spacing: .4em;
  font-size: 24px;
  text-shadow: 0 1px 0 rgba(black, .1);
  text-indent: .3em;
}
@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}
.headercontainer {
position: relative;
}
.headercontent {
    width: 100%;
    color: #fff;
text-align: center;
}
.btn-top {
    color: #fff;
    background-color: #ba1d1d;
    transition: all ease 0.1s;
}
.btn-top:hover {
    color: #fff;
    background-color: #0055a5;
    transition: all ease 0.1s;
}
.btn-top-too {
    color: #fff;
    background-color: #00afef;
    transition: all ease 0.1s;
}
.btn-top-too:hover {
    color: #fff;
    background-color: #0055a5;
    transition: all ease 0.1s;
}
.btn-side {
    color: #fff;
	width: 100%;
    background-color: #ba1d1d;
    transition: all ease 0.1s;
}
.btn-side:hover {
    color: #fff;
	width: 100%;
    background-color: #0055a5;
    transition: all ease 0.1s;
}
.btn-side-too {
    color: #fff;
	width: 100%;
    background-color: #00afef;
    transition: all ease 0.1s;
}
.btn-side-too:hover {
    color: #fff;
	width: 100%;
    background-color: #0055a5;
    transition: all ease 0.1s;
}
.btn-body {
    color: #fff;
    background-color: #00afef;
    transition: all ease 0.1s;
    padding: 18px 36px !important;
margin-bottom: 15px !important;
}
.btn-body:hover {
    color: #0055a5;
    background-color: #fff;
    transition: all ease 0.1s;
}
.btn-default {
    color: #fff;
    background-color: #00afef;
    transition: all ease 0.1s;
}
.btn-default:hover {
    color: #0055a5;
    background-color: #fff;
    transition: all ease 0.1s;
}
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 0;
    white-space: nowrap;
    padding: 20px 44px;
    font-size: 16px;
    line-height: 1.42857143;
    border-radius: 2px;
}
.site-branding img {
    height: 64px;
    margin-top: 14px;
}
.site-info {
    font-size: 10px;
    color: #fff;
    padding: 20px 0 10px 0;
    border-top: 1px solid #0090e0;
}
.site-info a {
color: #00afef;
}
.site-footer {
position: relative;
background: #00afef;
background: -moz-linear-gradient(left,  #007aef 0%, #00afef 100%);
background: -webkit-linear-gradient(left,  #007aef 0%,#00afef 100%);
background: linear-gradient(to right, #007aef 0%,#00afef 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007aef', endColorstr='#00afef',GradientType=1 );
min-height: 100px;
}
.slick-prev:before, .slick-next:before {
    font-family: FontAwesome;
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    color: #ffce00;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-next:before {
    content: '\f054';
}
.slick-prev:before {
    content: '\f053';
}
.slick-prev {
    left: -35px;
}
.slick-next {
    right: -35px;
}
.mega-menu-link {
font-family: 'Open Sans', sans-serif;
}
.topfooter {
padding: 20px 0 0 0;
}
.footer-logo {
height: 40px;
}
.playstore {
padding-left: 10px;
}
.footer-right {
float: right;
	 
}
.footer-scrm {
}

hr {
    margin-top: 14px;
    margin-bottom: 10px;
    border: 1px;
    border-top: 2px solid #bce2ec;
    width: 80%;
    border-radius: 2px;
}
.testimonialsvg {
position: relative;
    /* bottom: 0; */
    z-index: 1050;
    margin-bottom: -186px;
}
.interior-content {
margin-bottom: 40px;
}
.topnav {
    height: 140px;
}
.site-content {
   /* display: flex; */
}
.botnav {
background: #00afef;
background: -moz-linear-gradient(left,  #007aef 0%, #00afef 100%);
background: -webkit-linear-gradient(left,  #007aef 0%,#00afef 100%);
background: linear-gradient(to right, #007aef 0%,#00afef 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007aef', endColorstr='#00afef',GradientType=1 );

    border-top: 2px solid #00afef;
    border-bottom: 2px solid #00afef;
}
.homepage-content {
    text-align: center;
    padding: 80px 0;
}
.home-card {
border-radius: 2px;
height: 380px;
    box-shadow: 0 0 12px 0px #999;
max-width: 278px;
margin: auto;
    position: relative;
overflow: hidden;
transition: all ease 0.3s;
}
.home-card:hover {
    box-shadow: 0 0 6px 0px #666;
transition: all ease 0.3s;
}
.homecardleft {
background: url(/wp-content/uploads/2016/11/training.jpg);
background-size: cover;
background-position: center;
}
.homecardcenter {
background: url(/wp-content/uploads/2016/11/maintenance.jpg);
background-size: cover;
background-position: center;
}
.homecardright {
background: url(/wp-content/uploads/2016/11/management.jpg);
background-size: cover;
background-position: center;
}
.home-card-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    padding: 32px 0;
    color: #fff;
}
.topfooter h3 {
color: #fff;
font-size: 14px;
font-weight: bold;
    margin-bottom: 6px;
}
.topfooter ul{
    list-style: none;
    padding: 0 0 0 6px;
line-height: 1.2;
}
.topfooter ul a{
color: #fff;
font-size: 11px;
}
.topfooter .so-panel {
    margin-bottom: 12px !important;
}
.footer-info {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    bottom: 0;
    right: 0;
    line-height: 1.8;
}
.logofooter svg {
	float: right;
}
.headersvg {
    position: absolute;
    bottom: -1px;
}
.headertext {
padding-top: 24vh;
    z-index: 2;
    position: relative;
}
.hometext {
padding-top: 80px
}
.headertop {
    float: right;
    padding: 39px 0;
    color: #00afef;
    font-weight: bold;
    font-size: 16px;
}
.vrule {
    display: inline-block;
    width: 1px;
    height: 40px;
    background-color: #ffce00;
    margin: -14px 30px;
}
.texttop {
    display: inline-block;
}
.texttop2 {
    display: inline-block;
padding: 0px 20px 0 0;
}
.fa {
    padding-right: 10px;
}
.cardsvg {
    position: absolute;
    left: 0;
    bottom: 0;
}
.home-card-text2 {
z-index: 2;
    position: relative;
}
.slideoverlay {
background: -moz-linear-gradient(top,  rgba(0, 175, 239, 0.4) 0%, rgba(0,85,165,1) 100%);
background: -webkit-linear-gradient(top,  rgba(0, 175, 239, 0.4) 0%,rgba(0,85,165,1) 100%);
background: linear-gradient(to bottom,  rgba(0, 175, 239, 0.4) 0%,rgba(0,85,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800055a5', endColorstr='#0055a5',GradientType=0 );
    position: absolute;
    width: 100%;
    height: 70vh;
    z-index: 1;
}
.headerslider1 {
background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
background-size: cover;
background-position: center;
    height: 70vh;
}
.headerslider2 {
background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
background-size: cover;
background-position: top;
    height: 70vh;
}
.headerslider3 {
background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
background-size: cover;
background-position: center;
    height: 70vh;
}
.headerslider4 {
background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
background-size: cover;
background-position: center;
    height: 70vh;
}
.headerslider5 {
background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
background-size: cover;
background-position: center;
    height: 70vh;
}
/** .headerslider3::after, .headerslider4::after, .headerslider5::after {
    position: absolute;
    right: 60px;
    bottom: 60px;
    background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
    display: inline-block;
    height: 40px;
    width: 200px;
    content: "";
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
} **/
.intslide1 {
background-image: url(/wp-content/uploads/2020/01/waterl.jpg);
background-size: cover;
background-position: center;
    height: 22vh;
}
.int-header {
height: 22vh;
    margin-bottom: 40px;
}
.int-header .headertext {
    padding-top: 5vh;
}
.int-header .slideoverlay {
    height: 22vh;
}
.btmftrlinks a{
color: #fff;
}
.texttop2 a{
    color: #00afef;
}
#secondary {
padding-bottom: 40px;
}
@media screen and (max-width: 780px) {
    h1, .h1 {
    	font-size: 6vw;
    }
    .int-header .headertext {
        padding-top: 3vw;
    }
    .int-header {
        height: 22vw;
        margin-bottom: 40px;
    }
    .intslide1 {
        height: 22vw;
    }
    .headertop {;
        display: none;
    }
    .site-footer {
        text-align: center !important;
    }
    .footer-thing {
	text-align: center;
    }
    .footer-info {
        position: relative;
    }
}
@media screen and (max-width: 500px) {
    .int-header .headertext {
        padding-top: 1vw;
    }
}
.btmftrlinks {
	display: none;
}
.slick-prev {
    left: 40px;
    z-index: 1000;
}
.slick-next {
    right: 20px;
    z-index: 1000;
}
.slick-prev:before, .slick-next:before {
    font-size: 30px;
}
#frm_form_16_container {
    margin-top: 10px;
}
#frm_form_16_container .frm_submit {
    text-align: right !important;
}
#frm_form_16_container .frm_form_field {
    margin-bottom: 5px !important;
}
.content-img {
width: 94%;
    border-radius: 6px;
    margin: 2%;
    box-shadow: 0px 0px 10px -3px #0057a6;
}
ol li {
    margin-top: 11px;
}
ul li {
    margin-top: 11px;
}
.site-branding svg {
    height: 140px;
    padding: 10px;
}
.cardsvg1, .footersvg2 {
    fill: #00afef;
}
.logofooter svg {
	height: 100px;
}
.site-footer .st4, .site-footer .st5, .site-footer .st6 {
	fill: #fff!important;
}