/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.clear {width:100%;clear:both;height:1px;background:#eee;}
html,body {margin:0;padding:0;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {background: #494949; color: #444;font: 16px; font-family:'Roboto Condensed',sans-serif; font-weight:300!important;}
#container {width:100%; margin:0 auto; background:#fff;}

#header {width:96%; background:#17376E; color:#fff; display:inline-block; padding:0 2%;}
#header img {width: 215px; position:absolute; top:10px; left:0;}
#header icon a {color:#fff; font-size:20px; padding:10px 20px; border:1px solid #fff; border-radius:7px; position:absolute; top:6px; right:0;}
#header icon a:hover {border:1px solid #46A5E5; background:#46A5E5;}

.main-header p {width:650px; margin:10px auto 0;}
.main-header p span:nth-child(1) {font-size:30px;}
.main-header p span:last-child {font-size:25px; font-weight:700;}

#nav {width:100%; background:#17376E; text-align:center; padding: 15px 0 0;}
#nav a {color:#fff; padding:10px 25px; margin:0; display:inline-block; font-size:21px; font-weight:400; text-transform:uppercase;}
#nav a:hover {background:#46A5E5;}
#toggle {display:block;}

.main,.main-header {width:96%; max-width:1280px; margin:0 auto; position:relative;}
.main {padding:15px 0; line-height:2;}
.main-full {width:96%; padding:20px 2%;}
#section {margin:30px auto; height:600px;}
.col1 {width:40%; float:left; display:block; margin-bottom: 100px;}
.col2 {width:52%; float:right; margin-left:4%; display:block; margin-bottom: 100px;}
.colhome div:nth-child(1) {display:inline-block; width:20%; float:left;}
.colhome div:nth-child(2) {display:inline-block; width:80%; float:left;}

.items {width:8%;}
#it {width:96%; padding:2%; margin-top:6%; background:white; border:#78bede solid 1px;}

#footer {width:96%; background:#494949; color:white; display:inline-block; padding:30px 2%; text-align:center;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
a,button,input,.link-box {-webkit-transition: all 0.15s;	-moz-transition: all 0.15s; -o-transition: all 0.15s;	transition: all 0.15s; outline:0!important;}
h1,h2,h3,h4,h5,h6 {clear:both; display:block; margin:0 0 20px;}

table {background:#eee; padding:2%; width:96%; border-radius:4px;}
input {background:#ddd; padding: 5px 2%; border-radius:4px; border:1px solid #ddd; color:#888;}
input:focus {background:#fff;}

a {background-color: transparent; text-decoration: none; color:#46A5E5;}
abbr[title] {border-bottom:1px dotted;}
b,strong {font-weight:bold;}
dfn {font-style:italic;}
mark {background:#ff0; color:#000;}
small {font-size:80%;}
big {font-size:125%;}
sub,sup {font-size:75%; line-height: 0; position:relative; vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
img {border:0;}
svg:not(:root) {overflow:hidden;}
figure {margin:1em 40px;}
hr {box-sizing:content-box; height:0;}
pre {overflow:auto;}
code,kbd,pre,samp {font-family:monospace, monospace; font-size:1em;}

.fa {margin-right:10px;}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,input[type="button"],input[type="reset"],input[type="submit"] {
	border:1px solid;
	border-color:#ccc;
	border-radius:4px;
	background:#ddd;
	color:#666;
	font-size:18px!important;
	font-size:0.75rem;
	font-weight:300!important;
	padding:5px 20px;
  margin: 10px 10px 10px 0;
}

button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {
	border-color:#ccc;
	background:#eee;
  cursor:pointer;
}


input[type="text"] {display:inline-block;}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
#header p {width:610px; margin:10px 0 0 auto;}
#nav {text-align:right!important;}
.col1,.col2 {width:100%!important; float:none!important; margin-bottom:100px!important; margin-left:0!important}
.col2 > table {margin:15px 0 0;}
}

@media screen and (max-width: 920px) {
#header {height:auto; text-align:center}
#header img {position:static; padding: 15px; width:150px;}
#header icon a {position:static; display:block; margin:0 auto 15px; width:100px;}
#header p {width:100%; margin:0 0 15px auto; text-align:center}
#nav {text-align:center!important;}

.colhome div:nth-child(1) {width:30%;}
.colhome div:nth-child(2) {width:70%;}
}

@media screen and (min-width: 700px) {
#nav {display:block!important;}
#toggle {display:none;}
}

@media screen and (max-width: 700px) {
#nav {padding:0; display:none;}
#nav a {display:block; padding: 20px 0; background:#aaa; border-bottom:1px solid #bbb;}
#nav a:hover {background:#ccc; border-bottom:1px solid #bbb;}
#toggle {color:#fff; background:#3786BB; text-align:center; line-height: 3; cursor:pointer;}
}

@media screen and (max-width: 550px) {
.colhome div:nth-child(1) {width:100%; text-align:center; margin-bottom:20px;}
.colhome div:nth-child(2) {width:100%;}
}