@font-face {
    font-family: 'BMWGlobal_Pro_light';
    src: url('../font/BMWTypeWebLightAll.woff2')  format('woff2'),
         url('../font/BMWTypeWebLightAll.woff')  format('woff');
  }  

  @font-face {
    font-family: 'BMWGlobal_Pro_bold';
    src: url("../font/bmwglobal_pro_bold.woff2") format("woff2"),
          url("../font/bmwglobal_pro_bold.woff") format("woff");
    }
    
  @font-face {
    font-family: 'BMWTypeWebBoldAll';
    src: url("../font/BMWTypeWebBoldAll.woff2") format("woff2"),
         url("../font/BMWTypeWebBoldAll.woff") format("woff") ;
    }

    .button.login-fb {
      display: block;
      max-width: 220px;
      background-color: #3b5998;
      color: white!important;
      text-decoration: none!important;
    }
    .button.login-fb img {
      width: 35px;
      height: 35px;
    }
.loading{
  text-align: center;
  margin:0 auto;
  height: auto;
  display: block;
  margin: -20px 0 50px 0;
  visibility:hidden;
}

.load-rotate{
  -webkit-animation:  rotate 2s infinite 0ms; /* Safari 4+ */
  -moz-animation:     rotate 2s infinite 0ms; /* Fx 5+ */
  -o-animation:       rotate 2s infinite 0ms; /* Opera 12+ */
  animation:          rotate 2s infinite 0ms; /* IE 10+, Fx 29+ */
}

 .beforeImage{
  opacity: 1;
  transition: all 4s ease-out;
} 

.beforeImageHide{
  opacity: 0!important;
  transition: opacity 1600ms ease-out!important;
}
.response-question{opacity:0; transition: all 1800ms ease-in;} 


a{text-decoration: underline!important; color:#888888!important}
.error{color:red}
.clear-line{background-color:rgb(25,94,206)}
.correct{margin:0; background-color: rgb(21, 77, 168)!important; color:white!important; transition: background-color 500ms 1s, color 500ms 500ms!important;}
.incorrect{margin:0; background-color: rgb(187,187,187)!important; color:white!important; transition:  background-color 2s 1s, color  2s 1s!important;}
.selected{margin:0; background-color: white!important; color:rgb(192,192,192)!important; transition:  background-color 2s, color  2s;}

/*++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++ Header styles ++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++*/

#holder{width:auto; margin: 5px;background-image: url(https://www.socialmakeit.com/Backoffice/upload/images/campaigns/483/config/campaign-background_5af0880369f1a.png);}
#content {background-repeat:repeat; z-index: 2000; max-width: 1200px; margin:0 auto}
#header{display:none}
#footer{
  margin-bottom: 20px;
}
#footer > div {text-align: center;}
#footer > div > img{ max-height: 100%; max-width: 100%}
.error{height: 2em}

/*++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++ Index styles +++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++*/

.title{padding-bottom:10px;font-size:22px; color:rgb(25,94,206); font-family: 'BMWGlobal_Pro_light' }
.slogan{ line-height: 1;font-size:35px; color:rgb(25,94,206); font-family: 'BMWTypeWebBoldAll'; font-weight: bold;}
.tab-small-rectangle{padding-top: 15px;}
.intro-Text{ padding-top: 10px; font-family: 'BMWGlobal_Pro_light'}
.intro-Text-result{padding-top:10px}
.button-start-contest{font-family: 'BMWGlobal_Pro_bold'; padding: 16px 50px;    white-space: nowrap; font-family: 'BMWGlobal_Pro_bold'; font-size: 22px; background-color:rgb(25,94,206); color:white; border: none; transition: all 600ms ease-out}
.button-start-contest:hover{ background-color:rgb(6,83,182); color:white; transition: all 600ms ease-in}
.button-start-wrapper{display: flex; justify-content: left; padding-top:30px; position: relative; z-index: 2000;}
.playground-wrapper{text-align:center; z-index: 10; min-height: 300px;}
.callToAction-title{font-family: 'BMWGlobal_Pro_bold'; margin: 0; font-size: 15px;font-weight: 700; color:rgb(25,94,206);}
.car-playground{position:relative; overflow: initial;display:inline-block; margin-top: -200px; margin-right: -3000px;  transition: margin 600ms ease-in-out}
.callToAction-info-wrapper{ text-align:right; position: absolute; right: 10%;bottom: 10%;}
.participate-line{margin-top:-10px; max-width: 100%;}
.clear-line{margin-bottom: 20px;height: 10px; width: 100%; max-width: 100%;}
.big-section{padding:60px 20px 60px 20px}
.big-section-result{position:relative; z-index:10; padding: 60px 20px 60px 20px;}
.big-section-preResult{position:relative; z-index:10; padding: 40px 20px 60px 20px;}



/*++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++ Questions styles +++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++*/

.hide{display: none}

.section-Questions{margin: 2%; text-align: center}
.question-wrapper{position:relative;margin-bottom: 3px; margin-top: 500px;opacity: 0; transition: all 800ms ease-out}
.drop{margin-top: 0px; opacity: 1; transition: margin-top 600ms 180ms cubic-bezier(.6,.94,.7,1.26), opacity 600ms 200ms ease-out}
.drop .questions-answers-wrapper{

  margin-left:25%;
  opacity:1;
  transition: margin 600ms 700ms ease-in-out, opacity 600ms 700ms ease-out;
}
.question-image-wrapper{    
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 52.71%;
  background-image: url(../imgs/black.png);
  text-align: center;
  z-index: 1;
  position: relative;
  transition: background-image 800ms 200ms linear;
}
.drop .question-details .question-number p{margin:0px;   transform:rotate3d(1, 0, 0, 0deg); transition: margin-top 200ms 800ms ease-out, transform 300ms 800ms linear}

.question-details{display: flex; align-items: center; margin-bottom: 20px;}

.question-details > .question-number{overflow: hidden;border:3px solid rgb(25,94,206); margin-top:0px; opacity:1;text-align:center; height:70px; min-width: 80px; font-family: 'BMWGlobal_Pro_light';  color:rgb(25,94,206);     align-items: center; justify-content: center; display: flex;}
.question-number > p{    font-size:48px; margin-top:-90px; transform: rotate3d(1, 0, 0, 55deg);}
.question-details > .question-text{display:flex; align-items: center;margin:0; margin-left:20px; text-align:left; font-family: 'BMWGlobal_Pro_bold'; min-height:70px; font-size:16px; font-weight:bold;color:rgb(25,94,206);}

.response-clicked{pointer-events: none;}
.response-clicked-inside{
  padding: 18px;
  border-top:2px solid white;
  font-family: 'BMWGlobal_Pro_light';
  font-size: 24px;
  color:white; 
  background-color: rgb(187,187,187);  
  transition: background-color 800ms, color 800ms; 
}
.questions-answers-wrapper{  width: 65%; margin-top: -25px; margin-left:135%;  padding-bottom:30px; z-index: 20000; position: relative;}

.camp-question-image{    margin: 0 auto;    margin-top: -56.71%;     max-width: 55%;transition: width 800ms 100ms }
/* .camp-question-image:hover{ width: 80%; transition: width 1400ms 100ms; cursor: zoom-in;} */
.questions-answer{
  padding: 18px;
  border-top: 2px solid white;
  font-family: 'BMWGlobal_Pro_light'; 
  font-size: 24px;
  color: white;
  background-color: rgb(25,94,206);
  transition: background-color 500ms, color 500ms;
}

.questions-answers-wrapper .questions-answer:first-child{
  border-top:none!important;
}

.questions-answers-wrapper .response-clicked-inside:first-child{
  border-top:none!important;
}

.active{cursor:progress!important;}
.response-question{  width: 100%;padding: 20px 0;}
.response-question > p{
 text-align:left;
}
.response-question > p > span{
  font-family: 'BMWGlobal_Pro_light'; font-size: 20px!important;
}

/*++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++ Result styles +++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++*/

#resultado{
  margin:0 5%;
  margin-bottom: 5%;
}

.result-title{font-size:22px; color:rgb(25,94,206); font-family: 'BMWGlobal_Pro_light'}
.result-slogan{font-size:35px; color:rgb(25,94,206); font-family: 'BMWTypeWebBoldAll'; font-weight: bold; max-width: 90%; }
.result-image-wrapper{position: absolute; right: -127px;top: -114px; z-index: 1}
.car-image-wrapper-results{margin-left: 2%;}
.classification-wrapper{    margin: 50px 0 20px 5%;}
.classification-title{font-family:'BMWGlobal_Pro_bold'; color:rgb(25,94,206);font-size: 26px; font-weight: bold}

.promo-button-wrapper{ text-align: right; padding-top: 20px;}
.promo-description{
  text-align: right;
  font-family: 'BMWGlobal_Pro_light';
  color: white;
  font-size: 22px;
}
.promo-title{
  text-align: right;
  font-family: 'BMWGlobal_Pro_light';
  color: white;
  font-size: 20px;
  font-weight: lighter;
}

.promo-title-2{
  text-align: right;
  font-family: 'BMWGlobal_Pro_light';
  color: black;
  font-size: 20px;
  font-weight: lighter;
}

.promo-description-2{
  text-align: right;
  font-family: 'BMWGlobal_Pro_light';
  color: black;
  font-size: 22px;
}

.promo-section{
  z-index: 20;
  text-align: center;
  margin-top: -53px;
  max-width: 398px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 25px;
  position: relative;
}

.promo-section-2{
  z-index: 21;
  text-align: center;
  position: absolute;
  top: 37.98%;
  left: 18%;
  right: 18%;
  opacity: 0;
  margin-top: -53px;
  max-width: 398px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 25px;
  transition: opacity 400ms 200ms ease-in-out;
}

.promo-button{ font-family: 'BMWGlobal_Pro_bold'; background-color:rgb(25, 94, 206); color:white;    padding: 3% 10%;font-size: 18px; transition:all 200ms ease-in; border:none;}
.promo-button:hover{background-color: rgb(25, 77, 160);}

.promo-text-wrapper{
  position: absolute;
    padding: 50px 20px;
    right: 0;
    bottom: 0;
}
.share-button-wrapper{
      display: flex;
      align-items: center;
      justify-content: start;
      padding: 30px 0;
      position: relative;
      z-index: 2000;
}

/*++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++ Rules styles +++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++*/


.back-wrapper{position: absolute; top: 30px; right: 30px;}
.back-wrapper > img{
  cursor: pointer;
}
.big-section-rules{ padding: 60px 0 35px 5%;}
.big-section-rules .title{ max-width: 100%; font-size: 22px;}
.big-section-rules .slogan{ max-width: 100%; font-size: 35px;}
.texto{display: none;}
.regulamento{margin: 5px;}
.regulamento > .texto.actual { display:block; padding: 40px 20px;background-color: rgba(0, 67, 255, 0.7); color:white;  font-family: 'BMWGlobal_Pro_light';}
.regulamento > .texto > ul > li {margin-bottom: 30px; margin-top:20px;}
.regulamento > .texto > ul > .li2 {margin-top: 5px;  margin-bottom: 0px;}
.regulamento > .texto > ul > li > ul {margin-left: 60px;}
.regulamento > .texto > ul > li > p{padding-left: 20px;}
.regulamento > .texto > ul > .nopadd{margin:0; padding:0;}
.regulamento > .texto > ul > li > .padd{padding-left: 60px;}
.regulamento > .texto > ul{ padding: 15px; list-style-type: none;}
.regulamento > .navegacao { overflow:auto; margin-top:22px; margin-right: 50px }
.regulamento > .navegacao > a {    text-decoration: none!important; float:right; margin-left:3px; margin-bottom:50px;}
.regulamento > .navegacao > a > div { width:40px; height:60px; display:table-cell; vertical-align:bottom; text-align:center; cursor:pointer; } 
.regulamento > .navegacao > .rule-link > div{ color:rgb(67, 164, 230);  font-family: 'BMWGlobal_Pro_light';  font-size: 25px;}
.regulamento > .navegacao > .rule-link.actual > div{ color:rgb(25,94,206); font-family: 'BMWGlobal_Pro_light';  font-size: 50px; text-decoration: none}

#copyright > .powered{
  display: none!important;
}
.logo-hard{
  margin-right: 20px;
  float: right;
}
/*****SCORE *****/
.others{
  display: flex;
  justify-content: center;
}

.rankContainer{
  text-align: center;
  position: relative;
}

.others .rankContainer{
  width: 50%;
}

.first .rankContainer .percentage{
  max-width: 80%;
  font-size: 100px;
}
.first .rankContainer .percentage > span{
  font-size: 40px;
}

.first .rankContainer .tag{
  font-size: 29px;
  max-width: 80%;
}

.others .rankContainer .percentage{
  font-size: 50px;
}
.others .rankContainer .percentage > span{
  font-size: 20px;
}

.others .rankContainer .tag{
  font-size: 16px;
}

.rankContainer > img{
  float: right;
  margin-right: 10%;
}

.car-image-wrapper-Pre-results{
  position: relative;
  margin: -118px 0px 10% 5%;
}

.big-section-preResult > .slogan{
  font-size:35px; color:rgb(25,94,206); font-family: 'BMWTypeWebBoldAll'; font-weight: bold; 
}
.big-section-preResult > .title{
  font-size:22px; color:rgb(25,94,206); font-family: 'BMWGlobal_Pro_light'
 }

 .big-section-preResult > .intro-Text{
  color: #5b5b5b; 
  font-size: x-large;
}

@media(min-width:600px){
  .questions-answer {
    padding: 18px;
  }

  .question-details > .question-text {
    font-size: 24px;
  }
 
    .result-image-wrapper{position: absolute; right: -70px;top: -70px; z-index: 1}
}

@media(min-width:780px){
  .result-slogan{font-size:45px;}
  .big-section-preResult{
    max-width: 50%;
    padding: 40px 20px 100px 20px;
  }

  
  .car-image-wrapper-Pre-results{
    position: absolute;
    top: 15%;
    left: 60%;
    margin:0;
  }
  .button-start-contest {
    padding:20px 100px;
    white-space: nowrap;
  }
  /*SOCORE*/

  .first{
    width: 50%;
  }

  .others{
    width: 50%;
  }

  .scoreShowOff{
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  .big-section-rules .title{ max-width: 100%; font-size: 32px;}
  .big-section-rules .slogan{ max-width: 100%; font-size: 45px;}

  .response-clicked-inside{
    padding: 18px;
    transition: background-color 1200ms 800ms, color  1200ms 800ms;; 
  }
  .selected{transition:  background-color 1200ms 800ms, color  1200ms 800ms;}
  .question-image-wrapper {
    width: 80%;
    padding-top: 42.315%;
  }

  .questions-answer:hover{
    cursor: pointer; 
    font-size:24px;
    background-color: white; 
    color:rgb(25,94,206); 
    transition: background-color 500ms ease-in;
  }
  #header{display: block; position: absolute; right: 0;}

  .promo-description{font-size: 3vw}
  .promo-description-2{font-size: 3vw}
  .promo-title{font-size:2vw;}
  .promo-title-2{font-size:2vw;}
  .slogan{font-size: 45px}
  .title{font-size: 32px}

  .big-section{max-width: 60%;padding:80px 0 60px 5%;}
  .big-section-result{
    max-width: 85%;
    padding: 60px 20px 60px 20px; 
    z-index: 40;
    position: relative;
  }
  .callToAction-info-wrapper{ text-align:right; position: absolute; right: 5%;top: 8%;}

  /* .car-playground{overflow: initial; margin-top: -200px; margin-right: -3000px;  transition: margin 3000ms cubic-bezier(.46,1.02,.29,.93)  } */
  .playground-wrapper{min-height: 450px;}
  .section-Questions{    margin: 0 5%; max-width: 1200px;}

  .type1 > .questions-answers-wrapper{    
    width: 30%;
    background-color: white;
    margin-top: -38%;
    padding:0;
    margin-left: 160%;
  }

  .drop > .questions-answers-wrapper{
    margin-left: 72%!important;
    opacity:1;
    transition: margin 600ms 700ms ease-in-out, opacity 600ms 700ms ease-out;
  }

  .question-wrapper{ 
      min-height: 600px;
  }

  .type1 > .response-question{ 
    position: relative;
    z-index: 200;
    width: 33%!important;
    left: 72%;
  }
  .type1 > .response-question > p{ text-align: left!important}

  .car-image-wrapper-results{position: absolute; top: 42%;}

  .promo-section{
    text-align: left;
    margin-left: 40%;
    padding-bottom: 23px;
    position: relative;
  }

  .promo-section-2{
    text-align: left;
    padding-bottom: 25px;
  }

  .promo-button{  padding: 5% 20%!important;font-size: 15px; font-weight: bold}
  .promo-text-wrapper{ position: absolute; right: 0; bottom: 0;}
  .promo-text-wrapper-2{ position: absolute; right: 0; bottom: 0;}

  .regulamento > .texto.actual {padding:40px 60px!important;}

  .share-button-wrapper{
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 30px 0;
    position: relative;
    z-index: 2000;
}
}

@media(min-width:980px){
  .promo-description{font-size: 34px}
  .promo-description-2{font-size: 34px}
  .promo-title{font-size: 22px}
  .promo-title-2{font-size: 22px}
}

@media (min-width: 1120px){
.response-question > p > span {
    font-family: 'BMWGlobal_Pro_light';
    font-size: 26px!important;
}
}

@keyframes rotate {
  from {transform: rotate(-360deg);}
  to {transform: rotate(360deg);}
}