@charset "utf-8";
/* @import url("menu.css"); */
/* @import url(http://fonts.googleapis.com/css?family=Just+Another+Hand|Anton|Bevan|Six+Caps); */
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Roboto&display=swap');
/* CSS Document */
/*
font-family: 'Roboto', sans-serif;
font-family: 'Alfa Slab One', cursive;
font-family: 'Abril Fatface', cursive
*/

body {
/* font-family: 'Roboto', sans-serif; */
}
.header {
background: url(/new/img/2019/header-bg.png);
background-size: cover;
padding: 1em;
}

h1, h2, h3, h4 {
/* font-family: 'Abril Fatface', cursive */
}
h2 {
color: #666;
font-size: 1.4em;
font-weight: normal;
padding: 1em;
}

h3 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}

h4, .h4 {
color: #343a40;
font-size: 1rem;
padding: .5em;
}

.bold {
font-weight: bold;
}

.mtop1 {
margin-top: 1em;
}
.page h3 {
color: #3b6ccb;
padding: 0;
margin: 1em 0;
}

.latest-projects h3 {
text-align: center;
width: 100%;
padding: .5em;
}

.solutions {
background: #e2e2e2;
padding: 5em 0 2em 0
}
.solutions h4 {
text-align: center;
font-weight: normal;
padding: 0;
font-weight: bold;
}

.solutions p {
margin-top: 0;
margin-bottom: 1rem;
font-size: .85em;
text-align: center;
}

.hp-icon {
color: #355bad;
padding: 1em;
display: inline-block;
margin: -4em auto;
border-radius: 2em;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 4em;
}
.hp-icon i.fas {
font-size: 2em;
text-align: center;
}
.lets-get {
/* font-weight: bold;
font-style: italic; */
text-decoration: underline;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.9);
font-weight: bold;
/* font-size: 1.1em; */
text-shadow: 5px 5px 3px #333;
margin-right: 1em;
text-transform: uppercase;
}

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark {
padding: .12em;
}
.hp-logo {
margin: auto;
display: block !important;
transition: .3s;
}
.latest-projects {
padding: 2em;
}
.latest-projects img {
width: 100%;
transition: .2s;
cursor: pointer;
}
.latest-projects img:hover {
transform: scale(1.03);
}
.latest-projects p, .latest-projects h4 {
text-align: center;
margin-bottom: 3em;
margin-top: 1em;
}
.latest-projects h4 {
margin-bottom: 0;
font-weight: bold;
color: #3965bd;
}
.latest-projects p {
margin-top: 0;
font-size: .8em;
}

.footer {
BACKGROUND: #242323;
BACKGROUND: #262262;
PADDING: 1EM;
}

/* CSS SHADOWS */
.card {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 300px;
}

.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 4.5px 14px rgba(0,0,0,0.23);
}

.card-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

/* END CSS SHADOWS */



.red {
font-weight: bold;
color: #F00;
}

ul.MenuBarHorizontal a.contact {
background-image: url(images/hover.png);
background-repeat: no-repeat;
}
#contact-wrapper2 {
width:370px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
float: right;
}


#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
float: left;
clear: both;
}
#contact-wrapper div {
clear:both;
margin:1em 0;
}
#contact-wrapper label {
display:block;
float:none;
font-size:16px;
width:auto;
}
form#contactform input {
border-color:#333;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
margin-top: 0px;
margin-right: 7px;
margin-bottom: 7px;
margin-left: 0px;
background-color: #9F9F9F;
}
form#contactform textarea {
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:100%;
padding:0.6em 0.5em 0.7em;
background-color: #9F9F9F;
border: 1px solid #000;
}


#emailform {
width: 580px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 14px;
}

@media only screen and (max-width: 900px) {
h2 {
color: #666;
font-size: 1em;
font-weight: normal;
padding: 1em;
}

.hp-icon {
display: none;
}
}

@media only screen and (max-width: 600px) {
.hp-icon {
display: none;
}
.hp-logo {
height: 3em;
}

.solutions {
background: #e2e2e2;
padding: 2em 0 2em 0;
}
}