@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url(/fonts/OpenSans-Light-300.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  font-display: swap;
  src: url(/fonts/OpenSans-Bold-700.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Titillium Web";
  font-display: swap;
  src: url(/fonts/TitilliumWeb-400-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Titillium Web";
  font-display: swap;
  src: url(/fonts/TitilliumWeb-900-Black.woff2) format("woff2");
  font-weight: 900;
  font-style: normal;
}

html{
    height:100%;
}



body {

height: 100%;

font-family: 'Open Sans', sans-serif !important;
font-weight: 300;
color: #333 !important;
font-size: 1.4rem;

}

.navbar { background-color: rgba(30,87,153,0.5) }
h1 {font-family: "Titillium Web"; font-weight: 400; font-size: 2rem; margin-bottom: 25px;}
h3 {font-family: "Titillium Web"; font-weight: 400; font-size: 1.5rem;}

b { font-weight:700; }

.intro-head { font-size: 4rem; }
.overlay {
    position: relative;
z-index: 0;
line-height: 0;
overflow: hidden;
}

.picture {
      background-image: url("../images/hh.jpg");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      padding-bottom: 10px;

}

.logo {
    padding: 5% 0% 15% 20%;
}

.nav-item a {
    color:white !important;
}

.nav-item a:hover {
    background: rgba(255,255,255,0.3);
    color:white;
}

.head {
     font-family: 'Titillium Web', sans-serif;
     font-weight: 900;
     color: white;
     font-size:80px;
     letter-spacing: 2px;
     text-shadow: 4px 2px 8px rgba(28, 56, 103, 1);
     margin:5% 0 0 0;
}

h3,h5 {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
}

.subhead {
    color:white;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 300 !important;
     font-size:3rem;
    text-shadow: 3px 2px 3px rgba(28, 56, 103, 1);
    margin: 20px 0 0 20px;
}

.nt {
    background-image: url("../images/network.png");
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      padding-bottom: 10px;
}

.info-color
{

background: #1e5799 !important;
background: -moz-linear-gradient(-45deg,  #1e5799 0%, #5f8faf 100%)!important;
background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#5f8faf 100%)!important;
background: linear-gradient(135deg,  #1e5799 0%,#5f8faf 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#5f8faf',GradientType=1 )!important;

}

 .back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index:200;
    width:150px;
    height:150px;
}

.ds { font-size:70%; }

.footer
{
margin-top:40px;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #1e5799;
}

.footer a, .footer a:hover { color:white; }

.footer.bottom { position:absolute; bottom:0; }

.footer span { padding:18px; color:white; font-size:18px; }

#sendmessage { display:none; color:green; font-weight:700;font-size:1.3rem; padding: 10px 0; }
.validation { font-size: .9rem; color:red; }
@media only screen
    and (min-device-width: 481px)
    and (max-device-width: 769px)
{
    .subhead { font-size:2rem; }
    .giticon { width:100px; height:100px; }

}
@media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px){

    body { font-size:16px; }
    .logo {padding: 10% 0% 5% 0%}
    .intro-head { font-size: 2.2rem; }

    .subhead { font-size: 1.3rem; white-space: nowrap; text-align:center;}
    .footer { height:100px; line-height:40px;}

    .footer a { color:white; font-size:80%; }
    .footer.bottom  { position:relative; }

     .back-to-top {
            top: 300px;
            right: 0px;

            width:50px;
            height:256px;
        }
     h3 #myModalLabel { font-size: 1.3rem; }
     .ds { font-size: 90%; }
    }