@font-face {
	font-family: Montserrat-Light;
	src: url(../fonts/Montserrat-Light.otf);
}
@font-face {
	font-family: Montserrat-Bold;
	src: url(../fonts/Montserrat-Bold.otf);
}
@font-face {
	font-family: Montserrat-Medium;
	src: url(../fonts/Montserrat-Medium.otf);
}
@font-face {
	font-family: Montserrat-Regular;
	src: url(../fonts/Montserrat-Regular.otf);
}

.Montserrat-Medium{
	font-family: Montserrat-Medium;
}
.Montserrat-Light{
	font-family: Montserrat-Light;
}
.Montserrat-Light .bold{
	font-family: Montserrat-Bold;
}

body {
    background-size: cover;
    background-position: 50% 50%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url("../img/fondo.png");
    z-index: -1;
}

#logo-principal{
	width: 260px;
}
#sombre-logo{
	width: 200px;
}

#label-video{
	font-family: Montserrat-Regular;
	color: white;
	font-size: 15px;
	width: 230px;
	margin: 0px auto ;
	text-align: center;
}
#label-video .texto{
	height: 20px;
	background-color: black;
	width: 210px;
	float: left;
}

#label-video .texto .subtexto{
	position: relative;
	top: 5.5px;
	z-index: 1;
}
.triangulo-equilatero-bottom-left {
	width: 0;
	height: 0;
	border-right: 5px solid transparent;
	border-top: 10px solid transparent;
	border-left: 5px solid #000000;
	border-bottom: 10px solid #000000;

	float: right;
}
.triangulo-equilatero-bottom-right {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-top: 10px solid transparent;
	border-right: 5px solid #000000;
	border-bottom: 10px solid #000000;

	float: left;
}

.wrapper {
	width: calc(100% - 40px);
	/*display: inline-block;*/
	display: table;
	position: relative;
	margin: 0 auto;
	text-align:center;
	vertical-align:middle;
}
.wrapper:after {
	padding-top: 56.25%;
	display: block;
	content: '';
}
.main {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: black;
    
}
.main{
	border: 14px solid black;
}
#div_twitter {
    background-color: black;
    position: absolute;
    right: -44px;
    width: 35px;
    height: 35px;
    top: -14px;   
    text-align: center;
}
#div_facebook {
    background-color: black;
    position: absolute;
    right: -44px;
    width: 35px;
    height: 35px;
    top: 21px;
    text-align: center;
}
#div_share {
    background-color: black;
    position: absolute;
    right: -44px;
    width: 35px;
    height: 35px;
    top: 56px;
    text-align: center;
}

#div_twitter a,
#div_facebook a{
	color: white;
	font-size: 26px;
	display: block
}
#div_facebook a{
	width: 30px;
}
#div_share a{
	color: white;
	font-size: 22px;
	display: block
}

#eventos_anteriores{
	border-top: 8px solid black;
	background-color: white;
	border-bottom: 8px solid black;
	margin-top: 50px;
}

#label-eventos_anteriores {
	font-family: Montserrat-Light;
	color: white;
	font-size: 31px;
	width: 390px;
	margin: 0px auto ;
	text-align: center;
}
#label-eventos_anteriores .texto{
	height: 40px;
	background-color: black;
	width: 350px;
	float: left;
}

#label-eventos_anteriores .texto .subtexto{
	position: relative;
	top: -5.5px;
	z-index: 1;
}

.triangulo-equilatero-top-left {
	width: 0;
	height: 0;
	border-right: 10px solid transparent;
	border-top: 20px solid #000000;
	border-left: 10px solid #000000;
	border-bottom: 20px solid transparent;

	float: right;
}
.triangulo-equilatero-top-right {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-top: 20px solid #000000;
	border-right: 10px solid #000000;
	border-bottom: 20px solid transparent;

	float: left;
}
.media{
	margin-bottom: 8px;
}
.media-left{
	border: 1px solid black;
	width: 63px;
	height: 63px;
	padding-left: 9px;

}

.media-left .fecha{
	font-family: Montserrat-Medium;
	font-size: 15px;
	text-align: center;
	line-height: 6px;
	color: black;
}
.media-left .fecha span{
	line-height: 46px;
	font-size: 36px;
}
.evento{
	font-family: Montserrat-Light;
	font-size: 15px;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 4px;
	padding-bottom: 11px;
}
.evento a{
	text-decoration: none;
	color: black;
}
#logo-live-directo{
	width: 160px;
}

#lable-transmite{
	margin-top: 23px;
	margin-bottom: 18px;
}

#footer {
    background-color: black;
    
    text-align: center;
    font-size: 11px;
    height: 30px;
    padding-top: 8px;
    font-family: Montserrat-Light;
    letter-spacing: 1.10px;
}
#footer a{
	color: #B3B3B3;
	text-decoration: none;
}

/*
	Clases asistentes
*/
.margin-top-xs{
	margin-top: 12px;
}
.margin-top-sm{
	margin-top: 30px;
}
.margin-top-md{
	margin-top: 50px;
}

.margin-bottom-xs{
	margin-bottom: 12px;
}
.margin-bottom-sm{
	margin-bottom: 30px;
}
.px15{
	font-size: 15px;
}
.px31{
	font-size: 31px;
}
.letter-spacing-20{
	letter-spacing: 1.00px;
}
.letter-spacing-100{
	letter-spacing: 1.70px;
}

.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 7px;
  left: 10px;
  width: 100%;
  top: 94%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 5px 33px 15px #777;
  -moz-box-shadow: 5px 33px 15px #777;
  box-shadow: 5px 33px 15px #777;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.effect5:after
{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 9px;
  left: auto;
}

.effect5_2:before, .effect5_2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 7px;
  left: 10px;
  width: 100%;
  top: 93%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 5px 21px 15px #777;
  -moz-box-shadow: 5px 21px 15px #777;
  box-shadow: 5px 21px 15px #777;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.effect5_2:after
{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 14px;
  left: auto;
}

/* pantalla celular y tablet */
@media (max-width: 767px) {
	#eventos_anteriores > div > .col-sm-12{
		margin-bottom: 40px;	
	}
	#label-eventos_anteriores {
		color: white;
		font-size: 19px;
		width: 240px;
	}
	#label-eventos_anteriores .texto{
		height: 40px;
		background-color: black;
		width: 200px;
	}

	#label-eventos_anteriores .texto .subtexto{
		top: 2.5px;
	}
}

@media (min-width: 768px) { 
	.evento{
		width: 20%;
	}
	.evento:not(:last-child){
		border-right: 1px solid black;
	}
}
/* pantalla comun */
@media (min-width: 991px) { 
	
}

/* pantalla grande */
@media (min-width: 1200px) { 
	#video{
		padding: 0px 25px;
	}
}