/* font-family:'CircularStd-Book', sans-serif; font-family:'CircularStd-BookItalic', sans-serif; font-family:'CircularStd-Medium', sans-serif; font-family:'CircularStd-MediumItalic', sans-serif; font-family:'CircularStd-Bold', sans-serif; font-family:'CircularStd-BoldItalic', sans-serif; font-family:'CircularStd-Black', sans-serif; font-family:'CircularStd-BlackItalic', sans-serif; */ /* Page Styles */ body.frameworks_page { --mainColor:#9BD47C; --secondColor:#F1F9EC; } body.trends_page { --mainColor:#9BD47C; --secondColor:#F2FAF4; } #nav_bar {background-color:#fff;} /*#nav_bar {background:var(--mainColor);}*/ #page_footer {background:var(--secondColor);} #footer_link strong {color:var(--mainColor);} #footer_link:after {color:var(--mainColor);} #page {} /* Top Section */ #top_section {position:relative; z-index:1; background:var(--mainColor);} #top_section:before {position:absolute; top:0; bottom:0; right:0; display:block; content:" "; background:#fff; z-index:1; width:104px;} #top_boxes {position:relative; z-index:2; height: calc(88vh + 100vh);} /* Top Box 3 */ #top_box3 {position:relative; left:0; top:0; z-index:2; background:var(--mainColor) url("../images/technology_frameworks-landing.jpg") center center no-repeat; background-size:cover; height:88vh; height:calc(var(--vh, 1vh) * 88); width:100%; max-width:88%;} body.trends_page #top_box3 {background-image:url("../images/technology_trends-landing.jpg")} #top_box3-header {padding:120px 0 0 20px;} #top_box3-header h1 {margin:0; padding:0; color:#fff; font-family:'CircularStd-Black', sans-serif; font-weight:400; font-size:30px; line-height:30px; text-transform:uppercase;} /* Top Box 4 */ #top_box4 {position:fixed; left:0; top:0; z-index:1; background:var(--mainColor); width:100%; height:calc(var(--vh, 1vh) * 100);} #top_box4 .text_section {color:#fff; width:100%; max-width:88%; font-family:'CircularStd-Medium', sans-serif; font-size:clamp(12px, -6px + 3vh, 21px); line-height:clamp(14px, 4vh, 23px); padding:95px 4px 0 25px; padding-top:clamp(76px, 11vh, 95px); } #top_box4 .text_section .slide {max-width:1010px;} /* Main Section */ #main_section {position:relative; z-index:3; background:var(--mainColor);} /* Body Text */ #body_section {position:relative; width:100%; background:#fff; padding:40px 25px;} #body_section-text {color:#000; max-width:760px; font-family:'CircularStd-Book', sans-serif; font-weight:400; font-size:15px; line-height:18px;} #body_section-text p {margin:0 0 10px 0; padding:0; font-family:'CircularStd-Book', sans-serif; font-weight:400; font-size:15px; line-height:18px;} #body_section-text a {font-family:'CircularStd-Bold', sans-serif; font-weight:400; color:#86D199; text-decoration:underline;} #body_section-text a:hover {color:#86D199; text-decoration:underline;} /* Technology Links */ #technology_links {padding:25px; background:#fff;} #technology_links a {display:block; position:relative; text-decoration:none; color:#fff; font-family:'CircularStd-Black', sans-serif; font-weight:400; font-size:21px; padding-top:100%; width:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; margin:0 0 25px 0;} #technology_links a:before {content:" "; display:block; position:absolute; top:0; bottom:0; left:0; right:0; opacity:.2; background-color: #47C7EE; /* For browsers that do not support gradients */ background-image: linear-gradient(to right, #47C7EE , #BED62F); transition: opacity 0.3s; -webkit-transition: opacity 0.3s; } #technology_links a:hover {color:#fff; text-decoration:none;} #technology_links a:hover:before {opacity:.8;} #technology_links a span.link_text {position:absolute; left:15px; bottom:18px; text-transform:uppercase;} #link_innovation {background-image:url("../images/link_innovation.jpg")} #link_implementation {background-image:url("../images/link_implementation.jpg")} #link_enabling {background-image:url("../images/link_enabling.jpg")} #link_collaboration {background-image:url("../images/link_collaboration.jpg")} #link_support {background-image:url("../images/link_support.jpg")} #link_digitalization {background-image:url("../images/link_digitalization.jpg")} #link_food {background-image:url("../images/link_food.jpg")} #link_energy {background-image:url("../images/link_energy.jpg")} #link_water {background-image:url("../images/link_water.jpg")} #link_nature {background-image:url("../images/link_nature.jpg")} #link_urban {background-image:url("../images/link_urban.jpg")} /* Media Queries */ @media only screen and (min-width: 370px) { #top_box3-header h1 {font-size:40px; line-height:40px;} #technology_links a {font-size:31px;} } @media only screen and (min-width: 384px) { } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 720px) { } @media only screen and (min-width: 960px) { } @media only screen and (min-width: 1024px) { #nav_bar {background-color:transparent;} /*#nav_bar {background:var(--mainColor);}*/ /* Top Box 3 */ #top_box3 {width:100%; max-width:calc(88% - 104px);} #top_box3-header {padding:70px 0 0 60px;} #top_box3-header h1 {font-size:100px; line-height:100px;} /* Top Box 4 */ #top_box4 {width:calc(100% - 104px);} #top_box4 .text_section { font-size:clamp(18px, 5vh, 38px); line-height:clamp(24px, 5vh, 50px); padding:140px 1px 0 80px; padding-top:clamp(40px, 16vh, 140px); } @media only screen and (max-width: 1240px) { #top_box4 .text_section { font-size:20px; line-height:24px; } } /* Body Text */ #body_section {width:calc(100% - 104px); padding:80px 70px;} #body_section-text {font-size:21px; line-height:27px; padding:0 0 0 65px;max-width: 709px;} #body_section-text p {margin:0 0 28px 0; font-size:21px; line-height:27px;} /* Technology Links */ #technology_links {width:calc(100% - 104px); padding:86px;} #technology_links a {padding-top:28%; margin:0 0 70px 0; font-size:60px;} #technology_links a span.link_text {position:absolute; left:35px; bottom:38px;} #technology_links #link_innovation {background-position:center top;} #technology_links #link_support {background-position:center top;} #technology_links #link_digitalization {background-position:center 70%;} #technology_links #link_food {background-position:center top;} /* #link_energy {background-image:url("../images/link_energy.jpg")} #link_water {background-image:url("../images/link_water.jpg")} #link_nature {background-image:url("../images/link_nature.jpg")} #link_urban {background-image:url("../images/link_urban.jpg")} */ } @media only screen and (min-width: 1080px) { } @media only screen and (min-width: 1240px) { } @media only screen and (min-width: 1320px) { } @media only screen and (min-width: 1680px) { } @media only screen and (min-width: 1900px) { }