/*
Theme Name: Access Tonna Lock
Description: A custom made theme by Ben Coyour Design.
Version: 1.0
Author: Ben Coyour Design
Author URI: http://www.bencoyourdesign.com
*/


/*-----BASE STYLES-----*/
body, html {background:#2e2f32; font:400 12px/20px Helvetica, Arial, sans-serif; color:#444;}
body {min-width:300px;}
.primary, #hwrap, #cwrap, #fwrap, div {position:relative; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
#hwrap {z-index:6; background:#fff;}
#cwrap, #banner {z-index:9;}
#fwrap {z-index:3;}

.visible {display:block !important;}
hr {border:0; height:1px; margin:4.5em 0; background-color:rgba(0, 0, 0, .1); clear:both; display:block;}
img {max-width:100%; height:auto;}
a {color:#fff; outline:none; text-decoration:underline; transition:all 0.3s ease;}
a:hover {text-decoration:none;}


/*-----BUTTON-----*/
a.button, input.button {
  display:inline-block;
  margin:0 .7em .7em 0; padding:.7em 1.5em;
  background:#fff; color:#fff;
  border:none; border-radius:3px;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.3s ease;
}
a.button i, input.button i {color:#fff; padding-right:.6em; opacity:.5;}
a.button:hover, input.button:hover {padding:.7em 2.2em; color:#fff;}


/*-----CLEARFIX-----*/
.cf:before, .cf:after {content:" "; display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}


/*-----HEADER-----*/
header.primary {text-align:center; background:#273A58; padding-bottom:1.5em;}
header.primary a {text-decoration:none; color:#777;}
header.primary h2 {font-size:1.3em; padding:0; position:relative; margin:1em auto -.5em; position:relative; z-index:5;}
header.primary h2 a {display:block; width:170px; margin:0 auto;}


/*-----CONTENT-----*/
.box {padding:0 8% 2em; transition:all 0.3s ease;}
.box, aside.primary, .pagetitle h1 {margin-left:auto; margin-right:auto; position:relative;}
#cwrap {background:#1d2f49; color:#d4def6; border-top:10px solid #80B5CA;}
.pagetitle {position:relative; top:-3em; background:#1d2f49; width:60%; max-width:380px; padding:1em 0 0; margin:0 auto; text-align:center; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.pagetitle h1 {margin:0;}

.main p:first-child {margin-top:0;}

h1, h2, h3 {
  font-family:'Roboto Slab', Helvetica, Arial, sans-serif;
  font-weight:700;
  margin:0;
  color:#fff;
  line-height:1.2em;
}
h1 {font-size:2.3em; margin:3em 0 0;}
h2 {font-size:1.9em; margin:2.5em 0 0;}
h3 {font-size:1.6em; margin:2em 0 0; padding-bottom:4px; border-bottom:1px dotted rgba(255,255,255,.3);}
ul, ol {margin:1.4em 0 1.4em 1.3em; padding:0;}
ul li {list-style:square;}
ul ul li {list-style:circle;}
ul ul, ol ol {margin:.2em 0 .4em 1.5em;}
p, table, address, form {margin:1.4em 0;}
strong {font-weight:700;}

.notfound {text-align:center; padding-bottom:3em;}
.notfound h1 span {display:block; font-size:4em; line-height:1em; opacity:.4;}
.notfound h1 {margin-bottom:1em;}

aside.primary h3 {margin-top:0;}


/*-----FOOTER-----*/
#fwrap {text-align:center; color:#ccc; padding:2.5em 8%;}
.left {font:700 22px/22px 'Roboto Slab'; padding:0 0 1em;}
.left img {max-width:70px; display:block; margin:10px auto 0;}
.center {font-size:17px; padding:0 0 1em;}
.center strong {display:block; font:700 22px/22px 'Roboto Slab';}


/*
**
**
**
**
**
-----------------------------------------------------------------LARGE DISPLAY-----------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width:768px){


/*-----BASE STYLES-----*/
html {min-height:100%;}
body {font-size:17px; line-height:30px;}
footer.primary, .main {margin:0 auto; width:860px;}


/*-----CONTENT-----*/
header.primary h2 {margin:1em auto -3vw;}

.box {padding:0 0 2em;}
#cwrap {border-top:20px solid #374870;}
.pagetitle {top:-3em; padding:2em 0 0;}
.pagetitle h1 {margin:0;}

h1 {font-size:2.6em;}
h2 {font-size:2em;}
h3 {font-size:1.3em;}

section.primary {float:left; width:60%;}
aside.primary {padding:0; margin:0; float:right; width:30%;}


/*-----FOOTER-----*/
.center strong {display:block; font:700 30px/22px 'Roboto Slab';}
.right {padding-top:1em;}
.right a {display:block;}
}



/*
**
**
**
**
**
-----------------------------------------------------------------MEDIUM DISPLAY----------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1100px){
body {font-size:13px; line-height:24px;}
footer.primary, .main {margin:0 auto; width:84%;}
}