*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto;
    transition: .3s;}
body{
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 1920px; 
    min-width: 320px;
    overflow-x: hidden;} 
b{font-weight: bolder;}
/*--------------------------------------------botonera*/
nav{
    width: 100%;
    height: auto;
    max-width: 1920px;
    float: left;
    background:white;
    z-index: 30000000;
    position: fixed;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
    top: 0;}
#menu{
    width: 80%;
    float: left;
    margin: 2.5% 10%;}
.botones{
    width: 20%;
    float: left;
    text-align: center;
    list-style: none;
    font-weight: 600;
    text-transform: uppercase;
    transition:.3s;}
#menu ul a{
    color:white;}
#menu ul li:hover{
    font-weight: 600;}
nav label, nav input{
    display: none;}
.linea1{
    width: 40px;
    height: 5px;
    margin-top: 9px;
    float: left;
    background: white;
    opacity: .8;}
.linea2{
    width: 40px;
    height: 5px;
    margin-top: 9px;
    float: left;
    background: white;
    opacity: .8;}
.logonav{ display: none;}

/*---------------------------------------------header*/
header{
    width: 100%;
    background: url(../img/header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    background-attachment: fixed;}
.logoheader{
    width: 50%;
    float: left;
    margin: 15% 25%;}

/*---------------------------------------------home*/
#home{
    width: 100%;
    float: left;
    text-align: center;}
.disco{
    margin: 3% 0%;
    width: 50px;}
.txthome{
    width: 70%;
    margin: 2% 15%;
    font-size: 21px;
    line-height: 36px;
    font-style: italic;
    background-image: url(../img/fondoheader.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 70%;
    float: left;
    padding-bottom: 5%;}

/*---------------------------------------------destacado*/
#destacado{
    width: 100%;
    background: url(../img/destacado.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;}
.txtdesta{
    width: 50%;
    margin: 8% 25%;
    font-size: 28px;
    line-height: 40px;
    font-style: italic;
    font-weight: 300;
    color: white;
    float: left;
    text-align: center;}
.txtdesta b{font-weight: 900;}

/*---------------------------------------------footer*/
footer{
    width:100%;
    float: left;
    text-align: center;
    background: linear-gradient(90deg, rgb(255, 224, 72) 0%, rgba(255,176,1,1) 100%);
    padding: 5%;}
.titufooter{
    width:100%;
    float: left;
    font-size: 20px;
    margin-bottom: 2%;
    font-weight: 600;}
footer ul{ list-style: none;}
footer a{ 
    color:black;
    text-decoration: none;}
footer li{ line-height: 30px;}
#redesfooter{
    width:20%;
    float: left;
    margin: 2% 40%;}
.imgredes{
    width: 20%;
    float: left;
    margin: 0% 2.5%;}
.volver{
    text-decoration: underline;}


/*---------------------------------------------artistica*/
#banner{
    width: 100%;
    background: url(../img/header.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    background-attachment: fixed;}
.logoartistica{
    width: 30%;
    float: left;
    margin: 15% 35% 2%;}
.titubanner{
    width: 100%;
    float: left;
    margin: 5% 0% 7%;
    color: white;
    text-align: center;
    font-size: 80px;
    font-weight: 300;
    letter-spacing: 10px;}
#artistica{
    width: 100%;
    margin: 3% 0%;
    float: left;}
.banda{
    width: 80%;
    float: left;
    margin: 3% 10%;}
.titubanda{
    width: auto;
    float: left;
    font-size: 33px;
    padding: .7%;
    margin-bottom: 1%;
    background: linear-gradient(90deg, rgb(255, 224, 72) 0%, rgba(255,176,1,1) 100%);
    font-weight: 900;}
.txtbanda{
    float: right;
    width: 95%;
    font-style: italic;
    font-size: 22px;
    line-height: 40px;
    font-weight: 300;}
#pop{
    padding: 5% 10%;
    margin:0%;
    width: 100%;
    background: url(../img/pop.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;}
#trap{
    padding: 5% 10%;
    margin:0%;
    width: 100%;
    background: url(../img/trap.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;}
.txtdestacado{
    float: left;
    width: 100%;
    background: rgba(255, 255, 255, 0.683);
    border-radius: 20px;
    padding: 1%;
    margin-top: 1%;}


    
/*---------------------------------------------construccion*/
.discoconstruc{
    width: 50px;}
.construccion{
    float: left;
    width: 80%;
    background: rgba(0, 0, 0, 0.683);
    border-radius: 20px;
    padding: 5%;
    margin: 10%;
    text-align: center;}
.txtcontruccion{
    float: left;
    width: 100%;
    color: white;
    font-weight: 300;
    letter-spacing: 5px;
    font-size: 40px;}




/*---------------------------------------------contacto*/

#contacto{
    width: 100%;
    background: url(../img/contacto.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    float: left;
    background-attachment: fixed;}
.titucontacto{
    width: 100%;
    float: left;
    margin: 15% 0% 0%;
    color: white;
    text-align: center;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: 10px;}
#contacto form{
    width: 50%;
    float: left;
    margin: 2% 25% 5%;}
#contacto form input{
    width: 100%;
    padding: 2%;
    margin: 1% 0%;
    float: left;
    border-radius: 10px;
    border: 0;}
#contacto form textarea{
    width: 100%;
    padding: 2%;
    margin: 1% 0%;
    height: 100px;
    max-height: 100px;
    min-height: 100px;
    max-width: 100%;
    min-width: 100%;
    float: left;
    border-radius: 10px;
    border: 0;}

#contacto form button{
    width: 20%;
    margin: 1% 40%;
    padding: 1%;
    float: left;
    text-align: center;
    border: 0;
    cursor: pointer;
    background: linear-gradient(90deg, rgb(255, 224, 72) 0%, rgba(255,176,1,1) 100%);}
#contacto form button:hover{
    opacity: .5;}

@media (max-width:900px){
    nav{
        width: 100%;
        padding:0;
        height: 80px;
        background: black;
        margin: 0%;} 
    .logonav{ 
        display: block;
        float: left;
        height: 40px;
        margin: 20px;}
    #menu{
        width: 100%;
        float: right;
        height: auto;
        position: absolute;
        margin:0;
        margin-top: -400px;}
    #menu ul li{
        width: 100%;
        font-size: 22px;
        line-height: 74px;
        border-bottom: 2px solid white; 
        background: rgba(0, 0, 0, 0.746);}    
    nav label{
        float: right;
        height: 100%;
        display: block;
        width: 60px;
        padding: 2% 0%;}
    #btn-menu:checked ~ #menu{
        margin-top: 80px;}
    #btn-menu:checked ~ label .apagar{
        display: none;}
    #btn-menu:checked ~ label .linea1{
        transform: rotate(45deg);
        margin-top: 20px;
        float: left;}
    #btn-menu:checked ~ label .linea2{
        transform: rotate(-45deg);
        float: left;
        margin-top: -5px;}

    header{
        background-position: top;
        background-size: 100%;}
    .logoheader{
        width: 60%;
        margin: 20%;}
    .txtdesta{
        width: 70%;
        margin: 8% 15%;}
    #redesfooter{
        width:40%;
        margin: 5% 30%;}
    #banner{
        background-position: top;
        background-size: 100%;}
    .titubanner{
        margin: 5% 0% 7%;
        font-size: 50px;
        letter-spacing: 5px;}
    #contacto{
        padding-bottom: 5%;
        background-size: cover;}
    .titucontacto{
        margin:20% 0% 0%;
        font-size: 40px;
        letter-spacing: 5px;}
}

@media (max-width:600px){
    .logoartistica{
            display: none;}
    .titubanner{
        margin: 25% 0% 10%;
        font-size: 60px;}

    .banda{
        width: 90%;
        margin: 5%;}
    .titubanda{
        font-size: 24px;}
    .txtbanda{
        font-size: 16px;
        line-height: 34px;}
    #contacto form{
        width: 70%;
        margin: 2% 15% 5%;}
    #contacto form button{
        width: 40%;
        margin: 1% 30%;}

    .txtcontruccion{
        font-size: 20px;}
}
@media (max-width:500px){
    nav{
        height: 70px;} 
    #btn-menu:checked ~ #menu{
        margin-top: 70px;}
    .logonav{ 
        height: 30px;
        margin: 20px;}   
    header{
        background-position: top;
        background-size: 100%;}
    .logoheader{
        width: 70%;
        margin: 30% 15% 15%;}
    .txthome{
        width: 80%;
        margin: 2% 10%;
        font-size: 16px;
        line-height: 24px;}
    .txtdesta{
        font-size: 20px;
        width: 90%;
        margin: 8% 5%;}
    footer{
       padding: 10% 5%;}
    .titufooter{
        margin-bottom: 5%;}
    footer li{         
        font-size: 14px;
        line-height: 20px;}
    #redesfooter{
        width:40%;
        margin: 5% 30%;}

    .titubanner{
        font-size: 30px;}
    .titucontacto{
        margin:25% 0% 0%;
        font-size: 35px;
        letter-spacing: 5px;}

}