/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 5/fev/2017, 23:28:44
    Author     : sergio
*/

/*preload pagina*/
.caixa-aviso-email{
position:fixed; 
left: 50%; 
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
}
#nome{
    text-transform: capitalize;
}
#cover {
	position: fixed; 
height: 100%; 
width: 100%;
top:0; 
left:0; 
right:0;
bottom:0; 
background: #fff; 
z-index:9999; 
    font-size: 60px; 

}
#cover div{
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#cover div img{
opacity: 1;
    filter: alpha(opacity=100); 
}

#bottom{
background: -webkit-radial-gradient(top,70% 200px, white,rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0));
background: radial-gradient(70% 200px at top,white,rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0));
	color:#000035;
	min-height:100px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

/*baixo*/
#nav-form{
position: relative;
display:flex;
width:960px;
height:auto;
margin:0 auto;

}
/*formulario*/
#forms{
	position: relative;
	float:right;
	margin-left: auto;
	display: inline-flex;
}
.btn-form{
	display:flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
margin:0px 10px;
}


/*baixo*/
#refs{
position: relative;
display:block;
width:960px;
max-height:175px;
margin:auto;

overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */

}
#refs-sep{
/*background-color:DeepSkyBlue ;*/
}
.refs-sep{
display:inline;
}
.refs-sep p{
display:inline;
}
.sep-desporto{
display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
	
}
/*andebol*/
#principal span{
	display:block;
}

/*basktbal*/
#basket{
	background-color:LightCoral ;
}
/*
/* futsal*/
/*
#futsal{
	display:inline;
}*/

.child{
display:table;
background-color:;
}
.cor{
	/*
	width:12px;
	height:12px;*/
}
#cores{
    /*border-style: solid;*/
    /*background:pink;*/
    display:block;
}
#btn{
	
   /* background: green;*/
    color: #000035;
    width:auto;
	display:inline-table;
}
#btn span{
display:inline-table;
}
#btn:hover{
    background: #00b0f0  ;
    color: black;
    cursor: pointer;
    cursor: hand;
}
sup{
font-size: 10px;	
}
.caixa-menu {
	position:relative;
	width:150px;
	display:none;
	overflow: scroll;
	/*overflow-y: scroll;*/
	height:125px;
	z-index:88px; 
	background-color:white;

}
.caixa-menu div div{
	display:flex;
	/*border: 2px dashed #f69c55;*/
	line-height: 20px;

}
.caixa-menu div div button {
white-space: nowrap;
	border: none;
	text-decoration: none;
	cursor: pointer;
	/*background-color:;*/
	color: black;
	height: 20px;
	line-height: 20px;

}
.caixa-menu div div span {
	display:inline-flex;
	width:20px; 
	height:20px;
	line-height: 20px;
}
#campos-2{
	position:absolute;
	display: none;
}
#campos-3{
	position:absolute;
	display: none;
}


hr.style-one, hr {
	border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

/*PRINCIPAL*/
#top{
position:relative;
	margin-top:0px;
	background: -webkit-radial-gradient(bottom,70% 200px, white,rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0));
background: radial-gradient(70% 200px at bottom,white,rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0));
}
#nav-5{
	text-align:center;
	position: relative;
	display:block;
    margin:0 auto;
	z-index:100; 
	color:black;
	/*background-color:#0060b6; */
	max-width:1200px;
	height:auto;
}
#nav-4{
	padding: 5px 5px;
	position: relative;
	display:block;
    margin:0 auto;
	z-index:100; 
	color:black;
	/*background-color:#0060b6;*/
	background:rgba(255, 255, 255, 0.0);
	max-width:1200px;
	height:auto;
}
#nav-3{
padding: 5px 5px;
position: relative;
	display:blcok;
    margin:0 auto;
	z-index:100; 
	color:black;
	/*background-color:#004c8f;*/
	background:rgba(255, 255, 255, 0.0);
	max-width:1200px;
	height:auto;
}
#nav{
	position: relative;
	margin:0 auto;
	/*padding: 5px 5px;*/
	white-space: nowrap;
	max-width:1200px;
	
	
	height:auto;
	z-index:998; 
	/*background-color:whitesmoke;*/ /*00aeef*/
	color:#000035;
	/*overflow-x: scroll;*/ /* Hide horizontal scrollbar */
	overflow-y: hidden; /* Add vertical scrollbar */
	
  min-height: 50px;
  max-height: 500px;
  
   -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
#contentor{
	position: relative;
	width:960px; 
	height:480px;
	margin:0 auto;
	/*background-color:whitesmoke;*/
}
#contentor img{
width:960px;
display:table;
}

#muda-cor{
position:absolute;
z-index:99999; 
display:table;
width:50px;
height:50px;
}

#list{
width:960px;
height:480px;
}
#list div{
width:960px;
height:480px;
}

/*seleção tamanho*/
select{
	width:35px
}
#pai-form{
z-index: 99999; 
width: 800px; 
height: 400px; 
background-color: whitesmoke; 
position: fixed; 
top: 0px; 
bottom: 0px; 
left: 0px; 
right: 0px; 
margin: auto;
padding:5px;
text-align:center;

}

#emailForm{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}

#modal{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
.modal-contentor-add{
	
    position: fixed; 
    z-index: 9999999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.5); 
	
}
.pai-contentor-add{
	
z-index: 99999; 
width: 960px; 
height: 480px; 
background-color: whitesmoke; 
position: fixed; 
top: 0px; 
bottom: 0px; 
left: 0px; 
right: 0px; 
margin: auto;
text-align:center;

transform:  scaleX(1.5) scaleY(1.5) scaleZ(1.5);
transform-style: flat;

}
#submitEmail{
	margin:0 auto;
	display:table;
margin-top:-50px;
}
.submitForms{
	margin:0px 10px;
}
.submitForms:hover{
	background-color:#00b0f0;
}
.btnView:hover{
	background-color:#00b0f0;
}
/*//////////////////////////////////////////////////*/
/*teste*/

#contentor-btn{
position: relative;
width:960px;
margin:0 auto;	
}
#btn-spot {
	position:absolute; 
	right:0px; 
	top:0px;
	z-index:9999;	
	display: inline-flex;
}

#base,
#margem,
#imagem {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

#base {
  z-index: 2px;
  width: 320px;
  height: 160px;
  background: #27292b;
}

#margem {
  z-index: 1px;
  /*width: 340px;
  height: 180px;*/
  width: 352px;
  height: 192px;
  background: #0047bb;
}

#imagem {
  width: 384px;
  height: 192px;
}

#imagem img {
  width: 384px;
  height: 192px;
  //background-color:pink;
}
.equipamentos-btn{
display:none;
}
#equipamentos img {
  position: absolute;
  z-index: 99px;
  width: 800px;
  height: 400px;
}
#campo-spot {
	position:absolute;
  width: 800px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  
  top:0;
bottom:0;
left:0;
right:0;
margin:auto;


}
#campo {
  position: absolute;
  z-index: -1px;
  width: 800px;
  height: 400px;
  /* background: green;*/
}

.campo3d {
	
	outline: 1px solid transparent;
	transform-style: flat;
	transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);

-ms-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
-webkit-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
-moz-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
-o-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);

perspective: 0px ;
-webkit-perspective: 0px ;
perspective-origin: 0% 0% ;
-webkit-perspective-origin: 0% 0% ;


}

.campo2d {
	transform-style: flat;
  transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
  
-ms-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
-webkit-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
-moz-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);
-o-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(2) scaleY(2) scaleZ(2) skewX(0deg) skewY(0deg);

perspective: 0px ;
-webkit-perspective: 0px ;
perspective-origin: 0% 0% ;
-webkit-perspective-origin: 0% 0% ;

}
.thumb{
transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(0.125) scaleY(0.250) scaleZ(0.125) skewX(0deg) skewY(0deg);

-ms-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(0.125) scaleY(0.250) scaleZ(0.125) skewX(0deg) skewY(0deg);
-webkit-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(0.125) scaleY(0.250) scaleZ(0.125) skewX(0deg) skewY(0deg);
-moz-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(0.125) scaleY(0.250) scaleZ(0.125) skewX(0deg) skewY(0deg);
-o-transform: translateX(0px) translateY(0px) translateZ( 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(0.125) scaleY(0.250) scaleZ(0.125) skewX(0deg) skewY(0deg);

perspective: 0px ;
-webkit-perspective: 0px ;
perspective-origin: 0% 0% ;
-webkit-perspective-origin: 0% 0% ;
}