@charset "UTF-8";

 @font-face {
font-family: "optima";
src: url(//www.esteban-soto.com/wp-content/themes/fdry-dream/dist/fonts/Optima.ttf);
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 16px;
line-height: 19px;
font-family: "optima", Arial, sans-serif;
}
img {
max-width: 100%;
}
h1 {
font-size: 32px;
line-height: 41px;
font-family: "the-seasons", Arial, sans-serif;
font-weight: 700;
}
h2 {
font-size: 30px;
line-height: 41px;
font-family: "the-seasons", Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
h3 {
font-size: 24px;
line-height: 32px;
margin-bottom: 34px;
font-family: "the-seasons", Arial, sans-serif;
font-weight: 700;
}
h4 {
font-size: 15px;
line-height: 19px;
font-family: "the-seasons", Arial, sans-serif;
font-weight: 700;
}
p {
font-size: 16px;
line-height: 19px;
}
a {
transition: 0.8s;
}
.author {
font-family: "above-the-beyond", sans-serif !important;
}
.no-margin {
margin: 0px auto !important;
}
.next-title {
padding: 35px;
text-align: center;
}
.next-title h1, .next-title h2 {
padding-bottom: 20px;
color: #141313;
}
.next-title p {
max-width: 820px;
display: inline-block;
margin: 0 auto 25px;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
.container {
max-width: 1200px;
width: 95%;
margin: auto;
display: block;
}
.container.second-container {
max-width: 800px;
padding: 50px 0;
}
.container.second-container h2, .container.second-container h3, .container.second-container p {
margin-bottom: 25px;
font-family: "optima", Arial, sans-serif;
}
.container.second-container ul {
padding-left: 50px;
}
.container.second-container ul li {
margin-bottom: 25px;
}
.float-img {
position: relative;
z-index: 10;
background-color: #fafafa;
}
.float-img img.wp-post-image {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.space {
display: block;
height: 50px;
background-color: transparent;
} .color-sector-1 .container {
background-color: #113649;
color: #fff;
display: flex;
}
.color-sector-1 .container .information {
padding: 100px 5%;
background-color: transparent !important;
}
.color-sector-1 .container p {
margin-bottom: 20px;
}
.color-sector-1 .container p a {
color: #fff;
text-decoration: none;
}
.color-sector-1 .container p a:hover {
color: #fff;
text-decoration: underline;
}
.color-sector-2 .space-img {
order: 2;
}
.color-sector-2 .wp-post-image {
right: 0;
}
.color-sector-2 .container {
background-color: #141313;
color: #fff;
display: flex;
}
.color-sector-2 .container .information {
padding: 100px 5%;
background-color: transparent !important;
text-align: right;
}
.color-sector-2 .container .information .read-more {
margin: 35px 0 0;
float: right;
}
.contact-box {
padding: 0 !important;
background-color: #113649;
}
.contact-box .wp-post-image {
height: 100% !important;
top: 0 !important;
} .principal-banner {
width: 100%;
height: 90vh;
overflow: hidden;
}
.principal-banner .cover {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.principal-banner.internalpage {
height: 70vh;
}
.principal-banner.internalpage .cover {
background-color: rgba(0, 0, 0, 0.35);
}
.principal-banner.internalpage .wp-post-image {
-o-object-position: center !important;
object-position: center !important;
}
.principal-banner .container {
display: flex;
z-index: 10;
position: relative;
height: 100%;
align-items: center;
justify-content: center;
}
.principal-banner .container h1 {
max-width: 800px;
color: #fff;
font-weight: 700;
text-align: center;
font-size: 28px !important;
line-height: 38px !important;
}
.second-banner {
width: 100%;
height: 75vh;
}
.second-banner .cover {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.second-banner .container {
display: flex;
z-index: 10;
position: relative;
height: 100%;
align-items: center;
justify-content: center;
}
.second-banner .container h2 {
max-width: 730px;
color: #fff;
text-align: center;
}
.sector {
width: 100%;
}
.sector .container {
position: relative;
z-index: 1;
text-align: right;
}
.sector .container .information {
display: inline-block;
padding: 100px 35px 150px;
background-color: #6E8292;
color: #fff;
max-width: 250px;
text-align: center;
position: relative;
min-height: calc(100vh - 300px);
}
.sector .container .information p {
margin-bottom: 20px;
}
.sector .container .information a {
color: #fff;
text-decoration: none;
display: inline-block;
margin-bottom: 20px;
text-transform: uppercase;
}
.sector .container .information a:hover {
text-decoration: underline;
}
.sector .container .information ul {
padding: 0px;
}
.sector .container .information ul li {
list-style: none;
}
.sector .container .information ul li:before {
content: "·";
display: block;
margin: 10px auto 0px;
font-size: 25px;
}
.sector .container .information .logo {
display: block;
margin: 0px auto 54px;
width: 65px;
}
.sector .container .information .read-more {
position: absolute;
bottom: 50px;
left: calc(50% - 105px);
text-decoration: none !important;
}
.sector .container .information .read-more:hover {
color: #141313 !important;
}
.sector .container .information svg {
display: block;
width: 80%;
margin: 0px auto 20px;
}
.sector .container .information svg g {
fill: #fff !important;
}
.sector.row2 .container {
text-align: left;
}
.sector.row2 .container .information {
background-color: #141313;
}
.services {
margin: 35px auto;
width: 100%;
min-height: 75%;
position: relative;
}
.services .wp-post-image {
position: absolute;
width: 50%;
height: 85%;
top: 7.5%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.services .information {
display: inline-block;
padding: 150px 35px;
background-color: #6E8292;
color: #fff;
max-width: 274px;
}
.services .service-image {
position: absolute;
width: 50%;
height: 90%;
margin: 5%;
left: 0;
}
.services .info-box {
width: 100%;
display: block;
max-width: 600px;
}
.services .logo {
width: 65px;
margin-bottom: 35px;
}
.services .read-more {
margin: 35px 0 0;
} .read-more {
display: block;
border: 1px solid #fff;
border-radius: 30px;
color: #fff;
padding: 15px 55px;
text-decoration: none;
transition: 0.8s;
width: 100px;
text-align: center;
margin: 0px auto;
}
.read-more:hover {
background-color: #fff;
color: #6E8292;
}
.team-box .member-box {
min-width: 350px;
}
.team-box .container {
display: flex;
gap: 60px;
}
.team-box .author {
font-size: 22px;
margin-bottom: 15px;
}
.team-box a {
color: #141313;
}
.team-box a:hover {
color: #000;
}
.team-box .photo {
margin-bottom: 15px;
}
.team-box p {
margin-bottom: 15px;
}
.fade-in-image {
opacity: 0;
transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
transform: translateY(150px);
}
.icon-banner {
padding: 20px 0;
}
.icon-banner .item {
display: inline-block;
padding: 0px 25px;
border-right: 1px solid #141313;
color: #141313;
}
.icon-banner .slide-item {
text-align: center !important;
display: flex;
align-items: center;
justify-content: center;
height: 110px;
}
.icon-banner .slide-item img {
width: auto;
display: inline-block;
margin: 0px 30px;
height: 100px;
transition: 0.6s;
}
.icon-banner .slide-item.two-icons .principal-icon {
opacity: 1;
display: inline-block;
}
.icon-banner .slide-item.two-icons .second-icon {
opacity: 0;
display: none;
}
.icon-banner .slide-item.two-icons:hover .principal-icon {
opacity: 0;
display: none;
}
.icon-banner .slide-item.two-icons:hover .second-icon {
opacity: 1;
display: inline-block;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid.grid-x5 {
grid-template-columns: repeat(5, 1fr);
}
.grid.grid-x4 {
grid-template-columns: repeat(4, 1fr);
}
.grid.gap-20 {
gap: 20px;
}
.grid.gap-50 {
gap: 50px;
}
.grid-section {
text-align: center;
display: block;
margin: auto;
width: 95%;
}
.grid-section .item {
display: block;
width: 100%;
text-decoration: none;
}
.grid-section .item .icon-information {
height: 100px;
width: 100%;
margin-bottom: 10px;
display: none !important;
}
.grid-section .item .icon-information img {
display: inline-block;
width: auto;
max-height: 100px;
}
.grid-section .item h2 {
display: flex;
width: 100%;
align-items: center;
height: 300px;
justify-content: center;
max-width: 200px;
margin: auto;
}
.grid-section .item h3 {
font-size: 28px;
line-height: 70px;
}
.grid-section .item .item-image {
width: 100%;
display: inline-block;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
height: 350px;
}
.grid-section .item p {
font-size: 15px;
line-height: 18px;
padding-bottom: 0px;
color: #141313;
margin: 10px auto 0;
display: block;
max-width: 280px;
width: 100%;
}
.grid-section .item p.position {
border-bottom: 1px solid #141313;
}
#team-items .title-grid h2 {
max-width: 285px;
}
#team-items .member-box p {
text-align: left;
}
#team-items .member-box p a {
color: #00B3D9;
text-decoration: none;
}
#team-items .member-box p a:hover {
color: #113649;
}
.popup-div {
display: none;
opacity: 0;
transition: 0.8s;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.85);
z-index: 99999999999;
}
.popup-div.active {
opacity: 1;
display: block;
}
.popup-div .close {
text-decoration: none;
position: absolute;
top: 10%;
right: 10%;
line-height: 29px;
font-size: 24px;
color: #C1B29E;
}
.popup-div .close:hover {
color: #fff;
}
.popup-div .container {
max-width: 650px;
margin-top: 10vh;
min-height: 80vh;
background-color: #113649;
}
.popup-div .container .banner-img {
width: 100%;
height: 260px;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.popup-div .container .content {
padding: 30px 5%;
position: relative;
min-height: 250px;
}
.popup-div .container .content h2 {
color: #fff;
font-size: 40px;
line-height: 71px;
}
.popup-div .container .content p {
color: #fff;
font-size: 18px;
line-height: 22px;
margin-bottom: 20px;
}
.popup-div .container .content p strong {
font-weight: 700;
}
.popup-div .container .content .find-more {
position: absolute;
bottom: 20px;
display: inline-block;
padding: 5px 25px;
background-color: #fff;
color: #141313;
font-size: 18px;
text-decoration: none;
}
.popup-div .container .content .find-more:hover {
background-color: #141313;
color: #fff;
}
.popup-div .container.Insight {
background-color: #AEA490 !important;
}
.popup-div .container.Insight .find-more {
color: #AEA490;
}
.popup-div .container.Event {
background-color: #6E8292 !important;
}
.popup-div .container.Event .find-more {
color: #6E8292;
}
#portfolio {
padding-top: 50px;
}
.flex-div {
display: flex;
max-width: 1000px;
margin: auto;
}
.flex-div h3 {
font-size: 28px;
line-height: 48px;
} .menu-principal-menu-left-container,
.menu-principal-menu-right-container {
width: 30%;
}
.navigation-box {
border-bottom: 1px solid #fff;
padding: 0px 0px 15px 0px;
transition: 0.6s;
}
.navigation-box li {
list-style: none;
display: inline-block;
margin-right: 50px;
}
.navigation-box li a {
color: #fff;
text-decoration: none;
}
.principal-menu-right {
padding: 0px 15% 15px 0px;
}
.principal-menu-right li {
margin-right: 0px;
margin-left: 50px;
}
.principal-menu-left {
padding: 0px 0px 15px 15%;
} header {
position: fixed;
z-index: 999;
width: 100%;
padding: 35px 0;
display: flex;
transition: 0.8s;
}
header .menu-header-container,
header .menu-header-rigth-container {
display: block;
min-width: 30%;
}
header .logo {
min-width: 40%;
}
header .logo img,
header .logo svg {
transition: 0.6s;
max-width: 400px;
}
.scrolled header {
background-color: #fff;
padding-bottom: 0px;
}
.scrolled header .logo {
margin-bottom: 10px;
}
.scrolled header .logo img,
.scrolled header .logo svg {
margin-top: -15px;
max-width: 250px;
}
.scrolled header .logo img g,
.scrolled header .logo svg g {
fill: #111;
}
.scrolled header .navigation-box {
border-bottom: 1px solid #141313;
}
.scrolled header .navigation-box li a {
color: #141313 !important;
text-decoration: none;
} footer {
padding: 60px 0;
background-color: #fff;
}
.other-websites {
padding: 0px 0 25px 0;
background-color: #fff;
display: flex;
}
.other-websites a {
display: inline-block;
width: 33.3333%;
}
.other-websites img {
width: 250px;
margin: 0px 30px;
transition: 0.6s;
}
.other-websites .two-icons .principal-icon {
opacity: 1;
display: inline-block;
}
.other-websites .two-icons .second-icon {
opacity: 0;
display: none;
}
.other-websites .two-icons:hover .principal-icon {
opacity: 0;
display: none;
}
.other-websites .two-icons:hover .second-icon {
opacity: 1;
display: inline-block;
}
.last-section {
padding: 25px 0;
background-color: #fff;
display: flex;
}
.last-section p {
font-size: 12px;
width: 100%;
color: #141313;
}
.flex-info {
display: flex;
}
.flex-info .footer-item {
display: block;
width: 100%;
}
.flex-info .footer-item .item-info {
max-width: 250px;
margin: 0px auto;
text-align: center;
}
.flex-info .footer-item .item-info h4 {
color: #6C6C6C;
margin-bottom: 20px;
}
.flex-info .footer-item .item-info ul {
padding: 0px;
}
.flex-info .footer-item .item-info ul li {
list-style: none;
margin-bottom: 20px;
color: #141313;
}
.flex-info .footer-item .item-info p {
line-height: 26px;
margin-bottom: 20px;
color: #141313;
}
.flex-info .footer-item .item-info a {
text-decoration: none;
color: #141313;
}
.flex-info .footer-item .item-info a:hover {
color: #6E8292;
text-decoration: underline;
}
.footer-logo {
width: 90%;
max-width: 180px;
display: inline-block;
} .wpforms-container .wpforms-field {
padding: 10px 0 0px !important;
position: relative;
margin: 10px 0px;
}
.wpforms-submit-container {
margin-top: 35px !important;
}
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password] {
padding: 0px !important;
background: transparent !important;
border: 0px !important;
border-bottom: 1px solid #fff !important;
border-radius: 0px !important;
}
input[type=submit] {
padding: 0px !important;
background: transparent !important;
border: 0px !important;
border-bottom: 1px solid #fff !important;
border-radius: 0px !important;
}
input[type=submit]:hover {
background-color: #fff !important;
color: #6E8292 !important;
}
select {
padding: 0px !important;
background: transparent !important;
border: 0px !important;
border-bottom: 1px solid #fff !important;
border-radius: 0px !important;
}
textarea {
padding: 0px !important;
background: transparent !important;
border: 0px !important;
border-bottom: 1px solid #fff !important;
border-radius: 0px !important;
}
select {
padding: 10px 25px;
background-color: #fafafa;
border: 1px solid #6C6C6C;
}
button {
font-size: 16px;
padding: 10px 50px !important;
background: transparent !important;
border: 1px solid #fff !important;
border-radius: 0px !important;
margin-top: 25px;
}
button:hover {
background-color: #fff !important;
color: #6E8292 !important;
}
::-moz-placeholder {
color: #fff !important;
opacity: 1; }
::placeholder {
color: #fff !important;
opacity: 1; }
::-ms-input-placeholder { color: #fff !important;
} .nav-menu-box {
display: none;
}
.nav-menu-box .icon {
background: #141313;
color: #fff;
text-align: center;
padding: 10px 0;
font-size: 26px;
line-height: 26px;
}
.nav-menu-box .icon .close {
display: none;
}
.nav-menu-box .mobile-menu-box {
background-color: rgba(20, 19, 19, 0.95);
min-height: 0vh;
max-height: 0px;
overflow: hidden;
transition: 0.8s;
}
.nav-menu-box .mobile-menu-box.active {
min-height: 80vh;
padding-top: 15px;
}
.nav-menu-box .mobile-menu-box.active .close {
display: inline-block !important;
}
.nav-menu-box .mobile-menu-box.active .open {
display: none;
}
.nav-menu-box .mobile-menu-box li {
display: block;
width: 100%;
}
.nav-menu-box .mobile-menu-box li a {
padding: 15px;
border-bottom: 1px solid #fff;
width: calc(100% - 30px);
display: block;
color: #fff;
text-decoration: none;
}
.nav-menu-box .mobile-menu-box li a:hover {
background-color: #6E8292;
color: #fff;
}
@media only screen and (max-width: 868px) {
.nav-menu-box {
display: block;
position: fixed;
z-index: 99999;
width: 100%;
top: 0;
}
.nav-menu-box .logo {
max-width: 200px;
margin: auto;
display: block;
}
header {
position: relative !important;
display: block;
padding: 0px;
}
header .menu-menu-principal-left-container,
header .menu-menu-principal-right-container {
display: none !important;
}
header .logo img {
max-width: 200px;
}
header .logo img.white-logo {
display: none;
}
header .logo img.black-logo {
display: inline-block;
}
.principal-menu-right,
.principal-menu-left {
display: none !important;
}
h1, h2, h3 {
font-size: 26px;
line-height: 34px;
font-family: "optima", Arial, sans-serif;
}
.sector .container {
text-align: center !important;
}
.services .container {
width: 100% !important;
display: block;
}
.services .container .information {
padding: 50px 5%;
width: 90%;
text-align: center !important;
}
.services .container .information.space-img {
display: none;
}
.services .wp-post-image {
position: relative;
width: 100%;
height: auto;
top: 0;
-o-object-fit: cover;
object-fit: cover;
margin-bottom: -5px;
}
.services .read-more {
margin: 35px auto !important;
float: none !important;
}
.next-title {
padding: 50px 0px 0px 0px;
}
.space {
display: none !important;
}
.team-box .container {
display: block;
text-align: center;
}
.team-box .container .member-box {
margin-bottom: 40px;
}
footer {
padding: 50px 0;
}
footer .flex-info {
display: block;
text-align: center;
}
footer .flex-info .footer-item {
margin-bottom: 35px;
}
.other-websites .logo {
margin-bottom: 20px;
}
.last-section {
display: block;
}
.last-section p {
text-align: center !important;
margin-bottom: 10px;
}
.float-img .wp-post-image {
position: relative !important;
}
.principal-banner .wp-post-image,
.second-banner .wp-post-image {
position: absolute !important;
}
.sector .container {
width: 100% !important;
}
.sector .container .information {
max-width: 1000px;
width: 90%;
margin: 0px;
padding: 100px 5% 150px;
margin-top: -6px;
min-height: 200px !important;
}
.grid.grid-x5 {
grid-template-columns: repeat(2, 1fr);
}
.grid.grid-x4 {
grid-template-columns: repeat(2, 1fr);
}
.grid h2 {
display: block;
height: auto;
font-size: 26px;
line-height: 34px;
max-width: 1000px;
}
.grid-section .title-grid {
grid-column: 1/3;
}
.grid-section .title-grid .icon-information {
display: none;
}
.grid-section .title-grid h2 {
display: block !important;
height: auto !important;
}
.grid-section .icon-information {
height: 60px !important;
}
.flex-div {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.flex-div h3 {
font-size: 22px !important;
line-height: 28px !important;
margin-bottom: 10px !important;
}
}
@media only screen and (max-width: 458px) {
.item-image {
height: 200px;
}
.item {
margin-bottom: 35px;
}
} .zoom-animation img {
animation-name: zoomanimation;
animation-duration: 120s;
}
@keyframes zoomanimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.8); }
100% {
transform: scale(1);
}
}