/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	font-family: 'Poppins', sans-serif;
}

/* animation */
#dotone {
	animation-name:first;
	animation-duration:2s;
}
#dottwo {
	animation-name:second;
	animation-duration:3.5s;
}
#dotthree {
	animation-name:third;
	animation-duration:5s;
}
#serviceone {
	animation-name:firstser;
	animation-duration:1s;
}
#servicetwo {
	animation-name:secondser;
	animation-duration:1.5s;
}
#servicethree {
	animation-name:thirdser;
	animation-duration:2s;
}

@keyframes first {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes second {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes third {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes title {
	from {opacity:0;}
	to {opacity: 1;}
}

@keyframes firstser {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes secondser {
	from {opacity:0;}
	to {opacity:1;}
}
@keyframes thirdser {
	from {opacity:0;}
	to {opacity:1;}
}


/* ------PAGE ONE-------- */
.top {
	height:100vh;
	background-color:#ffffff;
}
/* HEADER */
.header {
	height:35%;
}
.header img {
	max-width:233px;
	min-width:100px;
	width:10%;
	margin-left:5%;
	margin-top:4%;
}
/* TITLE TEXT */
.title {
	height:25%;
}
.title h2 {
	font-size:48px;
	text-align: center;
	cursor:pointer;
	animation-name: title;
	animation-duration: 1.5s;
}
.down {
	text-align:center;
	margin-top:2%;
	cursor:pointer;
}
.dot {
  height: 14px;
  width: 14px;
  margin-left:3px;
  margin-right:3px;
  background-color: #000000;
  border-radius: 50%;
  display: inline-block;
}
.dot:hover {
	background-color:#ffffff;
}
/* MAIN TEXT */
.questions {
	height:40%;
}
.service {
	width:33%;
	display:inline-block;
	vertical-align: top;
}
.service h2 {
	font-weight:700;
}
.service h3 {
	margin-top:5%;
}
.service h2, .service h3 {
	font-size:28px;
	text-align:center;
	padding-left:20%;
	padding-right:20%;
	line-height:40px;
}

/* ------PAGE TWO-------- */
.bottom {
	height:100vh;
	background-color:#000000;
}
#map {
	height:100%;
	width:66%;
	display:inline-block;
	margin-bottom:-6px;
}
.contacts {
	display:inline-block;
	vertical-align:top;
	width:33%;
}
h1, .contacts a, .contacts p {
	color:#ffffff;
}
h1, .contacts div, .contacts p {
	padding-left:20%;
}
h1 {
	font-size:36px;
	margin-top:50%;
	margin-bottom:10%;
}
h1 span {
	font-weight: 700;
}
.contacts a, .contacts p {
	font-size:28px;
	line-height: 40px;
	text-decoration: none;
}
.contacts p {
	margin-top:5%;
}
.contacts a:hover {
	color:#dbdbdb;
}

@media (max-width:1680px) {
	.title h2 {
		font-size:42px;
	}
	.dot {
	  height: 13px;
	  width: 13px;
	}
	.service h2, .service h3 {
		font-size:24px;
		line-height:36px;
	}
	h1 {
		font-size:32px;
	}
	.contacts a, .contacts p {
		font-size:24px;
		line-height: 36px;
	}
}

@media (max-width:1280px) {
	.title h2 {
		font-size:38px;
	}
	.dot {
	  height: 12px;
	  width: 12px;
	}
	.service h2, .service h3 {
		padding-left:15%;
		padding-right:15%;
		font-size:22px;
		line-height:34px;
	}
	h1, .contacts div, .contacts p {
		padding-left:15%;
	}
	h1 {
		font-size:30px;
	}
	.contacts a, .contacts p {
		font-size:22px;
		line-height: 34px;
	}
}

@media (max-width:980px) {
	.title h2 {
		font-size:34px;
	}
	.down {
		margin-top:3%;
	}
	.dot {
	  	height: 10px;
	 	width: 10px;
	 	margin-left:2px;
  		margin-right:2px;
	}
	.header img {
		margin-left:6%;
		margin-top:5%;
	}
	.service h2, .service h3 {
		padding-left:10%;
		padding-right:10%;
		font-size:18px;
		line-height:30px;
	}
	h1, .contacts div, .contacts p {
		padding-left:10%;
	}
	h1 {
		font-size:26px;
	}
	.contacts a, .contacts p {
		font-size:18px;
		line-height: 30px;
	}
	.service {
		width:32%;
	}
}

@media (max-width:780px) {
	.title h2 {
		font-size:30px;
	}
	.service h2, .service h3 {
		font-size:16px;
		line-height:28px;
	}
	h1 {
		font-size:22px;
	}
	.contacts a, .contacts p {
		font-size:16px;
		line-height: 28px;
	}
}

@media (max-width:650px) {
	.top {
		height:auto;
		padding-bottom:10%;
	}
	.header img {
		margin-left:7%;
		margin-top:6%;
	}
	.title {
		margin-top:40%;
		margin-bottom:30%;
	}
	.service {
		width:100%;
	}
	.service h3 {
		margin-top:2%;
		margin-bottom:10%;
	}
	.title h2 {
		font-size:36px;
	}
	.service h2, .service h3 {
		padding-left:15%;
		padding-right:15%;
		font-size:24px;
		line-height:34px;
	}
	.bottom {
	height:auto;
	background-color:#000000;
	}
	#map {
		height:40vh;
		width:100%;
		display:inline-block;
		margin-bottom:-6px;
	}
	.contacts {
		height:60vh;
		display:inline-block;
		vertical-align:top;
		width:100%;
	}
	.contacts p {
		margin-top:3%;
	}
	h1 {
		margin-top:10%;
		margin-bottom:5%;
		font-size:32px;
	}
	h1, .contacts div, .contacts p {
		padding-left:15%;
	}
	.contacts a, .contacts p {
		font-size:24px;
		line-height: 34px;
	}
}

@media (max-width:480px) {
	.header img {
		margin-left:8%;
		margin-top:7%;
	}
	.title h2 {
		font-size:28px;
	}
	.dot {
	  height: 9px;
	  width: 9px;
	}
	.service h2, .service h3 {
		padding-left:10%;
		padding-right:10%;
		font-size:20px;
		line-height:30px;
	}
	h1 {
		margin-top:15%;
		margin-bottom:10%;
		font-size:24px;
	}
	h1, .contacts div, .contacts p {
		padding-left:10%;
	}
	.contacts a, .contacts p {
		font-size:20px;
		line-height: 30px;
	}
}

@media (max-width:320px) {
	.header img {
		margin-left:9%;
		margin-top:8%;
	}
	.title h2 {
		font-size:24px;
	}
	.dot {
	  height: 8px;
	  width: 8px;
	}
	.service h2, .service h3 {
		padding-left:10%;
		padding-right:10%;
		font-size:18px;
		line-height:28px;
	}
	h1 {
		font-size:22px;
	}
	.contacts a, .contacts p {
		font-size:18px;
		line-height: 28px;
	}
}