html{
	position: relative;
	min-height: 100%;
}

body{
	padding-top: 50px;
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 180px;
}

header.header-ultra .col-left {
	background-color: #FF001A;
}
header.header-trail .col-left {
	background-color: #00B15D;
}
header.header-marathon .col-left {
	background-color: #FFFF57;
}
header.header-shorttrail .col-left {
	background-color: #009eff;
}
header.header-mini .col-left {
	background-color: #EE7E42;
}

header .col-left{
	position: relative;
	/*background-image: url(../img/header-xs-els-bastions.png);*/
	background-position: center center;
	height: 340px;
	margin-left: 15px;
	margin-right: -15px;
}
.text-header{
	padding-top: 10px;
}
.text-header p{
	text-align: right;
	margin: 0px;
}
.text-header h2{
	text-align: right;
	margin: 0px;
	font-size: 40px;
}
.header-ultra h2{
	color: #FF001A;
}
.header-trail h2{
	color: #00B15D;
}
.header-marathon h2{
	color: #ffd828;
}
.header-shorttrail h2{
	color: #009eff;
}
.header-mini h2{
	color: #EE7E42;
}
.text-header .white-text{
	color: white;
	font-size: 36px;
}
.text-header .black-text{
	color: black;
	font-size: 36px;
}

.list-home{
	margin: 0px;
	font-size: 40px;
}
.list-home li{
	height:68px;
	line-height: 68px;
	padding-left: 20px;
	cursor: pointer;
}
.list-home li a{
	color: black;
} 
.list-home li a:hover{
	text-decoration: none;
} 
.li-item-ultra{
background: -moz-linear-gradient(left,  rgba(255,0,26,0.5) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,26,0.5)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(255,0,26,0.5) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(255,0,26,0.5) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(255,0,26,0.5) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(255,0,26,0.5) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ff001a', endColorstr='#00ffffff',GradientType=1 );
}
.li-item-trail{
background: -moz-linear-gradient(left,  rgba(0,177,93,0.5) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,177,93,0.5)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(0,177,93,0.5) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(0,177,93,0.5) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(0,177,93,0.5) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(0,177,93,0.5) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000b15d', endColorstr='#00ffffff',GradientType=1 );	
}
.li-item-marathon{
background: -moz-linear-gradient(left,  rgba(255,255,87,0.5) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,87,0.5)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(255,255,87,0.5) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(255,255,87,0.5) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(255,255,87,0.5) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(255,255,87,0.5) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffff57', endColorstr='#00ffffff',GradientType=1 );	
}
.li-item-shorttrail{
background: -moz-linear-gradient(left,  rgba(0,158,255,0.5) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,158,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(0,158,255,0.5) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(0,158,255,0.5) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(0,158,255,0.5) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(0,158,255,0.5) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80009eff', endColorstr='#00ffffff',GradientType=1 );	
}
.li-item-mini{
background: -moz-linear-gradient(left,  rgba(238,126,66,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,126,66,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,  rgba(238,126,66,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,  rgba(238,126,66,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left,  rgba(238,126,66,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,  rgba(238,126,66,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ee7e42', endColorstr='#00ffffff',GradientType=1 );	
}

/* NAVBAR */
.navbar-brand{
	padding: 6px 15px;
}
.navbar-brand>img {
	display: inline;
    margin-top: -2px;
}

#menu-cart{
	display: none;
}


@media only screen and (max-width: 1199px) {
	.nav>li>a{
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media only screen and (max-width: 991px) {
	.nav>li>a{
		padding-left: 10px;
		padding-right: 10px;
	}
}

.crono{
	background: black;
	color: white;
	text-align: center;
	margin: 5px 0px;
	padding-top: 1%;
}
.crono > div{
    font-size: 30px;
}
.crono > p{
	margin: 0px;
	padding: 0px 10px;
	min-height: 100px;
	line-height: 100px;
	font-size: 70px;
}

/* TITLES */
.title_section{
}
.title_section h2{
	color: black;
	_font-family: 'Playfair Display', serif;
}
.title_ultra{
	background: #FF001A;
}
.title_trail{
	background: #00B15D;
}
.title_marathon{
	background: #FFFF57;
}
.title_mini{
	background: #EE7E42;
}
.title_galeria{
	background: silver;
}
.title_diplomes{
	background: darkseagreen;
}
.title_voluntaris{
	background: #06B2EC;
}
.title_allotjaments{
	background: #71329B;
}
.title_merchandising{
	background: pink;
}
.title_legal,
.title_condicions,
.title_contacte{
	background: #efefef;
}

.main-container{	
	
}

.message{
	margin-top: 20px;
}


/* SIDEBAR */
.sidebar{
	background: #efefef;
	height: 100%;
	overflow: auto;
}

.sidebar a{
	text-decoration: none;
	color: black;
}
.sidebar .list-group-item{
	border: none;
	background: transparent;
}
.sidebar .list-unstyled{
	margin-top: 10px;
}


.main-content{
	padding-top: 20px;
	padding-bottom: 20px;
	background: white;
}

.section-content h3{
	height: 40px;
	line-height: 40px;
	padding: 0px 10px;
	color: black;
	margin-bottom: 0px;
	_margin-top: 40px;
	font-family: 'Playfair Display', serif;
}
.section-content h4{
	height: 30px;
	line-height: 30px;
	color: white;
	background: #333;
	padding: 0px 10px;
	margin: 0px;
}
.section-ultra h3{
	background: #FF0000;
}
.section-trail h3{
	background: #00B050;
}
.section-marathon h3{
	background: #FFFF00;
}
.section-shorttrail h3{
	background: #009eff;
}
.section-mini h3{
	background: #ED7D31;
}
.section-contacte h3{
	background: #efefef;
	margin-bottom: 10px;
}
.section-galeria h3{
	background: silver;
	margin-bottom: 10px;
}

.cat-legend{
	padding-top: 10px;
	margin: 0px;
}
.section-ultra .cat-legend{
	background: rgba(255, 0, 0, 0.5);
}
.section-trail .cat-legend{
	background: rgba(0, 176, 80, 0.5);
}
.section-marathon .cat-legend{
	background: rgba(255, 255, 0, 0.5);
	
}
.section-mini .cat-legend{
	background: rgba(237, 125, 49, 0.5);	
}

.iframe-bloc iframe{
	width: 100%;
	height: auto;
	
}
#map,#map_pb,#map_b,#map_a,#map_i{
	_pointer-events:none;
}

.merch-item{}

.merch-item img{
	width: 100%;
	height: auto;
}
.merch-item header h5{
	
	font-family: 'Playfair Display', serif;
	text-align: center;
	font-size: 18px;
}


#msg{
	display: none;
}
.shown-federated{
	display: none;
}

.sponsor-item img{
	width: 100%;
	height: auto;
}

.gallery-thumbs{
	margin: 10px 0px;
	width: 100%;
	height: auto;
}


/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
  display: none;
}

/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

.footer{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 180px;
}
footer{
	background: black;
}
footer .container{	
	padding-top: 10px;
}

footer .footer-bloc{
	min-height: 50px;
	line-height: 50px;
}

@media only screen and (max-width: 1199px) {
	.crono > p{
		font-size: 60px;
	}
}
@media only screen and (max-width: 991px) {
	.crono > p{
		font-size: 50px;
	}
	.crono > div{
    	font-size: 30px;
    }
}
@media only screen and (max-width: 740px) {
	.crono > p{
		min-height: 80px;
		line-height: 80px;
		font-size: 40px;
	}
	.crono > div{
    	font-size: 20px;
    }
}
@media only screen and (max-width: 600px) {
	.crono > p{
		font-size: 30px;
	}
	
	.text-header h2,
	.list-home{
		font-size: 30px;
	}
}
@media only screen and (max-width: 500px) {
	footer .col-xs-6{
		width: 100%;
	}
	footer .footer-bloc{
		text-align: left;
	}
	
	.text-header .black-text,
	.text-header .white-text{
		font-size: 27px;
	}
	
	.text-header h2,
	.list-home{
		font-size: 20px;
	}
	
	.crono > div{
    	font-size: 16px;
    }
}
@media only screen and (max-width: 450px) {
	.crono > p{
		min-height: 50px;
		line-height: 50px;
		font-size: 20px;
	}
}
@media only screen and (max-width: 400px) {
	.text-header .black-text,
	.text-header .white-text{
		font-size: 18px;
	}
	.crono > div{
    	font-size: 13px;
    }
}
@media only screen and (max-width: 320px) {
	.text-header h2,
	.list-home,
	.crono > p{
		font-size: 16px;
	}
}