body, html {width:100% !important; height:100% !important;}
body {padding:0; margin:0; background:#fff; color:#484b51; font-family: Roboto, Calibri, Tahoma, Sans-Serif;}
#wrapper {width:100%; height:100%; color:#484b51; background: #fff;}
.block {width:1120px; margin:0 auto; padding:0; position:relative; box-siz.footer-boxing:box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.pull-left {float:left!important;}
.pull-right {float:right!important;}
.clear {clear: both;}
h1{width:100%; color:#cc0000; padding:0; margin:0; font:26px Roboto, Calibri, Tahoma, Sans-Serif; font-weight:400; text-align:left; float:left;}
h2{width:100%; color:#484b51; padding:0; margin:0 auto 10px auto; font:16px Roboto, Calibri, Tahoma, Sans-Serif; font-weight:600; text-align:left;}
h3{width:100%; color:#484b51; padding:10px 0; margin:20px auto; font:26px Roboto, Calibri, Tahoma, Sans-Serif; font-weight:600; text-align:center;}
.header {width:100%; z-index:2000;}
.header-root {width:100%; padding: 0; position:relative; z-index:2000; float:left; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out;}
.header-root .top-line{width:100%; height:34px; padding:5px 0; background:#ededed;}
.header-root .quick-link {width:80%; margin:0; text-align:left; float:left;}
.header-root .quick-link li {list-style-type: none; color: #484b51; font-size:14px; font-weight:300; display: inline; line-height: 24px; margin-right:50px;}
.header-root .quick-link li .fa{color: #cc0000; font-size:16px; margin-right:10px;}
.header-root .quick-link a{color: #484b51;}
.header-root .quick-link a:hover{color:#cc0000;}
.header-root .social-icons {width:20%; margin:0; text-align:right; float:left;}
.header-root .social-icons li {list-style-type: none; color: #fff; font-size:16px; font-weight:300; display: inline; line-height: 24px; margin-right:5px;}
.header-root .social-icons a{color: #cc0000; padding:8px 5px; }
.header-root .social-icons a:hover, .header-root .social-icons a.active{color:#fff; background-color:#cc0000;}
.header-root .bottom-line{width:100%; padding: 15px; margin:0 auto; background: #fff; float: left;}
.header-root .bottom-line img{display:block;}
.header-root .menu-line{width:100%; padding:0; margin:0 auto; text-align:right; background-color:rgba(0, 0, 0, 0.7); float:left;}
#content {width:100%; padding:0; margin:0 auto; overflow:hidden; position:relative; top:0; float:left;}
.content-holder{width:100%; height:100%; position:relative; top:0; left:0; z-index:2; margin:0 auto; overflow:hidden; float:left;}
.content-holder h1 {color:#008ac3;}
.main-slider{width:100%; float:left;}
.main-services{width:100%; background:#000; float:left;}
.main-services .services-box{width:33.3333%; height:auto; cursor:pointer; overflow:hidden; float:left;}
.main-services .services-box img{width:100%; height:auto; display:block;}
.main-info{width:100%; padding:20px 0; background:#dbdbdb; float:left;}
.main-info .title{width:30%; margin: 0; padding:32px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size: 18px; font-weight:600; color:#000000; text-align:left; float:left;}
.main-info .title span{color:#cc0000; text-align:left; float:left;}
.main-info .detail{width:70%; font-size: 16px; color:#3d3b3b; line-height:26px; text-align:left; float:left;}
.product-order{width:100%; padding:14px 0; background:#01579b; float:left;}
.product-order .detail{width:64%; margin: 0; padding:0 4% 0 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size: 16px; font-weight:300; color:#fff; line-height: 40px; text-align:right; float:left;}
.product-order .btn{width: 32%; margin:0; text-align:left; float:left;}
.product-order .btn a{padding:6px 20px; color:#fff; background:#12a7d9; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:18px; font-weight:500; letter-spacing:0.2px; border-radius:20px;}
.product-order .btn a:hover{background:#fff; color:#12a7d9; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out;}
.usage-areas{width:100%; padding:20px 0; float:left;}
.usage-areas .areas-box{width:31.3333%; margin:1%; height:auto; cursor:pointer; overflow:hidden; text-align:left; position:relative; float:left;}
.usage-areas .areas-box img{width:100%; height:auto; display:block;}
.usage-areas h3:before {content: ' '; position: absolute; background: #c1d2da; bottom: 0; left: 50%; margin-left: -150px; width: 300px; height: 1px;}
#sub-banner{width:100%; min-height: 100px; position: relative; overflow: hidden; float:left;}
.sub-inner-content {position: relative; z-index: 2; margin:30px auto; padding: 40px 0; max-width: 100%; text-align: center;}
.breadcrumb{width:100%; padding:15px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:300; color:#064c79; text-align:left; line-height: 24px; float:left;}
.breadcrumb span{color:#064c79; font-weight:400; font-size:18px;}
.breadcrumb a{color:#064c79; font-weight:300;}
.breadcrumb a:hover{color:#000;}
.page-border {width:100%; height: 4px; border-top: 1px solid #c1d2da; border-bottom: 1px solid #c1d2da; margin: 10px 0 20px 0; box-sizing: content-box; float:left;}
.about-content{width:100%; padding:40px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:300; color:#484b51; line-height:20px; float:left;}
.about-content .left-part{width:47%; margin-right:3%; float:left;}
.about-content .right-part{width:47%; margin-left:3%; float:left;}
.about-content .pic {padding:2px; /*border:1px solid #c1d2da;*/ text-align:center;}
.about-content .pic img {width:100%; height:auto; border:none; display: block;}
.product-content{width:76%; padding:40px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:300; color:#484b51; line-height:20px; float:left;}
.product-mn{width:24%; padding:40px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:16px; font-weight:300; color:#484b51; line-height:20px; float:left;}
.pro-menu {width:90%;}
.product-content .left-part{width:64%; margin-right:3%; line-height: 24px; float:left;}
.product-content .right-part{width:30%; margin-left:3%; float:left;}
.product-content .pic {padding:2px; /*border:1px solid #c1d2da;*/ text-align:center;}
.product-content .pic img {width:100%; height:auto; border:none; display: block;}
.product-content .left-cloumn{width:47%; margin:20px 3% 20px 0; text-align:left; float:left;}
.product-content .right-cloumn{width:47%; margin:20px 0 20px 3%; text-align:left; float:left;}
#jquery-accordion-menu ul.block {display:block;}
#jquery-accordion-menu ul li a.current {border-left: solid 6px #008ac3;}
.product-table {width:100%; margin:20px 0; overflow-x: hidden; float:left;}
table { width: 100%; border-collapse: collapse;}
tr:nth-of-type(odd) { background: #f4f4f4; }
th {background: #dbdbdb; color:#484b51; font-weight: bold; text-align: center;}
td, th {padding: 6px; border: 1px solid #c1d2da; text-align: center !important;}
.usageareas-content{width:100%; padding:40px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:300; color:#484b51; line-height:20px; float:left;}
.usageareas-list{width:100%; list-style:none; display:inline-block; float:left;}
.usageareas-list li{width:23%; height: 390px; margin:0 1% 2% 1%; float:left;}
.usageareas-list .pic{width:100%; padding:10px 0; text-align:right; height: 246px; overflow: hidden; float:left;}
.usageareas-list .pic img {width:100%; height:auto; border:none; display: block;}
.usageareas-list .detail{width:100%; min-height: 162px; padding:10px; background: #f5f5f5; text-align:left; float:left;}
.usageareas-list h4{width:100%; color:#008ac3; padding:0 0 0 20px; margin:20px auto 20px auto; font:16px Roboto, Calibri, Tahoma, Sans-Serif; font-weight:600; text-align:left; border-bottom:2px solid #dbdbdb; background: #eee; line-height: 30px; float:left;}
.usageareas-list h5{width:100%; color:#008ac3; padding:0; margin:0 auto 10px auto; font:14px Roboto, Calibri, Tahoma, Sans-Serif; font-weight:400; text-align:left; float:left;}
.blue-btn {width: 100%; margin:20px 0 0 0; text-align:left; float:left;}
.blue-btn a{margin:0 6px 0 0; padding:6px 20px; color:#fff; background:#008ac3; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:500; letter-spacing:0.2px; border-radius:20px; float:left;}
.blue-btn a:hover{background:#efefef; color:#008ac3; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out;}
.contact-content{width:100%; padding:20px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:300; color:#484b51; line-height:20px; float:left;}
.contact-content .left-part{width:47%; margin-right:3%; float:left;}
.contact-content .right-part{width:47%; margin-left:3%; float:left;}
.google-map { width: 100%; height:300px; margin:0; padding:0; float:left;}
.contact-text{width:100%; margin-bottom:20px; float:left;}
.contact-detail{position:relative; margin-bottom:40px; float: left;}
.contact-detail li{position:relative; font-size:14px; font-weight:400; padding-left:55px; margin-bottom:18px; line-height:26px;}
.contact-detail li .icon{position:absolute; left:0px; top:3px; width:35px; color:#008ac3; font-size:22px; font-weight:400;line-height:1em;text-align:left;border-right:1px solid #d7d7d7;}
.contact-caption{width:100%; font-size: 16px; font-weight: 400; line-height: 34px; color: #008ac3; text-align: left; float: left;}
.contact-form{position:relative;}
.contact-form .form-group{position:relative;margin-bottom:20px;}
.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="password"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group select{position:relative; display:block; width:100%; line-height:18px; padding:10px 20px; height:48px; font-family: Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; border-radius:4px; border:1px solid #eaeaea; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease;
-o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease;}
.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="password"]:focus,
.contact-form .form-group input[type="tel"]:focus,
.contact-form .form-group input[type="email"]:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus{border-color:#652368;}
.contact-form .form-group textarea{ position:relative; display:block; width:100%; line-height:24px; padding:10px 20px; color:#656565; height:128px; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; resize:none; border-radius:4px; border:1px solid #ececec; -webkit-transition:all 300ms ease;-ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease;}
.contact-form button{ padding:11px 52px 10px; font-size:17px; text-transform:capitalize;}
.contact-form input.error,.contact-form select.error,.contact-form textarea.error{ border-color:#ff0000 !important; }
.contact-form label.error{ line-height:24px; padding:5px 0px 0px; margin:0px; text-transform:uppercase; font-size:11px; color:#ff0000; font-weight:500; }
.btn-style-one{position:relative; padding:6px 12px; line-height:24px; color:#ffffff; font-size:18px; font-weight:500; letter-spacing: 0.2px; background:#008ac3; border-radius:4px; text-transform:capitalize; font-family: Roboto, Calibri, Tahoma, Sans-Serif; border:none; border-radius: 20px; cursor:pointer;}
.btn-style-one:hover {background:#efefef; color:#008ac3;}
.order-content{width:100%; padding:40px 0; font-family:Roboto, Calibri, Tahoma, Sans-Serif; font-size:14px; font-weight:300; color:#484b51; line-height:20px; float:left;}
.order-content .left-part{width:47%; margin-right:3%; text-align:left; float:left;}
.order-content .right-part{width:47%; margin-left:3%; text-align:right; float:left;}
footer {width:100%; background:#242424; float:left;}
.footer-top{width:100%; margin:0 auto; padding:20px 0; font:14px Roboto, Calibri, Tahoma, Sans-Serif; float: left;}
.footer-top h4{width:100%; color:#cc0000; padding:0; margin-bottom:10px; font:16px Roboto, Calibri, Tahoma, Sans-Serif; text-align:left; line-height: 30px; float:left;}
.footer-bottom{width:100%; margin:0 auto; padding:20px 0; font:12px Roboto, Calibri, Tahoma, Sans-Serif; color:#838383; text-align:center; background:#131313; float: left;}
.footer-box{width:40%; margin:0; padding: 0 20px; font:12px Roboto, Calibri, Tahoma, Sans-Serif; color:#fff; line-height: 22px; float: left;}
.footer-menu{width:20%; margin:0; padding: 0 40px; font:12px Roboto, Calibri, Tahoma, Sans-Serif; color:#fff; line-height: 22px; float: left;}
.footer-menu.nav-links{width:100%; display:inline-block; list-style:none;}
.footer-menu .nav-links li{width:100%; font:12px Roboto, Calibri, Tahoma, Sans-Serif; color:#ccc; text-align:left; line-height:30px; font-weight:300;}
.footer-menu .nav-links li a{font-size:12px; color:#fff; font-weight:300;}
.footer-menu .nav-links li a:hover, .footer-menu .nav-links li a.active{color:#cc0000;}
.footer-box .contact .fa{margin-right:10px; color:#cc0000;}
.footer-box .contact li{ margin-bottom:10px !important;}
.footer-box .contact li a{font-size:12px; color:#ccc; font-weight:300;}
.footer-box .contact li a:hover{color:#cc0000;}
.footer-box .social-icons {width:100%; text-align:left; float:left;}
.footer-box .social-icons li {list-style-type: none; color: #fff; font-size:14px; font-weight:300; display: inline; line-height: 24px; margin-right:15px;}
.footer-box .social-icons a{color: #cc0000; font-size:20px;}
.footer-box .social-icons a:hover{color:#fff;}
@media screen and (max-width: 1366px)
{
.block{width:80%;}
}
@media screen and (max-width: 1024px)
{
.block{width:96%;}
.usageareas-list .pic img{width: 106%;}
}
@media screen and (max-width: 768px)
{
.block{width:auto; padding: 0 10px;}
.header-root .quick-link {width: 100%;}
.header-root .quick-link li:nth-child(2n+0) { margin-right: 0px;}
#content{float: left;}
.services-box{width:50%;}
.menu li {width: 50%;}
.menu li.mn1 a, .menu li.mn2 a, .menu li.mn3 a, .menu li.mn4 a{font-size:15px;}
.product-order .detail { width: 58%; text-align:center; }
.product-order .btn {width: 42%;}
.product-mn { display:none;}
.product-content { width: 100%;}
.blue-btn a{margin-bottom:20px;}
.usageareas-list li{width:48%; height: 360px;}
.usageareas-list .detail {min-height: 112px;}
.usageareas-list .pic img {width: 100%;}
.footer{position:relative; bottom:0; float:left;}
.footer-box, .footer-menu {width: 50%; height: 270px; padding: 0 20px;}
}
@media screen and (max-width: 375px)
{
.block{width:auto; padding: 0 5px;}
.header-root .top-line{display:none;}
.header-root .bottom-line img {width:60%; height:auto; display:block;}
.menu li{width:50%; height:auto;}
.main-services .services-box{width: 100%;}
.main-info .title{width: 100%; padding: 20px 0;}
.main-info .detail{width: 100%;}
.product-order .detail {width: 100%; line-height: 24px; text-align: left;}
.product-order .btn {width: 100%; margin:10px 0;}
.usage-areas .areas-box {width: 48%; }
figure.effect-goliath h4 {font-size: 14px; }
.about-content .left-part {width: 100%;}
.about-content .right-part {display:none;}
.product-content, .product-content .left-part {width: 100%;}
.product-mn, .product-content .right-part {display:none;}
.blue-btn a{margin-bottom:20px;}
.usageareas-list li{width:98%; height: 360px;}
.usageareas-list .detail {min-height: 112px;}
.usageareas-list .pic img {width: 100%;}
.contact-content .left-part, .contact-content .right-part{width: 98%; margin: 0 auto; float: none;;}
.order-content .left-part, .order-content .right-part{width: 98%; margin: 0 auto; float: none;}
.footer-box, .footer-menu {width: 100%; height: 200px; padding: 0 10px; line-height: 20px;}
.footer-top{margin: 0 auto 20px auto;}
.footer-map{display:none;}
}
@media screen and (max-width: 320px)
{
.menu li{width:50%; height:50%; display:block;}
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
/* navigation */
nav {padding:0; text-align: left; font-family: Roboto, Calibri, Tahoma, Sans-Serif;}
.link-effect {transition: 0.4s; color: #ffffff; font-size: 20px; text-decoration: none; padding: 0 10px; margin: 0 10px;}
.link-effect:hover { background-color: #ffffff; color: #EEA200; padding: 24px 10px;}
*, *:after, *:before {box-sizing: border-box;}
.animenu__toggle {display: none; cursor: pointer; background-color: #cc0000; border: 0; padding: 10px; width: 40px; height: 40px;}
.animenu__toggle:hover {background-color: #cc0000;}
.animenu__toggle__bar {display: block; width: 20px; height: 2px; background-color: #fff; transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);}
.animenu__toggle__bar + .animenu__toggle__bar {margin-top: 4px;}
.animenu__toggle--active .animenu__toggle__bar {margin: 0; position: absolute;}
.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {transform: rotate(45deg);}
.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {opacity: 0;}
.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {transform: rotate(-45deg);}
.animenu {display: block;}
.animenu ul {padding: 0; list-style: none;}
.animenu li, .animenu a {display: inline-block; font-size: 16px;}
.animenu a {font-size: 16px; font-weight:400; color: #fff; padding:16px 5px; transition: 0.4s; text-decoration: none;}
.animenu__nav {margin:0; /*background-color: #0f0f0f;*/}
.animenu__nav > li {position: relative; padding: 0;}
.animenu__nav > li > a {margin: 0 0 0 30px;}
.animenu__nav > li a.active, .animenu__nav > li a:hover {color:#fff; background:#cc0000;}
.animenu__nav > li > a:first-child:nth-last-child(2):before {content: ""; position: absolute; border: 4px solid transparent; border-bottom: 0; top: 50%; margin-top: -2px; right: 10px;}
.animenu__nav > li:hover > ul {opacity: 1; visibility: visible; margin: 0; padding:0;}
.animenu__nav > li:hover > a {color: #000; padding: 16px 5px; background-color: #cc0000;}
.animenu__nav__child {min-width: 100%; position: absolute; top: 100%; left: 0; z-index: 1; opacity: 0; visibility: hidden; margin: 20px 0 0 0; background-color:rgba(255, 255, 255, 0.8); transition: margin .15s, opacity .15s; width:284px; padding:10px !important;}
.animenu__nav__child > li {width: 100%; text-align:left;}
.animenu__nav__child > li:first-child > a:after {content: ''; position: absolute; height: 0; width: 0; left: 4.5em; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: inherit; color:#cc0000;}
.animenu__nav__child > li:last-child {border: 0;}
.animenu__nav__child a {padding: 10px; width: 100%; color:#000;}
.animenu__nav__child a:hover {background: #cc0000 !important; border-color: #cc0000; color: #fff !important;}
.animenu__nav > li > a img {top:9px; left:19px; position:absolute; display:block;}
@media screen and (max-width: 768px)
{
.animenu{ margin-top:0px;}
.animenu ul{ background:#cc0000; padding: 0 5px 0 0;}
.animenu__toggle {display: inline-block; float: right;}
.animenu__nav, .animenu__nav__child {display: none;}
.animenu__nav {margin: 0;}
.animenu__nav > li {width: 100%; border-right: 0; border-bottom: 1px solid #fff;}
.animenu__nav > li:last-child {border: 0;}
.animenu__nav > li:first-child > a:after {content: ''; position: absolute; height: 0; width: 0; left: 1em; display:none;}
.animenu__nav > li > a {width:99%; padding:10px; margin:0; border-color: #484b51; position: relative; color: #fff; font-weight: 300;}
.animenu__nav > li:hover > a {padding: 10px;}
.animenu__nav a:hover {background-color: #cc0000; border-color: #cc0000; color:#000 !important;}
.animenu__nav__child {width:178px; position: static; background-color: #373737; margin: 0; transition: none; visibility: visible; opacity: 1;}
.animenu__nav__child > li:first-child > a:after {content: none;}
.animenu__nav__child a {width:100%; padding:10px; text-align:right;}
.animenu__nav__child a:hover {color: #fff !important;}
.animenu__nav__child > li{text-align:left;}
.animenu__nav > li > a img{display:none;}
}
.animenu__nav--open {display: block !important;}
.animenu__nav--open .animenu__nav__child {display: block;}
/* navigation */