* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
img {
width: 100%;
}
main {
background-color: #f7f4ed;
font-family: var(--primary-font);
}
:root {
--primary-font: "Eudoxus Sans";
--container-size: 1120px;
}.header {
padding-top: 48px;
padding-bottom: 193px;
background-color: #0a5949;
}
.header__content {
max-width: 1000px;
width: 90%;
justify-content: space-between;
display: flex;
margin-left: auto;
margin-right: auto;
margin-bottom: 110px;
}
.header__content-menu {
gap: 38px;
display: flex;
justify-content: space-between;
}
.header__content-menu-detail {
font-size: 16px;
font-weight: 700;
color: #e5dbc2;
}
.header__content-language {
width: 43px;
height: 30px;
padding-bottom: 32px;
border: 2px solid #e5dbc2;
text-align: center;
line-height: 30px;
}
.header__content-language-detail {
font-size: 14px;
color: #e5dbc2;
}
.header__content-image {
max-width: 1000px;
width: 27%;
margin-left: auto;
margin-right: auto;
}
.header__hamburger {
display: none;
font-size: 24px;
color: #e5dbc2;
background: none;
border: none;
cursor: pointer;
margin-right: auto;
background: none;
text-align: left;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 900px) {
.header__hamburger {
display: flex;
}
.header__content-menu {
display: none;
flex-direction: column;
gap: 20px;
margin-top: 20px;
background-color: #0a5949;
padding: 10px;
border-radius: 8px;
}
.header__content-menu.active {
display: flex;
}
.header {
padding-bottom: 150px;
}
.header__content {
display: flex;
flex-direction: column;
margin-bottom: 50px;
}
.header__content-menu {
flex-direction: column;
margin-right: auto;
margin-left: auto;
}
.header__content-language {
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}
.header__content-image {
width: 90%;
}
}.grid {
max-width: 1000px;
background-color: #f7f4ed;
margin-top: -60px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
}
.grid__images {
flex-shrink: 0;
width: 25%;
position: relative;
}
.grid__images-detail {
display: block;
}
.grid__images-overlay {
inset: 0;
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: flex-end;
padding-bottom: 38px;
opacity: 0;
transition: 300ms ease all;
}
.grid__images-overlay:hover {
opacity: 1;
}
.grid__images-overlay-detail {
width: 100%;
font-size: 28px;
font-weight: 700;
position: relative;
margin-left: 28px;
}
.grid__images-overlay--yellow {
background-color: #dba01a;
color: #f7f4ed;
}
.grid__images-overlay--light {
background-color: #e5dbc2;
color: #053028;
}
.grid__images-overlay--purple {
background-color: #3d1e32;
color: #e5dbc2;
}
.grid__images-overlay--land {
background-color: #602b24;
color: #e5dbc2;
}
.grid__images-overlay--life {
background-color: #053028;
color: #e5dbc2;
}
.grid__images-overlay--seed {
background-color: #b4423f;
color: #e5dbc2;
}
.grid__images-text {
display: flex;
}
.grid__images-description {
width: 50%;
margin-top: 68px;
margin-left: 58px;
font-size: 28px;
font-weight: 700;
color: #0a5949;
}
@media screen and (max-width: 900px) {
.grid {
width: 90%;
display: flex;
flex-wrap: wrap;
}
.grid__images {
width: 50%;
}
.grid__images-text {
display: flex;
flex-wrap: wrap;
}
.grid__images-description {
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 60px;
font-size: 20px;
}
.grid__images-overlay-detail {
margin-left: 18px;
}
}@font-face {
font-family: "Eudoxus Sans";
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraBold.eot);
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraBold.eot?#iefix)
format("embedded-opentype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraBold.woff2) format("woff2"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraBold.woff) format("woff"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraBold.ttf) format("truetype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraBold.svg#EudoxusSans-ExtraBold)
format("svg");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Eudoxus Sans";
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraLight.eot);
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraLight.eot?#iefix)
format("embedded-opentype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraLight.woff2) format("woff2"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraLight.woff) format("woff"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraLight.ttf) format("truetype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-ExtraLight.svg#EudoxusSans-ExtraLight)
format("svg");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Eudoxus Sans";
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Bold.eot);
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Bold.eot?#iefix) format("embedded-opentype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Bold.woff2) format("woff2"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Bold.woff) format("woff"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Bold.ttf) format("truetype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Bold.svg#EudoxusSans-Bold) format("svg");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Eudoxus Sans";
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Light.eot);
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Light.eot?#iefix) format("embedded-opentype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Light.woff2) format("woff2"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Light.woff) format("woff"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Light.ttf) format("truetype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Light.svg#EudoxusSans-Light) format("svg");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Eudoxus Sans";
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Regular.eot);
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Regular.eot?#iefix)
format("embedded-opentype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Regular.woff2) format("woff2"),
url(https://www.marinello.adv.br/wp-content/themes/marinello/styles/fonts/EudoxusSans-Regular.woff) format("woff"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Regular.ttf) format("truetype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Regular.svg#EudoxusSans-Regular) format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Eudoxus Sans";
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Medium.eot);
src: url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Medium.eot?#iefix) format("embedded-opentype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Medium.woff2) format("woff2"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Medium.woff) format("woff"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Medium.ttf) format("truetype"),
url(//www.marinello.adv.br/wp-content/themes/marinello/fonts/EudoxusSans-Medium.svg#EudoxusSans-Medium) format("svg");
font-weight: 500;
font-style: normal;
font-display: swap;
}.about {
width: 90%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 64px;
padding-bottom: 84px;
}
.about__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 88px;
}
.about__head-title {
color: #5c584e;
font-size: 24px;
font-weight: 700;
}
.about__head-story {
display: flex;
gap: 17px;
}
.about__head-story-title {
color: #5c584e;
font-size: 17px;
font-weight: 500;
}
.about__head-image-detail {
width: 16px;
}
.about__topics {
display: flex;
gap: 20px;
justify-content: space-between;
}
.about__topics-content {
width: 33.33%;
}
.about__topics-image {
width: 35px;
margin-bottom: 28px;
}
.about__topics-title {
margin-bottom: 24px;
color: #0a5949;
font-size: 17px;
font-weight: 500;
}
.about__topics-description {
padding-bottom: 80px;
color: #5c584e;
font-size: 15px;
font-weight: 400;
}
@media screen and (max-width: 900px) {
.about {
margin-top: -100px;
}
.about__topics-content {
width: 100%;
}
.about__head {
flex-direction: column;
margin-top: 30px;
margin-bottom: 30px;
}
.about__head-title {
width: 100%;
text-align: center;
margin-bottom: 20px;
text-align: left;
}
.about__head-story {
width: 100%;
text-align: left;
}
.about__topics {
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.about__topics-description {
margin-bottom: -78px;
}
}.services {
padding-top: 220px;
padding-bottom: 220px;
background-color: #ffffff;
overflow: hidden;
}
.services__content {
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 40px;
}
.services__slide-wraper {
width: 100%;
}
.services__info {
flex-shrink: 0;
}
.services__info-arrow {
display: flex;
gap: 13px;
margin-bottom: 40px;
}
.services__info-arrow-image {
width: 8px;
}
.services__info-arrow-detail {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
background-color: #0a5949;
}
.services__info-title {
color: #5c584e;
font-size: 27px;
font-weight: 500;
margin-bottom: 20px;
}
.services__info-description {
max-width: 301px;
color: #5c584e;
font-size: 16px;
font-weight: 400;
}
.services__list {
display: flex;
gap: 20px;
}
.services__item {
padding-top: 34px;
padding-left: 34px;
padding-right: 34px;
padding-bottom: 44px;
}
.services__item-title {
margin-top: 20px;
margin-bottom: 36px;
}
.services__item--land {
background-color: #3d1e32;
color: #efe9da;
}
.services__item--yellow {
background-color: #dba01a;
color: #053028;
}
.services__item--red {
background-color: #b4423f;
color: #efe9da;
}
.services__item-image {
width: 60px;
}
@media screen and (max-width: 900px) {
.services {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.services__content {
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.services__info {
margin-bottom: 40px;
}
.services__info-arrow {
margin-bottom: 20px;
}
}.instagram {
display: flex;
justify-content: space-between;
max-width: 1000px;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
padding-bottom: 60px;
}
.instagram__item-image {
width: 60px;
}
.instagram__item-title {
color: #5c584e;
font-size: 27px;
font-weight: 500;
max-width: 345px;
margin-bottom: 36px;
}
.instagram__item-link {
color: #0a5949;
font-size: 13px;
font-weight: 700;
border-bottom: 3px solid #0a5949;
padding-bottom: 3px;
}
.instagram__posts {
background-color: #0a5949;
width: 574px;
height: 574px;
}
@media screen and (max-width: 900px) {
.instagram {
gap: 50px;
flex-direction: column;
}
.instagram__item-image {
margin-bottom: 10px;
}
.instagram__item-title {
font-size: 20px;
margin-bottom: 20px;
}
.instagram__posts {
width: 100%;
}
}.footer {
background-color: #0a5949;
padding-top: 60px;
padding-bottom: 60px;
}
.footer a, .footer__contact-text-detail {
color: #e5dbc2; 
}
.footer__container {
display: flex;
justify-content: space-between;
max-width: 1000px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.footer__logo {
width: 20%;
}
.footer__about {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer__about-link {
color: #efe9da;
font-size: 15px;
font-weight: 500;
}
.footer__contact {
color: #efe9da;
}
.footer__contact-title {
font-size: 19px;
font-weight: 500;
margin-bottom: 20px;
}
.footer__contact-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer__contact-text-detail {
gap: 200px;
font-size: 16px;
font-weight: 100;
}
.footer__social-detail {
margin-left: auto;
margin-bottom: 20px;
width: 43px;
height: 30px;
padding-bottom: 32px;
border: 2px solid #e5dbc2;
text-align: center;
line-height: 30px;
}
.footer__social-text {
font-size: 14px;
color: #e5dbc2;
}
.footer__social-images {
display: flex;
gap: 20px;
}
.footer__copyright {
color: #efe9da;
font-size: 14px;
font-weight: 100;
max-width: 1000px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
margin-top: 188px;
}
.footer__copyright-detail {
color: #efe9da;
font-size: 14px;
font-weight: 100;
}
@media screen and (max-width: 900px) {
.footer {
padding-top: 30px;
padding-bottom: 20px;
}
.footer__container {
flex-direction: column;
}
.footer__logo {
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
align-items: center;
}
.footer__contact-title {
margin-top: 40px;
margin-bottom: 20px;
}
.footer__social {
margin-right: auto;
margin-top: 30px;
display: flex;
gap: 20px;
}
.footer__copyright {
text-align: center;
flex-direction: column;
margin-top: 20px;
gap: 20px;
}
.footer__social-detail,
.footer__social-text {
display: none;
}
}