/********************************

        GENERAL

*********************************/

.draw-border {
   box-shadow: inset 0 0 0 4px #58afd1;
   color: #fff;
   transition: color 0.25s 0.0833333333s;
   position: relative;
   background: #0895a7;
}
 .draw-border::before, .draw-border::after {
   border: 0 solid transparent;
   box-sizing: border-box;
   content: '';
   pointer-events: none;
   position: absolute;
   width: 0;
   height: 0;
   bottom: 0;
   right: 0;
}
 .draw-border::before {
   border-bottom-width: 4px;
   border-left-width: 4px;
}
 .draw-border::after {
   border-top-width: 4px;
   border-right-width: 4px;
}
 .draw-border:hover {
   color: #0895a7;
}
 .draw-border:hover::before, .draw-border:hover::after {
   border-color: #0895a7;
   transition: border-color 0s, width 0.25s, height 0.25s;
   width: 100%;
   height: 100%;
}
 .draw-border:hover::before {
   transition-delay: 0s, 0s, 0.25s;
}
 .draw-border:hover::after {
   transition-delay: 0s, 0.25s, 0s;
}
 .btn {
   border: none;
   cursor: pointer;
   line-height: 1.5;
   font: 700 1.2rem 'Roboto Slab', sans-serif;
   padding: 1em 2em;
   letter-spacing: 0.05rem;
}
 .btn:focus {
   outline: 2px dotted #55d7dc;
}
 



*{

	padding:0;

	margin:0;

  box-sizing: border-box;



}



html,body {

	overflow-x: hidden;

}

body{

	font-family: 'Roboto', sans-serif;

    color: #222222;

}



.raleway{

    font-family: 'Raleway', sans-serif;

}



.medium {

    font-weight: 500;

}



.regular {

    font-weight: 400;

}

.no-padding {

    padding: 0 !important;

}

.no-margin {

    margin: 0 !important;

}





a {

    color: black;

}

a:hover, a:focus {

    text-decoration: none;

    color: gray;

}



.form-group {

    margin-bottom: 5px;

}

.btn {

    webkit-box-shadow: initial;

    box-shadow: initial;

    font-size: 13px;

    border-radius: initial

}



.btn:hover{

    background-color: transparent; ;

    border-color: #283030  !important;

}



.form-control {

    -webkit-box-shadow: initial;

    height: 35px;

    background-color: #0895a7;

    color: white;

    border: none;

    border-radius: initial;

}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  color: white !important;

}

::-moz-placeholder { /* Firefox 19+ */

  color: white !important;

}

:-ms-input-placeholder { /* IE 10+ */

  color: white !important;

}

:-moz-placeholder { /* Firefox 18- */

  color: white !important;

}



.semi-bold {

    font-weight: 600;

}

.bg_black {

    background-color: #000;

}



.bg_gray{

    background-color: #f4f7f9;

}





.bg-green {

    background-color: #00421f;

}



.bg-black {

    background-color: #222222;

}



.bg-black-1 {

    background-color: #212121;

}



.bg-black-2 {

    background-color: #1b1b1b;

}





.bg-green-2{

    background-color: #9fc637;

}

.bg-orange {

    background-color: #f65118;

}



.bg-orange-2 {

    background-color: #fcab2b;

} 

.green_text {

    color : #00421f !important;

}



.green_text_2 {

    color: #3a565a;

}

.white_text {

    color: #fff !important;

}

.orange_text {

    color: #f65118;

}



.yellow_text{

	color: #fecf15;

}

.gray_text{

    color: #757575;

}

.gray_text_2{

    color: #3a565a;

}



.xtrabold{

    font-weight: 800;

}



.margin-left-40{

  margin-left: 40px;

}





.padding-lr-100 {

    padding-right: 100px;

    padding-left: 100px;

    line-height: 1.8;

}



.padding-lr-50 {

    padding-right: 50px;

    padding-left: 50px;

    line-height: 1.8;

}

.padding-top-10 {

    padding-top: 10px;

}





.padding-bottom-10 {

    padding-bottom: 10px;

}

.padding-right-10 {

    padding-right: 10px;

}





.padding-top-8 {

    padding-top: 8px;

}



.padding-bottom-8 {

    padding-bottom: 8px;

}



.no-padding-left {

	padding-left: 0

}



.no-padding-right{

	padding-right: 0

}



.padding-top-50 {

    padding-top: 50px;

}



.padding-bottom-50 {

    padding-bottom: 50px;

}



.padding-top-30 {

    padding-top: 30px;

}



.padding-bottom-30 {

    padding-bottom: 30px;

}



.padding-top-20 {

    padding-top: 20px;

}



.padding-bottom-20 {

    padding-bottom: 20px;

}



.padding-left-20 {

    padding-left: 20px;

}

.padding-right-20 {

    padding-right: 20px;

}



.margin-top-20 {

    margin-top: 20px

}



.margin-bottom-45 {

    margin-bottom: 45px;

}



.margin-bottom-45 {

    margin-bottom: 45px;

}



.gray-border{

    border: 4px solid #f6f6f6;

    border-radius: 4px;

}

.text-gray {

    color: #2e2e2e;

}



.text-small {

    font-size: 13px;

}



.text-small-xs {

    font-size: 11px;

}



.custom-title{

    font-weight: 500;

    position: relative;

    color: #555555;

    font-size: 30px;

    margin-bottom: 60px;

    text-transform: uppercase;

}



.custom-title:after {

    position:absolute;

    content: "";

    left:0px;

    right: 0;

    margin: auto;

    top: 70px;

    bottom:0px;

    width:32px;

    height:18px;

    background:url(../images/1.png) center center no-repeat;

}





.contact_form .custom-title:after {

    background-image: url('../images/2.png');

}





.btn-info {

    color: #fff;

    background-color: #00bcd4;

    border-color: #fff;

}



.size-2x{

    font-size: 20px;

}



/********************************

        HEADER

*********************************/

.main_header {

    background-color: white;  

    border-bottom: 1px solid #f3f0f0;  

}



.home .main_header{

  z-index: 12;

  position: absolute;

  width: 100%;

}


#slider a{
  position: absolute;
      top: 85px;
      z-index: 2;
      background-color: #3dc5df;
      border-color: #3dc5df;
      overflow: hidden;
      font-weight: bold;
      padding: 10px;
      right: 0;
  
}
#slider a.btn:hover{
  border-color: #3dc5df !important
}





#slide-menu form input {

    height: 40px;

    width: 150px;

    display: inline-block;

    background-color: #005852;

}



#slide-menu form button {

    background-color: #3dc5df;

    height: 40px;

}





.home  header {

    position: relative;

    height: 750px;

}



section#slider {

    position: absolute;

}





#infos .phone .fa,#infos .email .fa {

    width: 30px;

    height: 30px;

    background: #3dc5df;

    line-height: 30px;

    border-radius: 50px;

    color: white;

    margin-right: 5px;

}





.donslide {

    display: table;

    width: 100%;

}

.donslide .item {

    display: table-cell;

    width: 1%;

    background: #ddd;

    height: 700px;

    transition: 0.6s ease-in-out all;

    overflow: hidden;

    position: relative;

    min-width: 65px;

}





.donslide .item:after{

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    content: "";

    opacity: 1;

}



.donslide .item-1:after {

    background-color: rgba(255, 0, 0, 0.50);

}



.donslide .item-2:after {

    background-color: rgba(255, 132, 29, 0.50);

}



.donslide .item-3:after {

    background-color: rgba(61, 223, 98, 0.50);

}



.donslide .item-4:after {

    background-color: rgba(37, 149, 246, 0.50);

}



.donslide .item:hover:after {

    opacity: 0;

}






.donslide .item-2 {


    background-position: 0px 50px;

}


.donslide:hover .item:hover {

    width: 100%;

    color: #fff;

}

.donslide .donslide-title {

    font-size: 3em;

    transform: rotate(90deg);

    position: absolute;

    right: 0;

    bottom: 0;

    margin-right: 1.6em;

    text-align: right;

    transform-origin: 100% 100%;

    white-space: nowrap;

    padding: 15px;

}



section#breadcrumb {

    height: 130px;

    line-height: 130px;

    background-color: #f8f8f8;

    border-bottom: 1px solid #efefef;

    background-image: url('../images/eye.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    position: relative;



}



#breadcrumb .overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgba(181, 181, 181, 0.44);

    top: 0;

    left: 0;

}



nav.crumbs {

        font-size: 14px;

    color: #424242;

}

nav.crumbs a, nav.crumbs .sep {

    color: #1c8388;

}



#menu .navbar-default {

    background-color: transparent;

    border: none;

    margin-bottom: 0;

}





div#menu {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    min-height: 100px;

}



#menu .navbar-default .navbar-nav>li>a {

    font-weight: 600;

}



#slider .slider-text {

    position: absolute;

    bottom: 150px;

    text-align: center;

    width:65%;

    left:0;

    right:0;

    margin:auto;

    padding: 30px;

    background: rgba(203, 175, 107, 0.67);

    color: white;

    font-size: 1.8em;

    font-weight: 400;

}





/********************************

        MAIN CONTENT

*********************************/









.products .pdt-box .pdt-img img {

    width: 100%;

}





.products .pdt-img {

    position: relative;

}

.products .content{

    padding-left: 50px;

    padding-right: 50px;

    line-height: 1.8;

}





.products .content hr{

    width: 50px;

    margin-left: auto;

    text-align: center;

    margin-right: auto;

    margin-top: 15px;

    margin-bottom: 15px;

}









.services .item .content { overflow:hidden }



.services .service-text {

    color: white;

    position: absolute;

    left: 0;

    right:0;

    top: 50%;

    text-align:center;

    margin-left:20px;

    margin-right:20px;



}





.service-text i {

    width: 40px;

    height: 40px;

    border: 1px solid white;

    line-height: 39px;

    border-radius: 50px;

    font-size: 20px;

}



.services .item .icon {

    padding: 15px 10px;

    border-top: 2px solid #9ee2ef;

    border-bottom: 2px solid #9ee2ef;

    margin-right: 20px;

    margin-top: 10px;

}

.services .item .content {

    padding-right: 80px;

}





.chiffre {

    background-image: url(../images/bg-counter.jpg);

    min-height: 230px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}





.chiffre .counter {

    font-size: 30px;

}

.chiffre .item .content {

    overflow: hidden;

}



.chiffre .icon {

    color: white;

    border: 1px solid white;

    width: 50px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    font-size: 20px;

    border-radius: 50px;

    margin-right: 5px;

}



.contact h4 {

    font-weight: 700;

    position: relative;

}



.contact h4:after {

    content: "";

    border-bottom: 2px solid #f65118;

    width: 20%;

    height: 100%;

    position: absolute;

    left: 0;

    margin-top: 20px;

}



.contact #contact-form button {

    border-color: #f65118;

}



.contact input[type=radio]{

    display: none;

}

/* Affichage par défaut du bouton radio personnalisé */

.contact input[type=radio] + label:before {

    background: #fff;

    border: 2px solid #ccc;

    border-radius: 50%;

    margin-top: -3px;

    margin-right: 6px;

    display: inline-block;

    vertical-align: middle;

    content: '';

    width: 13px;

    height: 13px;

}

/* Affichage du bouton radio personnalisé quand il est sélectionné */

.contact input[type=radio]:checked + label:before {

    background: #9fc637;

    border-color: #9fc637;

    box-shadow: inset 0px 0px 0px 2px #fff;

}

.contact .element{

    display: inline-block;

}

.contact  .element label{

    cursor:pointer;

}



.contact_form{

    background-color: #00bcd4;

}



.contact .box {

    display: inline-block;

    width: 300px;

    border: 1px solid #f1efef;

    margin: auto;

    text-align: center;

}









/********************************

        FOOTER

*********************************/





.footer_top {

    line-height: 2;

}



form#newsletter {

    position: relative;

}



form#newsletter button {

    position: absolute;

    top: 0;

    right: 0;

    background-color: #283030 !important;

    bottom: 0;

    color: #696969;

}



form#newsletter button:hover {

    border-color: transparent !important;

    color: white;

}



#newsletter .form-control {

    background-color: #292929;

}

.copyright {

    border-top: 2px solid #292929;

}













nav#slide-menu {

  position: fixed;

  top: 0;

  right: -100px;

  bottom: 0;

  display: block;

  background-color: #007378;

  float: right;

  width: 100%;

  max-width: 270px;

  height: 100%;

  -moz-transition: all 300ms;

  -webkit-transition: all 300ms;

  transition: all 300ms;

}

nav#slide-menu > ul {

  display: block;

  margin: 40px;

  padding: 0;

  list-style: none;

  opacity: 0.5;

  -moz-transition: all 300ms;

  -webkit-transition: all 300ms;

  transition: all 300ms;

}



    nav#slide-menu > ul li a{

        color: #fefefe;

        text-transform: uppercase;

    }

nav#slide-menu > ul li {

  padding: 6px 0;

  cursor: pointer;

}

nav#slide-menu > ul li:hover {

  color: #59e9df;

}

nav#slide-menu > ul li:before {

  font-family: "FontAwesome";

  font-style: normal;

  font-weight: normal;

  speak: none;

  display: inline-block;

  text-decoration: inherit;

  width: 1em;

  color: #59e9df;

  margin-right: 12px;

  text-align: center;

  font-variant: normal;

  font-size: 0.75em;

  text-transform: none;

  line-height: 1em;

}

nav#slide-menu > ul li.sep {

  margin-top: 7px;

  padding-top: 14px;

  border-top: 1px solid #6b7b8d;

}





body.menu-active nav#slide-menu {

  right: 0;

}



body.menu-active nav#slide-menu ul {

  left: 0px;

  opacity: 1;

}



/*

  Menu Humburger

*/



form#search input {

    display: inline-block;

    width: 180px;

    margin-left: 25px;

    height: 40px;

}



#search .btn {

    height: 40px;

    background: #3dc5df;

}

#page-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



#title {

  color: #f6f6f6;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  font-size: 2em;

}



#btn {

  position: fixed;

  z-index: 20;

  top: 60px;

  right: 15px;

  cursor: pointer;

  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

}

#btn div {

  width: 35px;

  height: 2px;

  margin-bottom: 8px;

  background-color: #3dc5df;

  -webkit-transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

  transition: opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;

  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms, -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

}



#btn.active {

  right: 230px;

}

#btn.active div {

  background-color: #3dc5df;

}

#btn.active #top {

  -webkit-transform: translateY(10px) rotate(-135deg);

          transform: translateY(10px) rotate(-135deg);

}

#btn.active #middle {

  opacity: 0;

  -webkit-transform: rotate(135deg);

          transform: rotate(135deg);

}

#btn.active #bottom {

  -webkit-transform: translateY(-10px) rotate(-45deg);

          transform: translateY(-10px) rotate(-45deg);

}



#box {

  position: fixed;

  z-index: 19;

  overflow: auto;

  top: 0px;

  right: -275px;

  width: 275px;

  opacity: 0;

  padding: 20px 0px;

  height: 100%;

  background-color: #007378;

  color: #fff;

  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);

}



#box.active {

  right: 0px;

  opacity: 1;

}



#items {

  position: relative;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

}

#items .item a {color: white}

#items .item {

  position: relative;

  cursor: pointer;

  padding: 15px 30px;

  -webkit-transition: all 250ms;

  transition: all 250ms;

}

#items .item:hover {

  padding: 15px 45px;

  background-color:  #3dc5df;

}



#btn, #btn * {

  will-change: transform;

}



#box {

  will-change: transform, opacity;

}





#map {

    background-color: #00bcd4;

}



/* Testimonial */



.testimonials .demo{ background: #f8f8f8; }

.testimonials .testimonial{

    margin: 0 20px 40px;

}

.testimonials .testimonial .testimonial-content{

    padding: 35px 25px 35px 50px;

    margin-bottom: 35px;

    background: #fff;

    border: 1px solid #f0f0f0;

    position: relative;

}

/*.testimonials .testimonial .testimonial-content:after{

    content: "";

    display: inline-block;

    width: 20px;

    height: 20px;

    background: #fff;

    position: absolute;

    bottom: -10px;

    left: 22px;

    transform: rotate(45deg);

}*/

.testimonials .testimonial-content .testimonial-icon{

    width: 50px;

    height: 45px;

    background: transparent;

    text-align: center;

    font-size: 22px;

    color: #fff;

    line-height: 42px;

    position: absolute;

    top: 37px;

    left: -19px;

}



.testimonials .testimonial .description{

    font-size: 15px;

    font-style: italic;

    color: #8a8a8a;

    line-height: 23px;

    margin: 0;

}

.testimonials .testimonial .title{

    display: block;

    font-size: 18px;

    font-weight: 700;

    color: #525252;

    text-transform: capitalize;

    letter-spacing: 1px;

    margin: 0 0 5px 0;

}

.testimonials .testimonial .post{

    display: block;

    font-size: 14px;

    color: #007378;

}

.testimonials .owl-theme .owl-controls{

    margin-top: 20px;

}

.testimonials .owl-theme .owl-controls .owl-page span{

    background: #ccc;

    opacity: 1;

    transition: all 0.4s ease 0s;

}

.testimonials .owl-theme .owl-controls .owl-page.active span,

.testimonials .owl-theme .owl-controls.clickable .owl-page:hover span{

    background: #007378;

}





.icon-about{

    display:flex;

    align-items: center;

    color: #555555;

}

.icon-about .fa {

   margin-right: 10px;

font-size: 25px;

color: #0895a7

}

.icon-about h5{line-height: 1.3;}



.margin-bottom-10 {

    margin-bottom: 10px;

}

.margin-bottom-30 {

    margin-bottom: 30px;

}



.services .panel-default>.panel-heading {

    color: #fff;

    background-color: #0895a7;

    border-color: #0895a7;

}



.services .panel-default .panel-title{

    font-size : 14px

}



.services .panel-default .panel-title a:hover,.services .panel-default .panel-title a:focus{

  color: #eaeaea

}



.services .panel-default .panel-heading{

    border-radius : initial

}



.msnry_item img{

 -webkit-transition: all 2s ease;

 -moz-transition: all 2s ease;

 -o-transition: all 2s ease;

 transition: all 2s ease;

 overflow: hidden;



}



.msnry_item img:hover {

    -ms-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -webkit-transform: scale(1.1);

    -o-transform: scale(1.1);

    transform: scale(1.1);

}



.msnry_item {

    overflow: hidden;

     

}



 .swiper-container {

      width: 100%;

      height: 730px;

    }

    .swiper-slide {

      text-align: center;

      font-size: 18px;

      background: #fff;

      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

      background-image: url('http://www.themezaa.com/html/pofo/images/portfolio-item35.jpg');

      background-repeat: no-repeat;

    }



    .text-primary {

    color: #0895a7;

}

@media (max-width: 768px) {
    #logo img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #infos .phone,#infos .email {
        font-size: 12px;
        font-weight: 500;
    }

    #infos .phone .fa, #infos .email .fa {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
        text-align: center;
        margin-right: 2px;
    }

    .xs-padding-right{ padding-right: 0 }
    .xs-padding-left{ padding-left: 0 }

    .xs-padding-right-15{ padding-right: 15px }
    .xs-padding-left-15{ padding-left: 15px }

    #btn{right: 30px;}

    .xs-no-margin { margin:  0  !important }
    .xs-no-margin>div { margin:5px  0  !important }
    .products .content { padding-left: 0; padding-right: 0 }

    .custom-title{font-size: 20px;}
    .chiffre{ padding-top: 30px; padding-bottom: 20px }

    .chiffre h5 {
        font-size: 11.5px;
        margin-top:5px
    }

    .chiffre .icon {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }

    .chiffre .counter {
        font-size: 22px;
    }

    .clear { clear: both; }

}