@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(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5)), url("../../images/bg.jpg");
}

body:after {
	background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5));
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5));
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 0.5));
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(193, 242, 181, 0.4) 5%, rgba(0, 228, 255, 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: 60%;}
#main .avatar img {max-height: 150px; box-shadow: 0 0 0 1em #ffffff; background-color: #FFF;}

h1{margin-bottom: 0.25em;}
h1 img{width: 90%;}
h1 span{display: none;}

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

hr{margin:2em 0}

.service {width: 100%; transition: background-color .3s ease; cursor: pointer; line-height: 0; border: 1px solid #FFF;}
.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 img {max-width: 125px; display: block; background-size: 100%; margin: 14px 0 14px 15px; float: left;}

span.boutique{text-align: center; display: block; margin: 15px; border-radius: 5px; border: 1px solid #616f77; padding: 8px 10px; color: #616f77; font-weight: bold; background-color: #fafafa;}
span.play{text-align: center; display: inline-block; float: right; margin: 15px 15px 15px 0; 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: #222; border-color: #222;}

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 img{float: none; display: block; margin:10px auto;}
	span.play{display: block; float: none; margin: 0 auto 15px;}

}