/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {color: #222;  font-size: 1em;   line-height: 1.6; font-family: 'Open Sans Condensed', sans-serif;}
body{font-family: 'Open Sans Condensed', sans-serif;}
::-moz-selection {background: #0266B3; color:#ffffff; text-shadow: none;}
     ::selection {background: #0266B3; color:#ffffff; text-shadow: none;}

/*
 * A better looking default horizontal rule
 */

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

audio,
canvas,
iframe,
img,
svg,
video {vertical-align: middle;}
.browserupgrade {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}

h1,h2,h3,h4,h5,h6{font-family: 'Open Sans Condensed', sans-serif;}
h1{font-size:2em;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.bg-primary{background:#38B7ED; color:#ffffff;}
.bg-secondary{background:#0266B3; color:#ffffff;}
.bg-secondary a{color:#ffffff;}

.txt-secondary{color:#38B7ED;}

.row{max-width:90em;}

.header{padding:75px 15px; color:#fff; position:relative; margin:0 0 75px 0;}
.header .button{width:100px; height:100px; border-radius:50%; position:absolute; top:auto; left:0; bottom:-125px; right:-125px; margin:auto; background:#0266B3; color:#fff; display:block;} 
.header .button i.fa{width:100px; height:100px; text-align:center; line-height:100px; display:block; position:absolute; left:0; top:0;}

.header .button-2{width:100px; height:100px; border-radius:50%; position:absolute; top:auto; right:0; bottom:-125px; left:-125px; margin:auto; background:#0266B3; color:#fff; display:block;} 
.header .button-2 i.fa{width:100px; height:100px; text-align:center; line-height:100px; display:block; position:absolute; left:0; top:0;}

.hsiup{min-height:90%;}
.hsiup img{width:100%;}
.hsiup h1{color:#ffffff; text-transform:uppercase;}

.intro{padding:75px 15px; font-size: 2.1em; font-family: 'Open Sans Condensed', sans-serif;}
.form-content{padding:75px 15px; max-width:800px;}
.extra-info{padding:75px 15px; font-size: 1.2em; font-family: 'Open Sans Condensed', sans-serif;}
.footer{padding:45px 15px;}
.footer a{color:#fff;}
.footer-icon{line-height:1em; padding:0 5px 0 0; display:inline-block;}
.font{font-size: 1.2em; font-family: 'Open Sans Condensed', sans-serif;}

.logo{max-width:290px; margin:0 auto;}

/* form */
fieldset {border: 0; margin: 0; padding: 0;}
textarea {resize: vertical;}
.contact-title{font-size: 3em; font-family: 'Open Sans Condensed', sans-serif;}
.contact-subtitle{font-size: 2.1em; font-family: 'Open Sans Condensed', sans-serif;}
#contact {width:100%; margin:2em auto 4em auto; background:white; position:relative;}
#contact::after {content:""; display:block; height:30px; width:90%; left:5%; bottom:0; position:absolute; border-radius:100%; z-index:-1;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
}
.contactform {overflow: hidden;
    -webkit-transition: all linear 1s;
       -moz-transition: all linear 1s;
            transition: all linear 1s;
}

.input_wrapper {position:relative;}
.textarea_wrapper textarea {margin-top:20px; display:block; width:100%; background:#fff; border:1px solid #dadada; padding:1em; color:#5e5e5e;
  
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    
    -webkit-transition: all 250ms ease;
       -moz-transition: all 250ms ease;
            transition: all 250ms ease;
}
.input_wrapper input[type="text"] {margin-top:1em; display:block; width:100%; background:#fff; border:1px solid #dadada; padding:1em; color:#5e5e5e;
    text-indent:30%;
   
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    
    -webkit-transition: all 250ms ease;
       -moz-transition: all 250ms ease;
            transition: all 250ms ease;
}
.input_wrapper input[type="text"]:focus {background:rgba(0, 0, 0, 0.05); outline:none; text-indent:0;}
.input_wrapper label {position:absolute; left:0; top:0; height:100%; background:#009EE9; color:#fff; box-sizing: border-box; width: 25%; text-align:center; line-height:2.8em;
    -webkit-transition: all 250ms ease;
       -moz-transition: all 250ms ease;
            transition: all 250ms ease;
}
.input_wrapper input[type="text"]:focus + label {left:75%;}
.textarea_wrapper textarea {margin-top:20px; display:block; width:100%; min-height:150px; background:#fff; border:1px solid #dadada; padding:1em; color: #5e5e5e;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
   
    -webkit-transition: all 250ms ease;
       -moz-transition: all 250ms ease;
        -ms-transition: all 250ms ease;
         -o-transition: all 250ms ease;
            transition: all 250ms ease;
}
.textarea_wrapper textarea:focus {background:rgba(0, 0, 0, 0.05); outline:none;}
.submit_wrapper {text-align:center;}
.submit_wrapper input {text-align:center; display:inline-block; width:40%; height:50px; margin-top:1em; margin-bottom:3em;
    cursor: pointer; background: #0266B3; color:#fff; font-size:1em; border:none;
    -webkit-appearance: none;
    -webkit-transition: all 250ms ease;
       -moz-transition: all 250ms ease;
        -ms-transition: all 250ms ease;
         -o-transition: all 250ms ease;
            transition: all 250ms ease;
}
.submit_wrapper input:hover {background:#009EE9;}
.label-text{display:none;}
.label-icon{display:inline-block;}
	
/* Hide only visually, but have it available for screen readers: */
.hidden {display: none !important;}
.visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible {visibility: hidden;}

.clearfix:before,
.clearfix:after {content: " "; /* 1 */ display: table; /* 2 */}
.clearfix:after {clear: both;}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (min-width: 40.063em) { 
h1{font-size:3em;}
.label-text{display:block;}
.label-icon{display:none;}
.logo{float:left;}
} /* min-width 641px, medium screens */

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; 
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {text-decoration: underline;}
    a[href]:after {content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}
    a[href^="#"]:after,
    a[href^="javascript:"]:after {content: "";}
    pre,
    blockquote {border: 1px solid #999; page-break-inside: avoid;}
    thead {display: table-header-group;}
    tr,
    img {page-break-inside: avoid;}
    img {max-width: 100% !important;}
    p,
    h2,
    h3 {orphans: 3; widows: 3;}
    h2,
    h3 {page-break-after: avoid;}
}