/***
The new CSS reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: initial;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
/* Reset General --------------------------------------------*/
html {
background-color:#DBE1DF;
padding:0 auto 0 auto;
align-content: center;
width: 100%;
display: flex;
position: center;
font-size: 1.2em;
text-align: justify;
}
body {
background-color:#FFF;
padding:1em 3em 3em 3em;
width: 900px;
min-width: 900px;
margin: auto;
font-family: "Open Sans";
font-weight: 200;
}
#header, #banner, #quehacemos, #quienesusan, #comohacemos, #cienciahabla, #elalquimista, #footer {
padding:0 2.5em 0 2.5em;
}
#header {
background-color:#EF4A24;
padding-bottom: 4em;
background-image: url("img/circles.svg");
background-size: 800px;
border-width:70px 0 0 0;
border-style: solid;
border-color: #FFF;
}
#header h1 {
display:block;
width:310px;
height: 400px;
background-image: url("img/logo.svg");
margin: -80px auto 3em auto;
}
#header h1 span{
display:none;
}
#header p {
color:#fff;
padding-bottom: 1em;
}
#header p span {
font-family: alkaline, sans-serif;
font-weight: 800;
font-style: normal;
font-size: 1.3em;
}
section h2 {
font-family: "kinescope", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 3em;
}
#banner {
background-color:#411411;
padding: 2.5em;
text-align:center;
color:#fff;
}
#banner h2 {
font-family: alkaline, sans-serif;
font-weight: 800;
font-style: normal;
color: #F04B24;
font-size: 3.2em;
margin-top:.2em;
}
#banner h3 {
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: .2rem;
}
.separator {
display:block;
width:3em;
height:1px;
background-color:#fff;
margin: 2em auto 0 auto;
}
#quehacemos {
background-color:#DBE1DF;
padding: 2.5em 2.5em 5.5em 2.5em;
background-image: url("img/dude.svg");
background-position: right 0 bottom 0 ;
background-repeat: no-repeat;
background-size: 21em;
}
#quehacemos h2 {
display: block;
background-image: url("img/box.svg");
background-repeat: no-repeat;
background-size: 6em;
width: 6em;
height: 3.5em;
color:#fff;
padding: 0.4em 0 0 0.6em;
position: relative;
left: 6em;
margin-bottom: -2em;
}
#quehacemos h3 {
font-family: "capitol", sans-serif;
font-weight: 700;
font-style: normal;
font-size:1.4em;
letter-spacing: -.04rem;
padding:0 0 0 .7em;
margin:0;
display:block;
height:1.5em;
background-image: url("img/dots.svg");
background-repeat: no-repeat;
background-size: .5em;
background-position: left 0 bottom .2em ;
}
#quehacemos p {
padding:0 0 0 1em;
margin:0 0 1.5em 0;
width:17em;
text-align: left;
}
#quienesusan {
background-color:#09213E;
padding: 0 0 2em 0;
}
#quienesusan h2 {
color:#fff;
line-height: 0.8em;
padding: 1em 0 0 2.8em;
}
#comohacemos {
background-color:#EBE5D9;
padding: 2em 1em 4em 1em;
text-align:center;
background-image: url("img/formula.svg");
background-repeat: no-repeat;
background-position: top 14em left 0;
}
#comohacemos h3 {
padding: 1em 2.4em 2em 2.4em;
font-size:1.2em;
margin-bottom: 12.5em;
}
#comohacemos img {
}
.flex-container, .flex-container2 {
overflow: hidden;
display: flex;
}
.cards {
margin-bottom:3em;
}
.cards .item {
width:30%;
margin-left:1em;
}
.cards .item h4 {
font-family: "capitol", sans-serif;
font-weight: 700;
font-style: normal;
font-size:1em;
letter-spacing: -.04rem;
color:#fff;
line-height:1.2em;
margin-bottom: 3em;
padding: 0 2em;
}
.cards .medio h4 {
padding-top: 1em;
margin-bottom: 2em;
}
.formatos .item {
margin: 0.5em;
padding:3.32em 0 0 0;
width: 170px;
height: 170px;
min-width: 0;
background-color: #76994A;
color: white;
flex: auto;
border-radius: 500px;
color:#fff;
font-family: "capitol", sans-serif;
font-weight: 700;
font-style: normal;
font-size:1em;
letter-spacing: -.04rem;
line-height:1.2em;
}
#cienciahabla {
background-color:#EF4A24;
padding: 2.5em 0 0 0;
text-align: left;
background-image: url("img/circles.svg");
background-size: 800px;
}
#cienciahabla .content {
background-image: url("img/botellon.svg");
background-size: 100%;
}
#cienciahabla h2 {
margin-left: 3em;
padding-top: 1.5em;
}
#cienciahabla quote {
font-family: "elite", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 0.8em;
line-height: 0.6em;
}
#cienciahabla img {
display: block;
}
.flex-container2 {
padding-left: 10em;
}
.flex-container2 div {
flex: auto;
padding: 1em;
}
#cienciahabla p {
font-weight: 800;
margin-top:1em;
}
#cienciahabla span {
text-transform: uppercase;
font-size: .8em;
display: block;
font-weight: 400;
}
#elalquimista {
background-color:#0197B4;
background-image: url("img/circles.svg");
background-size: 800px;
color:#fff;
padding: 4em 2.5em;
}
#elalquimista .item1 {
width:190px;
flex: auto;
padding-top:5em;
}
#elalquimista .item1 img {
margin-bottom:2em;
}
#elalquimista .item2 {
width:400px;
flex: auto;
}
#elalquimista .item2 h2 {
margin-bottom:0.5em;
}
#footer {
background-color:#EF4A24;
border-width:60px 0 0 0;
border-style: solid;
border-color: #FFF;
color: #fff;
padding: 1.5em 2.5em;
}
#footer li span {
color:#0A223E;
font-weight:700;
}
#footer h2 {
display:block;
width:174px;
height: 224px;
background-image: url("img/logo.svg");
margin: -200px 0 0 9em;
}
#footer h2 span{
display:none;
}
#footer p {
margin-top:2em;
vertical-align: middle;
display: block;
height:30px
}