/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'footer';

body {
	overflow-x: hidden;
	font-family: $font2;
	}
.container {
	max-width: 1100px;
	margin: 0 auto;
	}
	
#main {
	#inner-main {
		margin: 2rem 0;
		h1, h2 {
			margin: 20px 0;
			text-align: center;
			color: $grey;
			}
		h1 {
			font-weight: 700;
			font-size: 42px;
			opacity: 0;
			-webkit-animation: appear .25s .3s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			}
		h2 {
			font-size: 19px;
			letter-spacing: 1px;
			opacity: 0;
			-webkit-animation: appear .25s .6s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			max-width: 55ch;
			margin: 20px auto;
			line-height: 1.5;
			}
		}
	}
	
.center-chart {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
					-webkit-box-pack: center;
					    -ms-flex-pack: center;
					        justify-content: center;
			width: 100%;
			position: relative;
			i {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 75px;
				width: 75px;
				border-radius: 50%;
				color: #fff;
				background: -webkit-linear-gradient($orange, $orange - 50);
				background: -o-linear-gradient($orange, $orange - 50);
				background: linear-gradient($orange, $orange - 50);
				font-size: 32px;
				z-index: 4;
				margin: 0 30px;
				&:nth-of-type(1) {
					opacity: 0;
				-webkit-animation: appear .25s .9s linear;
				        animation: appear .25s .9s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
					}
				&:nth-of-type(2) {
					opacity: 0;
				-webkit-animation: appear .25s 1.2s linear;
				        animation: appear .25s 1.2s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
					}
				&:nth-of-type(3) {
					opacity: 0;
				-webkit-animation: appear .25s 1.5s linear;
				        animation: appear .25s 1.5s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
					}
				}
			.mid-line {
				position: absolute;
				height: 4px;
				width: 300px;
				top: 50%;
				left: 50%;
				-webkit-transform: translateX(-50%);
				    -ms-transform: translateX(-50%);
				        transform: translateX(-50%);
				background: $grey;
				z-index: 3;
				opacity: 0;
				-webkit-animation: appear .25s 1.8s linear;
				        animation: appear .25s 1.8s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
				}
			}
			
@-webkit-keyframes appear {
	100% {
		opacity: 1;
		}
	}
			
@keyframes appear {
	100% {
		opacity: 1;
		}
	}
	
	
#about {
	background: $grey;
	border-top: 4px solid $orange;
	opacity: 0;
	-webkit-animation: appear .25s 2.1s linear;
	        animation: appear .25s 2.1s linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	#inner-about {
		padding: 10px 10px 30px;
		margin: 2rem auto 0;
		color: #fff;
		max-width: 70%;
		h1 {
			font-size: 48px;
			margin: 0 auto 20px;
			text-align: center;
			max-width: 70%;
			padding-bottom: 5px;
			border-bottom: 3px solid $orange;
			}
		p {
			margin: 10px 0;
			line-height: 1.2;
			letter-spacing: 1px;
			font-size: 17px;
			}
		h2#call-today {
			text-align: center;
			margin: 20px 0;
			font-size: 44px;
			a {
				text-decoration: none;
				color: inherit;
				}
			span {
				color: $orange;
				font-weight: 700;
				}
			}
		}
	}
	
@media all and (max-width: 850px) {
	#main {
	#inner-main {
		margin: 1rem 0;
		h1, h2 {
			margin: 15px auto;
			}
		h1 {
			font-size: 36px;
			}
		h2 {
			font-size: 17px;
			}
		}
	}
.center-chart {
			i {
				height: 55px;
				width: 55px;
				font-size: 24px;
				margin: 0 20px;
				}
			.mid-line {
				width: 200px;
				}
			}
	#about {
	#inner-about {
		padding: 10px 10px 20px;
		margin: 1.5rem auto 0;
		max-width: 90%;
		h1 {
			font-size: 36px;
			margin: 0 auto 15px;
			text-align: center;
			max-width: 85%;
			}
		p {
			font-size: 15px;
			}
		h2#call-today {
			margin: 15px 0;
			font-size: 36px;
			}
		}
	}
}