<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');
@charset "utf-8";
@font-face {
    font-family: "Helvetica";
    src: url('fonts/JosefinSans/JosefinSans-Regular.ttf') format("opentype");
    font-style: normal;
}
@font-face {
    font-family: "Helvetica";
    src: url('fonts/JosefinSans/JosefinSans-Bold.ttf') format("opentype");
    font-style: bold;
}
@font-face {
    font-family: "Helvetica";
    src: url('fonts/JosefinSans/JosefinSans-Light.ttf') format("opentype");
}
@font-face {
    font-family: "Arial H";
    src: url('fonts/Helvetic.ttf') format("truetype");
}
.full { width: 100%; max-width: 100%; }
.space{ margin-top: 1em !important; margin-bottom: 1em !important; }
.max-space{ margin-top: 2em !important; margin-bottom: 2em !important; }
.sup-space{ margin-top: 3.5em !important; margin-bottom: 3.5em !important; }
.header-prt{ 	border-bottom: solid 1px gray;}
footer { font-size: .9em; }
.header-prt img{ max-height: 80px;}
.bg-full-img{
	background: url("../imgs/bg/bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg-img-port{
	background: url("../imgs/bg/portfolio.jpg") no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bg-lightgray{
	background-color: #FFF;
}
.box-tpwd-light, .box-tpwd-dark{ 	padding: 1em 4em; }
.box-tpwd-light h4{	color: silver; }
.box-tpwd-light strong{	color: #FFF; }
.box-tpwd-dark h4{	color: #555; }
.box-tpwd-dark strong{	color: #000; }
.clr-wht{ 	color: #FFF ; }
.clr-gry{	color: #CCC ; }
.clr-lil{   color: #c9113d; }

.toggle{ position: absolute; top: 1.5em; left: 1em; padding: 0; z-index: 999; }
.toggle img { height: 35px; }

.big-txt i{ font-size: 5em; }
.main-txt h1{  font-size: 5.5em; font-weight: 900; line-height: 90%; letter-spacing: 0px; text-shadow: 1px 1px 3px #000000; }
#random{ color: #EB345F;  }

#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}
/* conecta  */
.conecta{}
.conecta h3, .conecta h4{  font-family: "HelveticaT"; }
.conecta a{ font-size: 2em; }

/* acerca */
.acerca{}
.acerca h3, .acerca h4 { font-family: "HelveticaT"; }
.acerca h3.intro, .acerca h4{ color: #c9113d;}

/* srvicios */
.servicios h4, .servicios h5{ font-family: "HelveticaT"; }
.servicios .top-list a { color: #6b6b6b;}
.servicios .top-list li.web i{ color: green; }
.servicios .top-list li.grafico i{ color: red; }
.servicios .top-list li.marketing i{ color: gold; }
.servicios .top-list li.social i{ color: blue; }
.servicios .top-list li.fotografia i{ color: silver; }



/* portfolio */
.viewport {
    overflow: hidden;
    position: relative;
    padding: 0;
}

.no-margin {
    margin-right: 0;
}

.viewport a {
    display: block;
    position: relative;
}

.viewport a img {
    position: relative;
    width: 100%;
}
.viewport a span {
    display: none;
    font-size: 3em;
    height: 100%;
    padding-top: 60px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 100;
}
    .viewport a span em {
        display: block;
        font-size: 0.45em;
        font-weight: normal;
    }

.dark-background {
    background-color: rgba(15, 15, 15, 0.6);
    color: #fff;
    text-shadow: #000 0px 0px 20px;
}
    .dark-background em {
        color: #ccc;
    }



.wordsrotator_words {
    display: inline-block;
    position: relative;
    white-space:nowrap;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;   
}

.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn {
    position: relative;
    display: inline-block;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
}
.wordsrotator_words .wordsrotator_wordOut {
    left: 0;
    top: 0;
    position: absolute;
    display: inline-block;  
}
.wordsrotator_words .wordsrotator_wordOut span {
    width: auto;
    position: relative;
}
.wordsrotator_words .wordsrotator_wordIn {
    opacity: 0;
}