/*=============================================================================
  ***************************************************************************
  
  Table of contents

  1. Global - Lines 48 - 90

  2. Typography - Lines 91 - 118

  3. Header - Lines 119 - 134

  4. About - Lines 135 - 150 & 277 - 289

  5. Countdown - Lines 151 - 167

  6. Meet The Team - Lines 168 - 182 & 290 - 302

  7. Get Notified - Lines 183 - 197

  8. Footer - Lines 198 - 215 & 240 252

  ***************************************************************************
=============================================================================*/











/*=============================================================================
  ***************************************************************************
  Global
  ***************************************************************************
=============================================================================*/

/*========== Loading ==========*/
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 999;}
#loading-img { position: absolute; top: 50%; left: 50%; width: 128px; height: 43px; margin: -21px 0 0 -64px; }


/*========== Inputs ==========*/
input[type="submit"],
input[type="email"],
textarea { -webkit-appearance: none; outline: none; border: none;}
button:focus { outline: none;}
::-webkit-input-placeholder { color: #fff;}
:-moz-placeholder { color: #fff;}
::-moz-placeholder { color: #fff;}
:-ms-input-placeholder { color: #fff;}


/*========== Buttons ==========*/
.button { cursor:pointer;display: inline-block; padding: 15px 30px; font-weight: 700; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.btn-flat-white { 
  border-radius: 3px;
  color: #fff;
  background: #ffaa01;
  padding: 10px 40px;
  border-bottom: solid 3px #ff9000;
  margin-top: 40px;
}
.btn-flat-white:hover { border-bottom: solid 1px #ff9000;margin-top: 42px}


/*========== Sections ==========*/
.page-wrap { overflow: hidden;}
.section { padding: 100px 0; }
.section.no-pad { padding: 0;}
.overlay { padding: 100px 0;}
#header .overlay { padding: 0;}
.section-header { margin-bottom: 75px;}






/*=============================================================================
  ***************************************************************************
  Typography
  ***************************************************************************
=============================================================================*/

html,body,input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Lato', sans-serif; color: #666;}

html,body { overflow-x: hidden;}

h1,h2,h3,h4,h5,h6 { font-weight: 300;}

a { outline: none; color: #fff;}
a:hover, 
a:active, 
a:focus { text-decoration: none; outline: none;}

input,
textarea { font-size: 16px;}

.text-centre { text-align: center;}
.bold { font-weight: 900;}






/*=============================================================================
  ***************************************************************************
  Header
  ***************************************************************************
=============================================================================*/
header#header{
  background: rgba(0,0,0,0.4);
  min-height: 60vh;
}
.background-color{
  background: #fff;
  color: #666;
}
body{
  background: url(slide.jpg)!important;
  background-attachment: fixed!Important;
  /* background-position: -200px -200px!Important; */
  background-size: 100%!important;
  color: #fff;
}
.intro { display: table; width: 100%; height: 400px}
.intro-inner { height: 100%; display: table-cell; vertical-align: middle; position: relative;}
.logo img { max-width: 100%; display: block; margin:20px auto 45px auto;}
.text-logo { font-family: 'Pacifico', cursive; font-size: 50px; text-shadow: 2px 2px 0 rgba(0,0,0,.10); margin: 0 auto 75px auto; display: none;}







/*=============================================================================
  ***************************************************************************
  Footer
  ***************************************************************************
=============================================================================*/
footer {
    background: #f5f5f5;
    border-top: solid 1px #ddd;
    color: #555;
    font-size: 11px;
    padding: 8px 0;
    min-height: 5vh;
}

footer .copyright {
    float: left;
    padding-left: 10px;
}

.social-nav li {
    display: inline-block;
}
.social-nav { text-align: center; float: right;}
.social-nav a { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #666; margin: 0 5px; color: #666; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.social-nav a:hover { color: #666;}
.social-nav span { line-height: 6px; font-size: 10px;}
.footer-nav { margin-top: 75px;}
.footer-nav a { color: #666; width: 50%; display: inline-block; margin-bottom: 5px; padding: 5px;}






/*====================================================================================================================
  ******************************************************************************************************************
  MEDIA QUERIES
  ******************************************************************************************************************
====================================================================================================================*/






/*=============================================================================
  ***************************************************************************
  768px Media Query
  ***************************************************************************
=============================================================================*/

@media (min-width: 768px) {






/*=============================================================================
  ***************************************************************************
  Footer
  ***************************************************************************
=============================================================================*/

.footer-nav a { width: auto; margin: 0 10px;}






} /*========== 768px MEDIA QUERY END ==========*/









/*=============================================================================
  ***************************************************************************
  992px Media Query
  ***************************************************************************
=============================================================================*/


@media (min-width: 992px) {






/*=============================================================================
  ***************************************************************************
  About
  ***************************************************************************
=============================================================================*/

.about-module { margin-bottom: 0;}






/*=============================================================================
  ***************************************************************************
  Meet the Team
  ***************************************************************************
=============================================================================*/

.team-module { width: 100%; margin: 0;}






} /*========== 992px MEDIA QUERY END ==========*/







/*=============================================================================
  ***************************************************************************
  Content!!!!
  ***************************************************************************
=============================================================================*/
section#content {
  background: #fff;
  padding: 40px 0;
  color: #555;
  text-align: justify;
  min-height: 34.5vh;
}



article.col-md-3 img {
    width: 100%;
}

article.col-md-3 {
    height: 180px;
    overflow: hidden;
}
.play{
  width: 40%;
  margin: 0 auto;
  display: inherit;
}



/* LOGIN */
#login-box{
  display: none;
}
.close-box{
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -10px;
}
#login {
    position: fixed;
    z-index: 9;
    top: 50%;
    margin-top: -200px;
    left: 50%;
    margin-left: -170px;
    background: #fff;
    width: 340px;
}
#login form { margin: 0 20px; position: relative }
#login form input[type="text"],
#login form input[type="password"] {
  width: 100%;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
  border: 1px solid #c8c8c8;
  color: #777;
  font: 13px Helvetica, Arial, sans-serif;
  margin: 0 0 10px;
  padding: 15px 10px 15px 40px;
}
#login form input[type="text"]:focus,
#login form input[type="password"]:focus {
  -webkit-box-shadow: 0 0 2px #ffaa01 inset;
  -moz-box-shadow: 0 0 2px #ffaa01 inset;
  -ms-box-shadow: 0 0 2px #ffaa01 inset;
  -o-box-shadow: 0 0 2px #ffaa01 inset;
  box-shadow: 0 0 2px #ffaa01 inset;
  background-color: #fff;
  border: 1px solid #ffaa01;
  outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#login form input[type="submit"] {
 
  border-radius: 3px;
  color: #fff;
  background: #ffaa01;
  padding: 10px 40px;
  border-bottom: solid 3px #ff9000;
  cursor: pointer;
  float: left;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  width: 100%;
}
#login form input[type="submit"]:hover {
  border-bottom: solid 1px #ff9000;margin-top: 2px
}
#login form div a {
  color: #004a80;
    float: right;
    font-size: 12px;
    margin: 30px 15px 0 0;
    text-decoration: underline;
}
div#register {
    background: #f5f5f5;
    float: left;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
}

div#register a {
    color: #777;
    margin: 20px;
}
img.facebook-button {
    width: 88%;  margin: 10px 20px;
    border-bottom: solid 3px #0e2c6c;
    border-radius: 5px;
    cursor: pointer;
    float: left;
}

img.facebook-button:hover {
    border-bottom: solid 1px #0e2c6c;
    margin-top: 12px;
}
.sparator {
    float: left;
    width: 88%;
    text-align: center;
    margin-top: 10px;
    position: relative;
    margin: 10px 20px 0;
}

.sparator span {
    color: #555;
    background: #ddd;
    padding: 7px 5px;
    border-radius: 100%;
    font-size: 10px;
    position: relative;
}

.sparator:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: solid 1px #ddd;
    top: 10px;
    z-index: 0;
}

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}
.grayscale:hover{
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ /* Firefox 4+ */
  filter: none; /* IE 6-9 */
  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; 
}
/* LEVEL */
.level-page #content{
  min-height: 93.5vh;
  background: url(levelbg.png)!important;
  background-attachment: fixed!Important;
  /* background-position: -200px -200px!Important; */
  background-size: 100%!important;
}
.level > .intro-inner > h2 {
  text-transform: uppercase;
}
.level article {
  display: inline-block;
  margin: 0.5%;
  width: 10%;
  /* position: relative; */
}
.level article img   {
    max-width: 100%;
}
.bubble, .bubble-bottom {
    margin: 0px -30px 20px;
    padding: 10px 20px;
    position: relative;
    background: #eee;
    display: inline-block;
    border-color: #eee;
    opacity: 0;
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}
.level article:hover .bubble,.level article:hover .bubble-bottom{
  opacity: 1;
  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
}
.bubble-bottom {
left: 0;
width: 100%;
position: absolute;
bottom: -90px;
}
.bubble:after {
    content: "";
    position: absolute;
   top: 100%;
    left: 45%;
    border-top: 10px solid#eee;
   border-top-color: inherit; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
}
footer ul li > img {
    height: 20px;
    width: auto;
    margin: 0;
}

footer li {
    display: inline-block;
    margin-right: 10px;
}

footer ul {
    display: inline-block;
    float: right;
    margin: 0;
}