@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@300;400');
*{box-sizing:border-box}
html{scroll-behavior:smooth;position:relative;min-height:100%}
body{font-family:'Kreon',sans-serif;font-weight:400;font-size:17px;color:rgb(65,65,65);padding:0;margin:0 0 94px;text-align:center}
img{display:block;max-width:100%}
a{color:blue}
p{line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:'Kreon',sans-serif;color:rgb(48,50,150);font-weight:400;text-align:left}
h1{font-size:42px;margin:20px 0}
h2{font-size:30px}

header{width:100%;background:#fff;display:inline-block;vertical-align:top;position:fixed;z-index:9999;padding:12px 0 0}

.container{max-width:1000px;margin:0 auto;position:relative;text-align:justify}

header .container{text-align:center}

.center{text-align:center}

.logo{margin:0;display:inline-block;vertical-align:top;}

#slider{padding:0 0 25px;}
#slider img{width:100%}

#dealer{background:rgb(48,50,150);color:#fff;padding:25px}

#mobile-logo{display:none;max-width:85%;position:fixed;top:14px;right:10px;height:25px;z-index:9999}
nav{margin:0;width:100%;position:relative}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;}
nav li{float:left;position:relative}
nav > ul > li{margin-right:5px;flex-grow:1}
nav > ul > li:last-of-type{margin-right:0}
nav ul a{color:#444;display:block;text-align:center;padding:20px 10px;width:100%;text-decoration:none;font-size:18px;white-space:nowrap}
nav ul a:hover,.current{color:rgb(236, 29, 35)}
nav ul ul{width:auto;visibility:hidden;opacity:0;transition:opacity .25s ease .2s;position:absolute;z-index:9999;background:#333;left:-105px;right:-105px;padding:15px 0 10px}
nav li:hover ul{visibility:visible;opacity:1}
nav li li{float:none}
nav ul ul li a{text-align:center;padding:7px 0;margin-bottom:10px}

section{display:inline-block;vertical-align:top;width:100%;padding:25px 0}
section:first-of-type{margin-top:150px}
section:nth-of-type(2n){background:#eee}

.floatr{margin:0 0 30px 30px;float:right}
.floatl{margin:0 30px 30px 0;float:left}
.round{border-radius:50%;display:inline-block;vertical-align:middle;float:none}
.full{width:100%;float:left}
.middle{vertical-align:middle;display:inline-block;max-width:calc(100% - 306px);font-size:20px}

.spanner,.gears,.plane,.tick{display:inline-block}
.spanner li,.gears li,.plane li,.tick li{margin:5px 0}
.spanner{list-style-image:url('/img/spanner-small.png');}
.gears{list-style-image:url('/img/gears-small.png');}
.tick{list-style-image:url('/img/tick.png');}
.plane{list-style-image:url('/img/plane.png');}

.copyright{width:100%;font-size:14px;}
.contact{display:grid;grid-gap:15px;}
.contact div{grid-row: 1;}
.contact-img{float:left}
.contact-details{float:left;margin:0 0 15px 15px}
.contact-list{width:100%;float:left}
.contact-list:first-of-type{margin-top:15px}

.service{width:33.3333%;float:left;padding:15px;text-align:center;text-decoration:none;}
.service-icon{border-radius:50%;background:rgb(236, 29, 35);width:100px;height:100px;line-height:100px;display:inline-block}
.service img{display:inline-block}
.service p{color:rgb(48,50,150);font-size:30px;}
.service:hover .service-icon{transform:scale(1.2)}

input,textarea{padding:15px;width:100%;float:left;margin-bottom:5px;border:1px solid #ccc}
form button{float:right}
.g-recaptcha{float:left}

footer{position:absolute;bottom:0;width:100%;padding:38px 10px;background:rgb(50,65,80);color:#fff}
footer .container{text-align:center}
footer a{display:inline-block}

.hamburger{display:none;position:absolute;top:0;left:4px;width:51px;height:51px;padding:10px}
.hamburger div:first-of-type,.hamburger div:nth-of-type(2),.hamburger div:last-of-type{position:absolute;width:30px;border-top:2px solid rgb(236,29,35);}
.hamburger div:first-of-type{top:15px}
.hamburger div:nth-of-type(2){top:25px}
.hamburger div:last-of-type{top:35px}
nav.open .hamburger div:first-of-type{transform:rotate(45deg);top:25px}
nav.open .hamburger div:nth-of-type(2){display:none}
nav.open .hamburger div:last-of-type{transform:rotate(-45deg);top:25px}
#mobile-menu{display:none}

.mySlides {display: none;}
img {vertical-align: middle;}

/* The dots/bullets/indicators */
.dot {
height:15px;
width:15px;
margin:0 2px;
background-color:#bbb;
border-radius:50%;
display:inline-block;
transition:background-color 0.6s ease;
}

.active {
  background-color:rgb(236, 29, 35);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: .5s;
  animation-name: fade;
  animation-duration: .5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width:1000px){
	.social{display:none}
	#slider img{min-height:350px;object-fit:cover;}
	#mobile-menu{display:block;top:0;height:51px}
	#mobile-logo{display:block}
	#callout h1{margin-top:200px}
	body{margin-top:51px}
	section:first-of-type{margin-top:0;padding-top:0}
	nav{z-index:9999}
	#logo,.logo,#checkers{display:none}
	header{position:fixed;height:51px;border-radius:0;top:0;left:0;width:100%;box-shadow:0 0 5px #888}
	nav li{visibility:hidden;width:100%;opacity:0;border:none;transition:visibility 0s,opacity 1s ease}
	nav li a{padding:10px 40px;font-size:21px}
	nav{margin:0;position:fixed;top:0;left:0;bottom:0;width:0;}
	nav.open{right:0;width:100%}
	nav ul{float:left;padding-top:25px;min-height:calc(100% - 51px);width:0;background:#fff;transition:width 0.4s ease;display:block}
	.hamburger{display:block}
	.hamburger:hover{cursor:pointer}
	nav.open > ul{width:85%}
	nav.open > ul ul{width:100%}
	nav.open li{visibility:visible;opacity:1}
	.container{padding:0 10px}
	nav ul ul{display:block;position:relative;visibility:visible;opacity:1;left:0}
	nav ul ul li a::before{content:' - '}
	section{background-attachment: scroll}
	.floatr,.floatl{padding:0}
	.service{width:100%}
	.slider{height:300px}
	.middle{max-width:100%}
}

@media only screen and (max-width: 460px) {
	.floatr,.floatl{width:100%}
  }
@media only screen and (max-width:320px){
	#mobile-logo{display:none}
}