@import "../font/stylesheet.css";
a{ transition: all .2s }
body{ font-family: 'Gotham Book'; font-size: 18px; color: #999; letter-spacing:1px}
p{ font-family: 'Gotham Medium'; font-size: 18px; line-height: 44px; text-align: center; }
.logo img{ width: 100% }
.nav-wrap{width: calc(100% - 1px); margin-bottom: 0px}
.mob-nav{opacity: .6; margin: -10px auto 0 auto}
.txtmsg{width: 100%; height: 300px;}
.comp-logos{ padding: 0; margin: 0 }
.error{ color: red; }
.form-control.error{border-color: red}
.form-control.valid{border-color: green}
.comp-logos li{ list-style: none; display: inline-block; width:80px;  margin: 3.8%}
.comp-logos li:first-child{margin-left:0;}
.comp-logos li:last-child{margin-right:0;}
.box-start{width: 90%; margin: 20px auto 0 auto; border:1px solid #ccc; border-bottom:0; padding: 20px; position: relative;}
.box-start p{margin: 0}
.box-end{ width: 90%; margin: 0 auto 40px auto; border:1px solid #ccc; border-top:0; }
.mifo{ display: inline-block; background: rgba(255,255,255,.5); color: white; font-size: 14px; text-align: center; padding: 5px 10px; }
.mifo:hover{ text-decoration: none; color: white; background: rgba(255,255,255,.3);}
.cc img{margin: 25px auto}
.cc p{width: 80%; margin: 0 auto 20px auto; line-height: 28px; font-size: 16px}
.cc{ color: white; text-align: center; padding: 0 15px 0 15px }
.c-grey{background:#3d4543;}
.c-yellow{ background:#fdb714;}
.c-green{ background:#4d7f71;}
.c-blue{ background:#0033a1;}
.c-green2{ background:#72a94e;}
.c-grey2{ background:#7c99ad;}
h3{ font-family: Gotham Bold; color:#0033a1; font-size: 28px; margin-bottom: 1rem }
.shockpad{ background: url(../img/shockpad.jpg) no-repeat center center /cover; margin: 20px 0 40px }
.shockpad p{ color: white; font-family: Gotham Medium; text-align: center; max-width: 650px; margin: 0 auto; font-size: 23px; padding: 100px 15px; letter-spacing: 1px; text-transform: uppercase; line-height: 44px }
.why-c{ max-width: 650px; margin: 0 auto }
.why-c .media{ margin-bottom: 50px }
.why-c h1{padding: 50px 0}
.why-c .media-body h5{ line-height: 44px; font-family: Gotham Medium; color:#888; font-size: 19px }
h1{ font-family: Gotham Bold; font-size: 56px; color: #0033a1; text-align: center; padding: 30px 0; word-break: break-all; letter-spacing: 2px}
.navi div{ padding: 5px 10px;  text-transform: uppercase; text-align: center; box-shadow: 1px 0 0 0 #ccc, 0 1px 0 0 #ccc, 1px 1px 0 0 #ccc,
1px 0 0 0 #ccc inset, 0 1px 0 0 #ccc inset;}
.navi { width: 100% }
.navi a{ font-family: Gotham Medium; color:#999; letter-spacing: 1px; display: inline-block; font-size: 16px; text-decoration: none!important;}
.navi div span{ display: table; border-top:1px solid #ccc; margin: 0 auto; padding: 0 5px}
.navi a:hover{ color: #0056b3 }
.navi a:hover span{ border-color: #0056b3 }
.banner-main{ background: url(../img/banner-main.jpg) no-repeat bottom center /cover; height: calc(100vh - 350px );  }
.logo{padding:50px 70px; display: block;}
.logo svg path, .logo svg polygon, .logo svg rect{transition: all .2s}
.logo:hover svg path, .logo:hover svg polygon, .logo:hover svg rect{ fill:#808184; }

.logo:hover svg .fillnone{ fill:none; stroke:#22222200;}
.gmax-std{ width: 90% }
.no-gutters {
margin-right: 0;
margin-left: 0;

> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}

.scrollTop {
position: fixed;
left:3%;
bottom: 30px;
opacity: 0;

}

.scrollTop a {
position: relative;
display: block;
width: 49px;
height: 49px;
border: none;
background: rgba(130,136,140,.36);
cursor: pointer;
outline: none;
border-radius: 49%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background .2s;
transition: background .2s;
}
.scrollTop a:hover{background: #0033a1}
.scrollTop a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
margin: auto;
content: "";
background: url(../img/94f74.svg) 50% no-repeat;
width: 19px;
height: 22px;
}
.bltext{font-family: 'Gotham Black'; color:#0033a1;}
.greytxt{ color: #999!important; font-family: 'Gotham Medium'!important }
.turf-model{ text-align: center; color: #808285; font-family: 'Gotham Medium'; padding: 30px 15px }
.turf-model .m-name{ font-size: 33px; line-height: 24px; margin-bottom: 30px }
.turf-model p{margin-bottom: 0}
.turf-model img{ vertical-align: top }
.turf-model .m-no {font-size: 44px}
.turf-model .m-no span{font-family: 'Gotham Black'; }

.box-start:before{ content: ''; height: 4px; width: 100%; position: absolute; top:-1px; left: 0 }
.box-start.one:before{ background:#3d4543; }
.box-start.two:before{ background:#fdb714; }
.box-start.three:before{ background:#4d7f71; }
.box-start.four:before{ background:#0033a1; }
.box-start.five:before{ background:#72a94e; }
.box-start.six:before{ background:#7c99ad; }


.more-cushdrain p.des{ padding: 0 10%; font-size: 17px; line-height: 26px }
.more-cushdrain p.info{padding: 15px 5% 5px; font-size: 15px; line-height: normal; border-top:1px solid #ccc;}

@media (max-width: 992px){ h1{ font-size: 48px } 
.logo{padding: 30px 40px}
}
@media (max-width: 767px){ 
.navi div{ box-shadow: none; float: left; width: 100% }
h1{ font-size: 36px; } h3{font-size: 22px} 
.logo{padding: 20px 30px}

}
@media (max-width: 490px){ h1{ font-size: 26px } }


@media (min-width: 768px){.brdr{ border-right:1px solid #ccc; }}



.contact-form input, .contact-form textarea{ border-radius: 0!important }