@import "../vendor/normalize-css/normalize.css";

/*
 * Variables de color
 * @bg-color: #6BB07B;
 * --------------------------------------------------------------------------------------------------
*/

@blue:#0033CC;

/*
 * --------------------------------------------------------------------------------------------------
 * GENERAL
 * --------------------------------------------------------------------------------------------------
*/

/*
 * border box
 * No incrementa el ancho del div al dar un padding
 * --------------------------------------------------------------------------------------------------
*/

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*
 * Font face
 * Fuentes de iconos. (Fontello.com)
 * --------------------------------------------------------------------------------------------------
*/

@font-face {
  font-family: 'fontello';
  src: url('../fonts/icon-font/fontello.eot?57843846');
  src: url('../fonts/icon-font/fontello.eot?57843846#iefix') format('embedded-opentype'),
       url('../fonts/icon-font/fontello.woff2?57843846') format('woff2'),
       url('../fonts/icon-font/fontello.woff?57843846') format('woff'),
       url('../fonts/icon-font/fontello.ttf?57843846') format('truetype'),
       url('../fonts/icon-font/fontello.svg?57843846#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.icon-play:before { content: '\e800'; } /* '' */
.icon-arrow-left:before { content: '\e804'; } /* '' */
.icon-arrow-right:before { content: '\e805'; } /* '' */

/*
 * --------------------------------------------------------------------------------------------------
 * MIXINS
 * --------------------------------------------------------------------------------------------------
*/

.volkorn{
    font-family: 'Vollkorn', serif;
}

.montserrat{
    font-family: 'Montserrat', sans-serif;
}

.open-sans{
    font-family: 'Open Sans', sans-serif;
}


/*
 * Responsive Video
 * Crea video fluido
 * --------------------------------------------------------------------------------------------------
*/

.video-wrapper{
	position: relative;
	top: 0;
	margin: 0;
	height: 0;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	padding: 0;

	object,iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&.ratio-16-9{
		padding-bottom: 56.25%;
	}

	&.ratio-4-3{
		padding-bottom: 75%;
	}
}

/*
 * Imagereplace
 * Sustituye texto por imágenes
 * --------------------------------------------------------------------------------------------------
*/

.imagereplace {
	display:block;
	background-color:transparent;
	background-repeat:no-repeat;
	font-size:0px !important;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
	text-align: left;
	text-indent: -9999px;
	direction: ltr;
	a {
		width:100%;
		height:100%;
		display:block;
		text-decoration:none;
	}
}

/*
 * Clearfix
 * Contenedor que contiene floats
 * --------------------------------------------------------------------------------------------------
*/

.clearfix {
	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}

/*
 * --------------------------------------------------------------------------------------------------
 * STYLES
 * --------------------------------------------------------------------------------------------------
*/

body{
    overflow-x: hidden;
    //height: 1200px;
    ::selection {
      background:#51D1A8;/*#FFBFF2*/ /*#ffb7b7;*/
    }
}


#wrapper{
    width: 85%;
    height: auto;
    display: inline-block;
    float: left;
    margin-left: 7.5%;
    //max-width: 1366px;
    //background-color:  #F5F5F5;
    //background-color: #E6F2FB;
    //overflow-x: hidden;
    .unseen-h2{
        display: none;
    }
/*
 * --------------------------------------------------------------------------------------------------
 * INICIO
 * --------------------------------------------------------------------------------------------------
*/
    .header{
        background-color: #fff;
        .clearfix;
        height: auto;
        //width: 85%;
        width: 100%;
        margin-left: 0px;
        position: fixed;
        transition: 500ms ease;
        padding-top: 30px;
        padding-bottom: 18px;
        z-index: 5;
        padding-left: 7.5%;
        padding-right: 7.5%;
        margin-left: -7.5%;
        .logo {
            .montserrat;
            overflow: hidden;
            //font-size: 2em;
            width: 48%;
            margin-left: 2%;
            float: left;
            display: inline-block;
            //background-color: green;
            margin-top: -12px;
            font-size: 32px;
            font-weight: 700;
            .saludo,.name {
                transition: all .5s ease;
                display: inline-block;
                will-change: opacity, transform;
                color: @blue;
            }
            .saludo {
                margin-top: 20px;
            }
            .name {
                opacity: 0;
                position: absolute;
                transform: translateY(2em);
                font-size: 29px;
            }
        }
        /* On scroll */
        .logo.scrolled .saludo {
          opacity: 0;
          transform: translateY(-2em);
        }
        .logo.scrolled .name {
            opacity: 1;
            transform: translateY(0);
            //margin-top: -3px; 
            //left: 0;
        }
        .logo.scrolled .prgrf{
            margin-top: 19px;
            //font-size: 30px;
            //background-color: red;
        }
        /*&.sticky{
            //position: fixed;
            background-color: blue;
            transition: 500ms ease;
            //idth: 80%;
        }*/
        .overlay{
            display: inline-block;
            float: left;
            width: 50%;
            //background-color: pink;
            .overlay-menu{
                display: inline-block;
                float: left;
                width: 100%;
                //background-color: purple;
                .main-menu{
                    display: inline-block;
                    float: left;
                    width: 100%;
                    //background-color: tomato;
                    .main-menu-item{
                        display: inline-block;
                        list-style: none;
                        float: left;
                        height: auto;
                        width: 25%;
                        //background-color: yellow;
                        text-align: center;
                        &:first-child{
                            margin-left: -5%;
                        }
                        .main-menu-link{
                            .montserrat;
                            text-decoration: none;
                            font-size: 18px;
                            color: @blue;
                            font-weight: 400;
                            .main-menu-span{
                                
                            }
                             &:hover{
                                //text-decoration: underline;
                                border-bottom: 2px solid @blue;
                            }
                        }
                    }
                }
            }
        }    
    }

/*-----------------------------------------------------------------*/
    /*@keyframes fade-in {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .fade-in {
        animation: fade-in 1s 1s forwards linear;
    }*/
    
    /* make keyframes that tell the start state and the end state of our object */
    @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

    .fade-in {
      opacity:0;  /* make things invisible upon start */
      -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
      -moz-animation:fadeIn ease-in 1;
      animation:fadeIn ease-in 1;

      -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
      -moz-animation-fill-mode:forwards;
      animation-fill-mode:forwards;

      -webkit-animation-duration:1s;
      -moz-animation-duration:1s;
      animation-duration:1s;
    }

    .fade-in.one {
      -webkit-animation-delay: 0.4s;
      -moz-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    .fade-in.two {
      -webkit-animation-delay: 0.7s;
      -moz-animation-delay:0.7s;
      animation-delay: 0.7s;
    }

    .fade-in.three {
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      animation-delay: 1s;
    }

/*-----------------------------------------------------------------*/
    .intro-txt{
        display: inline-block;
        float: left;
        height: auto;
        width: 100%;
        padding-top: 150px;
        margin-bottom: 80px;
        cursor: url("../img/face-icon.png"), auto;
        color: @blue;
        //background-color: purple;
        .txt-happy{  
            font-size: 30px;
            .volkorn;
            font-style: italic;
            width: 60%;
            margin-left: 20%;
            line-height: 42px;
            //background-color: aquamarine;
        }
    }
    .projects-grid{
        width: 100%;
        height: auto;
        display: inline-block;
        float: left;
        margin-bottom: 30px;
        //background-color: darkgrey;
        .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
            width: 32.66%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: dimgrey;
            margin-bottom: 1%;
            //max-height: 280px;
            .project-link{
                position: relative;
                display: block;
                width: 100%;
                height: 0;
                padding-bottom: 75%;
                overflow: hidden;
                .project-info{
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    opacity: 0;
                    //margin-left: -500px;
                    .project-ttl, .project-tag{
                        //font-size: 25px;
                        color: #fff;
                        position: absolute;
                        width: 100%;
                        height: auto;
                        text-align: center;
                        .montserrat;
                    }
                    .project-ttl{
                        margin-top: 115px;
                        font-weight: 600;
                        font-size: 26px;
                        //letter-spacing: 1px;
                    }
                    .project-tag{
                        margin-top: 155px;
                        font-weight: 400;
                        font-size: 15px;
                        //font-style: italic;
                    }
                }
                .project-cover{
                    width: 100%;
                    height: auto;
                    //max-height: 280px;
                    //min-width: 600px;
                }
            }
            &:hover{
                .project-info{
                    //margin-left: 0px;
                    display: block;
                    background-color:rgba(0, 51, 204, 0.9);
                    opacity: .99;
                    -webkit-transition:ease-in-out 150ms;
                    -moz-transition:ease-in-out 150ms;
                    -o-transition:ease-in-out 150ms;
                    transition:ease-in-out 150ms;
                }
            }
        }
        .project-square-middle{
            //background-color: red;
            margin-left: 1%;
            margin-right: 1%;
        }
        .project-rectangle-left{
            margin-right: 1%;
            width: 66.33%;
            .project-link{
                padding-bottom: 36.9%;
            }
        }
        .project-rectangle-right{
            margin-left: 1%;
            width: 66.33%;
            .project-link{
                padding-bottom: 36.9%;
            }
        }
        /*.project-rectangle-vert{
            height: 500px;
            .project-link{
                padding-bottom: 100%;
            }
        }*/
    }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        width: 116%;
        height: auto;
        display: inline-block;
        float: left;
        //background-color: cadetblue;
        margin-left: -8%;
        margin-top: 180px;
        .lateral-nav{
            width: 5%;
            height: auto;
            display: inline-block;
            float: left;
            position: fixed;
            text-align: center;
            z-index: 2;
            .lateral-nav-link{
                width: 100%;
                height: auto;
                display: inline-block;
                margin-top: 15vh;
                //background-color: red;
                padding-top: 100px;
                padding-bottom: 100px;
                .montserrat;
                text-decoration: none;
                color: @blue;
                font-weight: 500;
                font-size: 15px;
                cursor: url("../img/arrow-left-icon.png"), auto;
                margin-right: -21%;
                transition: 250ms ease;
                &:hover{
                    opacity: .6;
                    transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    display: inline-block;
                    float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                margin-right: -35px;
                cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        .video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
        .project-information{
            width: 86%;
            height: auto;
            display: inline-block;
            //float: left;
            //background-color: beige;
            margin-left: 7%;
            .montserrat;
            .text-information{
                width: 70%;
                height: auto;
                display: inline-block;
                float: left;
                margin-left: 15%;
                //background-color: aquamarine;
                margin-bottom: 50px;
                .project-info-ttl{
                    width: 100%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    //background-color: red;
                    margin: 0px;
                    //.montserrat;
                    color: @blue;
                    font-size: 39px;
                    margin-bottom: 35px;
                    font-weight: bold;
                }
                .project-text-1col{
                    width: 80%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    font-size: 15px;
                    font-weight: 400px;
                    line-height: 25px;
                    margin-right: 20%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    width: 48%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    //background-color: orangered;
                    font-size: 15px;
                    font-weight: 400px;
                    line-height: 23px;
                    margin-bottom: 50px;
                    &:first-child{
                        margin-right: 4%;
                    }
                }
            }
            .image-container{
                width: 100%;
                height: auto;
                display: inline-block;
                float: left;
                //background-color: coral;
                margin-bottom: 50px;
                .project-large-image{
                    width: 100%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    margin-bottom: 90px;
                }
                .project-medium-image{
                    width: 49.5%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    &:first-child{
                        margin-right: 1%;
                    }
                }
            }
            #totems-row, #pulseras-row, #merchan-row, #ilegal-row{
                margin-bottom: 13px;
            }
            #iconografia-row{
                margin-top: -30px;
            }
            .image-large-container{
                width: 118%;
                height: auto;
                display: inline-block;
                float: left;
                margin-left: -9%;
                //z-index: 200;
                .project-large-image{
                    width: 100%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    margin-bottom: 90px;
                }
                .project-medium-image{
                    width: 49.5%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    &:first-child{
                        margin-right: 1%;
                    }
                }
            }
        }
        .responsive-arrows{
            display: none;
        }
        .italic-citas{
            font-style: italic;
            //opacity:.5; 
            color: #c6c6c6;
        }
        .texto-creditos{
            //opacity: .5;
            display: inline-block;
            color: #c6c6c6;
        }
        .texto-creditos-margin{
            //opacity: .5;
            display: inline-block;
            margin-top: 15px;
            color: #c6c6c6;
        }
        .texto-titulos{
            display: inline-block;
            margin-bottom: 10px;
            //color: @blue;
            font-weight: 600;
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
        width: 80%;
        height: auto;
        display: inline-block;
        float: left;
        margin-left: 10%;
        .montserrat;
        margin-top: 130px;
        margin-bottom: 100px;
        .about-img-container{
            width: 50%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: pink;
            .iago-img{
                width: 60%;
                height: auto;
                display: inline-block;
                float: left;
                margin-left: 20%;
                max-width: 475px;
                border-radius: 500px;
                margin-top: 50px;
            }
        }
        .about-info{
            width: 50%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: greenyellow;
            .about-ttl{
                width: 100%;
                height: auto;
                display: inline-block;
                float: left;
                font-size: 12px;
                color: @blue;
            }
            .about-txt{
                width: 85%;
                height: auto;
                display: inline-block;
                float: left;
                margin-right: 15%;
                font-size: 14px;
                font-weight: 400;
                line-height: 23px;
                margin-bottom: 5px;
                .about-link{
                    text-decoration: none;
                    color: @blue;
                    font-weight: 400;
                }
            }
        }
    }

/*
 * --------------------------------------------------------------------------------------------------
 * CONTACTO
 * --------------------------------------------------------------------------------------------------
*/
    .contact-container{
        width: 80%;
        height: auto;
        display: inline-block;
        float: left;
        //background-color: brown;
        margin-left: 10%;
        margin-top: 200px;
        margin-bottom: 100px;
        .montserrat;
        .contact-info{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: burlywood;
            padding-bottom: 80px;
            border-bottom: 2px solid @blue;
            .contact-txt{
                width: 50%;
                height: auto;
                display: inline-block;
                float: left;
                //background-color: coral;
                margin: 0px;
            }
            .tlf-mail-container{
                width: 50%;
                height: auto;
                display: inline-block;
                float: left;
                //background-color: aquamarine;
                .contact-mail{
                    width: 100%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    //background-color: blueviolet;
                    margin: 0px;
                    margin-bottom: 30px;
                    text-decoration: none;
                    color: @blue;
                    &:hover{
                        text-decoration: underline;
                    }
                }
                .contact-tlf{
                    width: 100%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    //ackground-color: chocolate;
                    margin: 0px;
                }
            }
        }
        .contact-social{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            padding-top: 50px;
            //background-color: blanchedalmond;
            .contact-txt{
                width: 50%;
                height: auto;
                display: inline-block;
                float: left;
                //background-color: coral;
                margin: 0px;
                font-size: 15px;
                font-weight: 400;
                line-height: 25px;
            }
            .contact-social-list{
                width: 50%;
                height: auto;
                display: inline-block;
                float: left;
                //background-color: azure;
                margin: 0px;
                padding-bottom: 100px;
                .contact-social-item{
                    width: 100%;
                    height: auto;
                    display: inline-block;
                    float: left;
                    //background-color: blanchedalmond;
                    list-style: none;
                    margin-left: -10%;
                    margin-bottom: 15px;
                    .contact-social-link{
                        text-decoration: none;
                        color: @blue;
                        //margin-bottom: 25px;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * POLITICA DE COOKIES:
 * --------------------------------------------------------------------------------------------------
*/
    
    .cookies-info{
        width: 80%;
        height: auto;
        margin-left: 2%;
        margin-right: 18%;
        display: inline-block;
        //background-color: red;
        margin-top: 100px;
        .montserrat;
        .cookies-ttl{
            font-size: 45px;
            font-weight: 700;
            color: @blue;
        }
        .cookies-txt{
            font-size: 15px;
            line-height: 25px;
            font-weight: 400;
            
        }
        .cookies-subttl{
            color: @blue;
        }
        .cookies-del{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: pink;
            margin-top: 0px;
            .cookies-del-item{
                list-style: none;
                padding: 5px;
                .cookies-del-link{
                    text-decoration: none;
                    color: @blue;
                    transition: 250ms ease;
                    &:hover{
                        opacity: .5;
                        transition: 250ms ease;
                    }
                }
            }
        }
    }
    
/*
 * --------------------------------------------------------------------------------------------------
 * EASTER EGG
 * --------------------------------------------------------------------------------------------------
*/
    .egg-container{
        width: 100%;
        height: auto;
        display: inline-block;
        float: left;
        //background-color: red;
        margin:135px 0px 50px 0px;
        .egg-ttl{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            .montserrat;
            font-size: 25px;
            font-weight: 600;
            color: @blue;
        }
        .egg-img-container{
            width: 75%;
            height: auto;
            display: inline-block;
            float: left;
            margin-left: 7.5%;
            .egg-gif{
                width: 100%;
                height: auto;
                display: inline-block;
                float: left;
                max-width: 1500px;
            }
        }
    }
    
/*-----------------------------------------------------------------------------------------*/
    .footer{
        width: 100%;
        height: auto;
        display: inline-block;
        float: left;
        //margin-left: -5%;
        //background-color: pink;
        //padding-bottom: 25px;
        .montserrat;
        .credits{
            width: 35%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: yellow;
            font-size: 11px;
            font-weight: 500;
            color: @blue;
        }
        .social-nav{
            width: 15%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: orange;
            list-style: none;
            margin-top: 8px;
            .social-item{
                width: 100%;
                display: inline-block;
                float: left;
                //background-color: red;
                text-align: left;
                margin-bottom: 5px;
                /*&:first-child{
                    margin-left: -5%;
                }*/
                &:last-child{
                    visibility: hidden;
                }
                .social-link{
                    text-decoration: none;
                    color: @blue;
                    font-size: 12px;
                    span{
                        border-bottom: 1px solid @blue;
                        //transition: 250ms ease;
                        //padding-bottom: 4px;
                    }
                }
                &:hover{
                    span{
                        border-bottom: 0px;
                        //transition: 250ms ease;
                    }
                }
            }
        }
        .footer-contact{
            width: 25%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: purple;
            font-size: 12px;
            color: @blue;
            .footer-contact-tlf{
                margin-bottom: 7px;
            }
            .footer-contact-mail{
                text-decoration: none;
                color: @blue;
            }
        }
        .otros-footer{
            width: 25%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: green;
            text-align: center;
            text-align: right;
            .colofon-link{
                text-decoration: none;
                color: @blue;
                font-size: 12px;
            }
        }
    }
    .sobre-mi-container{
        font-size: 50px;
    }
}
/*
 * --------------------------------------------------------------------------------------------------
 * MEDIA QUERIES
 * --------------------------------------------------------------------------------------------------
*/

/*@media screen and (width: 1920px) , screen and (height: 1080px){
}*/

@media only screen and (max-width: 1280px),
only screen and (max-device-width: 1280px){
    
    #wrapper{
        .projects-grid{
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                .project-link{
                    .project-info{
                        .project-ttl{
                            margin-top: 100px;
                            //font-weight: 600;
                            //font-size: 26px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 145px;
                            //font-weight: 400;
                            //font-size: 15px;
                            //font-style: italic;
                        }
                    }
                }
            }
        }
/*------------------------------------------------------------------------*/
    }
}

@media only screen and (max-width: 1180px),
only screen and (max-device-width: 1180px){
    
    #wrapper{
        .projects-grid{
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                .project-link{
                    .project-info{
                        .project-ttl{
                            margin-top: 100px;
                            //font-weight: 600;
                            font-size: 24px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 135px;
                            //font-weight: 400;
                            font-size: 13px;
                            //font-style: italic;
                        }
                    }
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
        width: 90%;
        //height: auto;
        //display: inline-block;
        //float: left;
        margin-left: 5%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        /*.about-img-container{
            width: 50%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: pink;
            .iago-img{
                width: 60%;
                height: auto;
                display: inline-block;
                float: left;
                margin-left: 20%;
                max-width: 475px;
                border-radius: 500px;
                margin-top: 50px;
            }*/
        }
        /*.about-info{
            width: 50%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: greenyellow;
            .about-ttl{
                width: 100%;
                height: auto;
                display: inline-block;
                float: left;
                font-size: 12px;
                color: @blue;
            }
            .about-txt{
                width: 85%;
                height: auto;
                display: inline-block;
                float: left;
                margin-right: 15%;
                font-size: 14px;
                font-weight: 400;
                line-height: 23px;
                margin-bottom: 10px;
                .about-link{
                    text-decoration: none;
                    color: @blue;
                    font-weight: 400;
                }
            }
        }
    }*/
/*------------------------------------------------------------------------*/
    }
}


@media only screen and (max-width: 1100px),
only screen and (max-device-width: 1100px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                width: 48%;
                margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -12px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  position: fixed;
                  top: 7%;
                  right: 10%;
                  height: 27px;
                  width: 35px;
                  cursor: pointer;
                  z-index: 100;
                  transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    opacity: .7;
                  }
                  &.active {
                    .top {
                      transform: translateY(11px) translateX(0) rotate(45deg);
                      background: #fff;
                    }
                    .middle {
                      opacity: 0;
                      background: #fff;
                    }
                    .bottom {
                      transform: translateY(-11px) translateX(0) rotate(-45deg);
                      background: #fff;
                    }
                  }

                  span {
                      background:@blue;
                      border: none;
                      height: 5px;
                      width: 100%;
                      position: absolute;
                      top: 0;
                      left: 0;
                      transition:  all .35s ease;
                      cursor: pointer;

                        &:nth-of-type(2) {
                          top: 11px;
                        }

                        &:nth-of-type(3) {
                          top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                position: fixed;
                background:@blue;
                top: 0;
                left: 0;
                width: 100%;
                height: 0%;
                opacity: 0;
                visibility: hidden;
                transition: opacity .35s, visibility .35s, height .35s;
                overflow: hidden;                    
                &.open {
                    opacity: .9;
                    visibility: visible;
                    height: 100%;
                    width: 100%;
                    .main-menu-item {
                        animation: fadeInRight .5s ease forwards;
                        animation-delay: .35s;
                        &:nth-of-type(2) {
                            animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    position: relative;
                    height: 70%;
                    top: 50%;
                    transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    font-weight: 400;
                    text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        list-style: none;
                        padding: 0;
                        margin: 0 auto;
                        display: inline-block;
                        position: relative;
                        height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            text-align: center;
                            display: block;
                            //height: 25%;
                            height: calc(100% / 4);
                            min-height: 50px;
                            position: relative;
                            opacity: 0;
                            width: 100%;
                            &:first-child{
                                margin-left: 0%;
                            }
                            .main-menu-link{
                                .montserrat;
                                text-decoration: none;
                                font-size: 35px;
                                color: @blue;
                                font-weight: 500;
                                display: block;
                                position: relative;
                                color: #fff;
                                letter-spacing: 3px;
                                //text-decoration: none;
                                overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     border-bottom: 0px solid @blue;
                                     opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 30px;
                //.volkorn;
                //font-style: italic;
                //width: 60%;
                //margin-left: 20%;
                //line-height: 42px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 32.66%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: dimgrey;
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 75%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 80px;
                            //font-weight: 600;
                            font-size: 22px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 120px;
                            //font-weight: 400;
                            font-size: 13px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 1%;
                //margin-right: 1%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 66.33%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 1%;
                //width: 66.33%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        .lateral-nav{
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                margin-right: -10px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                //width: 70%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: 15%;
                //background-color: aquamarine;
                //margin-bottom: 50px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    //font-size: 39px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    //width: 80%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 25px;
                    //margin-right: 20%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    //width: 48%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 23px;
                    //margin-bottom: 50px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //margin-bottom: 90px;
                }
                .project-medium-image{
                    //width: 49.5%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                       //margin-right: 1%;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
            }
        }
        .responsive-arrows{
            //display: none;
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 25px;
            //.montserrat;
            .credits{
                width: 40%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                width: 10%;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
    @keyframes fadeInRight {
      0% {
        opacity: 0;
        left: 20%;
      }
      100% {
        opacity: 1;
        left: 0;
      }
    }
}


@media only screen and (max-width: 1000px),
only screen and (max-device-width: 1000px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 48%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -12px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 5%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 30px;
                //.volkorn;
                //font-style: italic;
                width: 70%;
                margin-left: 15%;
                //line-height: 42px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                width: 49%;
                margin-right: 1%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: dimgrey;
                //margin-bottom: 1%;
                max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    padding-bottom: 65%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 100px;
                            //font-weight: 600;
                            font-size: 22px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 140px;
                            //font-weight: 400;
                            font-size: 13px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                margin-left: 0%;
                margin-right: 0%;
            }
            .project-rectangle-left{
                margin-right: 1%;
                width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                    .project-cover{
                        width: 190%;
                        height: auto;
                        margin-left: -25%;
                    }
                }
            }
            .project-rectangle-right{
                margin-left: 0%;
                width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                    .project-cover{
                        width: 190%;
                        height: auto;
                        margin-right: -25%;
                    }
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        .lateral-nav{
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                margin-right: 0px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                width: 80%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-left: 10%;
                //background-color: aquamarine;
                //margin-bottom: 50px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    //font-size: 39px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 25px;
                    margin-right: 0%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    //width: 48%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 23px;
                    //margin-bottom: 50px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //margin-bottom: 90px;
                }
                .project-medium-image{
                    //width: 49.5%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                       //margin-right: 1%;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
            }
        }
        .responsive-arrows{
            //display: none;
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
        width: 100%;
        //height: auto;
        //display: inline-block;
        //float: left;
        margin-left: 0%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        /*.about-img-container{
            width: 50%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: pink;
            .iago-img{
                width: 60%;
                height: auto;
                display: inline-block;
                float: left;
                margin-left: 20%;
                max-width: 475px;
                border-radius: 500px;
                margin-top: 50px;
            }*/
        }
        /*.about-info{
            width: 50%;
            height: auto;
            display: inline-block;
            float: left;
            //background-color: greenyellow;
            .about-ttl{
                width: 100%;
                height: auto;
                display: inline-block;
                float: left;
                font-size: 12px;
                color: @blue;
            }
            .about-txt{
                width: 85%;
                height: auto;
                display: inline-block;
                float: left;
                margin-right: 15%;
                font-size: 14px;
                font-weight: 400;
                line-height: 23px;
                margin-bottom: 10px;
                .about-link{
                    text-decoration: none;
                    color: @blue;
                    font-weight: 400;
                }
            }
        }
    }*/
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 25px;
            //.montserrat;
            .credits{
                width: 40%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                width: 10%;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 850px),
only screen and (max-device-width: 850px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 48%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -12px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 5%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                font-size: 27px;
                //.volkorn;
                //font-style: italic;
                //width: 70%;
                //margin-left: 15%;
                line-height: 40px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 49%;
                //margin-right: 1%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: dimgrey;
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 65%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 85px;
                            //font-weight: 600;
                            //font-size: 22px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 120px;
                            //font-weight: 400;
                            //font-size: 13px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        .lateral-nav{
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                margin-left: -20px;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                margin-right: 0px;
                margin-left: -5px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                width: 80%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-left: 10%;
                //background-color: aquamarine;
                //margin-bottom: 50px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    //font-size: 39px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 25px;
                    margin-right: 0%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    //width: 48%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 23px;
                    //margin-bottom: 50px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //margin-bottom: 90px;
                }
                .project-medium-image{
                    //width: 49.5%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                       //margin-right: 1%;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
            }
        }
        .responsive-arrows{
            //display: none;
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
       // width: 100%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //margin-left: 0%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        .about-img-container{
            width: 45%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //text-align: center;
            //background-color: pink;
            .iago-img{
                width: 75%;
                //height: auto;
               // display: inline-block;
               // float: left;
                margin-left: 7.5%;
                //max-width: 475px;
               // border-radius: 500px;
               // margin-top: 50px;
            }
        }
        .about-info{
            width: 55%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: greenyellow;
            .about-ttl{
               //// width: 100%;
                height: auto;
                //display: inline-block;
                //float: left;
                //ont-size: 12px;
                //color: @blue;
            }
            .about-txt{
                width: 90%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-right: 10%;
                //font-size: 14px;
                //font-weight: 400;
                //line-height: 23px;
                //margin-bottom: 10px;
                .about-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-weight: 400;
                }
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * CONTACTO
 * --------------------------------------------------------------------------------------------------
*/
    .contact-container{
        //width: 80%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: brown;
       // margin-left: 10%;
        //margin-top: 200px;
        margin-bottom: 50px;
        //.montserrat;
        .contact-info{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: burlywood;
            //padding-bottom: 80px;
            //border-bottom: 2px solid @blue;
            .contact-txt{
                //width: 50%;
                //height: auto;
               // display: inline-block;
                //float: left;
                //background-color: coral;
                //margin: 0px;
            }
            .tlf-mail-container{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: aquamarine;
                .contact-mail{
                   // width: 100%;
                   // height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: blueviolet;
                    //margin: 0px;
                    //margin-bottom: 30px;
                    //text-decoration: none;
                   // color: @blue;
                    &:hover{
                       // text-decoration: underline;
                    }
                }
                .contact-tlf{
                    //width: 100%;
                    //height: auto;
                   // display: inline-block;
                   // float: left;
                    //ackground-color: chocolate;
                    //margin: 0px;
                }
            }
        }
        .contact-social{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //padding-top: 50px;
            //background-color: blanchedalmond;
            .contact-txt{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin: 0px;
                //font-size: 15px;
                //font-weight: 400;
                //line-height: 25px;
            }
            .contact-social-list{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: azure;
                //margin: 0px;
                //padding-bottom: 100px;
                .contact-social-item{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                   //float: left;
                    //background-color: blanchedalmond;
                    //list-style: none;
                    //margin-left: -10%;
                    //margin-bottom: 15px;
                    .contact-social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //margin-bottom: 25px;
                        &:hover{
                            //text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 25px;
            //.montserrat;
            .credits{
                width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                width: 75%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                margin-top: -12px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 5%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                font-size: 25px;
                //.volkorn;
                //font-style: italic;
                width: 80%;
                margin-left: 10%;
                line-height: 37px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 49%;
                //margin-right: 1%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: dimgrey;
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 65%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 80px;
                            //font-weight: 600;
                            font-size: 20px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 110px;
                            //font-weight: 400;
                            font-size: 13px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        overflow: hidden;
        .lateral-nav{
            display: none;
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                //margin-left: -20px;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                //margin-right: 0px;
                //margin-left: -5px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                width: 80%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-left: 10%;
                //background-color: aquamarine;
                //margin-bottom: 50px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    //font-size: 39px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 25px;
                    margin-right: 0%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 23px;
                    margin-bottom: 20px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    margin-bottom: 60px;
                }
                .project-medium-image{
                    width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                    margin-right: 0%;
                        margin-bottom: 20px;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
                //margin-bottom: -50px;
                //padding-bottom: -50px;
            }
        }
        .responsive-arrows{
            width: 90%;
            height: auto;
            //background-color: red;
            display: inline-block;
            margin-left: 5%;
            //margin-top: -75px;
            margin-bottom: 50px;
            .icon-arrow-left, .icon-arrow-right{
                width: 49.5%;
                height: auto;
                float: left;
                text-align: center;
                //background-color: pink;
                display: inline-block;
                padding-top: 15px;
                padding-bottom: 15px;
                border:2px solid @blue;
                text-decoration: none;
                color: @blue;
                font-size: 18px;
                transition: 250ms ease;
                &:hover{
                    background-color: @blue;
                    color: #fff;
                    transition: 250ms ease;
                }
                span{
                    display: none;
                }
            }
            .icon-arrow-left{
                margin-right: 1%;
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * CONTACTO
 * --------------------------------------------------------------------------------------------------
*/
    .contact-container{
        width: 90%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: brown;
        margin-left: 5%;
        margin-top: 225px;
        //margin-bottom: 50px;
        //.montserrat;
        .contact-info{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: burlywood;
            //padding-bottom: 80px;
            //border-bottom: 2px solid @blue;
            .contact-txt{
                //width: 50%;
                //height: auto;
               // display: inline-block;
                //float: left;
                //background-color: coral;
                //margin: 0px;
            }
            .tlf-mail-container{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: aquamarine;
                .contact-mail{
                   // width: 100%;
                   // height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: blueviolet;
                    //margin: 0px;
                    //margin-bottom: 30px;
                    //text-decoration: none;
                   // color: @blue;
                    &:hover{
                       // text-decoration: underline;
                    }
                }
                .contact-tlf{
                    //width: 100%;
                    //height: auto;
                   // display: inline-block;
                   // float: left;
                    //ackground-color: chocolate;
                    //margin: 0px;
                }
            }
        }
        .contact-social{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //padding-top: 50px;
            //background-color: blanchedalmond;
            .contact-txt{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin: 0px;
                //font-size: 15px;
                //font-weight: 400;
                //line-height: 25px;
            }
            .contact-social-list{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: azure;
                //margin: 0px;
                //padding-bottom: 100px;
                .contact-social-item{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                   //float: left;
                    //background-color: blanchedalmond;
                    //list-style: none;
                    //margin-left: -10%;
                    //margin-bottom: 15px;
                    .contact-social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //margin-bottom: 25px;
                        &:hover{
                            //text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 25px;
            //.montserrat;
            .credits{
                width: 55%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                width: 20%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                width: 25%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}


@media only screen and (max-width: 700px),
only screen and (max-device-width: 700px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 48%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 5%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                width: 85%;
                margin-left: 7.5%;
                line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                width: 100%;
                margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: dimgrey;
                //margin-bottom: 1%;
                max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    padding-bottom: 48%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 105px;
                            //font-weight: 600;
                            font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 145px;
                            //font-weight: 400;
                            font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * POLITICA DE COOKIES:
 * --------------------------------------------------------------------------------------------------
*/
    
    .cookies-info{
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
        .montserrat;
    }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
       // width: 100%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //margin-left: 0%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        .about-img-container{
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //text-align: center;
            //background-color: pink;
            .iago-img{
                width: 100%;
                //height: auto;
               // display: inline-block;
               // float: left;
                margin-left: 0%;
                //max-width: 475px;
               // border-radius: 500px;
               margin-top: 30px;
                margin-bottom: 25px;
            }
        }
        .about-info{
            width: 80%;
            margin-left: 11%;
            margin-right: 9%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: greenyellow;
            .about-ttl{
               //// width: 100%;
                height: auto;
                //display: inline-block;
                //float: left;
                //ont-size: 12px;
                //color: @blue;
            }
            .about-txt{
                width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-right: 0%;
                //font-size: 14px;
                //font-weight: 400;
                //line-height: 23px;
                //margin-bottom: 10px;
                .about-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-weight: 400;
                }
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        .lateral-nav{
            //display: none;
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                //margin-left: -20px;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                //margin-right: 0px;
                //margin-left: -5px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                //width: 90%;
                //height: auto;
                //display: inline-block;
                //float: left;
               //margin-left: 5%;
                //background-color: aquamarine;
                //margin-bottom: 40px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    //font-size: 39px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 25px;
                    //margin-right: 0%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 23px;
                    //margin-bottom: 20px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    width: 200%;
                    margin-left: -50%;
                    //margin-bottom: 0px;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //margin-bottom: 40px;
                }
                .project-medium-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                    //margin-right: 0%;
                        //margin-bottom: 20px;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
                //margin-bottom: -50px;
                //padding-bottom: -50px;
                .project-large-image{
                    width: 200%;
                    margin-left: -50%;
                    //margin-bottom: 0px;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //margin-bottom: 40px;
                }
            }
        }
        .responsive-arrows{
            //width: 90%;
            //height: auto;
            //background-color: red;
            //display: inline-block;
            //margin-left: 5%;
            //margin-top: -75px;
            //margin-bottom: 50px;
            .icon-arrow-left, .icon-arrow-right{
                //width: 49.5%;
                //height: auto;
                //float: left;
                //text-align: center;
                //background-color: pink;
                //display: inline-block;
                //padding-top: 15px;
                //padding-bottom: 15px;
                //border:2px solid @blue;
                //text-decoration: none;
                //color: @blue;
                //font-size: 18px;
                //transition: 250ms ease;
                &:hover{
                    //background-color: @blue;
                    //color: #fff;
                    //transition: 250ms ease;
                }
                span{
                    //display: none;
                }
            }
            .icon-arrow-left{
                //margin-right: 1%;
            }
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            padding-bottom: 60px;
            //.montserrat;
            .credits{
                width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                width: 50%;
                text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 600px),
only screen and (max-device-width: 600px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 48%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                margin-top: -10px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 5%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                width: 90%;
                margin-left: 10%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 48%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 90px;
                            //font-weight: 600;
                            font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 130px;
                            //font-weight: 400;
                            font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 550px),
only screen and (max-device-width: 550px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    //font-size: 29px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                width: 90%;
                margin-left: 7%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 48%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 85px;
                            //font-weight: 600;
                            font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 120px;
                            //font-weight: 400;
                            font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 500px),
only screen and (max-device-width: 500px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    font-size: 28px;
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    font-size: 27px;
                    margin-top: 18px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                margin-top: 11px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            padding-top: 135px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                //width: 85%;
                //margin-left: 7.5%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                overflow: hidden;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    padding-bottom: 70%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 110px;
                            //font-weight: 600;
                            //font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 145px;
                            //font-weight: 400;
                            //font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
       // width: 100%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //margin-left: 0%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        .about-img-container{
            width: 60%;
            margin-left: 20%;
            margin-right: 20%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //text-align: center;
            //background-color: pink;
            .iago-img{
                //width: 100%;
                //height: auto;
               // display: inline-block;
               // float: left;
                //margin-left: 0%;
                //max-width: 475px;
               // border-radius: 500px;
               margin-top: 25px;
                //margin-bottom: 25px;
            }
        }
        .about-info{
            width: 85%;
            margin-left: 8.5%;
            margin-right: 6.5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: greenyellow;
            .about-ttl{
               //// width: 100%;
               //height: auto;
                //display: inline-block;
                //float: left;
                //ont-size: 12px;
                //color: @blue;
            }
            .about-txt{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-right: 0%;
                //font-size: 14px;
                //font-weight: 400;
                //line-height: 23px;
                //margin-bottom: 10px;
                .about-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-weight: 400;
                }
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * CONTACTO
 * --------------------------------------------------------------------------------------------------
*/
    .contact-container{
        width: 80%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: brown;
        margin-left: 10%;
        margin-top: 180px;
        margin-bottom: 20px;
        //.montserrat;
        .contact-info{
            width: 100%;
            //margin-left: 10%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: burlywood;
            //padding-bottom: 80px;
            //border-bottom: 2px solid @blue;
            .contact-txt{
                width: 100%;
                margin-bottom: 25px;
                //height: auto;
               // display: inline-block;
                //float: left;
                //background-color: coral;
                //margin: 0px;
            }
            .tlf-mail-container{
                width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: aquamarine;
                .contact-mail{
                   // width: 100%;
                   // height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: blueviolet;
                    //margin: 0px;
                    //margin-bottom: 30px;
                    //text-decoration: none;
                   // color: @blue;
                    &:hover{
                       // text-decoration: underline;
                    }
                }
                .contact-tlf{
                    //width: 100%;
                    //height: auto;
                   // display: inline-block;
                   // float: left;
                    //ackground-color: chocolate;
                    //margin: 0px;
                }
            }
        }
        .contact-social{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //padding-top: 50px;
            //background-color: blanchedalmond;
            .contact-txt{
                width: 100%;
                margin-bottom: 25px;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin: 0px;
                //font-size: 15px;
                //font-weight: 400;
                //line-height: 25px;
            }
            .contact-social-list{
               // width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: azure;
                //margin: 0px;
                //padding-bottom: 100px;
                .contact-social-item{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                   //float: left;
                    //background-color: blanchedalmond;
                    //list-style: none;
                    //margin-left: -10%;
                    //margin-bottom: 15px;
                    .contact-social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //margin-bottom: 25px;
                        &:hover{
                            //text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 450px),
only screen and (max-device-width: 450px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    font-size: 26px;
                    //margin-top: 20px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    font-size: 27px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            #home-saludo{
                font-size: 28px;
                //margin-top: 14px;
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  //top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 5px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                //width: 85%;
                //margin-left: 7.5%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 48%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            //margin-top: 85px;
                            //font-weight: 600;
                            //font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            //margin-top: 120px;
                            //font-weight: 400;
                            //font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                    .project-cover{
                        width: 230%;
                        height: auto;
                        margin-left: -35%;
                    }
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                    .project-cover{
                        width: 230%;
                        height: auto;
                        margin-right: -35%;
                    }
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        .lateral-nav{
            display: none;
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                //margin-left: -20px;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                //margin-right: 0px;
                //margin-left: -5px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                width: 90%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-left: 5%;
                //background-color: aquamarine;
                margin-bottom: 40px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    //font-size: 39px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 25px;
                    //margin-right: 0%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    //line-height: 23px;
                    //margin-bottom: 20px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    margin-bottom: 40px;
                }
                .project-medium-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                    //margin-right: 0%;
                        //margin-bottom: 20px;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
                //margin-bottom: -50px;
                //padding-bottom: -50px;
            }
        }
        .responsive-arrows{
            //width: 90%;
            //height: auto;
            //background-color: red;
            //display: inline-block;
            //margin-left: 5%;
            //margin-top: -75px;
            //margin-bottom: 50px;
            .icon-arrow-left, .icon-arrow-right{
                //width: 49.5%;
                //height: auto;
                //float: left;
                //text-align: center;
                //background-color: pink;
                //display: inline-block;
                //padding-top: 15px;
                //padding-bottom: 15px;
                //border:2px solid @blue;
                //text-decoration: none;
                //color: @blue;
                //font-size: 18px;
                //transition: 250ms ease;
                &:hover{
                    //background-color: @blue;
                    //color: #fff;
                    //transition: 250ms ease;
                }
                span{
                    //display: none;
                }
            }
            .icon-arrow-left{
                //margin-right: 1%;
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
       // width: 100%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //margin-left: 0%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        .about-img-container{
            //width: 60%;
            //margin-left: 20%;
            //margin-right: 20%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //text-align: center;
            //background-color: pink;
            .iago-img{
                //width: 100%;
                //height: auto;
               // display: inline-block;
               // float: left;
                //margin-left: 0%;
                //max-width: 475px;
               // border-radius: 500px;
               margin-top: 10px;
                margin-bottom: 15px;
            }
        }
        .about-info{
            //width: 85%;
            //margin-left: 8.5%;
           // margin-right: 6.5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: greenyellow;
            .about-ttl{
               //// width: 100%;
               //height: auto;
                //display: inline-block;
                //float: left;
                //ont-size: 12px;
                //color: @blue;
            }
            .about-txt{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-right: 0%;
                //font-size: 14px;
                //font-weight: 400;
                //line-height: 23px;
                //margin-bottom: 10px;
                .about-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-weight: 400;
                }
            }
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 400px),
only screen and (max-device-width: 400px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    font-size: 23px;
                    //margin-top: 20px;
                }
                /*#home-saludo{
                    font-size: 28px;
                    margin-top: 14px;
                }*/
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    font-size: 24px;
                    margin-top: 15px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            #home-saludo{
                //font-size: 28px;
                margin-top: 14px;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      height: 4px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            padding-top: 135px;
            margin-bottom: 55px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                //width: 85%;
                margin-left: 8%;
                line-height: 34px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    padding-bottom: 75%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 100px;
                            //font-weight: 600;
                            //font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 140px;
                            //font-weight: 400;
                            //font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        width: 110%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                        margin-left: -5%;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                    .project-cover{
                        width: 220%;
                        margin-left: -50%;
                    }
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                    .project-cover{
                        width: 220%;
                        margin-right: -50%;
                    }
                }
            }
        }
/*
 * --------------------------------------------------------------------------------------------------
 * PROYECTS
 * --------------------------------------------------------------------------------------------------
*/
    .sections-project-container{
        //width: 116%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //background-color: cadetblue;
        //margin-left: -8%;
        //margin-top: 180px;
        .lateral-nav{
            //display: none;
            //width: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //position: fixed;
            //text-align: center;
            //z-index: 2;
            .lateral-nav-link{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //margin-top: 15vh;
                //background-color: red;
                //padding-top: 100px;
                //padding-bottom: 100px;
                //.montserrat;
                //text-decoration: none;
                //color: @blue;
                //font-weight: 500;
                //font-size: 15px;
                //cursor: url("../img/arrow-left-icon.png"), auto;
                //margin-right: -21%;
                //transition: 250ms ease;
                //margin-left: -20px;
                &:hover{
                    //opacity: .6;
                    //transition: 250ms ease;
                }
                .lateral-nav-link-span{
                    //display: inline-block;
                    //float: left;
                    //transform: rotate(90deg);
                }
                #lateral-right{
                    //transform: rotate(90deg);
                    //margin-left: 7px;
                }
                #lateral-left{
                    //transform: rotate(-90deg);
                    //margin-left: 7px;
                }
            }
            #lateral-nav-link-right{
                //margin-right: 0px;
                //margin-left: -5px;
                //cursor: url("../img/arrow-right-icon.png"), auto;
            }
        }
        /*#video{
            width: 100%;
            height: auto;
            display: inline-block;
            float: left;
            background-color: brown;
        }*/
        /*.video-responsive{
            width: 70%;
            height: auto;
            display: inline-block;
            float: left;
            text-align: center;
            //background-color: red;
            margin-left: 15%;
			position: relative;
			height: 0;
			overflow: hidden;
			padding-bottom: 56.2%;
			margin-bottom: -50px;
            margin-top: -50px;
			iframe{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}*/
        .project-information{
            //width: 86%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: beige;
            //margin-left: 7%;
            //.montserrat;
            .text-information{
                width: 90%;
                //height: auto;
                //display: inline-block;
                //float: left;
                margin-left: 5%;
                //background-color: aquamarine;
                margin-bottom: 40px;
                .project-info-ttl{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //margin: 0px;
                    //.montserrat;
                    //color: @blue;
                    font-size: 34px;
                    //margin-bottom: 35px;
                    //font-weight: bold;
                }
                .project-text-1col{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //font-size: 15px;
                    //font-weight: 400px;
                    line-height: 22px;
                    //margin-right: 0%;
                    //background-color: burlywood;
                }
                .project-text-2col{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    //background-color: orangered;
                    //font-size: 15px;
                    //font-weight: 400px;
                    line-height: 22px;
                    //margin-bottom: 20px;
                    &:first-child{
                        //margin-right: 4%;
                    }
                }
            }
            .image-container{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: coral;
                //margin-bottom: 50px;
                .project-large-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    margin-bottom: 40px;
                }
                .project-medium-image{
                    //width: 100%;
                    //height: auto;
                    //display: inline-block;
                    //float: left;
                    &:first-child{
                    //margin-right: 0%;
                        //margin-bottom: 20px;
                    }
                }
            }
            .image-large-container{
                //width: 118%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-left: -9%;
                //z-index: 200;
                //margin-bottom: -50px;
                //padding-bottom: -50px;
            }
        }
        .responsive-arrows{
            width: 90%;
            height: auto;
            //background-color: red;
            display: inline-block;
            margin-left: 5%;
            //margin-top: -75px;
            margin-bottom: 50px;
            .icon-arrow-left, .icon-arrow-right{
                width: 49.5%;
                height: auto;
                float: left;
                text-align: center;
                //background-color: pink;
                display: inline-block;
                padding-top: 15px;
                padding-bottom: 15px;
                border:2px solid @blue;
                text-decoration: none;
                color: @blue;
                font-size: 18px;
                transition: 250ms ease;
                &:hover{
                    background-color: @blue;
                    color: #fff;
                    transition: 250ms ease;
                }
                span{
                    display: none;
                }
            }
            .icon-arrow-left{
                margin-right: 1%;
            }
        }
    }
/*
 * --------------------------------------------------------------------------------------------------
 * SOBRE MI
 * --------------------------------------------------------------------------------------------------
*/
    .about-container{
        //background-color: red;
       // width: 100%;
        //height: auto;
        //display: inline-block;
        //float: left;
        //margin-left: 0%;
        //.montserrat;
        //margin-top: 130px;
        //margin-bottom: 100px;
        .about-img-container{
            width: 70%;
            margin-left: 15%;
            margin-right: 15%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //text-align: center;
            //background-color: pink;
            .iago-img{
                //width: 100%;
                //height: auto;
               // display: inline-block;
               // float: left;
                //margin-left: 0%;
                //max-width: 475px;
               // border-radius: 500px;
               margin-top: 0px;
                //margin-bottom: 15px;
            }
        }
        .about-info{
            width: 88%;
            margin-left: 7%;
            margin-right: 5%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //background-color: greenyellow;
            .about-ttl{
               //// width: 100%;
               //height: auto;
                //display: inline-block;
                //float: left;
                //ont-size: 12px;
                //color: @blue;
            }
            .about-txt{
                //width: 100%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //margin-right: 0%;
                //font-size: 14px;
                //font-weight: 400;
                //line-height: 23px;
                //margin-bottom: 10px;
                .about-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-weight: 400;
                }
            }
        }
    }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            padding-bottom: 40px;
            //.montserrat;
            .credits{
                width: 100%;
                text-align: center;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                width: 100%;
                text-align: center;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}


@media only screen and (max-width: 375px),
only screen and (max-device-width: 375px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    font-size: 23px;
                    //margin-top: 20px;
                }
                /*#home-saludo{
                    font-size: 28px;
                    margin-top: 14px;
                }*/
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    font-size: 24px;
                    margin-top: 15px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            #home-saludo{
                //font-size: 28px;
                margin-top: 14px;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      height: 4px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{
                                    font-size: 30px;
                                    letter-spacing: 2px;

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                //width: 85%;
                //margin-left: 7.5%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    padding-bottom: 80%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 100px;
                            //font-weight: 600;
                            //font-size: 25px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 140px;
                            //font-weight: 400;
                            //font-size: 15px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}



@media only screen and (max-width: 350px),
only screen and (max-device-width: 350px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    font-size: 20px;
                    //margin-top: 20px;
                }
                #home-saludo{
                    font-size: 25px;
                    //margin-top: 14px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    font-size: 20px;
                    margin-top: 18px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            #home-saludo{
                //font-size: 28px;
                margin-top: 14px;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 4px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                //width: 85%;
                //margin-left: 7.5%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 48%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 90px;
                            //font-weight: 600;
                            font-size: 22px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 125px;
                            //font-weight: 400;
                            font-size: 14px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}

@media only screen and (max-width: 300px),
only screen and (max-device-width: 300px){
    
    
    #wrapper{
         .header{
            //background-color: red;
            //.clearfix;
            //height: auto;
            //width: 85%;
            //width: 100%;
            //margin-left: 0px;
            //position: fixed;
            //transition: 500ms ease;
            //padding-top: 30px;
            //padding-bottom: 30px;
            //z-index: 5;
            //padding-left: 7.5%;
            //padding-right: 7.5%;
            //margin-left: -7.5%;
            .logo {
                //.montserrat;
                //overflow: hidden;
                //font-size: 2em;
                //width: 80%;
                //margin-left: 2%;
                //float: left;
                //display: inline-block;
                //background-color: green;
                //margin-top: -5px;
                //font-size: 32px;
                //font-weight: 700;
                .saludo,.name {
                    //transition: all .5s ease;
                    //display: inline-block;
                    //will-change: opacity, transform;
                    //color: @blue;
                }
                .saludo {
                    font-size: 18px;
                    //margin-top: 20px;
                }
                #home-saludo{
                    font-size: 25px;
                    //margin-top: 14px;
                }
                .name {
                    //opacity: 0;
                    //position: absolute;
                    //transform: translateY(2em);
                    font-size: 18px;
                    margin-top: 18px;
                }
            }
            /* On scroll */
            .logo.scrolled .saludo {
              //opacity: 0;
              //transform: translateY(-2em);
            }
            .logo.scrolled .name {
                //opacity: 1;
                //transform: translateY(0);
                //margin-top: -3px; 
                //left: 0;
            }
            #home-saludo{
                //font-size: 28px;
                margin-top: 14px;
            }
            .logo.scrolled .prgrf{
                //margin-top: 19px;
                //font-size: 30px;
                //background-color: red;
            }
            /*&.sticky{
                //position: fixed;
                background-color: blue;
                transition: 500ms ease;
                //idth: 80%;
            }*/
         .hamburger-btn{
                  //position: fixed;
                  top: 6%;
                  //right: 10%;
                  //height: 27px;
                  //width: 35px;
                  //cursor: pointer;
                  //z-index: 100;
                  //transition: opacity .25s ease;
                  //background-color: orange;
                  &:hover {
                    //opacity: .7;
                  }
                  &.active {
                    .top {
                      //transform: translateY(11px) translateX(0) rotate(45deg);
                      //background: #fff;
                    }
                    .middle {
                      //opacity: 0;
                      //background: #fff;
                    }
                    .bottom {
                      //transform: translateY(-11px) translateX(0) rotate(-45deg);
                      //background: #fff;
                    }
                  }

                  span {
                      //background:@blue;
                      //border: none;
                      //height: 4px;
                      //width: 100%;
                      //position: absolute;
                      //top: 0;
                      //left: 0;
                      //transition:  all .35s ease;
                      //cursor: pointer;

                        &:nth-of-type(2) {
                          //top: 11px;
                        }

                        &:nth-of-type(3) {
                          //top: 22px;
                        }
                      }
                    }
            .overlay{
                //display: inline-block;
                //float: left;
                //width: 50%;
                //background-color: pink;
                //position: fixed;
                //background:@blue;
                //top: 0;
                //left: 0;
                //width: 100%;
                //height: 0%;
                //opacity: 0;
                //visibility: hidden;
                //transition: opacity .35s, visibility .35s, height .35s;
                //overflow: hidden;                    
                &.open {
                    //opacity: .9;
                    //visibility: visible;
                    //height: 100%;
                    //width: 100%;
                    .main-menu-item {
                        //animation: fadeInRight .5s ease forwards;
                        //animation-delay: .35s;
                        &:nth-of-type(2) {
                            //animation-delay: .4s;
                        }
                        &:nth-of-type(3) {
                            //animation-delay: .45s;
                        }
                        &:nth-of-type(4) {
                            //animation-delay: .50s;
                        }
                    }
                  }
                .overlay-menu{
                    //display: inline-block;
                    //float: left;
                    //width: 100%;
                    //background-color: purple;
                    //position: relative;
                    //height: 70%;
                    //top: 50%;
                    //transform: translateY(-50%);
                    //font-size: 50px;
                    //font-family: 'Vollkorn', serif;
                    //font-weight: 400;
                    //text-align: center;
                    .main-menu{
                        //display: inline-block;
                        //float: left;
                        //width: 100%;
                        //background-color: tomato;
                        //list-style: none;
                        //padding: 0;
                        //margin: 0 auto;
                        //display: inline-block;
                        //position: relative;
                        //height: 100%; 
                        .main-menu-item{
                            //display: inline-block;
                            //list-style: none;
                            //float: left;
                            //height: auto;
                            //width: 25%;
                            //background-color: yellow;
                            //text-align: center;
                            //display: block;
                            //height: 25%;
                            //height: calc(100% / 4);
                            //min-height: 50px;
                            //position: relative;
                            //opacity: 0;
                            //width: 100%;
                            &:first-child{
                                //margin-left: 0%;
                            }
                            .main-menu-link{
                                //.montserrat;
                                //text-decoration: none;
                                //font-size: 35px;
                                //color: @blue;
                                //font-weight: 500;
                                //display: block;
                                //position: relative;
                                //color: #fff;
                                //letter-spacing: 3px;
                                //text-decoration: none;
                                //overflow: hidden;
                                &:hover:after,
                                &:focus:after,
                                &:active:after {
                                    //width: 100%;
                                }
                                /*&:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 50%;
                                    width: 0%;
                                    transform: translateX(-50%);
                                    height: 3px;
                                    background: #fff;
                                    transition: .35s;
                                }*/
                                .main-menu-span{

                                }
                                 &:hover{
                                    //text-decoration: underline;
                                     //border-bottom: 0px solid @blue;
                                     //opacity: .7;
                                }
                            }
                        }
                    }
                }
            }    
        }
        .intro-txt{
            //display: inline-block;
            //float: left;
            //height: auto;
            //width: 100%;
            //padding-top: 150px;
            //margin-bottom: 60px;
            //cursor: url("../img/face-icon.png"), auto;
            //color: @blue;
            //background-color: purple;
            .txt-happy{  
                //font-size: 25px;
                //.volkorn;
                //font-style: italic;
                //width: 85%;
                //margin-left: 7.5%;
                //line-height: 35px;
                //background-color: aquamarine;
            }
        }
        .projects-grid{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-bottom: 30px;
            //background-color: darkgrey;
            .project-square, .project-square-middle, .project-rectangle-left, .project-rectangle-right, .project-rectangle-vert{
                //width: 100%;
                //margin-right: 0%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: rgba(0,0,0,2);
                //margin-bottom: 1%;
                //max-height: 280px;
                .project-link{
                    //position: relative;
                    //display: block;
                    //width: 100%;
                    //height: 0;
                    //padding-bottom: 48%;
                    //overflow: hidden;
                    .project-info{
                        //position: absolute;
                        //height: 100%;
                        //width: 100%;
                        //opacity: 0;
                        //margin-left: -500px;
                        .project-ttl, .project-tag{
                            //font-size: 25px;
                            //color: #fff;
                            //position: absolute;
                            //width: 100%;
                            //height: auto;
                            //text-align: center;
                            //.montserrat;
                        }
                        .project-ttl{
                            margin-top: 70px;
                            //font-weight: 600;
                            font-size: 20px;
                            //letter-spacing: 1px;
                        }
                        .project-tag{
                            margin-top: 101px;
                            //font-weight: 400;
                            font-size: 14px;
                            //font-style: italic;
                        }
                    }
                    .project-cover{
                        //width: 100%;
                        //height: auto;
                        //max-height: 280px;
                        //min-width: 600px;
                    }
                }
                &:hover{
                    .project-info{
                        //margin-left: 0px;
                        //display: block;
                        //background-color:rgba(0, 51, 204, 0.7);
                        //opacity: .99;
                        //-webkit-transition:ease-in-out 150ms;
                        //-moz-transition:ease-in-out 150ms;
                        //-o-transition:ease-in-out 150ms;
                        //transition:ease-in-out 150ms;
                    }
                }
            }
            .project-square-middle{
                //background-color: red;
                //margin-left: 0%;
                //margin-right: 0%;
            }
            .project-rectangle-left{
                //margin-right: 1%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
            .project-rectangle-right{
                //margin-left: 0%;
                //width: 49%;
                .project-link{
                    //padding-bottom: 36.9%;
                }
            }
        }
/*-----------------------------------------------------------------------------------------*/
        .footer{
            //width: 100%;
            //height: auto;
            //display: inline-block;
            //float: left;
            //margin-left: -5%;
            //background-color: pink;
            //padding-bottom: 60px;
            //.montserrat;
            .credits{
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: yellow;
                //font-size: 11px;
                //font-weight: 500;
                //color: @blue;
            }
            .social-nav{
                //display: none;
                //width: 50%;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: orange;
                //list-style: none;
                //margin-top: 8px;
                .social-item{
                    //width: 100%;
                    //display: inline-block;
                    //float: left;
                    //background-color: red;
                    //text-align: left;
                    //margin-bottom: 5px;
                    /*&:first-child{
                        margin-left: -5%;
                    }*/
                    .social-link{
                        //text-decoration: none;
                        //color: @blue;
                        //font-size: 12px;
                        span{
                            //border-bottom: 1px solid @blue;
                            //transition: 250ms ease;
                            //padding-bottom: 4px;
                        }
                    }
                    &:hover{
                        span{
                            //border-bottom: 0px;
                            //transition: 250ms ease;
                        }
                    }
                }
            }
            .footer-contact{
                //display: none;
                //width: 50%;
                //text-align: right;
                //height: auto;
                //display: inline-block;
                //float: left;
                //background-color: purple;
                //font-size: 12px;
                //color: @blue;
                .footer-contact-tlf{
                    //margin-bottom: 7px;
                }
                .footer-contact-mail{
                    //text-decoration: none;
                    //color: @blue;
                }
            }
            .otros-footer{
                //width: 10%;
                //display: none;
                //height: auto;
                //isplay: inline-block;
                //float: left;
                //background-color: green;
                //text-align: center;
                //text-align: right;
                .colofon-link{
                    //text-decoration: none;
                    //color: @blue;
                    //font-size: 12px;
                }
            }
        }
    }
}





/*
 * Truqui Nexus 7
 * Ajusta a su resolucion real
 * --------------------------------------------------------------------------------------------------
*/

/*
@media only screen and (min-device-width: 320px)
  and(max-device-width: 480px)
  and(orientation:landscape){

}
*/