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




@font-face{
           font-family: day;
           src: url(Today-Easter.ttf);
             
          }

@font-face{
           font-family: ee;
           src: url(Franchise.ttf);
             
          }







.contenedor{
             
             width: 100%;
             max-width: 2000px;
             margin: auto;
             display: flex;
             flex-wrap:  wrap;
        }

header{
            
            width: 100%;
            padding: 20px;
            padding-left: 50px;
            background-color: black;
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-direction:row;
            flex-wrap:wrap;}  

header .logo img{
    width: 150px;
    
}       

header nav{
          width: 60%;
          margin-right: 60px;

          display: flex;
          flex-wrap: wrap;
          align-items: center;}  

header nav a {
           text-align: center;
           text-decoration: none;
           font-family: day;
           font-weight: bold;
           font-size: 25px;
           padding: 5px;
           color: white;

           flex-grow: 1;
         }


.portada{
          width: 100%;
               
                    
    }

.portada img{ 
         width:100%;
         height: 100%;
          
         margin: auto;
         }
 







.menu{
        width: 100%;
        background: black;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        display: flex;
        flex-wrap: wrap;}



.articulo{
            width:300px;
            margin: auto;
           
          }




.articulo h1{  color:rgb(255, 255, 255);
               text-shadow:  10px 10px 10px ORANGE ,
                             -5px 15px 10px ORANGE;
               text-align: center;
               font-size: 40px;
               font-family: serif;
               font-weight: bold;


                }

 .menues{
         width: 100%;
         background: black;
         padding: 20px;
         display: flex;
          flex-wrap: wrap;
         justify-content: center;
         align-items: center;
        
         

          
} 


.parte{
            width: 300px;
            background:  orange;
            background-repeat: no-repeat;
            background-size: cover;

            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: white;
            border-radius: 10px ;
            border: solid rgb(121, 82, 0);
            box-shadow: 10px 10px 20px black;
                       
            }
.parte h1{
              text-decoration: underline;
              color:black;
              padding: 10px;
              font-size: 18px;
              font-family: sans-serif;
           font-weight: bold;}


.parte p{
              
              color:black;
              font-family:day;
              font-size: 20px;
              
           font-weight: bold;
              }


.parte2 p{
              
              color:black;
              
              font-size: 20px;
              font-family: day;
           font-weight: bold;

              }

.parte3 p{
              
              color: black;
              
              font-size: 26px;
              font-family: day;
           font-weight: bold;
              }

.parte4 p{
              
              color:black;
              
              font-size: 28px;
              font-family: day;
              font-weight: bold;
              }


 .parte2{
            width: 300px;
            background: orange;
            background-repeat: no-repeat;
            background-size: cover;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: black;
            border-radius: 10px ;
            border: solid rgb(121, 82, 0);
            box-shadow: 10px 10px 20px black;
          }  

.parte2 h1{
              text-decoration: underline;
              color:black;
              padding: 10px;
              font-size: 20px;
              font-family: sans-serif;
           font-weight: bold;}


  .parte3{
            width: 300px;
            background:orange;
            background-repeat: no-repeat;
            background-size: cover;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color: brown;
            border-radius: 10px ;
            border: solid rgb(121, 82, 0);
            box-shadow: 10px 10px 20px black;
            
           } 

.parte3 h1{
              text-decoration: underline;
              color:black;
              padding: 10px;
          font-size: 18px;
              font-family: sans-serif;
           font-weight: bold;}




   .parte4{
            width: 300px;
            background: orange;
            background-repeat: no-repeat;
            background-size: cover;
            float: left;
            margin: 10px;
            height: 200px;
            text-align: center;
            padding: 6px;
            color:black;
            border-radius: 10px ;
            border: solid rgb(121, 82, 0);
            
            box-shadow: 10px 10px 20px black;
              }  

.parte4 h1{
              text-decoration: underline;
              color: black;
              padding: 10px;
          font-size: 18px;
              font-family: sans-serif;
           font-weight: bold;}












.textt{       width: 300px;
              
              float: left;
              text-align: center;
              padding-top: 60px;
              color: black;
              font-weight: bold;
              font-family: dun;

                 }





.pis {      
        float: left;
        margin-left: 5px;
        }

 .pis img{   
           
             border: solid blue 5px;
             border-radius: 5px;
             }          


.texto{
            
            width: 200px;
            background: lightblue;
            float: left;



            }

.texto h1{
            text-align: center;
            padding-top: 100px;



             }

 




.realizamos{
                    width: 100%;
                    background: ;
                    text-align: center;}

 .realizamos h1,h2 ,h3{ 
                         font-size: 40px;
                         text-align: center;
                         font-family: sans-serif;

                          }                   



.colocacion{
              width: 100%;
              background: orange;
             text-align: center;
              color: black;}

.colocacion  h3{font-family: day;
               font-weight: black;
               font-size: 40px;
              }


              .colocacion1{
               width: 100%;
               background: black;
              text-align: center;
               color: white;}


              .colocacion h4{font-family: serpentine;
               font-weight: orange;
               font-size: 40px;
              }

              .colocacion1 h4{font-family: serpentine;
               font-weight: orange;
               font-size: 20px;
              }



.produc{
              width: 100%;
            
              background: ;
              display: flex;
              flex-wrap: wrap;
              
              }          




video{
               width: 300px;
               margin-left: 100px;
               padding: 5px;
               
               float: left;
               

              
             
                }

        
                



.trabajos01{
              background: ORANGE;
              width: 100%;
              text-align: center;
              color: black;

      }      

.trabajos01 h1{
               font-family: day;
               font-weight: bold;
               font-size: 40px;}


.nuestros{
           width: 100%;
           
         
          }

.nuestros img{  
                
                
                width: 200px;
                margin: 5px;
                margin-left: 15px;
                
               border-radius: 10px ;
               border: solid white;}


         .nuestros001{
                  width: 100%;
                  
                
                 }
       
       .nuestros001 img{  
                       
                       
                       width: 200px;
                       margin: 5px;
                       margin-left: 150px;
                       
                      border-radius: 10px ;
                      border: solid white;}
       







 .ciudades{
                  background: orange;
                  width: 100%;
                  text-align: center;
                  color: white;
    
          }      
    
    .ciudades h5{
                   font-family: day;
                   font-weight: bold;
                   color: black;
                   
                   font-size: 40px;}
    








footer{
         width: 100%;
         height: 150px;
         background: black;
         color: white;
         text-align: center;
         padding-top: 20px;}


footer p{
           
            color:orange;
            font-size: 20px;
           }


.container-redes img{
                 
                 position: fixed;
                 bottom: 20px;
                 right: 140px;
                 width: 50px;}



.what02 img{
                 position: fixed;
                 bottom: 20px;
                 right: 80px;
                 width: 50px;
              }



.facelogo img{
                 position: fixed;
                 bottom: 20px;
                 right: 200px;
                 width: 50px;}





.container-redes{
                 position: fixed;
                 bottom: 20px;
                 right: 10px;
                 width: 50px;
                 display: flex;

                 }


.instalogo img{
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
                 width: 50px;}


   .container-redes{
                  position: fixed;
                  bottom: 20px;
                  right: 10px;
                  width: 50px;
                  display: flex;
 
                  }
 
 
 .instalogo img{
                  position: fixed;
                  bottom: 20px;
                  right: 20px;
                  width: 50px;}
 
                  


#botonarriba{
                position: fixed;
                bottom: 20px;
                left: 20px;
                 width: 30px;}





@media screen and ( max-width: 600px){
 

 header{
        margin-right: ;
        display: flex;
        justify-content: center;}


header .logo img{
    padding-bottom: 10px;

    width: 200px;
    animation-name: logo;
    animation-duration: 2s;
    animation-delay: 0;
  

}





@keyframes logo{
                  0%{
                transform: scale(0.5);
                }}





header nav{
          width: 100%;
          height: 150px;
          padding: -50px;
                   
          text-decoration: underline  ;
          
          
          }  

header nav a  {
           width: 100%;
           
           font-size: 25px;
           padding: 5px;
           margin-left: 50px;
           
         
         }
    



video{
            width: 200px;
            height:200px;
            margin-left: 100px;
            border: 2px solid blue;
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            

            
            }

.portada {

          width: 100%;
          display: flex;
}








.trabajos01 h1{
              margin-left: 120px;}


.menues h1{
            margin-left: 90px;}


.parte4 h1{
            margin-left: 95px;}

.parte3 h1{
            margin-left: 85px;}
















.nuestros img{
              
              margin-left: 25px;
              width: 150px;
               border-radius: 10px;}




.container-redes {
               
                   width: 100%;   }




.container-redes img{
                 
                 bottom: 20px;
                 right: 50px;
                 width: 40px;
                 }

.what01 img{
                 position: fixed;
                 bottom: 20px;
                 right: 80px;
                 width: 40px;
              }





.what02 img{
                 position: fixed;
                 bottom: 20px;
                 right: 130px;
                 width: 40px;
                
              }



.facelogo img{
                 position: fixed;
                 bottom: 20px;
                 right:180px;
                 width: 40px;
                }

.instalogo img{
                 position: fixed;
                 bottom: 20px;
                 right: 25px;
                 width: 40px;}



.TIK img{
                 position: fixed;
                 bottom: 20px;
                 right: 80px;
                 width: 40px;}





footer p,h1{
         display: flex;
         flex-wrap: wrap;
         justify-content: left;
         padding-left: 20px;
         font-size: 20px;
         
       }

footer p{
        font-size: 20px;}





     }       


.ciudades img{
               width: 10px;
               
              }







@media screen and ( max-width: 365px){
 

 header{
        margin-right: 30px;
        display: flex;
        justify-content: center;}


header .logo img{
    padding-bottom: 10px;

    width: 250px;
    animation-name: logo;
    animation-duration: 2s;
    animation-delay: 0;
  

}


@keyframes logo{
                  0%{
                transform: scale(0.5);
                }}





header nav{
          width: 100%;
          height: 150px;
          padding: -50px;
                   
          text-decoration: underline  ;
          
          
          }  

header nav a  {
           width: 100%;
           
           font-size: 20px;
           padding: 5px;
           margin-left: 50px;
           
         
         }
    

.articulo h1{
               margin-left: -30px;}







.realizamos h1, h2, h3{
                    font-size: 20px;}



 

video{
            width: 200px;
            height:200px;
            margin-left: 100px;
            border: 2px solid blue;
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            

            
            }



  .ciudades img{
               width: 50px;
               
              }








.nuestros img{
              
              margin-left: 10px;
              width: 100px;
               border-radius: 10px;}









.container-redes img{
                 
                 bottom: 20px;
                 right: 50px;
                 width: 40px;
                 }






.what02 img{
                 position: fixed;
                 bottom: 20px;
                 right: 80px;
                 width: 40px;
                
              }



.facelogo img{
                 position: fixed;
                 bottom: 20px;
                 right:180px;
                 width: 40px;
                }

.instalogo img{
                 position: fixed;
                 bottom: 20px;
                 right: 25px;
                 width: 40px;}

   .TIK img{
                  position: fixed;
                  bottom: 20px;
                  right: 130px;
                  width: 40px;}
         
         





.trabajos01 h1{
                 margin-left: 45px;}

.trabajos01 h2{
                 margin-left: 40px;}







footer p,h1{
         display: flex;
         flex-wrap: wrap;
         justify-content: left;
         padding-left: 20px;
         font-size: 15px;}

footer p{
        font-size: 20px;}




    









     }       

@media screen and ( max-width: 350px){
 

 header{
        margin-right: 30px;
        display: flex;
        justify-content: center;}


header .logo img{
    padding-bottom: 10px;

    width: 250px;
    animation-name: logo;
    animation-duration: 2s;
    animation-delay: 0;
  

}


@keyframes logo{
                  0%{
                transform: scale(0.5);
                }}





header nav{
          width: 100%;
          height: 150px;
          padding: -50px;
                   
          text-decoration: underline  ;
          
          
          }  

header nav a  {
           width: 100%;
           
           font-size: 20px;
           padding: 5px;
           margin-left: 50px;
           
         
         }
    
.portada img{
               width: 100%;}







     }       












@media screen and ( max-width: 330px){
 

 header{
        margin-right: 30px;
        display: flex;
        justify-content: center;}


header .logo img{
    padding-bottom: 10px;

    width: 250px;
    animation-name: logo;
    animation-duration: 2s;
    animation-delay: 0;
  

}


@keyframes logo{
                  0%{
                transform: scale(0.5);
                }}





header nav{
          width: 100%;
          height: 150px;
          padding: -50px;
                   
          text-decoration: underline  ;
          
          
          }  

header nav a  {
           width: 100%;
           
           font-size: 20px;
           padding: 5px;
           margin-left: 50px;
           
         
         }
    

video{
            width: 200px;
            height:200px;
            margin-left: 70px;
            border: 2px solid blue;
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            

            
            }

.nuestros img{  
                
                
                width: 120px;
                margin: 2px;
                margin-left: 15px;
                
               border-radius: 10px ;
               border: solid white;}


.trabajos01 h1{
                 margin-left: 5px;}

.trabajos01 h2{
                 margin-left: 10px;
                 }


.parte h1{
           margin-left: 60px;}

.parte p{
           font-size: 25px;}


.parte2 h1{
           margin-left: 60px;}

.parte2 p{
           font-size: 29px;}           

.parte3 h1{
           margin-left: 50px;}

.parte3 p{
           font-size: 25px;} 



.parte4 h1{
           margin-left: 60px;}

 .parte4 p{
           font-size: 25px;}                     


     }