/* --Font-face--*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:200,400,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@font-face{

font-family: 'Montserrat', sans-serif;
font-family: 'Varela Round', sans-serif;

}
/* --End--*/

/*--General--*/
body {
    background-color   : #fff;
    font-family: 'Montserrat', sans-serif;
}
img, video {max-width: 100%;}
h1, h2, h3, h4, h5 h6, .row {margin : 0% 0%}

ul{
    display   : inline;
    list-style: none;
    
}
hr{
    margin: 5% auto; 
}
hr.footer{
    margin: 2% auto; 
}
.content{
    padding: 10px 50px;
}

/* --End--*/

/* --Textos--*/
h1.name-top {
    color: #7f8c8d;
    font-family: 'Montserrat', sans-serif;
    font-size: 3.9rem;
    padding-top: 70px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 56px;
}
span.d{
    color: #72c9b9;
    font-size: 2.4rem;   
    font-weight: lighter;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    letter-spacing: 2px;
}
.yo{
    background-image: url(../img/alex.png);
    background-size: cover;
    height: 600px;
}
.tex-p{
    color      : #7f8c8d;
    font-family: 'Montserrat', sans-serif;
    font-size  : 1.1em;
    font-weight: 300;
    line-height: 29px;
    text-align: justify;
}
h1.titulo-color{
    color         : #fff;
    font-family   : 'Varela Round', sans-serif;
    font-size     : 30pt;
    line-height   : 1.2em;
    padding-bottom: 50px;
}
h4.sub-tile{
    /* padding-bottom: 20px; */
    color            : #fff;
    font-family      : 'Varela Round', sans-serif;
    font-size        : 1.5em;
    font-weight      : 400;
    margin-bottom    :  30px;
}
.fa-icon {
    color        : #ffffff;
    font-size    : 2em;
    margin-bottom: 30px;
    padding      :15%;
    border       : solid 2px #ffffff;
}
.icon-3{
    color     : #73c9ba;
    font-size : 4em;
    margin-top: 50px;
}
.tile-article{
    color      : #7f8c8d;
    font-family: 'Varela Round', sans-serif;
    font-size  : 2em;
    font-weight: 200;
    padding    : 20px 0 10px 0;
}
.pen{
    color    : #73c9ba;
    font-size: 1.4em;
}
.icon{
    font-size: 1.7em;
    width    : 5%;
    color:#7f8c8d;
}
.icon-fon{
    font-size: 1.4em;
    color: #7f8c8d;
}

i.icon-2{
    color    : #73c9ba ;
    font-size: 30px;
    margin   : 0 2% 0 0;
}
h1.cv{
    color         : #fff;
    font-family   : 'Varela Round', sans-serif;
    font-size     : 2.5em;
    letter-spacing: 2px;
    padding-bottom:50px;
    padding-top   : 50px;
}
h2.tile-3{
    color      : #7f8c8d;
    font-family: 'Varela Round', sans-serif;
    font-size  : 2em;
}
h1.titulo{
    color      : #7f8c8d;
    font-family: 'Varela Round', sans-serif;
    font-weight: 900;
    font-size  : 3em;
    margin     : 50px 0 0;
}
strong.text-gray {
    color         : #4b0000 ;
    font-family: 'Montserrat', sans-serif;
    font-size     : 16px;
    font-weight   : 400;
    letter-spacing: 3px;
}
strong.contact {
    color         : #fff;
    font-family: 'Varela Round', sans-serif;
    font-size     : 1.1em;
    letter-spacing: 3px;
    font-weight: bold;
}


.titulo-proyecto{
    color      : #707070;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size  : 3em;
    margin     : 10px auto;

}
span.t1 {
    color         : #eb5221 ;
    font-family: 'Poppins', sans-serif;
    font-size     : 1em;
    font-weight   : 200;
    letter-spacing: 2px;
    line-height   : 1em;
}
span.t2 {
    color         : #eb5221 ;
    font-family: 'Poppins', sans-serif;
    font-size     : 1em;
    font-weight   : 200;
    letter-spacing: 2px;
    line-height   : 1em;
}
/* --End--*/

/* --botones--*/
.active{
    color: #73c9ba;
}
.info-web{
    background: #73c9ba;
    color: #fff;
    border-radius:3px;
    padding: 10px 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    letter-spacing: 2px;
    transition-duration: .2s;  

}
.info-web:hover{
    background: transparent;
    border    : 1px solid #73c9ba;
    color     : #73c9ba;
}
a {
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
    color          : #7f8c8d;
    font-size      : 1em;
    text-decoration: none;
}
a:hover{
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
    color          : #73c9ba;
    text-decoration: none;
    transition: background-color 0.20s ease-in-out,
}
.info{
    background-color: #fff;
    border-radius   : 3px;
    color           : #73c9ba;
    font-family     : 'Montserrat', sans-serif;
    font-size       : 18px;
    letter-spacing  : 2px;
    padding         : 15px 50px;
    text-decoration : none;
    font-weight     : 400;
}
.info:hover{
    background     : transparent;
    border         : solid 1px #fff;
    color          : #fff;
    text-decoration: none;
    transition      : background-color 0.30s ease-in-out,
    border-color 0.20s ease-in-out,
    box-shadow 0.20s ease-in-out;

}

/* Radial Out */
.hvr-radial-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-radial-out:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-radial-out:hover, .hvr-radial-out:focus, .hvr-radial-out:active {
  color: white;
}
.hvr-radial-out:hover:before, .hvr-radial-out:focus:before, .hvr-radial-out:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}


.descarga::before{
    color              : #fff;
    transition-duration: .2s;
}
.descarga::before{
  content       : "\f1c1";
  font-family   : "Font Awesome 5 Pro" !important;
  font-size     : 3.5em;
}
.descarga:hover::before{
    background   : #fff;
    border       : 1px solid #fff;
    border-radius: 50%;
    color        :  #73c9ba;
    content      : "\f4da"!important;
    padding      : 20px;
}
.mail{
    color     : #fff;
    list-style: none

}
.mail:hover{
    color          : #73c9ba;
    text-decoration: none
}

.enter {
    background: transparent;
    border: solid 1px #73c9ba;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    width: 30%;
    font-size: 20px;
    font-weight: 500;
    padding: 10px;
}
.enter:hover{
    background: #73c9ba;
    color           : #fff ;
    text-decoration : none;
    transition      : background-color 0.40s ease-in-out,
    border-color 0.30s ease-in-out,
    box-shadow 0.30s ease-in-out;
}
.link-social{
    font-size: 1.8em;
    color    : #fff
}
.link-social:hover{
    color              : #73c9ba;
    text-decoration    : none;
    transition-duration: 0.3s;
}
.footer-left{
    color:#fff; 
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    font-size: 12px;
}
.footer-right{
    color:#fff; 
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    font-size: 12px;
    text-align: right;
}
/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba{
  display:none;
  background-repeat:no-repeat;
  font-size:18px;
  color:black;
  cursor:pointer;
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:2;
}
/*--End--*/

/* --Cajas, espacios, otros--*/
.logo{
    float       : left;
    margin-right: 6px;
    padding     : 10px 0px 10px 0;
    width       : 15%;
}
.work{
    -webkit-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.28);
    -moz-box-shadow   : 0px 0px 18px 1px rgba(0,0,0,0.28);
    box-shadow: 0px 0px 28px 10px rgba(15,15,15,0.13);
}
.line {
    background: #73c9ba;
    height: 1px;
    width: 8%;
    margin: 0 0 5%;
}
.line_name {
    background: #73c9ba;
    height: 1px;
    width: 20%;
    margin: 2% 0 4%;
}
.line-titulo {
    background: #73c9ba;
    height    : 2px;
    margin    : 2% auto 100px;
    width     : 8%;
}
.line-proyectos {
    background: #eb5221;
    height: 5px;
    margin: 3% auto 50px;
    width: 6%;
    border-radius: 100px;
}

.iconos{
    margin: 0 0 10px 0;
}
.top_des{
    margin-top: 30px;
}
.caja{
    margin-bottom: 50px;
}
textarea.form-control {
    height: 160px
}
/* --End--*/


/* --fluid--*/
.container-fluid{
    padding-left: 0px;
    padding-right: 0px;
}
.fluid_1{
  /* -- background-image: linear-gradient(-10deg,rgba(62, 113, 202),rgba(0, 221, 212));*/
    padding         : 50px 0;
    /*background: #72c9b9;*/
    background-image: url(../img/bg-fondo.png);
    background-size: cover; 
    
}
.block .block-content .the-excerpt::before {
    content: “”;
    position: absolute;
    right:0;bottom:0;left:0;
    width: 100%;
    height: 35px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
    }
.fluid_2{
  /* -- background: linear-gradient(-10deg,rgba(62, 113, 202),rgba(0, 221, 212));*/
    padding         : 50px  0;
    background: #cd2247;
}
.fluid_parallax{
    background-attachment   : fixed;
    background-image        : url( ../img/bg-footer.jpg);
    background-position     : center center;
    background-repeat       : no-repeat;
    background-size         : cover;
    min-height              : 300px;
    padding                 : 28px 0 20px 0;
    position                : relative;
    -moz-background-size    : cover;
    -o-background-size      : cover;
    -webkit-background-size : cover;
}
.fluid_parallax-2{
    background-attachment   : fixed;
    background-image        : url( ../img/bg-p.jpg);
    background-position     : center center;
    background-repeat       : no-repeat;
    background-size         : cover;
    min-height              : 300px;
    padding                 : 28px 0 20px 0;
    position                : relative;
    -moz-background-size    : cover;
    -o-background-size      : cover;
    -webkit-background-size : cover;
}
/* --End--*/


.width80 { max-width: 80px !important; }
.nav-link {
    display: block;
    padding: .8rem 1rem !important;
}

/* --Responsive--*/
@media (min-width:320px) and (max-width:640px) {

   h1.name-top {
    font-family: 'Varela Round', sans-serif;
    font-size: 2em;
    font-weight: bold;
    padding-top: 36px;
    text-align: center;
}
span.d {
    color: #72c9b9;
    font-size: 1.8rem;
    font-weight: lighter;
    font-family: 'Varela Round', sans-serif;
}
    p.tex-p{
    text-align: justify !important;
    }
    .espacer{
    margin-bottom : 50px;
    }

    h1.cv{
    font-size : 2.5em;
    text-align: center ;
    padding-bottom: 10px;
    }
    .tile-article{
    font-size     : 1.9em;
    font-weight: 200;
    }
    .descarga{
    /* padding: 10px 0 50px 0; */
    }
    .caja{
    margin-bottom: 40px;
	}
	.enter{
    width: 100%;
    }
	h1.titulo{
    font-size: 2em;
    }
    .line_name{
    background: #73c9ba;
    height    : 1px;
    width     : 20%;
    margin    : 3% auto;
    }
    #menu-trigger {
    top: 22px !important;
    }
    .tex-p {
    text-align: justify;
    font-size: 1rem;
    }
    .espacer{
        margin: 10% auto;
    }
    .line-titulo {
    margin: 2% auto 40px;
    }
    .footer-left, .footer-right {
    text-align: center !important;
    }
    .content{
        padding: 0px;
    }
}
@media (max-width: 667px) {

    h1.name-top{
    /* font-size: 3em; */
    }
    .tex-p{
    font-weight: normal ;
    }
    .footer-right{
    color:#fff; 
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
    font-size: 12px;
    text-align: right;
}

    .caja-contenido{
        margin-bottom : 10px;
        padding-bottom: 10px
    }
    .tz-gallery{
        padding: 0px
    }
    .li{
        text-align: center
    }
   h1.tex-logo{
      text-align: center;
    }
}
@media (min-width:641px) and (max-width:1024px) {

    h1.name-top{
        font-size: 2em;
    }
    .logo{
        width: 12%;
    }
    .ghost{
        padding-top: 73px;
    }
    .top_des {
        margin-top: 60px;
    }
}
@media (min-width:1024px){
    .top_des{
        margin-top: 30px
    }
    h4.sub-tile{
        font-size: 1.3em
    }
}