@import url('https://fonts.googleapis.com/css?family=Kameron:400,700');
@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400,700,900');

::selection{ background-color: rgba(31,85,119,1); color: #fcedd6; }
::moz-selection{ background-color: rgba(31,85,119,1); color: #fcedd6; }
::webkit-selection{ background-color: rgba(31,85,119,1); color: #fcedd6; }

/*
=========================
	General
=========================
*/

/* 
	Colors:
	Indigo : #1f5577 
	Beige : #FCEDD6
*/


body{
  font-family: 'Kameron', serif;
  padding:0;
  margin:0;
}

section {
/*  min-height:500px; */
  padding:60px 0;
}

#media{
	overflow: hidden;
/*	min-height:800px;	*/
}

section#media{
	padding:60px 0 0 0;
}

section.light {
  background:#FCEDD6;
}
section.dark {
  background:#050c10;
  color:#fff;
}
#home {
  min-height:85vh;
  background-image: url("../images/bg-5.jpg");
  background-size: cover;
  background-position: 55% 0;
}
header {
/*  background:#1f5577; */
  position: fixed;
  width: 100%;
  
  padding:50px 0 0 0;
  min-height:90px;
  z-index: 9999;
  
}

#dates{
	
}

footer{
	text-align:center;
	padding:20px 0 30px 0;
	background:#050c10;
}

footer a:link, footer a:active, footer a:visited, footer a {
	text-decoration: none;
	color:#FCEDD6;
	font-size:13px;
}

footer img{
	display:block;
	margin:0 auto 24px auto;
	max-width:220px;
	
	position: relative;
	top:8px;
	
}


.flex{
	display: flex!important;
}


/*
=========================
	Header
=========================
*/

header nav ul, header nav ul li{
	list-style-type:none;
	
}

header nav ul li.nav-active{
	opacity:1;
	font-size:42px;
}

header nav{
	position: absolute;
	right:40px;
	top:0;
	text-align:right;
	
}

header .logo_wrapper img{
	margin:0 auto;
	display:block;
	position:relative;
}

.logo_wrapper img{
	position:relative;
}

.menu_wrapper{
	
}

nav a:link, nav a:visited, nav a:active, nav a{
	text-decoration: none;
	-o-transition:.2s;
	-ms-transition:.2s;
	-moz-transition:.2s;
	-webkit-transition:.2s; 
	transition:0.2s;
	color:#FCEDD6;
	
	opacity: .8;
	font-family: 'Merriweather';
	line-height: 1.6;
	font-size:90%;

}

nav .dark  a:link, nav .dark  a:visited, nav .dark  a:active, nav .dark  a{
	color:#050c10!important;
}


nav a:hover{
	opacity:1;
	

}

/*
=========================
	Logo fixed
=========================
*/

.logo_wrapper{
	position:absolute;
	width:100%;
	top:200px;
	
	/*
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s; 
	transition:0.5s;
	*/
}

.logo_wrapper img{
	display:block;
	margin:0 auto;
		

}

.logo_wrapper img.anim{
	-o-transition:.1s ;
	-ms-transition:.1s;
	-moz-transition:.1s;
	-webkit-transition:.1s; 
	transition:0.1s;
}

/*
.menu_wrapper .scrolling .logo{
	position: absolute;
	top:38px;
	right:0;
}
*/

.menu_wrapper .logo{

	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s; 
	transition:0.5s;
	

	display:inline-block;
	max-width:50px;
	
	position: absolute;
	top:-100px;
	right:0;

}

.navHighlighter{

	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s; 
	transition:0.5s;
	
}

.navHighlighter.scrolling{
	/* padding-top:60px; */
}

/*
=========================
	Slider Media
=========================
*/

#media{
	position: relative;
}

.slider-media{
	position:absolute;
	width:100%;
	height:100%!important;
	top:0;
	display:block;
	z-index:200;


}

.menu_wrapper{
	z-index:800;
}

.slider-media {
	position: absolute!important;
}

.slider-media .slide{
	height:100%;
	display:block;
	background-size:cover;
	background-repeat: no-repeat;
}

.slider-media .slick-list, .slider-media .slick-track, .slider-media .slick-slide, .slider-media .slick-slide div, .slider-media .slick-slide div .slide{
	height: 100%;
}


/*
=========================
	Photo Slider
=========================
*/

.slider-photo img{

	width:auto!important;
	height:200px;

}

.slider-photo {
  padding:10px;
  width:100%;
  height:200px;
  overflow:hidden;
  margin-top:40px;
}
.marquee{
  display:block;
position:relative;
width:100%;
height:160px;

animation:scrollin 3s linear infinite;
padding:5px;

&:hover {
    animation-play-state: running
}
}

.slider-photo img {
 /* width:150px;
  height:150px;
  */
  background-color:#f6f6f6;
/*  margin:3px; */
  float:left;
  
  max-height:100%;
  
  object-fit:cover;
}

@keyframes scrollin {
0% {left:800px;}
100% {left:-800px;}
}


/*
=========================
	Vinyle
=========================
*/


@keyframes rotating
	{
	from
		{
		transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		}
	to
		{
		transform: rotate(360deg);
		-o-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		}
	}
@-webkit-keyframes rotating
	{
	from
		{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		}
	to
		{
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		}
	}
.rotating
	{
	-webkit-animation: rotating 1s linear infinite;
	-moz-animation: rotating 1s linear infinite;
	-ms-animation: rotating 1s linear infinite;
	-o-animation: rotating 1s linear infinite;
	animation: rotating 1s linear infinite;
	}
	
.vinyle-wrapper{
	position:relative;

	display:block;
	margin:0 auto;
	width:536px;
	height:100px;
	bottom:110px;


}

.vinyle-wrapper .img-wrapper{
	position: absolute;
	display:block;
	margin:0 auto;
	width:100%;
	top:100px;
	left:-100px;
	
	/*height:323px; */
	overflow:hidden;
}

.vinyle-wrapper .img-wrapper blink{

}

.vinyle-wrapper .img-wrapper .blink-wrapper{
	position: relative;
	border-radius:50%;
	width:100%;
	height:520px;
	overflow: hidden;
}

.vinyle-wrapper img{
	position:absolute;
	top:0;
	left:0;
	pointer-events: none;

}

.vinyle-wrapper img.vitre{
	z-index:600;
	width:600px!important;
	display:none;

}

.vinyle-wrapper img.base{
	filter: brightness(.85);
	filter: contrast(1.2);
}

.vinyle-wrapper img.light{
	z-index:500;
}


/*
=========================
	Sections
=========================
*/

section#dates{
}

#dates .wrap{
	border-bottom:1px solid rgba(252,237,214,.3);
	padding:40px 0 30px 0!important;
	
}

#dates .wrap h4{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	
	border:2px solid #FCEDD6;
	background:#000;
	
	color:#FCEDD6;
	
	width:40px;
	height:40px;
	padding:12px;
	
	margin:8px 22px 0 0;
	
	font-size:22px;
	line-height: 22px;
	text-align:center;
	
	float:left;
}

#dates .wrap h3{
	font-weight: bolder;	
	line-height:12px;
	margin-top:32px;
}

#dates .wrap h3 + h3{
	font-weight: normal;
	margin-top:28px;
}

#dates .wrap h4 span{
	font-size:60%;
	display:block;	
	text-transform: uppercase;
}

.tracklist_dos span{
	display:block;
	margin-left:20px;
	font-size:14px;
	line-height:28px;
	color:#1F5D77;
}


.cards-container{
	border:1px solid rgba(0,0,0,.05);
	padding:1rem;
	background:rgba(255,255,255,.2);
	text-align:center;
}

.cards-container img{
	max-width: 100%;
}

/*
=========================
	Typographies
=========================
*/

p{
	font-size:13px;
	line-height:20px;
	text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
}

.lower{
	font-size:75%;
}

section.dark h2{
	color:#FCEDD6;
}

.light h2{
	color:#1f5577
}

section.dark h2::after{
	background:#FCEDD6;
}

.light h2::after{
	background:#1f5577;
}

h2{
	letter-spacing: .30em;
	font-size:30px;
	text-transform: uppercase;
	line-height:38px;
}

h3{
	letter-spacing: .20em;
	font-size:14px;
	text-transform: uppercase;
	line-height:24px;
}

h2::after{
	width:40px;
	height:3px;
	content:'';
	background:#FCEDD6;
	display:block;
	margin:20px auto 45px auto;
}

h2 span, h3 span{
	font-size:35%;
	letter-spacing: .40em;
}

h4{
	line-height: 26px;
	text-align: justify;
}

.aligncenter{
	text-align:center;
}

div.aligncenter{
	display:block;
	margin:0 auto;
}

/* Videos */

iframe .ytp-title-text, iframe .ytp-title-link{
	display:none!important;
	opacity:0!important;
}

/*
=========================
	Forms
=========================
*/

input[type="submit"], a.button {

	cursor: pointer;
	text-decoration: none;

	color:rgba(255,255,255,1)!important;
	background:#1f5577;
	
	text-transform: uppercase;
	font-weight:600;
	
	padding:12px 36px;
	display:inline-block;
	outline:0;
	
	letter-spacing:1px;
	font-size:14px;
	white-space:nowrap;
	
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	
	border:2px solid transparent;
}

.button.inactive, button.inactive{
	cursor: not-allowed;
}


/*
=========================
	Contact
=========================
*/


#contact a i.fa{
	font-size:32px!important;
	display:block;

	margin:15px auto;	

}

#contact a:hover, .social_wrapping a:hover i{
	background:#fff;
	color:rgba(0,0,0,.75);
	border:2px solid #1f5577;
	
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
}

#contact .social_wrapping a{
	margin-top:12px;
	display:block;
}
            
#contact a{
	display:inline-block;
	margin:6px 15px 6px 15px;
	width:60px;
	height:60px;	
	text-align:center;
	border:1px solid transparent;
	display:inline-block;
	
	line-height:37px!important;
					
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	font-size:21px!important;

	position: relative;
		
	background:#1f5577;
	color:#FCEDD6;

	-o-transition:.2s;
	-ms-transition:.2s;
	-moz-transition:.2s;
	-webkit-transition:.2s; 
	transition:0.2s;
	
	text-decoration:none;
	
	border:2px solid transparent;
}
            
            
#contact a + span{
	position:relative;

	padding-left:10px;
}     

#contact a:hover{
    color:#1f5577;
	background: #FCEDD6!important;
	-o-transition:.2s;
	-ms-transition:.2s;
	-moz-transition:.2s;
	-webkit-transition:.2s; 
	transition:0.2s;
}          




/*
=========================
	Player
=========================
*/

.tracklist_dos .active{
	font-weight: bolder;
}

.tracklist_dos span:hover{
	opacity:.5;
}

.tracklist_dos span{
	cursor: pointer;
}

.player_wrapper{
	padding:0 20px 20px 20px;
	background: rgba(255,255,255,.2);
}


/*
=========================
Youtube
=========================
*/

.wrapper {
	max-width: 680px;
	margin: 20px auto 30px auto;
	padding: 0 20px;
}

.youtube {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.youtube img {
	width: 100%;
	top: -16.82%;
	left: 0;
	opacity: 0.7;
}
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

/*
=========================
Usefull
=========================
*/

.relative{
	position: relative;
}

.hidden{
	overflow: hidden;
}

.none{
	display:none;
}