/* general styling */
html, body { margin: auto; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 500; font-size: 100%; line-height: 1; color: rgba(60,71,79,1); background: rgba(255,255,255,1); }
*, *:before, *:after { box-sizing: border-box; }
::-moz-selection { background: rgba(192,33,42,.99); color:#fff; text-shadow: none; }
::selection { background: rgba(192,33,42,.99); color:#fff; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid rgba(238,178,29,1); margin: 0; padding: 0; } /* Change color for this site */
img { /*display: block; vertical-align: top; vertical-align: text-bottom;*/ } /* Fix extra pixel(s) under images */
img { max-width: 100%; height: auto; margin:0 auto; display:block } /* global responsive images */
/*audio, canvas, iframe, img, svg, video { vertical-align: middle; }*/
/* self-clear floats */
.clear:before,
.clear:after { content: " "; display: table; /* height: 0; visibility: hidden;*/ }
.clear:after { clear: both; }
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }
.left{float:left; margin:10px 25px;}
#phone{display:none;text-align: center;
font-size: 200%;}
table tr td ul li{font-size:120%}
div li{font-size:100%;line-height:1.75;}
/* header and menu */
header#header { margin: 0; padding: 0; width: auto; background-color: rgba(59, 81, 125,1); border-bottom: solid 3px rgba(48, 88,145, .5);}
header#header #header-inner { margin: auto;max-width:1080px;}
header#header #header-inner .logo { float:left;display: block; /*float: left; margin: 17.5px 10px;*/
width:25%;
padding:10px;
background-color:#fff;
border-radius: 50px 5000px;;
-webkit-box-flex: auto;
-moz-box-flex: auto;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
}
header#header #header-inner .logo img {max-width:150px;}
header#header #header-inner #header-menu {}
header#header #header-inner #header-menu nav#nav {margin: 20px 0 0 0 ; /*float: right; margin: 58px 10px;*/}
header#header #header-inner #header-menu nav#nav ul { float:right; margin: 0; padding: 0 0 0 30px; list-style: none; }
header#header #header-inner #header-menu nav#nav ul li { float: left; position:relative; min-height:50px; font-size:20px; }
header#header #header-inner #header-menu nav#nav ul li:last-child {display: inline-block; margin:18px 25px 0 25px }
header#header #header-inner #header-menu nav#nav ul li a { display: inline-block; float: left; text-decoration:none; margin: 18px 25px 0 0; color: rgba(251,251,251,1); font-size: 100%; font-weight: 400; text-transform: uppercase; transition: all 0.3s ease; }
header#header #header-inner #header-menu nav#nav ul li:nth-child(2) a{padding-left:60px;}
header#header #header-inner #header-menu nav#nav ul li:first-child a {margin-left: 0; padding-right:80px; border-right:solid 1px #fff; }
header#header #header-inner #header-menu nav#nav ul li:last-child a { margin-right: 100px; }
/*header#header #header-inner #header-menu nav#nav ul li a:hover{color:rgba(211, 211, 211,1);}*/
header#header #header-inner #header-menu nav#nav ul li a:focus,
header#header #header-inner #header-menu nav#nav ul li a.section,
header#header #header-inner #header-menu nav#nav ul li a.current { color: rgba(30, 191, 175,1); }
header#header #header-inner #header-menu a.nav-trigger { display: none; float: right; margin: 30px 40px 10px 10px; max-width: 25px; max-height: 30px; color: rgba(255,255,252,1); text-align: right; text-decoration: none; background: transparent; }
header#header #header-inner #header-menu a.nav-trigger:hover,
header#header #header-inner #header-menu a.nav-trigger:focus { color: rgba(198,61,145,1) }
header#header #header-inner #header-menu a.nav-trigger span { display: block; text-transform: uppercase; }
header#header #header-inner #header-menu a.nav-trigger span:first-child { margin: 0; padding: 0; font-size: 45px; }
header#header #header-inner #header-menu a.nav-trigger span:last-child { font-size: 13px; font-weight: 400; }
header#header #header-inner #header-menu nav#nav ul.dropdown { display: none; position: absolute; top:100%; z-index:1;
margin: 0; padding: 0; text-align: center; list-style: none; background: rgba(191,30,46,.90); }
header#header #header-inner #header-menu nav#nav li:hover ul.dropdown {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
/*display: flex; */
display: block;
position:absolute;
} /* this shows the dropdown non-mobile devices */
header#header #header-inner #header-menu nav#nav ul.dropdown {
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
min-width:250px;
}
header#header #header-inner #header-menu nav#nav ul.dropdown li { width:100%; margin: 0; padding: 0 20px; border: 2px solid #fff;}
/*header#header #header-inner #header-menu nav#nav ul.dropdown li:last-child { border: none; margin:0; padding: 10px 10px 0 10px; border: 1px solid #fff; }*/
header#header #header-inner #header-menu nav#nav ul.dropdown li a{ font-size:16px; text-align:center; margin:0; padding: 10px 10px 0 10px; display:inline-block;}
/*header#header #header-menu nav#nav ul.dropdown > li > a {display: block;}*/
header#header #header-inner #header-menu nav#nav ul.dropdown li a:hover{color:rgba(30, 191, 175,1);}
header#header #header-inner #header-menu nav#nav ul.dropdown li a:focus,
header#header #header-inner #header-menu nav#nav ul.dropdown li a.current,
header#header #header-inner #header-menu nav#nav ul.dropdown li a.section { color: rgba(30, 191, 175,1); }
header#header nav#nav-mobile { display: none; width: 100%; margin: 0; padding: 0; text-align: center; text-transform: uppercase; }
header#header nav#nav-mobile ul { margin: 68px 0 0 0; padding: 0; list-style: none; background: rgba(91,91,91,1); }
header#header nav#nav-mobile ul li { margin: 0; text-align:left; padding: 0; color: rgba(255,255,255,1); border-bottom: 1px solid rgba(255,255,255,.5); }
header#header nav#nav-mobile ul li:first-child { /*border-top: 1px solid rgba(255,255,255,.5);*/ }
header#header nav#nav-mobile ul li:last-child { border: none; }
header#header nav#nav-mobile ul li a { display: block; margin: 0; padding: 20px; color: rgba(255,255,255,1); font-size: 120%; font-weight: 700; text-decoration: none; }
header#header nav#nav-mobile ul li a:hover,
header#header nav#nav-mobile ul li a:focus { margin: 0; padding: 20px; color: rgba(255,255,255,.5); text-decoration: none; }
header#header nav#nav-mobile ul li a.button { display: inline-block; margin: 0 auto 10px auto; padding: 10px 25px; color: #fff; font-size: 100%; font-weight: 700; text-decoration: none; text-transform: uppercase; background: rgba(38,116,162,1); border-radius: 5px; transition: all 0.3s ease; }
header#header nav#nav-mobile ul li a.button:hover,
header#header nav#nav-mobile ul li a.button:focus { color: rgba(238,178,29,1); }
header#header nav#nav-mobile ul li > span.has-children,
header#header nav#nav-mobile ul li > span.has-childrens { float: right; padding: 20px; color: rgb(255,255,255); cursor: pointer; border-left: 1px solid rgba(255,255,255,.5); }
header#header nav#nav-mobile ul li > span.has-children:hover,
header#header nav#nav-mobile ul li > span.has-childrens:hover { color: rgba(255,255,255, .5); }
header#header nav#nav-mobile ul li ul.secondary { display: none; background: rgba(191,30,46,1); margin:0; }
header#header nav#nav-mobile ul li ul.secondary li { border-top: 1px solid rgba(255,255,255,.5); border-bottom: none; }
header#header nav#nav-mobile ul li ul.secondary li a { padding-left: 30px; color: rgba(255,255,255,1); font-size: 100%; }
header#header nav#nav-mobile ul li ul.secondary li a:hover { color: rgba(255,255,255,.5); }
section#banner{overflow:hidden; width:100%; }
section#banner .banner-inner img{width:100%}
/* main content */
main#main {margin: auto; }
main#main .main-inner{ margin:0 0 20px 0; height:auto; padding:0 0 20px 100px;}
main#main article#wrapper {width: 100%; overflow: hidden;/*background-image: url(../images/bg-pattern.png);background-repeat:repeat;*/ }
main#main article#wrapper #wrapper-inner{margin: 0 auto; padding: 0 0 40px 0; text-align:center;}
main#main article#wrapper #wrapper-inner p{line-height:28px; margin:10px; padding:10px 40px;}
main#main article#wrapper #wrapper-inner h2 a {color:#fff}
main#main article#wrapper #wrapper-inner h1{font-size:220%; text-transform:uppercase; color:#fff;}
main#main article#wrapper #wrapper-inner h2{font-size:130%;
display: inline-block;
margin: 40px 10px 10px 10px;
padding: 10px 20px;
color: #fff;
font-size: 118.8%;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
background: rgba(56,114,158,1);
border-radius: 15px;
transition: all 0.3s ease;
border: solid 1px #fff}
main#main article#wrapper #wrapper-inner #left{
float: left;
width:50%;
padding: 50px 0;
border-right: 3px solid #fff;
background: -webkit-linear-gradient(rgba(56, 114, 158, 0.80) 0%, rgba(59, 81, 125, 0.95) 100%) repeat scroll 0 0, url('../images/server.png') center center no-repeat;
background: -moz-linear-gradient(rgba(56, 114, 158, 0.80) 0%, rgba(59, 81, 125, 0.95) 100%) repeat scroll 0 0, url('../images/server.png') center center no-repeat;
background: -o-linear-gradient(rgba(56, 114, 158, 0.80) 0%, rgba(59, 81, 125, 0.95) 100%) repeat scroll 0 0, url('../images/server.png') center center no-repeat;
background: linear-gradient(rgba(56, 114, 158, 0.80) 0%, rgba(59, 81, 125, 0.95) 100%) repeat scroll 0 0, url('../images/server.png') center center no-repeat;
min-height:490px;
}
main#main article#wrapper #wrapper-inner #left p{color:#fff; padding:0 40px 45px 40px;}
main#main article#wrapper #wrapper-inner #left h1{padding:10px 0 30px 0;}
main#main article#wrapper #wrapper-inner #right{
float: right;
width:50%;
padding: 37px 0;
min-height:490px;
background: -webkit-linear-gradient(rgba(209, 210, 211, 0.85) 90%, rgba(146, 146, 146, 0.95) 100%) repeat scroll 0 0, url('../images/earth.gif') center center no-repeat;
background: -moz-linear-gradient(rgba(209, 210, 211, 0.85) 90%, rgba(146, 146, 146, 0.95) 100%) repeat scroll 0 0, url('../images/earth.gif') center center no-repeat;
background: -o-linear-gradient(rgba(209, 210, 211, 0.85) 90%, rgba(146, 146, 146, 0.95) 100%) repeat scroll 0 0, url('../images/earth.gif') center center no-repeat;
background: linear-gradient(rgba(209, 210, 211, 0.85) 90%, rgba(146, 146, 146, 0.95) 100%) repeat scroll 0 0, url('../images/earth.gif') center center no-repeat;
}
main#main article#wrapper #wrapper-inner #right .img{width:50%;}
main#main article#wrapper #wrapper-inner #right h1{color:rgba(60,71,79,1); padding:0 80px}
section#bottom {background: rgba(209,210,211,1); margin: 0; padding: 0; width: 100%; height:300px; }
section#bottom #bottom-inner {max-width:980px; margin:auto;}
section#bottom #bottom-inner h1{font-size:200%; color:rgba(19,40,78,1);}
section#bottom #bottom-inner #left{float:left; width:35% }
section#bottom #bottom-inner #right{float:right; width:60%;}
section#bottom #bottom-inner #right ul{list-style:none;}
section#bottom #bottom-inner #right ul li::before {content:"\2022"; color:rgba(56,114,158,1); display: inline-block; width: 1em;
margin-left: -1em; font-size:125%; }
section#bottom #bottom-inner #right ul #column-inner li{margin: 0 10px 5px 10px;}
section#bottom #bottom-inner #right ul #column-inner #column1{float:left; width:50%}
section#bottom #bottom-inner #right ul #column-inner #column2{float:right; width:48%}
/* footer content */
footer#footer { margin: 0 auto; padding: 0; overflow:hidden; width: 100%; line-height:14px; background: rgba(146,146,146,1); height:auto;}
footer#footer .footer-copy { margin: 0; padding: 5px 0; color:rgba(209,210,211,1); width:100%; font-size: 80%; font-weight: 400; text-align: center; }
/* responsiveness
---------------------------------------------*/
@media only screen and (max-width: 1400px) {
}
@media only screen and (max-width: 1200px) {
header#header #header-inner #header-menu nav#nav ul li:first-child a{padding-right:40px;}
header#header #header-inner #header-menu nav#nav ul li:nth-child(2) a{padding-left:30px;}
}
@media only screen and (max-width: 1000px) {
header#header #header-inner #header-menu nav#nav ul li:first-child a{padding-right:20px;}
header#header #header-inner #header-menu nav#nav ul li:nth-child(2) a{padding-left:15px;}
}
@media only screen and (max-width: 900px) {
/*header#header #header-inner #header-menu nav#nav ul li a { margin: 0 10px; font-size: 85%; }*/
section#banner .banner-inner h1{font-size:200%;}
section#banner .banner-inner div{top:160px;}
section#banner .banner-inner div a.button,
.button{font-size:110%; padding: 15px 30px;}
header#header #header-inner #header-menu nav#nav ul li{font-size:16px;}
}
@media only screen and (max-width: 800px) {
header#header #header-inner #header-menu nav#nav { display: none; }
header#header #header-inner #header-menu a.nav-trigger { display: block; }
#phone{display:block; }
header#header #header-inner .logo img{width:65%;}
section#bottom #bottom-inner #right{float:left; width:100%}
section#bottom #bottom-inner #left{width:100%;float:left; text-align:center;}
section#bottom #bottom-inner #right ul #column-inner #column2{float:right; width:80%}
section#bottom #bottom-inner #right ul #column-inner #column1{width:80%; float:right;}
section#bottom #bottom-inner h1{font-size:150%;}
section#bottom{height:475px}
section#bottom #bottom-inner{margin: 0 auto;}
main#main article#wrapper #wrapper-inner #left{width:100%;}
main#main article#wrapper #wrapper-inner #right{float:right; width:100%;}
}
@media only screen and (min-width: 800px) {
header#header nav#nav-mobile { display: none !important; }
}
@media only screen and (max-width: 700px) {
}
@media only screen and (max-width: 600px) {
section#banner .banner-inner h1{font-size:150%; top:40px}
section#banner .banner-inner div{top:120px;}
section#banner .banner-inner div a.button,
.button{font-size:100%; padding: 10px 20px;}
section#bottom #bottom-inner .contact p {font-size:100%;}
main#main article#wrapper #wrapper-inner p{font-size:100%}
table tr td ul li{font-size:100%}
header#header #header-inner #header-menu a.nav-trigger{margin: 15px 15px 10px 10px}
header#header #header-inner #header-menu a.nav-trigger span:first-child { margin: 0; padding: 0; font-size: 30px; }
header#header #header-inner #header-menu a.nav-trigger span:last-child { font-size: 9px; font-weight: 400; }
#phone{font-size:125%;}
}
@media only screen and (max-width: 500px) {
header#header { min-height: 0px; }
header#header #header-inner #header-inner-container { min-height: 0px; }
main#main article#wrapper h4{font-size:100%}
main#main article#wrapper a.btn{font-size:14px; }
main#main article#wrapper td{font-size:12px;}
section#banner .banner-inner div a.button,
.button{font-size:100%; padding: 8px 16px;}
main#main article#wrapper #wrapper-inner #left h1,
main#main article#wrapper #wrapper-inner #right h1
{font-size:150%;}
main#main article#wrapper p a.button,
main#main article#wrapper p.left a.button { width: 100%; text-align: center; }
section#bottom{height:500px}
}
@media only screen and (max-width: 400px) {
main#main article#wrapper h4{font-size:80%}
main#main article#wrapper a.btn{font-size:12px; }
main#main article#wrapper td{font-size:12px;}
section#banner .banner-inner h1{font-size:120%; top:15px}
section#banner .banner-inner div{top:60px;}
section#banner .banner-inner div a.button,
.button{font-size:100%; padding: 5px 10px;}
}
@media only screen and (max-width: 300px) {
}
@media print {
*, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}