@font-face {
font-family:"zbs-font";
font-weight:300;
src:url(../fonts/RobotoMono-Light.ttf) format("opentype")
}

@font-face {
font-family:"zbs-font";
font-weight:400;
src:url(../fonts/RobotoMono-Regular.ttf) format("opentype")
}

@font-face {
font-family:"zbs-font";
font-weight:700;
src:url(../fonts/RobotoMono-Bold.ttf) format("truetype")
}

* {
  box-sizing: border-box;
}

/* COLOR */

html{color: #0d3668;}
body{background-color: #ccc}

a{color: #930913; text-decoration: underline}
a:hover{color: #930913;}

footer a{color: #fff;}
footer a:hover{color: #930913;}
	
h1{font-size: 32px; color: #0d3668; text-transform:uppercase; font-weight: 700;}
h2{font-size: 24px; color: #0d3668; text-transform:uppercase; font-weight: 700;}
h3{font-size: 18px;color: #0d3668; text-transform:uppercase; font-weight: 700;}
footer{background: #0d3668; color: #ffffff}

p{color: #0d3668;}
footer p{color: #fff;}
.red {
border:1px solid #f33
}

/* COLOR END */




.bottom-200 {
width:100%;
height:200px
}

html,body {
font-family:'zbs-font', sans-serif;
font-weight:300;
font-size:16px;
line-height:28px;
height:100%;
width:100%
}

body {
overflow-x:hidden;
overflow-y:scroll
}

.wrapper {
max-width:1000px;
margin:0 auto;
z-index:2000
}

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,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
margin:0;
outline:0;
padding:0;
vertical-align:baseline
}

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

strong {
font-weight:700
}

dl {
margin-bottom:24px
}

dd {
margin-bottom:24px
}

ul,ol {
list-style:none;
margin:0 0 24px 20px
}

ul {
list-style:disc
}

ol {
list-style:decimal
}

li > ul,li > ol {
margin:0 0 0 20px
}

li {
line-height:20px
}

.clear {
clear:both
}

#switcher {
cursor:pointer
}

::selection {
text-shadow:none;
padding:5px
}

::-moz-selection {
text-shadow:none;
padding:5px
}

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

h1,h2,h3,h4,h5,h6 {
font-weight:400;
font-family:'zbs-font',sans-serif;
margin-bottom:0px;
}

h1 {
font-size:32px;
line-height:40px;
padding-bottom:35px;
}

h2 {
font-size:24px;
padding-bottom:25px;
}

h3 {
font-size:18px;
line-height:24px;
}

h4 {
font-size:16px;
}

h5 {
font-size:14px;
}

h6 {
font-size:12px;
}

p {
margin-bottom:20px;
line-height:25px;
text-align: left;
}

.uppercase {
text-transform:uppercase
}

a:hover,a:active,a:focus {
outline:0
}

a {
-webkit-transition:background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,outline .3s ease;
-moz-transition:background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,outline .3s ease;
-ms-transition:background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,outline .3s ease;
-o-transition:background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,outline .3s ease;
transition:background-color .3s ease,border .3s ease,color .3s ease,opacity .3s ease-in-out,outline .3s ease;
outline:0
}

.light-link a:hover {
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}

a:hover {
text-decoration:none
}

.one_full {
width:100%;
float:left;
margin-bottom:20px;
margin-right:0;
position:relative
}

.one_half {
width:45%;
float:left;
position:relative;
margin-bottom:50px;
padding-left:20px;
padding-right:20px
}

.one_third {
width:31%;
float:left;
margin-bottom:50px;
margin-right:3%;
position:relative
}

.one_fourth {
width:22%;
float:left;
margin-bottom:50px;
margin-right:3%;
position:relative
}

.last {
margin-right:0;
display:block
}

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

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

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

.float-left {
float:left
}

.float-right {
float:right
}

.float-none {
float:none
}

.transparent {
color:transparent;
background-color:transparent
}

.logo {
margin:0 auto;
margin-top: 0px
}

header {
max-width:400px;
height:150px
padding:50px;
margin: 0 auto;
}

footer {
overflow:hidden;
position:fixed;
left: 0;
bottom: 0;
width:100%;
z-index:2;
text-align:center;
max-height:130px;
padding-top: 10px;
}

.footer-copyright {
width:100%;
margin:0 auto;
}

/* Responsive */

@media only screen and (max-width: 960px) {

.one_third {
width:33,33%;
margin: 0 auto;
padding: 15px;
}

}

@media only screen and (max-width: 640px) {

.one_full {
width:100%;
margin: 0 auto;
padding: 15px;
}

.one_third {
width:100%;
margin: 0 auto;
padding: 25px;
}

}

@media screen and (max-height: 450px) {}

/* Animation */

@-webkit-keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

@-moz-keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s
}

.fade-in.one {
-webkit-animation-delay:.3s;
-moz-animation-delay:.3s;
animation-delay:.3s
}

.fade-in.two {
-webkit-animation-delay:.6s;
-moz-animation-delay:.6s;
animation-delay:.6s
}

.fade-in.three {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
animation-delay:1s
}

.fade-in.four {
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
animation-delay:1.3s
}