/*  
Theme Name: Slaur
Theme URI: www.slaur.fr
Description: Thème Wordpress pour Slaur
Author: CCE
Author URI: www.cce-organisation.fr
*/

.video {
	display:block;
	position:relative;
	margin-top: 30px;
	width:100%;
	min-height:calc(100vh - 90px);
	overflow:hidden;
	text-align:center;
}
.video h2 {
	position:absolute;
	z-index:10;
	width:100%;
	text-align:center;
	text-transform:uppercase;
	font-size:20px;
	font-family:'Oswald', sans-serif;
	letter-spacing:0.2em;
	color:#fff;
	top:50px;
	font-weight:400;
}
.video h2 span {
	padding-bottom:4px;
	border-bottom:solid 1px #ce1139;
}
.video p {
	position:absolute;
	z-index:10;
	width:100%;
	font-size:25px;
	font-family:'Oswald', sans-serif;
	font-weight:700;
	color:#fff;
	top:150px;
	line-height:1.5em;
}
.video video,
.video .img-video {
	position: absolute;
	left: 0;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}
.video .img-video {
	left:50%;
	transform:translateX(-50%);
	max-width:none;
}
.video::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(0,0,0,.25);
  background: rgba(0,0,0,.25);
}
/*
section .scroll-to-section {
	position: absolute;
	z-index:10;
	bottom: 20px;
	left: 50%;
	margin-left: -20px;
	font-size: 0px;
	text-align: center;
	width: 40px;
	height: 40px;	
	opacity:0.5;
	transition:opacity .2s ease-in;
}
section .scroll-to-section::before {
	position:absolute;
	font-family:"FontAwesome";
	content:"\f107";
	font-weight:400;
	color:#ce1139;
	font-size: 26px;
	line-height: 30px;
	width: 30px;
	border: solid 2px #ce1139;
	border-radius: 40px;
	left: 0px;
	height: 30px;
}
*/
section .scroll-to-section {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}
section .scroll-to-section:hover {
	opacity:0.5;
}
section .scroll-to-section span {
	position: absolute;
  width: 100px;
  font-size: 13px;
  color: #fff;
  transform:translateX(-50%);
  top: -30px;
  left:50%;
  font-weight: 700;
}

section .scroll-to-section {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #ce1139;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

section .scroll-to-section:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 3px solid #ce1139;
    border-width: 0px 0 3px 3px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

@media (min-width:768px) {
	.video {
		min-height:calc(100vh - 90px);
		margin-top: 90px;
	}
	.video h2 {
		font-size:22px;
		top:100px;
	}
	.video p {
		font-size:30px;
		font-family:'Oswald', sans-serif;
		top:200px;
		padding:0 15%;
	}
}
@media (min-width:992px) {
	.video {
		min-height:calc(100vh - 120px);
		margin-top: 120px;
	}
	.video h2 {
		font-size:24px;
	}
	.video p {
		font-size:40px;
		font-family:'Oswald', sans-serif;
		padding:0 18%;
	}
}

@media(min-width:768px) {
	.section-image {
		height:500px;
	}
}

@media(min-width:768px) and (max-width:1199px) {
	.section-image {
		overflow:hidden;
	}
	.section-image .bg-fixed {
		background-image:none!important;
	}
	.section-image .bg-fixed img.fixed {
		opacity:1;
	}
}

.produits .list {
/*	padding-bottom:20px;*/
	overflow:hidden;
	width:100%;
}
.produits ul {
	padding:0px;
	margin-bottom:0px;
}
.produits li {
	float:left;
	height:400px;
	width:100%;
	position:relative;
	list-style: none;
	padding-left:20px;
	padding-right:20px;
}
.produits li > div {
	float:left;
	position:relative;
	width:100%;
}
.produits li .photo {
	display:inline-block;
	background-color:#fff;
	text-align:center;
	width:100%;
	height:300px;
	transition: opacity 0.2s;
}
.produits li .photo:hover {
	opacity:0.75;
}
.produits li img {
	max-height:240px;
	margin-top:30px;
	width:auto!important;
	margin-left:auto;
	margin-right:auto;
}
.produits li .description {
	background-color:transparent;
}
.produits li .title {
	display:block;
	font-weight:700;
	color:#707070;
}
.produits li .gamme {
	color:#707070;
	font-size:14px;
}
.produits {
	position:relative;
	width:100%;
}
.produits .navigation a {
	position:absolute;
	top:130px;
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1.4;	
	font-size:0;
	color:#ececec;
	text-align:center;
	display:inline-block;
	width:60px;
	text-decoration:none!important;
	z-index:10;
}
.produits .navigation .next {
	left:-60px;
}
.produits .navigation .previous {
	right:-60px;
}
.produits .navigation .next::before {
	content:"\f137";
	font-size:40px;
}
.produits .navigation .previous::before {
	content:"\f138";
	font-size:40px;
}
@media (max-width:767px) {
	.produits .navigation a {
		width:40px;
	}
	.produits .navigation .next {
		left:-10px;
	}
	.produits .navigation .previous {
		right:-10px;
	}
}

.container-actualite {
	position:absolute;
	width:100%;
	bottom:100px;
	z-index:10;
}
.container-actualite .homepage-actualite {
	position:relative;
	width:100%;
	background-color:rgba(182,22,58,0.8);
	color:#fff;
	border-radius:5px;
	padding:15px 15px 15px 45px;
	margin-left:-15px;
	margin-right:-15px;
}
.homepage-actualite::before {
	content:"\f016";
	font-family:"FontAwesome";
	font-size:20px;
	color:#fff;
	position:absolute;
	left:15px;
	top:50%;
	transform:translateY(-50%);
}

.homepage-actualite h3 {
	font-weight:700;
	font-size:1.5rem;
	margin-bottom:0px;
}
.homepage-actualite a {
	color:#fff;
}
.homepage-actualite a.lire span::before {
	display:inline-block;
	content:"\f061";
	font-family:"FontAwesome";
	color:#fff;
	font-size:10px;
	line-height:22px;
	vertical-align:top;
	margin-right:4px;
}

.homepage-actualite .col-xs-12:first-child {
	text-align:left;
}
.homepage-actualite .col-xs-12:last-child {
	text-align:right;
}
.homepage-actualite .actions {
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	height:24px;
}
.homepage-actualite .actions a {
	display:inline-block;
	vertical-align:top;
}
.homepage-actualite .fermer {
	position:relative;
	font-size:0px;
	width:30px;
	height:30px;
}
.homepage-actualite .fermer::before{
  background: #fff;
  position: absolute;
  display:block;
  content:'';
  width: 26px;
  height: 2px;
  top: 10px;
  left: 3px;
  transform: rotate(-45deg);
} 
.homepage-actualite .fermer::after{
  background: #fff;
  position: absolute;
  display:block;
  content:'';
  width: 26px;
  height: 2px;
  right: 0px;
  top: 10px;
  transform: rotate(45deg);
} 

@media (max-width:767px) {
	.video h2 {
		top:50px;
	}
	.video p {
		top:90px;
		padding:0 10px
	}
	section .scroll-to-section {
		bottom:0px;
		display: none;
	}
	.container-actualite {
		bottom:0px;
	}
	.container-actualite .homepage-actualite {
		width:calc(100% + 30px);
		border-radius:0px;
		padding-left:15px;
		padding-bottom:10px;
	}
	.container-actualite .homepage-actualite::before {
		display:none;
	}
	.homepage-actualite .col-xs-12:last-child {
		text-align:left;
	}
	.homepage-actualite h3 {
		font-size:1rem;
	}
	.homepage-actualite sous-titre {
		font-size:1rem;
	}
	.homepage-actualite .actions {
		position:relative;
		right:0px;
		top:0;
		transform:none;
	}
	.homepage-actualite .fermer {
		width:20px;
		height:20px;
		display:none!important;
	}
	.homepage-actualite .fermer::before {
	  width: 16px;
	  left: 4px;
		display:none!important;
	}
	.homepage-actualite .fermer::after {
	  width: 16px;
	  right: 0px;
		display:none!important;
	}
}