a{
            color:black;
        }
        
        @font-face {
            font-family: 'kittithada_roman_55_fregular';
            src: url('kit55f-webfont.eot');
            src: url('kit55f-webfont.eot?#iefix') format('embedded-opentype'),
                 url('kit55f-webfont.woff2') format('woff2'),
                 url('kit55f-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            
        }
        body,p,h1,h2,h3,h4,h5,h6,h7 {
             font-family: 'kittithada_roman_55_fregular', sans-serif!important;
        }
        
         .main_nav ul li .dropdown-content a {
            display: block;
            position: relative;
            height: 70px!important;
            font-size: 16px!important;
            font-weight: 500;
            color: #000;
            padding-left: 10px!important;
            padding-right: 10px!important;
            padding-top: 20px;
            padding-bottom: 20px;
            z-index: 1;
            text-align: center;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            transition: all 200ms ease;
        }  
        
        
         .main_nav ul li .dropdown-content a:hover {
            display: block;
            position: relative;
            height: 70px!important;
            font-size: 16px!important;
            font-weight: 500;
            color: #fff;
            padding-left: 10px!important;
            padding-right: 10px!important;
            padding-top: 20px;
            padding-bottom: 20px;
            z-index: 1;
            text-align: center;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            transition: all 200ms ease;
        }  
        
        @media (max-width:1200px){
            .main_nav ul li  a {
            display: block;
            position: relative;
            height: 130px;
            font-size: 13px!important;
            font-weight: 500;
            color: #fff;
            padding-left: 10px!important;
            padding-right: 10px!important;
            padding-top: 30px;
            padding-bottom: 30px;
            z-index: 1;
            text-align: center;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            transition: all 200ms ease;
        }
            
          
            
            .search-respons {
            padding-left:40px!important;
        }
            
        }
        
         @media (min-width:1200px){
             .main_nav ul li  a {
            display: block;
            position: relative;
            height: 130px;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 30px;
            padding-bottom: 30px;
            z-index: 1;
            text-align: center;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            -ms-transition: all 200ms ease;
            -o-transition: all 200ms ease;
            transition: all 200ms ease;
        }            
        }
        @media (max-width:768px){
            .logo_moblie {
            width:180px!important;  
            margin-top:15px;
             margin-left:-40px!important;    
        }
             .tel_moblie {
            width:150px!important;
            margin-top:15px;
                 margin-left:-60px;
        }
        }
        @media (max-width:576px){
              .logo_moblie {
            width:120px!important;  
            margin-top:15px;
        }
             .tel_moblie {
            width:100px!important;
            margin-top:15px;        
        }
              .openbtn {
      
                margin-top: 6px!important;
            }
            .box-warp-header-sub{
               padding-top: 60px!important;
        }
            .box-warp-header {
                display:none!important;   
            }
            .carousel-indicators li {
            position: relative;
            border-radius: 50%;
            width: 10px!important;
            height: 10px!important;
            margin-right: 3px;
            margin-left: 3px;
            text-indent: -999px;
            background-color: rgba(255,255,255,.5);
        }
          .product-siemens-bg1,.product-siemens-bg2,.product-siemens-bg3,.product-siemens-bg4,.product-siemens-bg5,.product-siemens-bg6{
          width: 100%;
          height: 200px!important; 
        }
            .bestseller {
            position:absolute; 
            z-index:2;
            height:100px!important;
        }
            
                 .img-hover-zoom {
          height: 300px; /* [1.1] Set it as per your need */
          overflow: hidden; /* [1.2] Hide the overflowing of child elements */
        }
        .img-hover-zoom img {
            height: 300px;
            transition: transform .5s ease;
        }
          .img-hover-zoom-product img {
            height: 300px;
            transition: transform .5s ease;
        }   
        }
        @media (max-width:375px){
               .logo_moblie {
            width:120px;  
            margin-top:15px;
            margin-left: -40px!important;
        }
            .openbtn {
      
                margin-top: 3px!important;
            }
        }
        @media (max-width:992px){
            .responsive_moblie_show {
            display: none!important;
        }
             .responsive_moblie_none {
              display: block!important;
        }
            .box-warp-header{
                padding-top:60px!important;
        }
        
        .nav-side-menu .menu-list .menu-content {
                display: block;
              }
             .logo_moblie {
            width:250px;
            margin-top:15px;
            margin-left: 20px;
        }
            .header_top {
                height: auto!important;
            }
        }
        
        .responsive_moblie_show {
            display: block;
        }
        
        .responsive_moblie_none {
              display: none;
        }
        
        .hover-navbar::after{
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: '';
                background-color: #edce11!important;
                background: #edce11;
                
                opacity: 0;
                z-index: 0;
                -webkit-transition: all 200ms ease;
                -moz-transition: all 200ms ease;
                -ms-transition: all 200ms ease;
                -o-transition: all 200ms ease;
                transition: all 200ms ease;
        }
        .dropdown:hover .dropbtn{
             background-color: #edce11!important;
            background: #edce11;
        }
        .cl-w {
            color:white!important;
        }
        .changecountry{
            background-color: transparent!important;
        }
        .dropdown-menu{
            top:20px!important;
            text-align: center;
                min-width: 3rem;
        }
        .dropdown-toggle::after {
            display: none;
        }
        .search-respons {
            padding-left:40px;
        }
        .logo_moblie {
            width:250px;
            margin-top:15px;
            
        }
        .tel_moblie {
            width:200px;
            margin-top:15px;
        }
        .sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #0c3281;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #000;
  background-color: yellow;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
  color: white;
  padding: 10px 15px;
  border: none;
    margin-top: 10px;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;

}
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
        
        
        
        .nav-side-menu {

}
.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
  font-size:15px;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #031b4e;
  border: none;
  line-height: 18px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
    padding:10px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  position: absolute;
  padding-top:8px;
 
}
.nav-side-menu li {
  padding-left: 0px;


}
.nav-side-menu li a {
  text-decoration: none;
  color: #fff;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
@media (max-width: 767px) {

  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
    .btn-slide-poso {
            margin-left: 25%!important;
            margin-top: -70px!important;
        }
    .btn-color-slider {
            position:absolute;
            background-color: #0c3281;
            padding: 5px!important;
            color:white;
            width:120px!important;
            border-radius: 30px;
            font-size: 12px!important   ;
        }
    
       .button-slider {
        position:absolute;
            background-color: #0c3281;
            padding: 5px!important;
            color:white;
            width:120px!important;
            border-radius: 30px;
            font-size: 12px!important   ;
              transition: all 0.5s;
              cursor: pointer;
    
        }
      .mg-top {
            margin-top: -30px!important;
        }
}

        .li-font {
            font-size:18px;
            padding:10px;
            color:white;
        }
        
        .nav-side-menu ul:hover .sub-menu li:hover, .nav-side-menu li .sub-menu li {
            background-color: yellow;
            border: none;
            line-height: 18px;
            border-bottom: 1px solid #23282e;
            margin-left: 0px;
            padding: 10px;
            color:black;
        }
        
        .actives-side {
            background-color:yellow;
            color:black!important;
        }
     
        .dropbtn {
 
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #edce11;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  height: auto!important;
  margin-left:  -20px;
    margin-top:2px;
        
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color:  #06235f;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: yellow;color:black;}

        
        .box-warp-header{
            padding-top:190px;
        }
       .carousel-indicators li {
            position: relative;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            margin-right: 3px;
            margin-left: 3px;
            text-indent: -999px;
            background-color: rgba(255,255,255,.5);
        }
        .cercle-next {
            position: absolute;
            background-color: rgba(255,255,255,.3);
            width: 40px;
            height:40px;
            border-radius: 50%;
            padding:10px;
        }
        .btn-color-slider {
            position:absolute;
            background-color: #0c3281;
            padding: 10px;
            color:white;
            width:170px;
            border-radius: 30px;
            font-size: 18px;
        }
        
        
        .button-slider {
            position:absolute;
            background-color: #0c3281!important;
            padding: 10px;
            color:white;
            width:170px;
            border-radius: 30px;
            font-size: 18px;
              transition: all 0.5s;
              cursor: pointer;
    
        }

        .button-slider span {
          cursor: pointer;
          display: inline-block;
          position: relative;
          transition: 0.5s;
        }

        .button-slider span:after {
          content: '\00bb';
          position: absolute;
          opacity: 0;
          top: 0;
          right: -20px;
          transition: 0.5s;
        }

        .button-slider:hover span {
          padding-right: 25px;
        }

        .button-slider:hover span:after {
          opacity: 1;
          right: 0;
        }

         .btn-color-slider-subs {
            position:relative;
            background-color: #0c3281;
            padding: 10px;
            color:white;
            width:170px;
            border-radius: 30px;
            font-size: 18px;
        }
        .mg-top {
            margin-top: -80px;
        }
  .box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}
        .index_update {
            padding-top:30px;
            padding-bottom: 30px;
        }
        .body_card_update {
            padding-top:10px;
            padding-left: 10px;
        }
        .product-siemens-bg1{
          width: 100%;
          height: 300px;
          background-image: url('images/spwires/Photos-Cables/1003px-Electric_guide_3%C3%972.5_mm.jpg');
          background-size: 100% 100%;
        }
         .product-siemens-bg2{
          width: 100%;
          height: 300px;
          background-image: url('images/spwires/Photos-Cables/cable-4168394_1280.jpg');
          background-size: 100% 100%;
        }
         .product-siemens-bg3{
          width: 100%;
          height: 300px;
          background-image: url('images/spwires/Photos-Cables/wires-and-cables-4298191_640.jpg');
          background-size: 100% 100%;
        }
         .product-siemens-bg4{
          width: 100%;
          height: 300px;
          background-image: url('images/spwires/Photos-Cables/electricity-4766982_1920.png');
          background-size: 100% 100%;
        }
         .product-siemens-bg5{
          width: 100%;
          height: 300px;
          background-image: url('images/spwires/Photos-Cables/cable-drum-3257862_1280.jpg');
          background-size: 100% 100%;
        }
         .product-siemens-bg6{
          width: 100%;
          height: 300px;
          background-image: url('images/spwires/Photos-Cables/dina-lydia-mqnQ_vmLIGU-unsplash.jpg');
          background-size: 100% 100%;
        }
        .bg-siemens {
              background-image: url('images/spwires/photo/bg-wires.jpg');
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              height: 100%;
              width:100%;
        }
        .bg-wires {
              background-image: url('images/spwires/photo/bg-wires-gray.jpg');
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              height: 100%;
              width:100%;
        }
        .bg-update {
              background-image: url('images/spwires/photo/bg-update.jpg');
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              height: 100%;
              width:100%;
            
        }
        .bg-aboutus {
            background-image: url('images/spwires/photo/world-bg.jpg');
            background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              height: 100%;
              width:100%;
        }
        
        .ab-bestseller {
            background-image: url('images/spwires/bestseller.png');
            height: 20px;
            width:100%;
            background-size: 10% 10%;
            background-size: cover;
            z-index:9999px;
        }
        .bestseller {
            position:absolute; 
            z-index:2;
            height: 220px;
            left:0;
        }
        /*--slide---*/
     #mdh-carousel .owl-carousel {
  padding-bottom: 25px;
}
#mdh-carousel .owl-carousel .owl-dots {
  margin-top: 50px;
}
#mdh-carousel .owl-carousel .item {
  background-color: white;
  border-radius: 4px;
}
#mdh-carousel .owl-carousel .item:hover {
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.15);
}
#mdh-carousel .owl-carousel .item .pic {
  height: 250px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#mdh-carousel .owl-carousel .item .pic.a {
  background-image: url(http://www.migueldeharo.com/repo/1.jpg);
  background-size: cover;
}
#mdh-carousel .owl-carousel .item .pic.b {
  background-image: url(http://www.migueldeharo.com/repo/2.jpg);
  background-size: cover;
}
#mdh-carousel .owl-carousel .item .pic.c {
  background-image: url(http://www.migueldeharo.com/repo/3.jpg);
  background-size: cover;
}
#mdh-carousel .owl-carousel .item .pic.d {
  background-image: url(http://www.migueldeharo.com/repo/4.jpg);
  background-size: cover;
}
#mdh-carousel .owl-carousel .item .pic.e {
  background-image: url(http://www.migueldeharo.com/repo/5.jpg);
  background-size: cover;
}
#mdh-carousel .owl-carousel .item .pic.f {
  background-image: url(http://www.migueldeharo.com/repo/6.jpg);
  background-size: cover;
}
#mdh-carousel .owl-carousel .item .info {
  padding: 25px;
}
#mdh-carousel .owl-carousel .item .info small {
  color: #b6c0cb;
  letter-spacing: 1px;
}
#mdh-carousel .owl-carousel .item .info span {
  color: #0049FF;
}

/* overlays para carousel de pdf */
.mdh-item-overlay {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.mdh-item-overlay:hover .item-overlay {
  opacity: 0.8;
  visibility: visible;
  transform: scale(1);
}

.item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: #0049FF;
  color: #fff;
  transform: translateY(20px);
  transition: all .3s ease;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-overlay .item-overlay-info {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-overlay .item-overlay-info a {
  padding: 15px 20px;
  color: #0049FF;
  background: white;
  text-decoration: none;
  border-radius: 4px;
}
.item-overlay .item-overlay-info a:hover {
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.15);
}    
        .logoslide-bg1{
             background-image: url('images/spwires/Photos-Brands/logo-1.png');
             background-size: 100% 100%;
             width:100%;
             height:auto;
        }
         .logoslide-bg2{
             background-image: url('images/spwires/Photos-Brands/logo-2.png');
             background-size: 100% 100%;
             width:100%;
             height:auto;
        }
         .logoslide-bg3{
             background-image: url('images/spwires/Photos-Brands/logo-3.png');
             background-size: 100% 100%;
             width:100%;
             height:auto;
        }
          .logoslide-bg4{
             background-image: url('images/spwires/Photos-Brands/logo-4.png');
             background-size: 100% 100%;
             width:100%;
             height:auto;
        }
          .logoslide-bg5{
             background-image: url('images/spwires/Photos-Brands/logo-5.png');
             background-size: 100% 100%;
             width:100%;
             height:auto;
        }
          .logoslide-bg6{
             background-image: url('images/spwires/Photos-Brands/logo-6.png');
             background-size: 100% 100%;
             width:100%;
              height:auto;
        }
        .footer-area{
            padding-top:40px;
          
            background-color: #0c3281;
        }
        .download-catalog {
            padding-top:20px;
        }
        .pd-download {
            padding-left:10px;
        }
        .pd-social {
            padding-right:3px;
        }
        .facebook {
            width: 30px;
            height: 30px;
            background: url("images/spwires/facebook-nonactive.png");
            background-size: 100% 100%;
        }
        .facebook:hover {
            background: url("images/spwires/facebook-active.png") ;
            background-size: 100% 100%;
        }
         .line {
            width: 30px;
            height: 30px;
            background: url("images/spwires/line-nonactive.png");
            background-size: 100% 100%;
        }
        .line:hover {
            background: url("images/spwires/line-active.png") ;
            background-size: 100% 100%;
        }
         .youtube {
            width: 30px;
            height: 30px;
            background: url("images/spwires/youtube-nonactive.png");
            background-size: 100% 100%;
        }
        .youtube:hover {
            background: url("images/spwires/youtube-active.png") ;
            background-size: 100% 100%;
        }
        
        .footer-line {
            border-bottom: 1px solid #fff;
        }
        .pd-footer-copy{
            padding-top:10px;
            padding-bottom:10px;
        }
        .yel-hov:hover {
            color: yellow;
        }
        
        .yel-hov {
            color: #fff;
        }
        
        .img-hover-zoom {
          height: 300px; /* [1.1] Set it as per your need */
          overflow: hidden; /* [1.2] Hide the overflowing of child elements */
          transform: translate3d(0px, 0px, 0px); 
          transition: width 2s;
              transition-duration: 2s;
            
        }
   
        .img-hover-zoom--xyz{

                transition-delay: 1s;
                 transition: width 2s;
                transition-duration: 2s;
               transition: transform .5s ease;
        }
        .img-hover-zoom-product {
          height: 300px; /* [1.1] Set it as per your need */
          overflow: hidden; /* [1.2] Hide the overflowing of child elements */
            border-radius: 8px;
        }
        .img-hover-zoom-product img {
            height: 300px;
            transition: transform .5s ease;
        }
        /* [3] Finally, transforming the image when container gets hovered */
        .img-hover-zoom-product:hover img {
          transform: scale(1.2);
        }
        
          ol, ul {
            margin-top: 0;
            margin-bottom: 0px!important;
           text-decoration: none;
        }
 
        a:hover {
        text-decoration: none!important;
        }
        
        .lines {
            width: 30px;
            height: 30px;
            background: url(images/spwires/line-nonactive.png);
            background-size: 100% 100%;
        }
          .lines:hover {
            width: 30px;
            height: 30px;
            background: url(images/spwires/line-active.png);
            background-size: 100% 100%;
        }