/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    .column > * {
        width: 100%;
        padding: 1rem;
    }

    .boton {
		position: relative;
        max-width: 80%;
        max-height: auto;
		right: 5%;
    }

    .btn-center {
        position: absolute;
        transform: translateY(50%);
    }

    .agave {
        position: absolute;
        opacity: .1;
        left: 8%;
		top: 50%;
        max-width: 90%;
        max-height: auto;
    }

    .candado {
        position: absolute;
        width: 5%;
        top: 0;
        margin-left: calc(93%);
        transform: translateX(-50%);
    }
    
    .titulo-cocktail, .titulo-order, .titulo-about, .titulo-contact {
        text-align: center;
        margin-top: 20%;
        color: #f0efef;
        font-size: 40px;
        font-weight: bold;
        font-family:Georgia, 'Times New Roman', Times, serif;
        letter-spacing: .4rem;
        text-shadow: rgb(14, 13, 10) 1px 0 10px;
    }
    
    .texto-cocktail, .texto-order, .texto-about, .texto-contact{
        text-align: center;
        color: #f0efef;
        font-size: 20px;
        text-shadow: rgb(14, 13, 10) 1px 0 10px;
        letter-spacing: .1rem;
        padding: 17px;
        margin-top: 20%;
        font-family: Arial, Helvetica, sans-serif;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    .arrow-about {
        margin-top: 155px;
        margin-left: calc(50% + 5px);
        transform: translateX(-50%);
        width: 40%;
        height: auto;
    }

    .cabe-about {
        width: 100%;
        height: auto;
    }

    .agave_botella {
        position: absolute;
        opacity: .1;
        /* margin-right: calc(50% + 5px); */
        transform: translateY(-12%);
    }

    .botella-about {
        width: 50%;
        height: auto;
        padding-left: 26%;
    }

    .txt-normal-left {
        text-align: justify;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 0 17px 0 0;
        line-height: 1.5;
    }

    .img-form{
        display: none;
    }

    .img-menu {
        display: none;
    }
    .ml-15 {
        margin-left: -10px;
    }
    .ml-30 {
        margin-left: -7px;
        text-wrap: wrap;
        width: 95%;
    }
    .mr-45 {
        margin-right: 30px;
    }
    .ml-n-30 {
        margin-left: -30px;
        margin-right: 0px;
    }
    .float-width-l {
        width: 45%;
        float:left;
    }
    .float-width-r {
        width: 45%;
        float:right;
    }
    .boton_continue {
        background: #fffefc;
        -webkit-border-radius: 29;
        -moz-border-radius: 29;
        border-radius: 9px;
        color: #AA8643;
        font-size: 15px;
        padding: 5px 10px 5px 10px;
        border: solid #AA8643 1px;
        text-decoration: none;
    }
          
    .boton_continue:hover {
        background: #fffcf8;
        text-decoration: none;
        border: solid #AA8643 2px;
        color: #AA8643;
    }

    .boton_submit {
        background: #fffaf1;
        background-image: -webkit-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: -moz-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: -ms-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: -o-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: linear-gradient(to bottom, #fffaf1, #f0e6d8);
        -webkit-border-radius: 29;
        -moz-border-radius: 29;
        border-radius: 9px;
        color: #AA8643;
        font-size: 15px;
        padding: 5px 10px 5px 10px;
        border: solid #AA8643 1px;
        text-decoration: none;
    }
          
    .boton_submit:hover {
        background: #f0e6d8;
        background-image: -webkit-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: -moz-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: -ms-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: -o-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: linear-gradient(to bottom, #f0e6d8, #fffaf1);
        text-decoration: none;
        border: solid #AA8643 1px;
        color: #AA8643;
    }
}

@media only screen and (min-width: 600px) {
    .boton_submit {
        background: #fffaf1;
        background-image: -webkit-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: -moz-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: -ms-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: -o-linear-gradient(top, #fffaf1, #f0e6d8);
        background-image: linear-gradient(to bottom, #fffaf1, #f0e6d8);
        -webkit-border-radius: 29;
        -moz-border-radius: 29;
        border-radius: 9px;
        color: #AA8643;
        font-size: 20px;
        padding: 10px 20px 10px 20px;
        border: solid #AA8643 2px;
        text-decoration: none;
    }
          
    .boton_submit:hover {
        background: #f0e6d8;
        background-image: -webkit-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: -moz-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: -ms-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: -o-linear-gradient(top, #f0e6d8, #fffaf1);
        background-image: linear-gradient(to bottom, #f0e6d8, #fffaf1);
        text-decoration: none;
        border: solid #AA8643 2px;
        color: #AA8643;
    }

    .boton_continue {
        background: #fffefc;
        -webkit-border-radius: 29;
        -moz-border-radius: 29;
        border-radius: 9px;
        color: #AA8643;
        font-size: 20px;
        padding: 10px 20px 10px 20px;
        border: solid #AA8643 2px;
        text-decoration: none;
    }
          
    .boton_continue:hover {
        background: #fffcf8;
        text-decoration: none;
        border: solid #AA8643 2px;
        color: #AA8643;
    }
    
    .ml-n-30 {
        margin-left: -30px;
    }
    .float-width-l {
        width: 50%;
        float:left;
    }
    .float-width-r {
        width: 50%;
        float:right;
    }
    .ml-15 {
        margin-left: 15px;
    }
    .ml-30 {
        margin-left: 30px;
    }
    .mr-45 {
        margin-right: 45px;
    }
    
    .fondo {
        background-image: url('/img/inicio/triangles.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        max-height: auto;
        bottom: 0;
        left: 0;
        margin: auto;
        /* overflow: auto; */
        position: fixed;
        right: 0;
        top: 0;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .column > * {
        width:50%;
    }

    .boton {
        max-width: 40%;
        max-height: auto;
    }

    .btn-center {
        position: relative;
        top: 80%;
        /* transform: translateY(50%); */
    }

    .agave {
        position: absolute;
        opacity: .1;
        margin-left: calc(38%);
        transform: translateX(-50%);
    }

    .candado {
        position: absolute;
        width: 5%;
        /* opacity: .1; */
        margin-top: 12px;
        margin-left: calc(95%);
        transform: translateX(-50%);
    }

    .titulo-cocktail, .titulo-order, .titulo-about, .titulo-contact {
        text-align: center;
        margin-top: 10%;
        color: #f0efef;
        font-size: 70px;
        font-weight: bold;
        font-family:Georgia, 'Times New Roman', Times, serif;
        letter-spacing: .4rem;
        text-shadow: rgb(14, 13, 10) 1px 0 10px;
    }
    
    .texto-cocktail, .texto-order, .texto-about, .texto-contact {
        text-align: center;
        color: #f0efef;
        font-size: 25px;
        text-shadow: rgb(14, 13, 10) 1px 0 10px;
        letter-spacing: .1rem;
        font-family: Arial, Helvetica, sans-serif;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    .arrow-about {
        margin-top: 125px;
        margin-left: calc(50% + 5px);
        transform: translateX(-50%);
        width: 17%;
        height: auto;
    }

    .cabe-about {
        margin-top: 75px;
        margin-left: calc(50% + 5px);
        transform: translateX(-50%);
        width: 70%;
        height: auto;
    }

    .agave_botella {
        position: absolute;
        opacity: .1;
        right: 5%;
    }

    .botella-about {
        width: 50%;
        height: auto;
        padding-left: 18%;
        margin-top: 7%;
    }

    .txt-normal-left {
        text-align: justify;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        padding: 0 50px 0 0;
        line-height: 1.5;
    }
    .img-form{
        display: block;
        height: 90%;
    }

    .txt-menu {
        display: none;
    }
}

body {
    background-color: #ffffff;
}

.logo-kuzca {
    max-width: 68%;
    max-height: auto;
    margin-left: calc(50%);
    transform: translateX(-50%);
}

.menu {
    position: relative;
    top: 40%;
    left: 15%;
}

.column {
    display: flex;
    flex-wrap: wrap;
}

.container {    
    position: relative;
}

.image-center {
    text-align: center;
    position: absolute;
    top: 25%;
    /* transform: translateY(25%); */
}

.fondo-cocktail {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/img/cocktails/5.png');
    background-size: cover;
    right: 0;
    top: 0;
}

.fondo-about {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/img/about/1.png');
    background-size: cover;
    right: 0;
    top: 0;
}

.fondo-order {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/img/order/3.png');
    background-size: cover;
    right: 0;
    top: 0;
}

.fondo-contact {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('/img/contact/contactus.png');
    background-size: cover;
    right: 0;
    top: 0;
}

.footer {
    background-image: url('/img/footer.png');
    margin-top: 75px;
    margin-left: calc(50%);
    transform: translateX(-50%);
    width: 100%;
    height: auto;
}

.content {
    position: absolute;
    top: 100%;
    width: 100%;
    height: auto;
}

.txt-titulo-left {
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 50px 0 0;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 40px;
}

.txt-vineta-left {
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 50px 0 22px;
    line-height: 1.5
}

.txt-normal-right {
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 0 0 70px;
    line-height: 1.5;
}

.txt-titulo-right {
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 0 0 70px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 40px;
}

.txt-vineta-right {
    text-align: justify;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 70px 0 89px;
    line-height: 1.5
}

.input {
    border-radius: 17px;
    border: 2px solid #AA8643;
    padding: 20px; 
    width: 80%;
    height: 2px;
    margin-top: 42px;
}

.textarea {
    border-radius: 17px;
    border: 2px solid #AA8643;
    padding: 20px; 
    width: 80%;
    height: 150px;
    margin-top: 42px;
    resize: none;
}

.input:focus, .textarea:focus {
    outline: none !important;
    border: 2px solid #AA8643;
    box-shadow: 0 0 10px #AA8643;
}

.lateral {
    display: block;
    /* border-radius: 8px 8px 0 0; */
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: 0% 50%;
}

.success {
    text-align: center;
    border: solid #008000 3px;
    border-radius: 7px;
    background-color: #F7F7F7;
    color: #01ca01;
    text-align: center;
    padding: 4px;
    width: 85%;
    font-size: 20px;
    margin-left: 50px;
}

.error {
    border: solid red 3px;
    border-radius: 7px;
    background-color: #F7F7F7;
    color: crimson;
    text-align: center;
    padding: 4px;
    width: 85%;
    font-size: 20px;
    margin-left: 50px;
}


/* Appearance */
.links {
	background-color: #FEFEFE77;
	background-image: linear-gradient(to bottom, #0003, transparent);
	border-bottom: 1px solid #0003;
	box-shadow: 0 0 32px #0003;
	font-size: 1em;
	font-weight: 200;
}
.links > a {
	color: #664f23;
	padding: .75em;
	text-align: center;
	text-decoration: none;
	transition: all .5s;
}
.links > a:hover {
	background: #ffffff06;
	color: #AA8643;
}
.links > .line {
	background: #AA8643;
	height: 2px;
	pointer-events: none;
}

/* The Magic */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
    z-index: 9999;
}
.links {
	display: grid;
	grid-template-columns: repeat(var(--items), 1fr);
	position: relative;
}
.links > .line {
	opacity: 0;
	transition: all .5s;
	position: absolute;
	bottom: 0;
	left: var(--left, calc(100% / var(--items) * (var(--index) - 1)));
	width: var(--width, calc(100% / var(--items)));
	--index: 0;
}
.links > a:hover ~ .line {
	opacity: 1;
}

.links > a:nth-of-type(1):hover ~ .line { --index: 1; }
.links > a:nth-of-type(2):hover ~ .line { --index: 2; }
.links > a:nth-of-type(3):hover ~ .line { --index: 3; }
.links > a:nth-of-type(4):hover ~ .line { --index: 4; }
.links > a:nth-of-type(5):hover ~ .line { --index: 5; }
.links > a:nth-of-type(6):hover ~ .line { --index: 6; }
.links > a:nth-of-type(7):hover ~ .line { --index: 7; }
.links > a:nth-of-type(8):hover ~ .line { --index: 8; }
.links > a:nth-of-type(9):hover ~ .line { --index: 9; }
.links > a:nth-of-type(10):hover ~ .line { --index: 10; }
.links > a:last-of-type:hover ~ .line { --index: var(--items); }


table, th, td {  
    border: 1px solid #664f23;  
    border-collapse: collapse;
    margin-top: 18px; 
    width: 90%;
}  
th, td {  
    padding: 10px;  
}  
table#table_product tr:nth-child(even) {  
    background-color: #eee;  
}  
table#table_product tr:nth-child(odd) {  
    background-color: #fff;  
}  
table#table_product th {  
    color: white;  
    background-color: #AA8643;  
} 

.txt-p {
    font-size: 16px;
    text-align: justify;
    /* color: #664f23; */
    color: #AA8643;
}

.txt-p-label {
    font-size: 16px;
    text-align: justify;
    /* color: #664f23; */
    color: #AA8643;
    padding-top: 15px;
    margin-right: 8px;
    margin-left: 8px;
}

.input-order {
    border-radius: 7px;
    border: 1px solid #AA8643;
    padding: 12px; 
    width: 80%;
    height: 1px;
    margin-top: 13px;
}

.input-order-select {
    border-radius: 7px;
    border: 1px solid #AA8643;
    padding: 5px 12px 12px 12px; 
    width: 80%;
    height: 32px;
    margin-top: 13px;
    background-color: white;
}

.input-order:focus {
    outline: none !important;
    border: 1px solid #AA8643;
    box-shadow: 0 0 10px #AA8643;
}
.input-order-select:focus {
    outline: none !important;
    border: 1px solid #AA8643;
    box-shadow: 0 0 10px #AA8643;
}

.title-confirm {
    color: #664f23;
    font-size: 20px;
    text-align: center;
}


/* HTML: <div class="loader"></div> */
.loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: 
        var(--_g) 0%   50%,
        var(--_g) 50%  50%,
        var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}