@font-face {
font-family: 'Poppins Re';
src: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/fonts/Poppins-Regular.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Poppins Me';
src: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/fonts/Poppins-Medium.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Poppins Bo';
src: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/fonts/Poppins-Bold.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'icomoon';
src: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/fonts/icomoon.ttf) format('truetype');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-ecole:before {
content: "\e900";
}
.icon-partenaire:before {
content: "\e901";
}
.icon-roulette:before {
content: "\e902";
}
.icon-map:before {
content: "\e903";
}
.icon-actualites:before {
content: "\e904";
} body,
html {
width: 100%;
height: auto;
font-size: 16px;
}
body { 
font-family: 'Poppins Re', Helvetica, sans-serif;
overflow-x: hidden;
color: #222;
position: relative;
}
body:before {
content: "";
position: absolute;
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/triangle.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 200px;
width: 200px;
top: 0;
right: 0;
z-index: 0;
}
section { padding: 3rem 0; } 
b,
strong {
font-family: 'Poppins Bo', Helvetica, sans-serif;
font-weight: unset;
}
a {
color: #222;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
button:hover,
button:focus, 
a:hover,
a:focus {
color: #da1620 !important;
box-shadow: 0 !important;
outline: 0 !important;
}
p {
color: #222;
line-height: 1.3;
margin-bottom: 20px;
}
p:last-child { margin-bottom: 0; }
ul {
list-style-type: circle;
padding-left: 15px;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Poppins Re', Helvetica, sans-serif; }
figure { margin: 0; }
.card {
border-radius: 0;
border: 0;
background-color: transparent;
}
.card img {
border-radius: 0 !important;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .card > * { flex: 0 0 auto; }
} .title {
position: relative;
padding-left: 4.5rem;
margin-bottom: 0;
}
.title:before {
font-family: 'icomoon';
position: absolute;
top: 0;
font-size: 2.5rem;
left: 0;
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
color: #fff;
} .btn-plus { 
position: relative;
padding-bottom: 0.6rem;
display: table;
}
.btn-plus:before {
content: "";
position: absolute;
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 100%;
height: 8px;
top: 1.5rem;
} header { 
width: 100%;
z-index: 2;
position: relative;
}
header .social-links {
margin-left: auto;
padding-top: 2rem;
display: table;
}
header .logo-wrapper {
margin-top: 0.5rem;
margin-bottom: -4.5rem;
}
header .logo-wrapper img {
width: auto;
padding-left: 5rem;
height: 150px;
}
@media screen and (max-width: 1199px) {
header .logo-wrapper img { height: 115px; }
}
@media screen and (max-width: 767px) {
header .logo-wrapper { display: none; }
} .navbar .navbar-collapse ul { border-bottom: 1px solid #ccc; }
.navbar .navbar-collapse li { position: relative; }
.navbar .navbar-collapse li.active a { color: #da1620 !important; }
.navbar .navbar-collapse li a {
font-family: 'Poppins Re', Helvetica, sans-serif;
font-size: 0.85rem;
color: #222;
text-align: center;
padding-right: 0.7rem !important;
padding-left: 0.7rem !important;
position: relative;
}
.navbar .navbar-collapse li a:hover { color: #da1620 !important; }
.navbar .navbar-collapse .dropdown-toggle::after { color: #da1620; }
.navbar .navbar-collapse .dropdown-menu {
background-color: #222;
border: 0;
border-radius: 0;
}
.navbar .navbar-collapse .dropdown-menu a {
font-size: 0.9rem !important;
color: #fff;
text-align: left;
margin-top: 0;
white-space: normal;
}
.navbar .navbar-collapse .dropdown-menu a:before { display: none; }
.navbar .navbar-collapse .dropdown-menu a:focus, 
.navbar .navbar-collapse .dropdown-menu a:hover { background-color: transparent; }
.navbar .social-links .social-icon-colored { padding-left: 0; }
.navbar .social-links .social-icon-colored li { 
display: block; 
margin-bottom: 2px;
}
.navbar .social-links .social-icon-colored li:last-child { margin-bottom: 0; }
.navbar .social-links .social-icon-colored li a {
height: 20px;
width: 20px;
line-height: 17px;
}
.navbar .social-links .social-icon-colored li a i, 
.navbar .social-links .social-icon-colored li a svg {
font-size: 14px;
margin-left: 0px;
} .navbar.fixed-header {
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 1500;
padding: 1rem !important;
}
.navbar.fixed-header .navbar-brand { 
display: block !important;
padding: 0; 
}
.navbar.fixed-header .navbar-brand .logo { 
max-width: 180px; 
top: 0.2rem;
}
.navbar.fixed-header .navbar-nav { margin-right: 0 !important; }
.navbar.fixed-header .navbar-nav li a { margin-top: 0; }
@media all and (min-width: 1200px) {
.navbar .nav-item .dropdown-menu { display: none; }
.navbar .nav-item:hover .dropdown-menu { display: block; }
.navbar .nav-item .dropdown-menu { margin-top:0; }
}
@media screen and (max-width: 1199px) {
.navbar .navbar-toggler {
color: #fff;
border-color: #222;
margin-left: auto;
background-color: #222;
position: relative;
}
.navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar .navbar-nav { padding: 1rem; }
.navbar .navbar-nav li { text-align: center; }
.navbar .navbar-nav li:before { display: none; }
.navbar .navbar-collapse {
background-color: #222;
position: absolute;
top: 4.5rem;
right: 0;
border-radius: 3px;
}
.navbar .navbar-collapse.show li a { color: #fff; }
.navbar.fixed-header .navbar-collapse {
top: 4rem;
right: 3.5rem;
}
} div[id^="carousel"] { position: relative; }
div[id^="carousel"] .carousel-item { height: 250px; }
div[id^="carousel"] .carousel-item img {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.5s ease;
}
div[id^="carousel"] .carousel-item video {
position: absolute;
top: 50%;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
transform: translateY(-50%);
margin: 0 auto;
text-align: center;
z-index: 1;
}
div[id^="carousel"] .carousel-control-next, 
div[id^="carousel"] .carousel-control-prev {
background-color: transparent;
border: 0;
}
#carouselProduction .carousel-item { height: 540px; }
@media screen and (max-width: 767px) {
#carousel { margin-top: 3rem; }
div[id^="carousel"] .carousel-item { height: 360px !important; }
}
@media screen and (max-width: 575px) {
div[id^="carousel"] .carousel-item { height: 280px !important; }
} #ecole .background-container { 
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
}
#ecole h2.title:before { content: "\e900"; }
#ecole .card-roulette {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin-top: -5rem;
position: relative;
overflow: hidden;
}
#ecole .card-roulette:before {
content: "\e902";
font-family: 'icomoon';
position: absolute;
top: -4.5rem;
font-size: 8.5rem;
left: -1rem;
color: #fff;
}
#ecole .card-roulette .card-body { padding: 3rem 2rem 3rem 8rem; }
#ecole .card-roulette .card-body * {
color: #fff;
text-align: right;
}
#ecole .card-roulette .card-body small { 
font-size: 50%;
line-height: 1.5;
display: block;
}
#ecole .square-box {
background-color: #fff;
border: 1px solid #da1620;
-webkit-box-shadow: 0px 0px 10px 0px #a69ea1; 
box-shadow: 0px 0px 15px 0px #a69ea1;
margin-bottom: 1.5rem;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
#ecole .square-box:hover { transform: scale(1.1); }
#ecole .square-box .square-content { padding: 0 0.5rem 0.5rem; }
#ecole .square-box .square-content div > span {
font-size: 1.2rem;
text-align: center;
text-transform: uppercase;
color: #da1620;
line-height: 1.2;
}
#ecole .square-box .square-content div > span > img {
max-width: 100px;
display: block;
margin: 0 auto 1rem;
}
#ecole .square-box .square-content div > span > .border {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 3rem;
height: 10px;
display: table;
margin: 0.5rem auto 0;
border: 0 !important;
}
#ecole .contenu-1 {
background-color: #fff;
border: 1px solid #da1620;
-webkit-box-shadow: 0px 0px 10px 0px #a69ea1; 
box-shadow: 0px 0px 15px 0px #a69ea1;
border-radius: 25px;
border-bottom-right-radius: 0;
position: relative;
}
#ecole .contenu-1:before {
content: "";
position: absolute;
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/gants.svg);
background-repeat: no-repeat;
background-size: contain;
height: 135px;
width: 170px;
top: 50%;
right: -5rem;
z-index: 0;
transform: translateY(-50%);
}
#ecole .contenu-1 h2.title:before { content: "\e903"; }
#ecole .contenu-1 .image {
width: 100%;
height: 350px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
}
@media screen and (max-width: 991px) {
#ecole .square-box .square-content div > span { font-size: 1rem; }
#ecole .square-box .square-content div > span > img { max-width: 90px; }
}
@media screen and (max-width: 767px) {
#ecole .card-roulette  { margin-top: 1rem; }
#ecole .contenu-1:before { display: none; }
} #partenaires .background-container { 
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
}
#partenaires h2.title:before { content: "\e901"; }
#partenaires .carousel-logo {
background-color: #fff;
padding: 2rem;
border-radius: 25px;
} #actualites {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
}
#actualites h2.title {
color: #fff;
margin: 0 auto;
display: table;
}
#actualites h2.title:before {
content: "\e904";
background: #fff;
color: #222;
}
#actualites .card {
background-color: #fff;
padding: 1rem;
overflow: hidden;
}
#actualites .card,
#actualites .card .zoom { border-radius: 15px; }
#actualites .card .card-body { 
padding: 1.25rem 0 0; 
position: relative;
}
#actualites .card .card-body:before {
content: "\e902";
font-family: 'icomoon';
position: absolute;
bottom: -4.5rem;
font-size: 6.5rem;
right: -2.5rem;
color: #e5e5e5;
z-index: 0;
}
#actualites .card .card-body time {
font-size: 0.8rem;
color: #d81b29;
}
#actualites .card .card-body .card-title {
text-transform: uppercase;
font-size: 1.3rem;
margin-bottom: 0;
position: relative;
z-index: 1;
}
#actualites .card .card-body a.btn {
background-color: transparent;
border: 0;
color: #d81b29;
padding: 0;
} #single { 
position: relative;
overflow: hidden;
}
#single:before {
content: "";
background-color: #e5e5e5;
width: 100%;
position: absolute;
height: 100%;
top: 9rem;
}
#single .row:before {
content: "\e902";
font-family: 'icomoon';
position: absolute;
bottom: -40%;
font-size: 22.5rem;
right: 0;
color: #ccc;
z-index: 0;
}
#single .title {
font-size: 2rem;
color: #d81b29;
margin: 0 auto;
text-align: center;
}
#single .title:before {
font-size: 4.5rem;
content: "\e904";
background: #fff;
color: #222;
}
#single time {
font-size: 0.8rem;
color: #d81b29;
}
#single h1 {
text-transform: uppercase;
font-size: 1.5rem;
margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
#single .title { display: none; }
} .page-numbers { 
color: #fff;
padding: 0.5rem;
margin-bottom: 0rem;
display: inline-block;
}
.page-numbers:after {
content: '';
display: inline-block;
position: relative;
right: -9px;
width: 2px;
height: 8px;
box-sizing: border-box;
background-color: #222;
top: 0;
}
.page-numbers:last-child:after { display: none !important; }
.page-numbers.current {
font-family: 'Poppins Me', Helvetica, sans-serif;
color: #222;
} #direction { 
position: relative;
overflow: hidden;
}
#direction:before {
content: "";
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
width: 100%;
position: absolute;
height: 100%;
top: 6rem;
z-index: -2;
}
#direction:after {
content: "";
position: absolute;
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/equipe.svg);
background-repeat: no-repeat;
background-size: contain;
height: 160px;
width: 118px;
top: 7rem;
right: 7rem;
z-index: -1;
transform: translateY(-50%);
}
#direction .titre {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
font-size: 1.8rem;
color: #fff;
text-align: center;
display: table;
padding: 1rem 2rem;
margin: 0 auto;
}
#direction .titre .sous-titre { 
font-size: 1.2rem;
line-height: 1.2;
}
#equipe h2,
#direction h2 {
text-transform: uppercase;
position: relative;
margin-bottom: 2rem;
}
#equipe h2:before,
#direction h2:before {
content: "";
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 3rem;
height: 10px;
position: absolute;
bottom: -1rem;
left: 0;
}
#equipe .photo,
#direction .photo { border-radius: 100%; }
#equipe .arrow,
#direction .arrow { 
position: relative;
padding-bottom: 30%;
}
#equipe .arrow:before,
#direction .arrow:before {
content: "";
height: 100%;
width: 2px;
background-color: #d81b29;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
#equipe .arrow .top-arrow,
#direction .arrow .top-arrow {
border-bottom: 0.2rem solid;
border-right: 0.2rem solid;
width: 0.75rem;
height: 0.75rem;
color: #d81b29;
transform: rotate(-135deg);
position: relative;
margin: 1rem auto 0;
display: table;
}
#equipe .border-bottom,
#direction .border-bottom { 
border-bottom: 2px solid #d81b29 !important;
position: relative;
}
#equipe .border-bottom:before,
#direction .border-bottom:before { 
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #fff;
bottom: -2px;
right: 87.55%;
}
#equipe .explosion,
#direction .explosion {
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/explosion.svg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: contain;
}
@media screen and (max-width: 1199px) {
#equipe .border-bottom:before,
#direction .border-bottom:before { right: 83.4%; }
}
@media screen and (max-width: 991px) {
#equipe .border-bottom:before,
#direction .border-bottom:before { right: 79.3%; }
}
@media screen and (max-width: 767px) {
#direction:after { display: none; }
#equipe .photo,
#direction .photo { 
display: block;
margin: 0 auto 1rem; 
}
#equipe .arrow,
#equipe .border-bottom:before,
#direction .arrow,
#direction .border-bottom:before { display: none; }
} #autre { position: relative; }
#autre:before {
content: "";
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgb(248 248 248) 76%);
width: 100%;
position: absolute;
height: 50%;
bottom: 0;
z-index: -2
}
#autre:after {
content: "";
position: absolute;
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/direction.svg);
background-repeat: no-repeat;
background-size: contain;
height: 160px;
width: 198px;
top: 50%;
left: 7rem;
z-index: -1;
transform: translateY(-50%);
}
#autre .arrow { 
position: relative;
padding-top: 3rem;
}
#autre .arrow:before {
content: "";
height: 100%;
width: 2px;
background-color: #d81b29;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 0;
}
#autre .arrow .bottom-arrow {
border-bottom: 0.2rem solid;
border-right: 0.2rem solid;
width: 0.75rem;
height: 0.75rem;
color: #d81b29;
transform: rotate(45deg);
position: relative;
margin: 1rem auto 0;
display: table;
}
#autre .square-box {
min-width: 350px !important;
max-width: 400px !important;
background-color: #fff;
border: 1px solid #da1620;
border-radius: 100%;
-webkit-box-shadow: 0px 0px 10px 0px #a69ea1; 
box-shadow: 0px 0px 15px 0px #a69ea1;
text-align: center;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
#autre .square-box .square-content { padding: 0.5rem; }
#autre .square-box .square-content div > span { color: #222; }
#autre .square-box .square-content div > span .titre {
font-size: 1.2rem;
text-align: center;
text-transform: uppercase;
color: #222;
line-height: 1.2;
display: block;
}
#autre .square-box .square-content div > span > img {
max-width: 100px;
display: block;
margin: 0 auto 1rem;
}
#autre .square-box .square-content div > span > .border {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 3rem;
height: 10px;
display: table;
margin: 0.5rem auto 1rem;
border: 0 !important;
}
@media screen and (max-width: 767px) {
#autre:after { display: none; }
} #formation { 
position: relative;
overflow: hidden;
}
#formation:before {
content: "";
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
width: 100%;
position: absolute;
height: 100%;
top: 6rem;
z-index: -2;
}
#formation:after {
content: "";
position: absolute;
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/formation.svg);
background-repeat: no-repeat;
background-size: contain;
height: 160px;
width: 245px;
top: 7rem;
left: 7rem;
z-index: -1;
transform: translateY(-50%);
}
#formation .titre {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
font-size: 1.8rem;
color: #fff;
text-align: center;
display: table;
padding: 1rem 2rem;
margin: 0 auto;
}
#formation .titre .sous-titre { 
font-size: 1.2rem;
line-height: 1.2;
}
#formation h2 {
font-size: 1.5rem;
text-transform: uppercase;
}
#formation .arrow { 
position: relative;
height: 100%;
}
#formation .arrow:before {
content: "";
height: calc(100% + 3rem);
width: 4px;
background-color: #d81b29;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -3rem;
}
#formation .arrow .bottom-arrow {
border-bottom: 5px solid;
border-right: 5px solid;
width: 0.85rem;
height: 0.85rem;
color: #d81b29;
transform: rotate(45deg);
position: absolute;
margin: 1rem auto 0;
display: table;
bottom: -2.9rem;
left: 0;
right: 0;
}
#formation .card {
background-color: #fff;
border: 1px solid #da1620;
-webkit-box-shadow: 0px 0px 10px 0px #a69ea1; 
box-shadow: 0px 0px 15px 0px #a69ea1;
border-radius: 25px;
border-bottom-right-radius: 0;
}
#formation .card .card-body .border {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 3rem;
height: 10px;
display: table;
margin: 0.5rem auto 0;
border: 0 !important;
}
#formation .card .card-body .card-title {
font-size: 1.2rem;
text-align: center;
text-transform: uppercase;
color: #da1620;
line-height: 1.2;
}
#formation .card .smile {
max-width: 50px;
margin: 1rem auto 0;
}
#formation .background {
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/background.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#formation .background p { color: #fff; }
#formation .fleche-gauche,
#formation .fleche-droite,
#formation .fleche-blanche-gauche,
#formation .fleche-blanche-droite { position: relative; }
#formation .fleche-gauche:before,
#formation .fleche-droite:before,
#formation .fleche-gauche:after,
#formation .fleche-droite:after,
#formation .fleche-blanche-gauche:before,
#formation .fleche-blanche-droite:before {
content: "";
position: absolute;
background-repeat: no-repeat;
background-size: contain;
height: 45px;
width: 30px;
z-index: 0;
}
#formation .fleche-gauche:before,
#formation .fleche-droite:before,
#formation .fleche-gauche:after,
#formation .fleche-droite:after { background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/fleche-rouge.svg); }
#formation .fleche-blanche-gauche:before,
#formation .fleche-blanche-droite:before { background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/fleche-blanche.svg); }
#formation .fleche-gauche:before {
top: -4rem;
right: 2rem;
transform: rotateY(180deg);
}
#formation .fleche-droite:before { 
top: -4rem;
left: 2rem;
}
#formation .fleche-gauche:after {
bottom: -4rem;
right: 2rem;
transform: rotateY(180deg) rotate(45deg);
}
#formation .fleche-droite:after { 
bottom: -4rem;
left: 2rem;
transform: rotate(45deg);
}
#formation .fleche-blanche-gauche:before { 
top: -4rem;
right: 0.5rem;
transform: rotate(45deg) rotateY(180deg);
}
#formation .fleche-blanche-droite:before { 
top: -4rem;
left: 0.5rem;
transform: rotate(315deg);
}
@media screen and (max-width: 1199px) {
#formation .background { background-image: none; }
#formation .background p { color: #222; }
#formation .fleche-blanche-gauche:before,
#formation .fleche-blanche-droite:before { background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/fleche-rouge.svg); }
}
@media screen and (max-width: 991px) {
#formation .card .card-body { padding: 1.25rem 0.5rem; }
#formation .card .card-body .card-title { font-size: 1rem; }
}
@media screen and (max-width: 767px) {
#formation .background p { text-align: center !important; }
} #formation-ecole { position: relative; }
#formation-ecole:before {
content: "";
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
width: 100%;
position: absolute;
height: 100%;
top: 6rem;
z-index: -2;
}
#formation-ecole:after {
content: "";
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/explosion.svg);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 46rem;
position: absolute;
left: 0;
right: 0;
top: 6rem;
transform: rotate(180deg);
width: 100%;
height: 100%;
z-index: -1;
}
#formation-ecole .background-container { position: relative; }
#formation-ecole .background-container:before {
content: "";
position: absolute;
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/barometre.svg);
background-repeat: no-repeat;
background-size: contain;
height: 160px;
width: 110px;
top: -4rem;
right: 7rem;
z-index: 0;
}
@media screen and (max-width: 991px) {
#formation-ecole:before { top: 0; }
#formation-ecole .background-container:before { display: none; }
} section[id^="contenu"] .h2 { 
font-size: 1.5rem; 
margin-bottom: 2rem;
position: relative;
}
section[id^="contenu"] .h2:before {
content: "";
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 3rem;
height: 10px;
position: absolute;
bottom: -1rem;
left: 0;
} #contenu-1 { 
position: relative;
overflow: hidden;
}
#contenu-1:before {
content: "";
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
width: 100%;
position: absolute;
height: 100%;
top: 9rem;
z-index: -2;
}
#contenu-1:after {
content: "";
position: absolute;
background-repeat: no-repeat;
background-size: contain;
height: 160px;
width: 205px;
top: 9rem;
z-index: -1;
transform: translateY(-50%);
}
#contenu-1 .titre {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
font-size: 1.8rem;
color: #fff;
text-align: center;
display: table;
padding: 1rem 2rem;
position: relative;
z-index: 1;
}
#contenu-1 .titre .sous-titre { 
font-size: 1.2rem;
line-height: 1.2;
}
#contenu-1.left .titre { margin-left: auto; }
#contenu-1.left:after { left: 7rem; }
#contenu-1.right:after { right: 7rem; }
#contenu-1 .border {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
width: 3rem;
height: 10px;
display: table;
margin: 0.5rem 0;
border: 0 !important;
}
@media screen and (max-width: 767px) {
#contenu-1:before,
#contenu-1:after { top: 6rem; }
} #contenu-2 {
background: #e5e5e5;
background: linear-gradient(180deg, rgba(255,255,255,1) 23%, rgba(229,229,229,1) 76%);
}
#contenu-2 h2 { color: #da1620; }
#contenu-2 .card img { border-radius: 100% !important; }
#contenu-2 .card-roulette {
background: #a6262b;
background: linear-gradient(90deg, rgba(225,40,46,1) 48%, rgba(166,38,43,1) 90%);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
overflow: hidden;
max-width: 25rem;
margin-left: auto;
}
#contenu-2 .card-roulette:before {
content: "\e902";
font-family: 'icomoon';
position: absolute;
top: -4.5rem;
font-size: 8.5rem;
right: -1rem;
color: #fff;
}
#contenu-2 .card-roulette .card-body { padding: 3rem 8rem 3rem 2rem; }
#contenu-2 .card-roulette .card-body * {
color: #fff;
text-align: left;
} #contenu-3 .card-tax {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
}
#contenu-3 .card-tax * { color: #fff; }
#contenu-3 .card-tax h3 {
text-align: center;
text-transform: uppercase;
font-size: 1.3rem;
margin-bottom: 1rem;
color: #fff;
}
#contenu-3 .card-tax .trait { position: relative; }
#contenu-3 .card-tax .trait:before {
content: "";
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/trait.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: -1rem;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
z-index: 0;
}
#contenu-3 .card-tax .square-box {
width: 70%;
min-width: 115px;
max-width: 190px;
background-color: #fff;
border-radius: 100%;
text-align: center;
}
#contenu-3 .card-tax .square-box .square-content div > span * { color: #da1620; }
#contenu-3 .card-tax .card-solde { 
background-color: #fff;
position: relative;
}
#contenu-3 .card-tax .card-solde:before {
content: "";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -15px;
}
#contenu-3 .card-tax .card-solde * { color: #da1620; }
#contenu-3 .card-tax .card-solde .square-box {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
}
#contenu-3 .card-tax .card-solde .square-box .square-content div > span * { color: #fff !important; }
@media screen and (max-width: 991px) {
#contenu-3 .card-tax .card-solde { text-align: center; }
}
@media screen and (max-width: 767px) {
#contenu-3 .card-tax { text-align: center; }
#contenu-3 .card-tax .trait:before  { display: none; }
#contenu-3 .card-tax .card-solde:before {
top: unset;
bottom: -15.6rem;
transform: rotate(90deg);
right: 0;
left: 0;
}
} #contenu-4 {
background: #e5e5e5;
background: linear-gradient(180deg, rgba(255,255,255,1) 23%, rgba(229,229,229,1) 76%);
position: relative;
overflow: hidden;
}
#contenu-4:before {
content: "";
background-image: url(//www.flamme-ecoledeproduction.fr/wp-content/themes/flamme/img/explosion.svg);
background-repeat: no-repeat;
background-size: 46rem;
position: absolute;
left: 0;
right: 0;
top: 3rem;
transform: rotate(180deg);
width: 100%;
height: 100%;
z-index: 0;
} #contact { 
position: relative;
overflow: hidden;
}
#contact:before {
content: "";
background: #e5e5e5;
background: linear-gradient(180deg, rgba(229,229,229,1) 23%, rgba(255,255,255,1) 76%);
width: 100%;
position: absolute;
height: 100%;
top: 6rem;
z-index: -2;
}
#contact .titre {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
font-size: 1.8rem;
color: #fff;
text-align: center;
display: table;
padding: 1rem 2rem;
margin: 0 auto;
position: relative;
z-index: 1;
}
#contact .contact-wrapper i,
#contact .contact-wrapper svg { 
font-size: 2.5rem; 
margin-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
#contact .contact-wrapper iframe { margin-top: 1rem; }
} #contact-us .contact-wrapper {
background: #a6262b;
background: linear-gradient(90deg, rgba(166,38,43,1) 48%, rgba(225,40,46,1) 90%);
}
#contact-us .form {
width: 100%;
height: 46px;
padding: 10px 15px;
background: #fafafa;
border: 1px solid #fff;
margin-bottom: 15px;
color: #222 !important;
font-size: 0.8rem;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
#contact-us .form:hover { border: 1px solid #333; }
#contact-us .form:focus {
color: #fff;
outline: none;
border: 1px solid #333;
}
#contact-us textarea {
height: 6rem !important;
max-width: 100%;
}
#contact-us .form-btn {
font-family: 'Raleway Bo', Helvetica, sans-serif;
display: block;
font-size: 0.9rem;
height: auto;
padding: 0.5rem 2rem;
color: #a6262b;
background: transparent;
border: 1px solid #a6262b;
border-radius: 0;
outline: none;
margin-top: 0;
margin-left: auto;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#contact-us .form-btn:hover {
background: #a6262b;
color: #fff;
border: 1px solid #a6262b;
}
#contact-us .form-btn:active { opacity: 0.9; }
#contact-us .wpcf7-list-item { margin: 0 !important; }
#contact-us ::placeholder { color: #222;
opacity: 1; }
#contact-us :-ms-input-placeholder { color: #222; }
#contact-us ::-ms-input-placeholder { color: #222; }
.wpcf7-list-item-label { 
color: #222 !important;
font-size: 78%;
}
.wpcf7-spinner { display: none; }
.grecaptcha-badge { display: none; } footer .pre-footer { 
background-color: #fff;
font-size: 0.9rem;
}
footer .pre-footer .border-top { border-top: 1px solid #a4cdd1 !important; }
footer .pre-footer ul {
list-style: none;
margin-bottom: 1.5rem;
padding-left: 0;
}
footer .pre-footer ul:last-of-type { margin-bottom: 0; }
footer .pre-footer ul li:last-child { margin-bottom: 0; }
footer .pre-footer ul li a { 
color: #222; 
position: relative;
display: block;
font-size: 0.8rem;
}
footer .footer * { color: #ccc; }
@media screen and (max-width: 767px) {
footer .pre-footer img { 
display: block;
margin: 0 auto;
}
}
@media screen and (max-width: 575px) {
footer .pre-footer * { text-align: center; }
footer .pre-footer .h3 { margin-left: 0; }
footer .pre-footer .h3:before { display: none; }
footer .pre-footer .social-links,
footer .pre-footer ul { 
text-align: center;
padding-left: 0;
list-style-type: none;
}
footer .pre-footer .contact-btn {
margin: 0 auto;
display: table;
}
footer .pre-footer .infos {
margin: 0 auto;
display: inline-block;
}
footer .pre-footer ul li a:before {
right: 0;
margin: 0 auto;
}
} .square-box {
position: relative;
width: 100%;
min-width: 150px;
max-width: 250px;
overflow: hidden;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-box .square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.square-box .square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-box .square-content div > span {
display: table-cell;
vertical-align: middle;
color: #fff;
line-height: 1.3;
} #carousel-logo { 
z-index: 1;
position: relative;
}
#carousel-logo .slick-slide {
margin: 0 5px;
border: 0;
}
#carousel-logo .slick-slide img { 
width: 100%;
margin: 0 auto;
height: auto;
}
#carousel-logo .slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
#carousel-logo .slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
#carousel-logo .slick-list:focus { outline: none; }
#carousel-logo .slick-list.dragging {
cursor: pointer;
cursor: hand;
}
#carousel-logo .slick-slider .slick-track,
#carousel-logo .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#carousel-logo .slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
#carousel-logo .slick-track:before,
#carousel-logo .slick-track:after {
display: table;
content: '';
}
#carousel-logo .slick-track:after { clear: both; }
#carousel-logo .slick-loading .slick-track { visibility: hidden; }
#carousel-logo .slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
#carousel-logo [dir='rtl'] .slick-slide { float: right; }
#carousel-logo .slick-slide img { display: block; }
#carousel-logo .slick-slide.slick-loading img { display: none; }
#carousel-logo .slick-slide.dragging img { pointer-events: none; }
#carousel-logo .slick-initialized .slick-slide { display: block; }
#carousel-logo .slick-loading .slick-slide { visibility: hidden; }
#carousel-logo .slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
#carousel-logo .slick-arrow.slick-hidden { display: none; }
#carousel-logo .slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
margin-top: 2rem;
}
#carousel-logo .slick-dots li { margin: 0 0.25rem; }
#carousel-logo .slick-dots button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: #222;
text-indent: -9999px;
}
#carousel-logo .slick-dots li.slick-active button { background-color: #d7cfaf; }
#carousel-logo .button-slider {
font-size: 2.5rem;
color: #222;
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index: 2;
}
#carousel-logo .slick-arrow { display: none !important; } #carousel-logo .actualites-slider .slick-slide,
#carousel-logo .actualites-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
transform: scale(0.8, 0.8);
transition: transform 0.3s;
} #carousel-logo .actualites-slider .slick-center,
#carousel-logo .actualites-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
transform: scale(1, 1);
}
#carousel-logo .actualites-slider .slide:not(.slick-center) .collapse-wrapper,
#carousel-logo .actualites-slider .slide:not(.slick-center) .card-body { display: none; } .zoom {
position: relative;
overflow: hidden;
background-color: #da1620;
display: block;
}
.zoom img,
.zoom:before,
.zoom:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.zoom img {
max-width: 100%;
height: auto;
backface-visibility: hidden;
vertical-align: top;
}
.zoom:before,
.zoom:after {
content: '';
background-color: #fff;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.zoom:before {
width: 60px;
height: 1px;
left: 100%;
}
.zoom:after {
height: 60px;
width: 1px;
top: 0%;
}
.zoom a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.zoom:hover img {
zoom: 1;
filter: alpha(opacity=30);
-webkit-opacity: 0.3;
opacity: 0.3;
}
.zoom:hover:before,
.zoom:hover:after {
opacity: 1;
top: 50%;
left: 50%;
} .social-links ul {
position: relative;
display: block;
margin-top: 0;
margin-bottom: 0;
}
.social-links .social-icon-colored li {
position: relative;
display: inline-block;
margin: 0;
margin-bottom: 0;
padding-right: 0;
}
.social-links .social-icon-colored li a {
background-color: #222;
position: relative;
display: block;
height: 30px;
width: 30px;
line-height: 31px;
text-align: center;
font-size: 20px;
color: #fff;
border-radius: 50%;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.social-links .social-icon-colored li a:hover {
background-color: #b7111b;
color: #fff !important;
-webkit-transform: scale(1) rotate(-360deg);
-moz-transform: scale(1) rotate(-360deg);
-ms-transform: scale(1) rotate(-360deg);
-o-transform: scale(1) rotate(-360deg);
transform: scale(1) rotate(-360deg);
}
.social-links .social-icon-colored li a i,
.social-links .social-icon-colored li a svg {
font-size: 20px;
margin-left: 1px;
} .scroll-to-top {
position: fixed;
bottom: 15px;
right: 15px;
width: 60px;
height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
line-height: 60px;
text-align: center;
z-index: 100;
cursor: pointer;
background-color: #da1620;
display: none;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;		
}
.scroll-to-top:hover {
color: #fff;
background-color: #222;
} .erreur {
height: 100%;
background-color: #f8f9fa;
}
.erreur .text-wrapper {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.erreur .title {
font-size: 5em;
font-weight: 700;
color: #222;
position: relative;
text-align: center;
}
.erreur .subtitle {
font-size: 1.5em;
font-weight: 700;
color: #da1620;
position: relative;
text-align: center;
}
.erreur .buttons { margin-top: 4em; }
.erreur .buttons a.button {
background-color: #222;
display: block;
font-weight: 700;
text-decoration: none;
padding: 15px;
text-transform: uppercase;
color: #fff;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.erreur .buttons a.button:hover {
background-color: #fff;
color: #da1620;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.erreur .subtitle:before,
.erreur .title:before {
content: attr(data-content);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
-webkit-animation: noise-anim-2 3s infinite linear alternate-reverse;
animation: noise-anim-2 3s infinite linear alternate-reverse;
}