body {
margin: 0px;
padding: 0px;
font-size: 16px;
color: #4d4d4d;
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
html {
scroll-behavior: smooth;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
width: 100%;
}
.scrollup {
position: fixed;
right: 10px;
bottom: 20px;
width: 40px;
height: 40px;
color: #fff;
background: #362f32;
text-align: center;
line-height: 40px;
font-weight: 900;
font-size: 20px;
z-index: 99999;
display: none;
border-radius: 7px;
}
.scrollup:hover {
color: #fff;
background: #4d4d4d;
}
.web-btn-1 {
display: inline-block;
text-decoration: none;
color: #FFF !important;
background: #2196f3;
padding: 12px 40px;
font-size: 13px;
font-weight: 600;
transition: 400ms;
border-radius: 30px;
transition: 400ms;
border: none !important;
}
.web-btn-1:hover {
text-decoration: none;
color: #FFF;
background: #03a9f4;
}
.web-btn-2 {
display: inline-block;
text-decoration: none;
color: #FFF !important;
background: #2196f3;
padding: 20px 45px;
font-size: 18px;
font-weight: 600;
transition: 400ms;
border-radius: 30px;
transition: 400ms;
}
.web-btn-2:hover {
text-decoration: none;
color: #FFF;
background: #03a9f4;
}
.normal-link {
color: #36425c;
font-size: 14px;
font-weight: 600;
}
.normal-link:hover {
color: #03a9f4;
}
.bg-color {
background: #003a69;
}
.bg-color-2 {
background: #0066b8;
}
.overflow {
overflow: hidden;
}
.light-bg {
background: #e1eaed;
}
.wrapper {
position: relative;
}
.padding-1 {
padding: 100px 0px;
}
.padding-2 {
padding: 50px 0px 50px;
}
@media screen and (max-width: 992px) {
.padding-1 {
padding: 50px 0px;
}
} .header-wrapper {
display: block;
z-index: 999999;
width: 100%;
top: 0px;
left: 0px;
box-shadow: 0px 3px 3px rgb(0 0 0 / 10%);
}
.navbar {
padding: 0px;
}
.navbar-nav {
padding: 0px !important;
margin: 0px auto !important;
width: auto;
}
.navbar-brand {
padding: 10px 20px;
font-weight: 700;
}
.navbar-brand img {
height: 40px !important;
}
.navbar-light .navbar-nav .nav-link {
font-weight: 600;
letter-spacing: -0.5px;
} .dropdown-menu {
padding: 0px;
border-radius: 0px !important;
background: #4d4d4d;
}
.dropdown-item {
padding: 10px 15px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.5px;
color: #FFF;
}
.dropdown-item:hover {
background: #2196f3;
color: #FFF;
}
.phonebox {
display: flex;
flex-direction: row;
align-items: center;
background: #2196f3;
padding: 10px 25px;
}
.phonebox p {
margin-bottom: 0;
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
text-align: left;
padding: 0px;
color: #FFF;
}
.phonebox-a {
display: block;
font-size: 25px !important;
padding: 0px;
font-weight: 700 !important;
margin: 0px;
color: #FFF;
text-decoration: none;
transition: 400ms;
letter-spacing: 0.5px;
}
.phonebox i {
color: #FFF !important;
font-size: 34px !important;
margin: 0px 10px 0px 0px;
}
.phonebox-a:hover {
color: #FFF;
text-decoration: none;
}
@media screen and (max-width: 992px) {
.navbar-nav {
padding: 30px !important;
margin: 0px auto !important;
width: auto;
}
.phonebox {
width: 100%;
}
} .slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.slide-container {
position: relative;
width: 100%;
}
#banner-slider .owl-nav {
display: block !important;
}
#banner-slider .owl-prev {
left: 50px;
position: absolute;
top: 23vh;
font-size: 30px;
color: #FFF;
border-radius: 50px;
background: transparent !important;
}
#banner-slider .owl-prev span {
font-size: 18px;
}
#banner-slider .owl-next {
right: 50px;
position: absolute;
top: 23vh;
font-size: 30px;
color: #FFF;
border-radius: 50px;
background: transparent !important;
}
#banner-slider .owl-next span {
font-size: 18px;
}
.slider-content {
background: rgb(33 41 57 / 70%);
padding: 50px 40px;
width: 100%;
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slider-content svg {
font-size: 34px;
display: block;
color: #FFF;
margin: 0px 0px 10px 0px;
}
.slider-content h5 {
width: 100%;
display: inline-block;
font-weight: 500;
font-size: 48px;
line-height: 50px;
padding: 0px;
color: #FFF;
margin: 0px 0px 15px 0px;
}
@media screen and (max-width: 992px) {
#banner-slider .owl-prev {
left: 0px;
}
#banner-slider .owl-next {
right: 0px;
}
.slider-content h5 {
width: 100%;
display: inline-block;
font-weight: 500;
font-size: 30px;
line-height: 40px;
padding: 0px;
color: #FFF;
margin: 0px 0px 15px 0px;
}
}
.pattern-bg {
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
.bg-lighten {
background: #eff6fb;
}
.web-title {
position: relative;
width: 100%;
margin: 0px 0px 20px;
}
.web-title h3 {
position: relative;
width: 100%;
padding: 0px;
margin: 0px;
font-size: 34px;
font-weight: 700;
color: #4d4d4d;
letter-spacing: -1px;
}
.web-title h3 span {
color: #2196f3;
}
.web-title h4 {
position: relative;
width: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
background-size: 40px;
font-size: 24px;
font-weight: 500;
color: #4d4d4d;
letter-spacing: -1px;
}
.web-title p {
position: relative;
width: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
background-size: 40px;
font-size: 18px;
font-weight: 500;
color: #4d4d4d;
letter-spacing: -1px;
}
::placeholder { color: #4d4d4d;
opacity: 1; }
:-ms-input-placeholder { color: #4d4d4d;
}
::-ms-input-placeholder { color: #4d4d4d;
}
.quote-link .nav-link {
color: #211f1f;
font-weight: 600;
border: none !important;
margin: 0px 0px 10px;
padding: 10px 25px;
font-size: 14px;
}
.quote-link .nav-link.active {
display: inline-block;
text-decoration: none;
color: #FFF !important;
background: #4d4d4d;
font-weight: 600;
transition: 400ms;
border-radius: 10px;
transition: 400ms;
border: none !important;
}
.quote-link .nav-link:hover {
border: none;
}
.split {
display: block;
height: 30px;
border-bottom: 1px solid #d1e2f0;
}
@media screen and (max-width: 992px) {
.web-title h3 {
font-size: 16px;
}
}
.web-content-1 {
position: relative;
width: 100%;
}
.web-content-1 h1 {
display: block;
width: 100%;
padding: 0px;
margin: 0px;
font-size: 34px;
font-weight: 400;
line-height: 48px;
}
.web-content-1 h1 span {
display: block;
width: 100%;
padding: 0px;
margin: 0px;
font-size: 34px;
font-weight: 700;
}
.web-content-1 h2 {
display: block;
width: 100%;
padding: 0px;
margin: 0px 0px 20px;
font-size: 34px;
font-weight: 700;
letter-spacing: -0.5px;
}
.web-content-1 h3 {
display: block;
width: 100%;
padding: 0px;
margin: 0px 0px 20px;
font-size: 23px;
font-weight: 700;
letter-spacing: -0.5px;
}
.web-content-1 h4 {
display: block;
width: 100%;
padding: 0px;
font-weight: 600;
font-size: 18px;
line-height: 30px;
margin: 0px;
}
.web-content-1 h5 {
display: block;
width: 100%;
padding: 0px;
font-weight: 400;
font-size: 22px;
line-height: 36px;
margin: 0px;
}
.web-content-1 h6 {
display: block;
width: 100%;
padding: 0px;
font-weight: 700;
font-size: 17px;
line-height: 30px;
margin: 0px 0px 5px;
letter-spacing: -0.5px;
}
.web-content-1 p {
display: block;
width: 100%;
padding: 0px;
font-weight: 400;
font-size: 17px;
line-height: 30px;
margin: 0px 0px 20px;
}
.web-content-1 textarea {
position: relative;
width: 100%;
}
@media screen and (max-width: 992px) {
.web-content-1 {
position: relative;
width: 100%;
margin: 0px 0px 30px;
}
}
.testimonial {
position: relative;
width: 100%;
padding: 70px 30px 30px;
border-radius: 15px;
background: #f7f8fc;
}
.testimonial h5 {
display: block;
width: 100%;
padding: 0px;
margin: 0px 0px 10px;
font-size: 18px;
font-weight: 700;
}
.testimonial p {
display: block;
width: 100%;
padding: 0px;
margin: 0px 0px 10px;
font-size: 14px;
font-weight: 400;
}
.stars-rating {
position: absolute;
width: auto;
padding: 10px 20px;
top: 0px;
background: #03a9f4;
margin: 0px 0px 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.stars-rating ul {
display: inline-block;
width: auto;
margin: 0px;
padding: 0px;
}
.stars-rating ul li {
display: inline-block;
margin: 0px 3px 0px 0px;
padding: 0px;
list-style: none;
color: #FFF;
font-size: 12px;
}
.stars-rating ul li a {
display: inline-block;
width: auto;
list-style: none;
color: #FFF;
font-size: 12px;
text-decoration: none;
font-weight: 600;
}
.author {
display: block;
width: 100%;
}
.author h5 {
display: block;
width: 100%;
padding: 0px;
margin: 0px 0px 5px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.5px;
}
.author h6 {
display: block;
width: 100%;
padding: 0px;
margin: 0px;
font-size: 12px;
}
.bg-overlay {
color: #FFF;
padding: 250px 30px 30px 30px;
background: rgba(0, 0, 0, 0.5);
}
.flex-content {
display: flex;
flex-direction: row;
}
.flex-content i {
font-size: 40px;
color: #03a9f4;
margin: 0px 30px 0px 0px;
}
.flex-content h4 {
display: block;
font-size: 26px;
font-weight: 700;
letter-spacing: -1px;
padding: 0px;
margin: 0px 0px 15px;
}
.flex-content h5 {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: -1px;
padding: 0px;
margin: 0px 0px 5px;
}
.flex-content p {
display: block;
font-size: 15px;
line-height: 26px;
padding: 0px;
margin: 0px 0px 5px;
}
.flex-content a {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #211f1f;
text-decoration: none;
transition: 400ms;
}
.flex-content a svg {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #211f1f;
text-decoration: none;
}
.flex-content a:hover svg {
color: #03a9f4;
margin: 0px 0px 0px 5px;
}
.card-box-2 {
position: relative;
}
.card-box-2 ul {
display: inline-block;
width: 100%;
padding: 0px;
margin: 0px 0px 20px;
text-align: center;
}
.card-box-2 ul li {
position: relative;
display: inline-block;
width: auto;
padding: 0px;
margin: 10px;
list-style: none;
}
.card-box-2 ul li a {
display: block;
min-width: 180px;
background: #FFF;
padding: 40px 30px 20px 30px;
color: #211f1f;
font-weight: 600;
border-radius: 15px;
text-decoration: none;
transition: 400ms;
border: 1px dotted rgb(201, 201, 201);
}
.card-box-2 ul li a:hover {
color: rgba(212, 8, 46, 1);
background: rgb(255 240 235);
border: 1px solid rgb(252 108 51);
}
.form-check-card {
display: block;
background: #e8eef3;
color: #211f1f;
font-weight: 500;
font-size: 11px;
padding: 10px;
text-decoration: none;
transition: 400ms;
border: 1px solid #d1e2f0;
margin-bottom: 15px;
}
.form-check-card img {
margin: 0px 0px 5px;
}
.form-check-card:hover {
color: #2196f3;
background: #FFF;
border: 1px solid #d1e2f0;
}
.form-check-card.active {
background: #FFF;
border: 1px solid #d1e2f0;
}
.form-check {
min-height: auto;
font-size: 12px;
display: inline-block !important;
}
.formcards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.formcards h5 {
font-size: 14px;
padding: 0px;
margin: 10px 0px;
}
.cards {
display: block;
padding: 5px 10px;
font-weight: 500;
font-size: 12px;
margin: 0px 5px 10px 5px;
background: #e8eef3;
border: 2px solid #d1e2f0;
}
.cards:hover {
background: #FFF;
border: 2px solid #d1e2f0;
}
.cards.active {
background: #FFF;
border: 2px solid #d1e2f0;
}
.cards-2 {
display: block;
margin: 0px 5px 20px 5px;
}
.cards-2 span,
.cards-2 input {
font-weight: 500;
font-size: 12px;
}
@media screen and (max-width: 992px) {
.cards {
width: 45%;
}
.cards-2 {
width: 45%;
}
} .footer-wrapper {
display: block;
width: 100%;
padding: 70px 0px 50px 0px;
background: #FFF;
}
.footer {
display: block;
width: 100%;
}
.footer.foologo img {
width: 90%;
margin-bottom: 15px;
}
.footer-logo {
display: inline-block;
width: 160px;
margin: 0px 0px 15px;
}
.footer ul {
margin: 0px;
padding: 0px;
display: block;
width: 100%;
}
.footer ul li {
margin: 0px 0px 20px;
padding: 0px;
display: flex;
justify-content: start;
align-items: center;
width: 100%;
font-size: 16px;
color: #3e484c;
}
.footer ul li a {
display: inline-block;
font-size: 16px;
color: #3e484c;
text-decoration: none;
}
.footer ul li i {
margin: 0px 10px 0px 0px;
}
.footer h5 {
display: inline-block;
margin: 0px 0px 15px;
padding: 0px;
font-size: 18px;
font-weight: 700;
}
.footer p {
margin: 0px 0px 15px;
padding: 0px;
font-size: 16px;
color: #3e484c;
}
.footer a {
color: #3e484c;
font-weight: 700;
}
@media screen and (max-width: 992px) {
.footer {
display: block;
width: 100%;
text-align: center;
margin: 0px 0px 30px;
}
.right-menu-no-mob{
display: none;
}
nav.navbar{
padding-bottom: 0px;
}
.right-menu-no-mob{
padding-left:0px;
}
.right-menu-no-mob .menu-contact{
width:100%;
}
} .inner-slider {
display: block;
width: 100%;
padding: 30px 0px;
background: url(//www.metasteelbuildings.ca/wp-content/themes/images/slider-8.jpg) no-repeat center center;
background-size: cover;
}
.cards:hover {
background: #FFF0;
border: 0px solid #d1e2f0;
}
.cards {
background: #eff6fb;
}
#floatingTextarea2 {
height: 100px;
width: 80%;
margin: 0 auto;
}
.designed-form span.wpcf7-list-item{
margin: 0px !important;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
.designed-form input[type=checkbox]{
margin-top:3px;
}
.selection-card em{
font-size: 12px;
font-weight: 400;
color: #4d4d4d;
}
fieldset h4.title1{
color: #4d4d4d;
font-size: 12px;
}
.wpcf7-radio.formcards .cards .wpcf7-list-item-label{
float: none;
}
.wpcf7-radio.formcards .cards input[type="radio"]{
float: left;
margin-top:2px;
}
.wpcf7-radio.formcards .cards:hover {
background: #FFF0;
border: 2px solid #d1e2f0;
}
@media screen and (max-width: 768px) {
.custom-last-step .form-check-label{
width: 100%;
}
.custom-last-step input.wpcf7-form-control.wpcf7-submit{
width: 100px;
}
}
.colorbox-1 {
background: #003a69;
color: #FFF;
padding: 20px;
}
.white-box {
background: #FFF;
padding: 20px;
border-radius: 20px;
border: 1px solid #d1e2f0;
}
.web-content-1 ul li svg {
margin: 0px 10px 0px 0px;
}
.web-content-1 ul li {
display: inline-block;
width: 100%;
margin: 0px 0px 10px;
padding: 0px;
list-style: none;
}
.web-content-1 ul {
display: block;
margin: 20px 0px 0px 0px;
padding: 0px;
}
#wpforms-submit-409 {
display: inline-block;
text-decoration: none;
color: #FFF !important;
background: #2196f3;
padding: 12px 40px;
font-size: 13px;
font-weight: 600;
transition: 400ms;
border-radius: 30px;
transition: 400ms;
border: none !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field-label {
font-weight: 400 !important;
color: #4d4d4d !important;
}
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #4d4d4d !important;
}
@media screen and (max-width: 768px) {
.cards-2 {
width: 100%;
}
.footer p{
text-align: left;
}
.fieldset-cf7mls-wrapper .wpcf7-not-valid-tip{
text-align: center;
}
} .wpforms-field-container input {
border-radius: 0.25rem !important;
}
div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
height: 75px !important;
border-radius: 0.25rem;
}
.form-check-card .wpcf7-not-valid-tip{
margin-top: -7px;
}
.form-check-card span.wpcf7-not-valid-tip:first-child{
display:block;
}
.cards-2 .wpcf7-not-valid-tip{
position: absolute;
bottom: -20px;
}
.wpcf7-form .fieldset-cf7mls .cf7mls-btns {
min-height: 80px;
width: 65%;
margin: 0 auto;
}
@media screen and (max-width: 992px) {
.wpcf7-form .fieldset-cf7mls .cf7mls-btns {
min-height: 80px;
width: 90%;
margin: 0 auto;
}
}
@media screen and (max-width: 1300px) {
div .phonebox-a {
display: block;
font-size: 20px !important;
}
select#cityList {
max-width: 100px;
}
div.phonebox {
padding: 10px 9px;
}
}   .owl-carousel.owl-loaded {
display: block;
}   .navbar-collapse ul li a span {
font-size: 14px;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 3px !important;
padding-left: 3px !important;
}
}.menu-item.menu-item-has-children.hvr-nav.custom-city-dropdown {
margin-top: 8px;
font-size: 14px;
font-weight: 501;
margin-left: 7px;
}
.custom-city-dropdown form select {
background-color: #fff;
border: 2px solid #ccc;
border-radius: 8px;
padding: 1px 5px;
font-weight: 501;
padding-right: 24px !important;
font-size: 14px;
}
.help-title {
font-size: 34px;
font-weight: 501;
}
.web-quote {
position: relative;
width: 100%;
padding: 0px;
margin: 0px;
font-size: 33px !important;
font-weight: 700 !important;
color: #4d4d4d;
letter-spacing: -1px;
}
.web-quote span {
color: #2196f3;
}
#Address-error {
display: none !important;
}
#city-error {
display: none !important;
}
#province-error {
display: none !important;
}
#postal-code-error {
display: none !important;
}
#Address-error {
display: none !important;
}
#full-name-error {
display: none !important;
}
#email-error {
display: none !important;
}
#PHONE-error {
display: none !important;
}
.seotag {
width: 100%;
display: inline-block;
font-weight: 500;
font-size: 47px;
line-height: 50px;
padding: 0px;
color: #FFF;
margin: 0px 0px 0px 0px;
}
.seotag h2{
width: 100%;
display: inline-block;
font-weight: 500;
font-size: 47px;
line-height: 50px;
padding: 0px;
color: #FFF;
margin: 0px 0px 0px 0px;
}
.tagh:empty {
display: none;
}
.web-title h1 {
font-size: 15px;
color: #4d4d4d;
}
.blog-box ul li a {
color: #212529;
text-decoration: none;
}
.blog-box ul li a:hover {
color: #0d6efd;
text-decoration: underline;
}
.blog-box-single h4 {
margin-bottom: 25px;
font-size: 30px;
}
.blog {
text-align: center;
}
.blogwrapper {
background-color: #f3f6ff;
} .seotag {
width: 100%;
display: inline-block;
font-weight: 500;
font-size: 30px;
line-height: 50px;
padding: 0px;
color: #FFF;
margin: 0px 0px 0px 0px;
}
.seotag h2{
width: 100%;
display: contents;
font-weight: 500;
font-size: 30px;
line-height: 50px;
padding: 0px;
color: #FFF;
margin: 0px 0px 0px 0px;
}
.tagh:empty {
display: none;
}
.web-title h1 {
font-size: 17px;
color: #4d4d4d;
display: contents;
}
.blog-box ul li a {
color: #212529;
text-decoration: none;
}
.blog-box ul li a:hover {
color: #0d6efd;
text-decoration: underline;
}
.blog-box-single h4 {
margin-bottom: 25px;
font-size: 30px;
}
.blog {
text-align: center;
}
.blogwrapper {
background-color: #f3f6ff;
}
.tagd {
display: block;
width: 100%;
padding: 0px;
margin: 0px 0px 20px;
font-size: 34px;
font-weight: 700;
letter-spacing: -0.5px;
}
.seotagh {
font-size: 15px;
color: #4d4d4d;
font-weight: 500;
}
.web-content-1 h3 {
display: block;
width: 100%;
padding: 0px;
font-weight: 700;
font-size: 17px;
line-height: 30px;
margin: 0px 0px 10px;
letter-spacing: -0.5px;
}
.web3 h3 {
display: block;
width: 100%;
padding: 0px;
font-weight: 700;
font-size: 17px;
line-height: 30px;
margin: 0px 0px 10px;
letter-spacing: -0.5px;
}
.web3 p {
display: block;
width: 100%;
padding: 0px;
font-weight: 400;
font-size: 18px;
line-height: 30px;
margin: 0px 0px 20px;
}
.secimge {
display: flex;
align-items: center;
}
.woocommerce-page .widget{
border: 1px solid #ECECEC;
margin-bottom: 20px;
padding: 40px 20px;
border-radius: 15px;
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.05);
}
.woocommerce-page ul.products  li.product{
border: 1px solid rgba(236, 236, 236, 1);
background: rgba(232, 238, 243, 1);
padding: 15px;
border-radius: 15px;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{
background-color: rgba(33, 150, 243, 1);
}
.widget-title {
position: relative;
text-transform: uppercase;
font-size: 1.2em;
width: fit-content;
}
.widget-title::after {
content: "";
width: 40%;
height: .1em;
background: #2196f3;
position: absolute;
bottom: -2px;
left: 0;
}
.woocommerce .widget-title {
border-bottom: 3px solid #ccc;
width: 100%;
line-height: 32px;
}
.woocommerce-result-count span{
color: #2196f3;
font-weight: 700;
font-size: 18px;
}
.woocommerce-ordering select{
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
color: #7c7c7c;
}
.widget.woocommerce .widget-title{
margin-bottom: 20px;
padding-bottom: 10px;
}
.woocommerce ul.products li.product .button{
background-color: rgba(33, 150, 243, 1);
color: #fff;
border-radius: 28px;
padding: 10px 22px;
font-weight: 500;
float: right;
}
.type-product a.button::before {
content:url(https://www.metasteelbuildings.ca/wp-content/uploads/2024/12/cart.png);
margin-right: 3px;
}
.woocommerce ul.products li.product .price del{
display: block;
}
.woocommerce ul.products li.product .price{
width: 50%;
float: left;
}
.woocommerce ul.products li.product .button{
margin-top: 0px;
}
.widget.woocommerce .widget-title{
font-size: 1.5em;
text-transform: capitalize;
font-weight: 600;
}
.woocommerce .widget_price_filter .price_slider_amount .button{
background-color: rgba(33, 150, 243, 1);
color: #fff;
border-radius: 28px;
padding: 10px 22px;
font-weight: 500;
}
.woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li{
border: 1px solid rgba(242, 243, 244, 1);
padding: 5px 10px;
margin-bottom: 10px;
}
.woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img{
margin-right: 5px;
margin-left: 0px;
float: left;
}
.woocommerce .widget_shopping_cart .buttons a, .woocommerce.widget_shopping_cart .buttons a,
.woocommerce .widget_shopping_cart .buttons a, .woocommerce.widget_shopping_cart .buttons a{
border-radius: 28px;
padding: 12px 12px;
font-weight: 500;
}
.woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total{
border-top: 0px;
}
.woocommerce .widget_shopping_cart .cart_list li a.remove, .woocommerce.widget_shopping_cart .cart_list li a.remove{
top: 25%;
}
.woocommerce-mini-cart__buttons.buttons .wc-forward{
background-color: transparent;
border:1px solid #0d6efd;
color: #0d6efd;
}
.woocommerce-mini-cart__buttons.buttons .checkout{
background-color: rgba(33, 150, 243, 1) !important;
color: #fff;
}
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt,
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button{ color: #fff;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{
background-color: rgba(33, 150, 243, 1) !important; 
}
.woocommerce #customer_details .col-1,
.woocommerce #customer_details .col-2{
max-width: 48%;;
}
.woocommerce form .form-row label {
line-height: 2;
width: 100%;
}
.woocommerce form .form-row  .woocommerce-input-wrapper{
width: 100%;
}
.single_add_to_cart_button::before {
content: url(https://www.metasteelbuildings.ca/wp-content/uploads/2024/12/cart.png);
margin-right: 3px;
}
.woocommerce-single-product-quote form.cf7mls input.wpcf7-form-control.wpcf7-submit{
margin: 35px 0px -15px;
}
.woocommerce-single-product-quote .wpcf7-form .fieldset-cf7mls .cf7mls-btns{
width: 100%;
}
.woocommerce-single-product-quote .web-title h3{
margin-bottom: 25px;
}
#coupon_code,
body .select2-container--default .select2-selection--single,
.woocommerce .quantity .qty{
border: 1px solid #ced4da;
height: 38px;
line-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
height: 38px;
}
.woocommerce button.button{
background-color: rgba(33, 150, 243, 1);
padding: 11px 30px;
border-radius: 25px;
}
.actions .coupon{
width: 50%;
}
.actions #coupon_code{
width: auto;
}
.woocommerce div.product p.price{
color:rgba(33, 150, 243, 1);
text-decoration: none;
font-size: 2.0em;
font-weight: 600;
}
.woocommerce span.onsale{
background-color: rgba(33, 150, 243, 1);
display: none;
}
.woocommerce div.product p.price del .woocommerce-Price-amount{
color: rgb(212 217 221);
font-size: 0.5em;
}
.woocommerce ul.products li.product .price{
margin-top: 10px;
color: rgba(33, 150, 243, 1);
}
.woocommerce ul.cart_list li a, .woocommerce ul.product_list_widget li a {
display: block;
font-weight: 500;
}
.woocommerce td.product-quantity{
min-width: 200px;
}
.first_deposit_label{
margin-bottom: 0px;
font-size: 18px;
font-weight: 500;
}
.rtrn-text-single-product{
font-weight: 600;
}
@media only screen and (min-width: 1400px) {
.slider-content{
min-height: 50vh !important;
}
}
@media only screen and (min-width: 1800px) {
.slider-content{
min-height: 25vh !important;
}
}
.textarea-contact-banner textarea.form-control{
width: 100%;
height: 50px;
}
@media only screen and (min-width: 992px) {
.slider-rative-ts{
position: relative;
}
.slider-form-data{
height: 578px !important;
}
body .slider-content {
min-height: 578px !important;
}
}
@media only screen and (min-width: 992px) {
div.slider-form-data {
height: calc(100% - 40px) !important;
margin: 20px;
padding: 0px;
width:40%
}
}