@font-face {
  font-family: AmaticSC;
  src: url(/fonts/AmaticSC-Regular.ttf);
}

body {
    margin-left: auto;
    margin-right: auto;
    max-width: 1920px;
    width: 100%;
    background-color: rgba(255,255,255,0.8);
    font-family: 'helvetica-neue', helvetica, sans-serif;
    overflow-x: hidden;
}

.mobile-only{
    display: none;
}
.desktop-only{
    display: block;
}
.portada img{
    width: 75%;
    margin: 0 auto 0 auto;
    display: block;
}

.framed{
    border-radius: 25px;
    box-shadow: 0 10px 15px rgba(100,100,100,0.6);
}

.portfolio{
    margin-top: 5%;
    text-align: center;
    margin-left: 1%;
    margin-right: 1%;
}
.portfolio figure{
    position: relative;
    float: left;
    overflow: hidden;
    width: 29%;
    margin: 2.015%;
    vertical-align: middle;
    /*border: 1px solid black;*/
}

figure img{
    transform: scale(1.05);
    width: 100%;
}

.portfolio figure > figcaption{
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.3);
    text-align: center;
    bottom: 0;
    left: 5%;
    width: 80%;
    height: auto;
    vertical-align: middle;
    padding: 5%;
    margin: 0;
    border-radius: 16px;
    color: white;
    font-weight: 100;
    font-size: 14px; 
}
.portfolio figure:hover > figcaption{
    display: block;
}

figure.twobytwo img{
    transform: scale(1.1);
    width: 100%;
}
.portfolio figure.twobytwo{
    width: 58%;
    padding: 2.15% 2.01%;
    margin: 1.93% 2% 2.2% 2%;
}
.portfolio figure.twobytwo.right{
    margin-right: 2.2%;
    margin-bottom: 2.5%;
}
.portfolio figure.twobytwo.left{
    margin-bottom: 2%;
}
.portfolio figure.onebytwo{
    width: 29%;
    padding: 1.91% 0;
}
.portfolio figure.onebytwo img{
    transform: scale(1.09);
}
.portfolio figure.threebyone{
    width: 87%;
    padding: 0 4%;
}

.portfolio figure.threebyone > figcaption{
   padding: 2%;
}

figure.left{
        float: left;
    }
figure.right{
        float: right;
    }


/*
.portfolio img:active {
    margin: auto;
    display: block; /* Hidden by default */
    /*position: fixed; /* Stay in place */
    /*z-index: 1; /* Sit on top *//*
    left: 0;
    top: 0;
    max-height: 90%;
    max-width: 50%;
    width: auto;
    padding: 3% 25% 10% 25%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
}*/

@media (max-width: 950px){
    body{
        overflow-x: hidden;
        margin: 0;
         width: 100%;
    }
        .banner {
    top: 17%;
}
    .mobile-only{
        display: none;
    }
    .desktop-only{
        display: block;
    }
    .portada img{
        width: 96%;
       
    }
    .portfolio{
        margin-top: 10%;
    }
    

}
@media (max-width: 640px){
    body{
        overflow-x: hidden;
        width: 100%;
        margin: 0;
        background-color: white;
    }

    .mobile-only{
        display: block;
    }
    .desktop-only{
        display: none;
    }
    .portfolio{
        margin: 20 auto 0 auto;
        display: block;
        overflow: hidden;
        width: 99%;
    }
    
    .framed{
        border-radius: 25px;
        box-shadow: 0 6px 16px rgba(100,100,100,0.6);
    }
    .portada img{
        width: 99%;
    }
    
    .portfolio figure{
        float: left;
        overflow: hidden;
        width: 43%;
        margin: 2% 3%;
    }
  
    .portfolio figure.twobytwo.right{
        margin: 2% 3%;
    }
    .portfolio figure.twobytwo.left{
       margin: 2% 3%;
       margin-bottom: 2.6%;
    }
    .portfolio figure.twobytwo{
        float: left;
        overflow: hidden;
        width: 43%;
        margin: 2% 3%;
        padding: 0;
    }
    figure.twobytwo img{
        transform: scale(1.05);
        width: 99%;
    }
    .portfolio figure.onebytwo{
        width: 43%;
        float: right;
        padding: 2.7% 0;
    }
    
    .portfolio figure.left{
        float: left;
    }
  

    .portfolio figure.threebyone{
        width: 84.5%;
    }

}