@-moz-keyframes videoFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-o-keyframes videoFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes videoFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes videoFade {
  from { opacity: 0; }
  to { opacity: 1; }
}


/*/=================================================================/*/  
/*/ 1.1 main.  /*/
/*/=================================================================/*/
section.main {
  position:relative;
  overflow:hidden;
  width: 100%;
}
div.overlay span {

background:url("/assets/images/loader.gif") no-repeat;
position :absolute;
display:block;
width:48px;
height:48px;
text-indent:-9999px;
top:50%;
left:50%;
} 
div.overlay {
  position: absolute;
  bottom:0; 
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -900;
  overflow: hidden;
}

section.main .cover {
  width:100%;
  position:absolute;
  height:100%;
  opacity:1;
  transition: all 1.5s ease;
}
section.main .video_background {
  position: absolute;
  bottom:0; 
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden;
}

section.main .cover.animate {
  opacity:0;
  -webkit-animation: videoFade 5s 15s;
  -moz-animation: videoFade 5s 15s;
  -ms-animation: videoFade 5s 15s;
  -o-animation: videoFade 5s 15s;
  animation: videoFade 5s 15s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
/*/=================================================================/*/
/*/ 1.defaults  */
/*/=================================================================/*/

body{
  background:#212c35;
  font-family:"Alternate Gothic";
  padding-left:10px;
  height:100%;
  width:100%;
  overflow:hidden;
  color :#fff;
}
h1,h2,h3,h4,h4,h6,p{
  font-family:"Alternate Gothic";
}

/*/=================================================================/*/
/*/ 2.header  */
/*/=================================================================/*/

section.header{
  height:50px;
}
section.header-nav{
  height:55px;
}

*:focus {
  outline: none !important;
}
.navbar-collapse {
  max-height: 305px;
  width: 101%;
  margin-left: -1px;
  background: #212c35;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
ul.navbar-nav{
  margin: 0;
}
ul.navbar-nav li{
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  height: 60px;
}
ul.navbar-nav li a{
  padding: 0 !important;
  display:table;
  width: 100%;
}

ul.navbar-nav li a span{
  display:table-cell; 
  width:60px; 
  height:60px ;
}
ul.navbar-nav li a:hover {
  background:#1d242a;
  height: 60px;
}

nav .navbar-toggle{
  border-color: #fff;
}
nav .navbar-toggle .icon-bar{
  background-color: #fff;
}

.header div.logo{
  height:100%;
  display:inline-block;
  width:125px;
  padding-top: 10px;
}
.header div.logo a{
  display:table;
  height:100%;
  margin-left:6px;
}
.header div.logo span.logo-shark{
    width: 80px;
    height: 32px;
    display:table-cell;
    background:url("/assets/images/shark-logo.png") no-repeat;
    background-size: 80px;
    background-position: center ;
    text-indent :-99999px;
    vertical-align:middle;
}
.header div.pull-right{
  height:50px;
}
.header div.links{
  height:50px;
  display:inline-block;

}
.header div.links > a{
  display:table;
  height:100%;
  margin-right:15px;
}

.header .links a span.facebook{
    width: 19px;
    height: 28px;
    display:table-cell;
    background:url("/assets/images/facebook-icon.png") no-repeat;
    background-position: center ;
    text-indent :-99999px;
    vertical-align:middle;
}
.header .links ul   {
  display:table;
  height:100%;
  margin-right:15px;
}
.header .links ul li  {
  padding:0 5px;
  vertical-align:middle;
  display:table-cell;
}
.header .links ul li a {
  text-decoration:none;
  font-size:18px;
  display:block;
  height:20px;
  color:#fff;

}
.header .links ul li a:hover {
  color:red;

}
.header .links ul li a.active {
  color:#8da8c0;

}
/*/=================================================================/*/
/*/ 3.footer  */
/*/=================================================================/*/
section.footer{
  font-size:12px;
  background:#212c35;
  padding-left:10px;
  height:50px;
  font-family:"Open Sans";
} 
.footer span.copy-right{
  color:#586a7a;
  margin-right:20px;
  font-size: 11px;
}
.footer ul {
  display:inline-block;
  font-size: 11px
}
.footer ul.list-inline{
  margin-bottom: 0;
}
.footer ul li {
  margin-right:5px;
  padding-left: 0 !important;
}
.footer ul li a{
  display:inline-block;
  color:#769ab8;
  text-decoration:none;
}
.footer ul li a:hover {
  color:#8da8c0;
}

.footer .design {
  margin-left:5px;
  position:relative;
  color:#769ab8;
}
.footer .design .irequest-logo {
  display:inline-block;
  position:relative;
  left:8px;
  top:7px;
  width:21px;
  height:23px;
  background:url("/assets/images/request-icon.png");
}

.main div.right .btn{
  font-family: "Open Sans" !important;
  font-size:16px;
  color:#83bbd8 !important;
  background:#3b4751 !important;
  height:35px;
  margin:20px 0;
  border-radius:0;
  padding:4px 26px;
  padding-left:35px; 
  position:relative;
}
.main div.right input[type=submit].btn {
  width: 120px;
  height: 35px !important;
}


/**
 * MEDIA QUERIES
 */
@media screen and (min-width: 480px){
  .header div.logo span.logo-shark{
      width: 106px;
      height: 28px;
      background-size: 100%;
  }
  .header div.logo a{
      margin-left: 17px;
  }
  .header .links ul   {
    margin-right:30px;
  }
  .header div.links > a{
    margin:0;
    padding-right:30px;
  }
  .footer ul {
    font-size: 12px;
  }
  .footer span.copy-right{
    font-size: 12px;
  }
}
@media screen and (min-width: 768px){
  .header div.logo{
    padding-top: 0;
  }
  section.footer{
    height:50px;
    padding-top:7px;
  } 
  .footer ul li {
    margin-right:15px;
    padding-left: 5px !important;
  }
  .footer .design {
    margin-left:15px;
  }
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/open-sans/OpenSans-Regular.ttf); 
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/fonts/open-sans/OpenSans-Semibold.ttf);
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/open-sans/OpenSans-Bold.ttf);
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 200;
  src: url(/assets/fonts/open-sans/OpenSans-Light.ttf);
}

@font-face {
  font-family: 'Alternate Gothic';
  font-style: normal;
  font-weight: 200;
  src: url(/assets/fonts/alternate-gothic/alternate_gothic_2d.ttf);
}