@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");

body{
	background: rgb(254,200,23);
	background-color:#fff;
	/* background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(211,98,81,1) 50%); */
	color:#fff;
	overflow-x: hidden;
}

div{
	z-index:10;
}

.container-fluid {
	padding-right: 0px !important;
	padding-left: 0px !important;
	margin-right: 0px !important;
	margin-left: 0px !important;
}

.row {
	margin-right: 0px !important;
	margin-left: 0px !important;
}

.sl-header{
	position: relative;
	top:0px;
	/* min-height:650px; */
	margin:0px;
	padding-top:30px;
	padding-bottom:30px;
	background-color: #8215b4;
	background: linear-gradient(90deg, rgba(252, 199, 66, 1) 14%, rgba(130, 21, 180, 1) 43%);
	-webkit-border-bottom-right-radius: 2vw;
	-moz-border-radius-bottomright: 2vw;
	border-bottom-right-radius: 2vw;
	z-index:3;
	overflow-y:hidden;
}

.sl-header-circle{
	position:absolute;
	top:-200px;
	/* left:-500px; */
	right:20%;
	float: left;
	max-width: 1500px;
	max-height: 1500px;
	width:1000%;
	height:1000%;
	margin: 20px;
	shape-outside: circle();
	clip-path: circle();
	background: linear-gradient(135deg, rgba(252, 199, 66, 1) 15%, rgba(130, 21, 180, 1) 63%);
	z-index:1;
}

.sl-logo{
	width:200px;
	max-width:250px;
}

.sl-menu-item{
	position: relative;
	display:inline-block;
	padding:20px 10px;
	color:#fff;
	font-weight: bold;
	font-size:16px;
	text-transform: uppercase;
	font-family: Lato;
	cursor: pointer;
}

.sl-menu-item:hover{
	color:#FCC742;
}

.sl-title{
	position:relative;
	display:inline-block;
	margin-top: 10px;
	padding:4px 7px 3px 5px;
	background-color: #8215B4;
	color:#fff;
	font-weight: bold;
	font-size:14px;
	text-transform: uppercase;
	font-family: Lato;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
}

.sl-about .sl-title{
	background-color: #8215B4;
	color:#FFF;
	font-size:18px;
}

.sl-nowplaying{
	min-height: 200px;
	background-color: #f6f9fc;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	border-bottom-right-radius: 20px;
	background: linear-gradient(180deg, rgba(239, 242, 244, 1) 50%, rgba(249, 252, 255, 1) 50%);
	overflow:none;
}

.sl-play{
	position:absolute;
	bottom:26px;
	left:20px;
	width:50px;
	height:50px;
	border-radius: 50%;
	border: 3px solid #8215B4;
	padding:12px 0 0 18px;
	cursor:pointer;
	color:#8215B4;
}
.sl-play:hover{
	position:absolute;
	bottom:23px;
	left:17px;
	width:56px;
	height:56px;
	border-radius: 50%;
	border: 3px solid #8215B4;
	padding:15px 0 0 21px;
	background-color:#8215B4;
	color:#fff;
}

.sl-trackinfo-station{
	font-size:24px;
	font-weight: bold;
	line-height: 20px;
}

.sl-trackinfo{
	display:block;
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:50%;
	padding:25px 0px 0px 80px;
	font-size:14px;
	text-transform: uppercase;
	font-family: Lato;
	cursor:pointer;
	color:#8215B4;
}

.sl-about{
	position:relative;
	display:block;
	min-height:550px;
	background-color: #FFF;
	/* background: rgb(252, 199, 66);
	background: linear-gradient(39deg, rgba(251, 191, 42, 1) 0%, rgba(252, 199, 66, 1) 100%); */
	overflow:none;
	z-index:3;
	-webkit-border-bottom-right-radius: 2vw;
	-moz-border-radius-bottomright: 2vw;
	border-bottom-right-radius: 2vw;
}

.sl-about-first{
	padding:30px 0px 20px 0px;
}

.sl-about-second{
	color:#000;
}

.sl-about-second h2{
	color:#FCC742;
	margin:0px 0px 10px 0px;
	font-size:22px;
	text-transform: uppercase;
	font-family: Lato;
	font-weight: bold;
}

.sl-about-second p:first-of-type{
	font-weight: bold;
}

.filter-gradient-blue:before{
	background: #8215B4;
	background-image: linear-gradient(to bottom left, #8215B4 0%, #8215B4 100%);
	
	position: absolute;
	left: 15px;
	top: 0;
	width: calc(100% - 30px);
	height: calc(100% - 20px);
	display: block;
	z-index: 3;
	content: "";
	opacity: .3;
}

.sl-photo{
	display:block;
	width:100%;
	height:100%;
	margin:0px 0px 20px 0px;
	padding:0px;
	min-height: 400px;
	background-image: url('/assets/img/5.png');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
}

.sl-footer{
	position: relative;
	display:block;
	z-index:4;
	/* background: rgb(130, 21, 180);
	background: linear-gradient(39deg, rgba(130, 21, 180, 1) 0%, rgba(211,98,81,1) 100%); */
	background-color:#fff;
	min-height:250px;
	background-image:url('footer.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.sl-footer-logo{
	margin: calc(50% - 50px);
	width:100px;
}

.sl-footer-menu{
	list-style: none;
	padding:15px 0px 15px 0px;
}
.sl-footer-menu li{
	padding:5px 0px 5px 0px;
	color:#fff;
	cursor:pointer;
	text-decoration: none;
}

.sl-social{
	display:inline-block;
	width:40px;
	height:40px;
	border-radius: 50%;
	background: rgb(130, 21, 180);
	background: linear-gradient(210deg, rgba(252, 199, 66, 1) 0%, rgba(148,20,128,0) 90%);
	margin-top:calc(50% - 40px);
	padding:10px 0px;
	text-align: center;
	color:#fff;
	cursor:pointer;
}
.sl-social:hover{
	background: linear-gradient(210deg, rgba(252, 199, 66, 1) 10%, rgba(148,20,128,0) 100%);
}

/*carrousel*/
#carrousel {
	width:100%;
	max-width:700px;
	height:400px;
	margin: 0;
	position:relative;
	overflow:hidden;	
}

@media only screen and (max-width: 768px) {
	#carrousel {
		height:400px;	
	}
	.sl-header-circle{
		top:-300px;
		right:0px;
		display:block;
	}
	.sl-header{
		background: linear-gradient(39deg, rgba(130, 21, 180, 1) 0%, rgba(252, 192, 42, 1) 100%);
	}
	.sl-top-menu{
		display:none;
	}
	.sl-footer-logo {
		margin: 20px;
	}
	.sl-social {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.sl-footer{
		text-align: center;
		height:600px;
	}
	#carrousel-nav{
		display:none;
	}
	#carrousel{
		max-height:200px;
	}
	.filter-gradient-blue:before{
		opacity:0;
	}
}

@media only screen and (min-width: 768px) {
	#carrousel {
		height:200px;	
	}
	.sl-trackinfo{
		font-size:10px;
	}
	.sl-header-circle{
		top:-200px;
		right:20%;
	}
	.sl-top-menu{
		display:block;
	}
}

@media only screen and (min-width: 1000px) {
	#carrousel {
		height:300px;	
	}
}

@media only screen and (min-width: 1100px) {
	#carrousel {
		height:320px;	
	}
	.sl-trackinfo{
		font-size:12px;
	}
}

@media only screen and (min-width: 1200px) {
	#carrousel {
		height:340px;	
	}
	.sl-trackinfo{
		font-size:14px;
	}
}

@media only screen and (min-width: 1300px) {
	#carrousel {
		height:370px;	
	}
}

@media only screen and (min-width: 1400px) {
	#carrousel {
		height:400px;	
	}
}

.slide {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	max-width:700px;
	height:400px;
	-webkit-border-bottom-right-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	border-bottom-right-radius: 20px;
}

/* @media screen and (min-width: 800px) {
	  #carrousel {
		  width:350px;
		height:200px;		  
	  }
	  .slide {
		width:350px;
		height:200px;  
	  }
	}
	
@media screen and (min-width: 1000px) {
	  #carrousel {
		  width:560px;
		height:320px;		  
	  }
	  .slide {
		width:560px;
		height:320px;  
	  }
	}

@media screen and (min-width: 1200px) {
	  #carrousel {
	  	width:700px;
		height:400px;		  
	  }
	  .slide {
		width:700px;
		height:400px;  
	  }
	} */

.img-slide{
	width:100%;
	max-width:700px;
}

.carrousel-picto{
	position:absolute;
	display:none;
	left:45%;
	bottom:50px;
	padding:0px;
	margin:0px;
}

.carrousel-picto li{
	display:inline-block;
	background-color:#ffffff;
	border-radius:50%;
	width:10px;
	height:10px;
	margin:6px;
	cursor:pointer;
	
}
.carrousel-picto span{display: block;color: transparent;}
.carrousel-picto li:hover, .carrousel-picto li.active{background-color:#2980b9;}

#carrousel-nav .prev{
	width:30px;
	height:30px;
	background-color:#8215B4;
	color:#fff;
	padding:6px 9px;
	border-radius: 20px;
	bottom:30px;
	right: 70px;
	position: absolute;
	cursor:pointer;
	opacity:0.8;
}
#carrousel-nav .next{
	width:30px;
	height:30px;
	background-color:#8215B4;
	color:#fff;
	padding:6px 9px;
	border-radius: 20px;
	bottom:30px;
	right: 30px;
	position: absolute;
	cursor:pointer;
	opacity:0.8;
}

#carrousel-nav .prev:hover,#carrousel-nav .next:hover {opacity: 1;}

.mt-2{
	margin-top:30px;
}