.ClipInicial {
    position:relative;
    width:100%;
    line-height:0;
}

.ClipVariables {
    position:absolute;
    top:33%;
    left:13%;
    z-index:1;
}

.titulo {
    height:130px;
    margin-left:-2px;
    margin-bottom:50px;
}

.ClipVariables h3 {
    /*font-family:'montserratextrabold', Arial, Helvetica, sans-serif;*/
    font-size:35px;
    color:#FFF;
    margin:-40px 0 30px;
}

.ClipDatos {
    display:inline-block;
    width:100%;
    margin-top:18px;
    padding-bottom:10px;
}

.ClipVariables p {
    font-family:'montserratregular', Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:23px;
    color:#0F2032;
    margin-top:2px;
}

.ClipVariables p span {
    font-family:'montserratextrabold', Arial, Helvetica, sans-serif;
}

.ClipPortada.beige {
    height:900px;
    text-align:center;
    padding:0;
    margin-top:-140px;
    -webkit-clip-path:polygon(0 15%, 0 100%, 100% 100%, 100% 0);
    clip-path:polygon(0 15%, 0 100%, 100% 100%, 100% 0);
    overflow:hidden;
    z-index:2;
}

.logo-gr {
    width:400px;
}

.bg-pack-dog {
    position:relative;
    width:100%;
}

.pack-violeta {
    position:absolute;
    width:100%;
    top:6%;
    left:2%;
    z-index:3;
}

.pack-violeta.mobile {
    display:none;
}

.bg-packs-bottom {
    position:relative;
    margin-top:-210px;
    -webkit-clip-path:polygon(0 15%, 0 100%, 100% 100%, 100% 0);
    clip-path:polygon(0 15%, 0 100%, 100% 100%, 100% 0);
    z-index:4;
}

.packs-bottom {
    position:absolute;
    width:33%;
    top:15%;
    left:0;
    right:0;
    margin:auto;
    z-index:1;
}


/*/// Queries ///*/

@media screen and (max-width:1490px) {
    .ClipVariables { top:30%; left:7%; }
    .titulo { height:110px; }
	.ClipPortada.beige { height:800px; }
	.logo-gr { width:380px; }
    .bg-pack-dog .thumb.desktop { width:130%; }
	.pack-violeta { top:16%; }
    .bg-packs-bottom .thumb.desktop { width:120%; }
    .packs-bottom { top:13%; width:41%; }
}

@media screen and (max-width:1270px) {
    .ClipVariables { top:27%; left:6%; }
    .titulo { height:80px; }
    .ClipVariables h3 { font-size:28px; margin:-40px 0 20px; }
    .ClipVariables p { font-size:15px; line-height:22px; color:#FFF; margin-top:1px; }
    .ClipPortada.beige { height:680px; }
    .logo-gr { width:340px; }
    .bg-pack-dog .thumb.desktop { width:140%; }
    .pack-violeta { top:14%; left:-30px; width:103%; }
}

@media screen and (max-width:1023px) {
    .ClipInicial .thumb.desktop { display:none; }
    .ClipInicial .thumb.mobile { display:inline-block; }
    .ClipInicial { margin-top:-100px; }
    .ClipVariables { top:initial; left:40px; bottom:300px; }
    .titulo { height:70px; }
    .ClipVariables h3 { font-size:25px; }
    .ClipPortada.beige { height:800px; margin-top:-160px; }
    .logo-gr { width:270px; }
    .bg-pack-dog .thumb.desktop { width:150%; }
    .pack-violeta { top:15%; left:-22px; }
}

@media screen and (max-width:767px) {
    .ClipVariables { bottom:220px; }
    .logo-gr { width:250px; }
    .bg-pack-dog .thumb.desktop { width:170%; }
    .pack-violeta { top:15%; }
}

@media screen and (max-width:639px) {
    .ClipInicial { margin-top:-20px; }
    .titulo { height:60px; }
    .ClipVariables { left:25px; bottom:100px; }
    .ClipVariables h3 { font-size:23px; margin:-40px 0 20px; }
    .ClipDatos { padding-right:40px; }
    .ClipVariables p { font-size:14px; line-height:22px; margin-top:0; }
    .ClipPortada.beige { height:650px; margin-top:-90px; -webkit-clip-path:polygon(0 10%, 0 100%, 100% 100%, 100% 0); clip-path:polygon(0 10%, 0 100%, 100% 100%, 100% 0); }
    .logo-gr { width:200px; }
    .bg-pack-violeta .thumb.desktop { display:none; }
    .bg-pack-violeta .thumb.mobile { display:inline-block; }
    .pack-violeta.desktop { display:none; }
    .pack-violeta.mobile { display:inline-block; }
    .bg-packs-bottom { margin-top:-100px; }
    .pack-violeta { top:17%; left:initial; right:6px; width:100%; }
    .bg-pack-dog .thumb.desktop, .bg-packs-bottom .thumb.desktop { display:none; }
    .bg-pack-dog .thumb.mobile, .bg-packs-bottom .thumb.mobile { display:inline-block; }
    .bg-pack-dog .thumb.mobile { width:110%; }
    .packs-bottom { width:57%; top:16%; }
}

@media screen and (max-width:390px) {
    .titulo { height:57px; }
    .logo-gr { width:180px; }
}

@media screen and (max-width:359px) {
    .titulo { height:50px; }
    .ClipVariables { left:20px; }
	.ClipVariables p { font-size:13px; line-height:21px; }
    .ClipPortada.beige { height:570px; }
    .logo-gr { width:160px; }
}