/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;width: 1200px;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
a, button, input, textarea {outline: none;}


@import url('https://fonts.googleapis.com/css?family=Rubik:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

.content-general-calendario{
	width: 100%;
	margin: 0 auto;
	font-family:  'open_sansregular', sans-serif;
	box-sizing: border-box;
	position: relative;
	/*background: url(../images/city.png) 450px -45px no-repeat #BB001E;*/
	background-image: linear-gradient(to bottom right, rgba(32, 52, 117,1) , rgba(19, 160,76,1));
    background-position: bottom left;
    background-repeat: no-repeat;
	/*background: -moz-linear-gradient(top, #D9111B 0%, #900106 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #D9111B), color-stop(100%, #900106));
	background: -webkit-linear-gradient (top, #D9111B 0%, #900106 100%);
	background: -o-linear-gradient(top, #D9111B 0%, #900106 100%);
	background: -ms-linear-gradient(top, #D9111B 0%, #900106 100%);
	background: linear-gradient (to bottom, #D9111B 0%, #900106 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D9111B', endColorstr='#900106', GradientType=0 );*/	
	/*border: 10px solid #FFFFFF;*/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}
.content-general-calendario *{
	-webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}
.content-general-calendario .logoWrapper {
    width: 100%;
    height: 450px;
}
.content-general-calendario .content-calendario{
	margin: 0;
	padding: 0;
}
.content-general-calendario img.logo{
	width: 450px !important;
	top: 2%;
	left: 0px;
	right: 0px;
	position: absolute;
	z-index: 10;
	margin: 0 auto;
}
.content-general-calendario .menu{
    margin: 0 auto;
    top: 80%;
    position: relative;
    width: 210px;
    text-align: center;
    z-index: 10;
    border-top: solid 1px #FFF;
    border-bottom: solid 1px #FFF;
    padding: 5px 0px;
}
.content-general-calendario .menu p{
	font-size: 12px;
	color: #FFFFFF;
	margin: 0 0 10px 0;
}
.content-general-calendario .menu li{
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .menu li:hover {opacity: .3;}
.content-general-calendario .menu .activate {opacity: .3;}

.content-general-calendario .menu .icon{
	background: url(../images/sprite-icons.png) no-repeat;
	width: 27px;
	height: 27px;
	display: block;
	margin: 0 auto;
}
.content-general-calendario .menu .seleccion {background-position: 0 0;}
.content-general-calendario .menu .equipo {background-position: 0 -27px;}
.content-general-calendario .menu .fase {background-position: 0 -54px;}

.content-general-calendario .menu a{
	font-size: 11px;
	color: #FFFFFF;
	margin: 0;
	text-decoration: none;
}
.content-general-calendario .calendario{
	padding: 0% 5% 0px;
	overflow: hidden;
}
.content-general-calendario .calendario .junio{
	position: relative;
	width: 1200px;
	margin: 0 auto;
	height: 750px;
}
.content-general-calendario .calendario .julio{
	width: 1200px;
	margin: 200px auto 60px;
	position: relative;
	height: 250px;
}

.content-general-calendario .calendario .disable {opacity: .2}
.content-general-calendario .calendario .hide {opacity: 0}

.content-general-calendario .calendario h2{
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 40px;
    text-transform: uppercase;
    color: #f2d610;
    float: left;
    margin: 0 0 0 10px;
    letter-spacing: -2px;
}
.content-general-calendario .calendario .junio .week1{
	position: absolute;
	top: 20px;
    left: 460px;
}
.content-general-calendario .calendario .junio .week2{
	position: absolute;
    top: 310px;
    left: 0px;
}
.content-general-calendario .calendario .junio .week3{
	position: absolute;
    top: 610px;
    left: 0px;
}
.content-general-calendario .calendario .julio .week1{
	position: absolute;
	top: 20px;
    left: 460px;
}
.content-general-calendario .calendario .julio .week2{
	position: absolute;
    top: 70px;
    left: 0px;
}
.content-general-calendario .calendario .julio .week3{
	position: absolute;
    top: 480px;
    left: 0px;
}
.content-general-calendario .calendario .day{
	width: 140px;
	display: inline-block;
	margin: 0 5px;
	vertical-align: top;
}
.content-general-calendario .calendario .day.final {background: url(../images/trophy.png) no-repeat 0 6px;}

.content-general-calendario .calendario .day.final.no-style {background: none;}

.content-general-calendario .calendario .day.final.no-style p{
	color: #f2d610;
}

.content-general-calendario .calendario .day span{
	color: #FFFFFF;
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	font-size: 16px;
	display: block;
    width: 30px;
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    float: left;
    overflow-wrap: initial;
    text-transform: uppercase;
    line-height: normal;
}
.content-general-calendario .calendario .day p{
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: .4;
	letter-spacing: -3px;
	color: #f2d610;
}
.content-general-calendario .calendario .day.final p {color: #FFFFFF;}

.content-general-calendario .calendario .info{
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 16px;
	padding: 15px 0 0 7px;
}
.content-general-calendario .calendario .info li {margin: 0 0 5px 0;}
.content-general-calendario .calendario .info li:first-child {
	font-size: 18px;
	font-family: 'Rubik', sans-serif;
	text-transform: uppercase;
	color: #f2d610;
}
.content-general-calendario .calendario .info li:last-child {font-size: 12px;}

/* Redes
***********************/
.content-general-calendario .redes{
	/*background: url(../images/star.png) no-repeat 0 0; */
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 257px;
	height: 220px;
	text-align: center;
}
.content-general-calendario .redes p{
	font-size: 0px;
	color: #900106;
	margin: 0;
	padding: 80px 0;
}
.content-general-calendario .redes li{
	display: inline-block;
	margin: 0 10px;
}
.content-general-calendario .redes .calendar_facebook{
	background: url(../images/facebook.svg) no-repeat;
	width: 30px;
	height: 30px;
	display: block;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .redes .calendar_facebook:hover {opacity: 0.5;}

.content-general-calendario .redes .calendar_twitter{
	background: url(../images/twitter.svg) no-repeat;
	width: 32px;
	height: 32px;
	display: block;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .redes .calendar_twitter:hover {opacity: 0.5;}

.content-general-calendario .redes .calendar_google{
	background: url(../images/google.svg) no-repeat;
	width: 40px;
	height: 30px;
	display: block;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .redes .calendar_google:hover {opacity: 0.5;}

.content-general-calendario .content-calendario .filtro{
    width: 500px;
    font-family: 'Rubik', sans-serif;
    position: relative;
    vertical-align: top;
    display: block;
    top: 0;
    left: 6%;
    z-index: 5;
}
.content-general-calendario .content-calendario .filtro .close{
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 32px;
	display: inline-block;
	vertical-align: top;
	margin: 15px 0 0 15px;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .content-calendario .filtro .close:hover {opacity: .5}

.content-general-calendario .content-calendario .filtro .equipos {display: none;}
.content-general-calendario .content-calendario .filtro .grupos {display: none;}
.content-general-calendario .content-calendario .filtro .fases {display: none;}

.content-general-calendario .content-calendario .filtro .equipos .name{
	font-family: 'Rubik', sans-serif;
	display: inline-block;
	color: #FFFFFF;
	font-size: 60px;
    letter-spacing: -2px;
    font-weight: 700;
    text-transform: uppercase;
}
.content-general-calendario .content-calendario .filtro .grupos p{
	text-transform: uppercase;
	font-size: 50px;
	color: #FFFFFF;
	display: inline-block;
	letter-spacing: -2px;
}
.content-general-calendario .content-calendario .filtro .grupos span{
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 50px;
	color: #f2d610;
	display: inline-block;
}
.content-general-calendario .content-calendario .filtro .fases p{
	text-transform: uppercase;
	font-size: 50px;
	color: #FFFFFF;
	display: inline-block;
	letter-spacing: -2px;
}

/* Menu
***********************/
.content-general-calendario .submenu{
	display: none;
	position: absolute;
	z-index: 10;
	background: rgba(0,92,168,.9);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 50px;
}
.content-general-calendario .submenu .close{
	text-decoration: none;
	display: block;
	text-align: center;
	color: #FFFFFF;
	width: 50px;
	font-size: 50px;
	margin: 15px auto 45px;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .submenu .close:hover {opacity: .5}

.content-general-calendario .submenu h3{
	text-align: center;
	color: #FFFFFF;
	font-size: 12px;
}
.content-general-calendario .submenu .confederaciones {
	/*display: none;*/
	color: #FFFFFF;
	padding: 30px 0px;
	width: 485px;
    margin: 0 auto;
}
.content-general-calendario .submenu .confederaciones ul{
	vertical-align: top;
	display: inline-block;
	width: 190px;
	margin: 0 50px 0 0;
}
.content-general-calendario .submenu .confederaciones ul:nth-child(5){margin: 0;}

.content-general-calendario .submenu .confederaciones p{
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	margin: 0 0 20px 0;
}
.content-general-calendario .submenu .confederaciones li{
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	padding: 0;
	margin: 15px 0;
	font-size: 25px;
	text-transform: uppercase;
}
.content-general-calendario .submenu .confederaciones a{
	vertical-align: middle;
	text-decoration: none;
	color: #FFF;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .submenu .confederaciones a:hover{opacity: .5;}

.content-general-calendario .submenu .grupos{
	/*display: none;*/
	padding: 50px;
	width: 330px;
    margin: 0 auto;
}
.content-general-calendario .submenu .grupos li{
	font-family: 'Rubik', sans-serif;
	display: inline-block;
	font-size: 25px;
	margin: 0 50px 0 0;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .submenu .grupos li:last-child{margin: 0;}

.content-general-calendario .submenu .grupos li a{
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
}
.content-general-calendario .submenu .grupos li:hover {opacity: .5;}

.content-general-calendario .submenu .grupos li span{
	display: block;
	font-family: 'Rubik', sans-serif;
	font-size: 60px;
	font-weight: 700;
}
.content-general-calendario .submenu .fases{
	/*display: none;*/
	text-align: center;
	text-transform: uppercase;
	font-family: 'Rubik', sans-serif;
	padding: 50px;
	width: 380px;
    margin: 0 auto;
    font-size: 40px;
}
.content-general-calendario .submenu .fases li{
	margin: 0 0 30px 0;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
}
.content-general-calendario .submenu .fases li:last-child{margin: 0;}

.content-general-calendario .submenu .fases li a{
	text-decoration: none;
	color: #FFFFFF;
}
.content-general-calendario .submenu .fases li:hover {opacity: .5;}

/* Banderas pequeñas
***********************/
.content-general-calendario .content-calendario .submenu .confederaciones .bandera{
	display: inline-block;
	margin: 0 5px 0 0;
	width: 30px;
	height: 20px;
	border: 1px solid #FFF;
}
.content-general-calendario .content-calendario .confederaciones .bandera.bra {
	background: url('../images/sprite-banderas.png') no-repeat 0px 0px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.arg {
	background: url('../images/sprite-banderas.png') no-repeat 0px -20px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.uru {
	background: url('../images/sprite-banderas.png') no-repeat 0px -40px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.col {
	background: url('../images/sprite-banderas.png') no-repeat 0px -60px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.chi {
	background: url('../images/sprite-banderas.png') no-repeat 0px -80px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.per {
	background: url('../images/sprite-banderas.png') no-repeat 0px -100px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.ven {
	background: url('../images/sprite-banderas.png') no-repeat 0px -120px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.par {
	background: url('../images/sprite-banderas.png') no-repeat 0px -140px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.jap {
	background: url('../images/sprite-banderas.png') no-repeat 0px -160px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.ecu {
	background: url('../images/sprite-banderas.png') no-repeat 0px -180px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.bol {
	background: url('../images/sprite-banderas.png') no-repeat 0px -200px;
	background-size: cover;
}
.content-general-calendario .content-calendario .confederaciones .bandera.cat {
	background: url('../images/sprite-banderas.png') no-repeat 0px -220px;
	background-size: cover;
}


/* Banderas grandes
***********************/
.content-general-calendario .content-calendario .filtro .equipos .bandera{
	display: inline-block;
	margin: 0;
	width: 60px;
	height: 40px;
	border: 2px solid #FFFFFF;
}

.content-general-calendario .content-calendario .filtro .equipos .bra {background: url('../images/sprite-banderas.png') no-repeat 0px 0px;}
.content-general-calendario .content-calendario .filtro .equipos .arg {background: url('../images/sprite-banderas.png') no-repeat 0px -40px;}
.content-general-calendario .content-calendario .filtro .equipos .uru {background: url('../images/sprite-banderas.png') no-repeat 0px -80px;}
.content-general-calendario .content-calendario .filtro .equipos .col {background: url('../images/sprite-banderas.png') no-repeat 0px -120px;}
.content-general-calendario .content-calendario .filtro .equipos .chi {background: url('../images/sprite-banderas.png') no-repeat 0px -160px;}
.content-general-calendario .content-calendario .filtro .equipos .per {background: url('../images/sprite-banderas.png') no-repeat 0px -200px;}
.content-general-calendario .content-calendario .filtro .equipos .ven {background: url('../images/sprite-banderas.png') no-repeat 0px -240px;}
.content-general-calendario .content-calendario .filtro .equipos .par {background: url('../images/sprite-banderas.png') no-repeat 0px -280px;}
.content-general-calendario .content-calendario .filtro .equipos .jap {background: url('../images/sprite-banderas.png') no-repeat 0px -320px;}
.content-general-calendario .content-calendario .filtro .equipos .ecu {background: url('../images/sprite-banderas.png') no-repeat 0px -360px;}
.content-general-calendario .content-calendario .filtro .equipos .bol {background: url('../images/sprite-banderas.png') no-repeat 0px -400px;}
.content-general-calendario .content-calendario .filtro .equipos .cat {background: url('../images/sprite-banderas.png') no-repeat 0px -440px;}