body, html{
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#fff;
}

.site{
  overflow: hidden;
}
 p{
   font-size: 1em;
   color:#838383;
 }

.topo{
  min-height: 450px ;
  position: relative;
}

.bg-daniels{
  background-image: url(../img/daniels.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

.bg-aline{
  background-image: url(../img/aline.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

.bg-thomezord{
  background-image: url(../img/thomezord.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

.bg-rj{
  background-image: url(../img/gameplayrj.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

.bg-alanzoka{
  background-image: url(../img/alanzoka.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

.bg-hastad{
  background-image: url(../img/hastad.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

.bg-tawna{
  background-image: url(../img/tawna.png), url(../img/fundo-jogador.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, repeat;
}

#exampleModal{
  padding-right: 0!important;
}



.titulo{
  font-family: 'Open Sans', sans-serif;
  color:#838383;
  font-weight: 400;
  font-size: 1.1em;
  text-align: left;
  line-height: 1.4em;
  margin-bottom: 30px;
  padding-bottom: 15px;
  position: relative;
  padding:0 ;
  text-align: left;
}
.titulo p{
  border-top:4px solid #838383;
  padding-top: 20px;
}
.titulo p img{
  margin: 0;
  width: 20px;
}




.topo .patrocinadores{
  position: relative;
  display: inline-block;
  margin-top: 30px;
}
.topo .patrocinadores ul{
  list-style-type: none;
  text-align: center;
  padding: 0 0 0 30px;
}
.topo .patrocinadores hr{
  border-top:1px solid #ff660038;
  padding:0;
  margin: 3px 0;
  
}






.base{
background: url(../img/bg.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 30px;
 

  
}

.base .base-separacao{
  background: url(../img/separacao.png) no-repeat;
  background-position: 50% 50%;
  height: 100%;
  position: relative;
}

.base-separacao::before {
  content: "";
  background: url(../img/sombra.png) no-repeat;
  background-position: top center;
  position: absolute;
  top:50px;
  width: 100%;
  height: 45px;
}



 .base .destaques hr{
  border-top:1px solid #ff660038;
  
  padding:0;
  margin: 3px 0; text-align: center;
  
}

.base .destaques p{
  padding:20px 0;
  margin-left:20px;
  text-align: center;
  position: relative;
}
.base .destaques p i{
  color:#e84000;
  padding-right: 20px;
}

.jogo{
  margin:30px 0;
}

/* Style the tab */
.tab {
  overflow: hidden;
  margin: 0;
}

.tab hr{
  padding: 0;
  margin: 5px 0;
}
.categoria{
  font-size: 2em;
  color: #005da8;
  margin-bottom: 15px;
  line-height: 1.3em;
  font-weight:700;
}

.resenha {
  font-size: .9em;
  color: #838383;
  margin-top: 0;
  line-height: 1.3em;
  font-weight: 400;
  text-transform: uppercase;
display: block;
}

.tabcontent h3 {
  font-size: 1em;
  color: #005da8;
  margin-top: 0;
  line-height: 1.2em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  margin: 0;
}






/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 16px 5px 46px ;
  transition: 0.3s;
  font-size: 17px;
  position: relative;
}
.tab button::before{
  content:"";
  width: 26px;
  height: 26px;
  background: url(../img/bolinha1.png) no-repeat;
  position: absolute;
  top:20%; 
  left:0;
}

/* Change background color of buttons on hover */
.tab button:hover::before{
  content:"";
  width: 26px;
  height: 26px;
  background: url(../img/bolinha.png) no-repeat;
  position: absolute;
  top:20%; 
  left:0;
} 


/* Create an active/current tablink class */
.tab button.active::before{
  content:"";
  width: 26px;
  height: 26px;
  background: url(../img/bolinha.png) no-repeat;
  position: absolute;
  top:20%; 
  left:0;
} 

/* Style the tab content */
.tabcontent, .tabcontent2, .tabcontent3 {
  display: none;
  border-top: none;
}







.nav-pills.nav-pills-rose .nav-item .nav-link {
  position: relative;
  transition: all .2s;
  border-radius: 50%;
  padding: 0;
  z-index: 1;
  min-width: 100px;
  
  background: -moz-radial-gradient(50% 67%, circle closest-corner, #52b1eb 35%, #3068b2 70%, #173566 96%);/* FF3.6+ */
  background: -webkit-radial-gradient(50% 67%, circle closest-corner, #52b1eb 35%, #3068b2 70%, #173566 96%);/* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(50% 67%, circle closest-corner, #52b1eb 35%, #3068b2 70%, #173566 96%);/* Opera 11.10+ */
  background: -ms-radial-gradient(50% 67%, circle closest-corner, #52b1eb 35%, #3068b2 70%, #173566 96%);/* IE10+ */
  background: radial-gradient(50% 67%, circle closest-corner, #52b1eb 35%, #3068b2 70%, #173566 96%);/* W3C */

  box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 5px 20px 0px rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(0, 0, 0, 0.6);
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=0, Color=#52b1eb)";/*IE 8*/
  -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 9px 15px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px #52b1eb;/*FF 3.5+*/
  -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 9px 15px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px #52b1eb;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 9px 15px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px #52b1eb;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=135, Color=#52b1eb); /*IE 5.5-7*/
  transition: all ease .2s;


}

.nav-pills.nav-pills-rose .nav-item .nav-link img{
  padding: 10px;
}

.nav-tabs, .nav-pills {
  margin: -50px 0 0 0;
}


.nav-pills:not(.flex-column) .nav-item+.nav-item:not(:first-child) {
  margin-left: -15px;
}


.nav-pills.nav-pills-rose .nav-item .nav-link:hover {
  position: relative;
  z-index: 5;
  transform: scale(1.3);
  
  background: -moz-radial-gradient(50% 67%, circle closest-corner, rgb(238, 156, 3) 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* FF3.6+ */
  background: -webkit-radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* Opera 11.10+ */
  background: -ms-radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* IE10+ */
  background: radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* W3C */


  box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 5px 20px 0px rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(0, 0, 0, 0.6);
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=0, Color=#FF6600)";/*IE 8*/
  -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 27px 35px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px rgba(255,102,0,0.8);/*FF 3.5+*/
  -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 27px 35px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px rgba(255,102,0,0.8);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 27px 35px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px rgba(255,102,0,0.8);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=135, Color=#FF6600); /*IE 5.5-7*/
  

 


}



.nav-pills.nav-pills-rose .nav-item .nav-link.active,
.nav-pills.nav-pills-rose .nav-item .nav-link.active:focus,
.nav-pills.nav-pills-rose .nav-item .nav-link.active:hover {
  position: relative;
  z-index: 5;
  transform: scale(1.3);

  background: -moz-radial-gradient(50% 67%, circle closest-corner, rgb(238, 156, 3) 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* FF3.6+ */
  background: -webkit-radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* Opera 11.10+ */
  background: -ms-radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* IE10+ */
  background: radial-gradient(50% 67%, circle closest-corner, #F2952D 35%, rgb(228, 70, 8) 70%, #ac2301 96%);/* W3C */


  box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 5px 20px 0px rgba(0, 0, 0, 0.2), 0 13px 24px -11px rgba(0, 0, 0, 0.6);
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=0, Color=#FF6600)";/*IE 8*/
  -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 27px 35px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px rgba(255,102,0,0.8);/*FF 3.5+*/
  -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 27px 35px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px rgba(255,102,0,0.8);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: 0 0 3px 3px rgba(0,0,0,0.2) inset, 0 27px 35px -6px rgba(0,0,0,0.7), 0 -3px 18px -2px rgba(255,102,0,0.8);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=18, Direction=135, Color=#FF6600); /*IE 5.5-7*/
  
}




.nav-pills.nav-pills-icons .nav-item .nav-link {
  border-radius: 4px;
}


@media (min-width:768px){
  .base .tab-content, .base .tab-content2, .base .tab-content3{
  color:#fff;
  padding: 0 30px;
    margin-top: 30px;
}
}

@media (min-width:320px){
  .base .tab-content, .base .tab-content2, .base .tab-content3{
  color:#fff;
  padding: 0 20px;
    margin-top: 30px;
}
}

@media (min-width:120px){
  .base .tab-content, .base .tab-content2, .base .tab-content3{
  color:#fff;
  padding: 0 0px;
    margin-top: 30px;
}
}

footer{
  background: #000;
  color:#cccc;
} 

footer h6{

    text-transform: inherit;
    color: #4e4747;
}
.modal-dialog .modal-body {
  padding-top: 0;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}
.modal-dialog .modal-body p{
  color:#fff;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: rgba(5, 27, 38, 0.82);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  outline: 0;
  color: #fff;
}

.btn {
  position: relative;
  padding: 8px 30px;
  margin: 0.3125rem 1px;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.428571;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  border-radius: 0.2rem;
  outline: 0;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow, transform;
}

.btn-hyper {
  color: #FFF;
  background-color: #093b81;
  border-color: #093b81;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  border-radius: 40px;
  font-size: 1.2em;
  letter-spacing: .02em;
  display: table;
  margin: 15px auto;
}
 
.btn-hyper:hover, 
.btn-hyper:focus, 
.btn-hyper:active, 
.btn-hyper.active, 
.open .dropdown-toggle.btn-hyper { 
  color: #fff; 
  background-color: #e84000; 
  border-color: #e84000; 
} 
 
.btn-hyper:active, 
.btn-hyper.active, 
.open .dropdown-toggle.btn-hyper { 
  background-image: none; 
} 
 
.btn-hyper.disabled, 
.btn-hyper[disabled], 
fieldset[disabled] .btn-hyper, 
.btn-hyper.disabled:hover, 
.btn-hyper[disabled]:hover, 
fieldset[disabled] .btn-hyper:hover, 
.btn-hyper.disabled:focus, 
.btn-hyper[disabled]:focus, 
fieldset[disabled] .btn-hyper:focus, 
.btn-hyper.disabled:active, 
.btn-hyper[disabled]:active, 
fieldset[disabled] .btn-hyper:active, 
.btn-hyper.disabled.active, 
.btn-hyper[disabled].active, 
fieldset[disabled] .btn-hyper.active { 
  background-color: #e84000; 
  border-color: #e84000; 
} 
 
.btn-hyper .badge { 
  color: #e84000; 
  background-color: #000000; 
}




@media (min-width: 120px){
  .nav-tabs, .nav-pills {
    margin: -45px 0 0 0;
}

.base-separacao::before {
  content: "";
  background: url(../img/sombra.png) no-repeat;
  background-position: top center;
  position: absolute;
  top: 45px;
  width: 100%;
  height: 45px;
}


.topo .nome-jogador {
  position: absolute;
  height: unset;
  margin-top: -39px;
  right: 10%;
  bottom: 70px;
  background: rgba(0, 0, 0, 0.78);
  padding: 10px 3px;
  border-radius: 10px;
  max-width: 240px;
}


  .base .base-separacao{
    background: unset;
    height: 100%;
  }

  .topo .patrocinadores{
    width: 160px;
  }

  .topo .patrocinadores a img {
    width: 50px;
}

  .base .nav-pills .nav-item .nav-link {
    transition: all .2s;
    border-radius: 50%;
    padding: 0;
    background-color: #e84000;
 
    z-index: 1;
    
    
    min-width: 90px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;

    display: table-caption;
  }
  
.nav-pills:not(.flex-column) .nav-item+.nav-item:not(:first-child) {
  margin-left: -5px;
}
.nav-tabs, .nav-pills {
  border: 0;
  border-radius: 3px;
  padding: 0;
}
}



@media (min-width: 520px){
  .nav-tabs, .nav-pills {
    margin: -60px 0 0 0;
}

.topo .nome-jogador {
  position: absolute;
  height: unset;
  margin-top: -39px;
  right: 10%;
  bottom: 90px;
  background: rgba(0, 0, 0, 0.78);
  padding: 10px 3px;
  border-radius: 10px;
  min-width: 250px;
}

  .base .base-separacao{
    background: url(../img/separacaoc.png) no-repeat;
    background-position: 50% 50%;
    height: 100%;
  }

  .topo .patrocinadores{
    width: 150px;
  }

  .base .nav-pills .nav-item .nav-link {
    transition: all .2s;
    border-radius: 50%;
    padding: 0;
    z-index: 1;
   
    min-width: 90px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .base-separacao::before {
    content: "";
    background: url(../img/sombra.png) no-repeat;
    background-position: top center;
    position: absolute;
    top: 60px;
    width: 100%;
    height: 45px;
  }
  
.nav-pills:not(.flex-column) .nav-item+.nav-item:not(:first-child) {
  margin-left: -5px;
}
.nav-tabs, .nav-pills {
  border: 0;
  border-radius: 3px;
  padding: 0;
}

}

@media (min-width: 575px){
  .base .base-separacao{
    background: url(../img/separacao.pnge) no-repeat;
    background-position: 50% 50%;
    height: 100%;
  }

  .topo .patrocinadores{
    width: 190px;
  }

}

@media (min-width: 768px){

  .base .base-separacao{
    background: url(../img/separacao2.png) no-repeat;
    background-position: 50% 45%;
    height: 100%;
  }
  .base .nav-pills .nav-item .nav-link {
    transition: all .2s;
    border-radius: 50%;
    padding: 0;
    z-index: 1;
    min-width: 150px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-tabs, .nav-pills {
    margin: -70px 0 0 0;

}
.base-separacao::before {
  content: "";
  background: url(../img/sombra.png) no-repeat;
  background-position: top center;
  position: absolute;
  top: 70px;
  width: 100%;
  height: 45px;
}

}

@media (min-width: 992px){

  .topo .nome-jogador {
    position: absolute;
    top: 17%;
    height: unset;
    margin-top: -39px;
    right: 5%;
    background: rgba(104, 46, 46, 0);
    min-width: 320px;
}

.topo .patrocinadores {
  width: 195px;
  margin-top: 3%;
  margin-left: 3%;
}

.topo .patrocinadores ul li{
  padding:5px 0;
  
}
}
  
@media (max-width:768px){
  .setup{
    margin-top:30px;
  }
}

@media (min-width: 768px) and (max-width:993px){
  .setup{
    padding:0 50px;
  }
}