@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Roboto:wght@300&display=swap');
/*font-family: 'Roboto', sans-serif;*/


@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
/*font-family: 'Barlow', sans-serif;*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body{
    font-family: 'News Cycle', sans-serif;
    background:white;
    width: 100%;
    height: auto;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items:center;
   
}



.padre {
   
background-image: url(img/fondo3.png);
    
width: 100%;
height:auto;
padding: 5%;
   
    
background-size: cover;
background-attachment: fixed;
background-repeat:repeat;
    
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
    
    
  
}
/*barra*/
.barra{
width: 100%;
height: 100px;
max-width: 950px;
background: white;
margin-bottom: 20px;
padding: 0px 20px;
    
display: flex;
flex-flow: row nowrap;
justify-content:space-between;
align-items: center;
    
/*https://animate.style/*//*son animaciones preestablecidas*/
animation: fadeInDownBig; 
animation-duration: 1s;
    
}

.logoMarca{
background: url(img/LOGO.png);
background-position: center;
width: 250px;
height: 48px;
 
}

.informacion{
 /*background: gray;*/
width: 600px;
height: 50px;
    
font-size: 10px;
    
display: flex;
flex-flow: row nowrap;
justify-content:center;
align-items: center;
    
}

/*barra*/
/*present*/
.present{
background: white;
width: 100%;
max-width: 950px;
height: auto;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
margin-bottom: 20px;
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
    
/*https://animate.style/*//*son animaciones preestablecidas*/
animation: zoomInLeft; 
animation-duration: 2s;
animation-delay:  0.5s;
animation-fill-mode:backwards;

}

.p1{
/*background: gray;*/
margin-top: 30px;
width: 100%;
max-width: 950px;
font-family: 'Barlow', sans-serif;
    
text-align:center;
font-size: 15;
}

.paneles{
/*background: red;*/
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
height: 600px;
    
display: flex;
flex-flow: row nowrap;
justify-content:space-between;
align-items: center;
    
}

.pan1{
width: 290px;
height: 600px;
opacity: 85%;
background-image: url(img/pan1.png);
background-position: center;
}
.pan2{
width: 290px;
height: 600px;
opacity: 85%;
background-image: url(img/pan2.png);
background-position: center;
}
.pan3{
width: 290px;
height: 600px; 
opacity: 85%;
background-image: url(img/pan3.png);
background-position: center;
}

.ph:hover {
width: 280px;
height: 590px;
opacity: 100%;

transition-duration: 1s;

}
/*present*/






/*jobs*/
.jobs{
background-image: url(img/f2.png);
opacity: 80%;
background-position: center;
width: 100%;
max-width: 950px;
height: auto;
padding:30px 30px 0px 30px;
margin-bottom: 20px;
    
display: flex;
flex-flow: row wrap;
justify-content:space-between;
align-content:space-around;
}

.job{
background:white;
width: 430px;
height: auto;
padding: 20px;
text-align: justify;
margin-bottom: 30px;
    
display: flex;
flex-flow: column wrap;
justify-content:flex-start;
align-content:space-around;
}

h2{
color:aliceblue;
background: #0e1dd6;
height: 40px;
font-size: 20px;
font-family: 'Barlow', sans-serif;
    
display: flex;
flex-flow: column wrap;
justify-content:center;
align-content:center;
}

.galeria{
background: #ffffff;
width: 100%;
height: 230px;
overflow: hidden;
margin-top: 10px;

    
}

.floros{
/*background: gray;*/
width: 90%;
height: auto;
color: black;
font-family: 'Barlow', sans-serif;
    text-align: center;
/*overflow:hidden;*/
    
display: flex;
flex-flow: column wrap;
justify-content:flex-start;
align-items:center;
}

.contacto{
width: 100%;
height: 40px;
background:#17c417; 
background-image: url(img/boton%20largo.png);
background-position: center;
}

.contacto:hover{background-image: url(img/boton%20largo%20H.png);
}


/*jobs*/

/*promo*/
.promo{
background-image: url(img/PROM.png);
background-position: center;
width: 100%;
max-width: 950px;
height: 349PX;
margin-bottom: 20px;
overflow: hidden;
    
    
display: flex;
flex-flow: column wrap;
justify-content:center;
align-content:center;
}


/*promo*/

/*pie*/
.pie{
background:#ffffff;
background-position: center;
width: 100%;
max-width: 950px;
height: 100px;
padding:10px 10px 10px 10px;
    
display: flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
}


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

/*barra*/
@media (max-width:500px) {
     .barra{
     width: 100%;
     height: auto;
     padding: 20px;
         
    display: flex;
flex-flow: column nowrap;
justify-content:center;
align-content: center;
    }
    

    
@media (max-width:500px) {
     .logoMarca{
    width: 250px;
    height: 48px;
     margin-bottom: 10px;
    }

    
    
@media (max-width:500px) {
    .informacion{
    display: none;
   
    }

/*barra*/



    
    


/*jobs*/ 

@media (max-width:500px) {
.jobs{
padding:0;
height:auto;
background-image:none;

       
display: flex;
flex-flow: column wrap;
justify-content:space-between;
align-content:center;

      }  
    
@media (max-width:500px) {
.job{
width: 100%;
height: auto;
margin-bottom: 10px;



      }
    
@media (max-width:500px) {
     h2{
width: 100%;
height: 80px;
      } 
    
@media (max-width:500px) {
.galeria{
background: #ffffff;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 10px;

}

    
@media (max-width:500px) {
.floros{
width: 100%;
height: auto;
margin-bottom: 20px;
text-align:center;
color: black;
      }

@media (max-width:500px) {
.contacto{
width: 100%;
height: 40px;
      } 
    
/*jobs*/ 


    
    

 

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