﻿/*======================
PRIMARY STYLES
========================*/
@font-face {
    font-family: 'aaarghnormal';
    src: url('../font/aaargh-webfont.eot');
    src: url('../font/aaargh-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/aaargh-webfont.woff') format('woff'),
         url('../font/aaargh-webfont.ttf') format('truetype'),
         url('../font/aaargh-webfont.svg#aaarghnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	color:#696969;
	font:100%/1.4 "Open Sans", sans-serif;
}

img {
	max-width:100%;
	height:auto;
}

.container {
	max-width:960px;
	margin:0 auto;
	position:relative;
}

.clear {clear:both;}

.alignleft {
	float:left;
	margin-right:15px; 
}
.alignright {
	float:right;
	margin-left:15px;
}
.alignmid {
	display:block;
	margin:0 auto;
}
.center {text-align:center;}
.border {border:1px solid #ffd104;}



/*======================
TYPOGRAPHY/LINK STYLES
========================*/

h1,h2,h3,h4,h5,h6 {
	font-family: 'aaarghnormal';
	font-weight:normal;
	padding-bottom:0;
}

h2,h3,h4,h5,h6 {color: #1d67ff;}

h1 {font-size:2.9em;color: #03b02c; line-height: 1.2em;}
h2 {font-size:2.0em; line-height: 1.1em;}
h3 {font-size:1.5em;}
h4 {font-size:1.1em;}
h5 {font-size:0.8em;}
h6 {font-size:0.6em;}

a {
	color:#1d67ff;
	transition:0.5s all ease;
}

a:hover {color:#1256e0;}

a.btn {
	background:#ffd104;
	color:#1d67ff;
	text-align:center;
	display:inline-block;
	text-decoration:none;
	padding:2px 5% 4px 5%;
	font-size:1em;
	border-radius:20px;
	-webkit-border-radius:20px;
	font-weight:bold;
	transition:all ease 0.5s;
	-webkit-transition:all ease 0.5s;
}

a.btn:hover {
	background:#fbda46;
}

hr {
	background:#ffd104;
	border:0;
	height:10px;
	padding:0;
	width: 100%;
	margin: 10px 0;
}

/*======================
HEADER STYLES
========================*/
header {
	position:relative;
}

#social {
	background-color:#ffd104;
	vertical-align: middle;
	border-radius: 0 0 10px 10px;
	position:absolute;
	top:0;
	right:10px;
	padding:6px 15px;
}

#social img {
	padding:0 2px;
	vertical-align: middle;
}

#menu-btn {display:none;}

#logo {
	float:left;
	margin-top:75px;
	line-height:2.7em;
}

#logo p { 
	font-size:1.2em;
}
/*======================
NAV STYLES
========================*/
nav {
	background-color:#1d67ff;
	border-radius: 15px 15px 0 0;
	font-size:0.9em;
}

nav ul {
	text-align:center;
	list-style-type:none;
	padding-bottom:0;
}

nav li {
	display:inline-block;
	margin:0;
	position:relative;
}

nav li a {
	display:block;
	font-size:1.2em;
	font-family:'aaarghnormal';
	text-decoration:none;
	color:#fff;
	padding:14px 20px 15px 20px;
	font-weight:600;
		}

nav li:hover a {
	background:#0c4cd0;
	color:#fff;
}

/*DROPDOWNS */

nav li ul {
    display: none;
}
nav li:hover ul {
    display: block;
    position: absolute;
    top: 52px;
    z-index: 9999;
}
nav li:hover li {
    float: none;
    white-space: nowrap;
    width: 100%;
}
nav li:hover li a {
    background:#FFD104;
    padding: 12px 30px 12px 20px;
    text-align: left;
    font-size:0.9em;
    color:#696969;
}
nav li:hover li a:hover {
    background:#FDE68A;
}

/*======================
CONTENT STYLES
========================*/


#slideshow{
	background:#03b02c;
	width:100%;
	border-bottom-width:5px;
    border-bottom-color:#ffd104;
    border-bottom-style: solid;
}

#slider {
	max-width:960px;
	margin:0 auto;
	position:relative;
}

#supt-content{
	position:relative;
	font-size: 0.9em;
	line-height: 1.5em;
}

#welcome{
	margin-top:15px;
	font-size:0.9em;
	float:left;
	width:39%; /* 380px/960px */
}

#welcome-circle{
	border-radius: 0 0 300px 300px;
	-webkit-border-radius: 0 0 300px 300px;
	position:relative;
	background: #e30500;
	margin:0;
	text-align: center;
	margin:5px 0 10px 1%;
	height:280px; 
	width:57%; /* 550px/960px */
	float:right;
}

#blog{
	width:72%; /* 390px/540px */
	height:100%;
	margin:0 auto;
	text-align:center;
	color:#fff;
	padding-top:8px;
}

#blog h4{
	margin-top:0px;
	color:#fff;
}

#blog p{
	padding:3px;
	font-size: 0.9em;
}

#blog hr{
	padding-bottom:0px;
	padding-top:0px;
	height:1px;
	background:#fff;
}

#quicklinks{
	margin:0 auto;
	position:relative;
	width:100%;
	text-align:center;
}

#quicklinks img{
	padding-top:10px;
	padding-bottom:10px;
}

a.trans {
	width:24%;
	display:inline-block;
}

a.trans img {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
    transition: transform 0.2s ease-in 0s;
    -webkit-transition: transform 0.2s ease-in 0s;
}

a.trans:hover img {
	transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
}


#supt{
	background:#03b02c;
	min-height:70px;
	padding-top:20px;
	width:100%;
	z-index:100;
}

#supt h2{
	color:#fff;
	font-size:3.2em;
	margin-left:20px;
}

#supt-content{
	top:10px;
	width:81%; /* 780px/960px */
	float:left;
}

#supt-content hr {
	height:2px;
}

#supt-quicklinks{
	top:10px;
	margin-left: 2%;
	width: 17%;
	float: left;
}

#supt-quicklinks a.trans {
	display:block;
	width:100%;
	margin-bottom: 20px;
}

div.topic {
	font-weight:bold;
	font-size:1.2em;
}

#form .clear {clear:both;}
#form .center {text-align:center;}
#form h3 {margin:0 1%;}
#form small {font-style:italic;}
#form hr {width:98%;margin:10px 1% 15px 1%;}

/*GRID */
#form .column {
	float:left;
	margin:0 1%;
}

#form .full {width:98%;margin:0 1%;}
#form .half {width:48%;}
#form .twothird {width:65%;}
#form .onethird {width:31%;}

/*FORM STYLES*/

#form input:not([type=submit]):not([type=checkbox]) {
	width:96%;
	padding:10px 2%;
}

#form textarea {
	width:100%;
	resize:none;
}

#form select {
	width:101%;
	padding:10px 2%;
}

/*MEDIA QUERIES */

@media (max-width:767px) {
	#form .column {
		float:none;
		margin:0;
	}
	#form .full, #form .half, #form .twothird, #form .onethird {
		width:100%;margin:0;
	}
}

/*======================
FOOTER STYLES
========================*/
footer{
	background:#f6f6f6;
	border-top-width:5px;
    border-top-color:#03b02c;
    border-top-style: solid;
	font-size:0.7em;
	margin-top:50px;
}

#footer-left{
	margin-top:10px;
	float:none;
	width: 100%;
	text-align:center;
}

body.home #footer-left {
	width:70%;
	float:left;
	text-align:left;
}

#footer-right{
	margin-top:10px;
	text-align:left;
	display:none;
	float: right;
	width: 25%;
	margin-left:5%;
}

body.home #footer-right {
	display:inline;
}
/*======================
MEDIA QUERIES
========================*/
/*MOBILE FLASH REMOVAL */
@media (max-width: 1100px) {
   .flash {
      display:none;
   }
}
/*DESKTOP FLASH ADDITION */
@media (min-width: 1100px) {
   .noflash {
      display:none;
   }
   .flash {
      width:550px;margin:0 auto;
   }
}

/*TABLETS */
@media (max-width: 1024px) {
	.container, #slider {
		width:95%;
	}
}

/*PORTRAIT TABLETS */
@media (max-width:900px) {

	#social img {
		width:30px;
	}
	#logo p {
		font-size: 0.9em;
	}

	nav li a {
		font-size: 1em;
		padding:10px 13px 11px 13px;
	}

	nav li:hover ul {
		top:41px;
	}

	nav li:hover li a {
		font-size:0.8em;
	}

	#welcome-circle {
		height: 230px;
	}

	#blog p{
	font-size: 0.7em;
	}

	a.btn {
		font-size: 0.8em;
	}
	#welcome {
		font-size:0.8em;
	}

}

/* MOBILE LAYOUTS */
@media (max-width:767px) {
	nav {border-radius:0;}

	#desktop {display:none;}
	.container, #slider {
		width: 98%;
	}

	h3 {
		font-size:1.4em;
	}

	#social {
		position:relative;
		text-align:right;
		margin:0 auto;
		padding:8px 2%;
		width:96%;
		right:0;
	}

	#social strong {display:none;}

	#menu-btn {
		display:inline;
		position:absolute;
		top:10px;
		left:20px;
	}

	nav li:hover ul {
    display: block;
    position: relative;
    top: 0;
    z-index: 9999;
}



	#logo {
		float:none;
		text-align:center;
		margin-top:50px;
	}

	#logo p {
		line-height:1.4em;
		margin-top:20px;
		margin-bottom: -20px;
		font-size: 1em;
		margin: 20px 20px -20px 20px;
	}
	#welcome {
		float: none;
		width: 95%;
		margin:0 auto;
	}

	#welcome, #content {
		line-height:1.7em;
	}

	#welcome-circle {
		float: none;
		width: 93%;
		margin:0 auto;
		margin-bottom: 15px;
		height:265px;
	}

	#blog {width:80%;}

	#blog h4 {
		font-size:1em;
	}
	#blog p {
		font-size:0.75em;
	}
	#quicklinks {
		width:93%;
		margin:0 auto;
	}

	#supt-content {
		top:10px;
		width:95%;
		float:none;
		margin: 0 auto;
	}

	#supt-quicklinks{
		top:10px;
		margin-left: 0;
		width: 98%;
		float: none;
		margin: 0 auto;
		text-align:center;
	}

	#quicklinks a.trans {
		width:45%;
		display:inline-block;
		margin-bottom:10px;
	}

	#supt-quicklinks a.trans {
		display:inline-block;
		width:48%;
		margin-bottom: 20px;
	}

	#supt h2 {
		font-size:2.5em;
		text-align:center;
		margin:0;
	}

	footer {
		text-align:center;
		padding-top:20px;
	}

	#footer-left {
		float: none;
		width:80%;
		margin:0 auto;
	}

	#footer-right {
		width:40%;
		float: none;
		margin:0 auto;
		text-align:center;
		margin-left:0;
	}

	.alignleft {
		float:none;
		display:block;
		margin: 10px auto;
	}
	.alignright {
		float:none;
		display:block;
		margin:10px auto;
	}
}

