@import url('https://fonts.googleapis.com/css2?

family= Playfair+Display:ital@1 & family=

Roboto+Slab:wght@500 & display=swap');

@import url('https://fonts.googleapis.com/css?family=Francois+One');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

background-color: #7DCEA0;

font-family: 'Roboto Slab', serif;

#header {

position: fixed;

top: 0;

min-height: 75px;

padding: 0px 20px;

display: flex;

justify-content: space-around;

align-items: center;

background-color: #7DCEA0;

.container {

max-width: 850px;
 width: 100%;

margin: 0 auto;

@media (max-width: 600px) {

header {

flex-wrap: wrap;

.logo {

width: 70vw;

@media (max-width: 650px) {

.logo {

margin-top: 15px;

width: 100%;

position: relative;

.logo > img {

width: 10%;

height: 10%;

max-width: 300px;

display: flex;

justify-content: center;

align-items: center;
 text-align: center;

margin-left: 20px;

@media (max-width: 650px) {

.logo > img {

margin: 0 auto;

.nav {

font-weight: 300;

@media (max-width: 1750px) {

nav {

margin-top: 10px;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

text-align: center;

padding: 0 40px;

.nav li {

padding-bottom: 10px;

}
nav > ul {

width: 35vw;

display: flex;

flex-direction: row;

justify-content: space-around;

@media (max-width: 650px) {

nav > ul {

flex-direction: column;

.cover{

height: 400px;

background-color: #FFFFFF;

font-size: 20px;

.cover-small {

height: 400px;

.card-title {

min-height: 3rem;

#page-wrapper {

position: relative;

padding: 20px 30;

}

li {

list-style: none;

a{

text-decoration: none;

p{

text-align: justify;

justify-content: center;

flex-direction: row;

height: 20px;

margin: 2rem auto;

.descrip {

text-align: justify;

justify-content: center;

flex-direction: row;

height: 20px;

margin: 2rem auto;

#referencia {

text-align: center;

font-size: 20px;
 font-family: 'Francois One', sans-serif;

h1 h2 h3 h4 {

text-align: left;

font-family: 'Francois One', sans-serif;

.flex-container {

display: flex;

justify-content: center;

flex-direction: row;

background-color: #FFFFFF;

padding: 10px;

.flex-container div {

background-color: #8fbc8f;

wight: 100px;

margin: 10px;

text-align: center;

line-heigh: 75px;

font-size: 20px;

border: 2px solid;

.responsive-iframe {
 position: relative;

pading top: 56.25%;

.responsive-iframe iframe {

position: adsolute;

top: 0;

left: 0;

wight: 100%;

height: 100%;