* {
     
    box-sizing: border-box;
}

html, body{
    
    width: 100%; 
    margin: 0;
    background-color: rgb(248, 248, 248);
    background-color: rgb(255, 255, 255);
    
    
    font-family: 'Spartan', sans-serif;
    
  
}

.botonmenu{
    display: none;
    
}

.header{
    background-color: aquamarine;
    background-color: white;
    display: flex  ;
    flex-wrap: nowrap;
    
    margin:0;
    flex-direction: column;
    margin-right: 20vh;
    margin-left: 20vh;
    margin-top: 0px;
    margin-bottom: 0px;
    
}

    .menu{
        background-color: white;
        display:flex;
        flex-wrap: nowrap;
        
        flex: 1 1 auto;
        flex-direction: row;
        height: 180px;
        

    }

        .logo {
            background-color: white;
            
            display: flex;
            flex-wrap: nowrap;
            flex: 1 1 auto;
            
            
            font-family: 'Wire One', sans-serif;
            font-family: 'Spartan', sans-serif;
               
            color: bisque;
            display: none   ;
            
            
        }

       
        .imglogo{
            height: 70px;
            width: 300px;
            margin: 20px;
            display: none;
            
        }

        .imgiso{
            height: 80px;
            width: 80px;
            margin-top: -20px;
            
            
            margin-bottom: 0px;
        }

        .nav {
            background-color: white;
            
            
            display: flex;
            flex-wrap: nowrap;
            flex: 1 1 auto;
            flex-direction: row;
            align-items: center;
            color: white;
            font-size: 18px;
            justify-content: space-between;
            margin-left: 25vh;
            margin-right: 25vh;
            align-self: center;
            
            
        }

        .nav a {    
            font-size: 14px;
            width: 20%;
            color:  black;
            text-decoration: none;
            font-weight:300;
            margin-top: 30px;
            flex: 1 1 auto;
            font-family: 'Spartan', sans-serif;
            margin-left: 0%;
            background-color:white;
            display: flex;
            justify-content: center;
            text-align: center;
            position: relative;
            padding: 0.2em 0;       

            ;
            
        }

        .nav a:hover{
            font-weight: 500;
        }
        .activo{
            margin-top: 0px;
            font-weight:500;


        }

        .social {
            background-color: white;
            display: flex;
            flex-wrap: nowrap;
            flex: 1 1 auto;
            flex-direction: row;
            justify-content: right;
            align-self: center;
            
            color: black;
            font-size: 18px;
            display: none;

        }

            .direccion{
                margin-top: -10px;
            }

    .cartelera{
        background-color: white;
        background-position: center;
        background-attachment: contain;
        background-size: cover;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        
        flex: 1 1 auto;
        padding: 0px;
        padding-top: 35px;
        margin-top: 20px; 
        margin-left: 0px;
        margin-bottom: 80px;
        color: white;
        
        
        
    }

    .exposicion {
        
        padding: 0px;
        margin-top: 40px;
        display: flex;
        flex-wrap: nowrap;
        font-size: 40px;
        font-weight: 400;
        color: black;
        justify-content: center;
        
        
    }
    .artista{
        display: flex;
        flex-wrap: nowrap;
        font-weight: 400;
        font-size: 100px;
        
        color: black;
        justify-content: center;
        text-align: center;
        
    }

    .cartel1{
        
        color: bisque;
        margin: 0px;
        
        margin-top: 0px;
        margin-bottom: 0px;
        
        font-family: 'Spartan', sans-serif;
        display: flex;
        flex-wrap: nowrap;
        color: black;
        justify-content: center;
        
        
    }

    .cartel2{
        font-size: 16   px;
        color: bisque;
        font-weight:400;
        
        margin-left: 0px;
        margin-top: 0px;
        display: flex;
        flex-wrap: nowrap;
        color: black;
        justify-content: center;
        
        
    }

    .expo{
        font-size: 32px;
        font-weight: 400;
    }

    .expo2{
        font-size: 18px;
        font-weight: 400;
        margin-top: -1vh;
    }

    .expofecha{
        margin-top: 3vh;
        justify-content: left;
        margin-left: 20vh;
        
    }

    

    .linea{
       
        background-color: rgb(182, 182, 182);
        margin-right: 25vh;
        margin-left: 25vh;
        
        margin-top: 10px;
        height: 0.5px;
        color: white;
    }

    .obras{
        background-color:rgb(255, 255, 255);
        background-position: center;
        background-attachment: contain;
        background-size: cover;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;    
        padding: 0px;
        color: black;
        margin-top: 3vh;
        margin-left: 20vh;
        margin-right: 20vh ;
    }
        
        .obra{
            display: flex;
            flex-wrap: nowrap;
            background-color:rgb(255, 255, 255);
            flex-direction: row;    
            padding-top: 30px;
            color: black;
            width: 100%;
            margin-top: 1vh;
            
            
        }
            .cuadro{
                display: flex;
                flex-wrap: nowrap; 
                   
                padding: auto;
                color: black;
                
                justify-content: center;
                
                
                
                background-color:rgb(255, 255, 255);
                
            }
            

                .imgcuadro{
                    border-color: black;    
                    border-width: 0px;          
                    image-rendering: optimizeQuality;
                    height: auto;
                    max-width: 100vh;
                    max-height: 90vh;
                    border-radius: 2px;
                }

            .descripcion{
                display: flex;
                 
                flex-direction: column;
                  
                padding-top: 20px;
                padding-left: 40px;
                padding-right: 40px;
                color: black;
                width:auto;
                margin-left: 20px;
                justify-content: left;
                
                font-weight: 400;
                font-size: 16px;
                background-color: white .5;

            }

            .info{
                text-decoration: none;
                font-weight: bold;
            }

            h3{
                font-weight: 400;
                
            }
	    .btn-primary {
  		color: #fff;
 		background-color: #000;
  		border-color: #000;
	    }

            .btnsubasta{
                background-color:black;
                border-color:black;
                color: white; 
                font-weight: 300;
                padding: 15px;
                
                font-size: 15px;
            }

            .btnsubasta:hover{
                background-color:rgb(56, 56, 56);
                border-color:rgb(56, 56, 56);
                color: white; 
            }

            #exampleModalToggle{
                font-weight: 300;
            }

            h5{
                font-weight: bolder;
            }

            .socialcanvas{
                display: flex;
                text-align: left;
                
                flex-direction: column-reverse;
            }

            .iconoscanvas{
                color: white;
                font-size: 20px;
            }


            
    footer{
        background-color:rgb(255, 255, 255);
        text-align: center;
        -webkit-font-smoothing: subpixel-antialiased;
        font-size: 17px;
        font-family: 'EB Garamond', serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        letter-spacing: .01em;
        margin-top: 50px;
        text-transform: none;
        color: rgb(97, 97, 97);
        
    }
        .iconos{
            font-size: 25px;
            color: black;
            margin-top: 0px;
        }

    footer strong{
        color: black;
    }

    .lineafooter{
        background-color: black;
        
        margin-right: 45vh;
        margin-left: 45vh;
        margin-top: 90px;
        height: 0.5px;
        color: rgb(145, 145, 145);
    }

    .term{ 
                
                color: black; 
                font-weight: normal;
                
                font-family: 'Varela Round', sans-serif;
                font-size: 15px;
                text-decoration: none;
            }

    
            .terms{
                text-decoration: none;
                margin-top: 0px;
                font-size: 14px;
                letter-spacing: 2rem;
                font-weight: bold;
                
                letter-spacing: .01em;
                color: #acacac;
                letter-spacing: .1rem;
        }
    
        .redes{
                margin-top: -10px;
                font-size: 25px;
                letter-spacing: 2rem;
                font-weight: bold;
                
                
                color: #acacac;
                letter-spacing: .2rem;
        }
    
        .redes:hover, .terms:hover{
    
                color: black;
        }

        


     .whatsapp {
                position:fixed;
                width:40px;
                height:40px;
                bottom:20px;
                right:20px;
                background-color: rgba(0, 0, 0, 0.212);
                color:rgb(255, 245, 245);
                border-radius:50px;
                text-align:center;
                font-size:30px;
                z-index:100;
              }
              
              .whatsapp-icon {
                margin-top:5px;
              }
    
              .orden-nav{
                  margin-right: 0vh;
              }
    
              .margen-nav{
                  margin-left: -0%;
              }
    
              .terms{
                text-decoration: none;
                margin-top: 0px;
                font-size: 14px;
                letter-spacing: 2rem;
                font-weight: bold;
                
                letter-spacing: .01em;
                color: #acacac;
                letter-spacing: .1rem;
        } 

        .nav2{
            text-decoration: none;
            font-size: 14px;
            color: black;
        }
           
        

    
@media all and (min-width:2050px){

    .descripcion{
        max-width: 50vh;
    }
}
    

@media all and (max-width:1105px)   {

    .obras{
        background-color: white;
        background-position: center;
        background-attachment: contain;
        background-size: cover;
        display: flex;
        flex-wrap:nowrap;
        margin-right: 20vh;
        margin-left: 20vh;
        flex-direction: column;    
        padding: 40px;
        color: black;
        margin-top: 40px;
        
        justify-items: center;
        align-items: center;
    }

    .obra{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;    
        padding-top: 30px;
        color: black;
        width: auto;
        margin-top: 40px;
        max-width: 500px;
        justify-items: center;  
              
    }
}

@media all and (max-width:1035px) {

   

    .header{
        flex-direction: column;
        margin-right: 10vh;
        margin-left: 10vh;
        background-color: rgb(18, 18, 19);
}
        
    .menu{
       
        flex-direction: row;
        align-items: center;
        background-color: white;
        display: flex;
        flex-wrap: nowrap;
        text-align: left;
        height: 40px;
        margin: 15px;
        /*margin: 0px;*/
     
    }    

    

    .imglogo{
        display:inline;
        height: 40px;
        width: 40px;
        margin: 0px;
        
        
    }

    .nav {
        align-self:center;
        justify-content: center;
        margin-left: 0px;
        
    }

    .nav a{
        display: none;
    }

    .imgiso{
        display:block;
        width: 40px;
        height: 40px;
        
    }

     
        

    .logo{
            display: inline;
            background-color: WHITE;
            display: flex;
            flex-wrap: nowrap;
            flex: 1 1 auto;
            height: 40px;
            width: 40px;
            margin-left: 5vh;
        }
        
    .botonmenu{
        display: inline;
        margin-right: 30px;
        
    }    

    #offcanvasExample{
        background-color:rgb(18, 18, 19) ;
        color: white;
        font-size: 16px;
        max-width: 60vh;
    }

    .botonmenu .btn {
        background-color:white ;
        border-color: white;
        color: black;
        
    }

    .botonmenu .btn:hover{
        background-color:black ;
        border-color: black;
        color:white;
    }
    .btn:active{
        background-color:black ;
        border-color: black;
        color:white;
    }

    .linkmenu{
        text-decoration: none;
        color: white;
    }

    

    
        
    

    .obras{
        background-color:rgba(236, 236, 236, 0) ;
        background-position: center;
        background-attachment: contain;
        background-size: cover;
        display: flex;
        flex-wrap:nowrap;
        margin-right: 10vh;
        margin-left: 10vh;
        flex-direction: column;    
        padding: 0px;
        color: black;
        margin-top: 40px;
        
        justify-items: center;
        align-items: center;
    }

    .obra{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;    
        padding-top: 30px;
        color: black;
        width: auto;
        margin-top: 40px;
        max-width: 500px;
        justify-items: center;        
    }
    .imgcuadro{
        max-width: 100%; 
     }
     .expofecha{

        margin-left: 10vh;
        
    }
    
    .linea{
           
            
            margin-right: 5vh;
            margin-left: 5vh;
            
            margin-top: 0px;
            height: 0.5px;
            color: white;
        }

    }

    @media all and (max-width:700px){
        .imgiso{
            width: 40px;
            height: 40px;
            
    }

    .header{
        
        margin-right: 5vh;
        margin-left: 5vh;
        margin-top: 0px;
        margin-bottom: 0px;
        
    }
    
        .menu{
            background-color: white;
            display:flex;
            flex-wrap: nowrap;
            
            flex: 1 1 auto;
            flex-direction: row;
            height: 65px;   
            margin: 15px;
                           
        }

    .exposicion {
        
        
        font-size: 32px;
        
        
        
    }

    .expofecha{

        margin-left: 5vh;
        margin-right: 5vh;
        
    }

    .expo{
            font-size: 20px;
        }

        .expo2{
            font-size: 12px;
        }

    .obras{
            
            
            margin-top: 1vh;
            margin-right: 2vh;
            margin-left: 2vh;
            
            }
    .artista{
        
        
        font-size: 46px;
        
    }
    
        
        
        
    
    

    .linea{
       
        
        margin-right: 5vh;
        margin-left: 5vh;
        
        margin-top: 0px;
        height: 0.5px;
        color: white;
    }

    .descripcion{
        
        padding-left: 0px;
        padding-right: 0px;
        font-size: 16px;
        

    }

    h3{
        font-weight: 900;
        font-size: 20px;
    }
    .footer{
        margin-left: 2vh;
        margin-right: 2vh;
    }

    }
        
      


    
    @media all and (max-width:600px){
        
        .header{
            margin-left: 0%;
            margin-right: 0%;
        }

        
        
        

        .nav{
            display: none;
        }
            
        
        .imgcuadro{
           max-width: 100%; 
           height: 100%;
           max-height: 60vh;
           
        }

        .botonmenu{
            display: flex;
        }    
    
        #offcanvasExample{
            background-color:rgb(18, 18, 19) ;
            color: white;
            font-size: 15px;
            max-width: 70%;
        }
    
        .btn {
            background-color:rgb(18, 18, 19) ;
            border-color: rgb(18, 18, 19);
            
            padding: 10px;
            
            
        }
    
        .btn:hover{
            background-color:white ;
            border-color: white;
            color:rgb(18, 18, 19);
        }

        .cuadro{
            
            
            height: auto;
            
            
            
        
        }

        .obra{
            margin-left: 1vh;
            margin-right: 1vh;
        }

        .descripcion{
        
            padding-left: 0vh;
            padding-right: 3vh;
            font-size: 12px;
            
       } 
       .imglogo{
           
        margin-left: 2vh;
        
}

    .logo{
        
        margin-left: 0px;
    }

    

    
    .linea{
   
               
        margin-top: 0px;
        margin-left: 15px;
        margin-right: 15px;
        
    }

        .botonmenu{
                display: flex;
                justify-content: right;
                
            }
            .hamburguesa{
                font-size: large;
            }



        .expofecha{
            margin-top: 5vh;
            margin-left: 4vh;
            margin-right: 4vh;
            margin-bottom: -7vh;
        }



    }