/* CSS Document */
html, body { margin:0; padding:0; font-family: 'Questrial', Helvetica, Arial, sans-serif; font-size:18px; color:#333 }

* {
    margin: 0; padding: 0;
    box-sizing: border-box;
}

.wrap { width:1150px; margin:0 auto; padding:50px 0; }
#header .wrap, #copyright .wrap { padding:0 }
.centred { text-align:center; width: 900px; }

h1, h2, h3, h4, h5 { font-weight:400; margin: 0 0 10px; }
h1 { font-size:50px; color: #fff;}
h2 { font-size: 36px;  color:#0bb7ec;  margin: 20px 0; }
h3 { font-size:36px; color:#262626;  margin: 20px 0; }
h5 { font-size: 22px; color:#262626; }
p { margin:0 0 10px; line-height:1.4 }
a, .blue { color: #00b7e3; text-decoration:none }
a:hover, a:focus { color: #2a6496; text-decoration: underline; }

a.button {
	background-color: #00b7e3; border-radius: 5px; 	
	text-align: center; padding: 14px 28px; color:#fff; text-decoration:none;
	text-transform: uppercase; font-size:22px; line-height: 50px;
}
a.button:hover { background-color:#5e5e5e; }

#header { height: 140px; width:100%; background-color:#000; }
	#header .xero { float: right; margin-top: 20px;}

#banner { 
	background:#0bb7ec url(images/bannerbg.png) no-repeat right center; 
}
#banner .wrap {	padding:270px 0 60px 0; }
#banner h2 { color:#fff; font-size: 36px; margin: 0 0 10px;}
#banner h3 { font-size: 30px; color: #fff; margin: 0 0 40px;}
#banner h4 { font-size: 40px; color: #000; margin: 0; }

#second, #clients, #contact { background-color:#e5e5e5; overflow:auto }
#contact { background:#d9f4fb url(images/formbgfull.png) center center no-repeat; }
#contact .wrap { max-width: 800px;}
#contact form { 
	max-width: 660px; margin: 20px auto; text-align: left;
    display: grid;
    grid-template-columns: 50% 50%; row-gap: 20px;
    align-items: start; 
}
#contact form input { padding:15px; border-radius: 5px; margin: 0 15px; border: 1px solid #d3d3d3; width: calc(100% - 30px); }
#contact form > div  { margin: 0 15px; overflow: hidden; }

.team { display: grid; grid-template-columns: 55% 40%; grid-column-gap: 5%;}
.team img { grid-column-start: 2; grid-row-start:1; grid-row-end: 5; max-width: 100%; }

#about { overflow:auto }
	#about .wrap { display: grid; grid-template-columns: 31% 64%; grid-column-gap: 5%;}
	#about #me { text-align: center; }
	#about img { margin:12px auto; max-width:80%; }
	.social { margin-top:26px; }
	.social a { margin-right: 7px; }
	.social a:last-of-type { margin-right: 0; }
	.social-sprite {
			background: url(images/social-sprite.png) no-repeat 0 0;
			-moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; 
			display: inline-block; height: 46px; width: 46px; 
	}
	a.social-sprite.blue { background-position-y: 50%; }
	a.social-sprite:hover { background-position-y: 100%; }
	.social-sprite.twitter { background-position: 33.096% 0; }
	.social-sprite.insta { background-position: 33.096% 0; }
	.social-sprite.googleplus {  background-position: 100% 0; }
	.social-sprite.facebook { background-position: 0 0; }
	.social-sprite.linkedin { background-position: 66.548% 0; }

/* testimonials */
.quote {  
    width: 100%; height: auto; padding: 10px 0 50px;
    display: flex; justify-content: center;  align-items: center;
}
	#quote .wrap { background:url(images/quote.png) 0 0 no-repeat; }
	#quote p { padding:0 140px }
	#quote span { color:#262626; }
	#quote span.blue { color: #00b7ec; }

.quotehead { text-align: center; padding-top: 40px;}
.container {
    position: relative;
    width: 800px; min-width: 350px; min-height: 250px;
    padding-bottom: 40px; overflow: hidden;
}
.wrapper {
    width: 400%;   /* 100% per quote */
    min-height: 100%;
    display: flex; justify-content: space-between; transition: 1s;
}
.card {
    width: 800px;  min-height: 100%;
    background: #f6f6f6;  border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 20px 30px; margin: 0 10px;
}
.client-img {
    width: 150px; height: 150px; margin-left: calc(50% - 75px); 
    border-radius: 50%; object-fit: cover;
}
.card h4 { font-size: 20px; color: #00b7e3; text-align: center; }
.card h4 span { font-size: 18px; color:#333;}    
.review {
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px;
}
.indicators {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
}
.indicators button{
    background: none; border: none; outline: none;
    width: 15px; height: 15px;  margin-left: 5px;
    border-radius: 50%; border: 2px solid #00b7e3;
    cursor: pointer;
    transition: .5s;
}
button.active {
    width: 40px; border-radius: 50px; background: #00b7e3;
}


#footer { background-color:#f6f6f6; }
#footer a { color:#262626; }
#footer .wrap {  display: grid; grid-template-columns: 50% 50%; }
#footer h2 { text-align: left;}
#footer #quals { text-align: right; }
#footer img { max-width: 100%; }
#footer .xero { width:180px }
a.glassraven {
	display: block; width: 180px; text-align: right; float:right;
	background: url(images/glassraven.png) center right no-repeat;
	padding: 10px 70px 10px 0px;  font-size: 13px; color: #00b7ec; position: relative; bottom:180px; right: 50px;
}
#copyright { background-color: #00b7ec; padding:30px; font-size:16px; color:#fff; text-align: center; }
#copyright .wrap { max-width: 800px;}



@media screen and (max-width : 1170px){
	.wrap { width:95%; }
	#header { height: auto; }
	#header .logo { width: 64%; max-width: 450px; }
	#header .xero { width: 30%; max-width: 200px; }

	#quote p { padding:0 5% 0 140px }
	#banner { background-size:80%	}
	#contact { background-size:90%	}
	#banner .wrap {	padding:200px 0 50px 0; }
	#banner h1 { font-size: 44px;}
	#banner h2 { font-size: 32px; margin: 0 0 8px;}
	#banner h3 { font-size: 27px; color: #fff; margin: 0 0 30px;}
	#banner h4 { font-size: 40px; color: #000; margin: 0; }
	
}
@media screen and (max-width : 805px){
	.wrap { width:90%; }
	h1, h2, h3, h4 { text-align: center;}

	#banner, #contact { background-size:730px; background-position: center;	}
	#banner .wrap {	padding:200px 0 50px 0; }
	#about .wrap { grid-template-columns: 100%; }
	#about img { max-width: 220px;}

	.container { /* testimonials */
        max-width:90%;
        margin: auto;
    }

	a.glassraven { bottom:220px }
}
@media screen and (max-width: 620px){ 
	.team { grid-template-columns: 100%;}
	.team img { grid-column-start: 1; grid-row-start:1; grid-row-end: 1; margin: 0 auto 15px;}

	#contact form { 
		grid-template-columns: 100% 
	}
}