@font-face{
	font-family: myAllerFont;
	src: url(../font/Aller_Rg.ttf);
}

@font-face{
	font-family: myAllerFont;
	src: url(../font/Aller_Bd.ttf);
}

body{
	font: 15px/1.5 myAllerFont, sans-serif;
	padding: 0;
	margin: 0;
	background-color: #63B8FF;
}

/* Global */
.container{
	width: 80%;
	margin: auto;
	overflow: hidden;
}

ul{
	margin: 0;
	padding: 0;
}

.button_1{
	height: 38px;
	background: #CC919A;
	border: 0;
	padding-left: 20px;
	padding-right: 20px;
	color: #FFFF00;
}

.button_2{
	height: 38px;
	background: #98ff98;
	border: 0;
	padding-left: 20px;
	padding-right: 20px;
	color: #000000;
}

.dark{
	padding: 15px;
	background: #CC919A;
	color: #000000;
	margin-top: 10px;
	margin-bottom: 10px;
}


/* Header */
header{
	background: ‎#63B8FF; 
	color: #FFFFFF;
	padding-top: 30px;
	min-height: 70px;
	border-bottom: #CC919A 3px solid;
}

header a{
	color: #FFFFFF;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
}

header li{
	float: left;
	display: inline;
	padding: 0 20px 0 20px;
}

header #branding{
	float: left;
}

header #branding h1{
	margin: 0;
}

header nav{
	float: right;
	margin-top: 10px;
}

header .highlight, header .current a{
	color: #FFFF00;
	font-weight: bold;
}

header a:hover{
	color: #CC919A;
	font-weight: bold;
}

/* Showcases */
#showcase{
	min-height: 400px;
	background: url("../images/mobileBackground.jpg") no-repeat 0 -400px;
	text-align: center;
	color: #000080;
}

#showcase h1{
	margin-top: 100px;
	font-size: 55px;
	margin-bottom: 10px;
}

#showcase p{
	font-size: 20px;
}

#showcase img{
	opacity: 0.5;
	/* For IE8 and earlier */
    filter: alpha(opacity=50);
}

/* Newsletter */
#newsletter{
	padding: 5px;
	color: #000000;
	text-shadow: #999999 0.1em 0.1em 0.2em;
	background: #98ff98;
	border-bottom: #CC919A 3px solid;
}

#newsletter h1{
	float: left;
}

#newsletter form{
	float: right;
	margin-top: 15px;
}

#newsletter input[type="email"]{
	padding: 4px;
	height: 25px;
	width: 250px;
}

/* Boxes */
#boxes{
	margin-top: 20px;
}

#boxes .box{
	float: left;
	text-align: center;
	width: 30%;
	padding: 10px;
}

#boxes .box img{
	width: 150px;
}

/* Sidebar */
aside#sidebar{
	float: right;
	width: 30%;
	margin-top: 10px;
}

aside#sidebar2{
	float: right;
	width: 30%;
	margin-top: 10px;
}

aside#sidebar .quote input, aside#sidebar2 .quote textarea{
	width: 90%
	padding: 5px;
}

/* main-col */
article#main-col{
	float: left;
	width: 65%;
}

/* Services */
ul#services li{
	list-style: none;
	padding: 20px;
	border: #CC919A solid 1px;
	margin-bottom: 5px;
	background: #ffe9ec;
}

#pricing{
	text-align: right;
}

footer{
	padding: 20px;
	margin-top: 20px;
	color: #000;
	background-color: #98ff98;
	text-align: center;
}

/* Media Queries */
@media(max-width: 768px;){
	header #branding,
	header nav,
	header nav li,
	#newsletter h1,
	#newsletter form,
	#boxes .box,
	article#main-col,
	aside#sidebar
	aside#sidebar2{
		float: none;
		text-align: center;
		width: 100%;
	}

	header{
		padding-bottom: 20px;
	}

	#showcase h1{
		margin-top: 40px;
	}

	#newsletter button, .quote button{
		display: block;
		width: 100%
	}

	#newsletter form input[type="email"], .quote input, .quote textarea{
		width: 100%;
		margin-bottom: 5px;
	}
}