html,
body {
    font-family: 'Raleway', serif;
    color: #666;
    text-align: center;
    margin:0;
    padding:0;
}

body{

background: #000 url(../images/bg.jpg) top center no-repeat;
font-family: 'Raleway', serif;
}

/*header*/
.masthead {
    padding: 15px;
    position: relative;
    z-index: 2000;
    width: 100%;
    font-family: 'Raleway', serif;
    transition: all .5s ease;
}

.masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
}

.masthead-brand img {
    width: 26px;
    transition: all .5s ease;
}

.masthead-nav > li {
    display: inline-block;
}

.masthead-nav > li + li {
    margin-left: 10px;
}

.masthead-nav > li > a {
    padding: 20px;
    padding-right: 0;
    padding-left: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
}

.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
    background-color: transparent;
}

.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
    color: #7afbc4;
}

.masthead-brand {
    float: left;
}

.masthead-nav {
    float: right;
}

.masthead {
    position: fixed;
    top: 0;
}


a.logo{
width: 300px;
margin: 0 auto 30px auto;
text-shadow: 1px 1px 7px #3e3935;
filter: dropshadow(color=#3e3935, offx=1, offy=1);
font-size: 100px;
color: #fff;
display: block;
text-align: center;
}

a.logo span{
display: block;
text-align: center;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
}

.clear{
clear: both;
}

ul.social
{
width: 109px;
margin: 0 auto;
height: 24px;
}

ul.social li{
float: left;
background: url(../images/social.png) left top no-repeat;
position: relative;
height: 24px;
}


ul.social li.fb{
height: 24px;
background-position: 0 0;
width: 21px;
margin-right: 20px;
}

ul.social li.fb:hover{
background-position: 0 -24px;
}

ul.social li.fb a{
display: block;
width: 21px;
height: 24px;
}


ul.social li.tw{
height: 24px;
background-position: -31px 0;
width: 21px;
margin-right: 20px;
}

ul.social li.tw:hover{
background-position: -31px -24px;
}

ul.social li.tw a{
display: block;
width: 21px;
height: 24px;
}



ul.social li.yt{
height: 24px;
background-position: -67px 0;
width: 24px;
}

ul.social li.yt:hover{
background-position: -67px -24px;
}

ul.social li.yt a{
display: block;
width: 24px;
height: 24px;
}

.video{
width: 100%;
height: 278px;
background: url(../images/video.png) left top no-repeat;
padding: 68px;
margin: -20px 0;
}

.coming_soon{
width: 636px;
float: left;
}

/*responsive design */
@media only screen and (max-width:1024px) {
  .navbar-nav {
      margin-left: -42px;
  }
}

@media only screen and (max-width:800px) {
  .navbar-nav > li {
      margin: 0 0px;
  }
  .navigation {
      width: 57%;
  }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
      padding: 0;
  }
  .navbar {
      padding-top: 6px;
  }
  .navbar-nav {
      margin-left: 7px;
  }
}
@media only screen and (max-width:768px) {
  .navbar-nav > li {
      margin: 0 0px;
  }
  .navigation {
      width: 57%;
  }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
      padding: 0;
  }
  .navbar {
      padding-top: 6px;
  }
  .navbar-nav {
      margin-left: 7px;
  }
}

@media only screen and (max-width:640px) {
  .navbar-nav {
      margin-left: 0;
      margin: 0;
  }
  .navbar-nav > li {
      margin: 0 0px;
      float: none;
      display: inline;
      text-align: right;
  }
  .navbar-collapse.in {
      overflow-y: hidden;
  }
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
      border-color: rgba(231, 231, 231, 0);
  }
  .navigation {
        width: 13%;
    margin-left: 7em;
  }
}

@media only screen and (max-width:480px) {
  .navigation {
      width: 18%;
      margin-left: 3em;
  }
}


@media only screen and (max-width:320px) {
  .navbar-toggle {
      padding: 6px 6px;
      margin-top: 0px;
          margin-right: -12px;
      margin-bottom: 0px;
  }
  .navigation {
      width: 30%;
      margin-left: 0em;
  }
  .navbar-nav > li > a {
      padding: 10px 0px;
  }
  .cl-effect-7 a::before, .cl-effect-7 a::after {
      left: 0px;
  }
  .search-bar input[type="text"] {
      font-size: 14px;
          padding: 8px 19px 8px 8px;
  }
  .navbar-header {
      width: 59%;
  }
  .navbar-collapse.in {
      overflow-y: inherit;
  }
}