@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800');

/****** PLACE YOUR CUSTOM STYLES HERE ******/

/* -------------- NAVBAR -------------- */

.nav-bar{ 
    height: 80px; 
    max-height: 80px; 
    line-height: 77px;
}

nav.transparent .nav-bar {
    border-bottom-color: transparent;
}

nav.transparent.fixed {
    background: transparent;
}

img.logo-light , img.logo-dark {
    max-width: 50%;
}

.module {
    padding: 15px 32px;
}




/*!---------- COLOURS ----------*/

.bg-grey-light {
  background: #F0F0F0;
}

.bg-green-dark {
    background-color: #074f57;
}

/*!---------- FONTS ----------*/


h1 {
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 60px;
    line-height: 60px;
}

h2 {
    font-family: 'Open Sans';
    font-size: 48px;
}

h2.uppercase{
    margin-right: 0px;
}

p {
    font-family: 'Open Sans';
    font-size: 24px;
    line-height: 38px;
}

.openSans_light {
    font-family: 'Open Sans';
    font-weight: light;
}

@media all and (max-width: 990px) {
    h1 {
        font-size: 55px;
        line-height: 55px;
    }
    h3 {
        font-size: 25px;
        line-height: 35px;
    }
}

@media all and (max-width: 767px) {
    h1 {
        font-size: 40px;
        line-height: 43px;
    }
    h3.openSans_light {
        font-size: 22px;
        line-height: 30px;
    }
}


/*!-------- SECTION --------*/

section.xl {
    padding-top: 15%;
}


@media all and (max-width: 990px) {
    .mr-xs-0.mr12 {
        margin-right: 0;
    }
    .store {
        text-align: center;
    }
    section.xl {
        padding-top: 10%;
    }
}

.op30 {
    opacity: 30%;
}

.background-image-holder {
    z-index: -1;
}

h1.title {
    text-transform: uppercase;
}

h3 {
    font-size: 28px;
}

h6.download {
    font-family: 'Open Sans';
    font-weight: bold;
}

.mr12 {
    margin-right: 12px;
}

.col-md-12.hero {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
    
}

.hero {
        height: 100vh;
    }

@media (min-width: 991px) {
    .hero_phone {
        text-align: right;
    }
}

@media all and (max-width: 991px) {
    .hero_phone {
        order: 2;
        text-align: center;
    }
    img.width65 {
        max-width: 45%;
    }
    section.xl {
        height: 155vh;
    }
} 

@media (max-width: 767px) {
    img.width65 {
        max-width: 75%;
    }
    section.xl {
        height: 145vh;
    }
}

@media (max-width: 526px) {
    img.width65 {
        max-width: 68%;
    }
    section.xl {
        height: 155vh;
    }
}

/*Devices Queries */

/*iphone 5*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    section.xl {
        height: 150vh;
    }
}
 
/*iphone 6*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    section.xl {
        height: 135vh;
    }
}

/*iphone 6+ */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
      img.width65 {
        max-width: 90%;
    }
      .hero_title {
          margin-top: 100px;
      }
}

/*ipad */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}


/*!-------- SECTION FEATURES --------*/

.active {
    color: #31DD77;
}


@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@-webkit-keyframes fadeoutfadein {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes fadeoutfadein {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}


img.icon_scoregenius.league.active {
    content: url('/img/scoregenius/icons/icon_league-active.png');
}

img.icon_scoregenius.vote.active {
    content: url('/img/scoregenius/icons/icon_vote-active.png');
}

img.icon_scoregenius.ball.active {
    content: url('/img/scoregenius/icons/icon_ball-active.png');
}

img.icon_scoregenius.trophy.active {
    content: url('/img/scoregenius/icons/icon_trophy-active.png');
}

.active_icon {
    background: url('/img/scoregenius/icons/icon_league-active.png');
}




h2 {
    color: #536771;
}

h2.features_title {
    font-weight: 800;
    letter-spacing: 0px;
}

h2.feat {
    cursor: pointer;
}



img.icon_scoregenius {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}



@media all and (min-width: 991px) {
    h2.features_title {
        line-height: 60px;
    }
    h2.feat {
        font-size: 35px;
        font-weight: 600;
    }
    p {
        font-size: 22px;
        line-height: 38px;
    }
}

.feature-3 .right {
    width: 75%;
}

.width65 {
    max-width: 75%;
}

@media all and (min-width: 992px) {
    .container.col_feature {
        display: flex;
        display: -webkit-flex;
    } 
}

.col_feature_desc {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
}

.inline-block {
    display: inline-block;
}

.feature {
    cursor: default;
}

@media (max-width: 730px) {
    .col_feature_desc {
        display: inherit;
    }
}

@media all and (min-width: 991px) {
    .phone_features {
        text-align: right;
    }  
}

@media all and (max-width: 991px) {
    .phone_features {
        text-align: center;
    }  
}

@media all and (max-width: 990px) {
    h2 {
        font-size: 40px;
    }
}

@media all and (max-width: 767px) {
    h2.features_title {
        font-size: 28px;
        line-height: 33px;
    }
    h2.feat {
        font-size: 25px;
        line-height: 25px;
        font-weight: 600;
    }
    p {
        font-size: 20px;
        line-height: 27px;
    }
    .ml-xs-24 {
        margin-left: 24px;
    }
    
}

/*!-------- SECTION FEATURES --------*/

@media (min-width: 991px) {
    .feature_mobile {
        display: none;
    }
}
    
@media (max-width: 992px) {
    .col_feature {
        display: none;
    }
    .image-slider .slides li > center > img {
        width: 35%;
    }
    
    .controls-inside .flex-control-nav li a.flex-active {
        background: #31DD77;
    }
    .flex-control-nav li {
        zoom: 2;
    }
    .controls-inside .flex-control-nav {
        bottom: -40px;
    }
}

@media (max-width: 520px) {
    .image-slider .slides li > center > img {
        width: 50%;
    }
}


/*!-------- LAST CALL --------*/

h2.award {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 1.7px;
    font-weight: 800;
    color: #ffffff;
    font-family: 'HelveticaNeue', 'Open Sans';
    
}

h3.award {    
    font-size: 30px;
    line-height: 32px;
    letter-spacing: 1.5px;
    font-weight: 800;    
    margin-bottom: 0px;
    color: #ffffff;
    font-family: 'HelveticaNeue', 'Open Sans';
    text-transform: uppercase;
}

sup.award {
    /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
    font-size: 50%;

    /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
    line-height: 0;

    /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
    position: relative;

    /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
    vertical-align: baseline;

    top: -0.6em;
}

span.award {
    font-size: 20px;
    line-height: 22px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #ffffff;
    font-family: 'HelveticaNeue', 'Open Sans';
    text-transform: uppercase;
}

.headerImages {
    width: 100%;
    height: 100%;
    text-align: center;
}

.mohammedLogo {
    margin-top: 36px;
}

.dscLogo {
    margin-top: 38px;
}

.logo { 
  max-height: 45vh;
  margin-top: 5vh;
}



@media all and (max-width: 767px) {
    h2.award {
        font-size: 34px;
        line-height: 38px;
    }

    h3.award {    
        font-size: 24px;
        line-height: 28px;
    }
}

/*!-------- GLOBE SOCCER --------*/

.globesoccer {
    height: 100vh;
}

.white {
    color: white;
}

h2.white {
    line-height: 60px;
}

a.gb {
    font-family: 'Open Sans';
    font-weight: bold;
    color: #31DD77;
}

a.gb:hover {
    opacity: 0.8;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90vh;
}
.container.gs {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

@media all and (max-width: 767px) {
  .container.gs {
    padding: 80px 0;
  }
  h2.white {
      font-size: 30px;
      line-height: 35px;
    } 
}

@media all and (min-width: 991px) {
    .v-align-transform.gs {
        top: 60%;
    }
}

/*!-------- FOOTER --------*/

.footer {
    height: 10vh;
    padding: 10px 0;
    background-color: #0B1A3E;
}

.footer-container {
    padding: 0 32px;
    display: inline-block;
}

.footer-container.social {
    float: right;
}

.item {
    display: inline-block;
    padding: 0 20px;
}

.item a {
    color: white;
    font-family: 'Open Sans';
}
    
@media all and (max-width: 767px) {
  .item {
    display: block;
    }
    .footer {
        height: 50vh;
        text-align: center;
    }
    .item a {
        font-size: 18px;
    }
    .list-inline li {
        display: inline-block;
    }
    .list-inline {
        text-align: center;
    }
    .footer-container.v-align-transform {
        top: 40%;
        width: 100%;
        -webkit-transform: translate3d(0, -20%, 0);
    }
    .footer-container.social {
        float: inherit;
    }
    
    
    
}

/*!-------- Rules and Terms css --------*/

.starter-template {
  padding: 0px 0px;
  text-align: left;
}

.MainTitle {
    font-size:17px;
    color:#51BB55;
    line-height: ;
    letter-spacing:1.0px ;
    font-weight:500 ;
    padding-bottom: 0px;
    text-transform: ;
}

.SubTitle {
    font-family: "Open Sans";
    font-size:44px;
    color:#536771;
    line-height: 52px;
    letter-spacing:1.5px ;
    font-weight:500;
    padding-bottom: 0px;
}

.SubTitle_terms {
    font-size:28px;
    color:#536771;
    line-height: 38px;
    letter-spacing:1.5px ;
    font-weight:600;
    padding-bottom: 0px;
}

.Phase {
    font-size:28px;
    color:#31DD77;
    line-height: 34px;
    letter-spacing:2px ;
    font-weight:600 ;
    text-transform: uppercase;
    padding-top: 20px;
}

.Phase_terms {
    font-size:20px;
    color:#536771;
    line-height: 26px;
    letter-spacing:1px ;
    font-weight:600 ;
}

.Duration {
    color:#31DD77;
    font-size:12px;
    letter-spacing:2px ;
    line-height:24px;
    font-weight: bolder;
    text-transform: uppercase;
}

.lead_rules {
    font-family: 'Open Sans';
    font-size:24px;
    color:#536771;
    line-height: 38px;
    letter-spacing:0 ;
    font-weight:400 ;
    
}

.lead_terms {
    font-family: 'Open Sans';
    font-size:18px;
    color:#94a3af;
    line-height: 28px;
    font-weight:400 ;
    padding-bottom: 0px;
}

.p_small {
    font-size:15px;
    color:#94a3af;
    line-height:22px;
    font-weight:500;
}

ul.privacy {
    list-style-type: circle;
}

ul.privacy li p {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

.ml20 {
    margin-left: 20px;
}

@media all and (max-width: 767px) {
    .Phase {
        font-size:24px;
        line-height: 28px;
    }
    
    .lead_rules {
        font-size:22px;
        line-height: 36px;
    }
    
    .lead_terms {
        font-size:17px;
        line-height: 26px;
    }

}

/****** PARTICIPATION RULES AND TERMS ********/

h3.terms {
    font-family: 'Open Sans';
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-bottom: 15px;
    
    
}

h2.terms {
    font-family: 'Open Sans';
    font-size: 40px;
    letter-spacing: 1px;
    color: #00DD83;
}

p.terms , li.terms {
    font-family: 'Open Sans';
    font-size: 20px;
    line-height: 35px;
    text-align: justify;
    margin-bottom: 24px;
}

ol.terms {
    list-style-position: inside;
}

li.terms {
    margin-left: 20px;
}


@media all and (max-width: 767px) {
    p.terms , li.terms {
    font-size: 17px;
    line-height: 28px;
    text-align: left;
    font-weight: 300;
    }
    
    h2.terms {
    font-size: 30px;
    letter-spacing: 0px;
    }
    
    h3.terms {
    font-size: 18px;
    margin-bottom: 10px;   
    }
    
}