.padding { width:100%; height:25px; } #banner { width:100%; background-color:#56AC2F; } .banner-split { width:100%; display:inline-block; vertical-align: top; height:auto; padding:50px 0; } #banner-l-align { width:80%; margin-left:10%; display:flex; justify-content: center; align-items: center; word-wrap: break-word; text-align: center; } #banner-l-align h1 { font-size:4rem; font-weight: 600; color:white; } #banner-r-align { width:70%; margin-left:auto; } .banner-img-wrapper { width:50%; display:inline-block; float:right; } .banner-img-wrapper img { width:100%; height:auto; vertical-align: bottom; } #story { width:100%; height:800px; } .split-story { display:inline-block; width:49%; vertical-align: top; height:100%; } .split-story:nth-child(2) { float:right; } .split-story-padding { width:90%; height:90%; padding:5%; } #story-header { width:100%; } #story-header h1 { font-size:3rem; font-weight: bold; color:#003467; } #story-header h2 { width:100%; word-wrap: break-word; color:#003467; opacity:0.8; font-weight: normal; font-size:2.5rem; } .story-wrapper { width:100%; margin-top:5%; } .story-wrapper h3 { font-size:2.3rem; color:#003D78; font-weight:bold; } .story-wrapper p { width:100%; word-wrap: break-word; color:#003D78; font-size:1.8rem; } .align-story-img { display:flex; justify-content: flex-end; align-items: center; width:100%; height:100%; } .align-story-img img { width:90%; height:auto; box-shadow: 0px 0px 15px rgba(200, 200, 200); } #special { width:100%; } #special-headers { width:100%; } .lines { width:40%; height:3px; background-color:#003D78; } .align-headers { display:inline-block; } .special-header { width:20%; color:#003D78; font-size:2rem; word-wrap: break-word; text-align: center; font-weight: normal; vertical-align: middle; } .special-banner { color:white; width:100%; height:250px; } .banner1 { background-color:#265B8F; margin-top:25px; } .banner2 { background-color:#fff; } .banner3 { background-color:#56AC2F; } .banner-content { width:60%; margin-left:auto; height:100%; } .banner-content-l { width:60%; height:100%; margin-right:auto; } .banner-p { width:70%; text-align:left; word-wrap: break-word; display:inline-block; vertical-align: middle; font-size:1.5rem; } .banner-content-l p { color:#003467; } .banner-img-wrap { height:100%; width:30%; display:inline-block; vertical-align: middle; } .banner-img-wrap div { width:90%; height:100%; padding-right:10%; } .banner-img-wrap img { width:70%; height:auto; } #our-team { margin-top:25px; } #our-team-header { width:100%; } .our-team-color { background-color:#56AC2F; } .our-team-h { color:#56AC2F; } #Wrapper { width:90%; margin:0 auto; } .CEO-wrapper { width:70%; margin-right:auto; margin-top:3%; } .split-CEO { display:inline-block; width:50%; } .CEO-img-wrap { width:95%; margin:0 auto; overflow:hidden; position:relative; border-radius: 25px 0px; } .business-img { position:absolute; top:0; left:0; width:35%; height:auto; z-index: 1; box-shadow: 0px 0px 4px 2px rgb(171, 171, 171); } .hobby-img { width:100%; height:auto; } .CEO-desc { vertical-align: top; } .CEO-desc h3 { color:#003D78; font-size:3rem; } .CEO-desc p { color:#003D78; font-size:1.8rem; } #employee-wrapper { width:100%; display:flex; justify-content: space-between; flex-wrap:wrap; } .seperator { margin-top:50px; width:20%; margin-left:2.5%; margin-right:2.5%; } .seperator h3 { font-size:2rem; color:#003467; text-align: center; margin-bottom:5px; } .image-size { width:100%; display: flex; justify-content: center; align-items: center; } .keep-aspect { width:70%; padding-top:70%; position:relative; } .employee-img-container { position:absolute; top:0; left:0; bottom:0; right:0; border-radius:50%; overflow: hidden; } .employee-img-hobby { width:100%; height:auto; } .employee-img-business { position:absolute; top:0; left:-30%; width:50%; height:auto; border-radius:50%; box-shadow: 0px 0px 4px 2px rgb(171, 171, 171); } .employee-desc { margin-top:10px; word-wrap: break-word; } .employee-desc div { width:70%; margin:0 auto; } .seperator h4 { font-size:1.7rem; color:#003467; margin:0; } .employee-desc p { font-size:1.3rem; color:#003467; margin:0; } @media only screen and (min-width: 2000px) { #story { height:1300px; } .special-header { width:30%; } .lines { width:35%; } .special-banner { height:450px; } } @media only screen and (max-width: 1400px) { #story { height:550px; } .CEO-wrapper { width:95%; } .employee-desc p { font-size:1.8rem; } .banner-p { font-size:1.8rem; } } @media only screen and (max-width: 1200px) { #story { height:600px; } #story-header h1 { font-size:3rem; } #story-header h2 { font-size:2.5rem; } .story-wrapper h3 { font-size:2rem; } .story-wrapper p { font-size:1.8rem; } .special-header { font-size:1.7rem; width:30%; } .lines { height:2px; width:35%; } .seperator { margin:50px 0 0 0; width:25%; } } @media only screen and (max-width: 900px) { #banner-l-align h1 { font-size:3rem; } .special-banner { height:200px; } .banner-content { width:90%; } .banner-content-l { width:90%; } .banner-p { font-size:1.8rem; } #Wrapper { width:100%; } .employee-desc p { font-size:1.3rem; } } @media only screen and (max-width: 850px) { #story { height:500px; } #story-header h1 { font-size:3rem; } #story-header h2 { font-size:2.2rem; } .story-wrapper h3 { font-size:2rem; } .story-wrapper p { font-size:1.9rem; } .CEO-wrapper { width:95%; } .seperator h4 { font-size:1.9rem; } .employee-desc p { font-size:1.7rem; } } @media only screen and (max-width: 650px) { .banner-split:first-child { width:100%; } .banner-split:nth-child(2) { width:58%; } #banner-r-align { width:100%; margin:0; } #banner-l-align h1 { font-size:3rem; } .split-story:first-child { width:100%; } .split-story:nth-child(2) { width:0%; } #story { height:500px; } #story-header h1 { font-size:3rem; } #story-header h2 { font-size:2.5rem; } .story-wrapper h3 { font-size:2.2rem; } .story-wrapper p { font-size:2rem; } .special-header { width:40%; } .lines { width:30%; } .special-banner { height:250px; } .banner-p { font-size:1.8rem; } .banner-img-wrap img { width:100%; } .CEO-wrapper { width:95%; } .seperator { width:50%; } .keep-aspect { width:50%; padding-top:50%; } .seperator p { font-size:1.5rem; } } @media only screen and (max-width: 500px) { #banner-l-align h1 { font-size:2.5rem; } #story { height:auto; } .special-header { width:60%; } .lines { width:20%; } .special-banner { height:auto; } .banner-content { width:95%; } .banner-content-l { width:95%; } .banner-p { font-size:1.5rem; width:60%; padding: 25px 0; } .banner-img-wrap { width:40%; } .banner-img-wrap img { width:80%; } .CEO-wrapper { width:100%; } .split-CEO { width:100%; height:70%; } .CEO-desc { display:block; height:30%; width:95%; margin:0 auto } .CEO-desc p { font-size:1.7rem; } .CEO-desc h3 { font-size:2.5rem; } .seperator { width:50%; } .keep-aspect { width:50%; padding-top:50%; } .seperator p { font-size:1.5rem; } } @media only screen and (max-width: 300px) { #story { height:700px; } }