* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

:root{
    --primary-color: #C21726;
    --secondary-color: #E0123F;
    --light-color: #d32506d7;
    --light-secondary-color: #F9EDE4;
    --dark-color: #000;
    --white-color: #fff;

}

@font-face {
    font-family: 'gavency';
    src: url('../fonts/gavency_free_regular-webfont.eot');
    src: url('../fonts/gavency_free_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gavency_free_regular-webfont.woff2') format('woff2'),
         url('../fonts/gavency_free_regular-webfont.woff') format('woff'),
         url('../fonts/gavency_free_regular-webfont.ttf') format('truetype'),
         url('../fonts/gavency_free_regular-webfont.svg#gavency_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'meshed';
    src: url('../fonts/mesheddisplay-regular-webfont.eot');
    src: url('../fonts/mesheddisplay-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mesheddisplay-regular-webfont.woff2') format('woff2'),
         url('../fonts/mesheddisplay-regular-webfont.woff') format('woff'),
         url('../fonts/mesheddisplay-regular-webfont.svg#meshed_displayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    font-family: 'gavency',sans-serif;
}

a {
    text-decoration: none;
}

.flex{
    display: flex;
}

.flex-center{
    display: flex;
    justify-content: center;
}
.flex-left{
    display: flex;
    align-items: flex-start;
}

.flex-right{
    display: flex;
    align-items: flex-end;
}
.flex-column{
    display: flex;
    flex-direction: column;
}

.margen-cero{
    margin: 0px;
}
.wrapper{
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.home{
    /* background-color: var(--primary-color); */
    background-color: var(--light-color);
    background-size: cover;
    /* transition: color 2s ease;
    transition: background 3s ease; */
    /*animation: change-color-anim 10s linear infinite;*/
    
    transition-property: background-color;
    transition-timing-function: ease-in-out;
    transition-duration: 4s;

}

@keyframes change-color-anim {
	0%,100%{
		background-color: var(--primary-color);
	}
	50%{
		background-color: var(--light-color);
	}
}

.home-secondary{
    background-color: var(--light-color);
    /* transition: color 2s ease;
    transition: background 2s ease; */
    transition-property: background-color;
    transition-timing-function: ease-in-out;
    transition-duration: 4s;
}

.content-info__espacio{
    width: 60vw;
    height: 60vh;
    background-color: aqua;
}
.content-info{
    min-width: 30vw;
    min-height: 40vh;
    /* max-width: 30vw;
    max-height: 40vh; */
    flex-direction: column;
    justify-content: center;
}

.content-info__title{
    /* font-size: clamp(1.5em, 7vw, 8em); */
    font-size: clamp(1.5em, calc(1.5rem + ((1vw - 0.2em) * 6.5)), 8em);
    min-height: 0vw;
    font-family: pragmatica-extended, sans-serif;
    letter-spacing: 0.05em;
    line-height: 1em;
    margin: 0;
    /* align-self: center; */
    text-transform: uppercase;
    /* width: 100%;*/
    padding: auto;
    text-overflow: clip;
}

.content-info__title_nb{
    color: var(--dark-color);
    background-color: var(--white-color);
    padding: 0px 10px;
}

.content-info__title_bn{
    color: var(--white-color);
    background-color: var(--dark-color);
    padding: 0px 10px;
}

.width-25{
    width: 25%;
}
.width-50{
    width: 50%;
}

/*
--
-- LOADER INDEX
--
*/
.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

.loader .text-loader{
    position: absolute;
    font-size: clamp(1.5em, calc(1.5rem + ((1vw - 0.2em) * 6.5)), 8em);
    /* color: var(--light-secondary-color); */
    color: var(--dark-color);
    min-height: 0vw;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    /* justify-content: center;*/
    flex-wrap: nowrap;
    /*text-align: center;
    align-self: center; */
}

.loader .text-loader span{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0 10px 0;
    margin: auto;
    background-color:rgb(249, 237, 228);
}

.stripe{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.stripe span{
    --opacidad-negro: 0.6;
    width: 100%;
    height: 100%;
    background-color: var(--dark-color);
    /* background-image: url(../images/telon.jpg); */
    background-image: linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url(../images/telon.jpg);
    background-size: cover;

}