@font-face {
    font-family: 'font1';
    src: url('Butler-UltraLight.woff2') format('woff2'),
        url('Butler-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'font2';
    src: url('Butler.woff2') format('woff2'),
        url('Butler.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*, ::before, ::after {box-sizing:border-box;margin:0;padding:0;}
body {font-family: 'font1';background:#111;color:#fff;font-size:18px;height:100%;overflow:hidden; background-image: url("../back.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: initial;}
canvas {z-index:-999;position:absolute;opacity:0.1;}
a:hover {cursor:pointer;}
h1,h2,h3 {color:#fff;}
h2,h3 {font-size:1.2em;margin-bottom:0px;}
	
.close {right: -3.7%;position: fixed;background: #000;color: #fff;font-weight: 700;text-align: center;padding: 0px 6px 2px 7px;border-radius: 5px;}
.close:hover {cursor:pointer;box-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 22px #fff, 0 0 33px #fff;}
#content {position:absolute;bottom:0;width:100%;background: #000;padding: 7px 22px 0px 22px;}
#content_center{width:100%;display:flex;position:absolute;top:10%;}
#content_center img {max-width:40%;margin:0 auto;opacity:.07;}
.base {font-size:1.3em;position:absolute;top:73.7%;left:70%;opacity:0.1;cursor:pointer;}
#mentions .container .contenu, #lindavosem .container .contenu, #sylhas .container .contenu  {overflow-y: scroll;max-height: 620px;box-shadow: 0 0 5px #fff, 0 0 11px #fff, 0 0 33px #fff,0 0 44px #fff;padding:22px;width:100%;}
	
#creativ-music .container .contenu {overflow-y: scroll;max-height: 620px;box-shadow: 0 0 5px #fff, 0 0 11px #fff, 0 0 33px #fff,0 0 44px #fff;padding:22px;width:100%;}	
	
@media (max-width: 800px) { .base {top:50%;left:50%;} }
h1 {font-size: 1em;font-weight: 100;letter-spacing: -0.02em;}
p {font-size:0.8em;padding: 12px 0px 33px 0px;display: block;letter-spacing: -0.02em;float:left;padding-top:14px;margin-left:44px;}
a {color:#fff;text-decoration: none;}
#footer a:hover{cursor:pointer;}	
.content img {width:31px;}
.box{position: absolute;top: 50%;left: 2%;transform: translate(-50%, -50%);width: 33px;height: 33px;background: #111; box-sizing: border-box;overflow: hidden;box-shadow: 0 0px 10px rgb(255, 255, 255, .3);color: white;padding: 1px;border-radius:5px;}
.box:before{content: '';position:absolute;top:0;left:-100%;width:100%;height:100%;background: rgba(255,255,255,0.1);transition:0.5s;pointer-events: none;}
.box:hover{cursor:pointer;}
.box .content{position:absolute;text-align:center;border-radius:5px;}
.box span{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;box-sizing: border-box;}
.box span:nth-child(1){transform:rotate(0deg);}
.box span:nth-child(2){transform:rotate(90deg);}
.box span:nth-child(3){transform:rotate(180deg);}
.box span:nth-child(4){transform:rotate(270deg);}
.box span:before{content: '';position: absolute;width:100%;height: 2px;background: #fff;animation: animate 7s linear infinite;}
@keyframes animate {0% {transform:scaleX(0);transform-origin: left;}50%{transform:scaleX(1);transform-origin: left;}50.1%{transform:scaleX(1);transform-origin: right;}100%{transform:scaleX(0);transform-origin: right;}}
@keyframes animate2 {0%;50% {opacity:.07;}25%{opacity:.01;}51%{opacity:0;}}
#footer {bottom: 0;position: fixed;width:100%;z-index:100;color:#fff !important;}

.contentpage {padding:33px;}
.container {
  display: flex;
  margin-left:auto;
  margin-right:auto;
  margin-top: 45vh;
  max-width: 1070px;
  transform: translateY(-55%);
}

.item {
  position: relative;
  display: block;
  flex: 1 1 0px;
  transition: transform 500ms;
  margin:0 11px;
}
	
.intitule {
  transition: transform 500ms;
}	

.container:focus-within .item,
.container:hover .item {
  transform: translateX(-22%);
	}

.item:focus ~ .item,
.item:hover ~ .item {
  transform: translateX(22%);
}

.container .item:focus,
.container .item:hover {
  z-index: 1;
  transform: scale(1.2);
  cursor:pointer;
}

.item img {
  display: block;
  max-width: 100%;
  opacity:0.5;
}
.item img:hover, .item img:focus {opacity:1;  box-shadow: 0 0 5px #fff,
        0 0 11px #fff,
        0 0 33px #fff,
        0 0 44px #fff;}
	
.intitule {font-size: 1.3em; position: absolute;transform: rotate(-90deg);
    display: inline-flex;
    color: #fff;
    left: -22px;
    top: 87%;
    text-align: left;
}
.intitule2 {top:80.3%;left:-55px;}
.intitule3 {top:77%;left:-81px;}
.intitule4 {top: 84.1%;left: -33px;}

::-webkit-scrollbar {width: 20px;}
::-webkit-scrollbar-track {background-color: transparent;}
::-webkit-scrollbar-thumb {background-color: #d6dee1;border-radius: 20px;border: 6px solid transparent;background-clip: content-box;}
::-webkit-scrollbar-thumb:hover {background-color: #a8bbbf;}
	
	.fh {margin-top: 11px;border-bottom: 1px solid;display:flex;}
	.fh_visuel {width:144px;float: left;padding: 11px;}
	.fh_visuel img {max-width:133px;transition: 0.3s;cursor:pointer;box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 11px #fff;}
	.fh_visuel img:hover {opacity: 0.7;}
	.fh_info {font-size:0.8em;float:left;padding:11px;font-weight:700;margin-left:22px;}
	.fh_store {margin:3px 0px;display:inline-flex;font-weight:100;}
	.fh_store_logo {}
	.fh_store_logo_img {width: 33px;margin: 0px 3px;border-radius: 7px;background:#fff;}
.album_tracklist {font-size: 1em; padding: 0px; margin-left: 0px;}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    padding-top: 80px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal-content {
    margin: auto;
    display: block;
    width: 75%;
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1)}
    to {-webkit-transform:scale(2)}
}
@keyframes zoom {
    from {transform:scale(0.4)}
    to {transform:scale(1)}
}
@-webkit-keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}
@keyframes zoom-out {
    from {transform:scale(1)}
    to {transform:scale(0)}
}

.modal-content {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
	max-width: 100% !important;
    width: 350px;	
}

.out {
  animation-name: zoom-out;
  animation-duration: 0.6s;
}
	
	.fh_info_intitule {font-size:0.8em;font-weight: 100;width: 70px;display: block;float: left;margin-top:3px;}
	.fh_artist {margin:3px 0px;}
	.fh_title {margin:3px 0px;}
	.fh_ref {margin:3px 0px;font-weight:100;}

.artist {}
.profil_artist {max-width:177px;border-radius:150px;float:left;}
.detail_artist {margin-left:200px;}
.detail_artist h1 {font-size: 1.3em;font-weight: 700;margin-bottom: 22px;}
.cursor{cursor:pointer;}
#home .contenu,#fromheartlight .contenu {width: 741px;margin-right: auto;margin-left: auto;max-height: 660px;overflow-y: scroll;overflow-x: hidden;}
#header {display: block;width: 100%;color: #fff;font-size:1.2em;text-align:center;height: 77px;position: fixed;background:#111;opacity:0.7;z-index:99;}
#header a {color:#fff;padding: 4px 11px;letter-spacing: -0.02em;margin-top: 10px;display: inline-block;}
#header a:hover {opacity:0.5;}
.suba {font-size:0.8em;}
@media (max-width: 768px)
{
	#header {margin-top: 70px;}
	.modal-content {max-width: 300px !important;}
	#home .contenu,#fromheartlight .contenu {width:inherit;margin-top: 111px;display: inline-block;max-height:inherit;overflow-y:inherit;overflow-x:inherit;}
	body {overflow-y: inherit;}
	.box {left:8%;}
	.item {max-width:177px;}
	.intitule {font-size:0.77em;left:-11px;top:85%;}
	.intitule2 {left:-28px;top:77%;}
	.intitule3 {left:-44px;top:78%;}
	.intitule4 {left:-17px;top:81.5%;}
	.contentpage {margin-top:-10vh;}
	#mentions .container{margin-top:35vh;max-height: 500px;}
	.close {right: 0;	top:-6%;}
	.fh {display:block;}
	.fh_visuel {width:100%;float:inherit;text-align: center}
	.fh_info {float:inherit;margin-left:0px;display:grid;}
	.container {transform: translateY(-20%);display:block;}
	.base {position:fixed;top:75%;}
	.detail_artist {margin-left:110px;}
	.profil_artist {max-width:100px;}
	.nomob {display:none;}
}