/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/* CSS Document */

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


@import url('https://fonts.googleapis.com/css?family=Bitter:wght@300;400;700;800&display=swap|Open+Sans:300,400,400i,700,800');
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');

* {padding:0; margin:0;}

html {font-size:14px;}

body {font-family: 'Open Sans', sans-serif; /* font-weight:300;*/ font-size:16px; background:#f7f7f7; color:#585858;}

h1, h2, h3, h4, h5 {padding:20px 0; font-weight:300;  }

h1 {font-size: 6vw; font-weight: 900; line-height: 9vh; color: #2fc8d3;}

h2 {font-size:140%; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; line-height: 34px;  }
.bitter {font-family: 'Bitter', serif; font-weight:300; font-size: 3vw; line-height: 3.5vw; }
.bitter strong {font-weight:800;}
h2.bitter {font-size: 150%; text-transform: initial;}
h4.bitter { padding-top: 0;}

h3 {font-size:140%;}

h4 {font-size:100%;font-weight: 700;}

p {padding-bottom:20px; line-height:1.8em;}

a {color:#585858; text-decoration:none;}

i {color:#2FC8D3;}

.clear {clear:both;}

.centrado {text-align:center;}

.derecha {text-align:right;}

.completoblanco {background:#ffffff;width:96%; clear:both;}

.completogris {background:#ededed;width:96%;  clear:both;}

.completoamarillo {background:#ECDB71;width:96%; padding:3%; clear:both;}

.main {max-width:1200px; width:100%; margin:0 auto !important; float: none !important; padding:3% 0%; text-align:center;}

.cabecera {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.menu {max-width:1200px; width:96%; margin:0 auto !important; float: none !important; padding:0.5% ; text-align:center;}

.interior {max-width:1200px; width:96%; margin:5% auto 5% auto; padding:4% 2%; text-align:center;}

.main h2, .main p {padding-bottom:30px; color:#585858;}

.trio {min-height:200px; height:50vh;}

.formnews {text-align:center; font-size:14px!important;}

.formnews .hs-form-field {margin:2% 0;}

.formnews input {padding:4% 2%; width:96%; margin:1%; }

.formnews textarea {padding:4% 2%; width:96%; margin:1%; }

.formnews input[type=submit] {max-width:144px; width:100%; }


 
.inputs-list li {font-size:9px;color:#545454; list-style-type:none; }

.fd-azul {background:#d3e1e2; padding:2% 0;}

.fd-serv { position:relative; padding: 20px; margin-bottom:50px;}

.fd-serv .cta_button {position: absolute; bottom:0;}



/* =========================================
   HEADER
============================================ */

.top-bar {background:#2FC8D3; }

.top-bar .main {max-width:1200px; width:96%; margin:0 auto; padding:0; }

.header {
  width: 100%;
  background: #ffffff; 
  z-index: 990;
  padding: 0 0 7px 0;
  width:100%!important;
}

.header a img {
  float:left;
  padding:5px 0 0 5%;
  width:200px!important;
}

.header h1,
.header .button {
  float:right;
  text-decoration:none;
  text-align:center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  color: #ffffff;
  font-size: 1em;
  margin:0 0;
  height:13px;
  padding:0 0;
  width: 100px;
  background-color: #4AB240;
  overflow:hidden;
      -webkit-transition: width 0.2s, height 0.3s;
  -moz-transition: width 0.2s, height 0.3s;
  transition: width 0.2s, height 0.3s;
}

.logo{
  text-decoration: none;
  font-size: 2em;
  color: white;
  z-index: 999;
  width:250px;
  float:left;
}

.menusecundario ul li {display:inline;float:right; padding:1% 2%; text-transform:uppercase;font-size:14px;}

.menuprincipal ul li {display:inline;float:left; padding:1.4% 5%;text-transform:uppercase;font-size:16px;}

.menusecundario ul li a {color:#ffffff;}


/* =========================================
   CABECERA HOME
============================================ */


.home {text-align:left; width:75%; margin:5% auto;}
.home h2 {font-size:1.1vw!important;font-weight:400!important; color:#ffffff!important;}
.home p { font-size: 6vw!important; font-weight: 900; line-height: 9.2vh!important; color: #ffffff!important;}
.fd-amarillo {padding:2%; /*background:#fcf4c8; */ border:4px solid #ff007e;}
.form-title {text-align:left!important; font-family: 'Bitter', serif; font-weight:300;} 
 label { letter-spacing:0px; font-size:14px;} 
.hs-error-msg {text-transform:initial; letter-spacing:0px; color: firebrick;}
form fieldset {max-width:95%!important; width:auto;}
fieldset.form-columns-2 .input { margin-right: 8px; margin-left: 20px; width: 85%;}
.hs-form-field {margin-bottom:20px;}
.input input {width: 100%; padding: 3px; }
textarea {height:100px;}
.legal-consent-container{
font-size: 11px;
    text-align: initial;
    margin-left: 20px;
}
.legal-consent-container .hs-form-booleancheckbox-display>span { display: block; margin-left: 20px; text-transform: initial; letter-spacing: 0px; text-align: initial;}
ul.inputs-list {margin-left:30px;}
.legal-consent-container p {
  padding-bottom: 0px;}


/* ==========================================================================
   Custom Menu Primary
   ========================================================================== */


/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul{ 
  background:;
}
.custom-menu-primary .hs-menu-wrapper > ul > li{
 display:inline;float:left; padding:1.4% 3%;text-transform:uppercase;font-size:15px;letter-spacing: 3px;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{
  color:#545454!important;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{
  color:#f4f4f4;
}


/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul{}
.custom-menu-primary .hs-menu-wrapper > ul ul li{
  background:;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
  color:;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{
  color:;
}

/* Override max width on menu links */
.custom-menu-primary .hs-menu-wrapper > ul li a, 
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}


@media (max-width: 1380px) {
  .custom-menu-primary .hs-menu-wrapper ul li { padding: 1.4% 2%;!important }
  
}

@media (max-width: 1170px) {
  .custom-menu-primary .hs-menu-wrapper ul li { font-size:13px; }
}

/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:1050px) {
      .custom-menu-primary .hs-menu-wrapper { 
          display:block !important;
      }
 .globe_class {display:none;}  
   
  }




/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

.mobile-trigger, .child-trigger{
    display: none; /* Hide button on Desktop */
}

@media (max-width: 1050px){

.globe_class {display:none;}  
  
  /* Variables
     ========================================================================== */

     /* Set Mobile Menu Background Color */
        /* Set Link Color */
   /* Set Link Hover Color */

  /* 
    * Menu Reset
    *
    * Remove styling from desktop version of custom-menu-primary. Place any 
    * additional CSS you want removed from the mobile menu in this reset 
    */

  .custom-menu-primary,
  .custom-menu-primary .hs-menu-wrapper > ul,
  .custom-menu-primary .hs-menu-wrapper > ul li,
  .custom-menu-primary .hs-menu-wrapper > ul li a{
    display: block;
    float: none;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    padding: 0px;
    margin: 0px;
    background-image: none;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
    max-width: none;
    width: 100%;
    height: auto;
    line-height: 1;  
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    text-align: left;
    color:#ffffff;
  }

  
  /* Toggle Button
     ========================================================================== */

  .mobile-trigger{
    display: inline-block !important; /* Show button on mobile */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute; /*******************************************/
    top: 10px;          /* Position Button at right of screen  */
    right: 10px;        /*******************************************/
    width: auto; /* Button width */
    height: auto; /* Button height */      
    padding: 10px;
    background: #ffffff; /* Background color */
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    color: #2fc8d3; 
  }
  .mobile-trigger:hover{
    text-decoration: none; /* Removes link text underline on button */
    color:#ffffff;
    background-color: #545454; 
    border-color: transparent;
  }

  /* Change button when menu is open */
  .mobile-open .mobile-trigger{
    color:#ffffff;
    background-color: #545454; 
    border-color: transparent;
  }


  /* Toggle Button Icon
     ========================================================================== */

  .mobile-trigger i{
    display: inline;
    position: relative;
    top: -4px;
  }
  .mobile-trigger i:before, .mobile-trigger i:after{
    position: absolute;
    content: '';
  }
  .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{
    width: 40px; /* Icon line width */
    height: 2px; /* Icon line height */
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #2fc8d3; /* Icon color */
    display: inline-block;
  }
  .mobile-trigger i:before{
    top: -8px; /* Position top line */
  }
  .mobile-trigger i:after{
    top: 8px; /* Position bottom line */
  }
  
  .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after,  
  .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{
      background-color: #ffffff; /* Icon color */
  }


  /* Child Toggle Button
     ========================================================================== */

  .child-trigger{
    display: block !important; /* Hide button on Desktop */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute;
    top: 0px;
    right: 0px;
    width: 55px !important; /* Button width */
    min-width: 55px !important;
    height: 45px !important; /* Button height */  
    padding: 0 !important;
    border-left: 1px dotted rgba(255, 255, 255, .20);
  }
  .child-trigger:hover{
    text-decoration: none;
  }
  .child-trigger i{
    position: relative;
    top: 50%; /* Centers icon inside button */
    margin: 0 auto !important;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .child-trigger i:after{
    position: absolute;
    content: '';
  }
  .child-trigger i, .child-trigger i:after{
    width: 10px; /* Icon line width */
    height: 1px; /* Icon line height */
    background-color:#ffffff; /* Icon color */
    display: block;

  }
  .child-trigger i:after{
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .child-trigger.child-open i:after{
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  .child-trigger.child-open i{
  }

    
  /* Menu Styles on Mobile Devices
     ========================================================================== */  
     
   .custom-menu-primary.js-enabled{
   }

  /* Hide menu on mobile */
  .custom-menu-primary.js-enabled .hs-menu-wrapper,
  .custom-menu-primary.js-enabled .hs-menu-children-wrapper{
    display: none;
  }  

  /* Make child lists appear below parent items */
  .custom-menu-primary ul.hs-menu-children-wrapper{
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    display: none;
  }

  /* Mobile Menu Styles */ 
  .custom-menu-primary.js-enabled .hs-menu-wrapper{
    width: 100%;
    position: relative; /**************************************************************/
    top: 35px;             /* Positions the menu to drop from the very top of the screen */
    left: 0;          /**************************************************************/
    padding: 0;
  }
  .custom-menu-primary .hs-menu-wrapper{
    background-color:#ffffff; /* Menu background color set off global menuColorMobile variable */
    width: 100%; /* Full screen width */
  }

   /* Level 1 Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul > li{
    position: relative;
  }
  .custom-menu-primary .hs-menu-wrapper > ul > li a{
    line-height: 45px;
    overflow: visible;
  }

  /* Level 1 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul li{
    border-top: 1px dotted rgba(0,0,0, .35); /* Adds transparent dark highlights to top of top level list items */
  }
  .custom-menu-primary .hs-menu-wrapper >  ul li a{
    padding: 0 10px;
    color:#ffffff; /* link color set by global mobile-aColor variable */
    text-align:center;
  }
  .custom-menu-primary .hs-menu-wrapper > ul li a:hover{
    color:#ffffff; /* link hover color set by global mobile-aColorHover variable */
  }

  /* Level 2 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul ul li{
    background-color: rgba(255, 255, 255, .08);
  }
  .custom-menu-primary .hs-menu-wrapper > ul ul li a{
    text-indent: 10px; /* Indent Child lists */
    font-size: 16px; /* Font size of child lists */
  }

  /* Level 3 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul ul ul li a{
    text-indent: 30px; /* Indent Child lists */
  }
  .custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{
    text-indent: 50px; /* Indent Child lists */
  }
}




/* /////////////////////////////////
BLOG
//////////////////////////////////*/

.blog-content {text-align: left; max-width:inherit !important;margin-right: 0 !important;}   
.blog-content h1 { font-size: 68px; line-height: 72px; text-align: left;}
.blog-content h1 a {color: #2fc8d3!important;}
.pillar__navigation {padding: 3%; background: #ffffff; margin-bottom: 3%;}
/* .blog-content h3 {padding-bottom: 0; font-size: 18px;  color: #2fc8d3; text-transform: uppercase; margin-bottom: -5px; font-weight: bold; } */
ol.pillar__navigation li { font-size: 18px; padding-bottom: 10px!important; list-style-type: none; padding-left:0!important; margin-left:0!important;} 
ol.pillar__navigation li:before {content:'➜'; padding-right:10px; color:#2fc8d3;} 
.blog-content .meta { margin-bottom:5%;} 
.blog-content .meta p {font-size:14px; padding-bottom:0;}
.separador { width: 100px; height: 4px; margin: 2% 0; background: #d8d8d8;}
.blog-content .entrada {font-size:20px; margin:2% 0; padding:0;}
.blog-content img {max-width:800px; width:100%;}
.blog-content .pillar__chapter h2 { color: #2fc8d3;font-size: 30px;text-align: left;padding-bottom: 0px;padding-top: 0;line-height:40px !important;}
.blog-content ol li, .blog-content ul li {padding-bottom: 10px; color: #585858; line-height: 1.8em;  margin-left: 30px;}
.blog-content .autor {margin-top:5%; font-size: initial;}
.blog-content .comentarios {margin-top:5%;}
.blog-content .comentarios h4 {font-family:bitter, serif; font-size:20px;} 
input.hs-button.primary {background:#ffffff; border:2px solid #2fc8d3!important;}
.legal-consent-container ul.inputs-list {margin-left:0px;} 
.legal-consent-container ul li {padding-left: 0px; margin-left: 0px;} 
.comentarios {text-align:left;}
.comentarios div input {padding:5px 0; margin:0px; width:100%; }
.comentarios textarea {width:100%; }
.comentarios input[type="checkbox"] {width:100%; max-width:20px;margin-top:3px;}
.comment-reply-to { color: #9e9e9e;margin-bottom: 5%;} 
#comments-listing {background:#ffffff; margin-bottom:5%;} 
#comments-listing div {padding-left:20px;}  

.blog-sidebar {}  
.blog-sidebar ul li {list-style-type: none; padding: 10px;text-transform: uppercase; font-size: 14px; letter-spacing: 2px; border-bottom: 1px solid #d4d4d4; text-align: right;} 


.listacategorias {padding:3% 0; max-width:1200px;margin:0 auto;text-align:center; }
.categoria {display:inline-block; padding:1% 1.5%; margin:0 0; border:1px solid #d4d4d4;}
.introdic {display:inline-block; padding:1% 1.5%; margin:0 0; }
.categoriadic {display:inline-block; padding:1% 1.5%; border:2px solid #ff007e;color:#ff007e;}
.blog-section .post-body a {color:#2FC8D3;}
.post-body ul {list-style-type: none; margin-bottom:20px;}
.post-body ul li{line-height:1.8em;}
.post-body ul li:before { content: "\25cf"; color: #2FC8D3; margin: 0 1% 0 0; font-size: 12px; }
.post-body ul li ul li {margin-left:20px; list-style-type:circle;}
.post-body ul li ul li:before {content:''; margin:0;}

.post-body ol {list-style:none;}
.post-body ol li {  padding-bottom: 20px; line-height: 1.8em; counter-increment: my-awesome-counter;}

.post-body ol li::before {
    content: counter(my-awesome-counter) ". ";
    font-weight: bold;
    font-size: 26px;
    color: #2FC8D3;
}




.image-featured {overflow: hidden; height: 150px;}

.hs-featured-image {max-width: 100%; width: 100%; height: auto;}

.about-author-sec {padding:2% 0; border-top:1px solid #2FC8D3; border-bottom:1px solid #2FC8D3;}

.formblog {text-align:center; padding:0;}

.hs-author-profile img{max-width:200px;}

.post-listing-simple .post-item{min-height: 150px;}
.blog-listing-wrapper .post-item:nth-child(3n+1){clear:initial;}

.post-body h2 {color: #2fc8d3;}

.pillar__content a {color:#ff007e;}
#pillar__index > h3 {color:#2fc8d3;font-family: 'Open Sans', sans-serif;font-weight: 700 !important;text-transform: uppercase !important;}


/*/// Destacados ///*/

.botonleer {padding:2%; border:1px solid #545454; font-size:12px; text-transform:uppercase; width:150px; text-align:center; margin-top:5%; }

.cuadrado-blog:hover .botonleer, .cuadrado-blog-solo:hover .botonleer  {background:#ffffff;}

/* ////// */

.blog-home {display:flex; flex-wrap:wrap; }
.blog-home a:nth-child(odd), .blog-home a:nth-child(even) {  width:46%; }
.blog-home a:nth-child(odd).cuadrado-blog {  background:#ffffff; color:#545454; padding:2%; text-align:left; list-style-type:none; position:relative; -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
    transition: background 0.5s;}

.blog-home a:nth-child(even).cuadrado-blog {background:#ECECEC; color:#545454; padding:2%; text-align:left; list-style-type:none; position:relative; -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
    transition:background 0.5s;}

.blog-home a.cuadrado-blog:hover {background-color: #2FC8D3!important;}

.cuadrado-blog h2 {text-transform:uppercase; font-weight:700; letter-spacing:1px; font-size: 22px; margin-bottom: 1%; line-height: 30px;}

.cuadrado-blog p {line-height:1.8em;}

.cuadrado-blog-solo {background:#ffffff; color:#545454; padding:5% 2%; text-align:left; width: 33.3%!important;
    float: left;
    margin: 0!important; position:relative; height:50vh; -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
    transition:background 2s;}
    
.cuadrado-blog-solo:hover {background-color: #2FC8D3;}

/* ///// CUADRADO BLOG CUANDO HAY 2 ///// */

a:nth-child(odd) .cuadrado-blog-2 {width:45.7%;  float:left;  background:#ffffff; color:#545454; padding:5% 2%; text-align:left; list-style-type:none; position:relative; min-height: 33vh; height: 100%; -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
    transition: background 2s;}

a:nth-child(even) .cuadrado-blog-2 {background:#ECECEC; width:45.7%;  float:left; color:#545454; padding:5% 2%; text-align:left; list-style-type:none; position:relative; min-height: 33vh; height: 100%; -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
    transition:background 2s;}

a:hover .cuadrado-blog-2 {background-color: #2FC8D3;}

.cuadrado-blog-2 h2 {text-transform:uppercase; font-weight:700; letter-spacing:1px; font-size:30px; margin-bottom:7%; line-height:34px;}

.cuadrado-blog-2 p {line-height:1.8em;}


/*//////////Was previously set up like this: .clearfix{font-size:65%;} //////////*/
.post-body clearfix{font-size:100%;}

.title-blog h1{text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 42px;
    /*margin-top:-165px;*/}
.title-blog h1 span{/*background: rgba(255, 255, 255, 0.7);*/
    /*padding: 7%;*/
    width:90%;
    float:left;
}

.blog-header {padding:10% 2% 0 2%;max-width:1200px; width:96%; margin:0 auto !important; float: none !important;}

.post-header h1 {text-align:left;}
.post-item:nth-child(3n+1){clear:both}
.post-item {width:44%; float:left; text-align:left; background: #ffffff; padding: 2%; min-height:420px; margin-right:4%; margin-bottom: 4%; -webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;} 

.post-item:nth-child(even) {background:#ffffff;margin-right:0!important;}

.post-item:hover {background-color: #2FC8D3;}



.imgdestacada {float:none!important; margin:0!important; width:100%!important; height:250px;}

.titulo background: rgba(255, 255, 255, 0.8);
    padding: 2%;
}

.titulo h2 {text-transform: uppercase;
    font-weight: 700; 
    letter-spacing: 1px;
    font-size: 28px;
    line-height: 34px;}

a.more-link {text-transform:uppercase;font-size:12px;text-align:center;padding: 2% 36%;background: #72D3DA; color:#ffffff;}

.blog-pagination {clear:both; padding:3%;text-align:center;} 
.blog-pagination a {color:#ffffff;}
.blog-pagination .previous-posts-link, .blog-pagination .boton, .blog-pagination .next-posts-link{display:inline;}
.blog-pagination .previous-posts-link{margin-right: 50px; font-size: 14px; text-transform: uppercase; background: #ff007e; padding: 10px; float: left;}
.blog-pagination .next-posts-link{margin-left: 50px; font-size: 14px; text-transform: uppercase; background: #ff007e; padding: 10px; float: right;}
.entrada {padding:2%;}
.entrada ul, .entrada ol{margin-left:20px;}
.autor {font-size:11px;padding:2% 0;}
.hs-author-profile{text-align:center;} 


 

input.hs-button.primary {border:0;padding:10px; text-transform:uppercase;}
input.hs-button.primary:hover {opacity:0.5;}


/*////////////EFECTO/////////////*/
.cuadricula .efecto {
	position: relative;
	float: left;
	overflow: hidden;
	width:33.33%;
	text-align: center;
	cursor: pointer;
}

.cuadricula .efecto .texto{
	padding:2%;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cuadricula .efecto .texto::before,
.cuadricula .efecto .texto::after {
	pointer-events: none;
}

.cuadricula .efecto .texto, 
.cuadricula .efecto .texto > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 80%;
	padding: 8% 10%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */

.cuadricula .efecto .texto-efecto > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.cuadricula .efecto h2 {
	font-weight: 300;
}

.cuadricula .efecto h2,
.cuadricula .efecto p {
	margin: 0;
}

#cuadricula .efecto p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

.efecto{display:table;}


.efecto .texto::before,
.efecto .texto::after {
	position: absolute;
	content: '';
	opacity: 0;
}

.efecto .texto::before {
	top: 40px;
	right: 20px;
	bottom: 40px;
	left: 20px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.efecto .texto::after {
	top: 20px;
	right: 40px;
	bottom: 20px;
	left: 40px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;

}


	

.efecto p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}


.efecto h2 {padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;

	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}


.efecto .texto::before,
.efecto .texto::after,
.efecto p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}


.efecto:hover .texto::before,
.efecto:hover .texto::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.efecto:hover h2,
.efecto:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.efecto:hover .texto::after,
.efecto:hover h2,
.efecto:hover p{
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

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


#cuadricula {position: relative;
	margin: 0 auto;
	padding: 0 0 4em;
	list-style: none;
	text-align: center;
	width: 100%;
    height: 100vh;
    font-family: 'Open Sans', sans-serif;
    color: #ffffff;
    font-weight: 300;
    text-align: center;}

.cuadrado {width:25%!important; height:50%; float:left; display:table; padding:3%; color:#545454;margin-left:0!important;text-align:center; border-right:1px solid #d4d4d4;}

.cuadrado .texto p, .cuadrado .texto h3 {text-align:center;}

.cuadrado:last-child {border-right:none;}

.cuadrado-uno {width:33.333%; height:50%; float:left; display:table; background-color:#2FC8D3;}

.texto {display:table-cell;vertical-align:middle; padding:2%; } 

.texto img.icon {max-width:80px; height:auto; margin-bottom:3%;}

.paq {background:#ffffff;}

.row-fluid .tercio {padding:3%; margin:0!important; width:33.3%;}

textarea {width:100%;}


/* /////////////////////////////////
DICCIONARIO
//////////////////////////////////*/
.maindic {max-width:1000px; width:96%; margin:0 auto !important; float: none !important; padding:4% 2%; }
.espaciodic p a {color:#ff007e!important;}
.dic {font-family: 'Just Another Hand', cursive; text-transform:initial; font-weight:normal;}
h1.dic {font-size:80px;}
h2.dic {font-size:40px;}
h2.dictitulo {font-family: 'Just Another Hand', cursive; font-size:40px; font-weight:normal;}
.letras {margin-bottom:3%;padding-bottom:2%;border-bottom:1px solid #ff007e;}
.espaciodic {padding-right:5%;}
.indice {padding:1% 1.3%;border:1px solid #d0d0d0;}
.indice:hover {background-color:#ff007e; }
.indice:hover a {color:#ffffff;}
.sidebar-diccionario {padding:5% 2%; border:3px solid #ff007e;}
.sidebar-diccionario .field{margin-bottom:10%;}
.sidebar-diccionario .hs-input{padding: 4% 2%; width: 96%;}
/* ==================================
   CONTENIDO
=================================== */

.mitad {float:left; width: 46%; padding: 2%;}

.dostercios {float:left; width:58%; padding:3%; display:table;}

.completo {margin:103px 0 0 0 ;}

.completoblog {margin:0 0 0 0 ;}

/*.completoblog h1 {text-align:center;}*/

.completobris{display:none!important;}
/* ==================================
   CALL
=================================== */

.call {width:100%; padding:4% 0; text-align:center; background-color:#134F53; color:#ffffff;  clear:both;}

/*#call .boton {border:2px solid #ffffff; padding:1%; width:200px; margin:2% auto; font-size:150%;}*/

.efecto-boton {
font-size:130%;
    border:2px solid #ffffff;
padding:1%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #ffffff;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 
}
.efecto-boton:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #134F53;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.efecto-boton:hover, .efecto-boton:focus, .efecto-boton:active {
  color: #134F53!important;
}
.efecto-boton:hover:before, .efecto-boton:focus:before, .efecto-boton:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.efecto-boton-blog {
font-size:100%;
    border:2px solid #ffffff;
padding:1%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #ffffff;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 
}
.efecto-boton-blog:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: darkgrey;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.efecto-boton-blog:hover, .efecto-boton:focus, .efecto-boton:active {
  color: darkgrey!important;
}
.efecto-boton-blog:hover:before, .efecto-boton-blog:focus:before, .efecto-boton-blog:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.efecto-boton-home {
    font-size:50%;
    border:2px solid #2FC8D3;
    padding:0.3% 1%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: none;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-transform:uppercase;
  color:#2FC8D3;
 margin-top:40px;
}
.efecto-boton-home:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: none;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.efecto-boton-home:hover, .efecto-boton:focus, .efecto-boton:active {
  color: #ffffff!important;
  background:#2FC8D3;
}
.efecto-boton-home:hover:before, .efecto-boton-blog:focus:before, .efecto-boton-blog:active:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.call a {color:#ffffff; text-decoration:none;}

.call-simple {width:100%; padding:4% 0; text-align:center; background-color:#e7eeee; color:#545454;  clear:both;}

.call-simple .boton {border:2px solid #545454; padding:1%; max-width:300px; width:100%; margin:2% auto; font-size:150%;}

.bt-mas {    border: 1px solid #2FC8D3;
    padding: 1%;
    max-width: 150px;
    width: 100%;
    margin: 2% 0 2% auto;
    font-size: 70%;
    text-align: center;
    text-transform: uppercase;
    float: left;
    color: #999999;}


/* ==================================
   FOOTER
=================================== */

.footer-container-wrapper { margin-top: 5%; background: #f7f7f7;  }

.footer {background: url(https://www.tiralineas.digital/hubfs/fd-footer-tiralineas.jpg) #ffffff no-repeat right top; }

.footer .aviso {background:#545454; color:#ffffff; padding:2px;}

.footer .aviso a {color:#ffffff; text-decoration:none;}

.footer .aviso p {padding-bottom: 0px;}

.solo-mov {display:none!important;}

/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*///////////////////////RESPONSIVE///////////////////////*/
@media only screen and (max-width : 1440px) {
/*.title-blog h1{
    margin-top:-165px;
    }*/


}

@media only screen and (max-width : 1024px) {
a:nth-child(odd) .cuadrado-blog, a:nth-child(even) .cuadrado-blog {height: 40vh;}
/*.title-blog h1{
    margin-top:-145px;
    }*/
.post-item{min-height: 560px;}
.hs_cos_flex-slider .hs_cos_flex-slides img{width:100%;}
}


@media only screen and (max-width : 768px) {
.visible ul li, .visible h1{font-size:98%;}  
.entrada{margin: 0 auto 5% auto;}
.title-blog h1 { line-height: 38px;}
.post-item{width:96%; float:none; min-height:100px!important;}
.cuadricula {height:50vh; padding:0;}
.cuadrado-uno, #cuadrado-dos, #cuadrado-tres, #cuadrado-cuatro, #cuadrado-cinco, #cuadrado-seis {height:50%;}
.efecto h2 {padding-top:40%;font-size: 100%; }
.efecto h2 img {max-width:150px;}
div.texto img.icon {    max-width: 50px;}
.logo img {width:150px; height:auto; margin-top:7px; margin-left:-10px;}
.cbp-af-header a img {height:auto;}
.cuadrado-dos { width: 100%; }
.cuadrado {width: 43%;}
.cuadrado-blog h2, #cuadrado-blog2 h2 {font-size: 20px;}
.bt-mas {display:none;}
.indice{ float:left; width: 1%; text-align: center; padding: 3%;} 
  .home {width:90%;}
  .home p {line-height: 9.5vw; font-size: 11vw;}
  .home h2 { font-size: 4vw; line-height: 6vw;}
  .fd-amarillo {padding: 3%; margin: 10% 0;}
}

@media only screen and (max-width : 767px) {
    .cuadrado-trabajo, #cuadrado-trabajo2, #cuadrado-trabajo3{float:none; width:100%!important; }
.row-fluid .tercio{width:100%;}
.cuadricula .efecto{width:50%;}
.cuadrado-trabajo3{background: url(http://tiralineas.tuwebenpruebas.com/wp-content/uploads/2016/07/ejemplo-minsatek.jpg) no-repeat top center;}
.blog-home a:nth-child(odd), .blog-home a:nth-child(even) {
    width: 100%;
}
.bt-mas {display: initial!important; float: none; margin: 2% 0;}
a:nth-child(odd) .cuadrado-blog, a:nth-child(even) .cuadrado-blog{width:94%; height:auto;}
a:nth-child(odd) .cuadrado-blog-2, a:nth-child(even) .cuadrado-blog-2{width:96%; height:auto;}
.trio{height:auto;}
.main .derecha{width:50%; float:left;}
.main .menusecundario{width:50%; margin-top:6px; float:left;}
.menusecundario ul li{float:none;}
.span10{float: left!important; width: 50%!important; text-align: end;}
.custom-menu-primary{clear:both; margin-bottom: -58px;}
.categoria { display: block; margin:2%;}
.categoriadic {display: block; margin:2%;}
.indice{width: 5%; }
.about-author-sec h4{text-align:left;}
}

@media only screen and (max-width : 600px) {
  h1 {font-size: 13vw; font-weight: 900; line-height: 9vh; color: #2fc8d3;}
  .main {padding:4%;}
  .bitter {font-size: 7vw; line-height: 7.5vw;}
    .home p {line-height: 9.5vw!important; font-size: 11vw!important;}
    .home h2 { font-size: 4vw!important; line-height: 6vw;}


  
.footer-container-wrapper img, .about-author-sec img {max-width:200px;}
.title-blog .raya{font-size: 100px;}
/*img{max-width:100%!important; height:auto;}*/
.visible ul li, .visible h1{font-size:90%;}  
.visible ul{padding-left:0;}
.row-fluid .span12{min-height:auto;}
img{max-width:100%!important; height:auto;}
.entrada{margin:0 auto 5% auto;}
.title-blog h1{ line-height:54px; font-size:200%;}
.footer .cuadrado1, .footer .cuadrado2, .footer .cuadrado3{width:100%; float:none; min-height:200px;}
.blog-pagination{padding:6%;}
.cuadricula .efecto {width:100%;}
.cuadrado-uno, #cuadrado-dos, #cuadrado-tres, #cuadrado-cuatro, #cuadrado-cinco, #cuadrado-seis {height:25%;}
.efecto h2 {padding-top:10%;font-size: 150%; }
div.texto img.icon { max-width: 60px;}
.cbp-af-header {overflow:initial;}
.cbp-af-header a img {margin-left: -15px;}
.efecto .texto::before {
	top: 40px;
	right: 20px;
	bottom: 40px;
	left: 20px;
	border-top: 0px solid #fff;
	border-bottom: 0px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
.efecto .texto::after {
	top: 20px;
	right: 40px;
	bottom: 20px;
	left: 40px;
	border-right: 0px solid #fff;
	border-left: 0px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}
.efecto p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.efecto h2 {padding-top: 0%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,,0);
	transform: translate3d(0,0,0);
}
.efecto .texto::before,
.efecto .texto::after,
.efecto p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}
.efecto:hover .texto::before,
.efecto:hover .texto::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.efecto:hover h2,
.efecto:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.efecto:hover .texto::after,
.efecto:hover h2,
.efecto:hover p{
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.footer .cuadrado1, .footer .cuadrado2 { width: 100%; min-height: 200px; float: none;}
.footer .cuadrado3 {display:none;}
.interior {margin: 20% auto 5% auto;}
.row-fluid .completo{margin-top:20%;}
.completo {margin-top:25%;}
.mitad {float: none; width: 92%; padding:4%; margin:0 auto; }
.dostercios, .cuadrado {float: none; width: 92%; padding: 4%;}
#cuadrado-dos {width:100%; float:none;}

 .blog-content h1 {
    font-size: 36px;
   line-height: 46px;}
  
 .blog-content .meta {
    text-align: left;
}
  .compartir {text-align: right;
    margin-top: 2%;
}
  .footer {margin-top:10%;}
  .footer .ft-servicios {display:none;}
  .footer .ft-contacto p {text-align:center!important;}
  
  .presentacion p {font-size:18px!important; line-height:30px!important;}
  .main .servicios {display:none;}
  .main .inbound {display:none;}
  .main.form-destacado {display:none;}
  .fd-azul.home {display:none;}
  .solo-mov {display:block!important; margin-bottom:20%;}
}

@media only screen and (max-width :425px) {
.title-blog h1 span {background: none; padding: 0;}
.visible ul li, .visible h1 {font-size: 55%!important;}
    }
    
@media only screen and (max-width :400px) {    
.row-fluid .completo{margin-top:25%;}
.title-blog h1 {line-height: 44px;}


}
@media only screen and (max-width :480px) { 
.footer .cuadrado3 {display:none;}
a#cta_button_2070477_1c0efb6c-21d5-4572-8969-3afb157c3b3d{padding:7px 13px;}
}