@font-face {
    font-family: "Permanent Marker", cursive;
    src: url('fonts/PermanentMarker-Regular.ttf');
}

* {
    box-sizing: border-box;
    margin: auto;
    padding: 0px;
}

:root {
    font-size: 20px;
}

h1 {
    font-family: Verdana, arial, Tahoma, sans-serif;
    color: orange;
    background-color: #006600;
    text-align: center;
    font-size: 4rem;
}

h2 {
    font-size: 1.2rem;
    font-family: Garamond;
    font-style: oblique;
    font-weight: 900;
    color: orange;
    background-color: #006600;
}

h3 {
    font-family: "Permanent Marker";
    color: orange;
    background-color: #006600;
    text-align: center;
    font-size: 3rem;
}

h4 {
    font-family: "Permanent Marker";
    color: rgb(254, 232, 176);
    background-color: #006600;
    text-align: center;
    font-size: 4rem;
}

h5 {
    /*PALETA COPADA*/
  /*  background-color: rgb(249, 123, 34);*/
    /*#F97B22*/
    /*background-color: rgb(254, 232, 176);*/
    /*#FEE8B0*/
    /*background-color: rgb(124, 144, 112);*/
    /*#9CA777  */
    /*background-color: rgb(156, 167, 119);*/
    background-color: #006600;
    /*#7C9070*/
}

h6 {
    font-family: "Permanent Marker";
    color: orange;
    background-color: #006600;
    text-align: center;
    font-size: 2rem;
}

/*--------------------------¬|-------*/

/*-|-----ENLACES---------------------*/
a {
    font-family: "Permanent Marker", cursive;
    text-decoration: none;
    color: rgb(254, 232, 176);
    /*background-color: #006600;*/
    text-align: center;
    font-size: 2.3rem;
    margin-right: 5px;
}

a:hover {
    /*font-style: oblique;*/
    color: white;
    background-color: #006600;
    /*
    animation: tagEffect 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
*/

    /*padding: 0px;*/
    /*
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
*/
}

a:link {
    color: red;
    background-color: #006600;
}

a:active {
    background-color: #006600;
}

a:visited {
    color: rgb(254, 232, 176);
}


/*
div{
    width: 100px;
    height: 100px;
    background-color:lightskyblue;
    border: 1px solid black;
    margin-bottom: 50px;

    transition-property: width;
    transition-duration: 5s;
    transition-delay: 1s;
    transition-timing-function: ease-in;

    transition-property: color;
    transition-duration: 5s;
    transition-delay: 0.5s;
    transition-timing-function: ease-in;

}

div:hover{
    width: 500px;
}


a:hover{
    background-color: brown;
    padding: 50px;
    transition-property: all;
    transition-duration: 4s;
    transition-timing-function: ease-in;
}
*/
/*--------ETIQUETAS SEMANTICAS------------*/

header {
    font-family: "Permanent Marker";
    background-color: rgba(0, 102, 0, 1);
    font-size: 5rem;
    text-align: center;
    margin-top: 0%;
    padding: 0%;
    animation: tagEffect 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

body {
    font-family: "Permanent Marker";
    /*Garamond, arial, Tahoma, sans-serif */
    color: orange;
    background-color: #006600;
}

/*
nav {
    font-family: 'Sedgwick Ave Display';
    font-size: 1.5rem;
    color: orange;
    background-color: #006600;
    text-align: center;
}
*/

.nav__btn {
    color: rgb(254, 232, 176);
    background-color: #006600;
    text-align: center;
    font-size: 2rem;
}

 #label{
    font-family: "Permanent Marker";
    color: rgb(255, 165, 0);
    background-color: #006600;
    text-align: center;
    font-size: 3rem;
}


.nav__btn:hover {
    color: rgb(122, 197, 246);
    background-color: #006600;
    text-align: center;
    font-size: 2rem;
    animation: tagEffect 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

main {
    max-width: 800px;
    width: 90%;
    margin: auto;
    /* padding: 40px;*/
}

/*--------------------------------*/

/*-------------GRID AREAS------------*/
html {
    font-size: 62.5%;
    /*10px*/
}

.contenedor {
    font-family: "Permanent Marker", cursive;
    max-width: 90rem;
    max-height: 180rem;
    display: grid;
    padding: 0%;
    background-color: #006600;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
        "cabeza   cabeza   cabeza cabeza"
        "nav       nav      nav     nav"
        "bloque1   main    main   sidebar"
        "bloque1   main    main   sidebar"
        "bloque1  main  main   sidebar"
        "footer   footer    footer footer";
    margin-right: auto;
    margin-left: auto;
    gap: 0.1%;

}

.contenedor .header {
    font-family: "Permanent Marker";
    grid-area: cabeza;
    background-color: #006600;
    color: orange;
    height: 12vh;
    width: 70%;
    text-align: center;
    font-size: 5rem;
    margin-top: 0%;
    margin-bottom: 10px;
    padding: 0%;
    /*border: red solid 2px;*/
}

.contenedor .nav {
    font-family: "Permanent Marker", cursive;
    grid-area: nav;
    background-color: #006600;
    color: white;
    height: 6vh;
    width: 100vh;
    text-align: center;
    margin-top: 0%;
    /*border: red solid 1px;*/
}

.contenedor .main {
    grid-area: main;
    background-color: #006600;
    color: orange;
    height: 78vh;
    margin-top: 1vh;
    /*border: cyan solid 2px;*/
    padding: 0%;
    /*overflow:scroll;*/
}

.contenedor .sidebar {
    grid-area: sidebar;
    background-color: #006600;
    color: white;
    border: red solid 2px;
    margin: 0%;
    padding: 0%;
}

.contenedor .bloque1 {
    grid-area: bloque1;
    background-color: #006600;
    color: white;
    border: red solid 2px;
    margin: 0%;
    padding: 0%;
}

.contenedor .bloque2 {
    grid-area: bloque2;
    background-color: #006600;
    color: black;
    height: 15vh;
    border: red solid 2px;
}

.contenedor .footer {
    grid-area: footer;
    background-color: #006600;
    color: orange;
    width: 100%;
    height: 14vh;
    margin-top: 0%;
    border: red solid 2px;
    text-align: center;
}

/*--------------------------------------*/
/*     CONTENEDOR PLAYER*/
.contenedor .player {
    /*  font-family: "Permanent Marker", cursive;*/
    /*max-width: 120rem;*/
    max-width: 18rem;
    max-height: 9rem;
    display: grid;
    padding: 0%;
    /*  background-color: #bed1f3;*/
    background-color: #006600;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
        "cabeza   cabeza   cabeza cabeza"
        "nav       nav      nav     nav"
        "bloque1   main    main   sidebar"
        "bloque1   main    main   sidebar"
        "bloque1  main  main   sidebar"
        "footer   footer    footer footer";
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    gap: 0.1%;
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*--  ^  ------GRID AREAS------------*/
/*--  |  ------GRID AREAS------------*/

#producer_E87_portrait {
    background-color: #006600;
    text-align: center;
    /*border: 1px solid rgb(187, 238, 46);*/
    max-width: 400px;
    max-height: 400px;
    
}

/* -------Selector por ID-------------*/
#nombre {
    color: black;
    font-weight: 700;
}

#email {
    color: black;
    font-weight: 700;
}

#asunto {
    color: black;
    font-weight: 700;
}

#comentario {
    color: black;
    font-weight: 900;
}

/*--------------------------*/
/*CARROUSEL*/
* {
    box-sizing: border-box
}

body {
    font-family: Verdana, sans-serif;
    margin: 0
}

.mySlides {
    display: none
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    max-width: 600px;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: red;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {

    .prev,
    .next,
    .text {
        font-size: 11px
    }
}

/*--------------------------*/
.contenedor_contacto {
    max-width: 90rem;
    max-height: 180rem;
    display: grid;
    padding: 0%;
    background-color: #006600;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
        "cabeza   cabeza   cabeza cabeza"
        "nav       nav      nav     nav"
        "bloque1   main    main   sidebar"
        "bloque1   main    main   sidebar"
        "bloque1  main  main   sidebar"
        "footer   footer    footer footer";
    margin-right: auto;
    margin-left: auto;
    gap: 0.1%;
}

.contenedor_contacto .header {
    font-family: "Permanent Marker";
    grid-area: cabeza;
    background-color: #006600;
    color: orange;
    height: 12vh;
    width: 70%;
    text-align: center;
    font-size: 5rem;
    margin-top: 0%;
    padding: 0%;
}


.contenedor_contacto .nav {
    font-family: "Permanent Marker", cursive;
    grid-area: nav;
    background-color: #006600;
    color: white;
    height: 6vh;
    width: 100vh;
    text-align: center;
    margin-top: 0%;
}

.contenedor_contacto .main {
    font-family: "Permanent Marker", cursive;
    grid-area: main;
    /*background-color:blueviolet;*/
    /*background-color: #006600;*/
    color: orange;
    height: 100vh;
    margin-top: 3vh;

}

.contenedor_contacto .sidebar {
    grid-area: sidebar;
    background-color: orangered;
    color: white;

}

.contenedor_contacto .bloque1 {
    grid-area: bloque1;
    background-color: aquamarine;
    color: black;
    height: 15vh;
}

.contenedor_contacto .bloque2 {
    grid-area: bloque2;
    background-color: antiquewhite;
    color: black;
    height: 15vh;

}

.contenedor_contacto .footer {
    grid-area: footer;
    background-color: red;
    color: orange;
    width: 100%;
    height: 14vh;
    margin-top: 10%;
}

/*-------------------------------------*/
/*----------BOTON ENVIAR---------------*/
.enviar__btn {

    font-family: "Permanent Marker", cursive;
    color: orange;
    background-color: #006600;
    border: 3px solid #006600;
    padding: 0%;
    font-size: 4vh;
    cursor: pointer;
}

.enviar__btn:hover {
    box-shadow: 3px 4px 30px orange;

    /* border-radius: 0px;*/
    /*    Syntax: <length-percentage>{1,2}*/
}

/*--------------------------------------*/
.header:hover {

    font-size: 5rem;
    animation: tagEffect 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

@keyframes tagEffect {

    /*
    0% {
        text-shadow:
        rgba(255, 255, 255, 1) 1px 0px,
        rgba(255, 255, 255, 1) 2px 0px,
        rgba(0, 0, 0, 1) 3px 0px,
        rgba(0, 0, 0, 1) 4px 0px,
        rgba(0, 0, 0, 1) 5px 0px,
        rgba(0, 0, 0, 1) 6px 0px,
        rgba(0, 0, 0, 1) 7px 0px,
        rgba(0, 0, 0, 1) 8px 0px,
        rgba(0, 0, 0, 1) 9px 0px,
        rgba(0, 0, 0, 1) 10px 0px,
        rgba(0, 0, 0, 1) 11px 0px,
        rgba(0, 0, 0, 1) 12px 0px,
        rgba(0, 0, 0, 1) 13px 0px,
        rgba(0, 0, 0, 1) 14px 0px,
        rgba(0, 0, 0, 1) 15px 0px,
        rgba(0, 0, 0, 1) 16px 0px,
        rgba(0, 0, 0, 1) 17px 0px,
        rgba(0, 0, 0, 1) 18px 0px,
        rgba(0, 0, 0, 1) 19px 0px,
        rgba(255, 255, 255, 1) 20px 0px,
        rgba(255, 255, 255, 1) 21px 0px;
    }
   100% {
        text-shadow:
        rgba(255, 255, 255, 1) 1px 0px,
        rgba(255, 255, 255, 1) 2px 0px,
        rgba(0, 0, 0, 1) 3px 0px,
        rgba(0, 0, 0, 1) 4px 0px,
        rgba(0, 0, 0, 1) 5px 0px,
        rgba(0, 0, 0, 1) 6px 0px,
        rgba(0, 0, 0, 1) 7px 0px,
        rgba(0, 0, 0, 1) 8px 0px,
        rgba(0, 0, 0, 1) 9px 0px,
        rgba(0, 0, 0, 1) 10px 0px,
        rgba(0, 0, 0, 1) 11px 0px,
        rgba(0, 0, 0, 1) 12px 0px,
        rgba(0, 0, 0, 1) 13px 0px,
        rgba(0, 0, 0, 1) 14px 0px,
        rgba(0, 0, 0, 1) 15px 0px,
        rgba(0, 0, 0, 1) 16px 0px,
        rgba(0, 0, 0, 1) 17px 0px,
        rgba(0, 0, 0, 1) 18px 0px,
        rgba(0, 0, 0, 1) 19px 0px,
        rgba(255, 255, 255, 1) 20px 0px,
        rgba(255, 255, 255, 1) 21px 0px;
    }
*/
    /*
0%{
    text-shadow:
    rgba(255, 255, 255, 1) 15px 0px
    rgba(254, 72, 0, 1) -15px 0px
}
10%{
    text-shadow:
    rgba(255, 255, 255, 1) -15px -0px
    rgba(254, 72, 0, 1) -15px 0px
}
20%{
    text-shadow:
    rgba(255, 255, 255, 1) 15px -10px
    rgba(254, 72, 0, 1) -15px 0px
}
30%{
    text-shadow:
    rgba(255, 255, 255, 1) -15px 10px
    rgba(254, 72, 0, 1) -15px 0px
}
40%{
    text-shadow:
    rgba(255, 255, 255, 1) 15px -0px
    rgba(254, 72, 0, 1) -15px 0px
}
50%{
    text-shadow:
    rgba(255, 255, 255, 1) -15px -0px
    rgba(254, 72, 0, 1) -15px 0px
}
60%{
    text-shadow:
    rgba(255, 255, 255, 1) 15px -0px
}
70%{
    text-shadow:
    rgba(255, 255, 255, 1) -15px -0px
}
80%{
    text-shadow:
    rgba(255, 255, 255, 1) 15px -0px
}
90%{
    text-shadow:
    rgba(255, 255, 255, 1) -15px -0px
}
100%{
    text-shadow:
    rgba(255, 255, 255, 1) 15px -0px
    rgba(254, 72, 0, 1) 0px -30px
}
   */

    0% {
        text-shadow:

            rgba(97, 0, 254, 1) -1px -0px 8px,
            rgba(97, 0, 254, 1) -2px -0px 8px,
            rgba(254, 72, 0, 1) -15px 0px 100px,
            rgba(97, 0, 254, 1) -18px -0px 8px,
            rgba(97, 0, 254, 1) -12px -0px 8px;
    }

    100% {
        text-shadow:
            rgba(97, 0, 254, 1) -1px -0px 8px,
            rgba(97, 0, 254, 1) -2px -0px 8px,

            rgba(254, 72, 0, 1) -15px 0px 8px,
            rgba(97, 0, 254, 1) -18px -0px 8px,
            rgba(97, 0, 254, 1) -12px -0px 8px;
    }




}

@keyframes tagEffectInMotion {
    0% {
        text-shadow:
            rgba(255, 255, 255, 1) 1px 0px,
            rgba(0, 0, 0, 1) 2px 0px,
            rgba(0, 0, 0, 1) 3px 0px,
            rgba(0, 0, 0, 1) 4px 0px,
            rgba(0, 0, 0, 1) 5px 0px,
            rgba(0, 0, 0, 1) 6px 0px,
            rgba(0, 0, 0, 1) 7px 0px,
            rgba(0, 0, 0, 1) 8px 0px,
            rgba(0, 0, 0, 1) 9px 0px,
            rgba(0, 0, 0, 1) 10px 0px,
            rgba(0, 0, 0, 1) 11px 0px,
            rgba(0, 0, 0, 1) 12px 0px,
            rgba(0, 0, 0, 1) 13px 0px,
            rgba(0, 0, 0, 1) 14px 0px,
            rgba(0, 0, 0, 1) 15px 0px,
            rgba(0, 0, 0, 1) 16px 0px,
            rgba(0, 0, 0, 1) 17px 0px,
            rgba(0, 0, 0, 1) 18px 0px,
            rgba(0, 0, 0, 1) 19px 0px,
            rgba(0, 0, 0, 1) 20px 0px,
            rgba(255, 255, 255, 1) 21px 0px;
    }
/*
    50% {
        text-shadow:
            rgba(255, 255, 255, 0) 1px 0px,
            rgba(0, 0, 0, 0) 2px 0px,
            rgba(0, 0, 0, 0) 3px 0px,
            rgba(0, 0, 0, 0) 4px 0px,
            rgba(0, 0, 0, 0) 5px 0px,
            rgba(0, 0, 0, 0) 6px 0px,
            rgba(0, 0, 0, 0) 7px 0px,
            rgba(0, 0, 0, 0) 8px 0px,
            rgba(0, 0, 0, 0) 9px 0px,
            rgba(0, 0, 0, 0) 10px 0px,
            rgba(0, 0, 0, 0) 11px 0px,
            rgba(0, 0, 0, 0) 12px 0px,
            rgba(0, 0, 0, 0) 13px 0px,
            rgba(0, 0, 0, 0) 14px 0px,
            rgba(0, 0, 0, 0) 15px 0px,
            rgba(0, 0, 0, 0) 16px 0px,
            rgba(0, 0, 0, 0) 17px 0px,
            rgba(0, 0, 0, 0) 18px 0px,
            rgba(0, 0, 0, 0) 19px 0px,
            rgba(0, 0, 0, 0) 20px 0px,
            rgba(255, 255, 255, 1) 21px 0px;
    }

    75% {
        text-shadow:
            rgba(0, 0, 0, 1) 1px 0px,
            rgba(0, 0, 0, 1) 2px 0px,
            rgba(0, 0, 0, 1) 3px 0px,
            rgba(0, 0, 0, 1) 4px 0px,
            rgba(0, 0, 0, 1) 5px 0px,
            rgba(0, 0, 0, 1) 6px 0px,
            rgba(0, 0, 0, 1) 7px 0px,
            rgba(0, 0, 0, 1) 8px 0px,
            rgba(0, 0, 0, 1) 9px 0px,
            rgba(0, 0, 0, 1) 10px 0px,
            rgba(0, 0, 0, 1) 11px 0px,
            rgba(0, 0, 0, 1) 12px 0px,
            rgba(0, 0, 0, 1) 13px 0px,
            rgba(0, 0, 0, 1) 14px 0px,
            rgba(0, 0, 0, 1) 15px 0px,
            rgba(0, 0, 0, 1) 16px 0px,
            rgba(0, 0, 0, 1) 17px 0px,
            rgba(0, 0, 0, 1) 18px 0px,
            rgba(0, 0, 0, 1) 19px 0px,
            rgba(0, 0, 0, 1) 20px 0px;
    }

    100% {
        text-shadow:
            rgba(0, 0, 0, 1) 1px 0px,
            rgba(0, 0, 0, 1) 2px 0px,
            rgba(0, 0, 0, 1) 3px 0px,
            rgba(0, 0, 0, 1) 4px 0px,
            rgba(0, 0, 0, 1) 5px 0px,
            rgba(0, 0, 0, 1) 6px 0px,
            rgba(0, 0, 0, 1) 7px 0px,
            rgba(0, 0, 0, 1) 8px 0px,
            rgba(0, 0, 0, 1) 9px 0px,
            rgba(0, 0, 0, 1) 10px 0px,
            rgba(0, 0, 0, 1) 11px 0px,
            rgba(0, 0, 0, 1) 12px 0px,
            rgba(0, 0, 0, 1) 13px 0px,
            rgba(0, 0, 0, 1) 14px 0px,
            rgba(0, 0, 0, 1) 15px 0px,
            rgba(0, 0, 0, 1) 16px 0px,
            rgba(0, 0, 0, 1) 17px 0px,
            rgba(0, 0, 0, 1) 18px 0px,
            rgba(0, 0, 0, 1) 19px 0px,
            rgba(0, 0, 0, 1) 20px 0px;
    }
    */
    100% {
        text-shadow:
            rgba(255, 255, 255, 1) 1px 0px,
            rgba(0, 0, 0, 1) 2px 0px,
            rgba(0, 0, 0, 1) 3px 0px,
            rgba(0, 0, 0, 1) 4px 0px,
            rgba(0, 0, 0, 1) 5px 0px,
            rgba(0, 0, 0, 1) 6px 0px,
            rgba(0, 0, 0, 1) 7px 0px,
            rgba(0, 0, 0, 1) 8px 0px,
            rgba(0, 0, 0, 1) 9px 0px,
            rgba(0, 0, 0, 1) 10px 0px,
            rgba(0, 0, 0, 1) 11px 0px,
            rgba(0, 0, 0, 1) 12px 0px,
            rgba(0, 0, 0, 1) 13px 0px,
            rgba(0, 0, 0, 1) 14px 0px,
            rgba(0, 0, 0, 1) 15px 0px,
            rgba(0, 0, 0, 1) 16px 0px,
            rgba(0, 0, 0, 1) 17px 0px,
            rgba(0, 0, 0, 1) 18px 0px,
            rgba(0, 0, 0, 1) 19px 0px,
            rgba(0, 0, 0, 1) 20px 0px,
            rgba(255, 255, 255, 1) 21px 0px;
    }


}

h5 {
    /*PALETA COPADA*/
    background-color: rgb(249, 123, 34);
    /*#F97B22*/
    background-color: rgb(254, 232, 176);
    /*#FEE8B0*/
    background-color: rgb(124, 144, 112);
    /*#9CA777  */
    background-color: rgb(156, 167, 119);
    /*#7C9070*/
}



/***--------------- FORMULARIO------------------**/
.container {
    font-family: "Permanent Marker";
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/*** ! style rules for content section**/
.content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #f2796e;
    width: 55%;
    min-height: 100vh;
    padding: 10px 20px;
}

.image {
    background-image: url("./images/illustration.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* border: 2px solid black; */
    height: 65%;
}

/*
.text {
  text-align: center;
  color: white;
  font-size: 18px;
}
*/
/**.* ! style rules for form section**/
.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
    /* max-width: 400px; */
    padding: 0px;
}

.title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
}

.contenedor .main .container {
    background-color: #006600;
    margin: 0px;
    padding: 0px;
    border: solid black 0px;
    text-align: left;
}

.form div input {
    /*width: 100%;*/
    width: 650px;
    height: 45px;
    background-color: #fff;
    border-radius: 3px;
    outline: none;
    border: 3px solid transparent;
    padding: 0 5px;
    line-height: 45px;
    transition: .5s ease all;
    margin: 0px;

}

input:focus {
    border: 3px solid rgb(249, 123, 34);
    outline: none;
    box-shadow: 3px 0px 30px rgba(163, 163, 163, 1);
}

.checkbox {
    width: 20px;
    height: 45px;
    background-color: #fff;
    border-radius: 3px;
    outline: none;
    border: 3px solid transparent;
    padding: 0px;
    margin: 0px;
    display: inline-block;

}

label {
    display: block;
    font-weight: 700;
    padding: 0px;
    cursor: pointer;
}

.form div {
    position: relative;
    margin-bottom: 15px;
}

/** .* ! style rules for form icons**/
.form div i {
    position: absolute;
    padding: 10px;
    margin: 0px;
}

.success-icon,
.failure-icon {
    right: 0;
    opacity: 0;
}

.failure-icon,
.error {
    color: red;
}

.success-icon {
    color: rgb(121, 226, 121);
}

.error {
    font-size: 0.7rem;
    margin-top: 5px;
}

/** * ! style rules for button **/
button {
    /*  transition: all 0.5s ease;*/
    font-family: "Permanent Marker", cursive;
    width: 100%;
    background-color: #006600;
    color: orange;
    font-weight: bold;
    font-size: 4vh;
    border: #006600 solid 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: .1s ease all;
    margin: 0%;
    padding: 0%;
}

button:hover {
    box-shadow: 3px 4px 30px orange;
}

#terminos {
    height: min-content;
    display: inline-block;
    margin: 0px;
}

#spam {
    height: min-content;
    display: inline-block;
    margin: 0px;
}


/** * ! Media Queries are here **/
@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }

    .form,
    .content {
        width: 100%;
    }

    .btn {
        flex-direction: column;
    }

    .image {
        height: 70vh;
    }
}

@media (max-width: 425px) {
    .form {
        padding: 20px;
    }
}

/* -------Selector por ID-------------*/
#nombre {
    color: black;
    font-weight: 900;
}

#email {
    color: black;
    font-weight: 900;
}

#asunto {
    color: black;
    font-weight: 900;
}

#comentario {
    color: black;
    font-weight: 900;
}


p+h3 {
    font-family: "Permanent Marker", cursive;
    color: rgba (255, 165, 0, 0.7);
    font-size: 4rem;
    animation: tagEffect 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

.footer .icono {
    display: inline-block;
    margin-left: 60px;
}

.sidebar_iframe {
    margin-left: 50px;
    /*display: inline-block;*/
}

iframe {
    height: 400px;
    width: 446px;
    margin-left: 150px;
    /*display: inline-block;*/
}


#contenedor_texto_bio {
    background-color: blue;
    color: azure;
    border: 3px solid pink;
}


.waiting_title {
    /*background-color: rgba(33, 16, 139, 0.5) !important;*/
    font-size: 8rem;
    font-family: "Permanent Marker";
    text-align: center;
    margin: 0px;
    margin-left: 20px;
    padding: 0px;
    animation: tagEffectInMotion 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
}


.ProducerE87_Tag {
    /*background-color: rgba(33, 16, 139, 0.5) !important;*/
    font-size: 4rem;
    font-family: "Permanent Marker";
    text-align: center;
    margin: 0px;
    margin-left: 20px;
    padding: 0px;
    animation: tagEffectInMotion 3s infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    
}


/*-----------PLAYER LAND--------- */

.player_btn {
    display: inline-block;
}
/*------------------------------------------------*/
.body .contenedor_loading {
    max-width: 16rem;
    max-height: 9rem;
    display: grid;
    padding: 0%;
    background-color: #006600;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
        "cabeza  cabeza  cabeza  cabeza  cabeza  cabeza  cabeza  cabeza"
        "main  main    main    main     main    main    main   sidebar"
        " footer  footer footer  footer   footer  footer  footer  footer";
    margin-right: 0px;
    margin-left: 0px;
    gap: 0.1%;
}

#myProgress {
    width: 100%;
    background-color: white;
}

#myloading_bar {
    width: 1%;
    height: 30px;
    background-color: #006600;
    
}

/*
Propiedades de ancho y alto:
● min-height, max-height, min-width y max-width
*/
/* ----- -----  Mediaqueries ----- ----- */
@media all and (max-width: 400px) {

    .main .waiting_title {
        /*background-color: rgba(33, 16, 139, 0.5) !important;*/
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        margin: 0px;
        margin-left: 20px;
        padding: 0px;
        color:blue;
        /*animation: tagEffectInMotion 3s infinite;
        animation-timing-function: cubic-bezier(1, 0, 0, 1);
        */
    }
}


@media (orientation:landscape) and (max-width:400px){/* , es para OR */
    .main .waiting_title {
        font-size: 2rem;
    }
}

@media (orientation:portrait){
    .main .waiting_title {
        font-size: 2rem;
    }  
}

/*--------------------------------*/
.yt1{
    width: 400px;
    height: 350px;
    margin-left: 200px;
}