body {
    margin: 0;
    color: #fff;
    font-family: myriad;
    text-transform: uppercase;
	background-image: url("../images/novo-fundo.jpg");
	background-attachment: fixed;
	background-size: 120vw;
	
	}

@font-face {
    font-family: myriad;
    src: url(../fonts/myriadPro-Bold.otf);
}
a{
	color: yellow;
}
.espaco{
	display: none;
}
.video{
	width:96%;
	margin: auto;
	margin-top: 2%;
	height:auto;
	display: none;
	text-align: center;
}

.video img{
	width: 100%;
	opacity: 1.0;
}
.menu {
    width: 100%;
    position: fixed;
    background: #08234e;
    z-index: 999;
    padding: 0.5% 3%;
    color: #fff;
    box-sizing: border-box;
	height: 3vw;
    
}

.menu a {
    color: #fff;
    text-decoration: none;
}

.home {
    float: left;
    font-size: 2vw;
    line-height: 2vw;
}

.home span {
    margin-left: 4vw;
}
#principal{
	width:100%;
	min-height:90vh;
	text-align: center;
	padding-top: 2.5vw;
}
#esquerda {
	width: 55%;
	float: left;
	padding: 0.8vw;
	box-sizing: border-box;
	text-align: left;
	
}

.numero-sorteado {
    color: #FFF;
    background: #ff0000;
}

.numero-premiado {
    color: #000 !important;
    background: #0cff00;
}

.form-busca{
	width:90%;
	margin: 5%;
}
.campo-buscar{
	
	width:80%;
	padding:4%;
	font-size:2vh;
	text-align: center;
		margin-top: 4vh;
		box-sizing: border-box;
		float: left;
		margin-bottom:4vh;
}
.bt-buscar{
		width: 20%;
		margin: auto;
		float: left;
	padding:4% 0;
	font-size:2vh;
	margin-top: 4vh;
	text-align: center;margin-bottom:4vh;
}
#direita {
	width: 45%;
	float: right;
	padding: 0.8vw;
	box-sizing: border-box;
}
.premiado{
	text-align: center;
	width: 100%;
	padding: 4%;
	height: 100vh;
	background: #18386b;
	position: fixed;
	z-index:9999;
	display: none;
	
	overflow: scroll;
	 overflow-x: hidden;
	  overflow-y: 10px;
	  box-sizing: border-box;
	  border-radius: 1vw;
	
	scrollbar-face-color:"#8d93b7";
scrollbar-highlight-color:"#8d93b7";
scrollbar-3dlight-color:"#C7CAEB";
scrollbar-darkshadow-color:"#C7CAEB";
scrollbar-shadow-color:"#8d93b7";
scrollbar-arrow-color:"#F8FBE4";
scrollbar-track-color:"#C7CAEB";
}
.premiado-final{
	border: 2px solid #fff;
	text-align: center;
	width: 80%;
	padding: 4%;
	margin: 4% 5%;
	height: auto;
	border-radius: 2vw;
	background: #18386b;
	position: absolute;
	z-index:9999;
	display: none;
}
.premiado-final img{
		margin:2%;
		width: 40%;
}

.premio-img{
	width:100%;
}
.premio-img img{
	width: 40%;
}
.bolas-sorteadas-atual{	
	opacity: 1.0!important;
}

.bolas-sorteadas{	
	width: 17%;
	margin:0.5% 0%;
	
	opacity: 0.5;
}
.bola-ultimas-listadas{
	width: 125%;
}
.sorteio-premio{
	width:100%;
	height:28vw;
	float:left;
}
.premio-desativado{
	opacity:0.2;
}
.detalhes-sorteio{
	width:100%;
	margin:0%;
	height:9vw;
	line-height: 9vw;
	float: left;
	text-align: center;
	font-size: 1.5vw;
	background:#104f7a;
}
.detalhes-titulo{
	background:#104f7a;
	color: yellow;
	height:4vw;
	line-height: 4vw;
	flex-grow: 4;
}

.detalhes-valor{
	background:#2363a0;
	height:4vw;
	line-height: 4vw;
}
.premio-none{
	display: none;
}
.todos-premios{
	 /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  
  padding: 0;
  margin: 0;
  list-style: none;
}
.todos-premios .premios{
	 background: tomato;
  flex-basis: 46%;
  flex-grow: 1;
  height: 8.5vw;
  margin: 0.5%;
  text-align: center;
	font-size: 2vw;
	background:#104f7a;
}
.premio-titulo{
	background:#104f7a;
	color: yellow;
	height:4vw;
	line-height: 4vw;
}

.premio-valor{
	background:#2363a0;
	height:4vw;
	line-height: 4vw;
	margin: 0 0.5vw;
}
.acumulado{
	
}

.premio-1{
	
}

.premio-2{
	
}

.premio-3{
	
}
.valor-premio{
	width: 100%;
	padding-top: 7vw;
	font-size: 3vw;
	padding-left: 1vw;
}
.bolas-ordem {
    font-size: 2vw;
    width: 100%;
    height: 3vw;
    float: left;
    background-image: radial-gradient(#08234e, #08234e);
    border-radius: 0 0 1vw 1vw;
    text-align: center;
    line-height:3vw;
    border-top: solid 1px #133365;
}
.bola-quantidade-numero {
    float: left;
    box-sizing: border-box;
    margin-left: 1vh;
    color: yellow;
}
.bola-ordem-nome {
    float: left;
    width: 54%;
    margin: 0;
    text-align: right;
}
.sorteio{
	overflow: hidden;
    width: 100%;
    height: 12.3vw;
	box-sizing: border-box;
    float: left;
    background-image: radial-gradient(#000, #08234e);
    border-radius: 1.5vw 1.5vw 0 0;
	
}

.mostrar-cartelas {
	border: 0.5vw solid #133365;
    width: 100%;
    margin: auto;
	margin-top:0.3vw;
	height: 90vh;
	padding:0%;
	overflow: scroll;
	 overflow-x: hidden;
	  overflow-y: 10px;
	  box-sizing: border-box;
	  border-radius: 1vw;
	scrollbar-face-color:"#8d93b7";
scrollbar-highlight-color:"#8d93b7";
scrollbar-3dlight-color:"#C7CAEB";
scrollbar-darkshadow-color:"#C7CAEB";
scrollbar-shadow-color:"#8d93b7";
scrollbar-arrow-color:"#F8FBE4";
scrollbar-track-color:"#C7CAEB";

}
.cartela-geral{
	width:50%;
	float:left;
	margin-bottom: 0.3vw;
	
}

.cartela {
    color: #fff;
    float: left;
    flex-direction: row;
    margin: auto;
    padding: 1% 1%;
    margin-right: %;
    width: 90%;
    margin-top: 0.3vw;
    background: #2062a9;
    box-sizing: border-box;
	padding:0.2vw;
	margin-bottom:0.2vw;
	
	border-radius: 0 0.7vw 0.7vw 0.7vw;
}
.cartela-unica {
    color: #fff;
    float: left;
    flex-direction: row;
    margin: auto;
    padding: 1% 1%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 100%!important;
    margin-top: 0.3vw;
    box-sizing: border-box;
	padding:0.2vw;
	margin-bottom:0.2vw;
	border-radius: 1vw;
}
.cartela-unica .cartela-quadros{
	height:5vw;
	line-height: 5vw;
	font-size: 3vw;
}
.cartela-topo {
	color:#70157c;
    width: 99%;
    text-align: center;
	background: #ead254;
	margin: 0.5%;
	text-align: center;
	border-radius: 1vw;
	 float: left;
	 height:5vh;
    box-sizing: border-box;
	padding: 0 5%;
}
.premiado .cartela-topo{
	color:#FFF;
	background: #2ba6df;
}
.premiado .cartela{
	background:#2564aa;
}
.cartela-codigo{
	width:40%;
	float: left;
	line-height: 5vh;
	text-align: left;
}

.cartela-valor{
	width:60%;
	float: right;
	line-height: 5vh;
	text-align: right;
}
.cartela-doador {
    width: 100%;
    font-size: 1.5vw;
    float: left;
    line-height: 5vh;
    text-align: center;
    box-sizing: border-box;
	 float: left;
	
}
.codigo-vertical{
	
    margin-top: 0.3vw;
	padding-left: 1%;
	width:8%;
	height:6vw;
	border-radius: 0.7vw 0 0 0.7vw ;
	background: #2062a9;
	float:left;

}
.codigo-vertical p{
	color: #fff;
	margin:0;
	padding: 1vw 0;
	font-size:1.2vw;
	margin-top: 2.2vw;
	-webkit-transform:rotate(270deg);
	}
.cartela-quadros {
    width: 10%;
    height: 2vw;
	margin: 0.5%;
    text-align: center;
    line-height: 2.2vw;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    color: #333;
    font-size: 1.2vw;
	border-radius: 0.5vw;
}
.quadros-branco{
	background:#2ba6df;
}

.todas-bolas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    width: 90%;
    margin: auto;
    margin-bottom: 6vw;
}

.todas-bolas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    width: 90%;
    margin: auto;
    margin-bottom: 6vw;
}

.bola-premio3 {
    background: yellow !important;
}

.bola-premio2 {
    background: #7f7f7f !important;
}

.bola-premio1 {
    background: #ffa633 !important;
}

.bolas img {
    width: 4vw;
    position: absolute;
    margin-top: 5vw;
}

.bolas {
	border: solid 1px #08234e ;
    background: #fff;
	color: #08234e;
    width: 7vw;
    height: 7vw;
    float: left;
    border-radius: 10vw;
    padding: 1vw;
    text-align: center;
    line-height: 7vw;
    font-size: 5vw;
    margin: 0.4vw;
}

.premiado-numero {
    color: #000;
	background:#0cff00;
}

.sorteado {
    color: #FFF!important;
	background:#ff0000!important;
}

.selecionar-sorteio {
    text-align: center;
    margin-top: 3vw;
    margin-bottom: 3vw;
}
  @media(orientation: portrait) {
	  body {
    margin: 0;
    color: #fff;
    font-family: myriad;
    text-transform: uppercase;
	background-image: none;
	background-size: 180vh;	
	background: #000;
	
	}

	#esquerda {
	width: 100%;
	background: #245091;
	z-index: 999;
	height: auto;
	position: fixed;
	}
	#direita {
	width: 100%;
	}
	
	.menu {
		padding: 0.5% 3%;
		height: 10vw;
		
	}

	.menu a {
		color: #fff;
		text-decoration: none;
	}

	.home {
		float: left;
		font-size: 8vw;
		line-height: 10vw;
	}
	#principal{
		padding-top: 10vw;
	}
	.home span {
		margin-left: 4vw;
	}
.valor-premio{
	width: 100%;
	padding-top: 7.5vh;
	font-size: 6vw;
	padding-left: 1vw;
}

.sorteio-premio{
	width:100%;
	height:auto;
	float:left;
}

.todos-premios{
	 /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  
  padding: 0;
  margin: 0;
  list-style: none;
}
.todos-premios .premios{
 flex-basis: 24%;
 flex-grow: 1;
 height:auto;
 margin: 0.5%;
 background:#104f7a;
 font-size: 3vw;
}



.premio-titulo{
	background:#104f7a;
	color: yellow;
	height:4vh;
	line-height: 5vh;
}

.premio-valor{
	background:#2363a0;
	height:5vh;
	line-height: 5vh;
	margin: 2vw;
}

.detalhes-sorteio{
	width:100%;
	margin:0.5%;
	height:6vh;
	float: left;
	text-align: center;
	font-size: 4vw;
	line-height: 6vh;
	background:#104f7a;
}
.detalhes-titulo{
	background:#104f7a;
	color: yellow;
	height:4vh;
	line-height: 4vh
}

.detalhes-valor{
	background:#2363a0;
	height:4vh;
	line-height: 4vh;
}
.bolas-ordem {
    font-size: 6vw;
    width: 100%;
    height: 4vh;
    float: left;
    background-image: radial-gradient(#08234e, #08234e);
    border-radius: 0 0 1vw 1vw;
    text-align: center;
    padding-top: 2vh;
    border-top: solid 1px #133365;
}
.bola-quantidade-numero {
    float: left;
    box-sizing: border-box;
    margin-left: 1vh;
    color: yellow;
}
.bola-ordem-nome {
    float: left;
    width: 54%;
    margin: 0;
    text-align: right;
}
.sorteio{
	height:13.5vh;
}

.premiado .cartela-geral{
	width:100%;
	margin:0.5%;
	
}
.mostrar-cartelas {
	border: 0;
	border-radius: 0;
	height: auto;
}
.espaco{
width: 100%;
height: 40vh;
display: block;
}
.espaco-video{
height:	35vh!important;
	
}

.video{
	width:96%;
	height:auto;
	max-height:50vh;
}
.mostrar-cartelas-video {
	border: 0;
	border-radius: 0;
	height: auto;
}
.cartela-geral{

	width:98%;
	margin: 1%;
	float:left;
	margin-bottom: 2vw;
	
}
.cartela {
    color: #fff;
    float: left;
    flex-direction: row;
    margin: auto;
    padding: 1% 1%;
    margin-left: -0.3%;
    margin-right: 0.5%;
    width: 94%;
    margin-top: 0.3vw;
    box-sizing: border-box;
	padding:1vw;
	margin-bottom:0.2vw;
	border-radius: 0 2vw 2vw 2vw;
	
}
.cartela-topo {
    width: 99%;
    text-align: center;
	margin: 0.5%;
	text-align: center;
	border-radius: 1vw;
	 float: left;
	 height:5vh;
    box-sizing: border-box;
	padding: 0 5%;
	
}
.cartela-doador {
    width: 100%;
    font-size:4vw;
    float: left;
    line-height: 5vh;
    text-align: center;
    box-sizing: border-box;
	 float: left;
	
}

.codigo-vertical{
	
    margin-top: 0.3vw;
	width:4%;
	height:15vw;
	border-radius: 2vw 0 0 2vw ;
	float:left;

}
.codigo-vertical p{
	
	margin:0;
	margin-top: 6.3vw;
	padding: 3vw 0;
	font-size:3.5vw;
	width: 100%;
	}
.cartela-quadros {
    width: 10%;
    height: 8vw;
	margin: 0.5%;
    text-align: center;
    line-height: 9vw;
    float: left;
    box-sizing: border-box;
    font-size: 6vw;
	border-radius: 2vw;
}
.cartela-unica{
	width: 100%!important;
}
.cartela-unica .cartela-quadros{
	height:8vw;
	line-height: 8vw;
	font-size: 5vw;
}
.premio-img img{
	width: 80%;
}
  }