@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300");

body {
	background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(1209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5)), url("../../images/bg.jpg");
}

body:after {
	background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5));
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 45, 0.5));
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5));
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(209, 23, 25, 0.4) 5%, rgba(248, 164, 4, 0.5));
}

#wrapper{overflow: hidden;}
#main {max-width: 450px; padding: 1em 2.3em 1em 2.3em; overflow: hidden;}
#main .avatar {margin-bottom: 1em;}
#main .avatar::before{top: 53%;}
#main .avatar img {max-height: 170px; box-shadow: 0 0 0 1em #ffffff; background-color: #FFF; border-radius: 0;}

h1, h3{margin-bottom: 0.25em; font-family: 'Montserrat', sans-serif; letter-spacing: 2px; color: #000;}
h1 img{width: 90%;}
h1 {display: none;}
h3{margin-bottom: 10px; font-size: 27px;}

a:hover {color: #d11719;}

header p{letter-spacing: 3px; line-height: 1.5; font-size: 12pt; margin: 0;}

p.tagline{color: #000;}
p.date{margin-bottom: 5px; font-weight: 800; color: #d11719; letter-spacing: 2px; line-height: 24px; font-size: 14pt;}
p.lieu{color: #000; letter-spacing: 2px; line-height: 22px; color: #d11719}
p.text{letter-spacing: 1.5px; line-height: 20px;}

hr{margin:1.2em 0; border-bottom: solid 1px #ddd;}

.service {width: 100%; transition: background-color .3s ease; cursor: pointer; line-height: 0; border: 1px solid #FFF; border-radius: 4px;}
.service:hover {transition: background-color .3s ease; background-color: #f5f5f5; border: 1px solid #ededed;}
.service a {width: 100%; display: inline-block; line-height: 1;}
.service a .img-btn {display: block; margin: 0; line-height: 0;}
.service .name {max-width: 180px; display: block; background-size: 100%; margin: 14px 0 14px 15px; float: left; text-align: left; line-height: 35px; letter-spacing: 1px}

span.play{text-align: center; display: inline-block; float: right; margin: 15px 15px 15px 0; letter-spacing: 1px; border-radius: 5px; border: 1px solid #777; padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; color: #777;}

a span{letter-spacing: 2px;}

a:hover .boutique,
a:hover .play {transition: .3s ease; color: #fff; background-color: #f8a404; border-color: #f8a404;}

ul.icons{margin:0 auto 10px;}

footer#footer .copyright li{padding: 0; margin: 0;}

/* WIZZZ */

@media screen and (max-width: 480px) {
	#main {max-width: 100%;}
	header p {font-size: 10pt;}
	.service .name{float: none; display: block; margin:10px auto; text-align: center; line-height: 12px;}
	span.play{display: block; float: none; margin: 0 auto 15px;}

}