@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url('https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&subset=cyrillic,latin-ext,vietnamese');

html{scroll-behavior: smooth!important; box-sizing: border-box;}
body{position: relative;
     width:100%; height: auto;}


     #langBar{
      font-size:14px;
      font-family: 'Spartan', sans-serif;
      font-weight:400;
      background: #002439!important;
      color: white!important; 
      position: fixed;
      left:0!important;
      width:100%!important;
      z-index: 1060;
      top:-1px;
      /* padding-top: 6px;
      padding: 6px; */
      height: 46px!important;
      
     
    }

    .langLink {
      color:white;
      text-decoration:none;

    }
    .langLink:hover{
      color:rgb(195, 215, 255);
     
    }
    .footLink a{
      color:rgba(193, 220, 255, 0.842)!important;
      font-weight: 400!important;
      cursor: pointer!important;
    }
    .footLink a:hover{
      color:rgba(71, 151, 255, 0.842)!important;
      cursor: pointer!important;
      
    }
   /* .hoverPn{
    display:none;
   }
   .hoverPn:hover{
display:block!important;
   } */


   .swiper-slide .hoverPn {
    overflow: hidden;
    transition: transform 0.6s ease;
    transform: translate(0%, 60%);
  }
  .swiper-slide .hoverPn * {
    transition: all 0.8s ease;
    transform: translate(0%, 0%);
  }
  .swiper-slide:hover .hoverPn {
    display: block;
    transform: translate(0px, 0%);
    background-color:#111c32;
    opacity: 0.90;
   
    
  
  }

  .swiper-slide .hoverPn2 {
    overflow: hidden;
    transition: transform 0.6s ease;
    transform: translate(0%, 70%);
  }
  .swiper-slide .hoverPn2 * {
    transition: all 0.8s ease;
    transform: translate(0%, 0%);
  }
  .swiper-slide:hover .hoverPn2 {
    display: block;
    transform: translate(0px, 0%);
    background-color:#8a0910;
    opacity: 0.90;
   
    
  
  }
  
 
.container_fluid{margin-left:-20%!important; margin-right:-20%!important;}
.row{
  padding:0px!important;
  margin:0px!important;
}


.navbar-nav li{margin-bottom:0px!important;}

 .hr2{border-top: 2px solid white;}
 
.row {margin: 2.5% !important; padding: 0px !important;}

.navbar-brand{

  width:200px; height:auto; margin:10px;
}
.responsive_s {
  width: 100%;
  height: 100vh;
  min-width: 200px;
  min-height: 100%;
}
.responsive_img {
  width: 100%;
  height: auto;
  padding: 0%!important;
  margin: 0%!important;

}
.responsive_img_hvac {
  width: 95%;
  height: auto;
  

}
.responsive_img_pro {
  width: 80%;
  height: auto;
  padding: 0%;
  margin: 0%;

}
.logo_car{width: 180px; height: auto; margin-top:-15%;} 

/* Navigacioni bar stil*/
.navbar-toggler-icon {

  background-image:url(../img/hamburger.svg)!important; border-style: none!important;

    }
.navbar-toggler {  

    background: -moz-radial-gradient(center, ellipse cover, rgba(176,0,31,0.98) 0%, rgba(176,0,31,0.8) 100%); /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(176,0,31,0.98)), color-stop(100%, rgba(176,0,31,0.7))); /* safari4+,chrome */
    background:-webkit-radial-gradient(center, ellipse cover, rgba(176,0,31,0.98) 0%, rgba(176,0,31,0.8) 100%); /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(176,0,31,0.98) 0%, rgba(176,0,31,0.8) 100%); /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(176,0,31,0.98) 0%, rgba(176,0,31,0.8) 100%); /* ie10+ */
    background:radial-gradient(ellipse at center, rgba(176,0,31,0.98) 0%, rgba(176,0,31,0.8) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B0001F', endColorstr='#B0001F',GradientType=1 ); /* ie6-9 */

     margin-bottom:0px; margin-top:0px; border-radius: 20px;}

     .navbar-toggler:hover{  

    background-color: #b0001f;
     margin-bottom:0px; margin-top:0px; border-radius: 20px;}


.navbar-nav > li {
  float: left;
  position: relative;

}

.navbar-collapse{
-webkit-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
.nav-link{
  cursor: pointer;
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active{
border-bottom: 4.5px inset #B0001F ;
width:auto;
  -webkit-transition: width 5s; Safari
  transition: width 5s;
  cursor: pointer;
}

.navbar-light .navbar-toggler {
  color:#B0001F!important;
  border-color: #B0001F!important;
  cursor: pointer;
}

.bgnav{ 

background: -moz-linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0.9))); /* safari4+,chrome */
background: -webkit-linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,1) 100%); /* ie10+ */
background: linear-gradient(0deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* ie6-9 */
}

.bgnav-white{

  background-color:white!important; 
  opacity: 0.95;
}
    /* OVO JE KOD NAMENJEN TEKSTUALNOM DELU I SENKAMA*/
                                .new-shadow {-webkit-box-shadow: -12px 18px 32px -13px rgba(0,0,0,0.5);
                                              -moz-box-shadow: -12px 18px 32px -13px rgba(0,0,0,0.5);
                                              box-shadow: -12px 18px 32px -13px rgba(0,0,0,0.5);}


                                .text-shadow {-webkit-box-shadow: -12px 18px 32px -13px rgba(0,0,0,0.9);
                                              -moz-box-shadow: -12px 18px 32px -13px rgba(0,0,0,0.9);
                                              box-shadow: -12px 18px 32px -13px rgba(0,0,0,0.9);}

                                .textshadow2 {-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.9);
                                              -moz-box-shadow: 2px 2px 5px  rgba(0,0,0,0.9);
                                              box-shadow: 2px 2px 5px  rgba(0,0,0,0.9);}
                                .boxshadow{

                                          -webkit-box-shadow: 18px 17px 25px -15px rgba(0,0,0,0.6);
                                          -moz-box-shadow: 18px 17px 25px -15px rgba(0,0,0,0.6);
                                          box-shadow: 18px 17px 25px -15px rgba(0,0,0,0.6);
                                          }

                                          .round_shadow{

                                          -webkit-box-shadow: 18px 17px 25px -20px rgba(0,0,0,0.9);
                                          -moz-box-shadow: 18px 17px 25px -20px rgba(0,0,0,0.9);
                                          box-shadow: 18px 17px 25px -20px rgba(0,0,0,0.9);
                                          border-radius: 100%;
                                          }

                               

                               .real-shadow{

                                 box-shadow:inset 0 0 10px black;

                               }
       

                                .hdlineft{
                                          font-family: 'Oswald', sans-serif;
                                          font-weight: 200;
                                          font-size: 50px;
                                          color: white;
                                           line-height: 40pt;
                                          }
                                
                                .hdline{
                                        font-family: 'Oswald', sans-serif;
                                        font-weight: 200;
                                        font-size: 50px;
                                        color:#F4E9DC;
                                         line-height: 40pt;
                                        }
                                .sub_hdline{
                                            font-family: 'Exo', sans-serif;
                                            font-weight: 650;
                                            font-size: 36px;
                                            color:#262323;
                                            margin-top:20px;
                                            margin-bottom:20px;
                                            line-height: 29pt;
                                            }
				
                                  .sub_hdline2{
                                            font-family: 'Exo', sans-serif;
                                            font-weight: 500;
                                            font-size: 20px;
                                            color:#4E6473;



                                             line-height: 29pt;
                                            
                                            }          


                                
                                .mtext{
                                        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                                        font-weight: 400;
                                        font-size: 20px;
                                        color:#524B4B;  
                                        margin-bottom:10px;
                                        margin-top: 10px;
                                         line-height: 20pt;
                                        
                                        }


                                
                                .car_title{ margin-left:0px; font-size: 45px;}

                                .hdl_section{margin-top:20px;}
    /* OVO JE KOD NAMENJEN TEKSTUALNOM DELU I SENKAMA ---END*/
       
	/**Card images **/
	       .car_s1{
         width: 100%;
         height: 100%;
         min-height: 200px;
         background-image:url(../img/izv_rad.jpg);
         background-position: center center;
         background-repeat: no-repeat;
 
         background-size:cover;

         
         }

         .car_s2{
         width: 100%;
         height: 100vh;
         min-height: 200px;
         background-image:url(../img/projekt.jpg);
         background-position: center center;
         background-repeat: no-repeat;
         
         background-size:cover;
       
         }

         .car_s3{
         width: 100%;
         height: 100vh;
         min-height: 200px;
         background-image:url(../img/strucni.jpg);
         background-position: center center;
         background-repeat: no-repeat;
      
         background-size:cover;
      
         }
         .car_s4{
         width: 100%;
         height: 100vh;
         min-height: 200px;
         background-image:url(../img/servis.jpg);
         background-position: center center;
         background-repeat: no-repeat;
      
         background-size:cover;
      
         }
         .car_s5{
         width: 100%;
         height: 100vh;
         min-height: 200px;
         background-image:url(../img/odrz.jpg);
         background-position: center center;
         background-repeat: no-repeat;
      
         background-size:cover;
      
         }

         .car_s6{
         width: 100%;
         height: 100vh;
         min-height: 200px;
         background-image:url(../img/eko_rad.jpg);
         background-position: center center;
         background-repeat: no-repeat;
      
         background-size:cover;
      
         }

         .plan{
         width: 100%;
         height: 100vh;
         min-height: 200px;
         background-image:url(../img/plan.jpg);
         background-position: center center;
         background-repeat: no-repeat;
      
         background-size:cover;
      
         }

         .about {
        
                  background: url(../img/workers.jpg) no-repeat center center fixed;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  background-size: cover;
                  /*background-size:100% auto; helped*/
                }
      
.zoom{ webkit-animation: zoom 60s;
         animation: zoom 60s; }

.sta { 
         /*width: 100%;
         height: auto; */
        
        background: url(../img/wall_sta.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; /*helped*/
}

.shuma { 
         width: 100%;
         height: auto; 
         min-width: 200px;
        background: url(../img/shuma.png) no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
       /* background-size:100% auto; helped*/
}


.klijent { 
         /*width: 100%;
         height: auto; */
        
        background: url(../img/workers.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
       /* background-size:100% auto; helped*/
}
.proj_w { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/projBlueWALL.png) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        

}
/* ovo su slider projketi */
.p1 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p1.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p2 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p2.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p3 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p3.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p4 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p4.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p5 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p5.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p6 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p6.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p7 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p7.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p8 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p8.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p9 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p9.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

.p10 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p10.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p11 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p11.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.p12 { 
         /*width: 100%;
         height: auto; */
        min-width: 200px;
        min-height: auto;
        background: url(../img/p12.jpg) no-repeat center center;
        -webkit-background-size:cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

/** This is a new set of pic **/
.b1 { 
  /*width: 100%;
  height: auto; */
  min-width: 200px;
        min-height: auto;
 background: url(../img/b1.PNG) no-repeat center center;
 -webkit-background-size:cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
.b2 { 
  /*width: 100%;
  height: auto; */
  min-width: 200px;
  min-height: auto;
 background: url(../img/b2.PNG) no-repeat center center;
 -webkit-background-size:cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
.b3 { 
  width: 100%;
  height: auto;
  min-width: 200px;
  min-height: auto;
 background: url(../img/b3.PNG) no-repeat center center;
 -webkit-background-size:cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
.b4 { 
  /*width: 100%;
  height: auto; */
  min-width: 200px;
  min-height: auto;
 background: url(../img/b4.PNG) no-repeat center center;
 -webkit-background-size:cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
.b5 { 
  /*width: 100%;
  height: auto; */
  min-width: 200px;
  min-height: auto;
 background: url(../img/b5.PNG) no-repeat center center;
 -webkit-background-size:cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
.b6 { 
  /*width: 100%;
  height: auto; */
  min-width: 200px;
  min-height: auto;
 background: url(../img/b6.PNG) no-repeat center center!important;
 -webkit-background-size:cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.kontakt_wall { 
        
        width: 100%;
         height: auto; 
         min-width: 200px;
        background: url(../img/kont_wall.png) no-repeat center center scroll;
         -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}






  .icon{

    width: 70px; height: auto; margin-top:10%; margin-bottom:2%;
  }
  .iconz{

    width: 70px; height: auto; margin:1%; margin-top:0!important;
  }
  .iconfix{

    width: 70px; height: auto; margin-top:1.5%;
  }
  .iconfix2{

    width: auto; height:90px; margin-top:1.5%;
  }
  .iconfix3{

    width: auto; height:100px!important; margin-top:0%;
  }
  .founder{ width: 90%; height:auto; margin: 5%; }

/*animation  carousel */ 

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}     







/* CHANGE CAROUSEL CONTROL */

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: whitesmoke;
  background-size: 100%, 100%;
 /* border-radius: 50%; 
  outline: whitesmoke;
  outline: whitesmoke;
  border: 3px solid whitesmoke;*/
  background-image: none;
} 

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  font-weight: 700;
  font-family: 'Righteous', cursive;
  color: white;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  font-weight: 700;
  font-family: 'Righteous', cursive;
  color: white;
}

/* CHANGE CAROUSEL CONTROL */
.carousel-indicators li {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin:20px;
}

/** ovo je CSS kartice OFFER*/


.offer_card{
      width:100%;
      height:295px;
      
      }

 /**   KArtice   **/

.grid {
  width: 100%; height: 100%; 
  margin: 0%;
 
  padding:2px;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid .cell {
  position: relative;
  float: left;
  margin: 0%;
  transform: scale3d(1, 1, 1);
}
.grid .cell .inside {
  position: absolute;
  background-color: rgba(176,0,31,0.85);
  transition: all 0.6s ease;
  padding:30px;
  width: 100%;
  height: 100%;
  top: 0%;
}
.grid .cell img {
  position: relative;
  display: block;
}
.grid .cell h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  color: white;
  font-size: 1.15em;
  font-weight: 500;
  font-family: 'Exo', sans-serif;
  padding: 0px;
  margin: 0px;

}
.card_logo1{content: url(../img/lanser.svg); width: 40px; height: auto;margin:auto; padding-bottom:10px;}
.card_logo2{content: url(../img/project.svg); width: 40px; height: auto;margin:auto; padding-bottom:10px;}
.card_logo3{content: url(../img/strucni.svg); width: 40px; height: auto;margin:auto; padding-bottom:10px;}
.card_logo4{content: url(../img/remont.svg); width: 40px; height: auto;margin:auto; padding-bottom:10px;}
.card_logo5{content: url(../img/izRad.svg); width: 40px; height: auto;margin:auto; padding-bottom:10px;}
.card_logo6{content: url(../img/eko.svg); width: 40px; height: auto;margin:auto; padding-bottom:10px;}

.grid .cell p {
  text-align: center;
  color: white;
  
}
.cell-xxx .inside {
  display: none;
}
.cell-xxx:hover .inside {
  display: block;
}
/*transition */

.cell-d {
  overflow: hidden;

}
.cell-d .inside {
  overflow: hidden;
  transition: transform 0.6s ease;
  transform: translate(0%, 55%);
}
.cell-d .inside * {
  transition: all 0.8s ease;
  transform: translate(0%, 0%);
}
.cell-d:hover .inside {
  display: block;
  transform: translate(0px, 0%);
  background-color:#111c32;
  opacity: 0.95;

}


.cell-d:hover .inside * {
  transform: translate(0px, 0px);
}
.cell-d:hover .inside h2 {
  transition-delay: 0.1s;
}
.cell-d:hover .inside p {
  transition-delay: 0.2s;
}


/** SWIPER PROJECT CSS**/




 .swiper-container {
      width: 100%;
      height: 100%;
      font-family: 'Eco', sans-serif!important;
                                        font-weight: 200;
                                        font-size: 50px;
                                        color:#F4E9DC;
   
    }
    .swiper-slide {
      text-align: center;
      font-size: 25px;
      background:;
      font-family: ;
      /* 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;
    }

/* kartica feedback */
.card-img-top{ border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; border-top-left-radius:10px; border-top-right-radius: 10px; padding: 0%;width: 100%;}
.card{height: auto; width:300px;}


/* testemonials css--------------------------------------------------*/

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    cursor: default;
}




.testim .wrap {
    position: relative;
    width: 100%; 
    
    margin-bottom: 20%; 
    margin: auto;
}

.testim .arrow {
    display: block;
   position: absolute; /* diskutabilno */
    color: #eee;
    cursor: pointer;
    font-size: 2em;
   top: 50%; 
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: all .3s ease-in-out;    
    -ms-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;    
    -o-transition: all .3s ease-in-out;    
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222;
}

.testim .arrow:before {
    cursor: pointer;
}

.testim .arrow:hover {
    color: white;
}
    

.testim .arrow.left {
    left: 10px;
}

.testim .arrow.right {
    right: 10px;
}

.testim .dots {
    text-align: center;
   position: relative;
    width: 100%;
    height: auto;
    left: 0;
    display: block;
    z-index: 1000;
    
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    vertical-align: middle;
    margin: 15px;
    cursor: pointer;
     background: white;
    -webkit-transition: all .1s ease-in-out;    
    -ms-transition: all .1s ease-in-out;    
    -moz-transition: all .1s ease-in-out;    
    -o-transition: all .1s ease-in-out;    
    transition: all .1s ease-in-out;
    position: relative; 
    
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: rgba(176,0,31,0.85);
    width: 20px;
    height: 20px;
     
     -webkit-box-shadow: 18px 17px 25px -20px rgba(0,0,0,0.9);
                                          -moz-box-shadow: 18px 17px 25px -20px rgba(0,0,0,0.9);
                                          box-shadow: 18px 17px 25px -20px rgba(0,0,0,0.9);
                                          border-radius: 100%;
  

}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .1s ease-in-out forwards;   
    -moz-animation: testim-scale .1s ease-in-out forwards;   
    -ms-animation: testim-scale .1s ease-in-out forwards;   
    -o-animation: testim-scale .5s ease-in-out forwards;   
    animation: testim-scale .1s ease-in-out forwards;   
}
    
.testim .cont {
    position: relative; 
    overflow: hidden;
}

.testim .cont > div {
    text-align: center;
    position: absolute;
    align-content: middle;
    top: 0;
    left: 0;
    padding: 0 0 70px 0;
 
    opacity: 0;
}

.testim .cont > div.inactive {
    opacity: 1;
}
    

.testim .cont > div.active {
    position: relative;
    opacity: 1;
}
    

.testim .cont div .img img {
    display: block;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
    border-color:white;
    border-style: solid;
  border-width: 5px;
}

.testim .cont div h2 {
    color: #F4E9DC;
    font-size: 1.5em;
    margin: 19px;
}

.testim .cont div p {
    font-size: 1.15em;
    color: white;
    width: 95%;
    margin: auto;
}

.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;            
    -moz-animation: testim-show .5s ease-in-out forwards;            
    -ms-animation: testim-show .5s ease-in-out forwards;            
    -o-animation: testim-show .5s ease-in-out forwards;            
    animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;    
    -moz-animation: testim-content-in .4s ease-in-out forwards;    
    -ms-animation: testim-content-in .4s ease-in-out forwards;    
    -o-animation: testim-content-in .4s ease-in-out forwards;    
    animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;    
    -moz-animation: testim-content-in .5s ease-in-out forwards;    
    -ms-animation: testim-content-in .5s ease-in-out forwards;    
    -o-animation: testim-content-in .5s ease-in-out forwards;    
    animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;            
    -moz-animation: testim-hide .5s ease-in-out forwards;            
    -ms-animation: testim-hide .5s ease-in-out forwards;            
    -o-animation: testim-hide .5s ease-in-out forwards;            
    animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;        
    -moz-animation: testim-content-out .4s ease-in-out forwards;        
    -ms-animation: testim-content-out .4s ease-in-out forwards;        
    -o-animation: testim-content-out .4s ease-in-out forwards;        
    animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;    
    -moz-animation: testim-content-out .5s ease-in-out forwards;    
    -ms-animation: testim-content-out .5s ease-in-out forwards;    
    -o-animation: testim-content-out .5s ease-in-out forwards;    
    animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -moz-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -ms-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -o-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);        
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -moz-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -ms-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);       
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}

@media all and (max-width: 300px) {
  body {
    font-size: 14px;
  }
}

@media all and (max-width: 500px) {
  .testim .arrow {
    font-size: 1.5em;
  }
  
  .testim .cont div p {
    line-height: 25px;
  }

}

/** CArousel fade animation **/
.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0.2;
    transition: opacity ease-out .2s;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1 !important;
}
.carousel-indicators{bottom: 3%!important;}

.floating_button {
  width: 70px; height: auto;
  position: fixed;
  right:2%;
  bottom:5%;
 

}

/********************************************** animation button
*****//* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
    
}
/********************************************** animation button
*****//* hover 2 */

@keyframes headShake {


  0 {
    transform: translateX(0)
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg)
  }

  16.5% {
    transform: translateX(5px) rotateY(7deg)
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg)
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg)
  }

  50% {
    transform: translateX(0)
  }
}


.headShake {
  animation-duration: 1s ;
  animation-timing-function: ease-in-out;
  animation-name: headShake;
   animation-iteration-count: infinite;

}

.shake {
  animation: shake-animation 4.72s ease infinite;
  transform-origin: 50% 50%;
}


@keyframes shake-animation {
   0% { transform:translate(0,0) }
  1.78571% { transform:translate(5px,0) }
  3.57143% { transform:translate(0,0) }
  5.35714% { transform:translate(5px,0) }
  7.14286% { transform:translate(0,0) }
  8.92857% { transform:translate(5px,0) }
  10.71429% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}