@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
	margin: 0;
	padding: 0;
	border:0;
}

body {
	background: #F5F5F5;
	color: #67727A;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}
h2 {
	font-size: 250%;
	font-weight: 700;
	text-align: center;
	padding-top: 2%;
}
a:link {
	text-decoration: none;
	color: #666;
}
a:visited {
	text-decoration: none;
	color: #666;
}
a:hover {
	text-decoration: none;
	color: #000;
}

h3 {
	font-size: 175%;
	font-weight: 400;
	line-height; 155%;
	padding4: 5% 0;
}
p {
	font-size: 160%;
	line-height: 100%;
	padding: 3%;
	text-indent: 2%;
	text-align: justify;
	color: #000000;
}
img {
	max-width: 100%;
	height: auto;
	width: auto;
	margin-bottom: -4px;
}
header {
	background-color: #99FFFF;
	width: 100%;
	height: 120px;
	color: #00FFFF;
}
#header-inner {
	max-width: 1200px;
	margin: 0, auto;
}
#logo {
	margin: 20px;
	float: left;
	width: 500px;
	height: 81px;
	background: url("../images/racr_h_logo-2018_medium.png") no-repeat center;
}
nav {
	float: right;
	padding: 10px 20px 0 0;
}
#menu-icon {
	display: hidden;
	width: 45px;
	height: 45px;
	background: url("../images/menu-icon.png") no-repeat center;
}
a:hover#menu-icon {
	border-radius: 4px 4px 0 0
}
ul {
	list-style-type: none;
}
nav ul li {
	font-family: 'Open Sans', sans-serif;;
	font-size: 150%;
	display: inline-block;
	float: left;
	padding: 10px;
}
nav ul li a {
	color: #666;
	text-decoration: none;
}
nav ul li a:hover {
	color: #000;
}
a.current {
	color: #000;
}
.banner {
	width: 100%;
	background-color: #99FFFF;
}
.banner-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.one-third {
	width: 33.33333%;
	float: left;
	text-align: center;
}
#bookkeeping {
	background-color: #C3D7DF;
}
#advice {
	background-color: #F0F0F0;
}
#tax_prep {
	background-color: #C3D7DF;
}
.one-third i {
	color: #F0F0F0;
	font-size: 400%;
	padding: 5% 0% 5% 0;
}

#narrative {
    border: 2px solid rgb(29, 179, 82);
    background: rgb(202, 222, 245);
	display: inline-block;
	/*margin: 5px;*/
	padding: 2px;
	
	font-size: 80%;
	line-height: 1.2;
	text-indent: 2%;
	text-align: justify;
}


/* this is the main two column section */
.inner-wrapper {
	float: left;
	width: 100%;
	background-color: #CCFFFF;
}
article {
	float: left;
	margin: 0 auto;
	width: 50%;
	height: auto;
	text-align:center;
}

aside {
	float: right;
	margin: 0 auto;
	width: 50%;
	height: auto;
	text-align:center;
}
#smiley {
	clear:both;
	width: 100%;
}

.one-fourth {
	width: 25%;
	float: left;
	text-align: center;
}

footer {
	clear: both;
	background-color: #99FFFF;
	width: 100%;
	text-align: center;
}
.list_header {
	font-family: 'Open Sans', sans-serif;
	font-size: 160%;
	font-weight:bold;
	color: #000000;
	list-style-type: square;
	list-style-position: inside;
	display:list-item;
	padding: 5px 0px 0px 3%;
}
.list_item {
	font-family: 'Open Sans', sans-serif;
	font-size: 140%;
	color: #000000;
	list-style-position: inside;
	display:list-item;
	list-style-image:url(images/arrow.png);
	padding: 0px 0px 0px 4%;
}
.extra_info {
	font-size: 120%;
	line-height: 100%;
	padding: 20px;
	text-indent: 2%;
	text-align: justify;
	color: #000000;
}
	
/* ---------------------- Media queries --------------*/

/* this is to prevent the logo and menu colliding in the tablet size range */

@media screen and (max-width:992px){
	#logo {
		margin: 10px;
		float: left;
		width: 300px;
		height: 49px;
		background: url("../images/racr_h_logo-2018_small.png") no-repeat center;
	}
}

/* this is the mobile screen size range */

@media screen and (max-width:768px){
		h2 {
			font-size: 200%;
		}
		h3 {
			font-size:175%;
		}
		p {
			font-size:150%;
			background: #FFFFFF
		}
		header {
			position: absolute:
		}
		#logo {
			margin: 10px;
			width: 250px;
			height: 40px;
			background: url("../images/racr_h_logo-2018_smallest.png") no-repeat center;;	
		}
		#menu-icon {
			display: inline-block;
		}
		nav ul, nav:active ul {
			display: none;
			z-index: 1000;
			position: absolute;
			background: #CCC;
			right: 20px;
			top: 60px;
			border: 3px solid #fff;
			border-radius: 10px 10px 10px 10px;
			width: 40%;
		}
		nav:hover ul {
			display:block;
		}
		nav li {
			text-align: center;
			width: 100%;
			padding: 10px 0;
		}
		.banner {
			padding-top: 2px;
		}
		.one-third {
			float: left;
			width: 100%;
		}
		.one-third i {
			font-size: 150%;
			padding: 4% 0 1% 0;
		}
		article {
			width: 100%;
			font-size: 80%
		}
		aside {
			width: 100%;
			font-size: 80%
		}
		#experience {
			display: none;
		}
		.list_header {
			font-size: 140%;
		}
		.list_item {
			font-size: 120%;
		}
		.extra_info {
			font-size: 100%;
		}
		footer h1{
			width: 100%;
			font-size: 100%;
			text-align: center;
		}
}