/* CSS Document */
.hide{
	display:none;	
}

#msn{
    font-size: 20px;
    margin-top: 20px;
	margin-bottom: 20px;
    position: relative;
    text-align: center;
}
.msn{
    font-size: 20px;
    margin-top: 20px;
	margin-bottom: 20px;
    position: relative;
    text-align: center;    
}
.predictionscard, .selections{
	position:relative;
	height: 115px;
	 margin: 10px 0;
}


.predictions{
	top:0px;
	position:relative;
}
.predictions img{
	width:100%;	
}

#cards{
	 position: relative;
}

#cards .trans{
	-webkit-transition: all 0.5s ease-out;     
	-moz-transition: all 0.5s ease;     
	-o-transition: all 0.5s ease;
}

#cards img:hover{
	-webkit-transition: all 0.5s ease-out;     
	-moz-transition: all 0.5s ease;     
	-o-transition: all 0.5s ease;
	
	z-index: 22;
	
   cursor:pointer;
	margin-right: -25px;
}

#cards .c1 {
    position: absolute;
    left: 87.99%;
    z-index: 1;
	width:13%;
}

#cards .c2 {
    position: absolute;
    left: 83.8%;
    z-index: 2;
	width:13%;
}

#cards .c3 {
    position: absolute;
    left: 79.61%;
    z-index: 3;
	width:13%;
}

#cards .c4 {
    position: absolute;
    left: 75.42%;
    z-index: 4;
	width:13%;
}

#cards .c5 {
    position: absolute;
    left: 71.23%;
    z-index: 5;
	width:13%;
}

#cards .c6 {
    position: absolute;
    left: 67.04%;
    z-index: 6;
	width:13%;
}

#cards .c7 {
    position: absolute;
    left: 62.85%;
    z-index: 7;
	width:13%;
}

#cards .c8 {
    position: absolute;
    left: 58.66%;
    z-index: 8;
	width:13%;
}
#cards .c9 {
    position: absolute;
    left: 54.47%;
    z-index: 9;
	width:13%;
}

#cards .c10 {
    position: absolute;
    left: 50.28%;
    z-index: 10;
	width:13%;
}

#cards .c11 {
    position: absolute;
    left: 46.09%;
    z-index: 11;
	width:13%;
}

#cards .c12 {
    position: absolute;
    left: 41.9%;
    z-index: 12;
	width:13%;
}

#cards .c13 {
    position: absolute;
    left: 37.71%;
    z-index: 13;
	width:13%;
}

#cards .c14 {
    position: absolute;
    left: 33.52%;
    z-index: 14;
	width:13%;
}

#cards .c15 {
    position: absolute;
    left: 29.33%;
    z-index: 15;
	width:13%;
}

#cards .c16 {
    position: absolute;
    left: 25.14%;
    z-index: 16;
	width:13%;
}

#cards .c17 {
    position: absolute;
    left: 20.95%;
    z-index: 17;
	width:13%;
}

#cards .c18 {
    position: absolute;
    left: 16.76%;
    z-index: 18;
	width:13%;
}

#cards .c19 {
    position: absolute;
    left: 12.57%;
    z-index: 19;
	width:13%;
}
#cards .c20 {
    position: absolute;
    left: 8.38%;
    z-index: 20;
	width:13%;
}

#cards .c21 {
    position: absolute;
    left: 4.19%;
    z-index: 21;
	width:13%;
}

#cards .c22 {
    position: absolute;
    left: 0%;
    z-index: 22;
	width:13%;
}

.s1 {
	position: absolute;
    margin-left: calc(50% + 10%);
	margin-left: 60%;
	top:0px;
	width:13%;
}
.s2 {
   position: absolute;
    margin-left: calc(50% - 6.5%);
	margin-left:43.5%;
	top:0px;
	width:13%;
}
.s3 {
   position: absolute;
    margin-left: calc(50% - 24%);
	margin-left:26%;
	top:0px;
	width:13%;
}



.p1 {
    position: absolute;
    margin-left: calc(50% + 10%);
	margin-left: 60%;
	top:0px;
	width:13%;
}
.p2 {
    position: absolute;
    margin-left: calc(50% - 6.5%);
	margin-left:43.5%;
	top:0px;
	width:13%;
}
.p3 {
   position: absolute;
    margin-left: calc(50% - 24%);
	margin-left:26%;
	top:0px;
	width:13%;
}


/*Flip*/
.blackPanel a{
	border:none;
	text-decoration:none;
}
.blackPanel img{
	cursor:pointer;
}
.redPanel img{
	cursor:pointer;
}


.titulo{
	font-size:25px;
	text-align:center;
	color:#F89406;
}
.subtitulo{
	font-size:25px;
	text-align:center;
	color:#006DCC;
}
.txt{
	font-size:14px;
	color:#000;
	text-align:justify;
}


@media (max-width: 860px){
.msn, #msn{
    margin-top: 40px;
}
}

@media (max-width: 768px){
.msn, #msn{
    margin-top: 40px;
}
}


@media (max-width: 680px){
.msn, #msn{
    margin-top: 20px;
}
}


@media (max-width: 568px){
.msn, #msn{
    margin-top: 20px;
}
}


@media (max-width: 540px){
.msn, #msn{
    margin-top: 0px;
}
}


@media (max-width: 480px){
.msn, #msn{
    margin-top: 0px;
}
}

@media (max-width: 384px){
.msn, #msn{
    margin-top: 0px;
}
}

@media (max-width: 320px){
.predictionscard, .selections {
    height: 65px;
}
.msn, #msn{
    margin-top: 0px;
}
}