@media only screen and (max-width: 768px){

    *{
        margin: 0;
        padding: 0;
    }

    body{
        background: #000 !important;
    }
    body.index{
        background: #fff !important;
    }

    body{
        cursor:pointer;
    }

    .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
    }

    .panel #stone-img{
        max-width: 35%;
    }

    .panel1 #pedre-img{
        max-width: 25%;
    }
    .panel1 #ubicacion{
        max-width: 80%;
        margin: auto;
    }
    .panel1 #ubicacion-2{
        max-width: 80%;
        margin: auto;
    }
    .panel1 #ubicacion-3{
        max-width: 80%;
        margin: auto;
    }

    .panel2 #maqueta-1{
        max-width: 100%;
        margin: auto;
    }

    .panel2 #maqueta-2{
        max-width: 100%;
        margin: auto;
    }

    .panel2 #maqueta-3{
        max-width: 80%;
        margin: auto;
    }

    .panel1 #maqueta-4{
        max-width: 90%;
        margin: auto;
    }

    .panel2 #maqueta-5{
        max-width: 85%;
        margin: auto;
    }

    .panel2 #maqueta-6{
        max-width: 85%;
        margin: auto;
    }

    .panel1 #maqueta-7{
        max-width: 90%;
        margin: auto;
    }

    .panel1 #maqueta-8{
        max-width: 90%;
        margin: auto;
    }
    .panel1 #maqueta-9{
        max-width: 85%;
        margin: auto;
    }
    .panel1 #maqueta-10{
        max-width: 90%;
        margin: auto;
    }
    .panel2 #maqueta-11{
        max-width: 85%;
        margin: auto;
    }

    .panel1 .tipologia{
        max-width: 90%;
        margin: auto;
    }
    .panel1 .tipologia-2{
        max-width: 100%;
        margin: auto;
    }

    .panel1 .render{
        max-width: 90%;
        margin: auto;
    }

    .panel1 .logo{
        max-width: 100%;
        margin: auto;
    }

    .collapse.in {
        overflow: hidden;
    }
    .navbar-collapse{
        position: absolute;
        width: 100%;
        top: 0% !important;
        left:-100%;
        height: 100vh !important;
    }
    .nav-item nav-link{
        line-height: 150%;
    }
    .navbar-collapse.collapse.show{
        background-color: rgba(0,0,0,1);
        left: 0;
        transition: left 0.5s ease-in-out !important;
        width: 50%;
        height: 100vh !important;
    }
    .navbar-collapse.collapsing{
        background-color: rgba(0,0,0,1);
        height: 100vh !important;
        left:-100%;
        transition: unset;
        position: absolute;
        top: 0% !important;
    }

    .nav-item.nav-link{
        color:rgba(255,255,255,0.5) !important;
    }

    .nav-item.nav-link.active{
        color:rgba(255,255,255,1) !important;
    }



    .stone-container{
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 50%;
        text-align: center;

    }
    #stone-img{
        cursor: pointer;
        width: 50%;

    }
    .navbar-nav{
        margin: auto;
    }
    .nav-link{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-family: 'Open Sans',antenna-condensed,sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    nav{
        display: block;
        margin: auto;
        width: 50%;
        text-align: center;
        padding: 20px 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: transparent !important;
    }
    nav span{
        width: 24%;
        display: inline-block;
    }
    nav span a{
        text-decoration: none;
        text-transform: uppercase;
        font-family: sans-serif;
        font-size: 13px;
        color: black;
    }
    nav span a:hover{
        color:#bfbfbf;
    }
    .video-container{
        width: 100%;
        margin: auto;
        position: absolute;
        left: 0;
    }
    .video{
        width: 100%;
        z-index: 0;
    }
    .video-js{
        height: 100%;
        background-color: transparent !important;
    }
    .imagen{
        padding-top: 17%;
        cursor: pointer;
    }
    .imagen-c{
        padding-top: 17%;
        cursor: pointer;
    }
    .imagen-1-m{
        flex: 0 0 25% !important;
        margin-top: 22%;
        padding-top: 29%;
        margin-left: 24% !important;
    }

    .imagen-2-m{
        margin: 0;
        margin-top: 22%;
        flex: 0 0 25% !important;
        margin-left: 7% !important;
        padding-top: 30%;
    }
    .imagen-3-m{
        margin-top: 5%;
        transform: rotate(1deg);
        flex: 0 0 25%!important;
        margin-left: 24% !important;
        padding-top: 30%;
    }
    .imagen-4-m{
        flex: 0 0 25% !important;
        margin: 0;
        margin-top: -29%;
        margin-left: 55% !important;
        margin-bottom: -1%;
        padding-top: 30%;
        transform: rotate(2deg);
    }
    .imagen-5-m{
        margin-bottom: 1%;
        flex: 0 0 25% !important;
        margin-left: 39% !important;
        margin-top: 9%;
        padding-top: 31%;
        transform: rotate(2deg);
    }
    .imagen-1{
        width: 0%;
        padding-left: 3%;
        padding-right: 16%;
        transform: rotate(0.5deg);
        margin-left: 24% !important;
        margin-top: 19%;
        padding-top: 30%;
        flex: 0 0 25% !important;
    }
    .imagen-2{
        margin-top: 19%;
        padding-right: 18%;
        margin-left: 6%;
        flex: 0 0 25% !important;
        padding-top: 31%;
        transform: rotate(1deg);
    }
    .imagen-3{
        margin-top: 2%;
        flex: 0 0 25% !important;
        margin-left: 24%;
        padding-top: 31%;
        transform: rotate(1.5deg);
    }
    .imagen-4{
        margin-top: 3%;
        margin-left: 5% !important;
        flex: 0 0 25% !important;
        padding-top: 30%;
        transform: rotate(1deg);
    }
    .imagen-5{
        width: 0%;
        padding-left: 3%;
        margin-bottom: 4%;
        flex: 0 0 25% !important;
        margin-left: 24%;
        margin-top: 2%;
        padding-top: 30%;
        transform: rotate(1deg);
    }
    .imagen-6{
        margin-top: 2%;
        flex: 0 0 25% !important;
        margin-left: 4%;
        padding-top: 34%;
        margin-bottom: 0%;
        transform: rotate(2.5deg);
    }
    .imagen-7{
        margin-top: -1%;
        transform: rotate(0.8deg);
        margin-bottom: 7%;
        flex: 0 0 25% !important;
        margin-left: 25%;
        padding-top: 30%;

    }
    .imagen-8{
        margin-top: 1%;
        transform: rotate(1.5deg);
        margin-bottom: 5%;
        flex: 0 0 25%!important;
        margin-left: 2%;
        padding-top: 30%;
    }
    .container{
        position: absolute;
        max-width: unset !important;
        padding: 10% !important;
        z-index: 1;
        margin-top: 15%;
    }

    .fullscreen-container{
        width: 100%;
        position: absolute;
        left: 0;
        height: 100%;
        padding-top: 5%;
        background-color: rgba(0,0,0,0.5);
        text-align: center;
        display: none;
        z-index: 2;
    }
    .img-fullscreen{
        width: auto;
        height: auto;
        max-width: 60%;
        max-height: 80%;
        z-index: 3;
    }

    .container-contacto{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 50%;
        z-index: 1;
    }
    .tarjeta-contacto-1{
        position: absolute;
        width: 25%;
        height: 12%;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 21.5%;
        padding: 12% 12.3%;
        transform: rotate(2.5deg);
        margin-left: 37.5%;
        cursor: pointer;
    }
    .tarjeta-contacto-2{
        position: absolute;
        width: 14%;
        height: 6%;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 45.5%;
        padding: 0% 13.3% 0%;
        transform: rotate(3deg);
        margin-left: 35.5%;
        cursor: pointer;
    }
    .tarjeta-contacto-3{
        position: absolute;
        width: 12%;
        height: 3%;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 43%;
        padding: 0% 13.3% 0%;
        transform: rotate(3deg);
        margin-left: 36.5%;
        cursor: pointer;
    }
    .container-ubicacion{
        position: absolute;
        width: 65%;
        margin: auto;
        left: 0;
        right: 0;
        margin-top: 9%;
        z-index: 1;
    }
    .tarjeta-ubicacion{
        padding: 10.1% 9%;
        left: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        width: 18%;
        cursor: pointer;
        position: absolute;
        transform: rotate(-3.5deg);
        margin-left: 13%;
        margin-top: 51%;
        padding-top: 38%;
        padding-right: 17%;
    }
    .pin-ubicacion{
        padding: 2.6%;
        left: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        width: 0%;
        position: absolute;
        border-radius: 50%;
        height: 20px;
        cursor: pointer;
        transform: rotate(-1deg);
        margin-top: 57%;
        margin-left: 52%;
    }

    .navbar-toggler{
        border:none !important;
        outline: 0 !important;
        color: white;
    }
    .navbar.navbar-expand-lg{
        width: 100%;
        position: absolute;
        background-color: transparent !important;
    }

    video { width: 100%; }
    video source { width: 100%; height: auto; }
}

@media only screen and (min-width: 769px){

    *{
        margin: 0;
        padding: 0;
    }
    svg path{
        stroke:#ffffff00;
    }
    g text{
        cursor: default;
    }
    g text tspan{
        cursor: default;
    }

    body{
        background: #000 !important;
    }
    body.index{
        background: #fff !important;
    }

    .stone-container{
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 250px;

    }
    #stone-img{
        width: 250px;

    }
    .navbar-nav{
        margin: auto;
    }
    .nav-link{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-family: 'Open Sans', antenna-condensed, sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #b7b5b5 !important;
    }
    .nav-link.active{
        color: #FFF !important;
    }
    nav{
        display: block;
        margin: auto;
        width: 50%;
        text-align: center;
        padding: 20px 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: transparent !important;
    }
    nav span{
        width: 24%;
        display: inline-block;
    }
    nav span a{
        text-decoration: none;
        text-transform: uppercase;
        font-family: sans-serif;
        font-size: 13px;
        color: black;
    }
    nav span a:hover{
        color:#bfbfbf;
    }

    .panel1 #pedre-img{
        max-width: 10%;
    }
    .panel1 #ubicacion{
        max-width: 55%;
        margin: auto;
    }
    .panel1 #ubicacion-2{
        max-width: 55%;
        margin: auto;
    }
    .panel1 #ubicacion-3{
        max-width: 55%;
        margin: auto;
    }

    .panel2 #maqueta-1{
        max-width: 90%;
        margin: auto;
    }

    .panel2 #maqueta-2{
        max-width: 100%;
        margin: auto;
    }

    .panel2 #maqueta-3{
        max-width: 80%;
        margin: auto;
    }

    .panel1 #maqueta-4{
        max-width: 55%;
        margin: auto;
    }

    .panel2 #maqueta-5{
        max-width: 80%;
        margin: auto;
    }

    .panel2 #maqueta-6{
        max-width: 80%;
        margin: auto;
    }

    .panel1 #maqueta-7{
        max-width: 55%;
        margin: auto;
    }

    .panel1 #maqueta-8{
        max-width: 55%;
        margin: auto;
    }
    .panel1 #maqueta-9{
         max-width: 80%;
         margin: auto;
     }
    .panel1 #maqueta-10{
        max-width: 55%;
        margin: auto;
    }
    .panel2 #maqueta-11{
        max-width: 80%;
        margin: auto;
    }

    .panel1 .tipologia{
        max-width: 55%;
        margin: auto;
    }
    .panel1 .tipologia-2{
        max-width: 100%;
        margin: auto;
    }

    .panel1 .render{
        max-width: 55%;
        margin: auto;
    }

    .panel1 .logo{
        max-width: 55%;
        margin: auto;
    }

    .video-container{
        width: 100%;
        margin: auto;
        position: absolute;
        left: 0;
    }
    .video{
        width: 100%;
        z-index: 0;
    }
    .video-js{
        height: 100%;
    }
    .imagen{
        padding-top: 17%;
        flex: 0 0 14.5% !important;
        max-width: unset !important;
        cursor: pointer;
    }
    .imagen-c{
        padding-top: 17%;
        flex: 0 0 14.5% !important;
        max-width: unset !important;
        cursor: pointer;
    }
    .imagen-1-m{
        width: 0%;
        padding-left: 13.5% !important;
        margin-left: 21%;
        margin-top: 4%;
        transform: rotate(2.5deg);
        margin-right: 1%;
    }

    .imagen-2-m{
        margin-top: 3.5%;
        margin-left: 4%;
        margin-right: 2%;
        transform: rotate(2deg);
        padding-top: 18%;
        margin-bottom: 1%;
    }
    .imagen-3-m{
        margin-top: 5%;
        transform: rotate(3deg);
        margin-left: 3.5%;
    }
    .imagen-4-m{
        margin-left: 29%;
        margin-top: 4%;
        margin-bottom: 1%;
        padding-top: 18%;
        transform: rotate(2deg);
    }
    .imagen-5-m{
        width: 0%;
        padding-left: 3%;
        margin-left: 5.5%;
        margin-top: 4%;
        padding-top: 19%;
        margin-bottom: 1%;
        transform: rotate(2.5deg);
    }
    .imagen-1{
        width: 0%;
        padding-left: 3%;
        margin-left: 17%;
        margin-top: 0%;
        margin-bottom: 4%;
        transform: rotate(2.5deg);
    }
    .imagen-2{
        margin-top: 0%;
        margin-left: 3.5%;
        margin-right: 0%;
        transform: rotate(1deg);
        margin-bottom: 3.5%;
    }
    .imagen-3{
        margin-top: 1%;
        transform: rotate(1.8deg);
        margin-left: 4%;
        margin-bottom: 3%;
    }
    .imagen-4{
        margin-top: 2%;
        transform: rotate(2.5deg);
        margin-left: 4.5%;
        margin-bottom: 1.5%;
    }
    .imagen-5{
        width: 0%;
        padding-left: 3%;
        margin-bottom: 4%;
        margin-left: 17%;
        margin-top: 1%;
        transform: rotate(1.7deg);
    }
    .imagen-6{
        margin-top: 1%;
        margin-left: 3%;
        margin-right: 4%;
        margin-bottom: 5%;
        padding-bottom: 1%;
        transform: rotate(2deg);
    }
    .imagen-7{
        margin-top: 1%;
        transform: rotate(1.8deg);
        margin-bottom: 5%;
        padding-bottom: 1%;

    }
    .imagen-8{
        margin-top: 2%;
        transform: rotate(2.5deg);
        margin-left: 4.5%;
        margin-bottom: 5%;
        padding-bottom: 1%;
    }
    .container{
        position: absolute;
        max-width: unset !important;
        padding: 10% !important;
        z-index: 1;
    }

    .fullscreen-container{
        width: 100%;
        position: absolute;
        left: 0;
        height: 100%;
        padding-top: 5%;
        background-color: rgba(0,0,0,0.5);
        text-align: center;
        display: none;
        z-index: 2;
    }
    .img-fullscreen{
        width: auto;
        height: auto;
        max-width: 60%;
        max-height: 80%;
        z-index: 3;
    }

    .container-contacto{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
    }
    .tarjeta-contacto-1{
        position: absolute;
        width: 12%;
        height: 100px;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 17.5%;
        padding: 6% 7.3%;
        transform: rotate(2deg);
        margin-left: 41.5%;
        cursor: pointer;
    }
    .tarjeta-contacto-2{
        position: absolute;
        width: 12%;
        height: 12%;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 31.5%;
        padding: 0% 7.3% 0%;
        transform: rotate(2deg);
        margin-left: 41.5%;
        cursor: pointer;
    }
    .tarjeta-contacto-3{
        position: absolute;
        width: 12%;
        height: 5%;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 30%;
        padding: 0% 7.3% 0%;
        transform: rotate(2deg);
        margin-left: 41.5%;
        cursor: pointer;
    }
    .container-ubicacion{
        position: absolute;
        width: 65%;
        margin: auto;
        left: 0;
        right: 0;
        margin-top: 9%;
        z-index: 2;
    }
    .tarjeta-ubicacion{
        left: 0;
        right: 0;
        transform: rotate(-7.5deg);
        box-sizing: border-box;
        width: 12%;
        cursor: pointer;
        position: absolute;
        margin-top: 14%;
        margin-left: 38.5%;
        padding-top: 22%;
        padding-right: 1%;
    }
    .pin-ubicacion{
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 16%;
        transform: rotate(-7.5deg);
        margin-left: 51.8%;
        box-sizing: border-box;
        width: 0%;
        position: absolute;
        border-radius: 50%;
        height: 30px;
        cursor: pointer;
        padding: 1.5%;
    }

    .navbar-toggler{
        border:none !important;
        outline: 0 !important;
    }
    .navbar.navbar-expand-lg{
        width: 100%;
        position: absolute;
        background: transparent !important;
    }
    .ubicacion.navbar.navbar-expand-lg{
        width: 100%;
        position: relative;
        background-color: transparent !important;
    }

    video { width: 100%; }
    video source { width: 100%; height: auto; }
}