@charset "utf-8";
/* CSS Document */

/* FONTS */
@font-face {
    font-family: 'CabinRegular';
    src: url('../fonts/cabin/Cabin-Regular-webfont.eot');
    src: url('../fonts/cabin/Cabin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cabin/Cabin-Regular-webfont.woff') format('woff'),
         url('../fonts/cabin/Cabin-Regular-webfont.ttf') format('truetype'),
         url('../fonts/cabin/Cabin-Regular-webfont.svg#CabinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CabinBold';
    src: url('../fonts/cabin/Cabin-Bold-webfont.eot');
    src: url('../fonts/cabin/Cabin-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cabin/Cabin-Bold-webfont.woff') format('woff'),
         url('../fonts/cabin/Cabin-Bold-webfont.ttf') format('truetype'),
         url('../fonts/cabin/Cabin-Bold-webfont.svg#CabinBold') format('svg');
    font-weight: bold; 
    font-style: normal;
}

@font-face {
    font-family: 'Sansita';
    src: url('../fonts/sansita/SansitaOne-webfont.eot');
    src: url('../fonts/sansita/SansitaOne-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansita/SansitaOne-webfont.woff') format('woff'),
         url('../fonts/sansita/SansitaOne-webfont.ttf') format('truetype'),
         url('../fonts/sansita/SansitaOne-webfont.svg#CabinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LigatureSymbols';
    src: url('../fonts/symbols/LigatureSymbols-2.07.eot');
    src: url('../fonts/symbols/LigatureSymbols-2.07.eot?#iefix') format('embedded-opentype'),
         url('../fonts/symbols/LigatureSymbols-2.07.woff') format('woff'),
         url('../fonts/symbols/LigatureSymbols-2.07.ttf') format('truetype'),
         url('../fonts/symbols/LigatureSymbols-2.07.svg#LigatureSymbols') format('svg');
    src: url('../fonts/symbols/LigatureSymbols-2.07.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/* RESET */
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-decoration:none;
}
 
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
 
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
img {}

body                 {     background-color:#111; background:url(../img/bg_tile1.png);}
#contenido             {    width:960px; position:absolute; left:50%; margin-left:-480px;
                        background:#FFF; box-shadow: 0px 0px 30px 7px rgba(0,0,0,0.7);}
#contenido>article     {    display:block;}

header        {    background:#222 url(../img/bg_grad.png) repeat-x; position:fixed; z-index:998;}
nav            {    width:960px; height:30px; background:#C06;}
nav a        {    color:white; font: 14px "CabinRegular", Tahoma, Geneva, sans-serif; line-height:30px; text-align:center;
                display:block; height:29px; padding:1px 14px 0; float:left; position:absolute;
                transition: height 0.5s, border-bottom-right-radius 0.5s, border-bottom-left-radius 0.5s;
                -moz-transition: height 0.5s, border-bottom-right-radius 0.5s, border-bottom-left-radius 0.5s;
                -webkit-transition: height 0.5s, border-bottom-right-radius 0.5s, border-bottom-left-radius 0.5s;
                -o-transition: height 0.5s;}
nav a:hover        {    height:40px;
                    border-bottom-right-radius: 7px;
                    border-bottom-left-radius: 7px;}
#nav_logo        {    background:#c06;}
#nav_pack        {    background:#0CC; color:#222; left:433px;}
#nav_visual        {    background:#6F0; color:#222; left:519px;}
#nav_foto        {    background:#909; left:671px;}
#nav_conoce        {    background:#FC3; color:#222; left:758px;}
nav ul        {    margin-left:300px;}

#contacto    {    width:38px; height:158px; position:fixed; left:50%; margin-left:480px; top:28px; z-index:998;
                padding-top:0px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;}
#contacto a    {    float:left; font-size:32px; padding:0.1em 0.2em; color: white; text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
                display:block; width:25px; text-align:right; box-shadow:inset 1px 1px 8px rgba(0,0,0,0.5);
                transition: width 0.3s, box-shadow 0.4s;
                -moz-transition: width 0.3s, box-shadow 0.4s;
                -webkit-transition: width 0.3s, box-shadow 0.4s;
                -o-transition: width 0.3s, box-shadow 0.4s;}
#contacto a:hover {  width:40px; box-shadow:inset -1px 1px 7px rgba(255,255,255,0.5);}
#contacto a:first-child    {    padding:0.1em 0.21em; border-top:none;
                            border-top-right-radius: 10px;}
#contacto a:last-child    {    border-bottom-right-radius: 10px;}
#contacto_mail                {    background:#909;}
#contacto_mail:before        {    content:"mail";}
#contacto_linkedin            {    background:#069;}
#contacto_linkedin:before    {    content:"linkedin";}
#contacto_flickr            {    background: #07A url(../img/bg_flickr.png) 100% 0 no-repeat;}
#contacto_flickr:before        {    content:"flickr";}
#contacto_twitter            {    background:#09F;}
#contacto_twitter:before    {    content:"twitter";}

#presentacion         {     background:url(../img/bg_img1-1.png) no-repeat; position:relative;
                        background-position:-5% 110%; width:960px; height:340px; margin-top:180px;}
#logo                {    height: 138px; margin-top:0.8em; position:relative; top:16px; left:20px;}
#texto_pres         {    width:430px; color:#333; font: 16px "CabinRegular", Tahoma, Geneva, sans-serif;
                        position:absolute; left:16em; top:5em; line-height:1.3em;}
#foto_personal         {    height:8.5em; float:left; border: solid 3px white; border-radius: 3px; position:absolute; top:3em; right:2em; 
                        box-shadow: 4px 4px 7px black;
                        -ms-transform: rotate(-10deg); -ms-box-shadow: 2px 2px 9px black;
                        -webkit-transform: rotate(-10deg); -webkit-box-shadow: 2px 2px 9px black;
                        -moz-transform: rotate(-10deg); -moz-box-shadow: 2px 2px 9px black;
                        -o-transform: rotate(-10deg); -o-box-shadow: 2px 2px 9px black;}
.intro                {    width:960px; height:100px; background:#222; float:left;}

.tema                 {    float:left; padding:5% 8%; width:84%; position:relative;}

.tema img, 
.texto_tema            {    }
.texto_tema            {    padding: 0.8em 1em 1em; border-radius:10px; border-bottom-left-radius:0; border:1px solid #222;
                        color:#FFF; font: 16px "CabinRegular", Tahoma, Geneva, sans-serif; line-height:1.3em;}
.tema>img            {    border: solid 3px white; border-radius: 5px;
                        box-shadow: 2px 2px 8px black;
                        -ms-box-shadow: 4px 4px 7px black;
                        -webkit-box-shadow: 2px 2px 8px black;
                        -moz-box-shadow: 4px 4px 7px black;
                        -o-box-shadow: 4px 4px 7px black;}
.titulo                {    font-family:"Sansita", Impact, Arial Black, sans-serif;
                        text-shadow:     0px 2px #333,
                                        2px 2px #333,
                                        2px 0px #333,
                                        2px -2px #333, 
                                        0px -2px #333, 
                                        -2px -2px #333,
                                        -2px 0px #333,
                                        -2px 2px #333;}

.seccion                {    width:960px; background:#FFF;}
#creacion_de_logos        {    height:1192px;}
#packaging                {    height:1112px;}
#visual_merchandising    {    }
#fotografia                {    overflow:hidden;}
#conoceme                {    }


#int_logos            {    background:#222;}
#int_logos>div        {    background: url(../img/bg_nubes1-1.png) 110px 80px no-repeat, url(../img/bg_nubes2-1.png) 400px -40px no-repeat; height:100px;}
#int_logos>div:hover     {    animation: nubes 6s ease-in infinite;
                        -moz-animation: nubes 6s ease-in infinite;
                        -webkit-animation: nubes 6s ease-in infinite;
                        -o-animation: nubes 6s ease-in infinite;
                        }

/* KEYFRAMES INT_LOGOS*/
@-moz-keyframes nubes /* Firefox */                    { 
    0%             { background-position: 110px 80px, 400px -40px }
    65%            { background-position: 460px 80px, 50px -45px }
    70%            { background-position: 460px 100px, 50px -90px }
    75%            { background-position: 50px 100px, 470px -90px }
    80%            { background-position: 50px 80px, 470px -40px }
    100%           { background-position: 110px 80px, 400px -40px }
}
@-webkit-keyframes nubes /* Safari and Chrome */                    { 
    0%             { background-position: 110px 80px, 400px -40px }
    65%            { background-position: 460px 80px, 50px -45px }
    70%            { background-position: 460px 100px, 50px -90px }
    75%            { background-position: 50px 100px, 470px -90px }
    80%            { background-position: 50px 80px, 470px -40px }
    100%           { background-position: 110px 80px, 400px -40px }
}
@-o-keyframes nubes /* Opera */                    { 
    0%             { background-position: 110px 80px, 400px -40px }
    65%            { background-position: 460px 80px, 50px -45px }
    70%            { background-position: 460px 100px, 50px -90px }
    75%            { background-position: 50px 100px, 470px -90px }
    80%            { background-position: 50px 80px, 470px -40px }
    100%           { background-position: 110px 80px, 400px -40px }
}
@keyframes nubes                    { 
    0%             { background-position: 110px 80px, 400px -40px }
    65%            { background-position: 460px 80px, 50px -45px }
    70%            { background-position: 460px 100px, 50px -90px }
    75%            { background-position: 50px 100px, 470px -90px }
    80%            { background-position: 50px 80px, 470px -40px }
    100%           { background-position: 110px 80px, 400px -40px }
}
#int_logo_sup                     { width: 150px; height: 100px; background: #C06; float: left; }
#int_logo_inf                     { width: 490px; height: 100px; background: #C06; float: left; }
#int_logos img                    { width: 180px; float: left; margin: 16px 70px 7px; }
#logos1                           { background: url(../img/bg_img3-1.png) no-repeat; background-position: 94% 70%; height: 420px; }
#tit_logos1                       { position: absolute; font-size: 4em; color: #E18; right: 1.5em; top: 0.9em; }
#texto_logos1                     { width: 430px; position: absolute; top: 6em; left: 6em; background: rgba(0,0,0,0.5) url(../img/bg_corner_texto1.png) no-repeat bottom left; background-size: 20px; }
#logos1 img:nth-child(1)          { position: absolute; bottom: 6em; left: 12em; }
#logos1 img:nth-child(4)          { float: left; position: absolute; bottom: 5em; left: 20em; }
#logos2                           { padding-left: 0em; background: url(../img/bg_img2-1c.png) no-repeat, url(../img/bg_img4-1c.png) no-repeat; background-position: 100% 10%, 58% 69%; height: 480px; }
#tit_logos2                       { position: absolute; font-size: 5em; color: #E18; top: 0.3em; left: 0.8em; }
#logos2 img:nth-child(2)          { position: absolute; bottom: 5em; right: 1em; }
#texto_logos2                     { width: 500px; position: absolute; top: 6em; left: 8em; background: rgba(0,0,0,0.5) url(../img/bg_corner_texto1.png) no-repeat bottom left; background-size: 20px; }
#logos2 img:nth-child(4)          { position: absolute; bottom: 7.5em; left: 5em; image-rendering: optimizeSpeed; }
#int_pack                         { }
#int_pack_sup                     { width: 150px; height: 100px; background: #0CC; float: left; }
#int_pack_inf                     { width: 490px; height: 100px; background: #0CC; float: left; }
#int_pack img                     { width: 180px; margin: 30px 70px 0 70px; float: left; }
#int_pack:hover #int_pack_sup     { animation: ipack_sup 2s infinite; -webkit-animation: ipack_sup 2s infinite; -moz-animation: ipack_sup 2s infinite; -o-animation: ipack_sup 2s infinite; }
#int_pack:hover #int_pack_inf     { animation: ipack_inf 2s infinite; -webkit-animation: ipack_inf 2s infinite; -moz-animation: ipack_inf 2s infinite; -o-animation: ipack_inf 2s infinite; }
#int_pack:hover img               { animation: ipack_img 2s infinite; -webkit-animation: ipack_img 2s infinite; -moz-animation: ipack_img 2s infinite; -o-animation: ipack_img 2s infinite; }
/* KEYFRAMES INT_PACK*/
@-webkit-keyframes ipack_sup                    { 
    0%             { width: 150px }
    30%            { width: 180px }
    70%            { width: 180px }
    100%           { width: 150px }
}
@-moz-keyframes ipack_sup                    { 
    0%             { width: 150px }
    30%            { width: 180px }
    70%            { width: 180px }
    100%           { width: 150px }
}
@-o-keyframes ipack_sup                    { 
    0%             { width: 150px }
    30%            { width: 180px }
    70%            { width: 180px }
    100%           { width: 150px }
}
@keyframes ipack_sup                    { 
    0%             { width: 150px }
    30%            { width: 180px }
    70%            { width: 180px }
    100%           { width: 150px }
}
@-webkit-keyframes ipack_inf                    { 
    0%             { width: 490px }
    10%            { width: 490px }
    40%            { width: 520px }
    80%            { width: 520px }
    100%           { width: 490px }
}
@-moz-keyframes ipack_inf                    { 
    0%             { width: 490px }
    10%            { width: 490px }
    40%            { width: 520px }
    80%            { width: 520px }
    100%           { width: 490px }
}
@-o-keyframes ipack_inf                   { 
    0%             { width: 490px }
    10%            { width: 490px }
    40%            { width: 520px }
    80%            { width: 520px }
    100%           { width: 490px }
}
@keyframes ipack_inf                   { 
    0%             { width: 490px }
    10%            { width: 490px }
    40%            { width: 520px }
    80%            { width: 520px }
    100%           { width: 490px }
}
@-webkit-keyframes ipack_img                   { 
    0%             { margin-left: 70px; margin-right: 70px; }
    10%            { margin-right: 70px }
    30%            { margin-left: 40px }
    40%            { margin-right: 40px }
    70%            { margin-left: 40px }
    80%            { margin-right: 40px }
    100%           { margin-left: 70px; margin-right: 70px; }
}
@-moz-keyframes ipack_img                   { 
    0%             { margin-left: 70px; margin-right: 70px; }
    10%            { margin-right: 70px }
    30%            { margin-left: 40px }
    40%            { margin-right: 40px }
    70%            { margin-left: 40px }
    80%            { margin-right: 40px }
    100%           { margin-left: 70px; margin-right: 70px; }
}
@-o-keyframes ipack_img                   { 
    0%             { margin-left: 70px; margin-right: 70px; }
    10%            { margin-right: 70px }
    30%            { margin-left: 40px }
    40%            { margin-right: 40px }
    70%            { margin-left: 40px }
    80%            { margin-right: 40px }
    100%           { margin-left: 70px; margin-right: 70px; }
}
@keyframes ipack_img                   { 
    0%             { margin-left: 70px; margin-right: 70px; }
    10%            { margin-right: 70px }
    30%            { margin-left: 40px }
    40%            { margin-right: 40px }
    70%            { margin-left: 40px }
    80%            { margin-right: 40px }
    100%           { margin-left: 70px; margin-right: 70px; }
}
#pack1                            { background: url(../img/bg_img5-1c.png) 95% 90% no-repeat; height: 400px; }
#pack1 img:nth-child(2)           { width: 170px; background-color: rgba(10,10,10,0.5); position: absolute; top: 6em; left: 7em; }
#tit_pack1                        { position: absolute; font-size: 4em; color: #0CC; top: 0.8em; right: 1em; text-indent: -3.5em; }
#texto_pack1                      { width: 300px; background: rgba(0,0,0,0.5) url(../img/bg_corner_texto2.png) no-repeat bottom left; background-size: 20px; position: absolute; right: 16em; top: 8em; }
#pack2                            { background: url(../img/bg_img6-1c.png) 20% 38% no-repeat; height: 420px; }
#pack2 img:nth-child(2)           { width: 310px; position: absolute; top: 2em; right: 5em; }
#tit_pack2                        { position: absolute; font-size: 4.5em; color: #0CC; top: 0em; left: 1em; }
#texto_pack2                      { width: 390px; background: rgba(0,0,0,0.5) url(../img/bg_corner_texto2.png) no-repeat bottom left; background-size: 20px; position: absolute; left: 4em; bottom: 7em; }
#pack2 img:nth-child(4)           { width: 350px; position: absolute; top: 12em; right: 6em; }
/* KEYFRAMES INT_VISUAL*/
@-webkit-keyframes ivisual_sup                   { 
    0%             { background-position: 0 0 }
    20%            { background-position: -20px 0 }
    80%            { background-position: -20px 400px }
    95%            { background-position: 0 400px }
    100%           { background-position: 0 400px }
}
@-moz-keyframes ivisual_sup                   { 
    0%             { background-position: 0 0 }
    20%            { background-position: -20px 0 }
    80%            { background-position: -20px 400px }
    95%            { background-position: 0 400px }
    100%           { background-position: 0 400px }
}
@-o-keyframes ivisual_sup                   { 
    0%             { background-position: 0 0 }
    20%            { background-position: -20px 0 }
    80%            { background-position: -20px 400px }
    95%            { background-position: 0 400px }
    100%           { background-position: 0 400px }
}
@keyframes ivisual_sup                   { 
    0%             { background-position: 0 0 }
    20%            { background-position: -20px 0 }
    80%            { background-position: -20px 400px }
    95%            { background-position: 0 400px }
    100%           { background-position: 0 400px }
}
@-webkit-keyframes ivisual_inf                   { 
    0%             { background-position: -20px 0 }
    20%            { background-position: 0 0 }
    80%            { background-position: 0 -400px }
    95%            { background-position: -20px -400px }
    100%           { background-position: -20px -400px }
}
@-moz-keyframes ivisual_inf                   { 
    0%             { background-position: -20px 0 }
    20%            { background-position: 0 0 }
    80%            { background-position: 0 -400px }
    95%            { background-position: -20px -400px }
    100%           { background-position: -20px -400px }
}
@-o-keyframes ivisual_inf                   { 
    0%             { background-position: -20px 0 }
    20%            { background-position: 0 0 }
    80%            { background-position: 0 -400px }
    95%            { background-position: -20px -400px }
    100%           { background-position: -20px -400px }
}
@keyframes ivisual_inf                   { 
    0%             { background-position: -20px 0 }
    20%            { background-position: 0 0 }
    80%            { background-position: 0 -400px }
    95%            { background-position: -20px -400px }
    100%           { background-position: -20px -400px }
}
#int_visual                       { }
#int_visual_sup                   { width: 150px; height: 100px; background: url(../img/bg_visual_izq.png) repeat-y; background-position: 0px 0px; float: left; }
#int_visual_inf                   { width: 460px; height: 100px; background: url(../img/bg_visual_dch.png) repeat-y; background-position: -20px 0px; float: left; }
#int_visual img                   { width: 210px; margin: 10px 70px 8px; float: left; }
#int_visual:hover #int_visual_sup { animation: ivisual_sup 3s ease-in-out infinite; -webkit-animation: ivisual_sup 3s ease-in-out infinite; -moz-animation: ivisual_sup 3s ease-in-out infinite; -o-animation: ivisual_sup 3s ease-in-out infinite; }
#int_visual:hover #int_visual_inf { animation: ivisual_inf 3s ease-in-out infinite; -webkit-animation: ivisual_inf 3s ease-in-out infinite; -moz-animation: ivisual_inf 3s ease-in-out infinite; -o-animation: ivisual_inf 3s ease-in-out infinite; }
#visual1                          { background: url(../img/bg_img7-1c.png) 25% 90% no-repeat; height: 500px; }
#tit_visual1                      { position: absolute; font-size: 4em; color: #6F0; top: 1em; right: 0.8em; }
#texto_visual1                    { width: 350px; background: rgba(0,0,0,0.5) url(../img/bg_corner_texto3.png) no-repeat bottom left; background-size: 20px; position: absolute; top: 11em; left: 5em; }
#visual1 img:nth-child(1)         { width: 350px; position: absolute; top: 9.5em; right: 4em; }
#visual1 img:nth-child(3)         { width: 250px; position: absolute; top: 19em; right: 6em; }
#visual2                          { background: url(../img/bg_img8-1c.png) 115% 82% no-repeat; height: 560px; }
#tit_visual2                      { position: absolute; font-size: 4.5em; color: #6F0; top: 0.2em; left: 0.8em; }
#visual2 img:first-child          { width: 300px; position: absolute; top: 7em; left: 6em; }
#texto_visual2                    { width: 345px; background: rgba(0,0,0,0.5) url(../img/bg_corner_texto3.png) no-repeat bottom left; background-size: 20px; position: absolute; right: 5em; top: 7em; }
#int_foto                         { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
#int_foto:hover                   { -webkit-animation: ifotografia 4s ease-in-out infinite; -moz-animation: ifotografia 4s ease-in-out infinite; -o-animation: ifotografia 4s ease-in-out infinite; animation: ifotografia 4s ease-in-out infinite; }
#int_foto_sup                     { width: 150px; height: 100px; background: #909; float: left; }
#int_foto_inf                     { width: 490px; height: 100px; background: #909; float: left; }
#int_foto img                     { width: 180px; margin: 35px 85px 24px 55px; float: left; }
/* KEYFRAMES INT_FOTOGRAFIA*/
@-webkit-keyframes ifotografia                   { 
    0%             { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
    5%             { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    10%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    20%            { background: #222 url(../img/bg_puntos1-1.png) 22% 90% no-repeat }
    30%            { background: #222 url(../img/bg_puntos1-1.png) 30% 20% no-repeat }
    50%            { background: #222 url(../img/bg_puntos1-1.png) 45% 90% no-repeat }
    70%            { background: #222 url(../img/bg_puntos1-1.png) 20% 10% no-repeat }
    85%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    95%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    100%           { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
}
@-moz-keyframes ifotografia                   { 
    0%             { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
    5%             { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    10%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    20%            { background: #222 url(../img/bg_puntos1-1.png) 22% 90% no-repeat }
    30%            { background: #222 url(../img/bg_puntos1-1.png) 30% 20% no-repeat }
    50%            { background: #222 url(../img/bg_puntos1-1.png) 45% 90% no-repeat }
    70%            { background: #222 url(../img/bg_puntos1-1.png) 20% 10% no-repeat }
    85%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    95%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    100%           { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
}
@-o-keyframes ifotografia                   { 
    0%             { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
    5%             { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    10%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    20%            { background: #222 url(../img/bg_puntos1-1.png) 22% 90% no-repeat }
    30%            { background: #222 url(../img/bg_puntos1-1.png) 30% 20% no-repeat }
    50%            { background: #222 url(../img/bg_puntos1-1.png) 45% 90% no-repeat }
    70%            { background: #222 url(../img/bg_puntos1-1.png) 20% 10% no-repeat }
    85%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    95%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    100%           { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
}
@keyframes ifotografia                   { 
    0%             { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
    5%             { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    10%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    20%            { background: #222 url(../img/bg_puntos1-1.png) 22% 90% no-repeat }
    30%            { background: #222 url(../img/bg_puntos1-1.png) 30% 20% no-repeat }
    50%            { background: #222 url(../img/bg_puntos1-1.png) 45% 90% no-repeat }
    70%            { background: #222 url(../img/bg_puntos1-1.png) 20% 10% no-repeat }
    85%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    95%            { background: #222 url(../img/bg_puntos1-1.png) 40% 49% no-repeat }
    100%           { background: #222 url(../img/bg_puntos2-1.png) 40% 49% no-repeat }
}
#container_galeria                { float: left; width: 960px; height: 820px; position: relative; padding-top: 70px; }
#galeria_foto                     { width: 912px; position: relative; left: 50%; margin-left: -442px; }
#galeria_foto a                   { display: block; height: 120px; width: 120px; margin: 0 1.5em 1.5em 0; float: left; position: relative; border: solid 4px #333; border-radius: 3px; }
.img_low                          { height: 120px; width: 120px; }
#galeria_foto span                { display: block; position: absolute; top: 0px; height: 120px; width: 120px; text-shadow: 1px 1px #333, 1px -1px #333, -1px 1px #333, -1px -1px #333; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; font: 20px "Sansita", Impact, Arial, sans-serif; color: #DDD; line-height: 120px; text-align: center; /*BACKGROUND RADIAL RGBA*/ background: #111; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 20%, #000 95%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(20%,rgba(0,0,0,0.1)), color-stop(95%,#000)); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 20%,#000 95%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 20%,#000 95%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 20%,#000 95%); background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 20%,#000 95%); -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }
#galeria_foto a:hover span        { opacity: 1; filter: alpha(opacity=99); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; }
#galeria_full                     { width: 0; height: 0; overflow: hidden; text-align: center; padding: 0; z-index: 999; position: fixed; top: 0; left: 0; background: #111; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%, #000 95%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(95%,#000)); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,#000 95%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,#000 95%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,#000 95%); background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,#000 95%); }
#galeria_full img                 { max-height: 100%; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; border: 4px solid #444; border-radius: 5px; box-shadow: 1px 1px 50px #000; -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -ms-transition: opacity 1s linear; transition: opacity 1s linear; }
#gal_nav                          { width: 80px; height: 1.2em; margin-left: -40px; position: relative; padding: 0.3em 0.4em 0.4em; background: #444; top: 2.1em; left: 50%; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 0px 0px 5px black; opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; }
#gal_nav:hover                    { opacity: 1; filter: alpha(opacity=99); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; }
#gal-bck,
#gal-close,
#gal-nxt                          { float: left; color: white; font-size: 20px; margin-left: 0.6em; text-shadow: 0px 0px 5px black; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; }
#gal-bck:before                   { content: "back" }
#gal-close:before                 { content: "close" }
#gal-nxt:before                   { content: "next" }
#gal-bck:hover,
#gal-close:hover,
#gal-nxt:hover                    { opacity: 1; filter: alpha(opacity=99); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; }
#int_conoce                       { background: #222 }
#int_conoce_sup                   { width: 150px; height: 100px; background: #FC3; float: left; }
#int_conoce_inf                   { width: 490px; height: 100px; background: #FC3; float: left; }
#int_conoce img                   { width: 220px; float: left; margin: 17px 50px 7px; }
.conoce_apartado                  { font: 2.8em "Sansita","Arial Black", Gadget, sans-serif; padding: 1em 0 0 1.2em; position: relative; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }
#container-conoceme               { height: 700px; background: url(../img/bg_img9-1c.png) no-repeat; background-position: 90% 90%; padding-top: 100px; }
#formacion                        { background: url(../img/bg_corner_conoce1a.png) no-repeat 0.6em 1.27em }
#formacion>a                      { color: #C06 }
#formacion >.desplegable          { display: none; width: 600px; left: 15em; top: 3em; }
#experiencia                      { background: url(../img/bg_corner_conoce2a.png) no-repeat 0.6em 1.27em }
#experiencia>a                    { color: #0CC }
#experiencia >.desplegable        { display: none; width: 600px; left: 15em; top: 3em; }
#tecnologias                      { background: url(../img/bg_corner_conoce3a.png) no-repeat 0.6em 1.27em }
#tecnologias>a                    { color: #6F0 }
#tecnologias >.desplegable        { display: none; width: 200px; left: 15em; top: 3em; }
#habilidades                      { background: url(../img/bg_corner_conoce4a.png) no-repeat 0.6em 1.27em }
#habilidades>a                    { color: #909 }
#habilidades >.desplegable        { display: none; width: 200px; left: 15em; top: 3em; }
ul                                { font: 0.5em "CabinRegular","Trebuchet MS", Arial, Helvetica, sans-serif; color: white; }
.concepto                         { margin: 0 0 0.5em 1.5em }
.concepto strong                  { font: 1.1em "CabinBold","Trebuchet MS", Arial, Helvetica, sans-serif }
.desplegable                      { position: absolute; padding: 0.8em 1em 0.3em 0; background: rgba(0,0,0,0.7); border: solid 1px #888; }
.conoce_apartado>a                { text-shadow: 0px 1px #333, 1px 1px #333, 1px 0px #333, 1px -1px #333, 0px -1px #333, -1px -1px #333, -1px 0px #333, -1px 1px #333, 2px 2px 8px #333 }
footer                            { background: #C06 url(../img/bg_footer2.png) 100% 100% no-repeat; height: 60px; padding: 5% 30px; font: 2em "CabinBold","Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; }
footer a                          { color: #CCC; font-weight: bold; }