@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    
* { padding: 0; margin: 0; box-sizing: "border-box"; }

/* style fonts */

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?nzdfs3');
  src:  url('fonts/icomoon.eot?nzdfs3#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?nzdfs3') format('truetype'),
    url('fonts/icomoon.woff?nzdfs3') format('woff'),
    url('fonts/icomoon.svg?nzdfs3#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-align-justify:before {
  content: "\f039";
}

body {
    margin: 0
}


/* Version DESKTOP */
.contenedor {
    min-width: 400px;}


/***********************************************************************
*  NAVEGADOR     * 
***********************************************************************/




header {
    width: 100%;
    margin: 0;
    position: fixed;}

.topnav {
  background-color: #EA5B62;
  overflow: hidden;}

.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;}

.topnav a:hover {
  background-color: #EA5B62;
  color: white;
}

/* boton activado */
.topnav a.active {
  background-color: #EA5B62;
  color: #FFFFFF;
}

/* esconde boton menu para mobile */
.topnav .icon {display: none;}



/***********************************************************************
*  CUERPO    * 
***********************************************************************/



.contenido{background-color: #FBFCFC;}



/*********************
*  seccion UNO    * 
**********************/



.seccionuno{
    background-color: #FBFCFC;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    width: 100%;
    height: auto;}

.seccionuno article {
    text-align: center;}

.seccionuno img{
    width: 100% ;
    height: auto;
    margin-top: 2rem;
    }





/*********************
*  seccion media    * 
**********************/


.descripapp {
    background: #FBFCFC;
    display:flex;
    flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: flex-start;
    margin: 2rem 0;
}

.descripapp article {
    width: 45%; 	}

.art-izq {background: #FBFCFC; text-align: center; }
.art-der {background: #FBFCFC;}

.textodescrip {
    text-align: center;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;}

.divtexto {
    padding: 1rem 2rem 0 2rem;
    color: white;
    text-align: center;
    }

.divtexto p{
    padding: 1rem 0;
}

.colorconcurso {color: #E88F94;}

.colorproyeccion {color: darkcyan;}

.art-txt1{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;}

.art-txt2{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    text-align: center;}

.mockup1{
    width: 100%;
    display: block;
    justify-content: center;
    }

.mockup1 img {
    width: 90%;
    justify-content: center;}


.mockup2{
    width: 100%;
    display: block;
    justify-content: center;
    }

.mockup2 img {
    width: 90%;
    justify-content: center;}





/*************************
*  seccion VIDEO   * 
**************************/



.video{
    background-color: #16848a;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    width: 100%;
    height: auto;}


.video iframe{
    width: 560px;
    height: 315px;
    margin: 1rem auto;
    }



/*********************
*  seccion descargar    * 
**********************/



#descargar {
    background: #FBFCFC;
    display: flex;
    justify-content: center;
    align-items: center;}

.moc {
    margin: 2rem;
    width: 250px;
    height: auto;
    float: right;
}

.texto {
    max-width: 350px;
    color: black;
    text-align: center;}

.texto p{
    padding: 1rem 0;}

.txt1{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;}

.txt2{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;}



/*********************
*  seccion footer   * 
**********************/

.legales {
    color: #fce5f2;
    background: #EA5B62 ;    
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    font-size: 0.7rem;
    text-align: center;
    padding: 2rem;
    width: auto;}













/***********************************************************************
*  RESPONSIVE   * 
***********************************************************************/


@media (max-width: 790px) {

/***********************
*  NAV   * 
************************/
    
  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }


  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


    
    
/***********************
*  seccion MEDIA   *  en .divtexto donde modifico todo el texto a negro, como hacer para modificar parte a blanco y a negro, me mareo ya.
************************/
   
     .descripapp {
        flex-direction: column;
        justify-content: center;}
    
    .descripapp article {width: 100%;}   
    
    .art-izq {background: #E88F94;}
     
    .art-der {background: #FBFCFC;} 
    
    
    
    .divtexto {color: black;}                        
    
/*************************
*  VIDEO   * 
**************************/

    
    
 .video iframe{
    width: 340px;
    height: 191px;
    margin: 1rem auto;
    }
   
    
 /*************************
*  SECCION DESCARGA   * 
**************************/   
    
    
    #descargar {
        flex-direction: column;
        padding: 2rem;}
    
    .moc {
        margin-top: 0px;}
  
    

}