/*
 *
 * Template Name: Alissa
 * Template URI: http://azmind.com
 * Description: Alissa - Responsive Coming Soon Template
 * Author: Anli Zaimi
 * Author URI: http://azmind.com
 *
 */

.page-content-wrapper {
  background-color: #eeeeee;
}

.foodiversity-banner__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;

  background-image: url('../img/event_multimedia/foodiversity_bg.jpg');
  background-size: cover;
  min-height: 93vh;
  padding: 20px;
}
.foodiversity-banner__logo {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}.foodiversity-banner__logo--image {
    padding: 10px;
}
.foodiversity-banner__button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.details__container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  /*align-items: center;*/
  /*margin: 10px 0;*/
  padding: 0 10px;
}
.details__fb-video {
  /*margin: 0 0 30px;*/
}

.leaderboard__container {
  display: flex;
  flex-flow: wrap column;

  color: white;
  font-size: 20px;
}
.leaderboard__head {}
.leaderboard__body {
  display: flex;
  flex-flow: wrap row;
  padding: 0 10px;
}
.leaderboard__body--team-name {
  flex: 1 0 90%;
}
.leaderboard__body--team-score {
  flex: 1 0 auto;
  text-align: right;
}
.leaderboard__body--progress-bar {
    flex: 1 1 100%;
    height: 10px;
    background-color: #50525f;
    border: none;
    margin: 5px 0 20px;
}

/* === Episodes === */
.episodes__container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  font-size: 15px;
}
.episodes__title {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
}
.episodes__fb-videos {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.episodes__fb-videos--item {
  display: flex;
  flex-flow: column wrap;

  min-width: 300px;
  padding: 0 5px;
  margin: 10px;
  /*border: 1px solid black;*/
  /*border-radius: 5px;*/
  box-shadow: 0 0 7px 0 rgba(153,153,153,0.4);
  background-color: #ffffff;
}
.episodes__fb-videos--item > div {
  margin: 2px 0;
}
.episodes__video-src {
  /*margin: 5px 0;*/
}
.episodes__video--details {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  /*margin: 5px 0;*/
}
.line-separator{
  height:1px;
  background:#717171;
  border-bottom:2px solid #eeeeee;
}
.episodes__video--teams {
  display: flex;
  flex-flow: wrap column;
  align-items: center;
  /*margin: 5px 0;*/
  text-align: center;
}

/*  === loader === */
.loader {
  border: 16px solid #fff;
  border-radius: 50%;
  border-top: 16px solid #ff9845;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;

  margin-right: auto;
  margin-left: auto;
  background-color: #f3f3f3;
  box-shadow: 0 0 7px 0 rgba(153,153,153,0.2);
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Show/hide content === */
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  /*font-size: 0;*/
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  font-family: 'Glyphicons Halflings';
  content: '\e114';
  color: #ff9845;
}

.read-more-state:checked ~ .read-more-trigger:before {
  font-family: 'Glyphicons Halflings';
  content: '\e113';
}

.read-more-state:checked ~ .read-more-label {
  display: none;
}

.read-more-label {
  margin: 10px 0 0;
  text-align: center;
  color: #fff;
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #fff;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ff9845;
  border-radius: .25em;

  width: 4em;
  display: flex;
  justify-content: center;
  align-self: center;
  border-radius: 1em;
  z-index: 1; /* to be able to press it better on mobile */
}
/* ============ */


@media (max-width: 575px) {
  h1 {
    font-size: 36px;
  }
  .leaderboard__container {
    font-size:14px;
  }
}
@media (orientation : landscape) and (max-width: 575px) {
  .foodiversity-banner__logo--image {
    width: 50vw;
  }
}



/***** Coming Soon *****/

.coming-soon {
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.inner-bg {
    /*padding: 55px 0 60px 0;*/
    background: url(../img/pattern-3.png);
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
}

.coming-soon h2 {
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.coming-soon p {
    margin-top: 20px;
    font-size: 18px;
    line-height: 36px;
    text-shadow: 0 1px 7px rgba(0,0,0,.2);
}

.timer {
    margin-top: 40px;
    text-shadow: 0 1px 5px rgba(0,0,0,.1);
}

.timer .days-wrapper,
.timer .hours-wrapper,
.timer .minutes-wrapper,
.timer .seconds-wrapper {
    display: inline-block;
    width: 160px;
    height: 160px;
    margin: 0 10px;
    padding-top: 20px;
    background: #2d2d2d; /* browsers that don't support rgba */
    background: rgba(45,45,45,.7);
    font-size: 18px;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    border-radius: 80px;
}

.timer .days-wrapper:hover,
.timer .hours-wrapper:hover,
.timer .minutes-wrapper:hover,
.timer .seconds-wrapper:hover {
    background: #ff9845 url(../img/pattern-2.png);
    text-shadow: none;
}

.timer .days,
.timer .hours,
.timer .minutes,
.timer .seconds {
    font-size: 80px;
    line-height: 90px;
}


/***** Content *****/

.social {
    margin-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.social a {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 3px;
}

.social a.facebook { background: url(../img/social-icons/facebook.png); }
.social a.twitter { background: url(../img/social-icons/twitter.png); }
.social a.dribbble { background: url(../img/social-icons/dribbble.png); }
.social a.googleplus { background: url(../img/social-icons/googleplus.png); }
.social a.pinterest { background: url(../img/social-icons/pinterest.png); }
.social a.flickr { background: url(../img/social-icons/flickr.png); }

.iphone img {
/*position:relative;*/
/*height:100%;*/
/*float: right;*/
display: block;
margin-left: auto;
margin-right: auto;
/*bottom: 10px !important;*/
/*right: 10px !important;*/
}

.mobile {
width: 310px;
margin-left: 24px;
height: 654px;
/*float: left;*/
overflow: visible;
display: block;
margin-left: auto;
margin-right: auto;
background: url(../img/mobile.png) left top no-repeat;
padding: 98px 24px 97px 27px;
}

/*=== START - mobile slider ===*/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

/*=== START - transparent navigations buttons ===*/
.rslides_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }
.transparent-btns_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 48%;
  text-indent: -9999px;
  overflow: hidden;
  height: 91%;
  }

.transparent-btns_nav.next {
  left: auto;
  right: 0;
  }

.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
  outline: none;
  }

.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
    /*start - custom position change*/
    position: relative;
    top: -500px;
    left: -20px;
    /*end - custom position change*/
  margin-top: 10px;
  text-align: center;
  }

.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  outline: 0 !important;
  }

.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
  background: #ff9845;
  /*background: rgba(0,0,0, .8);*/
  }
/*=== END - transparent navigations buttons ===*/
/*=== END - mobile slider ===*/

/*=== START - google maps  ===*/
.map-wrapper {
margin-top: 20px;
margin-bottom: 20px;
position:relative;
width:100%;
height:300px;
border-radius: 2px;
overflow:hidden;
}

#map-canvas {
width:100%;
height:300px;
border:0;
border-radius: 2px;
}
/*=== END - google maps  ===*/

/***** Media Queries *****/
@media (min-width: 980px) and (max-width: 1200px) {

    .logo h1 {
        padding-left: 0;
    }

    .call-us p {
        padding-right: 0;
    }

    .timer .days-wrapper,
    .timer .hours-wrapper,
    .timer .minutes-wrapper,
    .timer .seconds-wrapper {
        width: 120px;
        height: 120px;
        margin: 0 7px;
        padding-top: 20px;
        -moz-border-radius: 70px;
        -webkit-border-radius: 70px;
        border-radius: 70px;
        font-size: 16px;
    }

    .timer .days,
    .timer .hours,
    .timer .minutes,
    .timer .seconds {
        font-size: 50px;
        line-height: 60px;
    }

}
@media (min-width: 768px) and (max-width: 979px) {

    .logo h1 {
        padding-left: 0;
    }

    .call-us p {
        padding-right: 0;
    }

    .timer .days-wrapper,
    .timer .hours-wrapper,
    .timer .minutes-wrapper,
    .timer .seconds-wrapper {
        width: 100px;
        height: 100px;
        margin: 0 7px;
        padding-top: 20px;
        -moz-border-radius: 70px;
        -webkit-border-radius: 70px;
        border-radius: 70px;
        font-size: 14px;
    }

    .timer .days,
    .timer .hours,
    .timer .minutes,
    .timer .seconds {
        font-size: 40px;
        line-height: 40px;
    }

}

@media (max-width: 767px) {

    body {
        padding-left: 0;
        padding-right: 0;
    }

    .logo h1 {
        padding-left: 0;
        text-align: center;
    }

    .call-us {
        padding-bottom: 7px;
        text-align: center;
    }

    .call-us p {
        padding-right: 0;
    }

    .inner-bg {
        padding: 45px 0 50px 0;
    }

    .coming-soon h2 {
        font-size: 36px;
        padding: 0 20px;
    }

    .coming-soon p {
        padding: 0 20px;
    }

    .timer .days-wrapper,
    .timer .hours-wrapper,
    .timer .minutes-wrapper,
    .timer .seconds-wrapper {
        width: 100px;
        height: 100px;
        margin: 7px;
        padding-top: 20px;
        -moz-border-radius: 70px;
        -webkit-border-radius: 70px;
        border-radius: 70px;
        font-size: 12px;
    }

    .timer .days,
    .timer .hours,
    .timer .minutes,
    .timer .seconds {
        font-size: 40px;
        line-height: 40px;
    }

    .subscribe h3 {
        padding: 0 20px;
        font-size: 28px;
    }

    .subscribe p {
        padding: 0 20px;
    }

}

@media (max-width: 480px) {

    .timer .days-wrapper,
    .timer .hours-wrapper,
    .timer .minutes-wrapper,
    .timer .seconds-wrapper {
        width: 100px;
        height: 100px;
        margin: 7px;
        padding-top: 20px;
        -moz-border-radius: 70px;
        -webkit-border-radius: 70px;
        border-radius: 70px;
    }

    .timer .days,
    .timer .hours,
    .timer .minutes,
    .timer .seconds {
        font-size: 40px;
        line-height: 40px;
    }

    .subscribe form {
        padding: 0 20px;
    }

    .subscribe form input {
        width: 90%;
    }

    .subscribe form button {
        width: 90%;
        margin-top: 10px;
    }

}