/*
Mobile Grid Styles
These are the widths for the mobile grid.
There are four types, but you can add or customize
them however you see fit.
*/
@media (max-width: 767px) {
  .m-all {
    float: left;
    width: 100%;
    padding-right: 0; }

  .m-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 50%; }

  .m-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%; }

  .m-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%; }

  .m-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%; }

  .m-3of4 {
    float: left;
    padding-right: 0.75em;
    width: 75%; }
	.banner-paginas .banner-desktop, .banner-paginas .banner-1024 { display: none;}
	.banner-paginas .banner-660 { display: block;}
	.grid figure {width: 50%; }
	.m-all.sidebar { width: 94% !important; margin: 0 auto;}
	
	
	
	 }
	
	 @media (min-width:800px) and (max-width: 1080px) {
	
	 .banner-paginas .txt-banner h3 { font-size: 2.2em;  }
	 .banner-paginas .banner-desktop, .banner-paginas .banner-660 { display: none;}
	.banner-paginas .banner-1024 { display: block;}
	.fun i { font-size: 2.8em; width: 30%;}
	  
	  }
	  
	  @media (min-width: 768px) and (max-width: 799px) {
	
	 .banner-paginas .txt-banner h3 { font-size: 1.8em;  }
	 
	
	  
	  }
	  
	  @media (min-width: 660px) and (max-width: 767px) {
	 body {font-size: 13px; }
	 .banner-paginas .txt-banner h3 { font-size: 1.6em;  }
	 
	
	
	  
	  }
/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 1029px) {
  .t-all {
    float: left;
    padding-right: 0.75em;
    width: 100%;
    padding-right: 0; }

  .t-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 50%; }

  .t-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%; }

  .t-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%; }

  .t-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%; }

  .t-3of4 {
    float: left;
    padding-right: 0.75em;
    width: 75%; }

  .t-1of5 {
    float: left;
    padding-right: 0.75em;
    width: 20%; }

  .t-2of5 {
    float: left;
    padding-right: 0.75em;
    width: 40%; }

  .t-3of5 {
    float: left;
    padding-right: 0.75em;
    width: 60%; }

  .t-4of5 {
    float: left;
    padding-right: 0.75em;
    width: 80%; }
	
	body { font-size: 15px;}
	h3 { font-size: 1.35em;}
	h2, .h2 { font-size: 2em; }
	.circle-icon {margin-right: 0.5em; }
	.foot3 h3 {font-size: 1.35em; }
	.top-200 { top: -100px !important;} 

	 }
	 
	
	 
/* Landscape to small desktop */
@media (min-width: 1030px) {
  .d-all {
    float: left;
    width: 100%;
    padding-right: 0; }

  .d-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 50%; }

  .d-1of3 {
    float: left;
    padding-right: 0.75em;
    width: 33.33%; }

  .d-2of3 {
    float: left;
    padding-right: 0.75em;
    width: 66.66%; }

  .d-1of4 {
    float: left;
    padding-right: 0.75em;
    width: 25%; }

  .d-3of4 {
    float: left;
    padding-right: 0.75em;
    width: 75%; }

  .d-1of5 {
    float: left;
    padding-right: 0.75em;
    width: 20%; }

  .d-2of5 {
    float: left;
    padding-right: 0.75em;
    width: 40%; }

  .d-3of5 {
    float: left;
    padding-right: 0.75em;
    width: 60%; }

  .d-4of5 {
    float: left;
    padding-right: 0.75em;
    width: 80%; }

  .d-1of6 {
    float: left;
    padding-right: 0.75em;
    width: 16.6666666667%; }

  .d-1of7 {
    float: left;
    padding-right: 0.75em;
    width: 14.2857142857%; }

  .d-2of7 {
    float: left;
    padding-right: 0.75em;
    width: 28.5714286%; }

  .d-3of7 {
    float: left;
    padding-right: 0.75em;
    width: 42.8571429%; }

  .d-4of7 {
    float: left;
    padding-right: 0.75em;
    width: 57.1428572%; }

  .d-5of7 {
    float: left;
    padding-right: 0.75em;
    width: 71.4285715%; }

  .d-6of7 {
    float: left;
    padding-right: 0.75em;
    width: 85.7142857%; }

  .d-1of8 {
    float: left;
    padding-right: 0.75em;
    width: 12.5%; }

  .d-1of9 {
    float: left;
    padding-right: 0.75em;
    width: 11.1111111111%; }

  .d-1of10 {
    float: left;
    padding-right: 0.75em;
    width: 10%; }

  .d-1of11 {
    float: left;
    padding-right: 0.75em;
    width: 9.09090909091%; }

  .d-1of12 {
    float: left;
    padding-right: 0.75em;
    width: 8.33%; }
	
 }


/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (min-width: 481px) {
  .menu {
    /* end .menu ul */ }
    .menu ul {
      /* end .menu ul li */
      /* highlight current page */
      /* end current highlighters */ }
      .menu ul li {
        /*
        plan your menus and drop-downs wisely.
        */ }
        .menu ul li a {
          /*
          you can use hover styles here even though this size
          has the possibility of being a mobile device.
          */ }

  /* end .menu */
  /*********************
  POSTS & CONTENT STYLES
  *********************/
  /* entry content */
  .entry-content {
    /* at this larger size, we can start to align images */ }
    .entry-content .alignleft, .entry-content img.alignleft {
      margin-right: 1.5em;
      display: inline;
      float: left; }
    .entry-content .alignright, .entry-content img.alignright {
      margin-left: 1.5em;
      display: inline;
      float: right; }
    .entry-content .aligncenter, .entry-content img.aligncenter {
      margin-right: auto;
      margin-left: auto;
      display: block;
      clear: both; }

  /* end .entry-content */
  /*********************
  FOOTER STYLES
  *********************/
  /*
  check your menus here. do they look good?
  do they need tweaking?
  */
  /* end .footer-links */ }
/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {
  .nav {
    border: 0;
    /* end .menu ul li */
    /* highlight current page */
    /* end current highlighters */ }
    .nav ul { 
      margin-top: 0; }
    #inner-header .nav li {
      float: left;
      position: relative; line-height: 1.25em;
   }
      .nav li a {
        border-bottom: 0;
}
        .nav li a:hover span, .nav li a:focus span, .nav li.current-menu-item a span {
          padding-bottom: 0.5em;
       }
		  
		  .nav li#menu-item-102.current-menu-item a span,  .nav li#menu-item-453.current-menu-item a span {
          padding-bottom: 0.5em;
     }
		  
		  .nav li#menu-item-102.current-menu-item a:hover span, .nav li#menu-item-102.current-menu-item a:focus span, .nav li#menu-item-453.current-menu-item a:hover span, .nav li#menu-item-453.current-menu-item a:focus span {
          padding-bottom: 0.5em;
          }
		  
		  
      .nav li ul.sub-menu,
      .nav li ul.children {
        margin-top: 5px;
        position: absolute;
        visibility: hidden;
        z-index: 8999;
		padding-top: 5px;
		padding-bottom: 5px; 
		background-color: rgba(255, 255, 255, 0.75); 
		padding-left: 0;
margin-left: 0;
-webkit-box-shadow: 1px 3px 2px 0 rgba(0,0,0,0.65);
box-shadow: 1px 3px 2px 0 rgba(0,0,0,0.65);
width: 130% !important; 
   }
   
   .nav li ul.sub-menu:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0px;
 width: 2.5em; height: 5px; background-color: #89bb35;
}
       #inner-header .nav li ul.sub-menu li,
        #inner-header .nav li ul.children li { height: 1.5rem;  float: none; display: block; 
   }
    
          .nav li ul.sub-menu li a,
          .nav li ul.children li a { color: #000; height: 1.5rem; line-height: 1.5rem; font-size: 0.8em; 
            padding: 0 0 0 1em !important;
            border-right: 0;
            display: block;
            width: 130%;
			text-transform: none !important; 
            }
          .nav li ul.sub-menu li:last-child a,
          .nav li ul.children li:last-child a {
            border-bottom: 0; }
          .nav li ul.sub-menu li ul,
          .nav li ul.children li ul {
            top: 0;
            left: 100%; }
      .nav li:hover > ul {
        top: auto;
        visibility: visible; }

  /* end .nav */
  /*********************
  SIDEBARS & ASIDES
  *********************/
  .sidebar {
    margin-top: 2.2em; }

  .widgettitle {

    margin-bottom: 0.75em; }

  .widget {
    padding: 0 10px;
    margin: 2.2em 0; }
    .widget ul li {
      margin-bottom: 0.75em;
      /* deep nesting */ }
      .widget ul li ul {
        margin-top: 0.75em;
        padding-left: 1em; }

  /* links widget */
  /* meta widget */
  /* pages widget */
  /* recent-posts widget */
  /* archives widget */
  /* tag-cloud widget */
  /* calendar widget */
  /* category widget */
  /* recent-comments widget */
  /* search widget */
  /* text widget */
  /*********************
  FOOTER STYLES
  *********************/
  /*
  you'll probably need to do quite a bit
  of overriding here if you styled them for
  mobile. Make sure to double check these!
  */
  .footer-links ul li {
    /*
    be careful with the depth of your menus.
    it's very rare to have multi-depth menus in
    the footer.
    */ }

  /* end .footer-links */ }
/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 961px) {
	#my-language-switcher-mobile { display: none !important;}
 
 }
/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

 }
/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; }

  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }
	
	@media only screen and (min-width: 768px) {
		body {font-size: 13px; }
		
		
	}
	
	@media only screen and (min-width: 960px) {
		body {font-size: 13.5px; }
		
	}
	
	@media only screen and (min-width: 1060px) {
		body {font-size: 14px; }
		
		
	}
	
	@media only screen and (min-width: 1160px) {
		body {font-size: 14.5px; }
		
	}
	
	@media only screen and (min-width: 1281px) {
		body {font-size: 15px; }
		
	}
	
	@media only screen and (min-width: 1360px) {
		body {font-size: 15.5px; }
		
		
	}
	
	@media only screen and (min-width: 1500px) {
.wrap-full { font-size: 16px;}
.banner-paginas .txt-banner h3 { font-size: 3.1rem; }
 }
 
 @media only screen and (min-width: 1601px) {
.wrap-full { font-size: 18px;}
.banner-paginas .txt-banner h3 { font-size: 3.15rem; }
.nav li a {padding: 0 2.5em 0 0; }
 }
 @media only screen and (min-width: 1800px) {
.wrap-full { font-size: 19px;}

 }
 @media only screen and (min-width: 2000px) {
.wrap-full { font-size: 20px;}
 }

	
	@media only screen and (min-width: 1081px) {
	
	.banner-paginas .banner-1024, .banner-paginas .banner-660 { display: none !important;}
	.banner-paginas .banner-desktop { display: block;}
	
	
}


@media only screen and (max-width: 1600px) {
.nav li a {padding: 0 2.25em 0 0; }
}
@media only screen and (max-width: 1500px) {
.nav li a {padding: 0 1.9em 0 0; }
}
@media only screen and (max-width: 1400px) {
.nav li a {padding: 0 1.8em 0 0; }
#menu-header .clear60 {height: 3.2em; }
.header.sticky #menu-header .clear60 { height: 1.5em; }
}
@media only screen and (max-width: 1300px) {
.nav li a {padding: 0 1.6em 0 0; }
#menu-header .clear60 {height: 3em; }
.header.sticky #menu-header .clear60 { height: 1.5em; }
#logo-karto {margin: 0.75em 0 0 0; }
}
@media only screen and (max-width: 1280px) {
.nav li a {padding: 0 1.5em 0 0; }
#menu-header .clear60 {height: 2.7em; }
.header.sticky #menu-header .clear60 { height: 1.25em; }
#logo-karto {margin: 0.5em 0 0 0; }
.nav li ul.sub-menu { width: 135% !important;}
}
@media only screen and (max-width: 1200px) {
.nav li a {padding: 0 1.2em 0 0; }
#menu-header .clear60 {height: 2.5em; }
.header.sticky #menu-header .clear60 { height: 1.15em; }
#logo-karto {margin: 0.25em 0 0; }
h2, .h2 {font-size: 2em; }
a.vermas {font-size: 1.15em;}
h3, .h3 {font-size: 1.35em;}
.foot3 h3 {font-size: 1.3em;}
}
@media only screen and (max-width: 1100px) {
.nav li a {padding: 0 1.1em 0 0; font-size: 0.9em;}
#menu-header .clear60 {height: 2.2em; }
.header.sticky #menu-header .clear60 { height: 1em; }
.nav li ul.sub-menu { width: 140% !important;}

}
@media only screen and (max-width: 1000px) {
.nav li a {padding: 0 1em 0 0; font-size: 0.85em; }
#menu-header .clear60 {height: 2em; }
.header.sticky #menu-header .clear60 { height: 1em; }
.nav li ul.sub-menu { width: 140% !important;}

}

 @media only screen and (max-width: 960px) {
	#logo-karto {
    width: 12%;
    float: left;
}
#my-language-switcher-mobile { float: left; width: 30%;}
.responsive-menu-pro-item-link { text-transform: uppercase; }
.responsive-menu-pro-submenu li a { text-transform: none; }
#responsive-menu-pro li.wpml-ls-item { width: auto !important; display: inline-block;  min-width: 2em;  }
#responsive-menu-pro li.wpml-ls-item.wpml-ls-first-item  { padding: 0 0.5em 0 10%; } 
#responsive-menu-pro li.wpml-ls-item.wpml-ls-first-item a { padding: 0 !important; font-weight: 300; font-size: 90%;  } 
#responsive-menu-pro li.wpml-ls-item a {  font-weight: 300 !important; font-size: 12px !important;  } 
#responsive-menu-pro li.wpml-ls-current-language a { font-weight: 600 !important;}
#responsive-menu-pro li.wpml-ls-item.wpml-ls-first-item a::after {
  content: "  /";
}
.wrap-content {width: 82%;}
.wrap, .wrap-footer { width: 92%;}
h2, .h2 {font-size: 1.8em;}
a.vermas {font-size: 1em;}
h3, .h3 {font-size: 1.25em;}
figure.effect-ming p {margin: 25% auto; width: 90%; }
.foot2 { width: 44%;}
.foot3 {width: 40%; padding: 0 0.5em; }
.foot3 h3 {font-size: 1.2em;}
.foot1 { width: 16%; padding: 0 0.5em 1em 0; }
.foot2 .link-address { float: left; }
.foot4 { display: none; }

.container-popup {width: 26%; left: -12%; }

 }
	 
	@media (min-width: 660px) and (max-width: 960px) { 
	 .top-200 { position: relative; top: -80px !important; } 
	 #logo, #logo-karto {width: 20%; margin-right: 1.5em; }
	 #logo-karto {width: 12.5% !important;}
	 
	 .header.sticky #logo, .home .header.sticky #logo { width: 18%; }
	 .header.sticky #logo-karto, .home .header.sticky #logo-karto { width: 14% !important;}
	 
	}
	 
	
@media only screen and (max-width: 680px) {
 body {font-size: 11px; }
.banner .ls-gui-element.ls-nav-prev, .banner .ls-gui-element.ls-nav-next { display: none; }
#logo {
    float: left;
    margin: 0.35em 2% 0.35em 0;
}
  .banner-paginas .txt-banner h3 { font-size: 1.4em;   }
   .banner-paginas .txt-banner h3 { font-size: 1.1em; }
  #logo {width: 30%;}
	 #logo-karto, .header.sticky #logo-karto, .home .header.sticky #logo-karto {width: 20%; }
	.home .header {
		background-color: rgba(0, 0, 0, 0.65); }
	 
	 .header.sticky #logo, .home .header.sticky #logo { width: 32%; }
	 #que-hacemos-section .d1d3, .contacto-image, .contacto-form {
    width: 100%;
    float: none;
    margin: 0 auto 2em;
	max-width: 460px; }
	.foot1 { width: 30%; }
	.foot2 { width: 70%; }
	.foot3 { width: 72%; margin-left: 28%;}
	.foot3 h3 { font-size: 1.2em; }
	.foot4 { display: none;}
	.certificaciones { width: 33.33%; margin-bottom: 1.5em; } 
	.certificaciones:nth-child(4n) {
 clear: both; 
}
	
	 
	 

}

@media only screen and (max-width: 560px) {

    .banner-paginas .txt-banner h3 { font-size: 1.25em !important;  }
	.foot3 { width: 82%; margin-left: 18%;}
	.foot3 h3 { font-size: 1.15em; }
	 .banner-paginas .popup { width: 20%; position: absolute; top: 0; z-index: 90; right: 0; max-width: 200px; }
	 .container-popup {

    width: 35% !important; }


}


@media only screen and (max-width: 400px) {
	 body {font-size: 14px; }
a.botao { display: block; max-width: 260px; text-align: center;}
a.botao.first {
    margin-right: auto;
}
.certificaciones { width: 50%; margin-bottom: 1.5em; } 
	.certificaciones:nth-child(3n), .certificaciones:nth-child(4n) {
 clear: none; 
}

 
}
@media only screen and (max-width: 330px) {

	.foot3 h3 { font-size: 1em; }
	


}