/*   
Theme Name: niton103
*/

*{
margin: 0;
padding: 0;
border: 0;
}

html {
overflow-y: scroll;
}

body {
overflow-x: hidden;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}

@font-face {
font-family: roboto;
src: url(font/robotoregular.ttf);
}

@font-face {
font-family: robotobold;
src: url(font/robotobold.ttf);
}

#wrap {
margin: 0 auto;
width: 100%;
min-width: 300px;
overflow-x: hidden;
background: white;
font: 17px roboto;
line-height: 1.4;
color: #444;
}

img {
padding: 0;
margin: 0;
border: 0;
max-width: 100%;
height: auto;
}

p {
margin: 0 0 1em 0;
}

a {
color: #46c4ff;
text-decoration: none;
cursor: pointer;
}

#header {
width: 100%;
background: #fff;
}

#header2 {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
}

header {
margin: 0 auto;
width: 100%;
max-width: 1200px;
height: 110px;
position: relative;
z-index: 999;
}

#logo {
position: absolute;
left: 1px;
top: 25px;
width: 250px;
}

#menu {
position: absolute;
left: 300px;
top: 27px;
width: 65%;
z-index: 99;	
}

#phone {
position: absolute;
right: 1px;
top: 30px;
}

#phone a {
font: 16px roboto;
color: #fff;
text-decoration: none;
display: block;
background: #d51d1a;
padding: 15px 25px;
border-radius: 5px;
}

#myphone {
display: none;
text-align: center;
margin: 0 auto;
padding: 20px 0 50px 0;
}

#myphone a {
font: 16px roboto;
color: #fff;
text-decoration: none;
display: inline-block;
background: #d51d1a;
padding: 15px 25px;
border-radius: 5px;
}

.center {
margin: 0 auto;
width: 100%;
max-width: 1200px;
}

#homevideo {
margin: 0 0 0 0;
position: relative;	
}

#homevideo video {
display: block;
object-fit: fill;
width: 100% !important;
height: auto !important;
}

#homevideotitle {
position: absolute;
top: 25%;
left: calc(50% - 600px);
width: 100%;
z-index: 5;	
}

#homevideotitle h1 {
font: 100px/100px robotobold;
color: #fff;
margin: 0 0 10px 0;	
}

#homevideotitle p {
margin: 0 0 20px 0;
font: 16px/20px roboto;
color: #fff;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#homevideotitle a {
font: 30px/30px roboto;
color: #fff;	
display: inline-block;
cursor: pointer;
}

#homenews {
background: #F4F6F8;
padding: 80px 0 80px 0;	
}

#homenews h2 {
font: 40px/35px robotobold;
margin: 0 0 50px 0;
display: inline-block;
padding: 0 0 0 20px;
border-left: 7px solid #d51d1a;
}

#news {
display: grid;
grid-gap: 30px 3.5%;
grid-template-columns: 31% 31% 31%;
}

#homenews #news > div {
background: #fff;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
border-radius: 8px;
overflow: hidden;	
}

#news > div:hover {
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

#news > div div {
padding: 30px 40px 40px 30px;
}

#news a {
text-decoration: none;
color: #333;
}

#news h3 {
font: 25px/25px robotobold;
margin: 0 0 20px 0;	
color: #303030;
}

#news time {
font: 14px roboto;
color: #999;
margin: 0 0 20px 0;
display: block;	
}

#news p {
font: 16px roboto;
margin: 0 0 20px 0;	
}

#news span {
background: #1F214B;
color: #fff;
font: 15px roboto;
padding: 12px 25px;
border-radius: 4px;	
display: inline-block;
}

.links {
margin: 20px 0 20px 0;	
}

.links a {
font: bold 16px roboto;
text-decoration: none;
color: #333;
padding: 15px 25px;
display: inline-block;
background: #fff;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
border-radius: 8px;
}

.links a:hover {
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

.uk-button-default {
font: bold 16px roboto;
text-decoration: none;
color: #333;
padding: 15px 25px;
display: inline-block;
background: #fff;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
}

.uk-button-default:hover {
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

#allnewstitle h1 {
margin: 120px 0 20px 0;
font: 40px/40px robotobold;
padding: 0 0 20px 0;
border-bottom: 3px solid rgba(0,0,0,.1);
}

#allnews {
padding: 30px 0 80px 0;	
}

#allnews h2 {
font: 25px/30px robotobold;
margin: 0 0 50px 0;
}

#newsmenu {
margin: 0 0 40px 0;
overflow: hidden;	
}

#newsmenu ul li {
float: left;
list-style: none;
position: relative;	
margin: 0 20px 0 0;
}

#newsmenu ul li a {
font: 14px robotobold;
padding: 12px 15px;
color: #303030;
text-decoration: none;
display: block;
border-radius: 4px;	
}

#newsmenu .current-menu-item a {
background: #1F214B;
color: #fff !important;
}

#newslist {
display: grid;
grid-gap: 30px 3.5%;
grid-template-columns: 31% 31% 31%;
}

#newslist > div {
background: #fff;
overflow: hidden;	
}

#newslist > div:hover {
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

#newslist > div > div {
padding: 30px 40px 40px 30px;
}

#newslist a {
text-decoration: none;
color: #333;
}

#newslist h3 {
font: 25px/25px robotobold;
margin: 0 0 20px 0;	
color: #303030;
}

.time {
margin: 0 0 20px 0;	
color: #999;
}

#newslist time {
font: 14px roboto;
color: #999;	
margin: 0 20px 0 0;
}

.time a {
font: 14px roboto;
color: #999 !important;
margin: 0 0 0 20px;
}

#newslist p {
font: 16px roboto;
margin: 0 0 20px 0;	
}

#newslist span {
background: #1F214B;
color: #fff;
font: 15px roboto;
padding: 12px 25px;
border-radius: 4px;	
display: inline-block;
}

#title {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#title h1 {
font: 60px/60px robotobold;
color: #fff;
margin: 0 0 0 0;	
}

#title h2 {
margin: 20px 0 0 0;
font: 25px/25px roboto;
color: #fff;	
}

#title p {
margin: 0 0 20px 0;
font: 16px/20px roboto;
color: #fff;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#applicationone {
padding: 50px 0 50px 0;	
}

#applicationone .center {
display: grid;
grid-gap: 30px 5%;
grid-template-columns: 35% 60%;	
}

#applicationcolor {
padding: 50px 0 50px 0;	
}

#applicationcolor .center {
display: grid;
grid-gap: 30px 6%;
grid-template-columns: 47% 47%;	
color: #fff;
font: 15px roboto;
}

#applicationcolor .center div {
padding: 40px 30px;
border-radius: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;	
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

#applicationcolor h3 {
margin: 0 0 20px 0;
font: 21px/30px robotobold;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255,255,255,.2);
}

#applicationcolor a {
color: #fff;
text-decoration: none;	
}

#applicationcolor ul, #applicationcolor ol {
margin: 0 0 0 20px;
}

#applicationcolor ul li, #applicationcolor ol li {
margin: 0 0 10px 0;
}

.blue {
background: #292C64;
}

.red {
background: #E4231F;	
}

#applicationtwo {
padding: 70px 0 70px 0;	
background: #F4F6F8;
}

#applicationtwo .center {
display: grid;
grid-gap: 30px 5%;
grid-template-columns: 30% 65%;	
color: #444;
font: 15px/25px roboto;
}

.round {
background: #fff;
padding: 40px 30px;
border-radius: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;	
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
}

#applicationtwo h2 {
margin: 0 0 20px 0;
font: 25px/30px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#applicationtwo a {
color: red;
text-decoration: none;	
}

#applicationtwo ul, #applicationtwo ol {
margin: 0 0 0 20px;
}

#applicationtwo ul li, #applicationtwo ol li {
margin: 0 0 10px 0;
}

#footercontact {
display: grid;
grid-gap: 0 0;
grid-template-columns: 50% 50%;
}

#footercontact div {
padding: 70px 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;	
}

#footercontact h3 {
font: 25px/25px robotobold;
margin: 0 0 0 0;
text-align: center;	
}

#bluecontact {
background: #292C64;
}

#bluecontact a {
color: #fff;
text-decoration: none;	
}

#graycontact {
background: #F4F6F8;
}

#graycontact a {
color: #333;
text-decoration: none;	
}

#smallimage #title h1 {
font: 60px/60px robotobold;
color: #fff;
margin: 0 0 0 0;	
display: inline-block;
padding: 0 0 0 10px;
border-left: 10px solid #d51d1a;
}

/* demo.php */

#demo {
background: #F4F6F8;
padding: 70px 0 80px 0;	
}

#demo h2 {
background: #1F214B;
color: #fff;
font: 23px robotobold;
padding: 10px 20px;
margin: 0 0 70px 0;
border-radius: 4px;	
display: inline-block;
}

#demo .center > p {
font: 20px robotobold;	
margin: 0 0 80px 0;
}

#demonews {
margin: 50px 0 0 0;
display: grid;
grid-gap: 30px 4%;
grid-template-columns: 48% 48%;
}

#demonews > div {
background: #fff;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
border-radius: 8px;
overflow: hidden;	
}

#demonews > div:hover {
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

#demonews > div {
padding: 40px 40px 40px 40px;
}

#demonews a {
text-decoration: none;
color: #333;
}

#demonews h3 {
margin: 20px 0 20px 0;
font: 25px/30px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#demonews time {
font: 14px roboto;
color: #999;
margin: 0 0 20px 0;
display: block;	
}

#demonews p {
font: 16px roboto;
margin: 0 0 20px 0;	
}

/* end demo.php */


/* single.php */

.singletime {
font: 16px robotobold;
color: #999;
margin: 20px 0 40px 0;
}

.singletime a {
color: #999;
text-decoration: none;
margin: 0 0 0 20px;
}

.singletime time {
color: #999;
margin: 0 20px 0 0;	
}

#singlelinks {
margin: 20px 0 20px 0;	
}

/* end single */


/* allproducts.php */

.bigimage {
position: relative;
}

.title {
position: absolute;
top: 30%;
z-index: 9;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.title h1 {
font: 70px/70px robotobold;
color: #fff;
margin: 0 0 40px 0;	
}

.title p {
margin: 0 0 20px 0;
font: 20px/20px robotobold;
color: #fff;
}

.title a {
font: bold 16px roboto;
text-decoration: none;
color: #333;
padding: 15px 25px;
display: inline-block;
background: #fff;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
border-radius: 4px;
}

#allproductstext {
padding: 80px 0 80px 0;
background: #fff;	
}

#allproductstext h2 {
margin: 0 0 20px 0;
font: 35px/35px robotobold;
padding: 0 0 20px 0;
border-bottom: 3px solid rgba(0,0,0,.1);
}

#allproducts {
background: #F4F6F8;
padding: 80px 0 80px 0;	
}

#allproducts h2 {
margin: 20px 0 40px 0;
font: 30px/30px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#allprod {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 1fr 1fr 1fr;
}

#allprod > div {
padding: 0 40px 0 40px;	
}

#allprod h3 {
font: 25px/25px roboto;
margin: 0 0 30px 0;	
}

#inallprod {
border-left: 1px solid rgba(0,0,0,.05);
border-right: 1px solid rgba(0,0,0,.05);	
}

#allproducts p {
font: 16px/25px roboto;
margin: 0 0 20px 0;	
}

.singleproductsmore2 h4 {
font: 20px/20px roboto;
margin: 0 0 0 0;	
padding: 30px 0 30px 0;
cursor: pointer;
display: grid;
grid-gap: 30px 4%;
grid-template-columns: auto 20px;
}

#allprod > div div {
border-bottom: 1px solid rgba(0,0,0,.1);
}

#allprod > div div:last-child {
border-bottom: none;
}

#allproducts ul {
list-style-type: circle;
margin: 0 0 20px 0;
}

#allproducts ul li {
margin: 0 0 0 20px;
font: 16px/30px roboto;
}

/* end allproducts.php */


/* customers.php */

#customerstitle {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#customerstitle h1 {
font: 50px/50px robotobold;
color: #fff;
margin: 0 0 40px 0;	
display: inline-block;
padding: 0 0 0 20px;
border-left: 10px solid #d51d1a;
}

#customerstitle p {
margin: 0 0 0 0;
font: 20px/20px robotobold;
color: #fff;
}

#customerstitle a {
font: bold 16px roboto;
text-decoration: none;
color: #333;
padding: 15px 25px;
display: inline-block;
background: #fff;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
border-radius: 4px;
}

#customers {
background: #F4F6F8;
padding: 80px 0 80px 0;	
}

#customers .center {
display: grid;
grid-gap: 30px 4%;
grid-template-columns: 22% 22% 22% 22%;
text-align: center;
}

#customers img {
display: block;	
}

.content {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
background: rgba(228,35,31,.8);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image {
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details p {
  color: #fff;
font: 23px/23px robotobold;
margin: 0 0 0 0;
}

.fadeIn-bottom {
  top: 80%;
}

/* end customers.php */


/* singleproduct.php */

#applicationone h2 {
margin: 0 0 30px 0;
font: 28px/28px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#singleproducts {
background: #F4F6F8;
padding: 80px 0 80px 0;	
}

#singleproducts .center {
display: grid;
grid-gap: 30px 4%;
grid-template-columns: 48% 48%;
}

#singleproducts .center > div {
background: #fff;
-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);
border-radius: 8px;
overflow: hidden;
padding: 30px 40px 40px 30px;
}

#singleproducts h3 {
margin: 20px 0 20px 0;
font: 25px/30px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}

#singleproducts p {
font: 16px/25px roboto;
margin: 0 0 20px 0;	
}

.singleprodustsmore h4 {
font: 20px/20px roboto;
margin: 0 0 20px 0;	
cursor: pointer;
display: grid;
grid-gap: 30px 4%;
grid-template-columns: auto 20px;
}

#singleproducts ul {
list-style-type: circle;
margin: 0 0 20px 0;
}

#singleproducts ul li {
margin: 0 0 0 20px;
font: 16px/30px roboto;
}

/* end singleproduct.php */


/* testimonials.php */

#testimonials {
padding: 70px 0 70px 0;	
background: #F4F6F8;
font: 16px/25px roboto;
text-align: center;
}

#testimonials h2 {
margin: 20px 0 20px 0;
font: 25px/30px robotobold;
}

.blue {
background: #292C64;
color: #f5f5f5;
}

.red {
background: #E4231F;
color: #f5f5f5;	
}

.white {
background: #fff;
color: #333;	
}

.twocolumn {
display: grid;
grid-gap: 30px 4%;
grid-template-columns: 48% 48%;
margin: 0 0 50px 0;
}

.threecolumn {
display: grid;
grid-gap: 30px 3.5%;
grid-template-columns: 31% 31% 31%;
margin: 0 0 50px 0;
}

.twocolumn div, .threecolumn div {
padding: 40px 30px;
border-radius: 10px;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;	
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
}

/* end testimonials.php */

/* about.php */

#slogan {
min-height: 100vh;	
display: flex;
align-items: center;
}

#slogan div {
width: 100%;
display: block;
text-align: center;	
}

#slogan h1 {
font: 100px/100px robotobold;
margin: 0 0 20px 0;
color: #fff;
}

#slogan p {
font: 25px/30px roboto;
margin: 0 0 0 0;
color: rgba(255,255,255,.8);
}

#abouttext {
display: grid;
grid-gap: 70px 2%;
grid-template-columns: 44% 54%;
color: #fff;
}

#abouttext h2 {
font: 30px/30px robotobold;
margin: 0 0 20px 0;
}

#abouttext p {
font: 16px/25px roboto;
color: rgba(255,255,255,.8);
}

#abouttext2 {
padding: 70px 0 70px 0;	
background: #F4F6F8;
}

#abouttext2 .center {
display: grid;
grid-gap: 70px 2%;
grid-template-columns: 44% 54%;
color: #333;
}

#abouttext2 h2 {
font: 35px/30px robotobold;
margin: 0 0 20px 0;
}

#abouttext2 p {
font: 16px/25px roboto;
color: #444;
}

#abouttext2 ul {
margin: 0 0 20px 0;
}

#abouttext2 ul li {
margin: 0 0 0 20px;
font: 16px/30px roboto;
color: #444;
}

/* end about.php */

/* serice.php */

#servicevideo {
margin: 0 0 0 0;
position: relative;	
}

#servicevideo video {
display: block;
object-fit: fill;
width: 100% !important;
height: auto !important;
}

#servicevideotitle {
position: absolute;
top: 60%;
left: calc(50% - 600px);
width: 100%;
z-index: 5;	
}

#servicevideotitle h1 {
font: 70px/70px robotobold;
color: #fff;
margin: 0 0 10px 0;	
}

#bluetext {
background: #F4F6F8;
padding: 80px 0 80px 0;	
color: #444;
}

#bluetext h2 {
font: 30px/30px robotobold;
margin: 0 0 20px 0;
display: inline-block;
padding: 0 0 0 20px;
border-left: 7px solid #d51d1a;
}

#bluetext .center {
display: grid;
grid-gap: 30px 5%;
grid-template-columns: 75% 20%;
}

#ourmission {
padding: 80px 0 80px 0;
color: #444;
text-align: center;	
}

#ourmission h2 {
position: relative;
text-align: center;
margin: 0 0 50px 0;
font: 60px/30px robotobold;
color: #292c64;
}

#ourmission h2 span {
background: #fff;
padding: 0 15px;
position: relative;
z-index: 1;
}

#ourmission h2:before {
background: rgb(238,238,238);
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 100%;
left: 0;
}

#ourteam {
background: #F4F6F8;
padding: 80px 0 80px 0;
color: #444;
text-align: center;	
}

#ourteam h2 {
position: relative;
text-align: center;
margin: 0 0 120px 0;
font: 60px/30px robotobold;
color: #292c64;
}

#ourteam h2 span {
background: #F4F6F8;
padding: 0 15px;
position: relative;
z-index: 1;
}

#ourteam h2:before {
background: rgb(238,238,238);
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 100%;
left: 0;
}

#inourteam {
display: grid;
grid-gap: 30px 5%;
grid-template-columns: 30% 30% 30%;
}

/* end service.php */


#section {
margin: 0 auto;
width: 100%;
max-width: 1200px;
}

#section h1 {
margin: 50px 0 20px 0;
font: 50px/50px robotobold;
}

h2 {
margin: 20px 0 20px 0;
font: 35px/35px robotobold;
}

h3 {
margin: 20px 0 20px 0;
font: 30px/30px robotobold;
}

#myfooter {
width: 100%;
margin: 50px 0 0 0;
padding: 150px 0 0 0;
background: #fff;
}

#myfooter p {
font: 16px roboto;
color: #333;
}

#myfooter a {
font: 16px roboto;
color: #999;
text-decoration: none;
}

#myfooter a:hover {
color: #333;	
}

footer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 100px 0;
display: grid;
grid-gap: 10px 2%;
grid-template-columns: 400px auto auto 250px;
}

footer ul li {
list-style: none;
}

footer a {
font: 16px roboto;
text-decoration: none;
display: block;
margin: 0 0 15px 0;
}

footer h3 {
font: 25px robotobold;
text-align: left;	
}

#social a {
display: inline-block;
margin: 0 10px 0 0;	
}

#rights .center {
padding: 70px 0 50px 0;	
border-top: 1px solid #ccc;	
display: grid;
grid-gap: 10px 2%;
grid-template-columns: 200px 450px 1fr;
}

#rights p {
font: 14px roboto;
color: #999;
text-align: right;	
}

#copy {
padding: 5px 0 25px 0;
text-align: center;
}

#copy p {
font: 14px roboto;
margin: 0 0 0 0;
padding: 20px 0 0 0;
}

#copy a {
font: 14px roboto;
text-decoration: none;
}

#gallery {
display: grid;
grid-gap: 30px 2%;
grid-template-columns: 32% 32% 32%;
text-align: center;
}

#catalog {
display: grid;
grid-gap: 30px 2%;
grid-template-columns: 32% 32% 32%;
text-align: center;
}

#catalog img {
display: block;	
}

#catalog p {
font: 16px/16px roboto;
color: #333;
margin: 0 0 0 0;
}

#catalog a {
text-decoration: none;
}

table {
border-collapse: collapse;
width: 100%;
}

td, tr {
border: 1px solid #333;
padding: 3px;
}

img.alignright {
float: right;
margin: 0 10px 3px 5px;
}

img.alignleft {
float: left;
margin: 0 10px 3px 0;
}

img.aligncenter {
display: block;
margin: 0 auto;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

.aligncenter {
display: block;
margin: 0 auto;
}

.error {
color: red;
}

.clear {
width: 100%;
height: 1px;
clear: both;
}

.myvideo {
position: relative;
padding: 30px 0 56.25% 0;
height: 0;
overflow: hidden;
border: 1px solid #ccc;
}

.myvideo iframe,.myvideo object,.myvideo embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

article ul, article ol {
margin: 0 0 0 20px;
}

article ul li, article ol li {
margin: 0 0 10px 0;
}

.closebtn, #hamburger, #menucontact {
display: none;
}

#mymenu {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

#mymenu ul li {
float: left;
list-style: none;
position: relative;	
}

#mymenu ul li a {
font: 16px roboto;
padding: 15px 15px 85px 15px;
color: #303030;
text-decoration: none;
display: block;	
}

#mymenu ul > li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}

#mymenu > ul > li > a:hover::after {
width: 100%;
transition: width .3s;
}

#mymenu ul li ul {
display: none;	
width: 40vw;
}

#mymenu > ul > li:hover > ul {
position: absolute;
top: 90px;
display: block;
z-index: 9;
transition: width .3s;
}

#shadow {
background: rgba(41, 44, 100, 0.85);
width: 100%;
position: absolute;
top: 110px;
left: 0;
z-index: 9;
display: none;
}

.myspan {
position: relative;
}

.myspan span {
cursor: pointer;
display: none;
color: red;
}

#mymenu ul li span {
position: absolute;
top: 15px;
right: 5px;
}

#mymenu ul li ul li a {
font: 14px roboto;
padding: 10px 20px;
color: #fff;
text-decoration: none;
display: inline-block;
width: 120px;
}

#header2 #mymenu ul li a {
color: #fff;
}

#header2 #mymenu ul > li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #fff;
transition: width .3s;
}

#header2 #mymenu > ul > li > a:hover::after {
width: 100%;
transition: width .3s;
}

/* Preload images */
body:after {
  content: url('img/close.png') url('img/loading.gif') url('img/prev.png') url('img/next.png');
  display: none;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url('img/loading.gif') no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url('img/prev.png') left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url('img/next.png') right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url('img/close.png') top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

button {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}

.slide-arrow {
position: absolute;
top: 50%;
margin-top: -15px;
z-index: 99999;  
}

.prev-arrow {
left: 20px;
width: 0;
height: 0;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 8px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

.next-arrow {
right: 20px;
width: 0;
height: 0;
border: solid #fff;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 8px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.slick-list {
padding: 0 0 0 0 !important;
}

@media only screen and (max-width:1200px){
article, .center {
width: 96%;
padding: 0 2% 0 2%;	
}
}

@media only screen and (max-width:1000px){
#header2 {
position: relative;
background: #fff;	
}
#header2 #mymenu ul li a {
color: #444;
}
#header2 #mymenu ul > li a::after {
content: '';
display: block;
width: 0;
height: 0;
background: #000;
transition: width .3s;
}
#header2 #mymenu > ul > li > a:hover::after {
width: 100%;
transition: width .3s;
}
#hamburger {
position: absolute;
top: 35px;
right: 1px;
display: inline-block;
cursor: pointer;	
}
#phone {
display: none;	
}
#menu {
background: rgba(255, 255, 255, 1);
margin: 0 0 0 0;
height: 100%;
width: 0;
max-width: 800px;
position: fixed;
z-index: 9999999;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.2s;
padding: 30px 0 70px 0;;
}
#menu .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
padding: 0 10px 0 10px;
line-height: 1;
color: rgba(0, 153, 255, 0.9);
background: #F6000E;
color: #fff;
text-decoration: none;
display: block;
}
#menu {
border-top: none;
}
#menucontact, #myphone {
display: block;	
}
#mymenu ul li {
float: none;
display: block;
list-style: none;
position: relative;	
text-align: center;
}
#mymenu ul li a {
font: 18px roboto;
padding: 10px 0 10px 0;
color: #444;
text-decoration: none;
display: block;	
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#mymenu ul li ul {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
#mymenu ul li ul li a {
font: 15px robotobold;
padding: 2px 0 5px 0;
color: #999;
text-decoration: none;
display: block;
width: 100%;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#mymenu ul > li a::after {
content: '';
display: block;
width: 0;
height: 0;
background: #000;
transition: width .3s;
}
#mymenu > ul > li > a:hover::after {
width: 100%;
transition: width .3s;
}
#mymenu > ul > li:hover > ul {
position: relative;
top: 0;
display: block;
z-index: 9;
}
}

@media only screen and (max-width:1000px){
#homevideotitle, .title {
position: absolute;
top: 25%;
left: 10px;
width: 100%;
z-index: 5;	
}
#homevideotitle h1, .title h1 {
font: 30px/30px robotobold;
color: #fff;
margin: 0 0 10px 0;	
}
#homevideotitle p, .title p {
margin: 0 0 20px 0;
font: 16px/20px roboto;
color: #fff;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}
#homevideotitle a {
font: 20px/20px roboto;
color: #fff;	
display: inline-block;
cursor: pointer;
}
.title a {
font: bold 14px roboto;
padding: 10px 15px;
margin: 10px 0 0 0;
}
#homenews {
padding: 30px 0 30px 0;	
}
#homenews h2 {
font: 30px/25px robotobold;
margin: 0 0 30px 0;
display: inline-block;
padding: 0 0 0 20px;
border-left: 5px solid #d51d1a;
}
#news {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
#allnewstitle h1 {
margin: 70px 0 20px 0;
font: 30px/30px robotobold;
padding: 0 0 15px 0;
border-bottom: 3px solid rgba(0,0,0,.1);
}
#allnews {
padding: 10px 0 30px 0;	
}
#allnews h2 {
font: 18px/20px robotobold;
margin: 0 0 30px 0;
}
#newsmenu {
margin: 0 0 40px 0;
overflow: hidden;	
}
#newsmenu ul li {
float: left;
list-style: none;
position: relative;	
margin: 0 10px 0 0;
}
#newsmenu ul li a {
font: 14px robotobold;
padding: 12px 15px;
color: #303030;
text-decoration: none;
display: block;
border-radius: 4px;	
}
#newslist {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
#myfooter {
width: 100%;
margin: 50px 0 0 0;
padding: 50px 0 0 0;
background: #fff;
}
footer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 30px 0;
display: grid;
grid-gap: 10px 2%;
grid-template-columns: 400px auto auto 250px;
}
footer h3 {
font: 20px robotobold;
text-align: left;	
}
#rights .center {
padding: 20px 0 20px 0;	
border-top: 1px solid #ccc;	
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
#rights p {
text-align: center;	
}
#title h1 {
font: 30px/30px robotobold;
color: #fff;
margin: 0 0 0 0;	
}
#title h2 {
margin: 10px 0 0 0;
font: 20px/20px roboto;
color: #fff;	
}
#smallimage #title h1 {
font: 30px/30px robotobold;
color: #fff;
margin: 0 0 0 0;	
}
#title p {
margin: 0 0 20px 0;
font: 16px/20px roboto;
color: #fff;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}
#applicationone {
padding: 30px 0 30px 0;	
}
#applicationone .center {
display: grid;
grid-gap: 30px 5%;
grid-template-columns: 100%;	
}
#applicationcolor {
padding: 50px 0 50px 0;	
}
#applicationcolor .center {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;	
color: #fff;
font: 15px roboto;
}
#applicationcolor h3 {
margin: 0 0 20px 0;
font: 21px/30px robotobold;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(255,255,255,.2);
}
#applicationtwo {
padding: 30px 0 30px 0;	
background: #F4F6F8;
}
#applicationtwo .center {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;	
color: #444;
font: 15px/25px roboto;
}
#applicationtwo h2 {
margin: 0 0 20px 0;
font: 25px/30px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}
#footercontact div {
padding: 30px 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;	
}
#footercontact h3 {
font: 18px/25px robotobold;
margin: 0 0 0 0;
text-align: center;	
}
#demo {
background: #F4F6F8;
padding: 40px 0 30px 0;	
}
#demo h2 {
background: #1F214B;
color: #fff;
font: 20px robotobold;
padding: 10px 20px;
margin: 0 0 30px 0;
border-radius: 4px;	
display: inline-block;
}
#demo .center > p {
font: 18px robotobold;	
margin: 0 0 30px 0;
}
#demonews {
margin: 20px 0 0 0;
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
#customerstitle h1 {
font: 30px/30px robotobold;
color: #fff;
margin: 0 0 10px 0;	
display: inline-block;
padding: 0 0 0 20px;
border-left: 10px solid #d51d1a;
}
#customerstitle p {
margin: 0 0 0 0;
font: 16px/20px robotobold;
color: #fff;
}
#customers .center {
display: grid;
grid-gap: 30px 4%;
grid-template-columns: 32% 32% 32%;
text-align: center;
}
#applicationone h2 {
margin: 0 0 20px 0;
font: 20px/20px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 5px solid #d51d1a;
}
#singleproducts {
background: #F4F6F8;
padding: 30px 0 30px 0;	
}
#singleproducts .center {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
#allproductstext {
padding: 50px 0 30px 0;	
}
#allproductstext h2 {
margin: 0 0 20px 0;
font: 25px/25px robotobold;
padding: 0 0 10px 0;
border-bottom: 1px solid rgba(0,0,0,.1);
}
#allproducts {
padding: 30px 0 30px 0;	
}
#allproducts h2 {
margin: 20px 0 40px 0;
font: 20px/30px robotobold;
color: #333;
display: inline-block;
padding: 0 0 0 10px;
border-left: 2px solid #d51d1a;
}
#allprod {
display: grid;
grid-gap: 0 0;
grid-template-columns: 100%;
}
#allprod > div {
padding: 0 10px 0 10px;	
}
#allprod h3 {
font: 20px/25px roboto;
margin: 0 0 30px 0;	
}
#inallprod {
border-left: none;
border-right: none;	
}
.singleproductsmore2 h4 {
font: 18px/20px roboto;
margin: 0 0 0 0;	
padding: 30px 0 30px 0;
cursor: pointer;
display: grid;
grid-gap: 30px 4%;
grid-template-columns: auto 20px;
}
#allprod > div div {
border-bottom: 1px solid rgba(0,0,0,.1);
}
#allprod > div div:last-child {
border-bottom: 1px solid rgba(0,0,0,.1);
}
#testimonials {
padding: 30px 0 30px 0;
}
#testimonials h2 {
margin: 10px 0 20px 0;
font: 20px/30px robotobold;
}
.twocolumn {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
margin: 0 0 30px 0;
}
.threecolumn {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
margin: 0 0 30px 0;
}
.twocolumn div, .threecolumn div {
padding: 20px 20px;
border-radius: 10px;
}
#slogan h1 {
font: 30px/30px robotobold;
margin: 0 0 10px 0;
color: #fff;
}
#slogan p {
font: 16px/30px roboto;
margin: 0 0 0 0;
color: rgba(255,255,255,.8);
}
#abouttext {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
color: #fff;
}
#abouttext h2 {
font: 20px/30px robotobold;
margin: 0 0 10px 0;
}
#abouttext p {
font: 16px/25px roboto;
color: rgba(255,255,255,.8);
}
#abouttext2 {
padding: 30px 0 30px 0;	
}
#abouttext2 .center {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
color: #333;
}
#abouttext2 h2 {
font: 25px/30px robotobold;
margin: 0 0 20px 0;
}
#servicevideo {
margin: 0 0 0 0;
position: relative;	
}
#servicevideo video {
display: block;
object-fit: fill;
width: 100% !important;
height: auto !important;
}
#servicevideotitle {
position: absolute;
top: 35%;
left: 10px;
width: 100%;
z-index: 5;	
}
#servicevideotitle h1 {
font: 30px/30px robotobold;
color: #fff;
margin: 0 0 10px 0;	
}
#bluetext {
background: #F4F6F8;
padding: 30px 0 30px 0;	
color: #444;
}
#bluetext h2 {
font: 20px/20px robotobold;
margin: 0 0 20px 0;
display: inline-block;
padding: 0 0 0 20px;
border-left: 7px solid #d51d1a;
}

#bluetext .center {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
#ourmission {
padding: 30px 0 30px 0;
color: #444;
text-align: center;	
}
#ourmission h2 {
position: relative;
text-align: center;
margin: 0 0 20px 0;
font: 30px/30px robotobold;
color: #292c64;
}
#ourmission h2 span {
background: #fff;
padding: 0 15px;
position: relative;
z-index: 1;
}
#ourmission h2:before {
background: rgb(238,238,238);
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 100%;
left: 0;
}
#ourteam {
background: #F4F6F8;
padding: 30px 0 30px 0;
color: #444;
text-align: center;	
}
#ourteam h2 {
position: relative;
text-align: center;
margin: 0 0 50px 0;
font: 30px/30px robotobold;
color: #292c64;
}
#ourteam h2 span {
background: #F4F6F8;
padding: 0 15px;
position: relative;
z-index: 1;
}
#ourteam h2:before {
background: rgb(238,238,238);
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 100%;
left: 0;
}
#inourteam {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
}
}

@media only screen and (max-width:800px){
#customers .center {
display: grid;
grid-gap: 30px 4%;
grid-template-columns: 48% 48%;
text-align: center;
}
footer {
display: grid;
grid-gap: 10px 2%;
grid-template-columns: 49% 49%;
width: 98%;
margin: 0 auto;
}
#gallery {
display: grid;
grid-gap: 30px 0;
grid-template-columns: 100%;
text-align: center;
}
}