/* ==========================================================================
   AERIS NETWORK CSS
   ========================================================================== */
html {overflow-y: scroll;}

body {
	background: url(/assets/img/bg-benevoles.jpg) repeat;
	background-attachment: fixed;
}

body.la-course-de-nuit {
	background-image: url(/assets/img/bg-course-de-nuit-small.png);
}

body.course-de-nuit-quebec-2016,
body.course-de-nuit-montreal-2016 {
	background-image: url(/assets/img/bg-course-de-nuit-2016.jpg);
}

#main {
  background-color: rgb(250,243,237);
	background-color: rgba(250,243,237, 0.9);
	padding-top: 15px;
  margin-top: 110px;
  padding-bottom: 15px;
}
.slogan {
  padding-left: 120px;
  font-family: 'Quicksand', sans-serif;
}
.slogan h1 {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 0;
  border-bottom: 1px solid #3b3530;
}
.slogan h2 {
  font-weight: normal;
  font-size: 25px;
  margin-top: 0;
}
.banner.secondaire {
	width: 100%;
	background-color: #0ca0da;
}
.banner.recompense {
  width: 100%;
  background-color: #a1cc3a;
}
.banner.cegep {
	width: 100%;
	background-color: #a6ce38;
}
.panel-gdpl {
  border: none;
}
.panel-gdpl .panel-heading {
  height: 80px!important;
  color: white;
  background: #e86700; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4NjcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmOTYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWM3MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #e86700 0%, #ff9600 70%, #fec701 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e86700), color-stop(70%,#ff9600), color-stop(100%,#fec701)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #e86700 0%,#ff9600 70%,#fec701 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #e86700 0%,#ff9600 70%,#fec701 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #e86700 0%,#ff9600 70%,#fec701 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #e86700 0%,#ff9600 70%,#fec701 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e86700', endColorstr='#fec701',GradientType=0 ); /* IE6-8 */
}
.panel-gdpl .panel-heading h3 {
  font-weight: normal;
}
.carousel-inner>.item>img {
  width: 100%;
}
.carousel-inner {
  height: 350px;
}
.carousel-caption {
  top: 250px;
  bottom: auto;
}



/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.navbar-header .navbar-text {
	position: relative;
	left: 90px;
}
.navbar-toggle {
	z-index: 9999;
}
.navbar.navbar-inverse {
	background-color: #3b3530;
	background-image: none;
  border-radius: 0px;
}
.navbar-inverse .navbar-text {
	color: #a89f87;
}
.navbar-inverse .navbar-nav>li>a {
	color: #a89f87;
}
/*#logo {
	background: url(/assets/img/sprites-header.png) no-repeat -222px -1715px;
	width: 126px;
	height: 153px;
	position: absolute;
	top: 0px;
	z-index: 1000;
	text-indent: -9999px;
}*/
#alerts {
  display: none;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
  background-color: #A89F8D;
  color: #fff;
}
.navbar-inverse .navbar-toggle {
  border-color: #A89F8D;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #A89F8D;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #fff;
}


/* ==========================================================================
   Logo animation
   ========================================================================== */
div#logo {
	position: absolute;
	/*width: 126px;*/
	top: -1px;
	z-index: 1000;
	list-style: none;
	margin: 0;
	padding: 0;
	-webkit-animation-duration: 1.7s;
	-moz-animation-duration: 1.7s;
	-ms-animation-duration: 1.7s;
	-o-animation-duration: 1.7s;
	animation-duration: 1.7s;
}
div#logo div.left {
	display: inline-block;
	-webkit-animation: unfold-left 0.75s ease 0s infinite;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-play-state:paused;
	-moz-animation: unfold-left 0.75s ease 0s infinite;
	-moz-animation-iteration-count: 1;
	-moz-animation-play-state:paused;
	-ms-animation: unfold-left 0.75s ease 0s infinite;
	-ms-animation-iteration-count: 1;
	-ms-animation-play-state:paused;
	-o-animation: unfold-left 0.75s ease 0s infinite;
	-o-animation-iteration-count: 1;
	-o-animation-play-state:paused;
	animation: unfold-left 0.75s ease 0s infinite;
	animation-iteration-count: 1;
	animation-play-state:paused;
}
div#logo div.right {
	display: inline-block;
	-webkit-animation: unfold-right 0.75s ease 0s infinite;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-play-state:paused;
	-moz-animation: unfold-right 0.75s ease 0s infinite;
	-moz-animation-iteration-count: 1;
	-moz-animation-play-state:paused;
	-ms-animation: unfold-right 0.75s ease 0s infinite;
	-ms-animation-iteration-count: 1;
	-ms-animation-play-state:paused;
	-o-animation: unfold-right 0.75s ease 0s infinite;
	-o-animation-iteration-count: 1;
	-o-animation-play-state:paused;
	animation: unfold-right 0.75s ease 0s infinite;
	animation-iteration-count: 1;
	animation-play-state:paused;
}

@-webkit-keyframes unfold-left {
    from {
       -webkit-transform: perspective(300) rotateY(90deg);
       -webkit-transform-origin: 100% 100%;
    }
    to {
       -webkit-transform: perspective(300) rotateY(0deg);
        -webkit-transform-origin: 100% 100%;
    }
}
@-webkit-keyframes unfold-right {
    0% {
       -webkit-filter: brightness(30%);
       -webkit-transform: perspective(300) rotateY(-90deg);
       -webkit-transform-origin: 0% 0%;
    }
    100% {
    	-webkit-filter: brightness(100%);
       -webkit-transform: perspective(300) rotateY(0deg);
        -webkit-transform-origin: 0% 0%;
    }
}
@-moz-keyframes unfold-left {
    from {
       -moz-transform: perspective(300) rotateY(90deg);
       -moz-transform-origin: 100% 100%;
    }
    to {
       -moz-transform: perspective(300) rotateY(0deg);
        -moz-transform-origin: 100% 100%;
    }
}
@-moz-keyframes unfold-right {
    0% {
       -moz-filter: brightness(30%);
       -moz-transform: perspective(300) rotateY(-90deg);
       -moz-transform-origin: 0% 0%;
    }
    100% {
    	-moz-filter: brightness(100%);
       -moz-transform: perspective(300) rotateY(0deg);
        -moz-transform-origin: 0% 0%;
    }
}
@-ms-keyframes unfold-left {
    from {
       -ms-transform: perspective(300) rotateY(90deg);
       -ms-transform-origin: 100% 100%;
    }
    to {
       -ms-transform: perspective(300) rotateY(0deg);
        -ms-transform-origin: 100% 100%;
    }
}
@-ms-keyframes unfold-right {
    0% {
       -ms-filter: brightness(30%);
       -ms-transform: perspective(300) rotateY(-90deg);
       -ms-transform-origin: 0% 0%;
    }
    100% {
    	-ms-filter: brightness(100%);
       -ms-transform: perspective(300) rotateY(0deg);
        -ms-transform-origin: 0% 0%;
    }
}
@-o-keyframes unfold-left {
    from {
       -o-transform: perspective(300) rotateY(90deg);
       -o-transform-origin: 100% 100%;
    }
    to {
       -o-transform: perspective(300) rotateY(0deg);
        -o-transform-origin: 100% 100%;
    }
}
@-o-keyframes unfold-right {
    0% {
       -o-filter: brightness(30%);
       -o-transform: perspective(300) rotateY(-90deg);
       -o-transform-origin: 0% 0%;
    }
    100% {
    	-o-filter: brightness(100%);
       -o-transform: perspective(300) rotateY(0deg);
        -o-transform-origin: 0% 0%;
    }
}
@keyframes unfold-left {
    from {
       transform: perspective(300) rotateY(90deg);
       transform-origin: 100% 100%;
    }
    to {
       transform: perspective(300) rotateY(0deg);
        transform-origin: 100% 100%;
    }
}
@keyframes unfold-right {
    0% {
       filter: brightness(30%);
       transform: perspective(300) rotateY(-90deg);
       transform-origin: 0% 0%;
    }
    100% {
    	filter: brightness(100%);
       transform: perspective(300) rotateY(0deg);
        transform-origin: 0% 0%;
    }
}
.play{
    -webkit-animation-play-state:running!important;
    -moz-animation-play-state:running!important;
    -o-animation-play-state:running!important;
    animation-play-state:running!important;
}


/* ==========================================================================
   FORM RELATED
   ========================================================================== */
form input[name=code_perm], form input[name=postalcode] {
  text-transform: uppercase;

}
.legend {
  border-bottom: 1px solid #3b3530;
  padding-bottom: 10px;
}
#user_dob {
  display: block;
}
#user_dob .form-control.col-sm-4 {
  display: inline-block;
  width: 33.33%;
}

.form-group label.error {
  color: #FC5050;
  font-style: italic;
  font-size: 0.8em;
  display: block;
}

.runners legend {
	border-bottom: none;
	padding-top: 1em;
	border-top: 1px solid #333;
}

.runners legend .btn {
	margin-top: 4px;
}

.runner {
	margin: 0 0 15px;
}
.runner:first-child .remove_runner,
.runner:first-child .copy_address {
	display: none;
}

.copy_address {
	margin-right: 1em;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media (min-width: 768px) {
	div#logo {
		margin-left: -30px;
	}
}

@media (max-width: 767px) {
	.navbar-collapse {
		width: calc( 100% - 80px);
		float: right;
	}
	.navbar-header .navbar-text {
    position: relative;
    left: 120px;
  }
  .carousel-inner {
    height: auto;
  }
  .carousel-caption {
    top: auto;
    bottom: 40px;
  }
}

h1.title img {margin-bottom: 1em;max-width:260px;}

#carousel-inscription-jeunes .carousel-inner>.item{
  width: 1140px;
  height: 350px;
}