@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=poppins:300,400,700,900');
body {
    line-height: 1.7;
background-color: #f5f9f4;
    color: #5e6167;
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
}
h1, h2, h3, h4 {
font-family: poppins,Helvetica,Arial,sans-serif;
font-weight:700;
}
h2, h2 a, h2 a:hover, h2 a:focus {
   font-weight:700;
}
/**********************************header*******************************/
.scrolling-down.main-menu {padding: 5px 0;}
.navbar-toggler {
    border: none;
}
.menu-bars {
    background: #000;
}
/********************************Menu******************************************/
nav li a {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
       font-family: 'Poppins', sans-serif;
}
.overlay-nav li {
    margin-bottom: 1em;
}
/*********************************Home page***********************************/
.sow-headline-container h1.sow-headline{ font-weight: 900;}
.cl-flipbox-front-title, .cl-flipbox-back-title {
    width: 100%;
    clear: both;
    font-size: 20px;
color:#fff;
}
.cl-flipbox-front-desc, .cl-flipbox-back-desc {
color:#fff;
}
.carousel-content .content{text-align:center!important;}
.carousel-content.center{    background: rgba(6,57,74,0.93)!important;}
.home h3.widget-title{
    margin: 20px 0;
    font-weight: 600;
    font-size: 18px;
    color: #252525;
}
.serviceB{transition: all 0.5s ease 0s;}
.serviceB:hover{margin-top: -10px;
    transition: all 0.5s ease 0s;
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);}
.zina{box-shadow: inset 0 -20px 0 0 #ffe121;}
.zina2{box-shadow: inset 0 -55px 0 0 #ffe121;}
.cl-flipbox-front-desc, .cl-flipbox-back-desc {
    text-align: center;
    padding: 0 23px;
}
.box_features3{    outline: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all .5s;}
.box_features3:hover {
    z-index: 9;
    position: relative;
}
.box_features3:before, .box_features3:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 0;
    transform: translate3D(0,-100%,0);
    transition: all .5s;
background: #E31043;
}
.box_features3:before {
    width: 150%;
    transform-origin: 0 bottom;
    transform: translateX(-100%) rotate(-30deg);
    z-index: -2;
}
.box_features3:hover:before {
    left: 0;
    transform: rotate(0deg);
    transition: all .5s;
}
.box_features3:after {
    top: 0;
    left: auto;
    right: 0;
    width: 150%;
    transform-origin: right bottom;
    transform: translateX(100%) rotate(30deg);
}
.box_features3:hover:after {
    right: 0;
    transform: rotate(0deg);
    transition: all .5s;
}
.box_features3 .sow-headline-container p.sow-sub-headline,.box_features3 .sow-headline-container h2.sow-headline,.box_features3 p{    z-index: 9;
    position: relative;}
.box_features3:hover  .sow-headline-container p.sow-sub-headline{color: #ffffff!important;}
.box_features3:hover  .sow-headline-container h2.sow-headline{color: #ffffff!important;}
.box_features3:hover  p{color: #ffffff!important;}
/*****************************footer********************************/
footer{padding: 70px 0 0; color: #efefef; font-size: 14px;}
footer .footer-widget {
    color: #fff;
    margin-bottom: 1em;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
}

footer .copyright {
margin-top: 50px;
    padding-top: 20px;
        padding-bottom: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
footer ul li{     display: list-item;
    position: relative;
    width: 100%;
    text-align: left; margin-bottom: 10px;}
.custom-html-widget ul li span{color: #a6a4af;}
#back_to_top{
    background: #293f4f;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: block;
    text-decoration: none;
    border-radius: 35px;
    text-align: center;
    color: #fff;
    line-height: 50px;
    transition: all 0.3s ease;
    z-index: 99;
}
/********************************Page interne**********************/
.post-inloop{position: relative;
    padding: 30px;
    background: #fff;}
.post-inloop p{
padding-bottom: 0px;
    padding-left: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-left: 1px solid lightgray;
}
.post-inloop .col-md-7{padding-left: 60px;}
.archive h2 {
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2em;
position:relative;
    padding-bottom: 0.5em;
}
.archive h2:after {
content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    height: 3px;
    max-width: 60px;
    width: 100%;
    background-color: #ed1c24;
}
.subheader {padding: 200px 0 100px; text-align:center}
.single .related {
    color: #000;
font-family: poppins,Helvetica,Arial,sans-serif;
}
.widget_sidebar {
    margin-bottom: 50px;
    border: 2px solid #229f83;
    padding: 30px;
}
.widget_sidebar:first-child{border:none; padding:0;}
.widget_sidebar .sidebar-widget {
    color: #000;
    font-family: poppins,Helvetica,Arial,sans-serif;
    margin-bottom: 1em;
}
.archive .readmore {
    padding: 9px 25px;
    font-size: 14px;
    font-family: poppins,Helvetica,Arial,sans-serif;
}
.text-center p{text-align:center!important}
.number-icon span.number{
    padding: 18px 30px;
    border-radius: 50%;
   background: #f9f8f6;
    color: #242424;
    font-size: 30px;
    line-height: 30px;
    font-family: poppins,Helvetica,Arial,sans-serif;
border: 2px solid #dfdfdf;
}
.single .post-data{padding: 60px;
    background: #fff;
    -webkit-box-shadow: 0 15px 76px 0 rgba(0,0,0,.06);
    box-shadow: 0 15px 76px 0 rgba(0,0,0,.06);
    margin-bottom: 50px;}

.content-animated-hover{    background: rgba(63, 65, 146, 0.7)!important;}
.post-data.animate-in:before {
  background-color: #0c5972;
}
.post-data.animate-in:after {
  background-color: #0c5972;
}
/********************************responsive************************************/
@media only screen and (max-width: 900px) {
.main{padding-top: 63px;}
.home h1 {
    line-height: 32px !important;
    font-size: 27px !important;
}
.home h2 {
    line-height: 32px !important;
    font-size: 23px !important;
}
dl, ol, ul {padding-left: 0;}
.single .post-data {padding: 20px;}
.sow-headline-container h1.sow-headline{color: #252525!important;}
nav li { line-height: 30px;}
.navbar-collapse{padding: 20px 0;}
}
/****************************animate text*********************************/
.post-data{
  position: relative;
}
.post-data p, .post-data img, .post-data h2,.single .related {
  opacity: 0;
}
.post-data.animate-in p, .post-data.animate-in img, .post-data.animate-in h2,.single .post-data.animate-in .related {
  animation: textHidden 0.1s 1.1s forwards;
}
.post-data.animate-in:before, .post-data.animate-in:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10;
}

.post-data.animate-in:after {
  animation-delay: .5s;
}
.post-data.animation-ltr.animate-in:before {
  animation: revealLTR 1.8s ease;
}
.post-data.animation-ltr.animate-in:after {
  animation: revealLTR 1s .6s ease;
}
.post-data.animation-rtl.animate-in:before {
  animation: revealRTL 1.8s ease;
}
.post-data.animation-rtl.animate-in:after {
  animation: revealRTL 1s .6s ease;
}

@keyframes revealRTL {
  0% {
    width: 0;
    right: 0;
  }
  65% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@keyframes revealLTR {
  0% {
    width: 0;
    left: 0;
  }
  65% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes textHidden {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/******************************************************************/
/* ---- particles.js container ---- */
#particles-js{padding:50px 0;}
/*************************animation image home page***************************/

.effet{position: relative;
  -webkit-perspective: 360px;
          perspective: 360px;
}
.info{
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 40px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
background-color: rgba(33, 33, 33, 0.5);
text-align:center;
display: flex; 
  flex-direction: column;
  justify-content: center;
}
.sow-slider-base ul.sow-slider-images .sow-slider-image-wrapper p{    text-align: center;}
/*.info:before{
content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px solid #fff;
    opacity: 0.3;
}*/
.in-top .info{
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info{
  -webkit-transform-origin: 100% 0%;
      -ms-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info{
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info{
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info{
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info{
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info{
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info{
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}
@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}