/****** Start Common Styles ******/
html,body {
margin:0;
padding:0;
letter-spacing: 0.02em;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
letter-spacing: 0.04em;
line-height: 1.4;
}
h1 {font-size: 2em;/*32px*/ margin:0 0 0.7em;}
h2 {font-size: 1.6em;/*24px*/ margin:0 0 0.6em;}
h3 {font-size: 1.4em;/*22px*/ margin:0 0 0.5em;}
h4 {font-size: 1.3em;/*20px*/ margin:0 0 0.4em;}
h5 {font-size: 1.2em;/*18px*/ margin:0 0 0.3em;}
h6 {font-size: 1.1em;/*16px*/}
p{
font-size:1em /*<16px*/;
margin:0 0 1.1em;
line-height: 1.3;
}
li, li li{
font-size:1rem;
line-height: 1.3;
}
img {
max-width: 100%;
display: block;
border-style: none;
height: auto;
}
figure{
margin:0;
}
a {
text-decoration:none;
outline: none;
}
}
a:hover, a:focus{
}
.button, button,
input[type='button'], input[type='reset'],
input[type='submit'], .wp-block-button__link {
display: inline-block;
width: auto;
min-width: 5.625em;
height: auto;
padding: 0.8rem 1.8rem;
border: 0;
border-radius: 0.5em;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 2;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: all 0.5s ease;
}
.button.outline, button.outline,
input[type='button'].outline, input[type='reset'].outline,
input[type='submit'].outline {
border: 2px solid;
border-radius: 0.5em;
}
.button.outline:hover, .button.outline:focus,
button.outline:hover, button.outline:focus,
input[type='button'].outline:hover, input[type='button'].outline:focus,
input[type='reset'].outline:hover, input[type='reset'].outline:focus,
input[type='submit'].outline:hover, input[type='submit'].outline:focus {
border: 2px solid;
border-radius: 0.5em;
}
/****** End Common Styles ******/
/* Preloader Start
--------------------------------------------- */
#preloader {
position: fixed;
left: 0;
right: 0;
height: 100%;
z-index: 9998;
overflow: hidden;
opacity: 1;
transition: all 1000ms ease-out 1000ms;
background-color: #FFF;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#preloader: {
top: 0;
bottom: 0;
}
#status {
position: absolute;
left: 50%;
top: 50%;
background-repeat: no-repeat;
background-position: center;
z-index: 9999;
opacity: 1;
transform: scale(1);
transition: all 1000ms ease-out 1000ms;
}
#preloader.preloader-hide {
z-index:-99;
}
#preloader.preloader-hide:before {
content:'';
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#preloader.preloader-hide:after {
content:'';
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
#status.preloader-hide {
transform: scale(0.45) translateY(-100vh);
}
/* Preloader End
--------------------------------------------- */
/* Editor Grid Start
--------------------------------------------- */
site-title,
.site-description {
display:none;
}
.mag-row {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
align-content: space-between;
}
.mag-col-4,
.mag-col-8,
.mag-col-12 {
flex: 0 0 100%;
}
.mag-grid img {
width:100%;
height: auto;
max-width: 100%;
}
.mag-grid .full-width {
display: none;
}
.mag-grid .full-width img {
max-width: 100%;
}
.mag-grid .vertical {
max-width: 120px;
margin: 0 auto;
display: block;
}
.mag-grid .img-left,
.mag-grid .img-center,
.mag-grid .img-right {
float:none;
padding: 20px 0;
max-width:420px;
margin:0 auto;
display:grid;
}
.mag-grid .img420 {
max-width: 420px;
}
.mag-grid .img500 {
max-width: 500px;
}
.mag-grid .img640 {
max-width: 640px;
}
.mag-grid .img720 {
max-width: 720px;
}
.mag-grid .img960 {
max-width: 960px;
}
/* Editor Grid End
--------------------------------------------- */
/****** Start Responsive Tables *******/
/* Tables
================================== */
.mag-table-container {
margin: 0 0 2em 0;
padding: 0;
}
.mag-table {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.mag-table-cell {
box-sizing: border-box;
-webkit-box-flex: 1;
flex-grow: 1;
width: 100%;
padding: 0.8em 1.2em;
overflow: hidden;
list-style: none;
border: solid 3px;
text-align: left;
}
.mag-table-cell > h1,
.mag-table-cell > h2,
.mag-table-cell > h3,
.mag-table-cell > h4,
.mag-table-cell > h5,
.mag-table-cell > h6 {
margin: 0;
}
/* Table column sizing
================================== */
.mag-table--2cols > .mag-table-cell { width: 50%; }
.mag-table--3cols > .mag-table-cell { width: 33.33%; }
.mag-table--4cols > .mag-table-cell { width: 25%; }
.mag-table--5cols > .mag-table-cell { width: 20%; }
.mag-table--6cols > .mag-table-cell { width: 16.6%; }
.mag-table--2cols.uneven-widths > .mag-table-cell:nth-of-type(odd) {width: 25%;}
.mag-table--2cols.uneven-widths > .mag-table-cell:nth-of-type(even) {width: 75%;}
/****** End Responsive Tables *******/
/****** Start Page Container ******/
.page-container {
display: none;
grid-template-columns: 1fr;
overflow:hidden;
opacity:0;
transition: all 500ms ease-out 500ms;
}
.page-container.display-page {
display: grid;
opacity:1;
}
/****** End Page Container ******/
/****** Start Header Section ******/
.page-container>header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
}
header .preheader {
display: none;
}
.mobile-nav .preheader ul {
padding:0;
}
.mobile-nav .preheader ul.contact-details {
justify-content:flex-start;
}
.mobile-nav .preheader ul.login {
display: grid;
grid-gap: 1.25em;
}
.mobile-nav .preheader ul.contact-details li {
flex: 0 1 auto;
padding-right: 1.25em;
list-style-type: none;
}
.mobile-nav .preheader ul i {
margin-right: 8px;
}
.mobile-nav .preheader ul.login li {
list-style-type: none;
flex: 0 0 1;
}
header .header {
display: grid;
grid-template-columns: 1em minmax(auto,16.5625em) repeat(3,minmax(auto,16.5625em)) 1em;
grid-gap: 0;
align-items: flex-end;
}
header .header .logo {
grid-column: 2 / 3;
}
header .header .logo img {
width:100%;
max-width:11.25em;
flex: 1;
transition: all 1s ease;
}
header .header.centered {
grid-template-columns: auto repeat(12,minmax(auto,4.345em)) auto;
grid-gap: 0 1em;
grid-template-rows: 3.4em;
transition: all 1s ease;
}
header .header.centered.header--fixed {
grid-template-rows: 1.6em 2em 0em;
}
header .header.centered nav.nav-bar.top-nav .main-nav li {
margin: 0 1em;
}
header .header.centered .nav-link--home a {
flex: 0 0 100%;
z-index: 2;
}
header .header.centered .logo {
max-width: unset;
grid-column: 6/10;
display: grid;
grid-template-columns: 5.5em;
justify-content: center;
grid-row: 1/3;
transition: all 1s ease;
}
header .header.centered .logo img {
max-width:unset;
flex: unset;
}
header .header.centered .nav-container {
grid-column: 2/14;
grid-row: 2/3;
}
header .header--fixed.header.centered .preheader {
}
header .header.centered.header--fixed .nav-container {
grid-row: 1/3;
}
header .header.centered .nav-container .logo-container {
margin-left: 200px;
width: 25px;
}
header .header.centered .nav-container .logo-container a {
display:none;
}
header .header.centered .nav-container nav.nav-bar.top-nav {
justify-content: space-between;
}
header .header.centered .preheader {
grid-template-columns: repeat(12,minmax(auto,1fr));
grid-column: 1/15;
grid-row: 1/2;
}
header .header.centered .preheader > div {
display: grid;
grid-template-columns: auto repeat(4,minmax(auto,1fr)) auto;
grid-template-rows: auto 1fr auto;
gap: 0.5em 1.75em;
}
header .header.centered .preheader .left-content {
grid-column: 1/6;
border-bottom-right-radius: 3em;
}
header .header.centered .preheader ul.login {
justify-content: flex-end;
grid-column: 2/6;
grid-row: 2/3;
}
header .header.centered .preheader .left-content ul.login {
justify-content: flex-end;
}
header .header.centered .preheader .right-content ul.login {
justify-content: flex-start;
}
header .header.centered .preheader .right-content {
grid-column: 8/13;
border-bottom-left-radius: 3em;
}
header .header.right-preheader .logo {
grid-column: 2 / 4;
max-width: 2.25em;
}
header .header.right-preheader .logo img {
max-width:4em;
padding: 0;
}
header .header .nav-container {
grid-column: 4 / 5;
}
.home header .header .nav-container {
}
header .header ul {
display:flex;
flex-flow: row wrap;
}
header .header ul {
list-style: none;
justify-content:flex-end;
margin: unset;
}
header .header ul li {
flex: 1 1 auto;
}
/****** End Header Section ******/
/****** Start Fixed Header Section ******/
.header--fixed {
transition: padding .2s cubic-bezier(.694,.0482,.335,1),background .2s cubic-bezier(.694,.0482,.335,1);
left: 0;
position: fixed;
width:100%;
z-index:3;
}
header .header.right-preheader.header--fixed .logo img,
header .header--fixed .logo img {
max-width: 3.6em;
}
/****** End Fixed Header Section ******/
/****** Start Nav Section ******/
menu, nav {
display: block
}
.nav-link--disabled, .nav-link--disabled:hover {
border-color: transparent !important;
cursor: not-allowed;
}
/*.header--fixed .nav-bar {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}*/
body.fixed .top-nav.-open {
position: fixed;
top: 0;
bottom: 0;
left: 0;
transform: translate(0)
}
.mobile-nav .nav-bar {
display: grid;
justify-content: center;
align-content: center;
grid-gap: 1.75em;
}
.nav-bar {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: row;
flex-direction: row
}
.nav-bar--list {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start
}
.nav-bar--center, .nav-bar--list {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center
}
.nav-bar--air-bottom {
margin-bottom: 2.5em
}
.nav-link, .nav-link:visited {
text-decoration: none;
letter-spacing: 0.04em;
margin: 0;
}
.mobile-nav .nav-link,
footer .menu .nav-link {
position: relative;
padding-left: 1.55em;
margin: 0.5em 0;
display: inline-block;
}
.mobile-nav .nav-link::before,
.mobile-nav .nav-link::after,
footer .menu .nav-link::before,
footer .menu .nav-link::after {
font-family: "Font Awesome 6 Duotone";
font-weight: 900;
position: absolute;
left: 0;
width: 1.25em;
text-align: center;
font-size:1.1em;
}
.mobile-nav .nav-link::before,
footer .menu .nav-link::before {
color: var(--fa-primary-color, inherit);
opacity: 1;
opacity: var(--fa-primary-opacity, 1.0);
content: "\f204";
}
.mobile-nav .nav-link:hover::before,
footer .menu .nav-link:hover::before,
footer .menu .nav-link.nav-link--active::before,
footer .menu .nav-link.nav-link--active::before {
color: var(--fa-primary-color, inherit);
opacity: 1;
opacity: var(--fa-primary-opacity, 1.0);
content: "\f205";
}
.mobile-nav .nav-link::after,
footer .menu .nav-link::after {
color: var(--fa-secondary-color, inherit);
opacity: var(--fa-secondary-opacity, 0.4);
content: "\10f204";
}
.mobile-nav .nav-link:hover::after,
footer .menu .nav-link:hover::after,
footer .menu .nav-link.nav-link--active::after,
footer .menu .nav-link.nav-link--active::after {
color: var(--fa-secondary-color, inherit);
opacity: var(--fa-secondary-opacity, 0.4);
content: "\10f205";
}
.nav-link--air-bottom {
margin-bottom: 5px;
}
.nav-link--home {
font-size: 1.5em;
font-weight: 900;
display: flex;
align-items: center;
}
.nav-link--home:hover {
box-shadow: none
}
.nav-link--home__text {
position: relative
}
.nav-link--home__text:after {
position: absolute;
right: 0;
display: block;
content: "";
height: 3px;
width: 200%
}
.mobile-nav-handler {
margin-left: auto;
margin-right: 0;
display: grid;
grid-template-columns: repeat(3,1fr);
align-items: center;
align-content: center;
justify-content: center;
grid-gap: 0.4em;
grid-column: 4/6;
}
.centered .mobile-nav-handler {
position:absolute;
grid-template-columns: 1em repeat(12,minmax(auto,3.75em)) 1em;
grid-gap:0;
}
.mobile-nav-handler a {
width: 1.5em;
height: 2.5em;
align-items: center;
align-content: center;
justify-content: center;
font-size: 1.25em;
display: grid;
margin: 0;
}
.mobile-nav-handler a:first-child{
grid-column:1/2;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 10;
width: 2em;
height: 2.5em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
justify-content: flex-end;
}
.centered .hamburger {
grid-column: 13/14;
}
.header--fixed .mobile-nav-handler a,
.header--fixed .hamburger {
height: 2.2em;
}
.hamburger span, .hamburger span:after, .hamburger span:before {
display: block;
transition-property: all;
transition-duration: .1s
}
.hamburger span {
margin: 0 auto;
position: relative
}
.hamburger span:after, .hamburger span:before {
position: absolute;
content: ''
}
.hamburger.lines span, .hamburger.lines span:after, .hamburger.lines span:before {
width: 1.25em;
height: 2px;
margin: 0;
}
.hamburger.lines span:before {
transform: translateY(-5px)
}
.hamburger.lines span:after {
transform: translateY(5px)
}
.hamburger.lines:hover span:before {
transform: translateY(-7px)
}
.hamburger.lines:hover span:after {
transform: translateY(7px)
}
.hamburger.lines:hover.active span:before {
transform: rotate(45deg)
}
.hamburger.lines:hover.active span:after {
transform: rotate(-45deg)
}
.hamburger.lines.active span {
background-color: transparent !important
}
.hamburger.lines.active span:after, .hamburger.lines.active span:before {
transform: translateY(0)
}
.hamburger.lines.active span:before {
transform: rotate(45deg)
}
.hamburger.lines.active span:after {
transform: rotate(-45deg)
}
.mobile-nav {
width: 100%;
height: auto;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: -ms-grid;
display: grid;
position: fixed;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
height: 0;
grid-template-columns: minmax(0, 90%);
}
.mobile-nav--open {
opacity: 1;
height: 100vh;
z-index:10;
}
.mobile-nav ul {
list-style: none;
margin: unset;
}
.mobile-nav .nav-link,
.mobile-nav .preheader a {
transition: transform .6s cubic-bezier(.23,1,.32,1);
transform: translateX(22.4375em);
opacity: 0;
font-size: 1em;
transition-delay: 100ms;
}
.mobile-nav.mobile-nav--open .nav-link,
.mobile-nav.mobile-nav--open .preheader a {
transform: translate(0);
opacity: 1
}
nav.nav-bar .main-nav {
padding-left: 0;
margin:0;
}
nav.nav-bar .main-nav li {
position:relative;
list-style-type: none;
}
nav.nav-bar.top-nav .main-nav li {
padding: 1.25em 0;
margin: 0 1.25em;
}
@media (max-width:60em) {
.header .nav-bar {
display: none
}
}
/****** End Nav Section ******/
/* Content Section */
.content-container {
display: grid;
grid-template-columns: auto 1fr auto;
}
.content-container .slider {
grid-column-start: span 6;
display:grid;
min-height: 44vh;
}
.slider .slide {
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: 2em;
}
.slider .slide figure,
.slider .slide .slide-text {
display:grid;
grid-template-columns: auto minmax(10em,30em) auto;
grid-template-rows: repeat(3, auto);
grid-gap: 2em 1em;
justify-content: center;
align-items: center;
align-content: center;
}
.slider .slide figure img,
.slider .slide .slide-text .slide-text-inner {
grid-column: 2/3;
grid-row: 2/3;
}
.slider .slide figure img{
min-height: 10vh;
}
.slider .slide .left-side {
order: 1
}
.slider .slide .right-side {
order: 2
}
.section__hero-content {
padding: 1.875em;
max-width: 100%;
margin: 3.75em 1.875em;
border-radius: 0.625em;
text-align: center;
}
/*.content-container.grid.has-sidebar {
display: grid;
grid-template-columns: auto repeat(4,289.04111387291px) auto;
text-align:center;
}*/
.content-container .banner/*, .content-container .banner-container .bg-banner-image*/ {
grid-column: span 6;
display: grid;
grid-template-columns: auto minmax(auto,71.5em) auto;
grid-template-rows: repeat(3,auto);
grid-gap: 2.75em 1.75em;
}
.content-container .banner h1,
.content-container .banner-content h1 {
grid-row:1/2;
justify-self: center;
}
.content-container .banner-container {
grid-column: span 6;
}
.content-container .contact-section .banner-container {
grid-column: 1/2;
}
.content-container .bg-banner-image {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.content-container .main {
grid-column-start: span 6;
display:grid;
grid-template-columns: 1em minmax(auto,85em) 1em;
grid-template-rows: auto 1fr auto;
grid-gap: 1em 0;
justify-content: center;
margin-top: 1em;
margin-bottom: 2em;
}
.content-container .main.boxed {
grid-column-start: span 6;
display:grid;
grid-template-columns: 1em minmax(auto,85em) 1em;
grid-template-rows: auto 1fr auto;
grid-gap: 1em 0;
}
.main-with-aside {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-column: 2/3;
grid-row: 2/3;
grid-gap: 0.5em;
}
.main .inner-content {
grid-column: 2/3;
grid-row: 2/3;
}
.main .inner-content p {
text-align: justify;
}
.main-with-aside .inner-content {
grid-column: 1/13;
grid-row: unset;
}
.main-with-aside aside {
grid-column: 1/13;
}
/*.main .inner-content img {
max-width: 20em;
padding:left:0;
padding-right: 0;
padding-bottom: 1.25em;
}*/
.content-container .aside {
padding: 2.5em 1.75em;
}
.publications-services-page .main .services {
margin-bottom: 2em;
}
/****** Start Homepage Content ******/
.services-grid figcaption {
text-align:center;
}
.services .services-grid {
display: flex;
flex-flow: row wrap;
align-items: normal;
justify-content: center;
margin: 0 auto;
padding: 0;
}
.services .services-grid .type-services {
list-style-type:none;
flex: 1 1 auto;
display: grid;
}
.services .services-grid .post-thumbnail {
}
.services .services-grid .post-thumbnail img {
}
.services .services-grid .entry-content {
max-width: 34em;
}
.services .services-grid .type-services {
justify-content: center;
padding: 2.5em 1.75em;
}
.main .news {
text-align:center;
display: grid;
grid-template-columns: auto minmax(auto,71.5em) auto;
grid-template-rows: auto repeat(2,auto) auto;
justify-content: center;
grid-row-gap: 2em;
}
.main section.news {
grid-column-gap: 1.75em;
}
.main .news h2 {
margin-bottom:0;
}
.main .news > :nth-child(1) {
grid-column: 2/3;
grid-row: 2/3;
}
.main .news > :nth-child(2) {
grid-column: 2/3;
grid-row: 3/4;
}
.main .news-grid{
display: grid;
grid-template-columns: minmax(auto,22.6666667em);
grid-gap: 1.75em;
justify-content:center;
margin: 0;
padding:0;
}
.news-grid .img-container {
margin-bottom: 1.25em;
}
.news-grid .img-container img {
max-width: 100%;
}
.news .news-grid li {
list-style-type: none;
margin-bottom: 1.875em;
}
.services .services-grid li:last-of-type,
.news .news-grid li:last-of-type {
margin-bottom: 0;
}
.news-grid .blogpost-meta {
margin: 0 0.625em 8px;
}
.blogpost-meta {
text-align:center;
}
.blogpost-meta i {
margin-right: 6px;
}
.news-grid .blogpost-excerpt {
margin-bottom: 1.25em;
}
.main .about {
display: grid;
grid-template-columns: auto minmax(auto,71.5em) auto;
grid-gap: 3em 1.75em;
}
.about .about-inner {
grid-column: 2 /3;
display: grid;
grid-template-columns: minmax(auto,71.5em);
grid-template-rows: auto minmax(auto,auto) auto;
grid-gap: 1.75em;
text-align:center;
}
.main .about h2 {
margin-bottom:0;
}
.main .about .button {
margin: 0 auto;
}
/****** End Homepage Content ******/
/****** Start Inner Page Grid ******/
.mag-grid {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 1.75em;
}
.mag-grid-section {
grid-column: span 12;
}
/****** End Inner Page Grid ******/
/****** Start Shop/Product Content ******/
.product-grid {
display: grid;
grid-template-columns: auto minmax(16.25em,22.5em) auto;
grid-gap: 1.75em;
}
.product-grid__item {
display: grid;
grid-column: 2/3;
grid-template-columns: minmax(auto,300px);
grid-template-rows: auto repeat(2,auto) auto;
align-items: flex-start;
align-content: center;
justify-content: center;
grid-gap: 1.75em;
}
.product-grid .product-image-container {
display: grid;
grid-template-columns: auto minmax(auto,220px) auto;
}
.product-grid .product-image-container img {
grid-column: 2/3;
padding-right: 0;
padding-bottom: 0;
max-width: 100%;
}
.product-container .product-image-container img {
padding-right: 0;
padding-bottom: 0;
max-width: 280px;
}
.product-details-container div {
margin-bottom:1.25em;
}
.product-details-container .product-advantage {
margin-bottom: 0;
}
.product-details-container .product-advantage p {
margin-bottom: 0.6em;
}
.product-details-container .product-price {
font-size: 1.6em;
font-weight:600;
}
section.news .pagination {
display:none;
}
.product-container {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: 1.75em;
grid-template-rows: auto 1fr;
}
.product-image-container {
justify-content: center;
display:grid;
}
.product-grid .product-image-container {
grid-row: 2/3;
}
.product-grid-meta {
grid-row: 3/4;
font-weight:600;
text-align:center;
}
.product-grid-item-name {
font-size: 1.2em;
}
.product-grid-item-price {
font-size: 1.7em;
}
.product-grid-item-price span {
font-size: 0.75em;
font-weight: 400;
}
.col-md-4.column {
float: right;
max-width: 34%;
padding: 0 0 30px 20px;
}
.col-md-4.column img {
max-width:100%;
}
.services .services-grid .entry-content .button {
display: block;
width: auto;
max-width: 130px;
margin: 20px auto 0;
}
/****** End Shop/Product Content ******/
/****** Start Table Layout ******/
.mag-table-wrapper {
display:grid;
grid-template-rows: auto minmax(auto,auto) auto;
grid-row-gap: 2.5em;
}
.mag-table-wrapper .mag-table {
grid-row: 2/3;
display: flex;
align-items: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mag-table td {
padding: 0 0.25em;
text-align:center;
}
.mag-table td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
border-right: 1px solid;
text-align:left;
min-width: 6.9275em;
}
/****** End Table Layout ******/
/****** Start Contact Page Contact Details & Form ******/
/***** Formulate forms default *****/
.formulate__cell {
display: grid;
grid-gap: 1em;
}
.formulate__field {
display: grid;
grid-template-columns: 10em 1fr;
}
.formulate__field__label {
grid-area:left;
grid-column: 1 / 2;
}
.formulate__field input,
textarea {
grid-area: right;
grid-column: 2 / 3;
padding: 0.5em;
}
.g-recaptcha div {
grid-area: right;
grid-column: 2 / 3;
}
::-webkit-input-placeholder {
font-size: 1em;
color: #7d7d7d;
font-weight: 400;
}
.contact-page .mag-grid-section {
display: grid;
grid-template-rows: repeat(2,auto);
grid-gap: 1.75em;
grid-auto-flow: row;
}
.contact-page .mag-grid-section p:last-of-type {
margin: 0;
}
.contact-page .mag-grid-section p:first-child {
grid-column: span 12;
}
.mag-grid-section .formulate-wrapper {
grid-column: span 6;
}
.mag-grid-section .contact-details {
grid-column: span 6;
}
.contact-page .contact-details ul {
padding-left: 0;
margin: 0;
}
.contact-page .contact-details ul li {
list-style-type: none;
}
.contact-page .contact-details {
padding-left: 0;
}
.contact-page .contact-details.links li {
margin: 0.5em 0;
}
.contact-page .contact-details i {
width: 1.75em;
display: inline-block;
}
/****** End Contact Page Contact Details & Form ******/
/****** Start Login Page ******/
/***** Login page *****/
/***** Login page *****/
.login-page .login-inner {
display: grid;
grid-gap: 1.75em;
grid-auto-flow: row;
}
.login-page .mag-grid div {
grid-column: span 6;
padding:2em;
}
.login-page .inner-content form {
display: grid;
grid-template-columns: 5em 1fr;
grid-gap: 1em;
}
.login-page .inner-content input {
padding: 15px;
}
.login-page .inner-content .login-page label {
grid-column: 1 / 2;
}
.login-page .inner-content input,
button {
grid-column: 2 / 3;
}
.login-right .button {
text-align: center;
display: block;
margin: 0 auto;
max-width: 10em;
}
.login-left button {
margin-bottom:1em;
}
/****** End Login Page ******/
/***** End Content Section *****/
/***** Start Site Footer Section *****/
footer.site-footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
text-align:left;
}
footer .footer-grid ul li {
list-style-type:none;
}
footer .footer-grid {
padding: 3.125em 0;
display: grid;
grid-template-columns: auto repeat(12,minmax(auto,4.345em)) auto;
grid-gap: 1em;
}
.footer-grid .footer1,
.footer-grid .footer2,
.footer-grid .footer3 {
grid-column: 2 / 14;
}
footer .footer-grid>div:nth-of-type(-n+2) {
margin-bottom: 1.875em;
}
.footer-grid .footerLogo {
display: grid;
justify-content: center;
align-items: center;
align-content: center;
grid-template-columns: minmax(5em,12.5em);
}
.footer-grid .footerLogo img {
width:100%;;
}
.footer-grid .contact-details {
padding-left: 0;
}
.footer-grid .contact-details a {
margin: 0.625em 0;
display: inline-block;
}
.footer-grid .contact-details i {
width: 1.75em;
display: inline-block;
}
.contact-details li {
display: flex;
align-items: center;
}
.contact-details li span {
padding-left: 6px;
}
footer .menu ul.main-nav {
padding-left: 0;
margin: 0;
}
footer .menu ul.sub-menu {
padding-left: 2em;
padding-bottom:0.5em;
margin: 0;
}
nav.nav-bar li .sub-menu a.nav-link.nav-link--air-bottom,
footer .menu .nav-link {
padding-left: 2em;
}
footer .subfooter {
display: grid;
grid-template-columns: 1em minmax(auto,40em) 1em;
grid-gap: 1.25em 0;
}
footer .subfooter .subfooter-nav {
grid-column: span 6;
padding-left: 0;
text-align: center;
margin: 0 auto;
}
.subfooter .copyright,
.subfooter .designedby {
text-align: left;
grid-column: 2/3;
}
footer .subfooter {
padding: 1.25em 0;
}
.subfooter p {
margin: 0;
}
footer .subfooter ul {
display: flex;
flex-flow: row nowrap;
align-items:center;
margin: 0.625em auto 1.25em;
padding: 0;
justify-content: space-between;
max-width: fit-content;
}
footer .subfooter ul li {
list-style-type:none;
flex: 1 1 auto;
padding: 0 0.625em;
}
footer .subfooter .nav-link, footer .subfooter .nav-link:visited {
margin: 0.625em 0;
letter-spacing: 0;
}
/***** End Footer Section *****/
/***** Start Modal Section *****/
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 25em;
position: relative;
margin: 10% auto;
padding: 5px 1.25em 0.8125em 1.25em;
border-radius: 0.625em;
background: #fff;
}
.close {
line-height: 1.5625em;
position: absolute;
right: -0.75em;
text-align: center;
top: -0.625em;
width: 1.5em;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 1.25em;
-moz-border-radius: 1.25em;
border-radius: 1.25em;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
/***** End Modal Section *****/
/***** Start Media Queries *****/
@media (min-width: 20em /*320px*/) {
.mobile-nav-handler {
grid-gap: 0.75em;
}
.mobile-nav-handler a,
.hamburger {
width: 2em;
height: 2.5em;
}
header .nav-link--home a {
flex: 1 0 120px;
}
.main .social {
gap: 1.em;
max-width: 320px;
}
p{
font-size:1em /*16px*/;
margin:0 0 1.25em;
line-height: 1.4;
}
li {
font-size: 1em;
line-height: 1.4;
}
.main-with-aside {
grid-gap: 1em;
}
}
@media (min-width: 24em /*384px*/) {
.mobile-nav-handler {
grid-gap: 1em;
}
.centered .mobile-nav-handler {
grid-gap:0.25em;
}
.mobile-nav-handler a,
.hamburger {
width: 2.5em;
height: 2.5em;
}
header .nav-link--home a {
flex: 1 0 120px;
}
.main .social {
gap: 1.em;
max-width: 320px;
}
p{
font-size:1em /*16px*/;
margin:0 0 1.25em;
line-height: 1.4;
}
li {
font-size: 1em;
line-height: 1.4;
}
.main-with-aside {
grid-gap: 1em;
}
}
@media (min-width: 32em /*512px*/) {
header .header {
grid-template-columns: 1.125em minmax(auto,16.625em) 1.125em;
grid-gap: 0;
}
.content-container .main {
margin-top: 3em;
margin-bottom: 4em;
}
p{
font-size:1.1em /*16px*/;
line-height: 1.5;
}
.content-container li li,
.content-container li {
font-size: 1.1rem;
line-height: 1.45;
}
.centered .mobile-nav-handler {
grid-gap:1em;
}
footer .footer-grid {
padding: 3.125em 0;
grid-template-columns: auto repeat(12,minmax(auto,4.345em)) auto;
grid-gap: 1em;
}
.footer-grid .footer1,
.footer-grid .footer2,
.footer-grid .footer3 {
grid-column: 5 / 11;
}
}
@media (min-width: 40em /*640px*/) {
.content-container .main,
.content-container .main.boxed {
grid-template-columns: 2em minmax(auto, 85em) 2em;
}
.content-container .main.narrow {
grid-template-columns: 2em minmax(auto, 40em) 2em;
}
.content-container .main.narrow-boxed {
grid-template-columns: 2em minmax(auto, 50em) 2em;
}
}
@media (min-width: 60em /*960px*/) {
/* Editor Grid Start
--------------------------------------------- */
.mag-col-4 {
flex: 0 0 31.230622291%;
padding-right: 1.75em;
}
.mag-col-4:last-child {
padding-right: 0;
}
.mag-col-8 {
flex: 0 0 65.616191864%;
}
.mag-col-8:first-child {
padding-right: 1.75em;
}
/* Editor Grid End
--------------------------------------------- */
h1 {font-size: 2.8em;/*32px*/ margin:0 0 1.1em;}
h2 {font-size: 2em;/*28px*/ margin:0 0 1em;}
h3 {font-size: 1.8em;/*24px*/ margin:0 0 0.8em;}
h4 {font-size: 1.65em;/*22px*/ margin:0 0 0.7em;}
h5 {font-size: 1.5em;/*20px*/ margin:0 0 0.5em;}
h6 {font-size: 1.3em;/*18px*/ margin:0 0 0.3em;}
p{
font-size:1.2em /*18px*/;
margin:0 0 1.25em;
line-height: 1.5;
}
.content-container li,
.content-container li li {
font-size: 1.2rem;
line-height: 1.5;
}
header .header {
grid-template-columns: 3em repeat(12,minmax(auto,16.625em)) 3em;
grid-gap: 0;
}
header .header.right-preheader .logo img {
max-width:5em;
}
header .header .logo {
grid-column: 2 / 3;
}
header .header.right-preheader .logo {
grid-row: span 2;
}
header .header--fixed.header.right-preheader .preheader {
/*opacity:0;*/
}
header .header--fixed.header.centered .preheader {
margin: -4.2em 0 0;
}
header .header.centered {
grid-template-columns: auto repeat(12,minmax(auto,4.345em)) auto;
grid-template-rows: 2.75em 4em 0.1em;
grid-gap: 0 1.75em;
transition: all 1s ease;
}
header .header.centered.header--fixed {
grid-template-rows: 1.6em 2em 0em;
}
header .header.centered .logo {
max-width: unset;
grid-column: 6/10;
display: grid;
grid-template-columns: 11.5em;
justify-content: center;
grid-row: 1/3;
transition: all 1s ease;
}
header .header.right-preheader .logo {
grid-column: 2 / 3;
max-width: unset;
}
header .header.right-preheader .own-row~.logo {
grid-column: 2 / 3;
grid-row: 1/3;
}
header .header .logo {
max-width:16.25em;
}
header .header--fixed.header.right-preheader .logo {
max-width: 3.8em;
}
header .header.centered.header--fixed .logo{
grid-template-columns: 6em;
}
header .preheader {
display: grid;
grid-template-columns: 4em repeat(12,minmax(auto,16.625em)) 4em;
grid-gap: 1em;
}
header .header .preheader.own-row {
display: grid;
grid-template-columns: 4em repeat(12,minmax(auto,16.625em)) 4em;
grid-column:1/15;
grid-gap: 0;
}
header .header .preheader {
grid-column: 3 / span 3;
}
header .preheader .left-content {
grid-column: 2 / span 6;
}
header .right-preheader .preheader.own-row .left-content {
grid-column: 2 / span 6;
margin-right: 1em;
}
header .preheader .right-content {
grid-column: 8 / 14;
}
header .right-preheader .preheader .right-content {
grid-column: 1 / 13;
}
header .right-preheader .preheader.own-row .right-content {
grid-column: 8 / 14;
margin-left: 1em;
}
header .preheader ul {
display:flex;
flex-flow: row wrap;
padding:0;
margin: 3px 0 4px;
gap: 2em;
}
header .centered .preheader ul {
margin: 0;
}
header .preheader ul.contact-details {
justify-content:flex-start;
}
header .preheader ul.login {
justify-content:flex-end;
}
header .preheader.own-row .right-content ul.login {
justify-content:flex-start;
}
header .preheader ul.contact-details li {
flex: 0 1 auto;
padding-right: 1.25em;
list-style-type: none;
}
header .preheader ul i {
margin-right: 8px;
}
header .preheader ul.login li {
list-style-type: none;
flex: 0 1 auto;
font-size: 1.2em;
}
header .header .nav-container {
grid-column: 3 / span 3;
}
header .header .nav-container {
grid-column: 4 / span 10;
}
nav.nav-bar.top-nav {
display: flex;
justify-content: flex-end;
align-items: center;
flex-flow: row wrap;
}
nav.nav-bar.top-nav a {
flex: 0 1 auto;
}
.main-nav li:hover,
.main-nav li:focus-within {
cursor: pointer;
}
.main-nav li:focus-within a {
outline: none;
}
nav.nav-bar.top-nav .sub-menu {
margin-left: 0;
padding: 0.625em 0;
position: absolute;
left: 0em;
top: 4em;
width: max-content;
}
header.header--fixed nav.nav-bar.top-nav .sub-menu {
top: 3em;
}
.header .main-nav .sub-menu {
visibility: hidden;
opacity:0;
display: block;
transition: all 0.75s ease;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.main-nav li .sub-menu:hover,
.main-nav li .sub-menu:focus {
visibility: visible;
opacity:1;
}
nav.nav-bar.top-nav .sub-menu::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: -0.75em;
left: 1.4em;
margin: auto;
transition: all 0.75s ease;
}
nav.nav-bar.top-nav .sub-menu .sub-menu {
left: 13.75em;
top: 0.4em;
}
nav.nav-bar.top-nav .main-nav > li > .nav-link::before,
nav.nav-bar.top-nav .main-nav > li > .nav-link::after {
/*content: '';*/
width: 0;
height: 0;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
nav.nav-bar.top-nav .main-nav > li > .nav-link::before {
top: 0.25em;
}
nav.nav-bar.top-nav .main-nav > li > .nav-link::after {
bottom: 0.25em;
}
header nav.nav-bar li .sub-menu li {
padding: 0.375em 1.25em;
}
.header nav.nav-bar li .sub-menu a.nav-link.nav-link--air-bottom {
width: 100%;
padding: 0;
margin: 0;
display: inline-block;
}
.mobile-nav-handler {
display: none
}
.content-container {
grid-template-columns: auto repeat(4,1fr) auto;
}
.content-container .slider {
min-height: 54vh;
}
.main-with-aside {
grid-gap: 2em;
}
.section__hero-content {
padding: 2.5em;
max-width: 47.5em;
margin: 7.5em auto;
}
.section__hero-content .section__description {
font-size: 1.2em;
}
.content-container .banner {
grid-gap: 3.5em 1.75em;
}
.services .services-grid .type-services {
flex: 1;
}
.services .services-grid .type-services {
justify-content: flex-end;
}
.services .services-grid .type-services {
justify-content: flex-start;
}
.content-container .main {
grid-template-columns: 3em minmax(auto,85em) 3em;
grid-gap: 1.125em 0;
}
.content-container .main.boxed {
grid-template-columns: 3em minmax(auto,85em) 3em;
grid-gap: 1.125em 0;
}
.main .news {
}
.main .news-grid{
grid-template-columns: repeat(3,minmax(auto,22.6666667em));
}
.news-grid h4 {
font-size:1.25em;
}
.main .about {
padding: 3.2em 0;
}
.main .inner-content {
}
/*.main .inner-content img {
max-width: 20em;
padding-right:1.25em;
padding-bottom:1.25em;
float:left;
}*/
.mag-grid .img-right {
float:right;
padding: 20px 0 20px 30px;
}
.mag-grid .img-center {
display:grid;
padding: 20px 30px;
margin: 0 auto;
}
.mag-grid .img-left {
float:left;
padding:20px 30px 20px 0;
}
.mag-grid .full-width {
margin: 0 auto;
max-width: 960px;
display: block;
}
.mag-grid .vertical {
display: none;
}
.has-sidebar .main .inner-content {
max-width: 60em/*960px*/;
}
.content-container.has-sidebar .main {
grid-column-start: 2;
grid-column-end: 5;
}
.content-container.has-sidebar .aside {
grid-column-start: 5;
grid-column-end: 6;
padding: 2.5em 1.875em;
}
.product-grid {
grid-template-columns: repeat(3,minmax(16.25em,22.5em));
}
.product-grid__item {
grid-column: unset;
}
.main-with-aside {
grid-gap: 3em;
}
.main-with-aside .inner-content {
grid-column: 1/9;
grid-row: unset;
}
.main-with-aside aside {
grid-column: 9/13;
}
footer .footer-grid {
grid-template-columns: auto repeat(12,minmax(auto,4.345em)) auto;
}
.footer-grid .footer1 {
grid-column: 2 / 6;
}
.footer-grid .footer2 {
grid-column: 6 / 10;
}
.footer-grid .footer3 {
grid-column: 10 / 14;
}
.footer-grid .footer2 {
grid-template-columns: repeat(2, 1fr);
}
footer .subfooter {
display: grid;
grid-template-columns: auto minmax(auto,40em) minmax(auto,31.5em) auto;
grid-gap: 1.75em 1.25em;
}
footer .subfooter .subfooter-nav {
grid-column: 2 / 5;
padding-left: 0;
text-align: left;
margin: 0;
}
.subfooter .copyright.right {
text-align: right;
grid-column: 5 / 6;
}
.subfooter .copyright {
text-align: left;
grid-column: 2 / 3;
}
.subfooter .designedby {
text-align: right;
grid-column: 3 / 4;
}
footer .subfooter ul li {
list-style-type:none;
flex: 1 1 auto;
padding: 0 0.625em 0 0;
}
footer .subfooter .nav-link, footer .subfooter .nav-link:visited {
margin: 0.625em 0.9375em 0 0;
}
}
@media (min-width: 64em /*1024px*/) {
header .header {
grid-template-columns: 4em repeat(12,minmax(auto,16.625em)) 4em;
}
header .header.right-preheader .logo img {
max-width:6em;
}
.content-container .main,
.content-container .main.boxed {
grid-template-columns: 4em minmax(auto,100em) 4em;
}
}
@media (min-width: 75em /*1200px*/) {
/*.nav-link, .nav-link:visited {
margin: 0.625em 0.9375em;
}*/
header .header {
grid-template-columns: 6em repeat(12,minmax(auto,16.625em)) 6em;
}
header .header.right-preheader .logo img {
max-width:6.4em;
}
.content-container {
grid-template-columns: auto repeat(4,1fr) auto;
}
.content-container .slider {
min-height: 60vh;
}
.slider .slide figure,
.slider .slide .slide-text {
grid-template-columns: auto minmax(10em,38em) auto;
grid-template-rows: repeat(3, auto);
grid-gap: 3em 1em;
}
nav.nav-bar.top-nav .sub-menu .sub-menu {
left: 13.75em;
top: 0.4em;
}
.content-container .main {
grid-template-columns: 6em 1fr 6em;
/*grid-gap: 1.125em;*/
}
.content-container .main.boxed {
grid-template-columns: 6em minmax(auto,71.5em) 6em;
/*grid-gap: 1.125em;*/
}
}
/***** End Media Queries *****/