
		.videowrapper {
		    float: none;
		    clear: both;
		    width: 100%;
		    position: relative;
		    padding-bottom: 56.25%;
		    padding-top: 25px;
		    height: 0;
		}
		.videowrapper iframe {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}
 
html {  height:100%;   scroll-behavior: smooth; }
main { height:auto;  display:block}
   @font-face {
			font-family: 'Katlynne'; 
   src:  url("./libs/fonts/Katlynne.woff2") format("woff2"),
       url("./libs/fonts/Katlynne.otf") format("opentype");
}

                
        @font-face {
			font-family: 'f2focr'; 
            src: url("./libs/fonts/f2focr.eot"); /* IE9*/
  src: url("./libs/fonts/f2focr.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("./libs/fonts/f2focr.woff2") format("woff2"), /* chrome、firefox */
  url("./libs/fonts/f2focr.woff") format("woff"), /* chrome、firefox */
  url("./libs/fonts/f2focr.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("./libs/fonts/f2focr.svg#F2F OCRBczyk W01 Regular") format("svg"); /* iOS 4.1- */
}
        
        @font-face {
			font-family: 'GTAmerica'; 
   src:  url("./libs/fonts/GTAmerica-ExpBold.woff2") format("woff2"),
       url("./libs/fonts/GTAmerica-ExpBold.otf") format("opentype");
}
         
        @font-face {
			font-family: 'GTAmericaStandard'; 
   src:  url("./libs/fonts/GTAmerica-StdBold.woff2") format("woff2"),
       url("./libs/fonts/GTAmerica-StdBold.otf") format("opentype");
}
        
 


        
.line-spacer { height:.75rem;line-height:.75rem;width:99%;clear:both }
        
        body { 
             font-size:.9rem;
        }
        
         .liste-artistes-txt { color:black;font-weight:bold;text-decoration:none;text-transform:uppercase;display:inline-block;line-height:2.8rem;font-size:1.5rem }
        .liste-artistes-txt:hover { transform: skewX(-10deg); color:black !important; }
        

        sup { font-style:italic; font-family: 'Apercu'; font-weight: normal; }
        h1 { font-family: 'f2focr'; font-weight: bold;text-transform: uppercase; padding:0;margin: .5rem 0 }
        h2 { margin: .5rem 0 ; padding:0 }
        h6 { margin:0; padding:0; font-family: 'f2focr'; font-weight: normal;  text-transform: uppercase; font-size:.9rem}
        .ghost { font-size:.01rem;letter-spacing:-1rem}
        
        
/* ordi */ 
@media only screen and (min-width:621px) 
{
    .cadre-big-release { padding-right: 2rem;margin-left:-1.5rem }
     .show-if-smartphone {  display: none !important; }
     .hide-if-smartphone {  }
    .entete { font-family: 'f2focr'; position:fixed;top:0;left:0;font-size:1.5rem;;height:30vh }
    .entete-spacer { background:transparent;height:6rem }
}
/* smartphone */
@media only screen and (min-width:0px) and (max-width:620px) 
{
    .cadre-big-release { padding-right:0; margin-left:0}
    .hide-if-smartphone { display: none !important; } 
    .show-if-smartphone {   }
    .entete { font-family: 'f2focr'; position:fixed;top:0;left:0;font-size:1.5rem;;height:60vh }
    .entete-spacer { background:transparent;height:10rem }
}
        
        
        
        .texte { font-size:.9rem}
        
        .backvideo-container { background-color: white; height:90vh; overflow: hidden;  }
        .square-details { color:black !important; display:none;position:absolute;width:90%; padding:2.5% 5%; background-color:white;top:-.25rem;left:0;flex: 1; height:125% }
        .small-release { text-align: left; color:white; text-decoration: none }
        .small-release:hover .square-details { display: block}
        .seeall { color:black; text-decoration: none; font-family: 'f2focr'; font-weight:bold}
        .seeall:hover { color:black; text-decoration: underline }
        

.promobutt { border: 2px solid black;width:100%;font-family:'f2focr';padding:.6rem; text-align:center;text-decoration:none;color:black}
.promobutt:hover { background:#ddd;   cursor:pointer }
.boutLien { font-family:'f2focr',Courier;font-size:.85rem;color:white;background:black;border:1px solid black; display:inline-block; text-transform:uppercase; text-decoration:none; padding:.5rem; margin: .5rem; }
.boutLien:hover { color:black;background:white;
	-moz-box-shadow: 10px 10px 0px 0px #000000;
-webkit-box-shadow: 10px 10px 0px 0px #000000;
-o-box-shadow: 10px 10px 0px 0px #000000;
box-shadow: 10px 10px 0px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=0); }


        
        .diag-release {  
            display: block; position:relative; width:85%;   margin-bottom:-1.5rem;
            margin-left:auto;margin-right:auto; cursor:pointer;text-decoration:none;   } /* height: 0;padding-bottom: 85%; margin-bottom:1.5rem;  */
        
        .diag-contenu { /* position: absolute;  top: 1.2rem; left: 13%; */ z-index:22; width:77%; margin-left:auto; margin-right:auto; margin-top:2.2rem; margin-bottom:2.2rem }
         .diag-cover { -webkit-filter: grayscale(100%); filter: grayscale(100%); overflow:hidden;height: 0;padding-bottom: 90%; width:90%;  margin-left: 5%;  z-index:20; position: absolute;  background-size:cover; 
    -webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
        }
        
   .diag-release:hover .nom-art-change { letter-spacing:2px; background-color: white !important;color:black !important }
         .diag-release:hover .diag-text-change { color:white; background-image:none; background-color:black }
    .diag-text-titre {  font-family: 'f2focr'  ;    font-size:1.8rem !important; text-transform:uppercase  }
       .diag-text-titre > span { font-size:.8rem;  font-family: 'f2focr';  }
        .diag-text-change { display:inline-block; padding: .5rem; color:black; background-color:rgba(255,255,255,1); /* 0.7 */ }
         .diag-release:hover  .diag-cover { -webkit-filter: grayscale(0); filter: grayscale(0); overflow:hidden;
            margin-top:-1.25rem; 
            margin-bottom:1.25rem; 
            margin-left:-.5rem ;  
            margin-right:.5rem ; 
            transform: rotate(4deg); 
}/* height: 0;padding-bottom: 105%; width:105%; */ 
        .diag-go { display:none}
        .diag-release:hover .diag-go { display:inline-block; font-size:.95rem; margin-top:.25rem;font-family: 'f2focr';color:white }
        .diag-text-format { font-family: 'f2focr';  font-size:.8rem; } 
 

			