/**
 * 	Name: base.css
 *
 *	T.O.C
 *
 *	=CssReset
 *  =Typography
 *  =Typography - Links
 *  =Typography - Lists
 *  =Typography - Images
 *  =Typography - Tables
 *  =Typography - Forms
 *  =Misc
 *
 */


/* ==========================================================================
   =CssReset
   ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
menu, 
nav, 
section {
    display: block;
}

body {
    line-height: 1;
}

ol, 
ul {
    list-style: none;
}

blockquote, 
q {
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**
 * 1. Always force vertical scroll
 * 2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
 * 3. For animations
 */

html { 
    font-size: 100%; 
    overflow-y: scroll; /* 1  */ 
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; /* 3 */
}

/* ==========================================================================
   =Typography
   ========================================================================== */

body {
    background-color: #3e8a7b;
    color: #7a7885;
    font: 14px "Roboto", Arial, sans-serif;
    line-height: 24px;
    font-weight: 300;
    letter-spacing: 1.5px;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    font-family: 'Roboto', Arial, sans-serif; 
    font-weight: 900;
    text-transform: uppercase;
}

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a { 
    color: #7a7885;
    font-weight: inherit; 
}

h1 {	 
    font-size: 36px; 
    line-height: 54px;
    margin-bottom: 18px;
    letter-spacing: 5px; 
}

h2 { 	
    font-size: 24px; 
    line-height: 36px;  
    margin-bottom: 16px;
    letter-spacing: 4px; 
}

h3 { 
    font-size: 18px; 
    line-height: 28px;
    margin-bottom: 20px;
    letter-spacing: 2px;   
}

h4 {
    font-size: 16px; 
    line-height: 24px;
    margin-bottom: 24px;
    letter-spacing: 2px;      
}

h5 { 
    font-size: 14px; 
    line-height: 21px;
    margin-bottom: 2px;
    letter-spacing: 2px;    
}

h6 { 
    font-size: 12px; 
    line-height: 18px;
    letter-spacing: 2px;    
}

p { margin-bottom: 20px; 
    font-size: 20px;
    color: #5c5a69;
    font-family: 'Roboto', Arial, sans-serif; 
 
}
em { font-style: italic; }
strong { font-weight: 700; }
small { font-size: 90%; }

sub { 
    vertical-align: sub; 
    font-size: 75%; 
}

sup { 
    vertical-align: super; 
    font-size: 75%; 
}

abbr[title] {  
    border-bottom: 1px dotted #999; 
    cursor: help;
}

address { 
    display: block; 
    margin-bottom: 20px; 
}

blockquote {}

blockquote p { font-style: italic; }

blockquote span { 
    display: block;
    margin-top: 5px;
    color: #999999;  
}

blockquote span:before { content: "\2013 \00A0"; }

hr { 
    height: 0; 
    border: solid #e0e0e0; 
    border-width: 1px 0 0 0;
    margin: 30px 0;
}

code, 
pre { 
    border-radius: 3px;	
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;			
}

code { 
    padding: 1px 4px;
    border: 1px solid #e0e0e0;
    background-color: #f3f3f3;  
    color: #d50f25;  
}

pre { 
    overflow-x: auto; 
    display: block;
    padding: 20px;
    border: 1px solid #e0e0e0;   
    margin-bottom: 20px;
    white-space: pre-wrap;
    background-color: #f3f3f3; 
}

/* Typography Helper Classes */

/**
 * <div class="hr"></div> acts like an <hr />
 */

.hr { 
    border-top: 1px solid #e0e0e0;  
    margin: 30px 0;
}

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

.text-highlight { 
    padding: 10px;
    border-radius: 2px;	
    background-color: #f6f6f6; 
    color: #7a7885; 
}

.text-uppercase { text-transform: uppercase; }

.mute{ color: #999; }

p.last,
h1.last,
h2.last,
h3.last,
h4.last,
h5.last,
address.last { margin-bottom: 0; }

@media (max-width: 767px) {

    /**
     * 1. Hide background on mobile devices
     */

    body { 
        background: none; /* 1 */
        background-color: #fff; 
    }

    p.last, 
    h1.last, 
    h2.last, 
    h3.last, 
    h4.last, 
    h5.last, 
    address.last { margin-bottom: 20px; }

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

}

/* ==========================================================================
   =Typography - Links
   ========================================================================== */

a, 
a:visited { 
    color: #5c5a69; 
    text-decoration: none; 
}

/**
     * 1. Remove the gray background color from active links in IE 10.
     */

a:active {
    background: transparent; /* 1 */
}

a:hover, 
a:focus {
    color: #5c5a69;
    outline: 0; 
    text-decoration: underline;
}	

/* ==========================================================================
   =Typography - Lists
   ========================================================================== */

ul, 
ol { 
    margin-bottom: 20px;
    list-style-position: inside; 
}

ul ul, 
ul ol, 
ol ol, 
ol ul { 
    margin-bottom: 0; 
    margin-left: 30px; 
}

li {}

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* List Helper Classes */

ul.last,
ol.last { margin-bottom: 0; }

@media (max-width: 767px) {

    ul.last, 
    ol.last { margin-bottom: 20px; }

}

/* ==========================================================================
   =Typography - Images
   ========================================================================== */

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

/* Images Helper Classes */

.img-align-left { 
    float: left;
    margin: 10px 20px 0 0;  
}

.img-align-right { 
    float: right;
    margin: 5px 0 0 10px; 
}

/* ==========================================================================
   =Typography - Tables
   ========================================================================== */

table { 
    width: 100%;
    border-collapse: collapse; 
    border-spacing: 0; 
    margin-bottom: 20px; 
    background-color: transparent; 
}

caption { 
    margin: 20px 0;
    font-weight: 700; 
    text-align: center; 
}

table th, 
table td {
    padding: 8px; 
    /*		border-top: 1px solid #7a7885;*/
    vertical-align: top; 
}

table th { 
    border-top: 0;
    font-weight: 700;  
}

table thead th { vertical-align: bottom; }

/* ==========================================================================
   =Typography - Forms
   ========================================================================== */

form {}

fieldset {}

form p {}

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

label span { color: #d50f25; }

select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] { cursor: pointer; }

/*
 * 1. stop safari from overwriting input styles
 */	

input,
textarea,
select {
    -webkit-appearance: none; /* 1 */
    display: block;		
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px;
    border: 2px solid #d7d7d7;
    border-radius: 3px;
    margin-bottom: 10px;
    background: #fff;
    font: 14px "Roboto", Arial, sans-serif; 
    line-height: 21px;	
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
    border-color: #7a7885;
    outline: 0;		
}

select { height: 55px; }

select:focus {
    outline: thin dotted #bbb;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

textarea { 
    min-height: 100px; 
    overflow: auto;
}

.radio,
.checkbox {
    min-height: 18px;
    padding-left: 18px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    float: left;
    margin-left: -18px;
}

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

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999;
}

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

/* ==========================================================================
   =Misc
   ========================================================================== */

.javascript-required,
.modern-browser-required {
    padding: 15px 0;
    background-color: #d50f25;
    color: #fff;
    text-align: center;
    font-weight: 700;
}