@charset "UTF-8";
/* CSS Document */


@font-face {
    font-family: 'hacenalgeria';
    src: url('../fonts/Hacen-Algeria.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'hacenalgeriabold';
    src: url('../fonts/Hacen-Algeria-Bd.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{
  --primColor : #8b5f36;
  --primColorRGB : 139,95,54;
  --secColor : #c29666;
  --secColorRGB : 194,150,102;
  --thirdColor: #383838;
  --fourthColor: #ffe6d7;
  --fourthColorRGB: 255,230,215;
  --darkColor : #523628;
  --darkColorRGB : 82,54,40;
}


html{ height: 100%;}
body{
    margin:0; font-family:'hacenalgeria', sans-serif; font-size: 20px; line-height: 30px;
    text-align: justify; color: #383838; height: 100%; min-height: 100%; position: relative;
    background: url(../img/bg.gif);
}
header, section, footer, article, aside{ display:block;}
a{ color: inherit; text-decoration: none;
    transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}
a.link{ color: var(--primColor); }
h1, h2, h3, h4, h5{ font-weight: normal; font-family: 'hacenalgeriabold', sans-serif;}
*{ box-sizing: border-box; }
#fancybox-wrap, #fancybox-outer, #fancybox-content{ box-sizing: content-box !important; }


.wrapper{ width: 100%; height: 100%; margin: auto; padding-top: 252px}
.container{ width: 95%; max-width: 1280px; margin: auto; overflow: hidden;}
.container-l{ width: 95%; max-width: 1920px; margin: auto;}
.container-s{ width: 95%; max-width: 1000px; margin: auto; }
.max1000{ width: 100%; max-width: 1000px; margin: auto; }
.text_content{ width: 100%; max-width: 950px; margin: auto; }
.text_wrapper{ max-width: 750px; margin: auto; }
.second_texte{ margin-top: 40px; }

header{ width: 100%; height: 252px; position: absolute; top: 0; left: 0}
header .container{ overflow: visible; }
header .logo{ display: block; padding: 20px 0; float: right;}
header .logo img{ display: block; border: 0; margin:auto; width:190px}

header .top_menu{ float:left; margin: 20px 0 0 0;}
header .top_menu a{ display:block; text-align:center; }
header .top_menu a img{ display:block; margin:auto; width: 80px;}
header .top_menu span{ display:block; margin-top:5px; font-family:"hacenalgeria", sans-serif; color:var(--secColor); font-size:15px; }

.top_header{ text-align:center; font-size:13px; color:#FFF; padding:10px 0; background:var(--primColor); }
.top_header .date_menu{ float:right; }
.top_header .top_nav{ float:left; font-size: 19px;}
.top_header .top_nav li{ display:block; float:right; }
.top_header .top_nav a{
    display:block; width: 25px; height: 25px; line-height: 25px;
    text-align: center;
}
.top_header .top_nav img{ display:block; height:22px; }
.top_header ul{ list-style-type:none; margin:0; padding:0 }
.top_header ul li{ display:inline-block; padding:0 12px; position:relative; }
.top_header ul li+li:before{
    display: block; content: ""; width: 1px; height: 20px;
    background: rgba(255,255,255,0.5);
    position: absolute; right: 0; top: 2px;
}


header nav{
    font-family: 'hacenalgeria', sans-serif; font-size: 18px;
    text-align: center; border: solid 1px rgba(var(--primColorRGB), 0.2);
    border-left: none; border-right: none;
}
header nav .container{ overflow: visible; }
header nav ul{ list-style-type: none; margin: 0; padding: 0;}
header nav ul li{ display:inline-block; position:relative; }
header nav ul li+li{ margin-right: 48px; }
header nav ul li a{
    display: block; height: 46px; line-height: 46px;
    position: relative; padding: 0 15px;
}
header nav ul li a:after{
  display: block; content: ""; width: 100%; height: 3px;
  position: absolute; bottom: -2px; left: 0;
  background: rgba(var(--secColorRGB),0); transition: 0.3s;
  transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
}
header nav ul li a:hover, header nav ul li a.activ{ color: var(--secColor); }
header nav ul li a:hover:after, header nav ul li a.activ:after{
   background: rgba(var(--secColorRGB),1);
}

header nav ul.sub-menu{
    width: 200px; position: absolute; right: 0; top: 46px; margin: 0;
    font-size: 14px; z-index: 1000; text-transform: none;
    background: rgba(var(--secColorRGB), 0.9); display: none;
    border-radius: 0 0 15px 15px;
}
header nav ul.sub-menu li{
    display: block; float: none; margin: 0;
    -webkit-transition: 200ms ease-in;
    -moz-transition: 200ms ease-in;
    -o-transition: 200ms ease-in;
    transition: 200ms ease-in;
}
header nav ul.sub-menu li+li{ border-top: solid 1px rgba(255,255,255,0.2); }
header nav ul.sub-menu li a{
    display: block; width: 200px; height: auto; line-height: 20px; padding: 10px; text-align: right; border-bottom: none;
    color: #FFF;
}
header nav ul.sub-menu li a:after{ display: none; }
header nav ul.sub-menu a:hover{ background: var(--primColor); color: #FFF; }
header nav ul li:hover > ul.sub-menu{ display: block; }

header nav ul.sub-menu .sub-menu{ top:0; right:100%; }


header .showMenu{ display: none;}
header nav.phoneNav{ display: none;}

header.sticky{
    position: fixed; top: 0; left: 0; z-index: 1000; background: var(--fourthColor);
    box-shadow: 0 0 7px rgba(0,0,0,0.2); height: auto;
}
header.sticky .logo, header.sticky .top_header, header.sticky .top_menu{ display: none; }



header .searchBar{
  width: 100%; position: fixed; top: 0; left: 0;
  background: var(--primColor); display: none;
}
header .searchBar form{ margin: 0; padding: 15px 0 15px 40px;}
header .searchBar .input{
  height: 45px; line-height: 45px; position: relative;
  padding: 0 25px; background: #FFF; border-radius: 45px;
}
header .searchBar input{
  display: block; width: 100%; height: 45px; line-height: 45px;
  padding: 0 5px; border: none; outline: none;
}
header .searchBar form a{
  display: block; height: 45px; line-height: 45px;
  position: absolute; top: 0; left: 20px;
  margin-right: 5px; font-size: 22px; color: var(--secColor);

}
header .searchBar a.close{
  display: block; height: 45px; line-height: 45px;
  color: #FFF; font-size: 22px;
  position: absolute; top: 15px; left: 30px;
}

/*BANNER*/
.bannerBlock{ width: 100%; height: auto; margin: auto; margin-top: 20px; position: relative;}
.bannerBlock .banner{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.bannerBlock .bannerContent{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; overflow: hidden;
}
.coverBlock .bannerContent{ align-items: flex-end; padding-bottom: 50px; }
.bannerContent .content{ width: 100%; text-align:right; position: relative; z-index: 2;}
.bannerBlock .bannerContent .container{ position: relative; overflow:inherit; }
.bannerBlock .bannerContent h1, .bannerBlock .bannerContent h2{
  color: #FFF; font-size: 50px; line-height: 60px;
  font-family: 'hacenalgeriabold', sans-serif; margin: 0 0 5px 0;
}
.bannerBlock .bannerContent .sub_title{ font-family: 'hacenalgeria', sans-serif; font-size:21px; margin:0 0 10px 0 }
.bannerBlock .bannerContent p{
    margin: 0; color: #FFF;
}
.bannerContent.cover_page::after{
  display: block; content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; background-image: linear-gradient(to left, rgba(var(--primColorRGB), 0.9), rgba(var(--primColorRGB), 0.6), rgba(var(--primColorRGB), 0)); z-index: 1;
}

.bannerBlock .banner .item, .bannerBlock .banner  .only_item{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.bannerBlock .banner .item+.item{ display: none;}
.bannerBlock .banner .item img, .bannerBlock .banner .only_item img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.bannerBlock .dots{ width: 100%; position: absolute; bottom: 60px; text-align: center;}
.bannerBlock .dots a{
  display:inline-block; width:30px; height:5px; 
  position: relative; background: #FFF; opacity: 0.4;
}
.bannerBlock .dots a+a{ margin-right:7px;}
.bannerBlock .dots a:hover,.bannerBlock .dots a.activ{ transform: scale(1.2); opacity: 1;}
.bannerBlock .dots a:hover:after,.bannerBlock .dots a.activ:after{opacity: 0.6;}
.bannerBlock .arrows{ width: 100%; position: absolute; top: 47%;}
.bannerBlock .arrows a{ display: block; color:#FFF; font-size: 50px; margin: 0 13px;}
.bannerBlock .arrows a.previous{ float: left;}
.bannerBlock .arrows a.next{ float: right;}


.stats_banner{
    background:var(--secColor); padding: 0 20px; height:56px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 20px;
}
.home_stats_banner{
    width:90%; max-width: 500px; margin: auto;
    position: absolute; left: 0; right: 0; bottom: -28px; 
}

.stats_banner .stats_banner_item{ width:33.33%; padding:0 5px }

.stats_banner .stats_banner_item+.stats_banner_item, .fiche_stats_banner .stats_banner_item+.stats_banner_item{ border-right:solid 1px rgba(255, 255, 255, 0.3); }
.stats_banner_number{ font-family: 'hacenalgeriabold', sans-serif; color:var(--primColor); font-size:29px; padding-left:10px }
.stats_banner_number .stats_unit{ font-size:25px; color:var(--thirdColor); }
.stats_banner_number .stats_unit sup{ font-size:15px }
.stats_banner_number .stats_value{ color: var(--primColor); font-size: 22px;}
.stats_banner_title{ font-family: 'hacenalgeria', sans-serif; font-size:15px; line-height: 20px; text-align:right; }
.fiche_stats_banner .stats_banner_number{ padding-left:0 }
.fiche_stats_banner .stats_banner_title{ text-align:center; margin:5px 0; }

.fiche_stats_banner{
  display: flex; margin-top:20px; text-align:center; height:80px; width: max-content; max-width: 100%;
  background:var(--secColor); box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 20px;
}
.fiche_stats_banner .stats_banner_item{ width:inherit; flex-direction:column; padding: 10px 30px; }


@media (max-width: 1200px) {
    .bannerBlock .bannerContent h1{ font-size: 40px; line-height: 50px; margin: 0 0 10px 0; }
    .bannerBlock .bannerContent p{ font-size: 19px; line-height: 25px; }
}
/*END OF BANNER*/

/*ficheCover*/
.ficheCover{
  width: 100%; height: auto; margin-top: 20px;
  background: url(../img/bg-banner.jpg) no-repeat bottom right; background-size:cover; position: relative;
}
.ficheCover_container{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; color: white;
}
.ficheCover_right{ width: 66.66%;}
.ficheCover_content{ padding: 0 100px 0 30px;}
.ficheCover h1{ font-size: 44px; line-height: 50px; text-align: right; margin: 0 0 10px 0;}
.ficheCover .sub_title{font-size:19px; line-height: 25px; margin:0 0 8px 0 }
.ficheCover p{ margin: 0;}
.ficheCover_img{ width: 33.33%; height: 100%; position: relative; overflow: hidden;}
.ficheCover_img img{
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 0 50px 50px 0; overflow: hidden;
}
.ficheCover_img::after{
  display: block; content: ""; position: absolute; top: 0; right: 0;
  width: 100%; height: 100%; border-right: solid 10px rgba(var(--secColorRGB),0.8);
  border-radius: 50px;
}
.ficheCover .fiche_stats_banner{ background: rgba(var(--darkColorRGB), 0.6); border: solid 1px rgba(var(--secColorRGB), 0.2); height: 90px; align-items: center;}
.ficheCover .stats_banner_item{ align-items: center;}
.ficheCover .stats_banner_item+.stats_banner_item{border-right:solid 1px rgba(var(--secColorRGB), 0.2); }
.ficheCover .stats_banner_title{ color: var(--fourthColor); margin: 0 0 5px 0; }
.ficheCover .stats_banner_number, .ficheCover .stats_unit{ color: white;}

@media (max-width: 1440px) {
  .ficheCover_content{ padding: 0 50px 0 30px;}
}
/*End of ficheCover*/

.slider{ width: 100%; height: 50vh; margin: auto; position: relative; background: #000;}
.slider .banner{position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
.back_img{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; overflow: hidden;
}
.back_img img{
  display: block; width: 100%; height: 100%;
  margin: auto; object-fit: cover;
}
.slider .backVideo{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
.slider .backVideo iframe{ width: 200%; height: 200%; position: absolute; left: -50%; top: -50%;}
.slider .backVideo:after{
  display: block; content: ""; width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}

.slider .layers{
  display: table; width: 100%; height: 100%;
}
.slider .layers .content{
  display: table-cell; width: 100%; height: 100%; position: relative;
  vertical-align: middle; color: #FFF; text-align: center;
}
.slider .layers .box{ width: 100%; max-width: 1280px;}
.slider .layers h1, .slider .layers h2{
  font-size: 42px; line-height: 50px; font-family: 'hacenalgeriabold', sans-serif;
  text-transform: uppercase;
  color: #FFF; margin: 0 0 10px 0;
}
.slider .layers h1 .line2{ display: block; font-size: 27px; }
.slider .layers p{
  font-size: 23px; line-height: 30px; text-transform: uppercase; font-family: 'hacenalgeria', sans-serif;
  width: 100%; max-width: 700px; margin: auto;
}

.page_header{ position: relative; width: 100%; height: auto; text-align: center;}
.page_header img{ display: block; width: 100%;}



.breadcrumb{ text-align: right;}
.breadcrumb ol{
  list-style-type: none; margin: 0; padding: 0;
  font-size: 13px;
}
.breadcrumb li{
  display: inline-block;
}
.breadcrumb li+li:before{
    padding: 0 8px;
    font-size: 12px; color: var(--secColor);
    content: ""; font-family: 'FontAwesome', sans-serif;
}
.breadcrumb a{ color: var(--secColor); }
.breadcrumb a:hover{ color:var(--primColor); }

.page_title .breadcrumb{ color:#FFF }
.page_title .breadcrumb a{ color: #FFF; }
.page_title .breadcrumb a:hover{ color:var(--secColor); }



.buttons a, .buttons input{
  display: inline-block; padding: 0 35px; margin: 20px 0; text-transform: uppercase;
  height: 55px; line-height: 55px; border-radius: 30px;
  font-size: 15px; font-family: 'hacenalgeria', sans-serif; border: solid 1px; position: relative;
}
.buttons.smallButtons a, .buttons.smallButtons input{
    padding: 3px 15px; margin: 10px 0; height: auto; line-height: initial;
    border-radius: 10px; text-align: center;
}
.buttons a+a{ margin-right: 20px !important; }
.buttons.smallButtons a+a{ margin-right:10px !important; }

.buttons .primButton{ background: var(--primColor); color: #FFF; border-color: var(--primColor);}
.buttons .primButton:hover{ background: #FFF; color: var(--primColor); }
.buttons .secButton{ background: var(--secColor); color: #FFF; border-color: var(--secColor); }
.buttons .secButton:hover{ background: #FFF; color: var(--secColor); }
.buttons .thirdButton{ background: var(--thirdColor); color: #FFF; border-color: var(--thirdColor); }
.buttons .thirdButton:hover{ background: #FFF; color: var(--thirdColor); }
.buttons .tranparentButton{  color: #FFF; border-color: #FFF; }
.buttons .tranparentButton:hover{ background: #FFF; color: var(--secColor); }
.buttons a.icon_button{ padding: 0 60px 0 20px;}

section.pageSection{ padding-top: 150px !important;}

article{ padding: 35px 20px; }
article p{ margin: 0 0 20px;}
article p strong{ font-family: 'hacenalgeriabold', sans-serif; font-weight: normal; }
article+article{ margin-top: 35px;}

p.intro{ color: var(--primColor); text-transform: uppercase; font-size: 21px; }

.title{ margin: 40px 0; position: relative;}
.title h2, .title h1{
    padding: 0; text-transform: uppercase;
    font-family: 'hacenalgeriabold', sans-serif; font-size: 32px; line-height: 40px; color: #000;
    margin: 0; text-align: center;
}
.title h2:after, .title h1:after{
    display: block; content: ""; width: 120px; height: 2px; background: var(--primColor);
    margin: 5px auto;
}
.title p, .title h1 span{
    font-family: 'hacenalgeria', sans-serif; font-size: 20px; color: var(--primColor);
    text-transform: uppercase; text-align: center; display: block;
}

h1{ text-transform: uppercase;}
.pageSection article h2{ font-size: 21px; line-height: 25px; color: #000; margin: 10px 0 20px 0; padding: 0; position: relative;}
.pageSection article h2:after{
    content: ''; display: block;
    width: 80px; height: 1px;
    background: #DB652F; margin-top: 10px;
}
h2.aside_title{ color: #000; font-size: 19px; text-transform: uppercase; }
.pageSection h1{ text-align: left;}

article h3{
  font-size: 19px; color: var(--primColor); margin: 20px 0 5px 0; text-transform: uppercase; text-align: right;
  font-family: 'hacenalgeria', sans-serif;
}


article h4{ font-size: 17px; color: #000; margin: 20px 0 5px 0; text-transform: uppercase;}

article .signature{ font-family: 'hacenalgeriabold', sans-serif; }
article .signature span{ display: block; font-family: 'hacenalgeria', sans-serif; }

.block{ padding: 50px 0; }
.article+.article{ margin-top: 80px; }
.article .article_title{ margin: 30px 0; color: var(--primColor); font-family: 'hacenalgeria', sans-serif;}
.article .article_title h1, .article .article_title h2{
  font-family: 'hacenalgeria', sans-serif; text-transform: uppercase; text-align: right;
  font-size: 46px; line-height: 53px; margin: 0 0 5px 0;
}
.article_title p{ font-size:22px; }
.article .article_title.left_title h2, .article .article_title.left_title p{ text-align: left; }
.article_title .article_title_icon{ width:90px; float:right; border-left:solid 3px var(--secColor); }
.article_title .article_title_content{ margin-right:110px }
.article_title .article_title_content h1, .article_title .article_title_content h2{ font-size:35px }
.article_title .article_title_content p{ font-size:19px }

.soon_title h1{ text-align: center; font-size: 55px; line-height: 65px; color: var(--primColor); margin: 100px 0 0;}


.border_sep{ width: 100%; border-top: solid 1px #E1E1E1; margin-top: 30px; }


.blue_block{ background: var(--primColor); color: #FFF;}
.gradient_block{
  background-image: linear-gradient(45deg, var(--primColor) 10%, var(--secColor));
  color: #FFF;
}
.gradient_block .section_title, .gradient_block .section_title h2, .blue_block .section_title, .blue_block h2{ color: #FFF; }



.page_title{ width: 100%; height: auto; overflow: hidden; position: relative; padding-bottom: 30px; margin-top: 20px;}
.page_title_content{ width: 100%; position: absolute; bottom: 20px; text-align:right;}
.page_title .back_img{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.page_title .back_img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
/*.page_title .back_img:after{
    display: block; content: ""; width: 100%; height: 100%; background-image: linear-gradient(to top, rgba(var(--secColorRGB), 1), rgba(var(--secColorRGB), 0.6), rgba(44, 5 , 25, 0));
    position: absolute; top: 0; left: 0;
}*/
.page_title_content p{ color: #FFF; text-transform: uppercase; font-size: 19px; font-family: 'hacenalgeria', sans-serif;  }



.page_title h1, .page_title h2{
  font-size: 41px; line-height: 50px; text-transform: uppercase;
  text-align: right; font-family: 'hacenalgeriabold', sans-serif; color: #FFF;
}
.page_title h1:after, .page_title h2:after{
  display: block; content: ""; width: 75px; height: 2px;
  background: var(--secColor); margin-top: 5px;
}




/*flip_list*/
.flip_list .flip_list_item{
  position: relative; height: 100%; margin: 18px;
  transition: 0.5s;
}
.flip_list .flip_front{
  height: 100%; position: relative; transition: 0.5s; background-image: linear-gradient(to bottom , var(--primColor) 0%, var(--darkColor) 100%);
  border-radius: 20px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px; display: flex; flex-direction: column;
}
.flip_list .flip_front::before{
  display: block; width: 100%; height: 100%;
  position: absolute; top: 0; left: 0; content: ""; 
  background: url(../img/bg-composant-item.png) no-repeat center center; background-size: cover;
}
.flip_list .flip_front_content{ position: relative;}
.flip_list .flip_front .img{ margin-top: auto; position: relative;}
.flip_list .flip_front .img img{ width: 100%; display: block; border-radius:10px; overflow:hidden; }
.flip_list .flip_front_content h3{
  color: var(--fourthColor); font-size: 27px; line-height: 33px;
  margin: 0 0 10px 0; padding: 0; font-family: 'hacenalgeria', sans-serif;
}

.flip_back{
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; opacity: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: #FFF; border-radius: 30px; overflow: hidden;
  transition: 0.5s; transform: rotate3d(0,1,0,180deg);
}
.flip_back .flip_back_content{ padding: 25px; font-size: 15px;}
.flip_back .flip_back_content h3{ margin: 0 0 10px 0; font-size: 33px; line-height: 33px; }
.flip_back .flip_back_content p{ margin:0; padding:0; }

.flip_list .flip_list_item:hover{ transform:scale(1.1); }
.flip_list .flip_list_item:hover .flip_front{ transform: rotate3d(0,1,0,180deg); opacity: 0;}
.flip_list .flip_list_item:hover .flip_back{ transform: rotate3d(0,1,0,0);  opacity: 1;}

.flip_list .f-carousel__viewport{ padding-bottom: 30px;}


.last_news_posts .carousel__button.is-prev{ right : -50px; left: inherit;}


.flip_list .f-button svg{ color:var(--primColor); }
.flip_list .is-horizontal.is-rtl .f-carousel__nav .f-button.is-next{ left:-30px }
.flip_list .is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev{ right:-30px }
.flip_list .f-carousel__dots{ gap:10px }
.flip_list .f-carousel__dots li button{ width: inherit;}
.flip_list .f-carousel__dots .f-carousel__dot{ width:30px; height:6px; border-radius:2px; background:var(--secColor); }
/*End of flip_list*/



/*centres_list*/
.centres_list_item{ margin:20px 30px; margin-bottom:50px; height:100%; }
.centres_list_img{ position:relative; height: auto; margin-bottom:8px }
.centres_list_img:before{
    display: block; content: ""; width: 165px; height: 20px;
    background: var(--secColor); border-radius: 20px 20px 0 0;
    position: absolute; top: -20px; left: 0; right: 0; margin: auto;
}
.centres_list_img .img{ overflow: hidden; border-radius:30px; width:100%; height:100%; position: absolute; top: 0; right: 0; }
.centres_list_img .img img{
    display:block; width: 100%; height: 100%; object-fit: cover;
    
}
.centres_list_title{ text-align:center; }
.centres_list_title h3{ text-align:center; color:var(--thirdColor); margin:0 }
/*End of centres_list*/


/*svg_map*/
.svg_map{ position:relative; }
.svg_map path{
    fill: var(--primColor); fill-opacity:0.6; stroke:#FFFFFF; stroke-width:0.5;
    transition: 0.3s;
}
.svg_map path:hover, .svg_map .activ path{fill-opacity:1;}
.svg_map .map_markers .marker{
    position: absolute; width: 4%; height: auto;
    display: none; transition: 0.3s;
}
.svg_map .map_markers .marker.activ{ display:block; }
.svg_map .marker_content{ position: relative; width:100%; height:auto; }
.svg_map .marker_content img{ width: 100%; }
.svg_map .marker_content .marker_title{
  display: block; padding: 4px 10px; white-space: nowrap;
  border: solid 2px var(--primColor); background: rgba(255,255,255,0.5);
  font-family: 'hacenalgeria', sans-serif; text-transform: uppercase; font-size: 13px;
  text-align: center; line-height: 1; transform: translate(-50%, 0);
  position: absolute; top: -75%; left: 50%;
  border-radius: 10px;
}


.svg_map .marker1{top: 0%; right: 25%;}
.svg_map .marker2{top: 5%; right: 10%;}
.svg_map .marker3{top: 13%; right: 23%;}
.svg_map .marker4{top: 11%; right: 30%;}
.svg_map .marker5{top: 20%; right: 30%;}
.svg_map .marker6{top: 16%; right: 40%;}
.svg_map .marker7{top: 24%; right: 48%;}
.svg_map .marker8{top: 28%; right: 25%;}
.svg_map .marker9{top: 40%; right: 45%;}
.svg_map .marker10{top: 49%; right: 54%;}
.svg_map .marker11{top: 60%; right: 65%;}
.svg_map .marker12{top: 84%; right: 79%;}

.dataLoader{text-align: center; font-size: 50px; margin-top: 50px; display: none;}
.dataLoader.show{ display: block;}
.failResponse{ text-align: center; margin-top: 50px; color: var(--thirdColor); font-size: 40px;}
/*End of svg_map*/


.fiche_map{ height:350px; border-radius:15px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.2) }
.fiche_map iframe, .fiche_map #map{ width:100%; height: 100%; }
.leaflet-control-attribution { display: none;}


.objectGal{ width:100%; direction: ltr; margin-top: 20px; }
.objectGal .mainImg{ width: 100%; height: auto; position: relative; }
.objectGal .mainImg img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px}
.objectGal .mainImg .img{
  height: 100%; object-fit: cover;
  position: absolute; top: 0; left: 0;
}
.objectGal .f-carousel{ height:400px }


/*section_gallery*/
.gal_block{ padding: 40px; }
.section_gallery{ width: 100%; overflow: hidden; margin: 30px 0; }
.section_gallery_item{ display: block; position: relative; height: auto; margin: 10px; }
.section_gallery_item .section_gallery_img{
  width: 100%; height: 100%; overflow: hidden;
  position: absolute; top: 0; left: 0; border-radius: 20px;
}
.section_gallery_item .section_gallery_img img{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s
}
.section_gallery_item .section_gallery_img:after{
  display: block; content: ""; width: 100%; height: 100%;
  position: absolute; top: 0; left: 0; background:rgba(34,64,105,0);
  -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s
}
.section_gallery .section_gallery_title{
  width: 100%; position: absolute; bottom: 20px; left: 0;
  text-align: left; padding: 0 30px;
}
.section_gallery_item .section_gallery_title h3{
  font-size: 19px; margin: 0; padding: 0; font-family: 'hacenalgeria', sans-serif;
  color: #FFF; text-transform: uppercase;
}
.section_gallery_item .playIcon{
  width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-size: 80px; color: rgba(255,255,255,0.7);
  text-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.section_gallery_item:hover .section_gallery_img img{ width: 110%; height: 110%; top: -5%; left: -5%; }
.section_gallery_item:hover .section_gallery_img:after{background:rgba(0,0,0,0.3);}
/*end of section_gallery*/



/*monuments*/
.monuments_list{ background:rgba(255, 255, 255, 0.4); border-radius:20px; margin-top:50px }
.advanced_search_form{
    padding: 10px; border-radius: 20px; background: var(--secColor);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); position: relative; top: -30px;
    width: 80%; max-width: 1000px; margin: auto;
}
.advanced_search_form .filter_item{ flex: auto; }
.advanced_search_form .filter_item .input, .advanced_search_form .filter_search .input{ padding: 2px;}
.advanced_search_form .filter_item .input input, .advanced_search_form .filter_item .input select{
  width: 100%; height: 40px; border: none; border-right: solid 3px var(--primColor); background: var(--fourthColor);
  color: #222; display: block; padding: 0 10px; border-radius: 10px;
  font-family: 'hacenalgeria', sans-serif;
}

.advanced_search_form .filter_item .input select{
  background: url('../img/selectArrowIcon.gif') no-repeat left, var(--fourthColor); padding: 0 10px 0 20px;
}

.advanced_search_form .select{ position: relative;}

.advanced_search_form .select select{
  -webkit-appearance :none; -moz-appearance :none; -ms-appearance :none; -o-appearance :none; appearance :none;
  display: block; border: solid 1px #bababb; width: 100%;
  padding: 0 45px 0 15px;
}
.advanced_search_form .filter_search{flex: initial;}
.advanced_search_form .search_submit{
  display: block; background: var(--primColor); color: #FFF; padding: 0 10px;
  text-align: center; height: 40px; line-height: 40px; border-radius: 10px; border: none;
}
.advanced_search_form .search_submit span{
  margin-left: 5px; font-family: 'hacenalgeria', sans-serif;
}


.monuments_list .one_third{ padding: 15px; }
.monuments_item{
  display: flex; flex-direction: column; height: 100%; padding-top: 20px;
}
.monuments_item .monuments_location{
    font-size: 15px; background: rgba(var(--secColorRGB), 0.8); color: #FFF; font-family: 'hacenalgeriabold', sans-serif;
    width: 135px; height: 40px; line-height: 40px; text-align: center; border-radius: 0 0 5px 5px;
    position: absolute; top: 0; left: 0; right: 0; margin: auto;
}


.monuments_item_content{
    background: #FFF; padding: 30px 50px; border-radius: 8px; font-size:15px;
    margin: -20px 10px 0 10px; position: relative; transition: 0.3s;
    display: flex; flex-direction: column; flex: 1;
}
.monuments_item:hover .monuments_item_content{ box-shadow:0 0 20px rgba(0, 0, 0, 0.1); }
.monuments_item h2{ text-align: right; font-size: 23px; color:var(--primColor); transition:0.5s; margin:0 0 20px 0; }
.monuments_item:hover h2{ color:var(--secColor); }
.monuments_item .monuments_button{
  color: #000; text-align: center; margin-top: auto;
  font-family: 'hacenalgeria', sans-serif; font-size: 17px;
}
.monuments_item .monuments_button span{
    display:inline-block; width:25px; height: 25px; line-height: 25px;
    text-align: center; background: var(--fourthColor);
    border-radius: 100%; font-size: 10px; margin-left: 10px;
    position: relative; top: -5px;
}
.monuments_item .monuments_button span i{ position:relative; top:2px;}
.monuments_item .monuments_img{ width: 100%; height: 270px; border-radius:8px; overflow:hidden; position: relative;}
.monuments_item .monuments_img img{
  display: block; width: 100%; height: 270px;
  object-fit: cover; transition: 0.3s;
}
.monuments_item:hover .monuments_img img{ transform: scale(1.05); }
/*End of monuments*/

/*searchList*/
.searchList{ padding: 40px;}
.list_item{height: auto;}
.list_item+.list_item{ margin-top: 20px;}
.list_item .list_item_content{
  display: flex; flex-wrap: wrap; align-items: center; overflow: hidden;
  background: white; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  transition: 0.3s; height: 100%;
}
.list_item .list_item_content:hover{ transform: scale(1.025); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.list_item_img{ width: 200px; height: 100%; overflow: hidden;}
.list_item_img img{ display: block; width: 100%; height: 100; object-fit: cover;}
.list_item_details{ width: calc(100% - 300px); padding: 0 30px; font-size: 15px;}
.list_item_button{ width: 100px; margin-right: auto;}
/*End of searchList*/

.no_result{
  text-align: center; font-size: 40px; line-height: 55px;
  padding: 100px 0; font-family: 'hacenalgeria'; width: 100%;
  color: var(--primColor);
}



/*news*/
.news_tabs{ margin-bottom: 40px; }
.news_tab{
  display: block; height: 35px; line-height: 35px; padding: 0 15px; align-items: center;
  font-family: 'hacenalgeriabold', sans-serif; text-transform: uppercase; font-size: 15px;
  border: solid 2px rgba(39, 135, 201, 0); margin: 10px 25px;
  border-radius: 20px;
}
.news_tab.active, .news_tab:hover{
  border: solid 2px rgba(39, 135, 201, 1);
}

.news_list .one_third{ padding: 15px; }
.news_item{
  display: flex; flex-direction: column; min-height: 100%; padding-top: 20px;
   border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 8px rgba(0,0,0,0.09);
}
.news_item .news_item_header{ display: flex; padding: 0 20px; align-items: center; justify-content: space-between; }
.news_item .news_category{
  padding: 0 10px; font-family: 'hacenalgeriabold', sans-serif; font-size: 13px; color: #FFF; 
  text-transform: uppercase; border-radius: 20px; height: 25px; line-height: 25px;
}
.news_item .news_category.publication{ background: var(--secColor); }
.news_item .news_category.news{ background: var(--primColor); }
.news_item .news_category.awards{ background: #000; }

.news_item .news_date{ font-size: 13px; }
.news_item h2{ padding: 0 20px; text-align: left; font-size: 19px; }
.news_item .news_button{
  margin-top: auto; margin-bottom: 35px; padding: 0 20px;
  font-family: 'hacenalgeria', sans-serif; font-size: 17px;
}
.news_item .monuments_img{ width: 100%; overflow: hidden; }
.news_item .monuments_img img{
  display: block; width: 100%; height: 200px;
  object-fit: cover; transition: 0.3s;
}
.news_item:hover .monuments_img img{ transform: scale(1.05); }

.no_news{ text-align: center; font-size: 23px; font-family: 'hacenalgeriabold', sans-serif; color: #000; padding: 120px 0; }
.no_news_socials a{
    display: inline-block; width: 80px; height: 80px; line-height: 80px;
    border-radius: 100%; border: solid 1px var(--primColor); color: var(--primColor);
    font-size: 30px; margin: 10px;
}
.no_news_socials a:hover{ background: var(--primColor); color: #FFF; }
/*End of news*/


.pagination{ margin: 20px; text-align: center; list-style-type: none;}
.pagination li{ display: inline-block;}
.pagination a, .pagination li.active span{
  display: inline-block; font-size: 15px; height: 35px; line-height: 35px; padding: 0 10px;
  background: rgba(255,255,255,0.3); color: var(--primColor); border:solid 1px var(--primColor);
  border-radius: 5px;
}
.pagination a:hover, .pagination li.active span{background: var(--primColor); color: #FFF;}
.pagination .disabled { display: none; }

.images_banner{ width: 100%; overflow: hidden; }
.images_banner .imgFull{ margin: 0; }



.tables{ display: table; width: 100%; }
.tables .row + .row{ margin-top: 30px; }
.tables .cell{ display: table-cell;}
.tables .title_cell{width: 30%;}
.tables .text_cell{ padding: 20px;}
.tables .title_cell .imgFull{ margin-top: 0; }
.tables .title_cell h2{
  text-transform: uppercase; text-align: left;
  color: #FFF; font-size: 20px; padding: 20px;
}
.tables .title_cell h2 span{ display: block; font-size: 30px; margin-bottom: 20px; }

.tables .pink_cell{ background: #fe0047; }
.tables .orange_cell{ background: #fca145; }
.tables .green_cell{ background: #5386E4; }


/*composant_aside_modal*/
.composant_aside_modal{
  width: 100%; height: 100%; position: fixed; top: 0; right: -100%;
  background: rgba(0,0,0,0.5); z-index: 1001; transition: 0.5s;
}
.composant_aside_modal.show{ right: 0;}
.composant_aside_block{
  width: 50%; height: 100%; background: var(--fourthColor);
  position: relative;
}
.composant_aside_header{ height: 80px; padding: 20px 40px; position: relative;}
.composant_aside_header h2{ margin: 0;}
.composant_aside_header .composant_aside_close{
  display: block; width: 40px; height: 40px; line-height: 40px;
  border-radius: 100%; background: var(--primColor); color: white;
  text-align: center; position: absolute; top: 15px; left: 15px;
}
.composant_aside_content{
  padding: 40px; position: absolute; top: 80px; bottom: 0;
  overflow: auto; width: 100%;
}
.composant_aside_modal .loader{
  display: flex; width: 50%; height: 100%; font-size: 50px;
  position: absolute; top: 0; right: 0; align-items: center; justify-content: center;
}
.composant_aside_modal .loader.hidden{ display: none;}
/*End of composant_aside_modal*/


/*contact*/
.contact_block{
    background: rgba(255,255,255,0.3); border-radius: 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); padding: 40px;
}
.contact_block .contact_infos{ color:var(--secColor); padding-left:50px }
.contact_block .contact_infos h1, .contact_block .contact_infos h2{ font-size:43px; margin:0 0 20px 0; }
.contact_infos_socials{ font-size: 19px; line-height: 21px; margin-top: 20px; }
.contact_infos_socials a{ display: inline-block; margin: 0 3px; }
.contact_infos_socials .social_slug{ font-size: 12px; }


.contact .map{ width: 100%; height: 450px; margin-bottom: 30px; }
.contact .map iframe, .contact .map #map{ width: 100%; height: 100%; }
.contact label{ display: block; float: left; padding: 10px 5px;}
.contact select{ border:solid #dfdfdf 1px; width:100%; padding:8px 15px; box-sizing: border-box;}
.contact .buttons{ float: right;}
.contact .buttons a.formLink{ display: inline-block; color: #b5cf2f; padding: 0 10px;}

.dateSelector{ position: relative;}
.dateSelector a{ display: block; position: absolute; top: 10px; right: 10px;}

.input{ padding: 10px; }
.input input, .input textarea, .input select{
  display: block; width:100%; border: none; background: rgba(255,255,255,0.8);
  padding:15px; box-sizing: border-box;
  border-radius: 10px;
}
.input input::placeholder, .input textarea::placeholder{ font-family: 'hacenalgeria', sans-serif; font-size: 15px; }
.input textarea{ height: 200px; }
.contact .input input[type="submit"], .contact .input button{
  background: var(--thirdColor); color: #FFF; width: auto; position: relative;
  font-size: 21px; border: none; height: 40px; line-height: 40px; padding:0 30px; font-family: 'hacenalgeriabold', sans-serif;
  -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;
}
/*End of contact*/

/*errorPage*/
.errorPage{text-align: center;}
.errorPage h1{  text-align: center; font-size: 45px; line-height: 55px; padding-top: 50px; margin: 0 0 30px 0; color: var(--secColor);}
.errorPage h2{ font-size: 50px; line-height: 50px;}
/*end of errorPage*/

.construction_page{
  text-align: center; margin: 100px 0; color: #000; text-transform: uppercase;
  font-size: 30px; line-height: 35px; font-family: 'hacenalgeriabold', sans-serif;
}

/*simpleList*/
.simpleList, .description_bdd ul{ list-style-type: none; overflow:hidden; margin: 0;}
.simpleList li, .description_bdd ul li{ position: relative; padding: 5px 10px 5px 0; box-sizing:border-box;}
.simpleList li:before, .description_bdd ul li:before{
  content: ''; font-family: 'FontAwesome', sans-serif;
  position: absolute; right: -8px; top: 6px; font-size: 15px;
  color: var(--primColor);
}
/*end of simpleList*/

/*simpleTable*/
.simpleTable{ margin: 20px 0; width: 100%;}
.simpleTable th{
  border: none; background: var(--primColor); color: #FFF;
  font-size: 21px; line-height: 27px; font-weight: normal; padding: 5px 10px; text-align: center;
}

.simpleTable tr:nth-child(2n+2){background: rgba(var(--secColorRGB), 0.4);}
.simpleTable tr.lineTitle{ background: var(--secColor) !important; text-align: center; color: white; font-size: 21px;}
.simpleTable td{ padding: 5px 10px;}
/*end of simpleTable*/


/*Accordeon*/
ul.accordeon{ list-style-type:none; margin: 30px 0; padding:0;}
ul.accordeon .accordeonLi{ margin:0; padding: 0; }
ul.accordeon .accordeonLi+.accordeonLi{ margin-top: 15px;}
ul.accordeon .accordeonLi a.accordeonLink{
  display: block; padding: 15px; background: #ededed;
  -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
}
ul.accordeon a.accordeonLink h2, ul.accordeon a.accordeonLink h3{
  margin: 0; padding: 0; font-size: 1.1em;
  color: #000; font-family: 'hacenalgeriabold', sans-serif;
}
ul.accordeon .accordeonLi .icon{
  float: right; 
}
ul.accordeon .accordeonLi .icon img{ display: block; width: 100%; }
ul.accordeon .accordeonLi a.accordeonLink .toggle{
  height: 70px; line-height: 70px; float: right;
  font-size: 2em; color: #015673; margin-left: 10px;
}
ul.accordeon .accordeonLi a.current{
  background: #FFF;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}
ul.accordeon .accordeonItem{ display:none; padding: 10px; margin: 0 0 5px 0; font-size: 0.85em;}
/*End of Accordeon*/



.msg_ok, .msg_ko{ margin-bottom: 10px; flex-wrap: nowrap !important;}
.msg_ok .icon{
    width: 50px; display: flex;
    background: #3c763d; color: #FFF; font-size: 25px; 
}
.msg_ok .msg_txt{
  background: #dff0d8; padding: 20px; font-size: 15px; line-height: 20px;
  border: solid 1px #3c763d; color: #3c763d; 
}

.msg_ko .icon{ 
  width: 50px; display: flex;
  background: #a94442; color: #FFF; font-size: 25px;
}
.msg_ko .msg_txt{
  background: #f2dede; padding: 20px; font-size: 15px; line-height: 20px;
  border: solid 1px #a94442; color: #a94442;
}

.requiredField{ background:#dd7171 !important; color:#7d0000;}
.requiredFieldTxt{ color:#cf0000; font-size: 11px; font-weight: bold; display: none;}

.imgFull{ display: block; margin: auto; margin-top: 10px; margin-bottom: 10px; max-width: 100%;}
.imgCenter{ display: block; margin: 10px auto; max-width: 100%;}
.imgLeft{ display: block; float: left; margin: 0 20px 20px 0}

.imgBorder{ position: relative; margin: 0 20px;}
.imgBorder img{
  position: relative;  z-index: 2; overflow: hidden;
  border-radius: 10px;
}
.imgBorder:before{
  display: block; content: ""; width: 150px; height: 150px; background: var(--primColor);
  position: absolute; top: -10px; left: -10px; z-index: 1;
  border-radius: 10px;
}
.placeholder{ display: block; width: 100%; visibility: hidden;}


.row:after{ display: block; content: ""; clear: both; }
.row_flex{ display: flex;}
.flex_wrap{ flex-wrap: wrap; }
.row_flex:after{ display: block; content: ""; clear: both; }
.vcenter{
  -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center;
}
.hcenter{justify-content: center;}
.space_between{ justify-content: space-between; }
.one_half{ width: 50%; float: right;}
.one_third{ width: 33.33%; float: right;}
.one_fourth{ width: 25%; float: right;}
.two_third{ width: 66.66%; float: right;}
.three_fourth{ width: 75%; float: right; }
.one_fifth{ width: 20%; float: right; }
.one_sixth{ width: 16.66%; float: right; }



.padding5{ padding: 5px;}
.padding10{ padding: 10px;}
.padding20{ padding: 20px;}
.paddingLeft{ padding-left: 40px;}
.paddingRight{ padding-right: 40px;}
.clear{ clear: both;}
.clearRight{ clear: right;}


footer{
  width: 100%; position: relative; font-size: 15px; line-height: 21px;
  background: var(--primColor); color: #FFF;
  text-align: right; padding: 40px 0 0;
}
footer .logo{ display: block; margin-bottom: 20px; }
footer .logo img{ display: block; margin:auto; width:180px }
.footer_description{ text-align: justify; }
footer h2{ margin: 0 0 10px 0; color: #FFF; font-size: 25px;}


footer .copyright{ text-align: center;}

footer .contacts .contact_item{ padding: 15px 0; }
footer .contacts .icon{
  display: block;
  width: 35px; font-size: 20px; text-align: center; color: var(--secColor);
}
footer .contacts a:hover{ color: var(--secColor);  }
footer .contacts .text{ display: block; margin-left: 5px;}

footer .social{ margin: 10px 0; }
footer .social ul{
    list-style-type: none; margin: 0; padding: 0;
}
footer .social ul li{ display: inline-block;}
footer .social ul li+li{ margin-right: 5px;}
footer .social ul a{
    display: block; width: 50px; height: 50px; line-height: 50px;
    background: var(--secColor) ; color: var(--primColor);
    text-align: center; font-size: 18px;
    -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%;
}



.social_media{ text-align: right; }
.social_media ul.social{
    list-style-type: none; margin: 0; padding: 0;
}
.social_media ul.social li{ display: inline-block;}
.social_media ul.social li+li{ margin-left: 5px;}
.social_media ul.social a{
    display: block; width: 38px; height: 38px; line-height: 38px;
    background: var(--primColor); color: #FFF;
    text-align: center; font-size: 18px;
    -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%;
}

.social a.facebook:hover{ background: #3b5998; color: #FFF;}
.social a.twitter:hover{ background: #55acee; color: #FFF;}
.social a.google-plus:hover{ background: #dd4b39; color: #FFF;}
.social a.linkedin:hover{ background: #007bb5; color: #FFF;}
.social a.youtube:hover{ background: #bb0000; color: #FFF;}
.social a.viadeo:hover{ background: #f6876d; color: #FFF;}
.social a.instagram:hover{ background: #bc2a8d; color: #FFF;}
.social a.pinterest:hover{ background: #bd081c; color: #FFF;}
.social a.soundcloud:hover{ background: #FE5000; color: #FFF;}
.social a.spotify:hover{ background: #1ed760; color: #FFF;}



/*animations*/
@keyframes blinker {
  100% {
    opacity: 0; transform: scale(3);
  }
}


.animation-element{
    opacity: 0; position: relative;
    transition:1s;
    -o-transition:1s;
    -webkit-transition:1s;
    -ms-transition:1s;
    -moz-transition:1s;
}
.animation-element.in-view{ opacity: 1;}

.animation-element.slide-left {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-right {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-element.slide-bottom {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(0, 30px, 0px);
  -webkit-transform: translate3d(0, 30px, 0px);
  -o-transform: translate(0, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 30px, 0px);
}


.animation-element.slide-scale {
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  transform: scale(0.9);
}


.animation-element.slide-left.in-view, .animation-element.slide-right.in-view, .animation-element.slide-bottom.in-view{
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-scale.in-view{ transform: scale(1); }


/*end of animations*/