html { scroll-behavior: smooth; scroll-padding-top: 8.5rem; }
body { font-family: 'Raleway', sans-serif; background-color: #ffffff; overflow-x: hidden !important;min-height: 100vh; display:flex; flex-direction: column; }
main{
background-image:url("img/logo-big.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 90vh;
}
a { color: #026cc4; text-decoration: none; font-size: 16px; }
p { font-size: 1.2em; line-height: 1.1em; margin-bottom:10px}
b {font-weight: 700;}
p a:hover {color:#40b8af}
i { font-style:italic }
.text-center { text-align:center; }
h1 { color: #026cc4;
font-size: 28px;
font-weight: 600; }
h2 { color: #026cc4;margin:2em 0 1em;font-size:1.6em;font-weight: 800; }
h3 { color: #40b8af;margin:1em 0;font-weight:800;}
ul.service-list {margin-left:20px;padding-left:20px;}
ul.service-list li { padding:4px;list-style-type: disc;}
.container {
max-width: 1028px;
margin:0 auto;
padding:8px;
}
.container-fluid {
margin:0 auto;
padding:20px;
}
main {padding-top:200px;}
.overlay {background-color:rgba(255,255,255,0.8);padding:16px;border-radius:5px}
.col-6 {
width:50%;
float:left;
}
.logo-green{color:#40b8af}
.logo-blue{/**color:#026cc4;**/color:#0089fb;}
.tagline{font-size:1.4em;font-weight:800;letter-spacing:1px;font-style: italic;padding-left:20px;display:block;margin:0 auto;text-align:center;}
.theme-btn{background-color:#026cc4;color:#fff;padding:8px 16px;border-radius:5px;}
.theme-btn:hover{background-color:#40b8af;}
input, select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
font-size: 30px;
text-align: center;
}
.col-6 {
font-size:0.8em;
padding: 10px;
flex: 50%;
}
.cta-container{background-color: #000000a2;color:#fff;padding:32px 10%;font-size:1em;border-radius:5px;}
.hero-wrapper-text h1 {text-transform: uppercase;}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
.row {
flex-direction: column;
}
.col-6{width:98%}
}
@media only screen and (max-width: 900px) {
body {
overflow-x: hidden !important;
}
}
@keyframes fade-in {
from {opacity: 0; transform: translateY(25px);}
to {opacity: 1;}
}
.fade-in-element { animation: fade-in 2s; }
.cardBox {
float: left;
font-size: 1.2em;
margin: 1% 0 0 1%;
perspective: 800px;
transition: all 0.3s ease 0s;
width: 23.7%;
}
.cardBox:hover .card {
transform: rotateY( 180deg);
}
.card {
background: #222;
cursor: default;
height: 300px;
border-radius: 5px;
transform-style: preserve-3d;
transition: transform 0.4s ease 0s;
width: 100%;
-webkit-animation: giro 1s 1;
animation: giro 1s 1;
}
.card p {
margin-bottom: 1.8em;
font-size: 0.9em;
}
.card .front,
.card .back {
backface-visibility: hidden;
box-sizing: border-box;
color: white;
display: block;
border-radius: 5px;
font-size: 1em;
height: 100%;
padding: 0.8em;
position: absolute;
text-align: center;
width: 100%;
}
.card .front strong {
background: #fff;
border-radius: 100%;
color: #222;
font-size: 1.5em;
line-height: 30px;
padding: 0 7px 4px 6px;
}
.card .back {
transform: rotateY( 180deg);
}
.card .back a {
padding: 0.6em 1em;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 0.9em;
transition: all 0.2s ease 0s;
}
.card .back a:hover {
background: #40b8af;
color: #333;
text-shadow: 0 0 1px #333;
}
.cardBox:nth-child(1) .card .front {
background: #026cc4;
}
.cardBox:nth-child(4) .card .front {
background: #026cc4;
}
.cardBox:nth-child(1) .card .back {
background: #026cc4;
}
.cardBox:nth-child(2) .card .back {
background: #026cc4;
}
.cardBox:nth-child(3) .card .back {
background: #026cc4;
}
.cardBox:nth-child(4) .card .back {
background: #026cc4;
}
.cardBox:nth-child(2) .card {
-webkit-animation: giro 1.5s 1;
animation: giro 1.5s 1;
}
.cardBox:nth-child(3) .card {
-webkit-animation: giro 2s 1;
animation: giro 2s 1;
}
.cardBox:nth-child(4) .card {
-webkit-animation: giro 2.5s 1;
animation: giro 2.5s 1;
}
@-webkit-keyframes giro {
from {
transform: rotateY( 180deg);
}
to {
transform: rotateY( 0deg);
}
}
@keyframes giro {
from {
transform: rotateY( 180deg);
}
to {
transform: rotateY( 0deg);
}
}
@media screen and (max-width: 767px) {
.cardBox {
font-size: 1em;
margin-left: 2.8%;
margin-top: 3%;
width: 46%;
}
.card {
height: 285px;
}
.cardBox:last-child {
margin-bottom: 3%;
}
}
@media screen and (max-width: 480px) {
.cardBox {
width: 94.5%;
}
.card {
height: 260px;
}
}
.back a { background-color: white; color: #1E6A96; font-weight: 700; font-size: 19px; border-radius: 3px; padding: 12px 40px; }
.back a:hover { background-color: #40b8af; color:#fff}
@media only screen and (max-width: 1440px) {
.flip {
width: 400px;
}
}
@media only screen and (max-width: 768px) {
.flip {
display: block;
width: 80%;
margin: 0;
}
}
@media only screen and (max-width: 425px) {
.flip {
display: block;
width: 90%;
margin: 0;
}
.flip {
>.front {
height: 260px;
}
>.back {
height: 260px;
}
}
}
/* ----------------------------------------------
Hero Section
---------------------------------------------- */
header { min-height: 80px; display: flex; flex-direction: column; align-items: flex-start; background-size: cover; background-position: center; position: relative; margin-bottom: 0; }
nav { padding: 15px 5px; position: fixed; background-color: #fff; z-index: 12; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgb(116, 116, 116); }
.logo-wrapper h2 { font-size: 30px; color: #fcfcfc; padding-left: 25px; }
.logo { height: 80px; padding:0 20px; width: auto; z-index: 1; margin-bottom: 0px; }
.nav-item { margin: 0 15px; font-size: 17px; font-weight: 600; color: #000; }
.nav-item:hover { color: #40b8af; }
.nav-btn { background-color: #026cc4; padding: 10px 25px; border-radius: 5px; transition: all, .3s; color: white; }
.slogan-bar { background-color:#1c1c1c; width:100%;height:50px;display:block;margin-top:114px; padding:16px;position:fixed; z-index:999;}
.hero-wrapper a:hover { background-color: #40b8af; }
.phone { font-family: Arial, Helvetica, sans-serif; margin-right: 30px; font-size: 20px; font-weight:800; color: #40b8af; }
.email { font-family: Arial, Helvetica, sans-serif; margin-right: 30px; font-size: 20px; font-weight:800; }
.hero-wrapper { margin: 0 auto; margin-top: 0px; width: 45%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #000000a2; border-radius: 5px; padding: 20px 0px; position: absolute; bottom: 35%; left: 0%; right: 0%; z-index: 10; min-height: 0px; }
.hero-wrapper-text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:center; }
.hero-wrapper h1 { font-size: 50px; margin: 10px 0; color: white; text-align: center; font-weight: 600; }
.hero-wrapper p { font-size: 16px; width: 95%; line-height: 25px; margin: 10px 0; color: white; text-align: center; }
.hero-btn { text-align: center; background-color: #026cc4; color: #fafafa; font-size: 18px; padding: 13px 45px; letter-spacing: .5px; font-weight: 600; margin-top: 20px; }
.hero-btn:hover { background-color: rgb(170, 170, 170); }
@media only screen and (max-width: 768px ) {
.slogan-bar {display:none;}
.hero-btn {max-width:100%!important;margin:16px auto 0;}
}
@media only screen and (max-width: 850px) {
header { /*min-height: 200px;*/ display: flex; flex-direction: column; align-items: center; padding-bottom: 0px; }
nav { display: none; }
.logo { margin-bottom: 30px; }
.nav-items { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.nav-item { margin: 10px 0; font-size: 22px; }
.phone-number { margin-top: 30px; }
.phone { margin-right: 0; margin-top: 30px; font-size: 18px; }
.hero-wrapper { margin-top: 0px; width: 100%; padding-left: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0px; bottom: 0%; min-height: 100px; }
.hero-wrapper h1 { font-size: 30px; margin: 10px 0; margin-top: 0; color: white; text-align: center; }
.hero-wrapper p { font-size: 16px; line-height: 22px; }
.hero-btn { width: 100%; font-size: 15px; margin-top: 5px; }
}
.hero-btn {display:block;max-width:50%;margin:16px auto;}
/* Slideshow container */
.responsive { max-width: 175%; height: auto; }
.slideshow-container { width: 100%; min-height: 500px; position: relative; margin: 0; } .mySlides { display: none; } .mySlides img { width: 100%; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 0 25px; color: rgb(255, 255, 255), 255); font-weight: bold; font-size: 25px; transition: 0.6s ease; border-radius: 0 3px 3px 0; z-index: 100; }
.next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { z-index: 100; }
.numbertext { color: #f2f2f2; font-size: 18px; padding: 8px 12px; position: absolute; top: 10%; }
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }
@media only screen and (max-width: 850px) { .slideshow-container { min-height: 350px; overflow-x: hidden !important; } .mySlides img { width: auto; height: 350px; } .text { padding: 8px 0px; position: absolute; bottom: 60%; width: 93%; left: 0; right: 0; } }
/* Services */
#services { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#services h2 { font-size: 42px; font-weight: 600; text-align: center; }
#services p { font-size: 19px; line-height: 25px; width: 50%; text-align: center; margin-top: 20px; }
.services-wrapper { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;}
.service-wrapper { padding:0; display: flex; flex-direction: column; align-items: center; width: 48%; margin: 10px; }
.service-wrapper img { height: 80px; width: auto; }
.service-wrapper h3 { font-size: 20px; font-weight: 700; margin: 20px 0 15px 0; text-align: center; }
.service-wrapper h6 { font-size: 15px; line-height: 22px; width: 85%; text-align: center; }
.service-container {background: rgb(2,108,196);
background: linear-gradient(90deg, rgba(2,108,196,0.20211834733893552) 0%, rgba(64,184,175,0.20211834733893552) 100%);padding:16px;border-radius:5px;}
.service-img { width:100%; float:right; width: 25%; padding: 0 0 20px; border-radius:5px; }
.logo2{ z-index: 0;
position: absolute;
left: 2%;
bottom: 2%;
width: 5%;}
@media only screen and (max-width: 850px) {
#services p { width: 95%; }
.service-wrapper { width: 90%; }
}
.caption-text-wrapper { display: flex; flex-direction: column; text-align: center; width: 100%; padding-bottom:80px; color:#fff; background: url('img/header.jpg');background-position:center;background-size:cover;/**background-color: rgba(2, 109, 196, 0.2)**/ }
.caption-text-wrapper h2 { font-size: 42px; font-weight: 600; margin-bottom: 10px; }
/* About */
#about { padding: 50px 0; display: flex; flex-direction: row; justify-content: space-around; align-items: center; }
.about-text-wrapper { display: flex; flex-direction: column; align-items: flex-start; width: 45%; }
.about-text-wrapper h2 { font-size: 42px; font-weight: 600; margin-bottom: 10px; }
.about-text-wrapper p { font-size: 17px; line-height: 24px; margin: 10px 0; }
.about-text-wrapper a { text-align: center; background-color: #026cc4; color: #fafafa; font-size: 18px; padding: 13px 45px; letter-spacing: .5px; font-weight: 600; margin-top: 20px; }
#about img { width: 45%; height: auto; border-radius: 4px; box-shadow: 0 3px 30px #89c1df3a; }
#about a { background-color: #026cc4; padding: 15px 35px; border-radius: 5px; transition: all, .3s; font-size: 18px; font-weight: 600; color: #fdfdfd; margin-top: 25px; }
#about a:hover { background-color: #40b8af; }
@media only screen and (max-width: 850px) {
#about { padding: 50px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.about-text-wrapper { width: 90%; }
#about img { width: 90%; margin-top: 25px; }
}
/* Testimonials */
#testimonials { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f7f7f7; padding: 50px 0; }
#testimonials h2 { font-size: 42px; font-weight: 600; text-align: center; }
#testimonials h3 { font-size: 19px; line-height: 25px; width: 50%; text-align: center; margin: 20px 0 35px 0; }
.testimonials-wrapper { display: flex; flex-direction: row; align-items: center; justify-content: space-around; }
.testimonial-wrapper { background-color: #026cc4; width: 25%; padding: 45px 25px; border-radius: 4px; border: 2px solid rgb(224, 224, 224);
transition: all, .3s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.testimonial-wrapper:hover { border: 2px solid #40b8af; transform: scale(1.02); cursor: pointer; }
.testimonial-wrapper p { font-size: 18px; margin: 20px 0; line-height: 23px; font-weight: 500; color: white; text-align: center; }
.testimonial-wrapper h4 { font-size: 20px; font-weight: 600; color: white; text-align: center; }
.testimonial-wrapper img { width: 50px; height: auto; }
#testimonials a { background-color: #026cc4; padding: 15px 35px; border-radius: 5px; transition: all, .3s; font-size: 18px; font-weight: 600; color: #fdfdfd; margin-top: 25px; }
#testimonials a:hover { background-color: #40b8af; }
@media only screen and (max-width: 850px) {
#testimonials { padding-bottom: 60px; padding-top: 100px; background: url("img/testimonials.jpg"); background-attachment: scroll; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#testimonials h3 { width: 95%; }
.testimonials-top-wrapper { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); padding: 30px 0; }
.testimonials-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.testimonial-wrapper { width: 80%; margin: 10px 0; }
}
/* CTA */
#cta { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 65px 0; background-color: #1E6A96; background-image: url("img/cta.jpg"); background-position: center; background-size: cover; }
#cta h2 { color: white; font-size: 34px; font-weight: 600; text-align: center; }
#cta p { color: white; font-size: 17px; line-height: 24px; font-weight: 500; text-align: center; width: 55%; margin: 20px 0; }
#cta a { background-color: white; color: #1E6A96; font-weight: 700; font-size: 19px; border-radius: 3px; padding: 13px 40px; }
#cta a:hover { background-color: #40b8af; color:#fff}
@media only screen and (max-width: 850px) {
#cta p { width: 90%; }
}
/* ----------------------------------------------
Footer
---------------------------------------------- */
footer { background-color: #161616; padding: 25px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-top: auto;}
.footer-link img { width: 200px; height: auto; margin-top: 10px; }
.copyright { color: rgb(167, 167, 167); }
@media only screen and (max-width: 850px) {
footer { padding: 35px 0; }
.footer-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.footer-column { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 25px 0; }
.footer-column h3 { font-size: 28px; margin-bottom: 20px; font-weight: 500; }
.footer-column-p { font-size: 19px; margin-bottom: 5px; font-weight: 300; }
.footer-text { font-size: 21px; text-align: center; line-height: 24px; }
}