@font-face {
     font-family: padaloma;
     src: url(padaloma.italic.woff);
}

body {
color: #000;
background-color: #fff;
/* background-repeat: repeat;
background-image: url('../siteimages/scrolbg.jpg'); */
font-family: 'Roboto Condensed', sans-serif;
}

.radius10 {
border-radius: 10px;
}

.navbar-sticky-top{
position: sticky;
top:0;
z-index: 1000;
}
.navbar-custom {
    color: #FFFFFF;
    font-size: 1.2em;
}
.navbar-custom .active {
    color: #AC73C9;
	background-color: #e59f60;
}

#fpheader{
margin-top: -20px;
height: 400px;
background-color: #000000;
background-image: url("../siteimages/fpimage.jpg");
background-position: top right;
background-repeat: no-repeat;
}
#fpheader h1{
display: block;
margin-left: 20px;
margin-top: 10px;
color: #C0C0C0;
font-size: 25px;
font-weight: normal;
}
#fpheader h2{
display: block;
margin-left: 20px;
margin-top: 215px;
color: #AC73C9;
font-size: 20px;
font-weight: normal;
}
#fpheader #outlaw{
position: absolute;
width: 100%;
top: 130px;
left: 0px;
color: white;
font-size: 70px;
font-weight: normal;
font-family: 'Goudyhh Stout', 'Asset', cursive;
background: rgba(0,0,0,0.2);
}
#fpheader #entertainment{
position: absolute;
color: white;
font-size: 40px;
font-weight: normal;
font-family: 'Goudyh Stout', 'Asset', cursive;	
}

#header{
margin-top: -20px;
height: 230px; 
background-color: #000000;
background-image: url("../siteimages/smheaderimage.jpg");
background-position: top right;
background-repeat: no-repeat;
}
#header h2{
display: block;
margin-left: 20px;
margin-top: 0px;
color: #AC73C9;
font-size: 20px;
font-weight: normal;
padding-top: 140px;
padding-bottom: 20px;
}
#header #outlaw{
position: absolute;
width: 100%;
top: 130px;
left: 0px;
color: white;
font-size: 70px;
font-weight: normal;
font-family: 'Goudyh Stout', 'Asset', cursive;
background: rgba(0,0,0,0.2);
}
#header #entertainment{
font-size: 50px;
font-weight: normal;
font-family: 'Goudyh Stout', 'Asset', cursive	
}

#introtext{
margin: 0px;
background-color: #000000;
}
#introtext p {
font-size: 1.2em;
color: #fff;
text-align: justify;
padding: 10px 0 10px 0;
}
#introtext h1 {
color: #e59f60;
}



#linkbar{
margin-top: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
#linkbar .well {
	background-color: #000;
	color: #fff;
	margin: 0px auto 0 auto;
	width: 80%;
	padding-top: 7px;
	padding-bottom: 7px;
}
#linkbar h2 {
padding:0;
margin:0;
color: white;
line-height: 90%;
font-size: 20px;
font-weight: normal;
}
#linkbar h1 {
padding-top: 0px;
padding-bottom: 0px;
margin:0;
color: #e59f60;
display:block;
line-height: 90%;
font-size: 40px;
font-weight: bold;
}
#linkbar input {
color: #000;
margin-top: 3px;
}
#linkbar .btn {
color: #444;
margin-top: 3px;
}

#socialicons{
width:100%;
margin-top: 14px;
}
#socialicons ul {
text-align: center;
padding-left: 0;
padding-right: 0;
}
#socialicons ul li{
display :inline-block;
margin-left: 4px;
margin-right: 4px;
}
#socialicons img{
width: 45px;
}


#video{
margin-top: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
#video h1 {
color: #e59f60;
}


 		/*  VIDEO PLAYER CONTAINER */
  		.vid-container {
		    position: relative;
		    padding-bottom: 52%;
		    padding-top: 30px; 
		    height: 0; 
		}
		 
		.vid-container iframe,
		.vid-container object,
		.vid-container embed {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}

		/*  VIDEOS PLAYLIST */
		.vid-list-container {
			width: 87%;
			overflow: hidden;
			margin-top: 0px;
			margin-left:6%;
		}

		.vid-list {
			width: 3000px; /* 150 x number of videos */
			position: relative;
			top:0;
			left: 0;
		}

		.vid-item {
			display: block;
			width: 148px;
			float: left;
			margin: 0;
			padding: 10px;
		}

		.thumb {
			/*position: relative;*/
			overflow:hidden;
			height: 84px;
		}

		.thumb img {
			width: 100%;
			position: relative;
			top: -13px;
		}

		.vid-item .desc {
			color: #21A1D2;
			font-size: 15px;
			margin-top:3px;
			text-align: center;
		}

		.vid-item:hover {
			background: #eee;
			cursor: pointer;
		}
		.arrows {
			position:relative;
			width: 100%;
		}

		.arrow-left {
			position: absolute;
			padding: 15px;
			left: -5px;
			top: -117px;
			z-index: 99;
			cursor: pointer;
		}

		.arrow-right {
			position: absolute;
			padding: 15px;
			right: -5px;
			top: -117px;
			z-index:100;
			cursor: pointer;
		}




#temoignages{
margin-top: 0px;
background-color: #000000;
padding-top: 30px;
padding-bottom: 30px;
}
#temoignages p {
font-size: 1.2em;
color: #fff;
text-align: center;
font-style: italic;
}


#quotes{
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #000;
}
#quotes h1 {
color: #e59f60;
}

#quotes .soundtext {
color: #fff;
text-align: left;
}
ul.flat {
 list-style-type:none;
 padding-left:0px;
}

ul.flat li,
ul.graphic li {
 padding-bottom:1px;

}

ul.flat li a {
 display:inline-block;
 padding:2px 4px 2px 4px;
}

ul.graphic {
 list-style-type:none;
 padding-left:0px;
 margin-left:0px;
}

/* background-image-based CSS3 example */

ul.graphic {
 list-style-type:none;
 margin:0px;
 padding:0px;
}

ul.graphic li {
 margin-bottom:2px;
}

ul.graphic li a,
ul.graphic li a.sm2_link {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 display:inline-block;
 padding-left:22px;
 min-height:16px;
 vertical-align: middle;
 background-color:#ddd; /*#336699; */
 border-radius:3px;
 padding:3px 3px 3px 25px;
 /*min-width:19em;
 _width:19em;  IE *6 */
 width: 80%;
 text-decoration:none;
 font-weight:normal;
 color:#333;
 text-align: left;
}

ul.graphic li a.sm2_link {
 /* safari 3.1+ fun (or, proprietary crap. TBD.) */
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s linear;
 -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
  -o-transition-property: background-color; /* opera 10.5 */
  -o-transition-duration: 0.15s;
}

ul.graphic li a, /* use a.sm2_link {} if you want play icons showing only if SM2 is supported */
ul.graphic li a.sm2_paused:hover,
ul.graphic li a.sm2_link:hover {
 background-image:url("../soundmanager/icon_play.png");
 background-position:3px 50%;
 background-repeat:no-repeat;
 _background-image:url("../soundmanager/icon_play.gif"); /* IE 6 */
}

ul.graphic li a.sm2_link:hover {
 /* default hover color, if you'd like.. */
 background-color:#003366;
 color:#fff;
}

ul.graphic li a.sm2_paused {
 background-color:#999;
}

ul.graphic li a.sm2_paused:hover {
 background:#003366 url("../soundmanager/icon_play.png") no-repeat 3px 50%;
 _background-image:url("../soundmanager/icon_play.gif");
}

ul.graphic li a.sm2_playing,
ul.graphic li a.sm2_playing:hover {
 background:#333 url("../soundmanager/icon_pause.png") no-repeat 3px 50%;
 _background-image:url("../soundmanager/icon_pause.gif");
 text-decoration:none;
 color: #ddd;
 border: 0px solid white;
}

/* hide button while playing?
ul.graphic li a.sm2_playing {
 background-image:none;
}
*/

body #sm2-container object,
body #sm2-container embed {
 /*
  flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
  include body prefix to ensure override of flashblock.css.
 */

 left:-9999em;
 top:-9999em;
}

/* flat CSS example */

ul.flat a.sm2_link {
 /* default state: "a playable link" */
 border-left:6px solid #999;
 padding-left:4px;
 padding-right:4px;
}

ul.flat a.sm2_link:hover {
 /* default (inactive) hover state */
 border-left-color:#333;
}


ul.flat a.sm2_playing {
 /* "now playing" */
 border-left-color:#6666ff;
 background-color:#000;
 color:#fff;
 text-decoration:none;
}

ul.flat a.sm2_playing:hover {
 /* "clicking will now pause" */
 border-left-color:#cc3333;
}

ul.flat a.sm2_paused {
 /* "paused state" */
 background-color:#666;
 color:#fff;
 text-decoration:none;
}

ul.flat a.sm2_paused:hover {
 /* "clicking will resume" */
 border-left-color:#33cc33;
}



#pictures{
margin-top: 30px;
background-color: #000;
}
/* fluid 5 columns */
 .grid-sizer,
 .grid-item { 
	width: 16.6%; 
}
#pictures img {
width: 100%;
}



#infobar {
margin-top: 30px;
text-align: center;
}

#infobar table {
margin-left: auto;
margin-right: auto;
width: 220px;
}


#infobar .icon {
height: 90px;	
}

#infobar .icon img {
width: 70px;
height: 90px;
}
#infobar .heading{
height: 25px;
}
#infobar .heading h3{
color: #AC73C9;
font-size: 25px;
font-weight: normal;
margin: 0 0 5px 0;
padding: 0;
}
#infobar .text {
height: 40px;
}
#infobar .text p {
color: #666666;
margin: 0 auto 0 auto;
text-align: center;
font-size: 11px;
font-weight: bold;
font-family: Ubuntu;
}
#infobar .text2 {
height: 80px;
}
#infobar .text2 p {
color: #666666;
margin: 0 auto 0 auto;
text-align: center;
font-size: 11px;
font-weight: bold;
font-family: Ubuntu;
}

#infobar .button {
height: 40px;
}
#infobar .button a {
display: block;
margin: 1px auto 0 auto;
text-decoration: none;
width: 50%;
background-color: black;
color: white;
padding: 2px 0 2px 0;
font-size: 17px;
font-weight: normal;
}
#infobar .button a:hover {
color: #AC73C9;
}
#infobar .nextconcerts {
text-align: center;
font-size: 11px;
font-weight: bold;
font-family: Ubuntu;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
#infobar .nextconcerts th {
width: 50%;
color: #666666;
border-right: 2px solid #666666;
text-align: right;
padding: 4px 5px 3px 5px;
}
#infobar .nextconcerts td {
color: #666666;
font-weight: bold;
text-align: left;
padding: 4px 5px 3px 5px;
} 




#reservebar{
margin-top: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
#reservebar .well {
	background-color: #000;
	color: #fff;
	margin: 0px auto 0 auto;
	width: 80%;
	padding-top: 7px;
	padding-bottom: 7px;
}
#reservebar h2 {
padding:0;
margin:0;
color: white;
line-height: 90%;
font-size: 20px;
font-weight: normal;
}
#reservebar h1 {
padding-top: 0px;
padding-bottom: 0px;
margin:0;
color: #e59f60;
display:block;
line-height: 90%;
font-size: 40px;
font-weight: bold;
}
#reservebar h3 {
padding:20px;
margin:0;
color: black;
font-size: 30px;
font-weight: normal;
text-align: center;
}





#footer{
background-color: #000000;
padding-bottom: 10px;
padding-top: 10px;
/*height: 200px;*/
}
#footer p {
font-size: 1em;
color: #fff;
text-align: center;
padding: 0;
margin: 0;
}

#footer .footer-b h2{ /* inscription section */
display: block;
padding: 0;
margin: 0;
color: #e59f60;
font-size: 20px;
font-weight: normal;
}
#footer .footer-b p{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#footer .footerform{
width: 80%;
margin: 10px auto 5px auto;
text-align: center;
}

#footer .footer-c .bottomlogo{ /* OUTLAW */
text-align: center;
}

#footer .footer-c  h1{
width: 100%;
padding: 0;
margin: 0;
color: white;
font-size: 30px;
font-weight: normal;
font-family: 'Goudyh Stout', 'Asset', cursive;
background: rgba(0,0,0,0.2);
}
#footer .footer-c h2{
display: block;
padding: 0;
margin: 0;
color: #AC73C9;
font-size: 20px;
font-weight: normal;
}
#footer .footer-c p{
}
#footer .footersiteweb {
text-align: center;
}
#footer .footersiteweb h1 {
font-family: padaloma;
font-size: 25px;
color: #F06520;
padding: 0;
margin: 20px 0 0 0;
}
#footer .footersiteweb h2 {
font-size: 17px;
color: #fff;
padding: 0;
margin: 0 0 5px 0;
}




/* Carousel for temoignages */
#TemCarousel  {
width:  100%;
vertical-align: middle;
}
#TemCarousel .carousel-control img {
	margin-top: 0px;
}
#TemCarousel .left img {
	margin-left: -30px;
}
#TemCarousel .right img {
	margin-right: -30px;
}
#TemCarousel .item {
  background-color: #000;
}
#TemCarousel .content {
  height: 60px;
}

#TemCarousel .content p{
vertical-align: middle;
}
#TemCarousel .carousel-control.left, #TemCarousel .carousel-control.right{ 
    background: none !important;
    filter: progid:none !important;>
}



/* Extra extra Small devices (phones, 479px and down) */
@media (max-width: 479px) { 
#fpheader{
margin-top: -30px;
}
	#fpheader #outlaw{
		font-size: 35px;
		top: 110px;
	}
	#header #outlaw{
		font-size: 35px;
		top: 130px;
	}
	#fpheader #entertainment{
		font-size: 13px;
		top: 160px;
		margin-left: 5px;
	}
	#socialicons img{
		width: 41px ;
		height: 37px;
	}
	.grid-sizer, .grid-item { width: 50%; }
	.quote-sizer, .quote-item { width: 100%; }
	.danse-sizer, .danse-item { width: 100%; }
	.musique-sizer, .musique-item { width: 100%; }
}



/* Extra Small devices (phones, 480px and up) */
@media (min-width: 480px) { 
#fpheader{
margin-top: -30px;
}
	#fpheader #outlaw{
		font-size: 50px;
		top: 120px;
	}
	#header #outlaw{
		font-size: 50px;
		top: 130px;
	}
	#fpheader #entertainment{
		font-size: 19px;
		top: 175px;
		margin-left: 5px;
	}
	.grid-sizer, .grid-item { width: 33.3%; }
	.quote-sizer, .quote-item { width: 50%; }
	.danse-sizer, .danse-item { width: 50%; }
	.musique-sizer, .musique-item { width: 50%; }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

#fpheader{
margin-top: -20px;
}

	#fpheader #outlaw{
		font-size: 65px;
		top: 100px;
	}
	#header #outlaw{
		font-size: 65px;
		top: 130px;
	}
	#fpheader #entertainment{
		font-size: 26px;
		top: 170px;
		margin-left: 5px;
	}
	.grid-sizer, .grid-item { width: 25%; }
	.quote-sizer, .quote-item { width: 50%; }
	.danse-sizer, .danse-item { width: 33.3%; }
	.musique-sizer, .musique-item { width: 33.3%; }
	
	#footer p {
		font-size: 1em;
	}
	#footer .footersiteweb h1 {
		margin-top: 110px;
	}
	#footer .footersiteweb h2 {
		margin-top: 1px;
	}


 }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	#fpheader #outlaw{
		font-size: 75px;
		top: 90px;
	}
	#header #outlaw{
		font-size: 70px;
		top: 130px;
	}
	#fpheader #entertainment{
		font-size: 30px;
		top: 170px;
		margin-left: 5px;
	}
	.grid-sizer, .grid-item { width: 20%; }
	.quote-sizer, .quote-item { width: 33.3%; }
	.danse-sizer, .danse-item { width: 25%; }
	.musique-sizer, .musique-item { width: 25%; }

	#footer p {
		font-size: 1em;
		text-align: justify;
	}
	#footer .footer-b h2{ /* inscription */
		margin: 45px 0 0 0px;
	}
	#footer .footer-b p{
		line-height: 100%;
	}
	#footer .footerform{
		width: 90%;
		margin: 10px auto 5px auto;
		text-align: center;
	}

	#footer .footer-c .bottomlogo{ /* OUTLAW */
		float: right; 
		margin-right: 10%;
	}

	#footer .footer-c  h1{
		width: 100%;
		padding: 0;
		margin: 0;
		font-size: 33px;
	}
	#footer .footer-c h2{
		padding: 0;
		margin: 0 0 10px 30px;
		font-size: 20px;
	}
	#footer .footer-c p{
		padding-left: 70px;
	}
	#footer .footersiteweb h1 {
		font-size: 25px;
		display: inline-block;
		padding:5px 0 5px 0;
		margin-top: 20px;
	}
	#footer .footersiteweb h2 {
		font-size: 17px;
		display: inline-block;
		padding:0px 0 0px 12px;
		margin-top: 0px;
	}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#fpheader #outlaw{
		font-size: 98px;
		top: 80px;
	}
	#header #outlaw{
		font-size: 85px;
		top: 130px;
	}
	#fpheader #entertainment{
		font-size: 39px;
		top: 185px;
		margin-left: 15px;
	}
	.grid-sizer, .grid-item { width: 16.6%; }
	.quote-sizer, .quote-item { width: 25%; }
	.danse-sizer, .danse-item { width: 20%; }
	.musique-sizer, .musique-item { width: 20%; }
	#footer .footer-c  h1{
		font-size: 40px;
	}
	#footer .footer-c  h2{
		font-size: 20px;
	}

}

/* Extra Large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) { 
	#fpheader #outlaw{
		font-size: 118px;
		top: 65px;
	}
	#header #outlaw{
		font-size: 90px;
		top: 130px;
	}
	#fpheader #entertainment{
		font-size: 46px;
		top: 185px;
		margin-left: 30px;
	}
	.grid-sizer, .grid-item { width: 12.5%; }
	.quote-sizer, .quote-item { width: 20%; }
	.danse-sizer, .danse-item { width: 16.6%; }
	.musique-sizer, .musique-item { width: 16.6%; }

}

/* MODAL STYLES */
.modal-header {
background-color: #fff;
text-align: center;
}
.modal-title {
font-size: 2em;
color: #2e2e2e;
}
.modal-body {
background-color: #e6b993;
}
.modal-body button {
background-color: #997c62;
color: #fff;
}
.modal-body button:hover {
background-color: #252525;
color: #fff;
}
.modal-footer {
background-color: #fff;
}
.modal-footer button {
background-color: #997c62;
color: #fff;
}
.modal-footer button:hover {
background-color: #252525;
color: #fff;
}
.modal-body .panel-heading {
background-color: #997c62;
color: #fff;
font-size: 1.2em;
}


#confirmModal .modal-body {
background-color: #c4fab9;
}
#errorModal .modal-body {
background-color: #fa9696;
}
#notactiveModal .modal-body {
background-color: #fa9696;
}
#passsentModal .modal-body {
background-color: #fa9696;
}
#confirmModal, #errorModal, #notactiveModal, #passsentModal   h3 {
text-align:center;
}



/* AGENDA PAGE */

.affiche {
}
.affiche table {
width: 100%;
background-color: #000;
color: #fff;
margin-top: 20px;
margin-bottom: 20px;

}
.affiche .date {
text-align: center;
font-size: 2.4em;
margin-bottom: 5px;
}
.affiche img {
width: 80%;
margin-left: 10%
}
.affiche .location {
text-align: center;
font-size: 1.4em;
margin-top: 5px;
}


/* GALLERY PAGE */
#galerie{
background-color: #000;
}

#galerie img {
width: 100%;
}

.quote-item {
padding: 5px;
}

/* DANSES PAGE */
.danse-item .well {
margin: 3px;
padding: 2px;
}
.line {
background-color: #fa9696;
}
.ccs {
background-color: #c5ccfa;
}
.country {
background-color: #c4fab9;
}
.dancebut {
background-color: #ddd;
}

#danses h2 {
text-align: center;
margin: 0;
padding: 0;
font-size: 1.4em;
}
#danses h3 {
text-align: center;
margin: 0;
padding: 0;
font-size: 1.2em;
}
#danseorder h3 {
text-align: center;
}
#danseorder p {
text-align: center;
}
#danseorder .buttons {
text-align: center;
margin-bottom: 10px;
}

#playlist .count {
font-size: 1.4em;
}

#playlist .buttons {
text-align: center;
margin-bottom: 10px;
line-height: 30px;
}


/* MUSIQUES PAGE */
.musique-item .well {
margin: 3px;
padding: 2px;
}
.rock {
background-color: #fa9696;
}
.country {
background-color: #c4fab9;
}
.musicbut {
background-color: #ddd;
}
.playlist {
background-color: #ffff00;
}


#musiques h2 {
text-align: center;
margin: 0;
padding: 0;
font-size: 1.4em;
}
#musiques h3 {
text-align: center;
margin: 0;
padding: 0;
font-size: 1.2em;
}
#musiques h4 {
text-align: center;
margin: 0;
padding: 0;
font-size: 0.9em;
}
#musiquesorder h3 {
text-align: center;
}
#musiquesorder .buttons {
text-align: center;
margin-bottom: 10px;
}