/* ==========================================================================
Base
========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    outline: 0;
}

html, body {
    width: 100%; height: 100%;
    position: relative;
    background: #B4A6A6;
    font-family: 'Poiret One';
    font-size: 14px;
}

#waiting{
    display: none; z-index: 9999999; position: fixed; top: 0; bottom: 0; left: 0; right: 0; 
    background: transparent url("../img/fancybox_overlay.png") repeat;
}
#waiting:before{
    width: 44px; height: 44px; 
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    margin: -22px 0 0 -22px;
    background: transparent url("../img/fancybox_sprite.png") no-repeat 50% -108px;
}
#waiting:after{
    width: 24px; height: 24px;
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    margin: -12px 0 0 -12px;
    background: transparent url("../img/fancybox_loading.gif") no-repeat 50% 50%;
}

/* ==========================================================================
Header
========================================================================== */
header{
    width: 100%; height: 75%;
    background: url("../img/bg_001.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    padding: 0;
    overflow: hidden;    
}
.invisible130px{ width: 100%; height: 130px; }

/*typed*/
.textodehome{ height: 280px; margin-top: 10%; }
.text-typed{font-size: 4em; color: #FFF;}
.autor-typed{font-size: 2em; color: #FFF;}

/* ==========================================================================
MENU SUPERIOR
========================================================================== */
nav{
    position: absolute; top: 0;
    width: 100%; height: 130px;
    background: rgba(255,255,255,0.7);
    padding: 0;
    z-index: 500 !important;
}
#logo{
    width: 100px; height: 100px; 
    margin-top: 15px;
    background: transparent url("../img/logo_PG.png") no-repeat 0 0;
    background-size: contain;
    float: left;
}
nav ul{ height: 130px; }
nav ul > li{
    font-size: 1.7em;
    list-style: none outside none;
    display: inline-block;
    float: right;
    margin: 0;
    line-height: 130px;
    padding: 0px 15px;
    cursor: pointer;
    transition: all  0.3s linear;
    -o-transition: all  0.3s linear;
    -ms-transition: all  0.3s linear;
    -moz-transition: all  0.3s linear;
    -webkit-transition: all  0.3s linear;
}
nav ul > li div { display: inline-block; }
nav ul > li i{ 
    font-size: 70% !important; 
    transition: all  0.15s linear;
    -o-transition: all  0.15s linear;
    -ms-transition: all  0.15s linear;
    -moz-transition: all  0.15s linear;
    -webkit-transition: all  0.15s linear;
}
nav ul > li:hover{ color: #FCAF17; }
nav ul > li:hover i{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
nav ul > li:hover > ul > li{ color: #000; }
nav ul > li.menuidioma{ padding: 0 10px; }
nav ul > li.menuidioma:hover i{ transform: none; -o-transform: none; -ms-transform: none; -moz-transform: none; -webkit-transform: none;  }
/*submenu*/
nav ul > li > ul{
    width: 230px; height: 0; 
    position: absolute;
    top: 130px; margin-left: -50px;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 1px 2px 2px -1px #000;
    overflow: hidden;
    transition: all  0.3s linear;
    -o-transition: all  0.3s linear;
    -ms-transition: all  0.3s linear;
    -moz-transition: all  0.3s linear;
    -webkit-transition: all  0.3s linear;
    z-index: 501 !important;
}
nav ul > li > ul > li{
    display: block;
    float: none;
    text-align: center;
    line-height: 1.8em;
    font-size: 1em;  
}
nav ul > li[data-target="contact"] > ul{ margin-left: -100px;}
/*-lang-*/
nav ul > li.menuidioma > ul{ width: 200px; right: 0; }
nav ul > li.menuidioma > ul > li{ text-align: right; font-size: 18px; line-height: 30px;  }
nav ul > li.menuidioma > ul > li.activo{font-weight: bold;}
nav ul > li.menuidioma > ul > li.lang-eng span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_eng_40x40.png") no-repeat 50% 50%; background-size: contain; }
nav ul > li.menuidioma > ul > li.lang-esp span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_esp_40x40.png") no-repeat 50% 50%; background-size: contain; }
nav ul > li.menuidioma > ul > li.lang-ita span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_ita_40x40.png") no-repeat 50% 50%; background-size: contain; }
nav ul > li.menuidioma > ul > li.lang-fra span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_fra_40x40.png") no-repeat 50% 50%; background-size: contain; }
nav ul > li.menuidioma > ul > li.lang-deu span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_deu_40x40.png") no-repeat 50% 50%; background-size: contain; }
/*------*/
nav ul > li[data-target="aboutme"]:hover > ul{ height: 9em;}
nav ul > li[data-target="myskills"]:hover > ul{ height: 7.2em;}
nav ul > li[data-target="portfolio"]:hover > ul{ height: 5.4em;}
nav ul > li[data-target="contact"]:hover > ul{ height: 3.6em;}
nav ul > li.menuidioma:hover > ul{height: 90px;}

nav ul > li > ul > li:hover{ color: #FCAF17; }


/* ==========================================================================
Menu Flotante
========================================================================== */
#menuflotante{
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    -o-box-shadow: 0 0 2px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 0 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5);
    z-index: 1000;
    display: none;
}
#menuflotante #logo{
    width: 40px; height: 40px; 
    margin-top: 10px;
    background: transparent url("../img/logo_PG.png") no-repeat 0 0;
    background-size: contain;
    float: left;
    cursor: pointer;
    display: none;
}
#menuflotante ul > li{
    font-size: 1.2em;
    list-style: none outside none;
    display: inline-block;
    float: right;
    padding: 0;    margin: 0;
    line-height: 30px;
    padding: 0px 15px;
    cursor: pointer;
    transition: all  0.3s linear;
    -o-transition: all  0.3s linear;
    -ms-transition: all  0.3s linear;
    -moz-transition: all  0.3s linear;
    -webkit-transition: all  0.3s linear;
}
#menuflotante ul > li div { display: inline-block; }
#menuflotante ul > li i{ 
    font-size: 70% !important;
    transition: all  0.15s linear;
    -o-transition: all  0.15s linear;
    -ms-transition: all  0.15s linear;
    -moz-transition: all  0.15s linear;
    -webkit-transition: all  0.15s linear;
}
#menuflotante ul > li:hover{ color: #FCAF17; background-color: rgba(0,0,0,0.7);  }
#menuflotante ul > li:hover > ul > li{ color: #000; }
#menuflotante ul > li:hover i{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
/*submenu*/
#menuflotante ul > li > ul{
    width: 180px; height: 0; 
    position: absolute;
    top: 30px; margin-left: -15px;
    background-color: rgba(255,255,255,0.7);
    box-shadow: 1px 2px 2px -1px #000;
    overflow: hidden;
    transition: all  0.3s linear;
    -o-transition: all  0.3s linear;
    -ms-transition: all  0.3s linear;
    -moz-transition: all  0.3s linear;
    -webkit-transition: all  0.3s linear;
}
#menuflotante ul > li > ul > li{
    display: block;
    float: none;
    text-align: left;
    padding-left: 15px;
    line-height: 1.5em;
    font-size: 1em;  
}
#menuflotante ul > li.menuidioma > ul{ width: 200px; right: 0; }
#menuflotante ul > li.menuidioma > ul > li{ text-align: right; font-size: 18px; line-height: 30px;  }
#menuflotante ul > li.menuidioma > ul > li.activo{font-weight: bold;}
#menuflotante ul > li.menuidioma > ul > li.lang-eng span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_eng_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menuflotante ul > li.menuidioma > ul > li.lang-esp span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_esp_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menuflotante ul > li.menuidioma > ul > li.lang-ita span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_ita_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menuflotante ul > li.menuidioma > ul > li.lang-fra span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_fra_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menuflotante ul > li.menuidioma > ul > li.lang-deu span{ width: 16px; height: 16px; display: inline-block; background: transparent url("../img/flag_deu_40x40.png") no-repeat 50% 50%; background-size: contain; }

#menuflotante ul > li[data-target="aboutme"]:hover > ul{ height: 7.5em;}
#menuflotante ul > li[data-target="myskills"]:hover > ul{ height: 6em;}
#menuflotante ul > li[data-target="portfolio"]:hover > ul{ height: 4.5em;}
#menuflotante ul > li.menuidioma:hover > ul{height: 90px;}
 
#menuflotante ul > li > ul > li:hover{ color: #FCAF17; background-color: rgba(0,0,0,0.7); }
/* ==========================================================================
Menu mobile
========================================================================== */
#menumobile{ 
    display: none;
    position: fixed; 
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 70px;
    background-color: rgba(0,0,0,0.6);
    border-bottom: 1px solid #000;
    background: rgb(76,76,76);
    background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); 
    background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

}
#menumobile .logo{
    width: 60px; height: 60px; 
    margin: 5px 10px 5px 30px;
    background: transparent url("../img/logo_PG.png") no-repeat 0 0;
    background-size: contain;
    float: left;
    cursor: pointer;
}
#menumobile .titulomenu{
    color: #FFF;
    text-shadow:1px 1px 0px rgba(0,0,0,0.7);
    -o-text-shadow:1px 1px 0px rgba(0,0,0,0.7);
    -ms-text-shadow:1px 1px 0px rgba(0,0,0,0.7);
    -moz-text-shadow:1px 1px 0px rgba(0,0,0,0.7);
    -webkit-text-shadow:1px 1px 0px rgba(0,0,0,0.7);
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    margin: 10px auto;
    float: left;
    width: calc(100% - 195px);
    width: -o-calc(100% - 195px);
    width: -ms-calc(100% - 195px);
    width: -moz-calc(100% - 195px);
    width: -webkit-calc(100% - 195px);
}
#menumobile .botonmenumobile{
    width: 50px; height: 50px; 
    margin: 10px 30px 10px 10px;
    background: #DDD;
    float: right;
    cursor: pointer;
    border-radius: 5px;-o-border-radius: 5px;-ms-border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;
    border: 1px solid #000;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -o-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -ms-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -moz-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -webkit-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    transition: all  0.2s ease;
    -o-transition: all  0.2s ease;
    -ms-transition: all  0.2s ease;
    -moz-transition: all  0.2s ease;
    -webkit-transition: all  0.2s ease;
    box-shadow: 0 0 2px #000;
}
#menumobile .botonmenumobile:active, 
#menumobile .botonmenumobile.activo{
    margin-top: 12px;
    box-shadow: 0 0 1px #000, inset 0 0 5px #000;
}
#menumobile .botonmenumobile i{
    transition: all  0.2s ease;
    -o-transition: all  0.2s ease;
    -ms-transition: all  0.2s ease;
    -moz-transition: all  0.2s ease;
    -webkit-transition: all  0.2s ease;    
}
#menumobile .botonmenumobile ul{ 
    position: absolute;
    width: 250px;
    top: 70px; right: 0;
    background: rgba(0,0,0,0.9);
    font-size: 20px;
    line-height: 30px;
    text-align: right;
    padding: 0 0 10px 0;
    border-bottom: 2px solid #000;
    box-shadow: -2px 1px 10px #000;
    display: none;
}
#menumobile .botonmenumobile ul li{ list-style: none;  padding: 0 25px 0 0; }
#menumobile .botonmenumobile ul li.separacion{ border-top: 1px solid #222; margin: 3px 0 0 0; padding: 0 0 3px 0; }

#menumobile .botonmenumobile ul li.menuidioma{ height: 20px; }
#menumobile .botonmenumobile ul li.menuidioma ul{
    position: inherit;
    background: none;
    font-size: 18px;
    padding: 0; margin: 0;
    border: none;
    height: 32px;
    display: inline-block;
    border:none;
    box-shadow: none;
}
#menumobile .botonmenumobile ul li.menuidioma ul li{ float: right; }
#menumobile .botonmenumobile ul li.menuidioma > ul > li.activo{text-decoration: underline;}
#menumobile .botonmenumobile ul li.menuidioma > ul > li.lang-eng span{ width: 16px; height: 16px; display: inline-block; margin-left: 5px; background: transparent url("../img/flag_eng_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menumobile .botonmenumobile ul li.menuidioma > ul > li.lang-esp span{ width: 16px; height: 16px; display: inline-block; margin-left: 5px; background: transparent url("../img/flag_esp_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menumobile .botonmenumobile ul li.menuidioma > ul > li.lang-ita span{ width: 16px; height: 16px; display: inline-block; margin-left: 5px; background: transparent url("../img/flag_ita_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menumobile .botonmenumobile ul li.menuidioma > ul > li.lang-fra span{ width: 16px; height: 16px; display: inline-block; margin-left: 5px; background: transparent url("../img/flag_fra_40x40.png") no-repeat 50% 50%; background-size: contain; }
#menumobile .botonmenumobile ul li.menuidioma > ul > li.lang-deu span{ width: 16px; height: 16px; display: inline-block; margin-left: 5px; background: transparent url("../img/flag_deu_40x40.png") no-repeat 50% 50%; background-size: contain; }




/* ==========================================================================
Sections
========================================================================== */
section{
    width: 100%;
    background: #9C9C9C;
    font-size: 1.5em;
    padding: 3em 0;
    overflow: hidden;
}

/* ======================================================================= */
section#aboutme{
    min-height: 25%;
    background-color: #35373F;
    color: #E8E8E8;
}
.iconoytitulo{ color: #959DBC; }
.iconoytitulo > span{display: block; padding: 10px 0; font-weight: bold; letter-spacing: 5px;}
.iconoytitulo i.faicono{
    padding: 35px 15px 0 15px;
    border: 2px solid #959DBC;
    width: 120px; height: 120px;
    font-size: 50px;
}
.iconoytitulo:hover{ color: #FCAF17; }
.iconoytitulo:hover i.faicono{border-color: #FCAF17; }

/* ======================================================================= */
section#education{    
    min-height: 25%;
    background-color: #35373F;
    color: #E8E8E8;
}
.tabla_univ tr td{
    padding: 20px 10px;
    vertical-align: middle;
    font-weight: bold;
}
.tabla_univ tr td span{font-weight: normal; font-size: 80%;}
.logo_uem{
    width: 80px; height: 80px;
    background: transparent url("../img/logo_uem.png") no-repeat 0 0;
    background-size: contain;
}
.logo_upc{
    width: 80px; height: 80px;
    background: transparent url("../img/logo_upc.png") no-repeat 0 0;
    background-size: contain;
}
.tabla_univ tr.univ{ cursor: pointer; }
.tabla_univ tr.univ:hover{
    background-color: #DDD;
    color: #222;
    text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -o-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -ms-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -moz-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -webkit-text-shadow:1px 1px 0px rgba(255,255,255,0.7);    
}

.tabla_univ tr.tr_yt td{
    padding: 0 0 10px 0; margin: 0;
}

#button_yb, #button_yb a{ color:#35373F; font-size: 20px; margin-bottom:-25px;  }
#button_yb i:hover{color:#C00;}

.tabla_expe tr td{
    padding: 10px 5px;
    vertical-align: middle;
}
.tabla_expe tr td span{ font-size: 80%;}
.logo_pg_250{
    width: 55px; height: 55px;
    border-radius: 5px;
    background: #FFF url("../img/logo_PG_250x250.png") no-repeat 50% 50%;
    background-size: contain;
}
.logo_prowork_250{
    width: 55px; height: 55px;
    border-radius: 5px;
    background: #FFF url("../img/logo_prowork_250x250.png") no-repeat 50% 50%;
    background-size: contain;
}
.logo_codesystems_250{
    width: 55px; height: 55px;
    border-radius: 5px;
    background: #FFF url("../img/logo_codesystems_250x250.png") no-repeat 50% 50%;
    background-size: contain;
}
.logo_hp_250{
    width: 55px; height: 55px;
    border-radius: 5px;
    background: #FFF url("../img/logo_hp_250x250.png") no-repeat 50% 50%;
    background-size: contain;
}
.logo_pv_250{
    width: 55px; height: 55px;
    border-radius: 5px;
    background: #FFF url("../img/logo_pv_250x250.png") no-repeat 50% 50%;
    background-size: contain;
}
.logo_sciaba_250{
    width: 55px; height: 55px;
    border-radius: 5px;
    background: #FFF url("../img/logo_sciaba_250x250.png") no-repeat 50% 50%;
    background-size: contain;
}
/*-notas musica-*/
#notasmusica > p{ cursor: crosshair; cursor: url("../img/notasol.png") 10 10, auto; }
#notasmusica > p:hover{ color: #FCAF17;}

/* ======================================================================= */
section#vegan{
    min-height: 50%;
    height: 500px;
    background: url("../img/bg_002.jpg") repeat 50% 0 fixed;
    background-size: cover;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
/*----*/
.cont_fotoconmarco{
    width: 100%;
    height: 80%;
}
.cont_typedvegan{
    width: 100%;
    height: 20%;
    font-size: 1.6em;
    text-align: center;
}
/*----*/
.fotoconmarco{
    height: 100%;
    overflow: hidden;
    padding-top: 15px;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    perspective: 500;
    cursor: all-scroll;
    cursor: url("../img/flip.png") 22 22, auto;
}
.flipper {
    height: 100%;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;  
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
}
.fotoconmarco:hover .flipper{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.foto_front,.foto_back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.foto_front {
    z-index: 2;
}
.foto_back {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.foto_front img,.foto_back img{
    height: 80%; width: auto;
    border: 4px solid #FFF;
    box-shadow: 1px 1px 10px #000;
    -o-box-shadow: 1px 1px 10px #000;
    -ms-box-shadow: 1px 1px 10px #000;
    -moz-box-shadow: 1px 1px 10px #000;
    -webkit-box-shadow: 1px 1px 10px #000;    
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}


/* ======================================================================= */
section#tiempos{    
    min-height: 45%;
    background: #5C6E54 url("../img/bg_004.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    padding: 5em 0;
    box-shadow: 0 -4px 6px rgba(0,0,0,0.5);
    -o-box-shadow: 0 -4px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 -4px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -4px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 -4px 6px rgba(0,0,0,0.5);
}
.tiemposcount{ color: #FFF; margin-bottom: 2em; }
.tiemposcount .numero{
    font-size: 3.5em; 
    background-color: rgba(73,87,67,0.3);
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    line-height: 200px;
    width: 200px;
    margin: 0 auto;
    text-align: center;
}
.tiemposcount .descripcion{
    font-size: 1.2em; width: 200px; text-align: center; margin: 0 auto;
}
.tiemposcount:hover{ color: #FCAF17; }

/* ======================================================================= */
section#myskills{    
    min-height: 45%;
    background: #CCCCCC;
    padding: 4em 0;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 3px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 3px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 3px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,0.5);
}
h4.marginbottom05em > span.flota-right{display: none;}

/* ======================================================================= */

section#aiexpert {
    position: relative;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); /* degradado oscuro tipo tech */
    color: #f5f5f5;
    padding: 4em 0 5em 0;
    overflow: hidden;
}

/* efecto de fondo con líneas/gradientes animados */
section#aiexpert::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url("../img/cubes.png");
    opacity: 0.08;
    animation: bgscroll 40s linear infinite;
}
@keyframes bgscroll {
    from { background-position: 0 0; }
    to   { background-position: 1000px 1000px; }
}

section#aiexpert h1,
section#aiexpert h3 {
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 255, 200, 0.7);
}

section#aiexpert h1 {
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 0.4em;
}

section#aiexpert h3 {
    font-size: 1.4em;
    font-weight: 400;
    opacity: 0.85;
    margin-bottom: 2em;
}

/* columnas de texto */
section#aiexpert .justificado {
    font-size: 1.05em;
    line-height: 1.7;
    color: #e8e8e8;
}

/* progress bars estilo neon */
section#aiexpert .progress {
    background: rgba(255,255,255,0.1);
    border-radius: 50px;
    overflow: hidden;
    height: 18px;
    margin-bottom: 1em;
}
section#aiexpert .progress-bar {
    background: linear-gradient(90deg, #00e6e6, #0066ff);
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
    border-radius: 50px;
}

/* contadores */
section#aiexpert .tiemposcount {
    text-align: center;
    padding: 1.5em 1em;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
section#aiexpert .tiemposcount:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 0 25px rgba(0, 200, 255, 0.3);
}
section#aiexpert .tiemposcount .numero {
    font-size: 2.2em;
    font-weight: 700;
    color: #00ffe0;
    text-shadow: 0 0 8px rgba(0,255,255,0.7);
}
section#aiexpert .tiemposcount .descripcion {
    margin-top: 0.5em;
    font-size: 0.95em;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ======================================================================= */
section#idiomas{
    background: #DDDDDD;
    padding: 2.5em 0 4em 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.lang_gauge{ min-height: 120px; }
#circle_esp canvas{
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    background: transparent url("../img/flag_esp.png") no-repeat 50% 0;
    background-size: cover;
}
#circle_eng canvas{
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    background: transparent url("../img/flag_eng.png") no-repeat 50% 0;
    background-size: cover;
}
#circle_ita canvas{
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    background: transparent url("../img/flag_ita.png") no-repeat 50% 0;
    background-size: cover;
}
#circle_fra canvas{
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    background: transparent url("../img/flag_fra.png") no-repeat 50% 0;
    background-size: cover;
}
#circle_deu canvas{
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    background: transparent url("../img/flag_deu.png") no-repeat 50% 0;
    background-size: cover;
}

/* ======================================================================= */
section#portfolio{
    min-height: 40%;
    background: url("../img/bg_003.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.tituloportafolio{
    font-size: 2em;    
    width: auto;
}
.tituloportafolio > small{ font-size: 60%; display: block; }
.btn_fancy_port{
    float: right;
    margin-left: 5px;
}
.portafolio_item{ 
    margin: 30px 0 0 0; 
    transition: all  0.3s ease;
    -o-transition: all  0.3s ease;
    -ms-transition: all  0.3s ease;
    -moz-transition: all  0.3s ease;
    -webkit-transition: all  0.3s ease;
}
.portafolio_item:hover{ margin-top: 20px; }
.portafolio_item .thumbnail{
    height: 280px;
    background-color: rgba(255,255,255,0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: all  0.3s linear;
    -o-transition: all  0.3s linear;
    -ms-transition: all  0.3s linear;
    -moz-transition: all  0.3s linear;
    -webkit-transition: all  0.3s linear;
}
.portafolio_item .thumbnail:hover{
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.6), 0 0 8px 1px rgba(252,175,23,0.8);
    -o-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6), 0 0 8px 1px rgba(252,175,23,0.8);
    -ms-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6), 0 0 8px 1px rgba(252,175,23,0.8);
    -moz-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6), 0 0 8px 1px rgba(252,175,23,0.8);
    -webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6), 0 0 8px 1px rgba(252,175,23,0.8);
}
.portafolio_item .thumbnail > img{
    border-radius: 7px; 
    -o-border-radius: 7px; 
    -ms-border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    transition: all  0.3s ease;
    -o-transition: all  0.3s ease;
    -ms-transition: all  0.3s ease;
    -moz-transition: all  0.3s ease;
    -webkit-transition: all  0.3s ease;
    cursor: -webkit-zoom-in; 
    cursor: -moz-zoom-in;
    cursor: url("../img/zoom.png") 22 22, auto;
}
.portafolio_item .thumbnail > img:hover{
    opacity: 0.4;
    filter: alpha(opacity=40);
    box-shadow: 0 0 5px #000;
    -o-box-shadow: 0 0 5px #000;
    -ms-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
}
.portafolio_item .thumbnail .caption p span{
    float: right;
    margin: 5px 0 0 5px;
    width: 20px; height: 20px;
}
.portafolio_item .thumbnail .caption p span.flag_esp{background: transparent url("../img/flag_esp_40x40.png") no-repeat 50% 50%; background-size: contain; }
.portafolio_item .thumbnail .caption p span.flag_eng{background: transparent url("../img/flag_eng_40x40.png") no-repeat 50% 50%; background-size: contain; }
.portafolio_item .thumbnail .caption p span.flag_ita{background: transparent url("../img/flag_ita_40x40.png") no-repeat 50% 50%; background-size: contain; }
.portafolio_item .thumbnail .caption p span.flag_fra{background: transparent url("../img/flag_fra_40x40.png") no-repeat 50% 50%; background-size: contain; }
.portafolio_item .thumbnail .caption p span.flag_deu{background: transparent url("../img/flag_deu_40x40.png") no-repeat 50% 50%; background-size: contain; }
.portafolio_carrusel_controls{width: 100%;}
.portafolio-carousel-control-left,
.portafolio-carousel-control-right{
    transition: all  0.5s linear;
    -o-transition: all  0.5s linear;
    -ms-transition: all  0.5s linear;
    -moz-transition: all  0.5s linear;
    -webkit-transition: all  0.5s linear;
    color: #555;
    text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -o-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -ms-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -moz-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -webkit-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    width: 4%; 
    margin-top: 20px;
    line-height: 300px; 
    background: transparent;
    text-align: center;
    cursor: pointer;
}
.portafolio-carousel-control-left{
    float: left; 
    margin-right: 1%;
    border-radius: 50% 0 0 50%;
    -o-border-radius: 50% 0 0 50%;
    -ms-border-radius: 50% 0 0 50%;
    -moz-border-radius: 50% 0 0 50%;
    -webkit-border-radius: 50% 0 0 50%;
}
.portafolio-carousel-control-right{
    float: right; 
    margin-left: 1%;
    border-radius: 0 50% 50% 0;
    -o-border-radius: 0 50% 50% 0;
    -ms-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    -webkit-border-radius: 0 50% 50% 0;
}
.portafolio-carousel-control-left:hover,
.portafolio-carousel-control-right:hover{
    background:rgba(0,0,0,0.3); 
    color:#FCAF17; 
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 77%, rgba(0,0,0,0) 100%); 
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 77%,rgba(0,0,0,0) 100%); 
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 77%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
}
.contenedor_portafolio_carrusel{
    width: 90%;
    float: left;
    margin: 0 auto;
    overflow: hidden;
}
.portafolio_carrusel{ 
    position: relative;
    margin:0; padding:0; 
    width: 9000px;
    left: -350px;
    height: 320px;
}
.portafolio_carrusel > li{
    list-style: none;
    float: left;
    width: 350px;
}
/*-lastproject-*/
.controles-carousel-lastproject{ width: 100px; height: 36px; margin-top: 5px; }
.controles-carousel-lastproject .atras{float: left; width: 36px; height: 36px; background: transparent url("../img/fancybox_sprite.png") no-repeat 0 -36px; opacity: 0.7;}
.controles-carousel-lastproject .adela{float: right; width: 36px; height: 36px; background: transparent url("../img/fancybox_sprite.png") no-repeat 0 -72px; opacity: 0.7;}
.controles-carousel-lastproject .atras:hover,.controles-carousel-lastproject .adela:hover{ opacity: 1; }

/* ======================================================================= */
section#startups{
    min-height: 40%;
    background: #333B30 url("../img/bg_005.jpg") no-repeat 50% 0 fixed;
    background-size: cover;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -o-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
}
section#startups .thumbnail{
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 5 !important;
}
section#startups .thumbnail:hover{
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6);
    -ms-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 4px 1px rgba(0,0,0,0.6);
}
section#startups .thumbnail .caption{ background: #FFF; }
.startupthumb{
    position:relative;
    background-color: #FFF !important;
    box-shadow:0 1px 4px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.1) inset;
    transition: all  0.5s ease;
    -o-transition: all  0.5s ease;
    -ms-transition: all  0.5s ease;
    -moz-transition: all  0.5s ease;
    -webkit-transition: all  0.5s ease;
}
.startupthumb:hover{box-shadow:0 1px 4px rgba(252,175,23,0.3), 0 0 40px rgba(252,175,23,0.1) inset;}
.startupthumb:before, .startupthumb:after{
    content:"";
    position:absolute; 
    z-index:-10 !important;
    box-shadow:0 0 20px rgba(255,255,255,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:100px / 10px;
    transition: all  0.3s ease;
    -o-transition: all  0.3s ease;
    -ms-transition: all  0.3s ease;
    -moz-transition: all  0.3s ease;
    -webkit-transition: all  0.3s ease;
} 
.startupthumb:after{ right:10px; left:auto; transform:skew(8deg) rotate(3deg);}
.startupthumb:hover:before, .startupthumb:hover:after{box-shadow:0 0 30px rgba(252,175,23,0.8);}


/* ======================================================================= */
section#testimonials{
    min-height: 40%;
    background: #35B6D2 url("../img/bg_006.jpg") repeat 50% 0 fixed;
    background-size: cover;
    padding: 5em 0;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}

ul#ul_testimonios{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 350px;
    overflow: hidden;
}
ul#ul_testimonios > li{ height: 350px; padding-left: 5px; }
ul#ul_testimonios > li > img{
    border-radius: 50% 0 50% 50%;
    -o-border-radius: 50% 0 50% 50%;
    -ms-border-radius: 50% 0 50% 50%;
    -moz-border-radius: 50% 0 50% 50%;
    -webkit-border-radius: 50% 0 50% 50%;
    border: 2px solid #FFF;
    float: left;
    width: 10%;
    height: auto;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.4);
    -o-box-shadow: -2px 2px 5px rgba(0,0,0,0.4);
    -ms-box-shadow: -2px 2px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: -2px 2px 5px rgba(0,0,0,0.4);
    -webkit-box-shadow: -2px 2px 5px rgba(0,0,0,0.4); 
}
ul#ul_testimonios > li > div.globodetestimonio{
    display: block;
    width: 70%;
    max-height: 340px;
    float: left;
    background-color: rgba(255,255,255,0.8);
    color: #222;
    padding: 30px;
    margin-left: 36px;
    border-radius: 0 20px 20px 20px;
    -o-border-radius: 0 20px 20px 20px;
    -ms-border-radius: 0 20px 20px 20px;
    -moz-border-radius: 0 20px 20px 20px;
    -webkit-border-radius: 0 20px 20px 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    -o-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    -ms-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    text-align: justify;
}

ul#ul_testimonios > li > div.globodetestimonio:before{
    content:"";
    display: block;
    position:relative;
    top:0;
    width:0;
    height:0;
    border-color:transparent rgba(255,255,255,0.8) transparent transparent;
    border-style:solid;
    margin: -30px 0 0 -66px; /* 36 + 30 */
    border-width: 0px 36px 36px 0;      
}


ul#ul_testimonios > li > div.globodetestimonio .innerglobo{  overflow-y: scroll; max-height: 220px; padding-right: 10px; }
ul#ul_testimonios > li > div.globodetestimonio > span{ display: block; font-size: 110%; color: #1535AA; text-align: right; margin-top: 10px; }
ul#ul_testimonios > li > div.globodetestimonio > span > small{ display: block; font-size: 80%; color: #182FDE;  }


/* ======================================================================= */
section#contact{
    min-height: 40%;
    background: #FFF;
}
#clouds{
    position: absolute;
    z-index: 500;
    margin-top: -80px;
}
#clouds path {
    fill: #FFF;
    stroke: #FFF;
}
.logo_pg{
    width: 100%; height: 100px;
    background: transparent url("../img/logo_PG_250x250.png") no-repeat 50% 50%;
    background-size: contain;
    cursor: pointer;
}

#contact h3{ margin-top: 5px; }

/*-socials-*/
.socials{ margin-top: 20px; }
.socials > div{
    display: inline-block;
    background-color: #AAA;
    color: #FFF;
    width: 35px; height: 35px; line-height: 35px;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    cursor: pointer;
}
.socials > div.soc_sk:hover,.socials > div.soc_sk.active{background-color: #00BAFF;}
.socials > div.soc_fb:hover,.socials > div.soc_fb.active{background-color: #3B5998;}
.socials > div.soc_gp:hover,.socials > div.soc_gp.active{background-color: #DD4B39;}
.socials > div.soc_in:hover,.socials > div.soc_in.active{background-color: #5096CB;}
.socials > div.soc_wa:hover,.socials > div.soc_wa.active{background-color: #75A94B;}
/*- mapa -*/
#btnmap{ cursor: pointer; }
#btnmap:hover{ color: #FC0; }
#c_mapa{ display: none; width: 100%; height: 400px; background: #FFF; overflow: hidden;}
#c_mapa > span{ font-weight: bold; font-size: 60px; color: #444; position: absolute; right: 0; margin: -60px 10px 0 0;cursor: pointer; }

/* ======================================================================= */
section#download{
    min-height: 20%;
    background: #EEE;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -o-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -ms-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 -2px 6px rgba(0,0,0,0.5);
}
.pdf{
    width: 100%; height: 60px;
    background: transparent url("../img/pdfpng.png") no-repeat 50% 50%;
    background-size: contain;
    opacity: 0.85; cursor: pointer;
}
.ima{
    width: 100%; height: 60px;
    background: transparent url("../img/imgpng.png") no-repeat 50% 50%;
    background-size: contain;
    opacity: 0.85; cursor: pointer;
}
.pdf:hover, .ima:hover{opacity: 1;}
.flag_ue_15{
    width: 13px; height: 13px; display: inline-block; margin: 0 3px;
    background: transparent url("../img/flag_ue_40x40.png") no-repeat 50% 50%;
    background-size: contain;
}
.flag_eng_15{
    width: 13px; height: 13px; display: inline-block; margin: 0 3px;
    background: transparent url("../img/flag_eng_40x40.png") no-repeat 50% 50%;
    background-size: contain;
}
.flag_ita_15{
    width: 13px; height: 13px; display: inline-block; margin: 0 3px;
    background: transparent url("../img/flag_ita_40x40.png") no-repeat 50% 50%;
    background-size: contain;
}
.flag_esp_15{
    width: 13px; height: 13px; display: inline-block; margin: 0 3px;
    background: transparent url("../img/flag_esp_40x40.png") no-repeat 50% 50%;
    background-size: contain;
}

/* ======================================================================= */

/*-footer-*/
footer{
    background-color: #AAA;
    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    font-size: 12px;
    text-align: right;
    padding: 5px 20px 5px 0;
    color: #000;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    -ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

footer .footerfloatleft{ 
    float: left; margin-left: 20px;
    width: 55px; height: 16px; 
    background: transparent url("../img/miniPGlogo.png") no-repeat 50% 50%;
    background-size: contain;
}

/* ======================================================================= */

/*-flecha top-*/
#fecha_absoluta{
    position: fixed;
    bottom: 50%; right: 20px;
    z-index: 1000;
    display: none;
}
.flechatop{
    font-size: 20px;
    width: 48px; line-height: 40px; 
    color: #999;
    border: 2px solid #444;
    border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    text-align: center;
    cursor: pointer;
}
.flechatop:hover{
    border-color: #FCAF17;
    color: #FCAF17;
}



/* ==========================================================================
Generals
========================================================================== */
.text_shadow_1{
    text-shadow:1px 1px 0px rgba(0,0,0,0.5);
    -o-text-shadow:1px 1px 0px rgba(0,0,0,0.5);
    -ms-text-shadow:1px 1px 0px rgba(0,0,0,0.5);
    -moz-text-shadow:1px 1px 0px rgba(0,0,0,0.5);
    -webkit-text-shadow:1px 1px 0px rgba(0,0,0,0.5);
}
.text_shadow_2{
    text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -o-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -ms-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -moz-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
    -webkit-text-shadow:1px 1px 0px rgba(255,255,255,0.7);
}
.text_shadow_3{
    text-shadow:1px 1px 0px rgba(60,130,60,0.7);
    -o-text-shadow:1px 1px 0px rgba(60,130,60,0.7);
    -ms-text-shadow:1px 1px 0px rgba(60,130,60,0.7);
    -moz-text-shadow:1px 1px 0px rgba(60,130,60,0.7);
    -webkit-text-shadow:1px 1px 0px rgba(60,130,60,0.7);
}
.text_shadow_3d{
    font-weight: bold;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
      text-shadow: -1px -1px 0 #ccc,
                   -2px -2px 0 #c9c9c9,
                   -3px -3px 0 #bbb,
                   -4px -4px 0 #b9b9b9,
                   -5px -5px 0 #aaa,
                   0px -6px 1px rgba(0,0,0,.1),
                   0px -0px 5px rgba(0,0,0,.1),
                   0px -1px 3px rgba(0,0,0,.3),
                   0px -3px 5px rgba(0,0,0,.2),
                   0px -5px 10px rgba(0,0,0,.25),
                   0px -10px 10px rgba(0,0,0,.2),
                   0px -20px 20px rgba(0,0,0,.15);
}
.shadow_3d{ 
    box-shadow: -1px -1px 1px 1px #000,
                -2px -2px 0px 1px #AAA,
                -3px -3px 0px 1px #AAA,
                -4px -4px 0px 1px #BBB,
                -5px -5px 0px 1px #BBB,
                -6px -6px 0px 1px #CCC,
                -7px -7px 0px 1px #CCC,
                -7px -7px 10px 2px rgba(0,0,0,.1) !important;
}
.justificado{text-align: justify;}
.fondoclaro{
    background-color: rgba(255,255,255,0.7);
    color: #222;
}
.fondoclaro2{
    background-color: rgba(98,130,83,0.7);
    color: #222;
}
.marcotexto{
    padding: 1.2em;
    border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
.radio50{
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.smootiado{
    transition: all  0.5s ease;
    -o-transition: all  0.5s ease;
    -ms-transition: all  0.5s ease;
    -moz-transition: all  0.5s ease;
    -webkit-transition: all  0.5s ease;
}
.absoluto{position: absolute;}
.absoluto.fijo{position: fixed;}
.fin{clear: both;}
.letragrande{ font-size: 1.8em; }
.letraXgrande{ font-size: 2em; }
.letrablanca{ color: #FFF; }
.letranegra{ color: #000; }
.letters_bg{ background-color: #FCAF17; }
.margentop1em{ margin-top: 1em;}
.margentop3em{ margin-top: 3em;}
.marginbottom05em{ margin-bottom: 0.5em;}
.marginbottom1em{ margin-bottom: 1em;}
.marginbottom3em{ margin-bottom: 3em;}
.widthauto{width: auto;}
.flota-right{float: right;}
.flota-left{float: left;}
.atras1em{ margin-left: -1em; }
.Cpointer{cursor: pointer;}
.Cdefault{cursor: default;}
.clearfix:before, .clearfix:after { content: "";  display: table; }
.clearfix:after { clear: both; }
.alto100{height: 100%;}
.tlangdiv{display: inline-block;}
.Fverdana15{ font-family: Verdana, Geneva, sans-serif; font-size: 15px; }
.marginbottom20px{margin-bottom: 20px;}

/*- alert -*/
#alert{ display: none;
    position: fixed; width: 80%; left: 10%; top: 0; padding: 15px;
    border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -ms-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px;
    border: 1px solid #000; border-top: none;  font-family: Verdana, Geneva, sans-serif; font-size: 18px; background: rgba(255,255,255,0.75); color: #222; z-index: 999999;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
}
#alert > span{ position: absolute; top: 5px; right: 15px; font-size: 24px; cursor: pointer; font-weight: bold; }
#alert > div{ max-width: 90%; }
#alert.success{background-color: rgba(92,184,92,0.75); color: #458C45; border-color: #5cb85c; }
#alert.danger{background-color: rgba(217,83,79,0.75); color: #843232; border-color: #d9534f; }
#alert.info{background-color: rgba(240,173,78,0.75); color: #7B5B2D; border-color: #f0ad4e; }

/* ==== Modern gradient progress bars ==== */
.progress-bar {
    background-size: 200% auto;
    transition: background-position 1s ease;
}
.progress-bar:hover {
    background-position: right center;
}

/* Default (blue) */
.progress-bar {
    background-image: linear-gradient(90deg, #007bff 0%, #00c6ff 100%);
}

/* Success (green) */
.progress-bar-success {
    background-image: linear-gradient(90deg, #28a745 0%, #85e085 100%);
}

/* Info (light blue) */
.progress-bar-info {
    background-image: linear-gradient(90deg, #17a2b8 0%, #00e6e6 100%);
}

/* Warning (orange/yellow) */
.progress-bar-warning {
    background-image: linear-gradient(90deg, #ffc107 0%, #ff8c00 100%);
}

/* Danger (red) */
.progress-bar-danger {
    background-image: linear-gradient(90deg, #dc3545 0%, #ff6a6a 100%);
}


/* ==========================================================================
Animations
========================================================================== */
.anim_delay_0{
    animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
.anim_delay_1{
    animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
.anim_delay_2{
    animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
.anim_delay_3{
    animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}
.anim_delay_4{
    animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
.anim_delay_5{
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

/* ==========================================================================
Typed Cursor
========================================================================== */
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
/* ==========================================================================
Pseudos
========================================================================== */
::selection { background: #FCAF17; }
::-o-selection { background: #FCAF17; }
::-ms-selection { background: #FCAF17; }
::-moz-selection { background: #FCAF17; }
::-webkit-selection { background: #FCAF17; }
/* ==========================================================================
SCROLLBAR
========================================================================== */
::scrollbar {    width: 10px;    }
::scrollbar-thumb { background: rgba(69,98,79,.8); 
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -o-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -ms-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);    
                            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);  }
::scrollbar-thumb:window-inactive { background: rgba(252,175,23,0.5);  }
::-webkit-scrollbar {    width: 10px;    }
::-webkit-scrollbar-thumb { background: rgba(69,98,79,.8); 
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -o-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -ms-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);    
                            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);  }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(252,175,23,0.5);  }
::-o-scrollbar {    width: 10px; }
::-o-scrollbar-thumb {  background: rgba(69,98,79,.8); 
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -o-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -ms-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);    
                            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);  }
::-o-scrollbar-thumb:window-inactive {  background: rgba(252,175,23,0.5);  }
::-ms-scrollbar {    width: 10px;    }
::-ms-scrollbar-thumb { background: rgba(69,98,79,.8); 
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -o-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -ms-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);    
                            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);  }
::-ms-scrollbar-thumb:window-inactive { background: rgba(252,175,23,0.5);  }
::-moz-scrollbar {    width: 10px;   }
::-moz-scrollbar-thumb {    background: rgba(69,98,79,.8); 
                            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -o-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -ms-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
                            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);    
                            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);  }
::-moz-scrollbar-thumb:window-inactive {    background: rgba(252,175,23,0.5);  }
/*-----------------------------------------*/




/* CONSTANTES...
*   color fondo de logo #FCAF17 rgba(252,175,23,0.5);
*
*   transition: all  0.5s linear;
*
*
*
*
*
*
*
*/