@import url("https://fonts.googleapis.com/css?family=Varela+Round");


.galeria{
    
  padding: 10px 0px;  
  margin: 0px 0px;  
    
    
}






.texto{
   font-weight: 700;
   font-size: 45px;
   width:200px;
   height:50px;
   color: white;
   float:left;
   position: static;
}

.texto2{
    text-align: left;
    padding-left: -100;
    margin-left: -100;
font-weight: 700;
    font-size: 50px;
   width:1100px;
   height:50px;
   color: white;
   float:left;
   position: static;
}

.texto3{
font-weight: 600;
    font-size: 40px;
   width:200px;
   height:100px;
   color: white;
   float:left;
   position: static;
}

.opacity{
    margin-bottom: 15px;
   background-color:rgb(0,0,0);
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
   opacity: 0.7;
   width:200px;
   height:70px;
   position:relative;
   top:0px;
background: black;
  animation: color-me-in 3s;

}




.opacity2{
    margin-bottom: 15px;
   background-color:rgb(0,0,0);
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
   opacity: 0.7;
   width:500px;
   height:70px;
   position:relative;
   top:0px;
 background: black;
  animation: color-me-in 3s;

}




.opacity3{
    margin-bottom: 15px;
   background-color:rgb(0,0,0);
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
   opacity: 0.8;
   width:355px;
   height:70px;
   position:relative;
   top:0px;
  
background: black;
  animation: color-me-in 3s; 
}


/******************************************************** GTG CANADA *********************************************************/


.opacitygtg1{
    margin-bottom: 15px;
   
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
   
   width:200px;
   height:45px;
   position:relative;
   top:0px;
        
            }
.opacitygtg1 .texto{
    
    font-size: 35px;
    
}


.opacitygtg2{
    margin-bottom: 15px;
  
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
  
   width:500px;
   height:50px;
   position:relative;
   top:-10px;
 

}




.opacitygtg3{
    margin-bottom: 15px;
  
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    

   width:355px;
   height:50px;
   position:relative;
   top:-20px;

}







/******************************************************** FIN GTG CANADA *********************************************************/

/********************************************************TEMP-COAT*********************************************************/

.opacitytemp1{
    margin-bottom: 15px;
   background-color:rgb(0,0,0);
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
/*   opacity: 0.4;*/
   width:550px;
   height:50px;
   position:relative;
   top:0px;
background: none;
 

}

.opacitytemp1 .texto{
    
    color:white;
    
    
}
.opacitytemp2{
    margin-bottom: 15px;
    margin-left: 8%;
   background-color:rgb(0,0,0);
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    
/*   opacity: 0.7;*/
   width:380px;
   height:100px;
   position:relative;
   top:0px;
background: none;
 

}

/****************************************************** FIN TEMP-COAT*********************************************************/


/********************************************************SAVE SORB*********************************************************/

.opacitysave1{
    margin-bottom: 15px;
   background-color:rgb(0,0,0);
    padding-top: 2px;
    padding-left: 20px;
    padding-bottom: 20px;
        margin-left: 2%;
  
   width:900px;
   height:50px;
   position:relative;
   top:-31px;
background:none;
  animation: color-me-in 3s;

}
.opacitysave2{
    margin-bottom: 15px;
    margin-left: 8%;
/*   background-color:rgb(0,0,0);*/
    padding-top: 2px;
    padding-left: 20px;
    padding-bottom: 20px;
    
/* opacity: 0.7;*/
   width:800px;
   height:100px;
   position:relative;
   top:-31px;
/*background: black;*/
/*  animation: color-me-in 3s;*/

}

.opacitysave2 .texto2{
    
    color:white;
    font-size: 40px;
    
}

/****************************************************** SAVE SORB*********************************************************/

/********************************************************RENEWABLE*********************************************************/

.opacityren1{

    margin-bottom: 15px;
 
    padding-top: 2px;
    padding-left: 20px;
    padding-bottom: 20px;
        margin-left: 2%;
/*   opacity: 0.7;*/
   width:260px;
   height:10px;
   position:relative;
   top:0px;
background: none;
  animation: color-me-in 3s;
}

.opacityren1 .texto2{
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 1000;
  src: url("../fonts/Montserrat/montserrat-v12-latin-100.eot");
  /* IE9 Compat Modes */
  src: local("Montserrat Thin"), local("Montserrat-Thin"), url("../fonts/Montserrat/montserrat-v12-latin-100.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/montserrat-v12-latin-100.woff2") format("woff2"), url("../fonts/Montserrat/montserrat-v12-latin-100.woff") format("woff"), url("../fonts/Montserrat/montserrat-v12-latin-100.ttf") format("truetype"), url("../fonts/Montserrat/montserrat-v12-latin-100.svg#Montserrat") format("svg");
  /* Legacy iOS */
 /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
 
  font-size: 34px;
    color:darkgray;
}

.opacityren2{
    margin-bottom: 15px;
    margin-left: 2%;
  
    padding-top: 0px;
    padding-left: 20px;
    padding-bottom: 0px;
    
/*   opacity: 0.7;*/
   width:370px;
   height:0px;
   position:relative;
   top:0px;
background: none;
  animation: color-me-in 10s;

}
.opacityren2 .texto2{
    margin-top: -15px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 1000;
    src: url("../fonts/Montserrat/montserrat-v12-latin-100.eot");
    /* IE9 Compat Modes */
    src: local("Montserrat Thin"), local("Montserrat-Thin"), url("../fonts/Montserrat/montserrat-v12-latin-100.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/montserrat-v12-latin-100.woff2") format("woff2"), url("../fonts/Montserrat/montserrat-v12-latin-100.woff") format("woff"), url("../fonts/Montserrat/montserrat-v12-latin-100.ttf") format("truetype"), url("../fonts/Montserrat/montserrat-v12-latin-100.svg#Montserrat") format("svg");
   
  font-size: 34px;  
    color:darkgray;
}

.opacityren3{
    margin-bottom: px;
    margin-left: 2%;

    padding-top: 2px;
    padding-left: 20px;
    padding-bottom: 20px;
    
/* opacity: 0.7;*/
   width:340px;
   height:70px;
   position:relative;
   top:0px;
background: none;
  animation: color-me-in 3s;

}

.opacityren3 .texto2{
    
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 1000;
    src: url("../fonts/Montserrat/montserrat-v12-latin-100.eot");
    /* IE9 Compat Modes */
    src: local("Montserrat Thin"), local("Montserrat-Thin"), url("../fonts/Montserrat/montserrat-v12-latin-100.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat/montserrat-v12-latin-100.woff2") format("woff2"), url("../fonts/Montserrat/montserrat-v12-latin-100.woff") format("woff"), url("../fonts/Montserrat/montserrat-v12-latin-100.ttf") format("truetype"), url("../fonts/Montserrat/montserrat-v12-latin-100.svg#Montserrat") format("svg");
   
  font-size: 34px;  
    color:darkgrey;
}

.opacityren4{
    margin-top: -30px;
    margin-bottom: 15px;
    margin-left: 2%;
   background-color:rgb(0,0,0);
    padding-top: 2px;
    padding-left: 20px;
    padding-bottom: 20px;
    
/*   opacity: 0.7;*/
   width:355px;
   height:80px;
   position:relative;
   top:0px;
   
background: none;
  
/animation: color-me-in 8s;

}
.opacityren4 .texto2{
    
 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 font-style: normal;
  font-size: 30px;  
     color: darkgray;

}

@media (max-width:1280px){

.opacityren2 .texto2{

    
    margin-top: -15px;
  padding-left: -120px;
    margin-left: 50px;
}
    
    .opacityren3 .texto2{
    padding-left: 50px;
        margin-bottom: 10px;
        
    } 
    
    .opacityren1 .texto2{
        padding-left: 50px;
        
        
    } 
    
    .opacitysave2 .texto2{
     margin-left: 55px;   
        
    }


}


@media (min-width:800px){
    
    .opacityren4 .texto2{
       
        margin-left: 400px;
        padding-left: -100px;
    }
    
    
    
}


/****************************************************** RENEWABLE *********************************************************/
@keyframes color-me-in {
  /* You could think of as "step 1" */
  0% {
  
      opacity: 0.0;
  }
   
  /* You could think of as "step 2" */
  100% {
      opacity: 1;

  }
}

/*
.opacity:hover{
    
    background-color: aqua;
    width: 1920px;
}

.opacity:{
    
    background-color: aqua;
    width: 1920px;
}
*/

@media (max-width:1100px){
    
    .texto{
  
            font-size: 28px;
   
          }
    
    .texto2{
        
            font-size: 28px;
           }
    
    .opacitysave2 .texto2{
                            margin-top: -25px;

                            font-size: 28px;

                        }
    .opacityren4{
        padding-left: 500px;
                    
                }
    .opacityren4 .texto2{
        margin-left: -150px;
        font-size: 25px;
        
        
                        }
    
}

/*Bloque contenedor de botones de producto*/
.album{
    
   text-align: center;
   padding: 10px;
   margin-left: 25%;
    position: absolute;
    z-index: 1;
}

.album .bloque{
   margin-right: 70px;
   display: inline-block;
   width: 130px; /* 48% */
   height: 55px;
   vertical-align: top;
   border: 1px solid white;
    z-index: 1;
    
}

/*modificacion de color de dropdown button y fondp bootstrap */
.dropdown-menu { background-color: #E7E7E7; }

.dropdown-toggle{
 color: black;
  background-color: #E7E7E7 !important;
}

.dropdown-toggle:hover{
     color: darkred;
     background-color: yellow; 
}

.drodown-toggle:visited{
    
     color: blue;
     background-color: yellow; 
    
}

    
    
}