:root {

    --clr-300:white;
    --clr-400:#a9e7f2;
    --clr-700:#ffcad8;
    --clr-900:black;

    --ff-main: 'filson-pro', sans-serif;
    --ff-secondary:'filson-pro', sans-serif;

    --fs-400:1rem;
    --fs-500:1.25rem;
    --fs-600:1.375rem;
    --fs-700:2rem;
}

body {
    margin:0;
    padding:0;
    font-family: var(--ff-main)!important;
    box-sizing: border-box;
    font-weight: 400;
    font-size:1.3125rem;
    position: relative;
}
p {
    font-size:clamp(1rem, 1.25vw, 1.25rem)!important;
}
img {
    width: 100%;
}
a {
    text-decoration: none;
    transition: color 250ms ease-in-out;
}

h1 , h2, h3 ,h4{
    font-family: 'Lexend Zetta', sans-serif;
}
h2 , h4{
    width: min(920px, 80%);
    margin:auto;
    margin-bottom: 25px!important;
}
h2 {
    border-bottom: 6px solid #a9e7f2;
    padding-bottom: 11px;
    text-align:center;
}
nav.navbar {
    background-color:#f5b3d0;
    color: white;
}
nav.navbar ul li a {
    color: white;
}
.navbar-toggler {
    background:#f8f9fa!important;
}
nav.navbar a.navbar-brand img {
    max-height: 50px;
}
.navbar-expand-lg .navbar-collapse {
    justify-content: center;
}
.btn {
    background: #aae8f2;
    color: white;
    min-width: 100px;
}
form .form-row:last-of-type {
    justify-content: center;
}
.dropdown-menu.show {
    background: #f5b3d0!important;
    border: none;
}
/** quienes */
#wero{
    text-align: center;
    margin: 50px 0;
}
#wero img {
    max-width: 200px;
}
/* container */
.container {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    margin-top:50px;
}
.cuerpo {
    text-align: center;
}
ul.redes#desktop {
    display: none;
}
ul.redes {
    list-style: none;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin:0;
    padding:0;
}
ul.redes li {
    width: 35px;
    height: 35px;
    background: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.redes li:first-of-type {
    margin-right: 10px;
}
ul.redes li a {
    color: #f5b3d0!important;
}

/*

.cuerpo p {
    width: min(370px, 86%);
}*/

.productoHome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding:15px;
}
.productoHome a {
    width: 100%;
}
/* detalle Linea */
#detalleLinea {
    background-image: url(/img/textured-paper.png);
}
div#detalleLinea header {
    text-align: center;
    padding: 25px 0;
    background-image: url(/img/trama.svg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    background-size: cover;
    position: relative;
}
div#detalleLinea header img {
    max-width: 480px;
}
#navDetalleLinea {
    position: absolute;
    width: 95%;
    left: 2.5%;
    top: 50%;
}
nav#navDetalleLinea ul {
    list-style:none;
    padding: 0;
    margin:0;
    display: flex;
    justify-content: space-between;
}
nav#navDetalleLinea ul li a {
    font-size: 20pt;
    color:#221e1f ;
}
nav#navDetalleLinea ul li a:hover {
    color:#0080af;
}
ul#albumLinea {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin:0;
}

/* contacto */
#contacto {
    margin: 100px 0;
}
#contacto h2 {
    text-align: center;
}
.form-row {
    display: flex;
    margin-bottom: 20px;
}
.form-row input , textarea {
    width: 100%;
    border:none;
    background: transparent;
    border-bottom: 2px solid #a9e7f2;
}
.formm-row label {
    display: block;
}
/* footer */

footer {
    background-color: #aae8f2;
    color: black;
    padding: 50px 0;
    position: unset;
    width: 100%;
    bottom: 0;
    height: 100vh;
    text-align: center;
    position: relative!important;
}
footer .container {
    height: 100%;
}
footer .row {
    height: 100%;
    align-items: stretch;
}

footer .col-md-4:nth-of-type(2) {
    text-align: center;
}
footer .col-md-4:nth-of-type(2) img {
    max-width: 200px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin:0; 
}
footer ul li {
    margin-bottom:15px;
}
footer img {
    width: auto;
}

footer a {
    color:#212529;
    text-decoration: none;
    transition: color 250ms ease-in-out;
}
footer a:hover {
    color: white;
}

.content-wrap {
    position: absolute;
    width: 100%;
    top: 0px;
    transform: translateY(-50%);
}
.waves {
    position:relative;
    width: 100%;
    height:15vh;
    margin-bottom:-7px; /*Fix for safari gap*/
    min-height:100px;
    max-height:150px;
}
.content:nth-child(2){
transform: rotate(-180deg);
margin-top: 6px;
}

.parallax > use {
animation: move 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}

@keyframes move {
0% {
transform: translate3d(-90px,0,0);
}
100% { 
        transform: translate3d(85px,0,0);
}
}


/* bubbles */

#bubblezSVG {
	position: fixed;
	height: 100%;
	width: 110%;
	top: 0;
	left: -5%;
	overflow: visible;
	z-index: -1;
}

#top {
	z-index: 2;
	pointer-events: none;
}

svg {
	font-size: 35px;
	fill: #313639;
}

section#productosHome {
    padding:50px 0;
}
/*produtos grilla */
section#productosHome  .parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    }
    section#productosHome    
    #div10 { grid-area: 1 / 1 / 2 / 2; }
    section#productosHome 
    #div3 { grid-area: 1 / 2 / 2 / 3; }
    section#productosHome  #div13 { grid-area: 1 / 3 / 3 / 4; }
    section#productosHome #div7 { grid-area: 2 / 1 / 3 / 3; }


.gridbox {
    position: relative;
}
.gridbox img.fondo {
    bottom:0;
    left: 0;
    border-radius: 10px;
    height: 100%;
}
.gridbox img.type {
    width: 100px;
    position: absolute;
}
#div10 img.type {

    left: 0;
    top:25px;
}
#div3 img.type {
    right: 0;
    bottom: 25px;
}
#div13 img.type {
    top:25px;
    left:30px
}
#div7 img.type {
    
    left: 0;
    top:25px;
}

/* grilla gifs*/
section#gifs {
    background-image: url(../img/fondorayas.svg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    padding: 50px 100px;
    margin-bottom:30px;
}

section#gifs .parent {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    section#gifs   
    #div1 { grid-area: 1 / 1 / 2 / 2; }
    section#gifs #div2 { grid-area: 1 / 2 / 2 / 3;
        display: flex;
        align-items: center;
    }
    section#gifs #div3 { grid-area: 1 / 3 / 2 / 4; }

    section#gifs #div2 img {
        height: 50%;
    }
    /*grilla boxes */
    
    section#boxes {
        padding-bottom: 100px;
    }
    
    section#boxes .parent {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 25px;
        grid-row-gap: 0px;
        }
        section#boxes   
        #div4 { grid-area: 1 / 1 / 2 / 2; }
        section#boxes #div5 { grid-area: 1 / 2 / 2 / 3; }
        section#boxes #div6 { grid-area: 1 / 3 / 2 / 4; }
        section#boxes  #div7 { grid-area: 1 / 4 / 2 / 5; }

        section#boxes div img {
            border-radius: 25px;
        }