// 
@font-face {
    font-family: 'roboto_medium_regular';
    src: url('../webfonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../webfonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_light';
    src: url('../webfonts/robotocondensed-light-webfont.woff2') format('woff2'),
         url('../webfonts/robotocondensed-light-webfont.woff') format('woff'),
         url('../webfonts/robotocondensed-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_regular';
    src: url('../webfonts/robotocondensed-regular-webfont.woff2') format('woff2'),
         url('../webfonts/robotocondensed-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
font-family: 'milk_bold';
font-style: normal;
src: url('../webfonts/Milk_Bold.woff') format('woff'),
     url('../webfonts/Milk_Bold.ttf') format('truetype');
}

@font-face {
font-family: 'Acherus_Grotesque_Regular';
font-style: normal;
font-weight: normal;
src: url('../webfonts/acherus_grotesque_regular.woff') format('woff');
}

@font-face {
font-family: 'poppins';
src: url("../webfonts/poppins-regular-webfont.eot");
src: url("../webfonts/poppins-regular-webfont.eot?#iefix") format("embedded-opentype"), 
     url("../webfonts/poppins-regular-webfont.woff2") format("woff2"), 
     url("../webfonts/poppins-regular-webfont.woff") format("woff"), 
     url("../webfonts/poppins-regular-webfont.ttf") format("truetype"), 
     url("../webfonts/poppins-regular-webfont.svg#poppinsregular") format("svg");
font-weight: normal;
font-style: normal; 
}

@font-face {
font-family: 'FontesqueB';
font-style: normal;
font-weight: normal;
src: url('../webfonts/FontesqueSans-Bold.woff') format('woff'),
     url('../webfonts/FontesqueSans-Bold.ttf') format('truetype');
}
    
    
:root{
	/*--color-three: #0366D6;*/
	--form-color: #14111A;
    --border-color: #D8D8D8;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
}

.platillo {
    font-size: 3.8vw;
    font-family: milk_bold;
    color: #000;
    line-height: 1em;
    padding: 0 4px; 
    text-align: center; 
    overflow-wrap: break-word;
}

.nota {
    font-size: 1.8vw;
    color: #000;
    line-height: 2em;
    padding: 0 4px; 
    text-align: center; 
    overflow-wrap: break-word;
}

.opcional{
    font-family: milk_bold;
    font-size: 2.6vw;
    line-height: 0.95em;
    overflow-wrap: break-word;
}

.elemento{
    font-size: 2.6vw;
    line-height: 0.95em;
    overflow-wrap: break-word;
}

.container {
    width: 100%;
    height: 100%; 
    transform: scale(1); 
    transform-origin: top left;
    overflow: hidden; 
}

@media screen and (max-width: 1920px) {
    .container {
        transform: scale(calc(100vw / 1920));
    }
    .platillo {
        font-size: 3.8vw;
        font-family: milk_bold;
        color: #000;
        line-height: 1em;
        padding: 0 4px; 
        text-align: center; 
        overflow-wrap: break-word; /* Ajuste de palabras largas */}
        
    .elemento{
        font-size: 2.6vw;
        line-height: 0.95em;
        overflow-wrap: break-word;
    }
    span{
        font-size: 1vw;
    }
}

@media screen and (max-height: 1080px) {
    .container {
        transform: scale(calc(100vh / 1080));
    }
    .platillo {
        font-size: 3.8vw; 
        color: #000;
        line-height: 1em;
        padding: 0 4px; 
        text-align: center; 
        overflow-wrap: break-word; /* Ajuste de palabras largas */}
        
    .elemento{
        font-size: 2.6vw;
        line-height: 0.95em;
        overflow-wrap: break-word;
    }
    span{
        font-size: 1vw;
    }
}

.menu-column {
    flex: 1;
    padding: 4px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.full-box{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
}

main {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}

.menu-container {
    display: flex;
    justify-content: space-between;
    gap: 0px;
}

span{
    letter-spacing: 0.25em;
    word-spacing: 0.25em;
    color: #287233;
    line-height: 2em;
}

.subtitle{
    font-family: poppins;
	font-size: 2.8vw;
	color: #1e213d;
}

.colacion{
    font-size: 2vw;
    letter-spacing: 1pt;
    color: #1e213d;
}

.title{
    letter-spacing: 0.5em;
	color: #287233;
	font-size:1.5vw;
	font-weight: 800;
    line-height: 0.8em;
    text-shadow: #287233 0.1em 0.1em 0.2em; ----------*/
}

.anuncio{
    font-family: FontesqueB;
    font-size: 1.8vw;
    color: #32313b;
    line-height: 1em;
}

.page-content{
	position: relative;
	padding-right: 0px;
	transition: all .2s ease-in-out;
	padding-top: 0px;
    justify-content: center;
}

/*----------  Page 404 styles  ----------*/
.container-404{
	background: #000428;
	background: linear-gradient(to right, #004e92, #000428);
	color: #fff;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*----------  Page layout Styles  ----------*/
.main-container{
	height: 88%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.navbar-footer{
	height: 12%;
	border: none;
	/*background-color: rgba(0, 0, 0, 0.5);*/
}
.navbar-footer-reloj{
    width: 33%;
    position: absolute;
    top: 0;
    left: 0;
}

.navbar-footer-eventos{
    width: 67%;
    position: absolute;
    top: 0;
    right: 0;
    
}

/*----------  Reloj  ----------*/
p {
    margin: 0;
    padding: 0;
}
#clock {
    font-family: 'Share Tech Mono', monospace;
    color: #32313b;
    text-align: center;
}
    
.time {
    letter-spacing: 0.05em;
    font-size: 2.75vw;
    padding: 0px 0;
}
.date {
    letter-spacing: 0.1em;
    font-size: 1.2vw;
}
.text {
    letter-spacing: 0.1em;
    font-size: 1.2vw;
    padding: 0.75em 0 0;
}

/*----------  Text Styles  ----------*/
.poppins-regular{
    font-family: 'poppins';
}
.archerus-regular{
    font-family: 'Acherus_Grotesque_Regular';
}
.niconne-regular{
    font-family: 'Niconne';
    font-weight: bolder;
    font-size: 3vw;
}
.cinzel-regular{
	font-family: 'Cinzel-Regular';
}

.cinzel-bold{
	font-family: 'Cinzel-Bold';
}

.cinzeldeco-regular{
	font-family: 'Cinzel_Decorative_Regular';
}

.cinzeldeco-bold{
	font-family: 'Cinzel_Decorative_Bold';
}

.cinzeldeco-black{
	font-family: 'Cinzel_Decorative_Black';
}

.corinthia-regular{
	font-family: 'corinthia_regular';
    font-weight: bolder;
    font-size: 3vw;
}

.dejavu-regular{
	font-family: 'dejavu_sans';
}

.roboto-medium{
	font-family: 'roboto_medium_regular';
}

.roboto-condensed-light{
	font-family: 'roboto_condensed_light';
}

.roboto-condensed-regular{
	font-family: 'roboto_condensed_regular';
}

.milk-bold{
    font-family: 'milk_bold';
}