@charset "UTF-8";
@import url(font-awesome.min.css);
@font-face {
    font-family: 'norseregular';
    src: url('../fonts/norse-webfont.woff2') format('woff2'),
         url('../fonts/norse-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'norsebold';
    src: url('../fonts/norsebold-webfont.woff2') format('woff2'),
         url('../fonts/norsebold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{font-family: 'Merriweather', serif; font-weight: 400;}

body {
	background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(115, 25, 24, 0.2) 5%, rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(115, 25, 24, 0.2) 5%, rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(115, 25, 24, 0.2) 5%, rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(115, 25, 24, 0.2) 5%, rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
}

body:after {
	background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(234, 34, 32, 0) 5%, rgba(0, 0, 0, 0.1));
	background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(234, 34, 32, 0) 5%, rgba(0, 0, 0, 0.1));
	background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(234, 34, 32, 0) 5%, rgba(0, 0, 0, 0.1));
	background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(234, 34, 32, 0) 5%, rgba(0, 0, 0, 0.1));
}

#wrapper{overflow: hidden;}
#main {max-width: 450px; padding: 1em 2.3em 1em 2.3em; overflow: hidden; background-image: url("images/overlay.png"); background-color: #f5f5f1; position: relative; z-index: 0;}

#main .flag{position: absolute; right: 12px; top: 0; z-index: 1000; display: block; cursor: pointer;}
#main .flag img{height: 42px; position: relative; opacity: 1; transition: .3s ease;  z-index: 1000;}
#main .flag img:hover{opacity: 0.7;}

header{z-index: 0; position: relative;}
#main .avatar {margin: 20px 0 1em;}
#main .avatar::before{content: none;}
#main .avatar img {max-height: auto; width: 100%; box-shadow: none; background-color: transparent; border-radius: 0;}

h1, h2, h3, h4, h5, h6{color: #000000; font-weight: 600;}

h1{margin-bottom:0; letter-spacing: 2px; font-family: 'norseregular'; font-size: 60px;}
h1 img{width: 90%;}
h1 span{display: none;}

header p.tagline{letter-spacing: 0.5px; font-weight: 100; text-transform: none; font-family: 'norseregular'; line-height: 1.2; font-size: 28px; margin: 0; color: #731918;}

h2{letter-spacing: 2px; font-family: 'norseregular'; font-size: 28px; letter-spacing: 2px; margin-bottom: 8px;}

hr{margin:1.5em 0; border-bottom: solid 1px #001c35; opacity: 0.25;}

p.bio{text-transform: none; letter-spacing: 0; font-size: 15px; line-height: 21px; margin-bottom: 12px; text-align: justify; color: #111111;}

.service {width: 100%; transition: background-color .3s ease; cursor: pointer; line-height: 0; border: 1px solid transparent;}
.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 #731918; padding: 8px 10px; color: #731918; 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 #001c35; padding: 8px 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; color: #001c35;}

a span{letter-spacing: 1.5px;}

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

.contact{margin-bottom: 15px; display: block;}
.contact img{height: 70px; opacity: 1; transition: .3s ease;}
.contact img:hover{opacity: 0.7;}

footer#footer .copyright li{padding: 0; margin: 0; color: #aaaaaa; font-size: 11px; line-height: 15px; opacity: 0.7;}


/* 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;}

}