/*--------------------------------------------------------------------------------------- CONTENT SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- CONTENT SECTION-------------------------------------------------------------------------*/

.banner{
    position:relative;
    /* width:100%; */
    height: 100vh;
    /* background-image:linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.7)),url(img/studio\ de\ tatuaje.jpg);*/
    background-image:url(../img/banner.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    /* min-height: 636px; */ 
    /* padding: 10px 8%; */
    color:var( --primary-color);
}
.banner video{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}

.banner .capa{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #1c1c1d;
    opacity: 0.5;
    mix-blend-mode: overlay; /*oscurece o alclara dependiendo del color del fondo o vdideo*/
}

/*--------------------------------------------------------------------------------------- CONTENT SECTION-------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------- CONTENT SECTION-------------------------------------------------------------------------*/

.banner{
    display:grid;
    gap:1rem;
    align-items: center;
    /* padding: 5rem; */
    text-align: center;
    /* padding:var(--between-section-padding); */
    /* text-wrap: balance; */
    /* margin-top:5.1rem; */
    /* margin-top:-30px; */

}
.banner .content{
    position: relative;
    z-index: 2;
    margin-top: 5rem;
}
/* 
.banner .content p{
    color:var(--primary-color);
    margin-bottom: 2rem;
} */

.banner .content h1{
    color:var(--four-color);
    /* font-size: 25px; */
    font-weight: 900;
    margin-bottom: 1rem;
}

.banner .content h2{
    color:var(--four-color);
    font-size: 15px;
    font-weight: 400;
    width:70%;
    margin: 0 auto;
    margin-bottom: 2rem;
}


.banner .content a{
    text-decoration: none;
    width:80%;
    max-width: 300px;
    padding: 1rem;
    border:0;
    outline: 0;
    border-radius: 5px;
    background:var(--primary-color);
    /* background:var(--text-main-color); */
    
    color:#ffffff;
    font-weight: bold;
    cursor: pointer;
    margin: 2rem auto;
}

.press{
    /* box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset; */
}
.banner .content a:hover{
    background: var(--four-color);
    color:var(--primary-color);

}
@media (min-width:960px){

     .banner .content h1{
        font-size: 45px;
     }

     
     .banner .content h2{
        font-size: 20px;
     }


}