/* -------- base.css -------- */

/* apply box-sizing to all elements */
html { box-sizing: border-box; } 
*, *:before, *:after { box-sizing: inherit; }
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga" on;
  -webkit-tap-highlight-color: transparent;
}

body{ line-height:1.5; }

/* link defaults */
a{
	text-decoration:underline;
	color:#007db8;
}

a:hover, a:active{
	color: #00324a;	
}

/* ------ grid like base ------ */
/* 
"pinned" IE10 in Windows 8 forces page width to behave 
---- TESTING ----
@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: device-width;
  }
}*/

/* 
replaces grid-container 
max-width set in default.css
*/
.content-wrapper {
  position:relative;
  margin:0 auto;
  padding:0 10px;
}

.content-wrapper:after, .clear:after, .col-wrap:after{
  content:"";
  display:table;
  clear:both;
}

/* 
use when do grid layout
 */
.content-col{
  position: relative;
  float:left; 
  width: 100%;
  margin-bottom: 10px;
  padding:0 10px;
  vertical-align:top;
}

/* 
wildcard attribute selector for prefix, suffix, push and pull classes
---- TESTING ----

[class*='prefix'], [class*='suffix'], 
[class*='push'], [class*='pull']{
  position:relative;
}
*/

/* 
replaces grid-parent
removes left/right padding of 10px 
*/
.gutter-0 {
  padding: 0;
}

/* 
adds left/right padding of 20px 
*/
.gutter-20{
  padding:0 20px;
}

/* ------ headings ------ */
/* above default h1 */
.giga{ 
  font-size:40px
}
.mega{ 
  font-size:36px
}
.kilo{ 
  font-size:32px
}

h1, h2, h3, h4, h5, h6{
  margin:0;
  font-weight:bold;
}

h1, .alpha{ 
  font-size:28px
}
h2, .beta{ 
  font-size:24px
}
h3, .gamma{ 
  font-size:20px
}
h4, .delta{ 
  font-size:18px
}
h5, .epsilon{ 
  font-size:14px
}
h6, .zeta{
  font-size:12px
}

small, .milli{
  font-size:10px;
}

p, ul, ol, dl, address{
  margin:0 0 20px;
}

ul,ol{
  padding:0 0 0 20px; 
}

ul ul, ol ol, dl dl{
  margin:10px 0;
}

ul li, ol li, dl dd{
  margin-bottom:10px;
}

ol ol li{
  list-style-type:lower-alpha;
}

ol ol ol li{
  list-style-type:lower-roman;
}

nav ul, 
nav ol,
.no-bull{
  list-style:none;
  margin:0;
  padding:0;
}

nav li{
  margin:0;
}

dt{
  font-weight:bold;
}

dd{
  margin:0 0 10px;
  padding-left:20px;
}

blockquote{
  margin:0;
  padding-left:16px;
  border-left:2px solid #ddd;
}

blockquote p{
  margin-bottom:10px;  
}

blockquote small, cite, figcaption{
  font-style:italic;
  font-size:12px;
}

address{
  font-style:normal;
}

hr{
  margin:24px 0;
  border:0 #ccc solid;
  border-top-width:1px;
}

figure{
  margin:0;
}

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

/* ------ helpers ------ */

.left{
  float:left;
}

.right{
  float:right;
}

.hide{
  display: none;
}

.show{
  display: inline-block;
}

/*
---- TESTING ---- 

.vertical {
  position:relative;
  top:50%;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
}
*/

.lead{
  font-size:18px;
}

.text-center{
  text-align:center;
}

.text-right{
  text-align:right;
}

/* new text-indent method */
.text-hide{
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

/* responsive video */
.vid-wrap{
  position:relative;
  height:0;
  margin-bottom:24px;
  padding-bottom:56.25%;
}

.vid-wrap iframe, 
.vid-wrap object, 
.vid-wrap embed {
  position: absolute;
  top: 0;left: 0;
  width: 100%;
  height: 100%;
}

/* ------ form and elements styles ------ */

form{
  margin-bottom:24px;
}

label{
  display:block;
  margin-bottom:10px;
}

input, textarea, select{  
  display:block;
  width:100%;
  margin-bottom:16px;
  padding:8px;
  font-weight:500;
  color:#434a54;
  border:1px solid #ddd;  
}


input[type=checkbox], input[type=radio]{
  display:inline-block;
  width:auto;
}

textarea{
  line-height:normal;
}

input:focus, textarea:focus, select:focus{
  outline:none;
}

/* ------ placeholder styles ------ */
input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder{
  color:#dedede;
  transition:color 0.15s linear;
}

input::-moz-placeholder, 
textarea::-moz-placeholder{
  color:#dedede;
  transition:color 0.15s linear;
}

input:-moz-placeholder, 
textarea:-moz-placeholder{
  color:#dedede;
  transition:color 0.15s linear;
}

input:-ms-input-placeholder, 
textarea:-ms-input-placeholder {
  color:#dedede;
  transition:color 0.15s linear;  
}

input:focus::-webkit-input-placeholder, 
textarea:focus::-webkit-input-placeholder{
  color:#ededec;
}

input:focus::-moz-placeholder, 
textarea:focus::-moz-placeholder{
  color:#ededec;
}

input:focus:-moz-placeholder, 
textarea:focus:-moz-placeholder{
  color:#ededec;
}

input:focus:-ms-input-placeholder, 
textarea:focus:-ms-input-placeholder{  
  color:#ededec;  
}
input[type="checkbox"], input[type="radio"] {
  margin-right: 1rem;
}

/* ------ button styles ------ */
button, .btn{
  margin-bottom:16px;
  padding:8px 20px;
  text-align:center;
  text-transform:uppercase;
  -webkit-appearance:none;
}

button:focus, .btn:focus{
  outline:none;
}

.btn{
  display:block;
  width:auto;
  color:#fff;
  border:none;
  background-color:#4e81ba;  
}

.btn:hover, .btn:active, .btn:focus{	
	background-color:#4877ac;
}