/* main.css 0.0.1
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
max-width: 100%;
overflow-x: hidden;
}
.show {
display: flex !important
}
.white-text {
color: #ffffff;
}
.bold-blue {
color: #1ABABD;
font-weight: 600;
}
.dark-grey-text {
color: #446374;
}
.header {
position: relative;
z-index: 3;
}
.header.bgcolor {
background: #1ABABD;
}
.header .container {
display: flex;
justify-content: flex-start;
height: 90px;
}
.header .container .logoparent {
display: flex;
align-items: center;
width: 30%;
}
.header .container .logoparent img {
max-width: 200px;
}
.header .container .navigation {
display: flex;
width: 70%;
align-items: center;
justify-content: flex-end;
}
.header .container .navigation ul {
display: flex;
justify-content: flex-start;
list-style-type: none;
margin-bottom: 0;
}
.header .container .navigation ul li a {
font-size: 16px;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
margin: 0 20px;
border-bottom: 2px solid transparent;
}
.header .container .navigation ul li a:hover {
text-decoration: none;
border-bottom: 2px solid #ffffff;
}
.menuToggle { display: none; }
.hero-section {
position: relative;
overflow-x: hidden;
margin-top: -90px;
}
.hero-section .circle {
position: absolute;
bottom: 20%;
right: -20vw;
background: #1ABABD;
height: 35vw;
width: 35vw;
border-radius: 50%;
}
.hero-section-text {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);
z-index: 2;
color: #ffffff;
font-size: 36px;
text-transform: uppercase;
}
.hero-section-text h1 {
font-weight: 800;
}
.who-we-are {
display: flex;
margin-top: 10vh;
}
.who-we-are .vert-header {
position: relative;
width: 20%;
}
.who-we-are .vert-header:before {
content: "";
position: absolute;
background: #1ABABD;
width: 40em;
height: 12em;
border-radius: 7em;
margin-top: -0.75em;
margin-left: -10em;
}
.who-we-are .vert-header .vert-header-text {
font-size: 72px;
font-weight: 600;
text-transform: uppercase;
transform: rotate(270deg);
position: absolute;
width: 600px;
color: #1ABABD;
}
.who-we-are .div-text-container {
position: relative;
width: 60%;
flex-direction: column;
padding-left: 18em;
line-height: 1.8em;
font-size: 18px;
font-weight: 500;
}
.who-we-are .div-text-container:before {
content: "";
position: absolute;
top: 4em;
left: 5em;
height: 2px;
width: 10em;
background: #1ABABD;
}
.readmore {
font-size: 16px;
font-weight: 600;
color: #1ABABD;
}
a.readmore:hover {
text-decoration: none;
}
.readmore .read-circle {
display: inline-block;
border: 2px solid #1ABABD;
height: 30px;
width: 30px;
border-radius: 50%;
font-size: 24px;
padding: 0 9px;
color: #1ABABD;
margin-left: 5px;
}
.what-we-do {
margin-top: 15em;
background: #ECF6F6;
}
.our-history {
background: #1ABABD url(./images/wave.png) no-repeat;
background-position: center;
background-size: cover;
margin: 20vh 0 5vh;
padding: 8em 0;
}
.our-history .container {
display: flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.our-history .our-history-item {
display: flex;
position: relative;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
background: #E4FFFF;
color: #156C6D;
font-size: 20px;
font-weight: 500;
height: 350px;
width: 350px;
padding: 30px;
border-radius: 50%;
border: 6px solid #1CADAF;
z-index: 2;
}
.our-history .our-history-item:first-child {
margin-right: calc(40% - 350px);
margin-bottom: 60px;
}
.our-history .our-history-item:nth-child(2) {
margin-left: calc(40% - 350px);
margin-bottom: 60px;
}
.our-history .our-history-item:nth-child(3) {
margin-right: calc(40% - 350px);
}
.our-history .our-history-item:nth-child(4) {
margin-left: calc(40% - 350px);
}
.our-history .our-history-item h3 {
font-size: 28px;
font-weight: 600;
}
.our-history .our-history-item-img {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
}
.our-history .our-history-item-img img {
max-height: 100%;
}
.our-history .our-history-item-img:nth-child(5) {
margin-left: -40%;
margin-top: 30px;
border: 6px solid #1CADAF;
}
.our-history .our-history-item-img:nth-child(6) {
margin-left: 40%;
margin-top: 30px;
border: 6px solid #1CADAF;
}
.our-history .top-hor-dash {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
margin-top: -220px;
width: 200px;
overflow-x: hidden;
}
.our-history .top-hor-dash img, .our-history .bottom-hor-dash img {
float: right;
}
.our-history .bottom-hor-dash {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%) rotate(180deg);
margin-top: 200px;
width: 200px;
overflow-x: hidden;
}
.our-history .diag-dash {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
margin-top: -250px;
width: 245px;
overflow-x: hidden;
}
.our-products {
display: flex;
position: relative;
padding: 12em 0;
overflow-x: hidden;
justify-content: center;
align-items: center;
flex-direction: column;
}
.our-product {
display: flex;
margin-bottom: 10em;
/*width: 60%;*/
background: #4F8F8F;
flex-direction: row;
height: 33em;
overflow: hidden;
-webkit-box-shadow: 5px 5px 16px -2px rgba(148,148,148,1);
-moz-box-shadow: 5px 5px 16px -2px rgba(148,148,148,1);
box-shadow: 5px 5px 16px -2px rgba(148,148,148,1);
}
.our-product:last-child {
margin-bottom: 0;
}
.our-product .picture {
/*width: 35%;*/
width: 400px;
max-height: 100%;
overflow: hidden;
}
.our-product .info {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 250px;
padding: 10px 20px 20px;
}
.our-product .info .info-up {
color: #fff;
}
.our-product .info .info-up h3 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 28px;
font-weight: 600;
}
.our-product .info .info-down .info-list {
list-style-type: none;
padding-left: 0;
margin-bottom: 2em;
}
.our-product .info .info-down .info-list li {
color: #A3D6D6;
margin-bottom: 8px;
font-size: 16px;
text-transform: uppercase;
}
.our-product .info .knowmore {
font-size: 16px;
color: #ffffff;
font-weight: 600;
}
.knowmore .know-circle {
display: inline-block;
border: 2px solid #ffffff;
height: 25px;
width: 25px;
border-radius: 50%;
font-size: 20px;
padding: 10px 7px;
color: #ffffff;
margin-left: 5px;
}
.knowmore .know-circle i {
padding: 0;
margin: -10px 0;
}
.what-we-do .vert-header {
position: absolute;
width: 20%;
right: 0;
top: 33em;
}
.what-we-do .vert-header:before {
content: "";
position: absolute;
background: #4F8F8F;
width: 40em;
height: 12em;
border-radius: 7em;
margin-top: 11em;
right: -26em;
}
.what-we-do .vert-header .vert-header-text {
font-size: 72px;
font-weight: 600;
text-transform: uppercase;
transform: rotate(90deg);
position: absolute;
width: 600px;
color: #A3D6D6;
}
.our-news {
position: relative;
padding: 10em 0;
overflow-x: hidden;
}
.our-news .vert-header {
position: absolute;
width: 20%;
right: 6em;
}
.our-news .vert-header:before {
content: "";
position: absolute;
background: #1ABABD;
width: 40em;
height: 12em;
border-radius: 7em;
margin-top: -1.5em;
right: -25.5em;
}
.our-news .vert-header .vert-header-text {
font-size: 72px;
font-weight: 600;
text-transform: uppercase;
position: absolute;
width: 600px;
color: #1ABABD;
}
.home-blog-group {
margin-top: 15em;
}
.home-blog-group .container {
display: flex;
justify-content: center;
}
.home-blog-group .blog-item {
position: relative;
background: #ebebeb;
height: 30em;
width: 350px;
margin: 0 10px;
padding: 0 20px;
}
.home-blog-group .blog-item::before {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(34,61,61);
background: linear-gradient(180deg, rgba(34,61,61,0) 0%, rgba(34,61,61,0.804359243697479) 75%, rgba(34,61,61,0.7987570028011204) 100%);
z-index: 2;
}
.home-blog-group .blog-item .blog-item-text {
position: absolute;
bottom: 20px;
width: calc(100% - 40px);
z-index: 2;
}
.home-blog-group .blog-item .blog-item-text h2 {
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.home-blog-group .blog-item .blog-item-text .readmore {
color: #ffffff;
}
.home-blog-group .blog-item .blog-item-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow-y: hidden;
}
.home-blog-group .blog-item .blog-item-bg img {
min-width: 100%;
}
.infopagescontent .page-header, .contact-header {
position: relative;
margin-bottom: 60px;
font-size: 40px;
font-weight: 600;
color: #1ABABD;
text-transform: uppercase;
border-bottom: 0;
}
.infopagescontent .page-header:after, .product-cat-item .prodtxtheader:after, .contact-header:after {
position: absolute;
bottom: -0.25em;
left: 50%;
transform: translateX(-50%);
content: "";
background: #1ABABD;
width: 3em;
height: 4px;
}
.infopagescontent .iessnippet-basic .display p {
margin-bottom: 30px;
font-style: normal;
font-size: 16px;
line-height: 1.8em;
}
.about-more-container {
height: 230px;
overflow-y: hidden;
transition: all 0.3s ease-in-out;
}
.about-more-container.open {
/*height: auto;*/
height: 500px;
overflow-y: auto;
}
.about-big-block {
display: flex;
}
.about-big-block.blue-green {
background: #1ABABD;
color: #ffffff;
}
.about-big-block.light-mustard {
background: #FFF6E4;
}
.about-big-block.light-mustard h3 {
color: #A39882;
}
.about-big-block.light-mustard p {
color: #D1C1A0;
}
.about-big-block .about-big-block-image {
width: 50%;
height: 40em;
overflow: hidden;
}
.about-big-block .about-big-block-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 50%;
height: 40em;
padding: 3em;
}
.about-big-block .about-big-block-text h3 {
font-size: 32px;
font-weight: 600;
text-transform: uppercase;
}
.show_more {
display: block;
font-size: 18px;
font-weight: 600;
text-align: center;
margin: 50px auto 25px;
}
.show_more a {
color: #1ABABD;
}
.show_more a em {
font-style: normal;
font-weight: 600;
}
.show_more span {
display: block;
border: 2px solid #1ABABD;
height: 30px;
width: 30px;
border-radius: 50%;
font-size: 24px;
padding: 1px 5px;
color: #1ABABD;
margin: 0 auto;
transition: .5s all;
}
.show_more a:hover {
text-decoration: none;
}
.show_more.open span {
transform: rotate(180deg);
}
.product-header {
display: flex;
align-items: flex-end;
position: absolute;
width: calc(100vw - 20px);
height: 50em;
overflow: hidden;
margin-top: -20px;
left: 50%;
transform: translateX(-50%);
}
.product-header .product-header-text {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
font-weight: 600;
color: #ffffff;
font-size: 42px;
bottom: -4em;
left: -2em;
background: rgba(23, 167, 184, 0.8);
height: 15em;
width: 17em;
padding-left: 3.5em;
padding-bottom: 1.5em;
padding-right: 2em;
}
.pushrestdown {
margin-top: 50em;
}
.product-cat-item {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
padding: 40px 0;
}
.product-cat-item .prodtxtsmall {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.product-cat-item .prodtxtheader {
position: relative;
margin-bottom: 50px;
font-size: 42px;
font-weight: 600;
color: #1ABABD;
text-transform: uppercase;
}
.product-cat-item .swiper {
width: calc(100% + 40px);
padding: 0 40px;
}
.product-cat-item .swiper .swiper-button-next {
right: 2px;
margin-top: -70px;
filter: invert(55%) sepia(53%) saturate(567%) hue-rotate(132deg) brightness(97%) contrast(103%);
}
.product-cat-item .swiper .swiper-button-prev {
left: 2px;
margin-top: -70px;
filter: invert(55%) sepia(53%) saturate(567%) hue-rotate(132deg) brightness(97%) contrast(103%);
}
.product-cat-item .swiper .swiper-slide {
position: relative;
text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
flex-direction: column;
}
.product-cat-item .swiper:before {
position: absolute;
content:"";
background: #ffffff;
height: 100%;
width: 27px;
top: 0;
left: 0;
z-index: 3;
}
.product-cat-item .swiper:after {
position: absolute;
content: "";
background: #ffffff;
height: 100%;
width: 27px;
top: 0;
right: 0;
z-index: 3;
}
.product-cat-item .swiper .swiper-slide .product-slide-text h3 {
font-size: 18px;
font-weight: 600;
color: #1ABABD;
}
.visit-site {
display: inline-block;
padding: 10px 16px 8px;
font-size: 20px;
color: #1ABABD;
border: 2px solid #1ABABD;
border-radius: 40px;
font-weight: 600;
}
a.visit-site:hover {
color: #1ABABD;
text-decoration: none;
}
.contact-top {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 17px);
margin-top: -20px;
height: 50em;
overflow: hidden;
}
.contact-top img {
position: absolute;
right: 0;
bottom: 0;
max-height: 100%;
}
.contact-top-text {
width: 500px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20vw;
}
.contact-top-text h3 {
font-size: 40px;
font-weight: 600;
color: #1ABABD;
text-transform: uppercase;
}
.contact-cards {
display: flex;
margin-top: -15em;
align-items: flex-start;
}
.contact-cards .contact-card {
display: flex;
background: #ffffff;
flex-direction: column;
align-items: center;
width: calc(33.333% - 20px);
padding: 30px;
margin: 0 10px;
border-radius: 12px;
-webkit-box-shadow: 5px 5px 8px 1px rgb(221 221 221);
-moz-box-shadow: 5px 5px 8px 1px rgb(221 221 221);
box-shadow: 5px 5px 8px 1px rgb(221 221 221);
}
.contact-cards .contact-card .contact-card-icon {
height: 62px;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-cards .contact-card .contact-card-icon img {
max-height: 45px;
}
.contact-cards .contact-card .label {
margin-bottom: 20px;
color: #223D3D;
font-size: 16px;
font-weight: 500;
}
.contact-cards .contact-card .value {
color: #223D3D;
font-size: 16px;
min-height: 55px;
font-weight: 600;
}
.contact-form-parent {
position: relative;
padding: 80px 0 50px;
margin-bottom: -25px;
}
.contact-form-parent:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #FFF6E4;
width: calc(100vw - 17px);
height: 100%;
z-index: -1;
}
.contact-form tbody {
display: flex;
width: 900px;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.contact-form tr {
display: flex;
width: 100%;
margin: 0 40px 10px;
flex-direction: column;
}
.contact-form tr td:first-child {
display: none;
text-align: left;
font-size: 24px;
padding-bottom: 5px;
}
.contact-form tr td:first-child span.label {
/*color: #213C6D;*/
color: #333;
}
.contact-form tr:nth-child(5) { margin-bottom: 2px; }
.contact-form tr:nth-child(6), .contact-form tr:nth-child(7) { width: 100%; }
.contact-form tr:nth-child(7) {
padding-top: 40px;
}
.contact-form tr:nth-child(7) td {
text-align: center;
}
.contact-form tr:nth-child(6) td, .contact-form tr:nth-child(7) td {
display: block;
}
.contact-form td {
background: transparent;
}
.contact-form input[type="text"], .contact-form select{
background: #FFFBF2;
width: 100%;
color: #000;
margin: 0 23px 23px 0;
font-size: 16px;
padding: 12px 10px;
outline: none;
/*border-radius: 8px;*/
border: 1px solid #EBE4D6;
}
.contact-form input[type="reset"]{
display:none;
}
.contact-form textarea{
width: 100%;
background: #FFFBF2;
color: #000;
font-size: 16px;
resize: none;
height: 185px;
padding: 12px;
outline: none;
/*border-radius: 8px;*/
border: 1px solid #EBE4D6;
}
.contact-form input[type=submit] {
border: none;
color: #1ABABD;
padding: 12px 15px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
background: transparent;
border: 2px solid #1ABABD;
border-radius: 30px;
width: 200px;
}
.contact-form input[type=submit]:hover {
background: #1ABABD;
color: #ffffff;
transition: .5s all;
-webkit-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
-moz-transition: .5s all;
}
.team {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
}
.team .team-member {
display: flex;
flex-direction: row;
/*flex-wrap: wrap;*/
}
.team .team-member.flip-right {
flex-direction: row-reverse;
}
.team .team-member .team-member-pic {
background: #ebebeb;
width: 20em;
height: 25em;
margin-right: 30px;
border-radius: 30px;
}
.team .team-member .team-member-description {
position: relative;
padding-left: 6em;
max-width: 800px;
margin-left: -200px;
z-index: 3;
}
.team .team-member.flip-right .team-member-description {
margin-left: initial;
margin-right: -200px;
padding-left: initial;
padding-right: 6em;
}
/*.team .team-member .team-member-description:before {*/
/*content: "";*/
/*top: 0;*/
/*left: 0;*/
/*width: 40px;*/
/*height: 40px;*/
/*background: conic-gradient(at 50% 50%,transparent 135deg,#446374 0,#446374 225deg, transparent 0);*/
/*height: 100%;*/
/*border-radius: 30px;*/
/*z-index: -1;*/
/*}*/
.team .team-member .team-member-description:after {
position: absolute;
background: url(../../misc_images/about-bg-rect.png) 0% 70% no-repeat;
background-size: contain;
/*top: 0;*/
bottom: 0;
/*right: -20px;*/
left: 0;
width: 100%;
height: 100%;
content: "";
/*background-color: #446374;*/
/*border-radius: 30px;*/
z-index: -1;
}
.team .team-member.flip-right .team-member-description:after {
transform: scaleX(-1);
}
.team .team-member .team-member-description .team-member-description-text {
display: flex;
flex-direction: row;
color: #ffffff;
height: 100%;
padding-bottom: 4em;
justify-content: flex-end;
align-items: flex-end;
}
.team .team-member.flip-right .team-member-description .team-member-description-text {
flex-direction: row-reverse;
}
.team .team-member .team-member-description .team-member-description-text .team-member-name {
font-size: 24px;
text-transform: uppercase;
}
.team .team-member.flip-right .team-member-description .team-member-description-text .team-member-name {
text-align: right;
}
.team .team-member .team-member-description .team-member-description-text .team-member-name h3 {
font-weight: 600;
}
.team .team-member .team-member-description .team-member-description-text .team-member-position {
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
}
.team .team-member .team-member-description .team-member-description-text .team-member-text {
position: relative;
max-width: 70%;
margin-bottom: 2.5em;
font-size: 16px;
padding: 0 30px 0 40px;
}
.team .team-member .team-member-description .team-member-description-text .team-member-text:before {
content: "";
position: absolute;
left: 1em;
top: -1em;
height: 5em;
width: 2px;
background: #A5C9DD;
}
.team .team-member.flip-right .team-member-description .team-member-description-text .team-member-text:before {
right: 1em;
left: initial;
}
.team .team-member .team-member-description .team-member-description-text .team-member-text p {
max-height: 45px;
overflow: hidden;
}
.team .team-member .team-member-description .team-member-description-text .team-member-text a {
display: block;
color: #A5C9DD;
font-weight: 600;
float: right;
position: relative;
padding-left: 15px;
}
.team .team-member.flip-right .team-member-description .team-member-description-text .team-member-text a {
float: left;
}
.team .team-member .team-member-description .team-member-description-text .team-member-text a i {
font-size: 20px;
display: inline-block;
position: absolute;
left: 0;
}
footer {
display: flex;
width: 100%;
padding: 50px 0;
background: #1ABABD;
color: #ffffff;
}
footer .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
footer .bigheader {
font-size: 52px;
font-weight: 700;
margin-bottom: 30px;
}
.footer-left {
width: calc(100% - 200px);
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.bottom-footer-left {
width: calc(100% - 350px);
margin-top: 30px;
}
.footer-right {
display: flex;
flex-direction: column;
justify-content: flex-end;
/*width: 50%;*/
width: 200px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.bottom-footer-right {
width: 350px;
margin-top: 30px;
}
.bottom-footer-right ul {
display: flex;
flex-direction: row;
list-style-type: none;
justify-content: flex-end;
}
.bottom-footer-right ul li a {
padding: 0 15px;
color: #ffffff;
}
.bottom-footer-right ul li a:hover {
text-decoration: none;
}
.bottom-footer-right ul li:last-child a {
padding-right: 0;
border-left: 1px solid rgba(255,255,255,0.5);
}
.footer-right ul {
list-style-type: none;
display: flex;
flex-direction: column;
text-align: right;
}
.footer-right ul li a {
display: inline-block;
color: #ffffff;
margin-bottom: 10px;
font-size: 18px;
font-weight: 600;
}
.footer-right ul li a:hover {
text-decoration: none;
}
.social_media_icons {
display: flex;
justify-content: flex-end;
}
.social_media_icons .socIcon a {
height: 40px;
width: 40px;
background: #223D3D;
padding-top: 3px;
margin-right: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #ffffff;
}
.social_media_icons .socIcon a:hover {
text-decoration: none;
}
.social_media_icons .socIcon:last-child a {
margin-right: 0;
}
.social_media_icons .socIcon a i {
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden,
[hidden] {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1200px) {
.our-history .our-history-item:first-child {margin-right: calc(50% - 350px);}
.our-history .our-history-item:nth-child(2) {margin-left: calc(50% - 350px);}
.our-history .our-history-item:nth-child(3) {margin-right: calc(50% - 350px);}
.our-history .our-history-item:nth-child(4) {margin-left: calc(50% - 350px);}
.our-history .our-history-item-img:nth-child(5) { margin-left: -45%; margin-top: 70px; }
.our-history .our-history-item-img:nth-child(6) { margin-left: 45%; margin-top: 70px; }
}
@media only screen and (max-width: 1080px) {
.our-history .our-history-item-img:nth-child(5), .our-history .our-history-item-img:nth-child(6) { display: none; }
}
@media only screen and (max-width: 1000px) {
.our-history .container { width: 100%; }
}
@media only screen and (max-width: 950px) {
.top-hor-dash, .bottom-hor-dash, .diag-dash { display: none; }
.our-history .our-history-item { margin-bottom: 20px !important; margin-right: 0 !important; margin-left: 0 !important; font-size: 18px; }
}
@media only screen and (max-width: 780px) {
.our-history .our-history-item { height: 250px; width: 250px; }
}
@media only screen and (max-width: 600px) {
.menuToggle { display: block; }
.header {
/*display: none;*/
}
.header .container {
align-items: center;
}
.header .container .logoparent {
width: 90%;
}
.header .container .navigation {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #1ABABD;
/*z-index: 2;*/
}
.header .container .navigation ul {
flex-direction: column;
}
.header .container .navigation ul li a {
display: inline-block;
padding: 12px 0;
font-size: 24px;
}
.menuToggle {
position: relative;
z-index: 3;
color: #ffffff;
font-size: 24px;
}
.hero-section {
/*margin-top: 0;*/
height: 500px;
}
.hero-section img {
max-width: none;
max-height: 100%;
margin-left: -15em;
}
.hero-section-text h1 {
font-size: 28px;
line-height: 1.5em;
}
.hero-section .circle {
bottom: 0;
}
.who-we-are {
position: relative;
/*flex-direction: column;*/
flex-wrap: wrap;
}
.who-we-are .vert-header .vert-header-text {
width: 210px;
font-size: 28px;
left: -65px;
}
.who-we-are .vert-header:before {
position: absolute;
background: #1ABABD;
width: 10em;
height: 4.25em;
border-radius: 7em;
margin-top: -0.05em;
margin-left: -5em;
}
.who-we-are .div-text-container:before {
top: 1.75em;
left: 5em;
height: 2px;
width: 5em;
}
.who-we-are .div-text-container {
width: 100%;
font-size: 16px;
padding-left: 5em;
padding-top: 3em;
padding-right: 1em;
}
.about-big-block {
flex-wrap: wrap;
}
.about-big-block .about-big-block-image {
width: 100%;
height: initial;
}
.about-big-block .about-big-block-text {
width: 100%;
height: initial;
}
.what-we-do .vert-header {
top: -7em;
}
.what-we-do .vert-header:before {
position: absolute;
width: 10em;
height: 4.5em;
border-radius: 7em;
margin-top: 11em;
right: -5em;
}
.what-we-do .vert-header .vert-header-text {
font-size: 28px;
font-weight: 600;
text-transform: uppercase;
position: absolute;
transform: rotate(0);
width: 224px;
color: #A3D6D6;
top: 5.35em;
right: 0;
}
.infopagescontent .page-header, .contact-header {
font-size: 32px;
}
.our-news {
padding: 5em 0;
}
.our-news .vert-header:before {
width: 10em;
height: 4.5em;
margin-top: 0.2em;
right: -9.5em;
}
.our-news .vert-header {
right: 7.5em;
}
.our-news .vert-header .vert-header-text {
font-size: 28px;
}
.home-blog-group {
margin-top: 10em;
overflow-x: scroll;
max-width: 100%;
}
.home-blog-group .container {
width: 250%;
}
.our-products {
padding: 12em 0 6em;
}
.our-product {
position: relative;
padding-bottom: 14em;
margin-bottom: 5em;
width: calc(100% - 40px);
height: 37em;
}
.our-product .info {
width: 100%;
}
.our-product .picture:first-child {
position: absolute;
width: 50%;
bottom: 0;
left: 0;
}
.our-product .picture:last-child {
position: absolute;
width: 50%;
bottom: 0;
right: 0;
}
footer {
overflow-x: hidden;
}
footer .bigheader {
font-size: 36px;
text-align: center;
}
.footer-left {
width: 100%;
}
.footer-right {
width: 100%;
}
.footer-right ul {
width: 100%;
padding-top: 2em;
padding-left: 0;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.footer-right ul li {
position: relative;
}
.footer-right ul li:before {
content:"";
position: absolute;
background: #FFFFFF;
right: -13px;
height: 65%;
width: 1px;
}
.footer-right ul li:last-child:before {
display: none;
}
.social_media_icons {
width: 100%;
justify-content: center;
}
.bottom-footer-left {
width: 100%;
text-align: center;
}
.bottom-footer-right {
width: 100%;
}
.bottom-footer-right ul {
justify-content: center;
padding-left: 0;
}
/*.our-product .info {*/
/*width: calc(100% - 40px);*/
/*}*/
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
.iesfontfamily1{font-family: 'Montserrat', sans-serif;}
.iesfontfamily2{font-family: 'Montserrat', sans-serif;}