@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800italic,800,700italic,700,600italic,600,400italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600italic,700,600,700italic,800,800italic,900,900italic);
@font-face {
    font-family: 'latomedium';
    src: url('../fonts/lato-medium-webfont.eot');
    src: url('../fonts/lato-medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato-medium-webfont.woff2') format('woff2'),
        url('../fonts/lato-medium-webfont.woff') format('woff'),
        url('../fonts/lato-medium-webfont.ttf') format('truetype'),
        url('../fonts/lato-medium-webfont.svg#latomedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latosemibold';
    src: url('../fonts/lato-semibold-webfont.eot');
    src: url('../fonts/lato-semibold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato-semibold-webfont.woff2') format('woff2'),
        url('../fonts/lato-semibold-webfont.woff') format('woff'),
        url('../fonts/lato-semibold-webfont.ttf') format('truetype'),
        url('../fonts/lato-semibold-webfont.svg#latosemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body, html{
    font-family: 'Open Sans', sans-serif;
    color: #5b5b5b;
    font-size: 14px;
    line-height: 24px;
}

a:hover{
    text-decoration: none;
    color: #222;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
p.lead{
    font-size: 16px;
    color: #393939;
    font-weight: 700;
}
h1, h2, h3, h4, h5, h6{
    color: #222222;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    text-rendering: optimizelegibility;
    line-height: .8;
}
h1{
    font-size: 60px;
    font-weight: 900;
}
h2{
    font-size: 40px;
    font-weight: 700;
}
h3{
    font-size: 34px;
    font-weight: 900;
}
h4{
    font-size: 26px;
    font-weight: 700;
}
h5{
    font-size: 20px;
    font-weight: 700;
}
h6{
    font-size: 14px;
    font-family: 'latosemibold';
}
ul,
ol{
    margin: 0;
    padding: 0;
    list-style: none;
}
.portfolio{
     padding-top: 37px; 
}

* {
   
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    /*display: block;*/
}

html {
    overflow-x: hidden;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
a {
    text-decoration: none;
    background-color: transparent;
    -webkit-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease
}
a:focus {
    outline: thin dotted #333;
    outline: 5px auto #16a085;
    outline-offset: -1px
}
a:hover,
a:active {
    outline: 0 !important
}

@-webkit-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}
.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}
.animated.flipOutX,
.animated.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}
.animated-hide {
    opacity: 0
}

.f-control{
border-radius: 0px;
display: block;
width: 100%;
padding: 8px 0 16px;
text-transform: none;
box-shadow: none;
font-size: 15px;
line-height: 1.5;
color: #999;
border-width: 0px 0px 1px;
border-style: solid;
border-color: #e0e0e0;
background-color: #f4f4f4;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: all .3s ease 0;
-moz-transition: all .3s ease 0;
-o-transition: all .3s ease 0;
transition: all .3s ease 0;
}
.square  {
    background: #4a8d9a;
        background-color: rgb(74, 141, 154);
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-clip: border-box;
        background-origin: padding-box;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    color: white;
}
.btn-request{
    margin-top: 21px;
    float: right;
}


.sup_table {
    background: #284c8e;
    color: white;
}
#supp_button {
    margin: auto;
}
tbody {
        color: #484848;
}
#supp_tbody:hover {
    background: rgba(74, 141, 154, 0.14);
}
#supp_nametd {
    vertical-align: middle;
}
#supp_desctd {
    vertical-align: middle;
}
thead{
        background: #284c8e;
    color: white;
}