/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
html {
scroll-behavior: smooth;
}
body {
font-size: 13px;
line-height: 1.25em;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
background: #e5e5e5;
background-image: url(../img/img_Bg.jpg);
color: #1e1e1e;
}
a {
color: #24447f;
text-decoration: none;
font-weight: bold;
font-weight: lighter;
}
p {
padding: 0 0 .5em 0;
}
a:hover {
color: dimgrey;
font-weight: normal;
}
img {
width: 100%;
}
.parallaxindex {
background: url('../img/img_banner.jpg') no-repeat center;
background-attachment: fixed;
}
#paratext1 {
width: 60%;
padding: 6.5em 20% 0 20%;
color: white;
font-weight: lighter;
text-align: center;
font-size: 30px;
line-height: 1.1em;
color: white;
font-family: 'Lobster', cursive;
}
.parallax-slide {
height: 39vh;
}
#parallax1 {
background: url('../img/img_banner.jpg') no-repeat center;
background-attachment: fixed;
}
#parallax2 {
background: url('../img/web_Companies_banner.jpg') no-repeat center;
background-attachment: fixed;
}
#parallax3 {
background: url('../img/web_IndustriesMain_banner.jpg') no-repeat center;
background-attachment: fixed;
}
#header {
background-color: #202225;
width: 100%;
height: 14em;
position: fixed;
top: 0;
left: 0;
border-bottom: 2px solid white;
transition: 0.5s;
z-index: 100;
}
#indexbody {
display: inline-block;
margin: 0 0 0 0;
width: 100%;
margin: 0 0 0 0;
}
#indexbody hr {
width: 50%;
color: rgba (225,225,225,.1);
}
.indextext {
float: left;
width: 95%;
padding: 1% 2.5% 1em 2.5%;
line-height: 1.8em;
}
#logo{
float: left;
width: 150px;
height: 150px;
display: block;
}
/*-
nav {
float: right;
margin: 5em 0 0 0;
padding: 0 5% 0 0;
font-weight: bold;
text-align: center;
line-height: 0em;
height: 3em;
font-size: 14px;
background: rgba(225, 225, 225, 0.75);
}
nav a {
color: white;
}
nav a {
color: white;
}
nav a:hover {
color: rgba(225, 225, 225, .9);
}
-*/
.navbar {
float: right;
overflow: hidden;
background-color: none;
font-family: Arial;
margin: 5em 0 0 0;
padding: 0 5% 0 0;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
text-decoration: none;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(/Images/menu-icon.png) center;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
.dropdown {
float: right;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.dropbtn:hover {
color: rgba(225, 225, 225, .9);
}
.dropbtn a {
font-size: 14px;
overflow: hidden;
padding: 0 0 0 0;
}
.dropbtn a:hover {
color: rgba(225, 225, 225, .9);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.current {
background: -webkit-linear-gradient(#0576bc, #054463);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
font-size: 20px;
}
.current:hover{
background: -webkit-linear-gradient(#0576bc, #054463);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
font-size: 14px;
}
section {
margin: 0 auto 0;
max-width: 980px;
padding: 0 2em 0 2em;
text-align: justify;
background-color: rgba(255,255,255,.6);
display: block;
z-index: -2;
}
.pageheader {
width: 100%;
display: inline-block;
padding: 0 0 1em 0;
}
h1 {
font-size: 4em;
font-weight: bold;;
color: #262626;
line-height: 1.15em;
margin: .5em 0 0 0 ;
text-align: center;
padding-bottom: 1%;
}
h2 {
font-size: 2em;
color: #0576bc;
line-height: 1.15em;
padding: 1em 0 1em 0;
text-align: center;
font-weight: normal;
}
h3 {
font-size: 2em;
font-weight: bold;;
color: #262626;
line-height: 1.15em;
margin: 0 0 ;
text-align: center;
padding-bottom: 1%;
}
h4 {
font-size: 1.2em;
color: white;
font-weight: bolder;
line-height: 1.15em;
padding: 0 0 0 0;
text-align: justify;
}
h5 {
font-size: 1.2em;
color: #0576bc;;
line-height: 1.2em;
margin: 10px 0 ;
text-align: center;
font-weight: bolder;
}
h6 {
font-size: 1.3em;
color: #24447f;
line-height: 1em;
text-align: center;
font-weight: lighter;
}
h7 {
font-size: 1.2em;
color: #0576bc;
line-height: 1.15em;
padding: 1em 0 1em 0;
text-align: center;
font-weight: normal;
}
#btnadvantage {
clear: both;
height: 3em;
width: 100%;
color: white;
text-decoration: none;
background-color: none;
text-align: center;
line-height: 3em;
margin: 1em 0 1em 0;
}
#btnadvantage a {
color: white;
font-size: 12px;
font-weight: lighter;
text-align: center;
}
#btnadvantage a:hover {
color: #24447f;
font-size: 15px;
}
#imgmid {
padding: 0 0 0 0;
height: auto;
display: inline-block;
width: 100%;
clear: both;
}
#offerings {
padding: 0 0 5em 0;
display: inline-block;
height: auto;
width: 100%;
}
.plink {
padding: 1em 0 1em 0;
width: 16.6%;
float: left;
transition: all .3s ease-in-out;
}
.plink:hover {
transform: scale(1.05);
}
.plink p {
color: #3b3a3a;
font-size: 13px;
text-align: center;
}
.plink img {
width: 50%;
padding: 0 25% 0 25%;
}
#about {
clear: both;
width: 100%;
height: auto;
color: #3b3a3a;
text-align: justify;
}
#footer {
display: inline-block;
clear: both;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
height: 4em;
width: 100%;
position: relative;
padding: 1em 0 0 0;
border-top: .3em solid #313131;
}
.footbox {
display: inline-block;
width: 50%;
text-align: center;
float: left;
color: white;
font-size: 12px;
padding: 0 0 0 0;
}
.footboxsub {
color: white;
text-align: left;
display: inline-block;
padding: 0 0 1em 0;
}
.footboxsub a{
color: white;
text-align: left;
display: inline-block;
}
.footboxsub a:hover {
color: rgba(225, 225, 225, .9);;
text-align: left;
display: inline-block;
}
.footcurrent {
font-weight: bolder;
text-transform: uppercase;
color: #c8c8c8;
}
#footbtm {
display: inline-block;
height: 1.5em;
line-height: 1.5em;
margin: 0;
margin: 0;
width: 100%;
color: white;
font-size: 10px;
text-align: center;
font-weight: bolder;
background-color: #262626;
margin: 3em 0 0 0;
}
/*----------------------Company Page --------------------*/
#Solutions {
display: inline-block;
height: auto;
width: 100%;
margin: 2em 0 2em 0;
}
#productbody {
text-align: center;
width: 100%;
}
#productbody a:hover{
font-weight: lighter;
font-size: 14px;
}
#productbody hr {
width: 70%;
margin: 1em auto 2em auto;
}
#Solutions p{
line-height: 1.5em;
}
#Privacy {
}
#Polcies {
margin: 20em;
}
.btnint {
display: inline-block;
background-color: #24447f;
background-color: #24447f;
width: 100%;
height: 2em;
margin: 2em 0;
text-align: center;
}
.btnint a{
color: white;
line-height: 2em;
}
.btnint a:hover{
color: white;
line-height: 2em;
}
#servicelist {
display: inline-block;
width: 20%;
float: left;
text-align: left;
padding: 0 0 0 10%;
}
#servicelist a{
font-weight: bolder;
color: darkslategray;
font-size: 14px;
}
#servicelist a:hover{
color: #0576bc;
font-weight: lighter;
font-size: 14px;
}
.head {
/*--background-color: rgba(5, 118, 188, .4);--*/
color: #222223;
padding: 1em .5em;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
height: auto;
font-weight: lighter;
border-bottom: 2px solid #0576bc;
width: 85%;
}
#p_default {
float: left;
width: 65%;
display: block;
padding: 2% 0 0 0;;
color: #313131;
text-align: justify;
height: 19em;
background-image: none;
}
#p_default img{
width: 70%;
padding: 0 15%;
}
#head_one {
float: left;
width: 65%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_two {
float: left;
width: 65%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_three {
float: left;
width: 65%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_four {
float: left;
width: 65%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_five {
float: left;
width: 65%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_six {
float: left;
width: 65%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_one li {
text-align: left;
padding: .1em 0 1% 35%;
font-weight: bolder;
text-decoration: none;
}
#head_five li {
text-align: left;
padding: .1em 0 1% 2%;
font-weight: bolder;
text-decoration: none;
}
#head_five li:first-child {
}
#head_five ul ul li:last-child {
font-weight: lighter;
padding: 0 0 1% 3%;
}
#head_six li {
text-align: left;
padding: .1em 2% 1% 2%;
font-weight: bolder;
text-decoration: none;
}
.inner {
background-color: none;
padding: 3%;
border: 1px solid white;
}
#privacy {
width: 100%;
height: auto;
display: inline-block;
}
/*---------------------Industry Page --------------------*/
#in_main {
width: 95%;
display: inline-block;
height: auto;
margin: 0 2.5% 1em 2.5%;
}
#in_subl {
float: left;
height: auto;
width:100%;
margin: 0;
font-size: 14px;
line-height: 1.8em;
}
#in_subr {
float: left;
height: auto;
width: 20%;
margin: 0 2.5% 0 2.5%;
}
#in_subr img {
height: auto;
width: 100%;
}
.container {
clear: both;
display: inline-block;
width: 100%;
height: auto;
padding: 1em 0 1em 0;
}
.in_block {
float: left;
width: 27%;
height: auto;
line-height: 1.5em;
margin: 2% 3% 2% 3%;
}
.in_block p {
text-align: justify;
padding: .5em 0 0 0;
}
.in_block img {
width: 30%;
padding: 0 40% 0 40%;
}
.clickbar {
width: 100%;
line-height: 1em;
height: 2em;
display: inline-block;
clear: both;
background-color: dimgray;
text-align: center;
color: white;
font-size: 20px;
}
.in_block2 {
float: left;
width: 10%;
height: auto;
margin: 2% 3% 2% 3%;
}
.in_block2 p {
text-align: center;
}
.in_block2 img {
width: 80px;
height: 100%;
padding: 0 15% 0 15%;
}
.interest {
height: 2em;
width: 100%;
background-color: #0576bc;
margin: 1.2em 0;
color: white;
font-size: 14px;
font-weight: bolder;
text-decoration: none;
border: none;
transition: all .3s ease-in-out;
}
.interest:hover {
background-color: red;
color: darkgrey;
background-color: #085b84;
font-weight: lighter;
}
#policies {
display: inline-block;
height: auto;
width: 100%;
background-color: none;
text-align: center;
}
#policies h3{
padding: 1% 0;
}
.pol {
clear: both;
width: 100%;
height: auto;
padding: 1% 0;
text-align: justify;
line-height: 1.8em;
}
.pol hr{
clear: both;
margin: 0 20%;
}
#poleft {
float: left;
display: inline-block;
height: 5em;
width: 5em;
background-color: none;
padding: 0 2% 0 0;
margin: auto 0;
}
#polright ul{
color: none;
margin: 0 0 1% 0;
}
#polright li{
color: none;
margin: 1% 0 0 2%;
}
#polright {
display: inline-block;
height: a;
width: 90%;
background-color: none;
float: left;
padding: 0 0 0 0;
}
/*-------------------Contact us Page --------------------*/
.parallaxcontactop {
background-image: url("../Images/img_logtrabuilding.jpg");
/* Set a specific height */
height:200px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
margin: 4em 0 0 0;
}
#paratext5 {
width: 60%;
padding: 5em 20% 0 20%;
color: white;
font-weight: lighter;
text-align: center;
font-size: 20px;
line-height: 1.5em;
color: white;
font-family: 'Lobster', cursive;
}
.parallaxcontactmid {
background-image: url("../Images/img_logtrabuilding.jpg");
/* Set a specific height */
height: 300px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
margin: 25em 0 0 0;
}
#paratext6 {
width: 60%;
padding: 4em 20% 0 20%;
color: white;
font-weight: lighter;
text-align: center;
font-size: 30px;
line-height: 1.1em;
color: white;
font-family: 'Lobster', cursive;
}
#contactmain {
display: inline-block;
padding: 0 0 1em; 0;
text-align: center;
width: 100%;
height: auto;
}
#contactinfo {
float: left;
width: 50%;
padding: 2em 0% 1em 0
}
#formcontainer {
clear: both;
padding: 1em 0;
width: 100%;
line-height: 1.5em;
}
input[type=text] {
border: none;
background-color: #C9C9C9;
height: 1.5em;
width: 100%;
}
textarea {
width: 99%;
height: 5em;
}
input[type=submit] {
color: white;
width: 100%;
height: 1.5em;
background:#24447f;
border:0 none;
cursor:pointer;
}
input[type=email] {
border: none;
background-color: #C9C9C9;
height: 1.5em;
width: 100%;
text-align: left;
}
input[type=tel] {
border: none;
background-color: #C9C9C9;
height: 1.5em;
width: 100%;
}
label {
}
#map {
float: right;
height: auto;
width: 47.5%;
margin: 2em 0 0 2.5%;
display: inline-block;
transition: all .3s ease-in-out;
overflow: hidden;
}
#map img {
width: 10%;
}
#map img:hover {
transform: scale(1.05);
}
#googleMap {
float: right;
height: 550px;
width: 100%;
background-color: white;
overflow: hidden;
display: inline-block;
}
#maptext {
display: inline-block;
padding: 1em 0 0 0;
}
/*MEDIA QUERY*/
@media only screen and (min-width:480px) and (max-width:768px) {
body {
}
#p_default {
float: left;
width: 65%;
display: block;
padding: 7.5% 0 7.5% 0;;
color: #313131;
text-align: justify;
height: 19em;
background-image: none;
}
#p_default img{
width: 70%;
padding: 0 15%;
}
.parallax-slide {
height: 29vh;
}
}
/*MEDIA QUERY*/
@media only screen and (max-width : 480px) {
body {
}
section {
margin: 0 auto 0;
padding: 0 1em;
text-align: justify;
background-color: rgba(255,255,255,.6);
display: block;
}
#header {
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
right: 0;
border-bottom: 2px solid white;
z-index: 0;
}
.parallax-slide {
height: 39vh;
}
#logo{
width: 39%;
height: auto;
display: block;
margin: auto 30.5%;
text-align: center;
}
.navbar {
width: 100%;
overflow: hidden;
background-color: #202225;
font-family: Arial;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
font-size: 14px;
color: white;
text-decoration: none;
width: 100%;
}
.dropdown {
overflow: hidden;
width: 25%;
}
/* Dropdown button */
/* Dropdown button */
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: white;
height: 4em;
padding: 12px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.dropdown .dropbtn a{
text-align: center;
}
.plink {
padding: 1em 3%;
width: 40%;
height: 8em;
float: left;
transition: all .3s ease-in-out;
margin: 0 2%;
}
.plink:hover {
transform: none;
}
.plink p {
color: #3b3a3a;
font-size: 13px;
text-align: center;
}
.dropdown-content a:hover {
display: none;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: none;
}
/*------ Company page Mobile -------*/
#Solutions {
display: inline-block;
height: auto;
width: 100%;
margin: 2em 0 2em 0;
}
#servicelist {
display: inline-block;
width: 100%;
float: left;
text-align: left;
padding: 0 1% 0 1%;
text-align: center;
}
#servicelist a{
font-weight: bolder;
color: darkslategray;
font-size: 12px;
}
#servicelist a:hover{
color: #0576bc;
font-weight: lighter;
font-size: 14px;
}
#head_one {
float: left;
width: 98%;
display: none;
padding: 1%;
margin: 1% 0;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_two {
float: left;
width: 98%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_three {
float: left;
width: 98%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_four {
float: left;
width: 98%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_five {
float: left;
width: 98%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#head_six {
float: left;
width: 98%;
display: none;
padding: 1%;
color: white;
text-align: justify;
height: auto;
background: -webkit-radial-gradient(top,#515562,#222223);
background: radial-gradient(at top,#515562,#222223);
}
#polright {
display: inline-block;
height: a;
width: 98%;
background-color: none;
}
#p_default {
display: none;
}
#poleft {
display: inline-block;
height: 5em;
background-color: none;
padding: 0 0 0 0;
margin: auto 0;
width: 100%;
}
#poleft img{
width: 15%;
padding: 2% 40%;
}
/*------ Industries page Mobile -------*/
#in_subl {
height: auto;
width: 98%;
margin: 0 1% 1em 1%;
font-size: 14px;
line-height: 1.8em;
}
#in_subr {
display: none;
}
.in_block {
float: left;
width: 27%;
height: auto;
margin: 2% 3% 2% 3%;
}
.in_block p {
text-align: left;
padding: .5em 0 0 0;
font-size: 11px;
}
.in_block2 {
float: left;
width: 10%;
height: auto;
text-align: center;
margin: 2% 3% 2% 3%;
}
.in_block2 p {
text-align: center;
font-size: 12px;
}
.in_block2 img {
width: 100%;
height: 100%;
padding: 0 15% 0 15%;
}
/*------ Contact page Mobile -------*/
#contactinfo {
float: left;
width: 100%;
padding: 2em 0% 1em 0
}
#map {
height: auto;
width: 98%;
margin: 2em 0 0 2.5%;
display: inline-block;
transition: all .3s ease-in-out;
}
#map img {
width: 10%;
}
}