@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: "Social Media Circled";
    src: url(../Fonts/SocialMediaCircled.eot); /* IE */
    src: local("Social Media Circled"), url(../Fonts/SocialMediaCircled.ttf) format("truetype"), url(../Fonts/SocialMediaCircled.woff) format("woff"), url(../Fonts/SocialMediaCircled.otf) format("opentype"), url(../Fonts/SocialMediaCircled.woff2) format("woff2"); /* resto de navegadores */
}

@font-face {
    font-family: "Read Icons";
    src: url(../Fonts/ReadIcons.eot); /* IE */
    src: local("Read Icons"), url(../Fonts/ReadIcons.ttf) format("truetype"), url(../Fonts/ReadIcons.woff) format("woff"), url(../Fonts/ReadIcons.otf) format("opentype"), url(../Fonts/ReadIcons.woff2) format("woff2"); /* resto de navegadores */
}

/*RETICULA*/
* {padding:0; margin:0}
#pagina {max-width:1020px; margin:0 auto}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {float:left; margin:0 1% 0 0}
.c1 {width:7%}
.c2 {width:15.3%}
.c3 {width:23.8%}
.c4 {width:32.2%}
.c5 {width:40.8%}
.c6 {width:49.2%}
.c7 {width:57.6%}
.c8 {width:66.2%}
.c9 {width:74.6%}
.c10 {width:83%}
.c11 {width:91.5%}
.c12 {width:100%}
.end {margin:0}

.c2redes {width:15.3%}

/*IMAGENES RET*/
.c1 img, .c2 img, .c3 img, .c4 img, .c5 img, .c6 img, .c7 img, .c8 img, .c9 img, .c10 img, .c11 img, .c12 img {width:100%; display:block}

@media screen and (max-width:768px) {.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {width:100%; float:left}
}


/*ESTILOS GENERALES*/
body {background-color:#FFF}
.bienvenidatxt {font-family: 'Raleway', sans-serif; font-size:130%; text-align:center; padding-top:2%; margin-left:15%; margin-right:15%}
.contenedor-flex {display:flex; justify-content:center; align-items:center;}
.contenido-flex {align-items:center; align-content:center}
.logo-background {background-color:#000; padding-top:1%; padding-bottom:3%}
.logo-img img {width:10%; margin-left:auto; margin-right:auto}
.white-bar {width:100%; height:20px; border:0}
.title {text-align:center; font-family: 'Ephesis', cursive; font-size:300%; padding-top:1%}
footer {position:relative; width:100%; bottom:0; padding-bottom:3%; margin-left:auto; margin-right:auto}
.pie-creditos {text-align:center; color:#666; font-family: 'Raleway', sans-serif; font-size:80%}
.redes-txt {font-family: "Social Media Circled"}
.icons-read {font-family: 'Read Icons'; display:inline-block; font-size:190%; text-align:center; color:#1CB0D4; letter-spacing:25px; margin-left:auto; margin-right:auto; padding-top:4%}

ul li {text-decoration:none; list-style:none; display:inline-block; z-index:99999}
ul li a {height:15px; display:block; text-decoration:none; padding-top:8px; padding-bottom:8px; color:#000}
ul li a:hover {color:#F4A6B0}
 
/*Resaltado de texto*/
* {user-select: none;}
*::selection {background: none;}
*::-moz-selection {background: none;}

@font-face {
      font-family: "reading_app";
	  src: url(../Fonts/reading_app.eot);
	  src: local("reading_app"), url(../Fonts/reading_app.svg) format("svg"),
      src: url(../Fonts/reading_app.eot) format("opentype"),
           url(../Fonts/reading_app.woff) format("woff"),
           url(../Fonts/reading_app.ttf) format("truetype");
      font-weight: normal;
      font-style: normal;
    }
    .demo-icon {
      font-family: "reading_app";
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

@media all and (max-width:768px) {
.title {text-align:center; font-family: 'Ephesis', cursive; font-size:250%; padding-top:4%}
.logo-background {background-color:#000; padding-top:1%; padding-bottom:8%}
.bienvenidatxt {font-family: 'Raleway', sans-serif; font-size: 110%; text-align:center; padding-top:6%}
.logo-img img {width:20%; margin-left:auto; margin-right:auto}
.icons-read {font-family: 'Read Icons'; display:inline-block; font-size:160%; text-align:center; color:#1CB0D4; letter-spacing:25px; margin-left:auto; margin-right:auto; padding-top:4%}
	
}