/* C O L O R E S 

Neutro claro:#F1F1F1
Neutro oscuro: #838273
gris:#2C2C2C

*/
/** {transition: all 0.3s;}*/
html, body {height: 100%;padding: 0;margin: 0;}
body{margin: 0; font-family: 'Lato', sans-serif; line-height: 1.6em; color: #fff;}
ul, li{margin: 0; padding: 0; list-style: none}
a {text-decoration: none; }
p {font-size: 1.250em; line-height: 1.3; font-weight: 300}
h2 {font-size: 2em; font-weight: 400; text-align: center; color: #6A6A6A}
.clear {clear: both;}
.ajusteImg {width: 100%; height: auto}
.container{max-width: 62.500em; padding-left:1.250em; padding-right: 1.250em; margin: 0 auto; position: relative;}
.margin-bottom2 {margin-bottom: 2em !important}
.margin-bottom15 {margin-bottom: 1.5em !important}
.ids {font-weight: 900;}
/*.ids {display: inline-block; background: url(../images/ids.svg) no-repeat; background-size: 100%; width: 1.6em; text-indent: -9999px; position: relative;}*/
.ids2 {color: #00E3FF;font-weight: 600;}

.home {background:rgba(0,0,0,0.3) ; height: 100%; text-align: center; display: table;  width: 100%; }/*url(../images/px.png)*/
.home h1{font-size: 2.3em; font-weight: 900; line-height: 1.3em; letter-spacing: 5px; margin: 0 auto}
.home h2 {font-size:1.4em; font-weight: 400; letter-spacing: 4px; line-height: 2em; border-top: 1px solid #fff; padding-top: 5px; display: inline-block; margin-top: 15px; color: #fff }
.textos {display: table-cell; vertical-align: middle; position: relative;}

header {padding: 20px 0; position: absolute; z-index: 999; width: 100%; top: 0; left: 0}
header .logo{float: left;}
header .logo img {width: 150px; height: auto}
.idiomas {float: right; margin-top: 20px}
.idiomas li {display: inline-block;}
.idiomas a {color: #fff; padding: 0 7px; border-left: 1px solid #fff; font-weight: 600;}
.idiomas li:first-child a {border: none;}
.idiomas a:hover {}
.btnMenu {float: right; cursor: pointer; display: inline-block; margin: 20px 0 0 25px}
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    /*background-color: red;  Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-y: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content { position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {padding: 15px 8px;font-size: 26px;color: #969696; display: block; text-transform: uppercase;
    transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {color: #f1f1f1;}
/* Position the close button (top right corner) */
.overlay .closebtn {position: absolute; top: 20px; right: 45px; font-size: 60px;}

/* Estilos menu */ 
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; left: 0;
    background-color: rgba(0,0,0,0.8); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 80px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav a {padding: 8px 8px 8px 10px; font-size: 1.1em; letter-spacing:2px; color: #818181; display: block; transition: 0.3s; text-transform: uppercase;}
.sidenav a:hover, .offcanvas a:focus{ color: #fff;}
.sidenav .closebtn {position: absolute; top: 20px; right: 20px; width: 26px; height: 26px; border-radius: 50%; display: inline-block; padding: 0;}
.sidenav a img {width: 75%}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* 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) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/* ---------------------------------------------------------------------- */

.btnAnime {display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background: rgba(255,255,255,0.7); border-radius: 50%; position: absolute; left: 50%; margin-left: -25px; bottom: 2em; border: 2px solid #ddd; cursor: pointer; box-shadow: 4px 4px 10px rgba(0,0,0,0.6);}
.btnAnime span {display: none;}
.btnAnime i {font-size: 35px; position: relative; top: 7px; color: #000;}
/* --------------------------------------------------------------------------
        ANIMATION - FLOATING
--------------------------------------------------------------------------- */

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(8%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(8%);  
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}

/* Q U I E N E S */
#quienes {background:#60C9DE; padding: 50px 0; text-align: center; }
#quienes h2, #hacer h2, #contacto h2 {color: #fff; text-transform: uppercase; font-size: 1.4em; letter-spacing: 3px; position: relative; margin-bottom: 1.5em;}
#quienes h2::after, #hacer h2::after, #contacto h2::after {content: ""; display: inline-block; background: #fff; width: 50px; height: 3px; position: absolute; left: 50%; margin-left: -25px; bottom: -10px}
#quienes p {width: 75%; margin: 0 auto 0.5em; font-weight: 400;}
#quienes p strong {font-weight: 900;}

/* S O C I O S */
.bco {background: #fff}
#socios {padding: 2em 0}
#socios h2, #servicios h2 {color: #6A6A6A; text-transform: uppercase; font-size: 1.4em; letter-spacing: 3px; position: relative; margin-bottom: 1.5em;}
#socios h2::after, #servicios h2::after {content: ""; display: inline-block; background: #6A6A6A; width: 50px; height: 3px; position: absolute; left: 50%; margin-left: -25px; bottom: -10px}
#socios p {color: #6A6A6A; text-align: center;}
.socio {width: 23%; float: left; margin: 1%; text-align: center;}
.socio a {display: block; transition: all 0.5s ease 0.5s; color: #000; border: 0; outline: 0 }
.socio a img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray; /* IE 6-9 */
    transition: all 0.5s ease 0.5s;}
.socio a:hover img {-webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   filter: none;
}
.socio p {line-height: 1.3em; font-size: 1.1em; font-weight: 600; color: #6a6a6a}
.socio p span {font-size: 0.9em; font-weight: 600; color: #60C9DE; letter-spacing: 1px;}

/* Q U E  H A C E M O S */
#hacer {background:#414B5B; padding: 2em 0 /*background: url(../images/fdo-bicolor-azul.png) repeat-y; background-size: 100%;*/}
#hacer .container {/*display: table;*/}
.colI, .colD {width: 49%; box-sizing:border-box; }/*display: table-cell;*/
.colI {float: left}
.colD {float: right;}/**/
#hacer .txt {color: #fff; font-weight: 300;}/*padding: 1.5em 0 1.5em 0 ;*/
#hacer .txt p {margin-bottom: 10px;}
#hacer .txt:first-child p {margin-top: 0}
#hacer .txt .destacado {color: #00E3FF; font-weight: 400}

.owl-theme .owl-nav {position: absolute;top: 45%; width: 100%}/*display: none*/
.owl-theme .owl-nav [class*=owl-] {width: 40px; height: 40px; line-height: 40px; padding: 0; border:2px solid #fff; border-radius: 50%; background: none; position: absolute; font-size: 1.8em}
.owl-theme .owl-nav [class*=owl-]:hover {background: rgba(255,255,255,0.8);}
.owl-prev {left:20px;}
.owl-next {right: 20px}
.owl-theme .owl-dots {display: none;}

/* S E R V I C I O S */
.x4 {width: 25%; float: left; box-sizing:border-box;}
.x2 {width: 48%; float: left; box-sizing:border-box;}
.x1-4 {width: 25%; float: left; box-sizing:border-box;}
.x3-4 {width: 73%; float: right; box-sizing:border-box;}

#servicios {padding: 2em 0; background: #fff; text-align: center; color: #000}
.modulo-servicio {position: relative; padding-top: 4em;}
.modulo-servicio a {display: block; border: 0; outline: 0}
.modulo-servicio p {line-height: 1.15em; color: #6A6A6A; font-size: 1.05em; font-weight: 600;}
.circ-icono {background: #20B9CC; border: 2px solid #ddd; border-radius: 50%;  width: 116px; height: 116px; position: absolute;top:0; left:50%; margin-left: -58px; box-sizing:border-box; padding-top: 20px; z-index: 100}
.circ-img {background: grey; border: 2px solid #ddd; border-radius: 50%; width: 200px; height: 200px; margin: 0 auto 1em; position: relative;}
.circ-img .mask {position: absolute; top: -2px; left:-2px; border: 2px solid #ddd; border-radius: 50%; width: 200px; height: 200px; line-height: 200px; margin: 0 auto 1em; background: rgba(30,30,30,0.6); transition: all 0.5s ease 0.5s; opacity: 0 }
.mas:hover .circ-img .mask {opacity: 1} 
 .circ-img .mask p{line-height: 170px; font-size: 1.2em; text-transform: uppercase; color: #fff;}

.promotor {background: url(../images/servicios/bg-promotores.jpg) no-repeat; background-size: cover;}
.maquinas {background: url(../images/servicios/servicios-maquinas.jpg) no-repeat; background-size: cover;}
.empresas {background: url(../images/servicios/servicios-financieras.jpg) no-repeat; background-size: cover;}
.financieras {background: url(../images/servicios/servicios-inversores.jpg) no-repeat; background-size: cover;}
.btn-mas {margin-top: 1em; }
.btn-mas i {position: relative; top: 4px}



/* R E D  C O M E R C I A L  */
#red {background:#414B5B; min-height: 400px; padding: 2em 0; text-align: center;}
#red .container {padding: 0}
#red h2 {color: #FFB808; text-transform: uppercase; font-size: 1.4em; letter-spacing: 3px; position: relative; margin-bottom: 1.5em;}
#red h2::after {content: ""; display: inline-block; background: #FFB808; width: 50px; height: 3px; position: absolute; left: 50%; margin-left: -25px; bottom: -10px}

.mapa {margin-bottom: 1em; position: relative; height: 500px; width: 900px; margin: 0 auto; }
#map {position: relative; z-index: 700;}
.mapaPines {display: none}
.pines {height: 500px; width: 900px; margin: 0 auto; position: absolute; top: 0; left: 0}

.pines .ba {left: 300px; bottom:60px; z-index: 850 }
.pines .bogota {left: 252px; bottom: 185px; z-index: 830;}
.pines .panama {left: 232px;top: 275px; z-index: 820;}
.pines .washington {left: 262px; top:190px; z-index: 800}
.pines .lima {left: 248px; top: 325px; z-index: 840}
.pines .milan {right: 437px; top: 180px; z-index: 840}

.tooltip {color:#FFB808; font-size: 2em; position: absolute; display: inline-block;}
.tooltip:hover i {text-shadow: 2px 2px 3px rgba(255,255,255,0.5)}

/* Tooltip */
.tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 150px;
    height: 150px;
    left: 25%;
    margin-left: -75px;
    bottom: 60%;
    /*border-radius: 50%;*/
    text-align: center;
    opacity: 0;
    margin-bottom: 20px;
    cursor: default;
    pointer-events: none;
}

.tooltip-content img {
    opacity: 0;
}

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content img {
    opacity: 1;
}
.tooltip-effect-2 .tooltip-content {
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

/*.tooltip-effect-2 .tooltip-content img {
    -webkit-transform: translate3d(0,15px,0);
    transform: translate3d(0,15px,0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}*/
/* Arrow 
.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: -7px 0 0 -15px;
    width: 30px;
    height: 20px;
    background: url(../images/tooltip1.svg) no-repeat center center;
    background-size: 100%;
}*/
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
    pointer-events: auto;
    -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
    transform: translate3d(0,0,0) scale3d(1,1,1);
}

.itemMap {display: inline-block; background: red}
.paises li{ display: inline-block; width: 16%; font-size: 1.1em; line-height: 1.1em;vertical-align: top;}
.paises li span {color: #FFB808; font-size: 0.8em}


/* C O N T A C T O  */
#contacto {background: url(../images/fdo-bicolor-celeste.png) repeat-y; background-size: 100%; min-height: 400px; padding: 3em 0;  }
/*#contacto h2 {text-align: left; width: 200px;}*/
#contacto .colI {text-align: center; padding: 0 3em}
#contacto .colD {padding: 0 3em}
#contacto p {font-weight: 400}
p.mail {margin: 3em 0}
p.mail a {color: #4B779B ; font-weight: 600}
p.mail:hover a {color:  #231c64}
.redes {}
.redes li {display: inline-block;}
.redes a {display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; background:#4B779B ; margin-right: 1em; border-radius: 50%}
.redes a:hover {background: #231c64 }
.redes span {display: none;}
.redes i {color: #60C9DE; font-size: 1.2em}

form, input, label {display: block}
form {padding-left: 1em}
input[type=text], input[type=email], input[type=number] {border: none; color: #6A6A6A; font-size: 18px; height: 50px; border-bottom: 1px solid #B7B7B7; width: 96%; display: inline-block;}
.btnSubmit{background: #231c64;color: #fff; padding: 0 20px; height: 40px; line-height: 40px; border-radius: 4px; border:none; cursor: pointer; margin-bottom: 2em}
.btnSubmit:hover {background: #4b779b}
label { margin-bottom: 1em; height: 48px; position: relative;}
textarea {border: none; font-size: 18px; font-family: 'Arial', sans-serif; width:96%; height: 150px; margin-bottom: 1.5em; margin-top: 20px;border-bottom: 1px solid #B7B7B7; display: inline-block;}
.observacion {font-size: 0.9em !important; color: #231c64; margin: 0}

footer {background: #E6E7E8; padding: 2em 0; color:#7A7A7A;}
footer img {width: 150px; height: auto}
footer h4 {color: #60C9DE;}
footer a {color: #7A7A7A;}
footer a:hover {color: #000}
.navFooter li {margin-bottom: 0.4em}
.linke {text-align: center}



/* M O D A L E S */
.modal {display: none; width: 80%; color:#000;}
.modal p {font-size: 1.1em}
.modalSocio {}
.modalSocio h2 {margin: 0; font-weight: 400; font-size: 1.5em}
.modalSocio h3 {color: #60C9DE; font-weight: 400; font-size: 1.1em; margin: 0} 
.modalSocio .circ {border-radius: 50%;max-width: 180px; max-height: 180px; margin: 1em auto; border: 3px solid #60C9DE}
.modalSocio .destacado {color: #60C9DE; font-weight: 400}
.modalSocio .soc {text-align: center;}
.modalSocio .datosSoc {padding: 1em 1em 0 0}
.locacion {margin-top: 2em}
.locacion p {margin: 0; font-size: 1em; font-weight: 400;color: #6A6A6A}
.locacion i {font-size: 1.6em; color: #60c9de}

.modalServicio {height: 80%} 
#promotores .colI{background: url(../images/servicios/bg-promotores.jpg) no-repeat; background-size: cover; height: 100%; padding: 1.5em }
#fabricantes .colI{background: url(../images/servicios/bg-maquinas.jpg) no-repeat; background-size: cover; height: 100%; padding: 1.5em }
#empresas .colI{background: url(../images/servicios/servicios-financieras.jpg) no-repeat; background-size: cover; height: 100%;padding: 1.5em  }
#financieras .colI{background: url(../images/servicios/servicios-inversores.jpg) no-repeat; background-size: cover; height: 100%;padding: 1.5em  }
.frase {color: #fff; font-size: 2em !important; line-height: 1.2em; font-weight: 600;font-style: italic; width: 300px; margin-top: 0; position: relative; top: 0.8em; left: 1em;z-index: 3; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); font-family: "arial", sans-serif }
.frase::before {content: "“"; color: #00e3ff; font-size: 3.2em; position: absolute;top: 10px; left: -60px; z-index: -1;}
.frase::after {content: "”"; color: #00e3ff; font-size: 3.2em; position: absolute; bottom: -30px; z-index: -1; }

.frase i {color: #00E3FF; }
.modalServicio .c-verde {background: #20B9CC; border: 2px solid #ddd; border-radius: 50%;  width: 116px; height: 116px; box-sizing:border-box; padding-top: 20px; text-align: center; margin: 0 auto 1em;}
.modalServicio h2 {text-align: center; margin-bottom: 1em;font-size: 1.3em;}
.modalServicio .colD {padding: 0 5%}
.items li {margin-bottom: 0.7em; text-indent: -10px; position: relative; padding-left: 30px}
.items i {color: #20B9CC; margin-right: 1em; font-size: 0.6em; position: relative; top: -2px;}


.btn {display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background: rgba(255,255,255,0.2); border-radius: 50%; border: 2px solid #b3b6b9;}
.btn span {display: none;}
.btn i {font-size: 25px; color: #b3b6b9;}
.btn:hover {background: #b3b6b9}
.btn:hover i {color: #fff;}
.fancybox-close-small {top: 10px; right: 10px; width: 50px; height: 50px; padding: 0; margin: 0; border: 2px solid #b3b6b9; border-radius: 50%; background: #fff}
.fancybox-close-small:after {top: 8px; right: 8px; width: 30px; height: 30px; font: 30px/30px Arial, sans-serif; color: #b3b6b9; border: none; outline: none !important; -moz-outline-style: none !important;}
.fancybox-close-small:hover {background: #b3b6b9; outline: none !important; -moz-outline-style: none !important;}
.fancybox-close-small:hover:after {background: none; color: #fff; outline: none !important; -moz-outline-style: none !important;}

.boton-top {display: none; position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; text-align: center; line-height: 50px; color: #000; background: rgba(255,255,255,0.7); border-radius: 50%; cursor: pointer; box-shadow: 4px 4px 10px rgba(0,0,0,0.6); font-size: 2em; border: 2px solid #ddd; z-index: 999}
.boton-top i {position: relative; bottom: 2px}

.ui-widget-header {background: transparent !important; border: 0 !important}
.ui-widget-content {border: 0 !important}
.ui-button {border: 0 !important; background: #231c64 !important; color: #fff !important;}
.ui-button:hover {background: #4b779b !important;color: #fff !important;}
.ui-dialog .ui-dialog-titlebar-close {width: 25px !important; height: 25px !important; border-radius: 50% !important; border: 1px solid #b3b6b9 !important; background: #fff !important}

.copy {font-size: 0.9em; text-align: center; color: #7d7d7d}

/*  M E D I A  Q U E R I E S  */
@media screen and (max-width:1024px){
    #map, .pines {display: none;}
    .mapa {width: 100%; height: auto; margin-bottom: 2em}
    .mapaPines {display: block; width: 100%}
}

@media screen and (max-width:960px){
    .x4 {width: 100%; margin-bottom: 2em; text-align: center;}
    .colN {display: none;}
    .modalServicio .colI {display: none;}
    .modalServicio .colD {float: none; width: 100%;}
    .items li {padding-left: 0}
}

@media screen and (max-width:900px){
    #hacer .colI, #hacer .colD, #contacto .colI, #contacto .colD {width: 80%; float: none; margin: 0 auto }
    #hacer .colI {text-align: center;}
    #contacto {background: #20B9CC}
    p.mail {margin: 2em 0;}
    .redes {margin-bottom: 3em;}
    form {padding-left: 0}
    input[type=text], input[type=email], input[type=number], textarea {width: 100%; padding: 5px 10px; box-sizing:border-box;}
    /*.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {display: block}*/

    .mapa img {width: 100%; height: auto}
    .paises li{ display: inline-block; width: 30%; margin-bottom: 3em}
}

@media screen and (max-width:768px){
    .home h1 {font-size:3.2em; line-height: 1em;}
    .socio {width: 48%; min-height: 288px;}
    .x1-4, .x3-4 {width: 100%; float: none;}
    #contacto .colI, #contacto .colD {padding: 0}
}

@media screen and (max-width:530px){
    .home h1 {font-size:1.8em;}
    .home h2 {font-size:1em; line-height: 1em;}
    .socio {width: 48%; height: 320px;}
}

@media screen and (max-width:480px){
    .home h1 {font-size:1.5em;}
    .home h2 {font-size:0.9em; line-height: 1em;}
    .x4 {width: 100%;}
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn { font-size: 40px; top: 15px; right: 35px;}
}