html{font-size: 1.035rem;font-size: calc(.775rem - -.25 *(100vw - 30rem) / 100);margin: 0;padding:0;height: 100%}
body {margin: 0;padding:0;font-family: Arial, Helvetica, sans-serif;border:none;height: 100%}
td[Attributes Style] {vertical-align: top;text-align: -webkit-left;} td, th {display: table-cell;vertical-align: inherit;} tbody {display: table-row-group;vertical-align: middle;border-color: inherit;}
img{width: 100%;display: inline-block;}
.patosys-webpage{display: inline-block;width: 100%;height: 100%;background-color: #fff;}
.sticky-header {position: fixed !important;top: 0;width: 100%;z-index: 10;background-color: rgba(0,0,0,0.8) !important;}
.sticky-header + .intro {margin-top: 4.1rem;}
.vtabox {display: flex !important;justify-content: center;}
.vtadiv {align-self: center;margin: 0 auto;}


.top-menu-bar{background-color: #1c1c1c;padding: 0.5rem 1rem;z-index: 10;height: 3rem;position: relative;}
.top-menu-bar .logo{display: inline-block;width: 10rem;float: left;}
.top-menu-bar .menu{display: inline-block;color: #b9b9b9;text-align: right;width: 87%;position: fixed;right: 2rem;}
.top-menu-bar .menu a{display: inline-block;cursor: pointer;transition: all 0.3s ease 0s;text-decoration: none;}
.top-menu-bar .menu a .label,.dropmenu .label{padding:1rem;}
.top-menu-bar .menu a:hover,.dropmenu:hover{background-color: #2196F3;color: #ffffff;cursor: pointer;}
.top-menu-bar .menu .selected{color: #ffffff;border-bottom: 5px solid #e98525;padding-bottom: 1.1rem;}
.dropmenu{ position: relative; z-index: 11;display: inline-block;}
.dropmenu .dropmenu-box{ position: absolute; z-index: 11; background: #0c2d48; top: 3rem; width: 11rem; left: 0; text-align: left; border-radius: 0 0 10px 10px; box-shadow: 0 2px 12px -6px #000; overflow: hidden;}
.dropmenu .dropmenu-box a{cursor: pointer;padding: 1rem;color: #fff; border-bottom: 1px solid #17476d; display: inline-block; width: 100%; box-sizing: border-box; cursor: pointer; }
.dropmenu .dropmenu-box a:hover{background-color: #2196F3;color: #ffffff;}
.dropmenu:hover .dropmenu-box{display:block !important;}
.menu-icon{display: none;}
.menu-2{display: none;}
.menu-2 a {color: #000;text-decoration: none;}

.patosys-webpage .sections{width: 100%;text-align: center;position: relative;display: inline-block;}

.intro{background-color: #2284de;}
.intro .left-panel{text-align: left;color: #ffffff;margin-top: 10rem;width: 80rem;position: absolute;left: 10%;z-index: 4;}
.intro .left-panel div:nth-child(2){color: #093e6e}
.intro .left-panel div:nth-child(3){margin-top: 0.5rem;}
.intro .right-panel{width: 50%;text-align: right;display: inline-block;z-index: 2;position: relative;top: 11rem;left: 11rem;padding-bottom: 7rem;}
.intro .light-bg{position: absolute;right: 0;bottom: 0;z-index: 1;width: 100%;height: 90%;}
.doted-bg{position: absolute;z-index: 6;left: 0;bottom: 0;width: 48%;right: -170px;margin: 0 auto;margin-bottom: 8rem;}


.Solution {padding-bottom: 10rem;}
.Solution .left-panel{text-align: left;color: #000000;margin-top: 10rem;width: 25rem;position: absolute;left: 10%;z-index: 4;}
.Solution .left-panel div:nth-child(2){color: #2284de}
.Solution .left-panel div:nth-child(3){margin-top: 0.5rem;font-size: 4rem;font-weight: 600;margin-left: 1rem;}
.Solution .right-panel{width: 40%;text-align: right;display: inline-block;z-index: 2;position: relative;top: 11rem;left: 11rem;padding-bottom: 7rem;text-align: left;}
.Solution .right-panel .list{ display: inline-block; width: 100%; text-align: left; padding: 2rem;cursor: pointer;transition: all 0.3s ease 0s;}
.Solution .right-panel .list .info{ display: inline-block; text-align: left; width: 80%; vertical-align: top; }
.Solution .right-panel .list .info div{ font-size: 1.3rem;color:#000000;}
.Solution .right-panel .list .info div:nth-child(2){ font-size: 1rem; color: #717171; margin-top: 0.5rem; width: 70%; line-height: 1.3rem; }
.Solution .right-panel .list .icon{ display: inline-block; width: 10%;float: right;}
.Solution .right-panel .list:hover{background-color: #e7f3ff !important;}

.maintenance {background-color: #e9e9e9;padding-bottom: 5rem;}
.maintenance .left-panel{text-align: left;color: #000000;margin-top: 10rem;width: 25rem;position: absolute;left: 10%;z-index: 4;}
.maintenance .left-panel div:nth-child(3){font-size: 4rem;font-weight: 600;line-height: 2rem;color: #f6781b}
.maintenance .right-panel{width: 41%;text-align: right;display: inline-block;z-index: 4;position: relative;top: -5rem;left: 13rem;text-align: left;}
.maintenace-listbox{ display: inline-block; width: 100%; padding: 1rem; }
.maintenace-listbox .list{display: inline-block;width: 28%;}
.maintenace-listbox .list img{ width: 12%; display: inline-block; }
.maintenace-listbox .list .info{display: inline-block;width: 75%;vertical-align: top;text-align: left;margin-top: 0.5rem;border-right: 1px solid #d4d4d4;}
.maintenace-listbox .list .info div:nth-child(1){font-size: 1.3rem;}
.maintenace-listbox .list .info div:nth-child(2){font-size: 1rem;color: #717171;margin-top: 0.5rem;width: 70%;line-height: 1.3rem;}
.maintenace-listbox .list .info div:nth-child(3) {margin: 1rem 0;background: #f6771b;}


.platosysinfo{background-color: #f6781b;text-align: left !important;}
.platosysinfo .info{font-size: 2rem;width: 32%;display: inline-block;color: #ffffff;padding: 6rem 3rem 0;margin-left: 6rem;}
.platosysinfo .contact{font-size: 1.5rem;width: 100%;display: inline-block;color: #ffffff;padding: 3rem 3rem 6rem;margin-left: 6rem;}
.platosysinfo .contact span{display: inline-block;margin-right: 2rem;}

.others {padding-bottom: 0;}
.others .left-panel{text-align: left;color: #000000;width: 32%;z-index: 4;margin-top: 9rem;}
.others .left-panel div:nth-child(2){color: #40a2fc;}
.others .subtext{display: inline-block;width: 100%;margin-top: 1rem;line-height: 1.5rem;}
.others .right-panel{display: inline-block;font-size: 1.3rem;color: #fff;text-align: left;width: 39%;vertical-align: top;float: right;background: #40a2fc;padding: 5rem;}
.others .right-panel a{color:#ffffff;}
.others .right-panel span{display: inline-block;width: 100%;padding: 2rem 1rem;border-bottom: 1px solid #6eb7fb;transition: all 0.5s ease 0s;}
.others .right-panel span:hover{background-color: #62b3ff;cursor: pointer;}

.bottom-bar{ background: #000; padding: 1rem;text-align: center; height: 1rem; width: 100%; }
.bottom-bar span{ color: #7b7b7b; font-size: 0.8rem; display: inline-block; }

.page-titles{display: inline-block;}
.page-titles .type-1{display: inline-block;font-size: 4rem;line-height: 0rem;}
.page-titles .type-2{display: inline-block;font-size: 4rem;font-weight: 600;line-height: 5rem;}
.page-titles .type-3{display: inline-block;font-size: 1.5rem;margin-top: 0.5rem;line-height: 1rem;}
.page-titles .full-text{width: 100%}


.line-patch-1{position: absolute;width: 17%;bottom: -26%;left: -19%;z-index: 4;right: 0;margin: 0 auto;}
.line-patch-2{position: absolute;width: 22%;bottom: -39%;left: -27%;z-index: 4;right: 0;margin: 0 auto;}
.line-patch-3{position: absolute;width: 29%;bottom: -29%;right: 8%;z-index: 3;left: auto;margin: 0 auto;}
.learn-more-1{display: inline-block;background: #2283de;color: #fff;padding: 0.5rem;border-radius: 2px;margin: 2rem;cursor: pointer;}
.learn-more-1 a{color: #fff;text-decoration: none;}

.about-img{display: inline-block;width: 43%;margin-top: 5rem;}
.about-content{display: inline-block;width: 39%;vertical-align: top;float: right;text-align: left;background: #e98525;color: #fff;padding: 5rem;}
.about-content .title{ font-size: 2rem; line-height: 2.5rem; margin-bottom: 2rem; margin-top: 3rem; }
.about-content .cont{ font-size: 1.3rem; line-height: 2rem; margin-bottom: 1rem; }

/*-----Products--------*/
.product-gallery{height: auto;background: #f2f0eb;padding: 2rem 2rem 10rem 2rem;box-sizing: border-box;}
.product-gallery .page-title{font-size: 2rem;margin: 1rem;border-bottom: 1px solid #d6d6d6;padding-bottom: 2rem;display: inline-block;width: 90%;text-align: left;}
.product-gallery .page-title .label{display: inline-block;width: 100%;}
.product-gallery .page-title .notes{font-size: 1rem;color: #7d7d7d;margin-top: 1rem;width: 60%;}
.product-gallery .products{cursor: pointer;display: inline-block;width: 10%;border-radius: 2px;margin: 0.5rem;transition: all 0.2s ease 0s;overflow: hidden;height: 13.5rem;}
.product-gallery .products:hover{transform:scale(1.05);}
.product-gallery .products .icon{width: 60%;display: inline-block;padding: 1.5rem 0;}
.product-gallery .products .title{text-transform: uppercase;font-size: 1rem;display: inline-block;width: 100%;color: #000;background: #ffffff;padding: 2rem 1rem;box-sizing: border-box;text-align: center;margin-bottom: -5px;}
.product-gallery .products .info{display: none !important;color: #000;font-size: 1rem;line-height: 1.7rem;background: #ffffff;padding: 0 3rem 2rem;text-align: left;}
.product-infopopup{align-self: center;margin: 0 auto;overflow: hidden;background: #fff none repeat scroll 0 0;border-radius: 3px;box-shadow: -2px 2px 21px -15px rgb(0, 0, 0);color: #000;text-align: center;width: 40%;position: relative;}
/*-----Products--------*/

/*-----Commonpages--------*/
.commonpages {display: inline-block;width: 100%;}
.commonpages .page-content{display: inline-block;width: 84%;text-align: left;padding: 2rem;box-sizing: border-box;}
.commonpages .page-content{display: inline-block;width: 90%;text-align: left;padding: 2rem;box-sizing: border-box;}
.commonpages .page-content .title-bar{display: inline-block;width: 100%;text-align: left;margin: 2rem 0;}
.commonpages .page-content .title-bar .title{font-size: 2rem;margin: 0.5rem 0;display: inline-block;border-right: 1px solid #d2d2d2;padding-right: 1.5rem;}
.commonpages .page-content .title-bar .sub-title{color: #969696;margin-top: 1rem;}
.commonpages .page-content .content-box{display: inline-block;width: 100%;margin: 2rem 0;}
.commonpages .page-content .content-box .content{font-size: 1.2rem;line-height: 1.8rem;display: inline-block;width: 85%;margin-bottom: 2rem;margin-left: 6rem;box-sizing: border-box;padding-bottom: 2rem;}
.commonpages .page-content .content-box .content-withimg{font-size: 1.2rem;line-height: 1.8rem;display: inline-block;width: 90%;margin-bottom: 2rem;margin-left: 6rem;box-sizing: border-box;padding-bottom: 2rem;}
.commonpages .page-content .content-box .content-withimg .text{font-size: 1.2rem;display: inline-block;vertical-align: top;width: 55%;}
.commonpages .page-content .content-box .content-withimg .image{display: inline-block;width: 37%;}
.commonpages .page-content .content-box .content-titles{display: inline-block;width: 60%;vertical-align: top;font-size: 1.3rem;font-weight: 600;margin-top: 2rem;margin-bottom: 2rem;margin-left: 6rem;}
.content-parts{display: inline-block;width: 100%;margin-bottom:1rem;}
.content-group{display: inline-block;width: 48%;vertical-align: top;}
.content-group .content-titles {padding: 1rem 0;color: #0469a9;width: 80% !important;border-radius: 2px;border-bottom: 2px solid #dedede;}
.sub-page-lines {display: inline-block;vertical-align: top;margin-top: 1.1rem;}
.sub-page-lines span {cursor: pointer;display: inline-block;vertical-align: top;padding: 0 1rem;font-size: 1rem;color: #2196F3;/* border-right: 1px solid #e0e0e0; */}
.sub-page-lines a {color: #2196F3;text-decoration: none;font-size: 1.2rem;}
.img-type1{position: absolute; width: 26% !important; right: 9%; top: 3rem;}
.img-type2{position: absolute; width: 32% !important; right: 7%; top: 3rem;}
.content-box-type2{color: #fff;padding: 6rem !important;width: 100% !important;box-sizing: border-box;margin-left: 0 !important;justify-content: left !important;border-radius: 15px;}
.content-box-type2 .text {width: 55% !important;box-sizing: border-box;margin: inherit;}

.point-content{display: inline-block;width: 100%;margin-top: 2rem;}
.point-content .point{position: relative;display: inline-block;width: 100%;padding-left: 2rem;margin-bottom: 1rem;}
.point-content .point:before{position: absolute; width: 10px; height: 10px; background: #e98525; content: ""; left: 0; top: 7px; border-radius: 50px;}
.point-content .point-titles{font-weight: 600;}
.content-withimg .point-content,.content-withimg .content-parts{width: 50%}
/*-----Commonpages--------*/

.contact-titlespace{display: inline-block;width: 100%;background-image: url(images/contact.jpg);height: 20rem;background-size: cover;}
.contact-titlespace span{float: left;color: #fff;font-size: 2rem;margin: 7rem;}
.addresbox{display: inline-block;width: 86%;background: #fff;margin-top: -4rem;box-shadow: 0 -3px 23px -11px #000;border-radius: 10px;padding: 5rem 0;}
.addresbox .address{display: inline-block;vertical-align: top;text-align: left;font-size: 1.2rem;width: 40%;}
.addresbox .address > span{display: inline-block;width: 100%;margin: 0.2rem 0;}
.addresbox .address .contact-details{display: inline-block;width: 100%;margin-top: 1rem;}
.addresbox .address .contact-details span{display: inline-block;width: 4%;vertical-align: top;margin-top: -2px;margin-right: 10px;}
.addresbox .map{display: inline-block;width: 500px;border: 5px solid #fff;overflow: hidden;border-radius: 14px;}

.space-left {margin-left: 3rem;}.space-right {margin-right: 3rem;}
.align-right {float: right;}.align-left {float: left;}
.popboxscreen{z-index: 6000;background-color: rgba(42, 49, 61, 0.9); display: flex; position: absolute;width: 100%;height: 100%;top: 0;-webkit-animation-name: example; -webkit-animation-duration: 0.3s; animation-name: example;animation-duration: 0.3s;animation-fill-mode: forwards;opacity: 0;}
.bdr0{border:none !important;}
a{color: #b9b9b9;}
.text-highlight-yellow {color: #e98525;margin-right: 0.5rem;display: inline-block;width: 100%;}
.text-highlight-white {color: #ffffff;margin-right: 0.5rem;display: inline-block;}
.ml0{margin-left: 0 !important;}.mr0{margin-right: 0 !important;}.mt0{margin-top: 0 !important;}.mb0{margin-bottom: 0 !important;}
.ml1{margin-left: 1rem !important;}.mr1{margin-right: 1rem !important;}.mt1{margin-top: 1rem !important;}.mb1{margin-bottom: 1rem !important;}
.pl0{padding-left: 0 !important;}.pr0{padding-right: 0 !important;}.pt0{padding-top: 0 !important;}.pb0{padding-bottom: 0 !important;}
.w100per{width: 100% !important;}.w50per{width: 50% !important;}
.border-line{border: 1px solid #e4e4e4;display: inline-block;width: 85%;margin: 4rem 0;}
/*opacity change animation*/
.opt-anim{-webkit-animation-name: example4; /* Safari 4.0 - 8.0 */-webkit-animation-duration: 0.4s; /* Safari 4.0 - 8.0 */animation-name: example4;animation-duration: 0.4s; -webkit-backface-visibility: hidden;backface-visibility: hidden;animation-timing-function:linear;-webkit-animation-timing-function:linear;}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example4 {0% {opacity: 0;}100% {opacity: 1;}}
/* Standard syntax */
	@keyframes example4 {0% {opacity: 0;}100%{opacity: 1;}}
/*opacity change animation*/

/*opacity change animation*/
	.opt-anim-slow{-webkit-animation-name: example5; /* Safari 4.0 - 8.0 */-webkit-animation-duration: 0.7s; /* Safari 4.0 - 8.0 */animation-name: example5;animation-duration: 0.7s; -webkit-backface-visibility: hidden;backface-visibility: hidden;animation-timing-function:linear;-webkit-animation-timing-function:linear;}
	/* Safari 4.0 - 8.0 */
	@-webkit-keyframes example5 {0% {opacity: 0;}100% {opacity: 1;}}
	/* Standard syntax */
	@keyframes example5 {0% {opacity: 0;}100%{opacity: 1;}}
/*opacity change animation*/
.move-anim {
	-webkit-animation: move 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
	        animation: move 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
@-webkit-keyframes move {0% {bottom:0;}50%{bottom:30px;}100%{bottom:0px;}}
	/* Standard syntax */
@keyframes move {0% {bottom:0;}50%{bottom:30px;}100%{bottom:0px;}}

@media only screen and (min-width: 250px) and (max-width: 800px) {
  .top-menu-bar{box-sizing: border-box; height: 4rem; border-bottom: 3px solid #ffffff; box-shadow: 0 2px 15px -5px #000;}
  .top-menu-bar .menu{display: none !important;}
  .line-patch-1,.line-patch-2,.line-patch-3{display: none;}
  .intro .left-panel{position: relative !important;width: 90%;left: 0;text-align: left;box-sizing: border-box;padding: 4rem 1rem;margin-top: 2rem;}
  .intro .right-panel{left: 0;top: -1rem;width: 85%;padding-bottom: 3rem;}
  .Solution{padding:0}
  .Solution .left-panel{position: relative !important;left: 0;text-align: left;width: 90%;box-sizing: border-box;padding: 4rem 1rem;margin: 0;}
  .Solution .right-panel{left: 0;top: 0;width: 77%;box-sizing: border-box;padding-bottom: 3rem;}
  .Solution .right-panel .list{background: #e7f3ff;box-sizing: border-box;margin-bottom: 2rem;}
  .Solution .right-panel .list .icon{width: 20%;}
  .Solution .right-panel .list .info div:nth-child(2) {font-size: 1.2rem;line-height: 1.6rem;width:100%;}
  .Solution .right-panel .list .info div {font-size: 1.5rem;}
  .maintenace-listbox .list .info div:nth-child(1) {font-size: 1.5rem;}
  .others .subtext {font-size: 1.3rem;}
  .maintenance{padding-bottom: 0;}
  .maintenance{padding-bottom: 0;}
  .maintenance .left-panel{position: relative;left: 0;text-align: left;width: 90%;box-sizing: border-box;padding: 4rem 1rem;margin-top: 0;}
  .maintenance .right-panel{left: 0;top: 0;width: 80%;}
  .maintenace-listbox{    display: inline-block;width: 90%;padding: 4rem 1rem;box-sizing: border-box;}
  .maintenace-listbox .list{width: 100%;border-bottom: 1px solid #cccccc;padding-bottom: 2rem;margin-bottom: 3rem;}
  .maintenace-listbox .list img{width: 10%;}
  .platosysinfo .info{width: 100%;box-sizing: border-box;margin: 0;padding: 4rem;}
  .platosysinfo .contact{width: 90%;margin: 0;padding: 0 4rem 4rem 4rem;box-sizing: border-box;}
  .platosysinfo .contact span{display: block;width: 100%;margin: 1rem 0;}
  .others .left-panel{width: 85%;padding: 4rem 1rem;margin: 0;box-sizing: border-box;}
  .others .right-panel{width: 100%;float: none;box-sizing: border-box;}
  .others .right-panel span{background: #3a97ec;margin-bottom: 1rem;box-sizing: border-box;}
  .maintenace-listbox .list .info{border:0 !important;width: 85%;margin-top: 0.2rem;}
  .maintenace-listbox .list .info div:nth-child(2){width: 90%;font-size: 1.3rem;line-height: 2rem;}
  .commonpages .page-content{width: 100%;padding: 2rem;}
  .content-box-type2{padding: 3rem !important;display: inline-block !important;}
  .commonpages .page-content .title-bar .title{font-size: 3rem;}
  .commonpages .page-content .title-bar .sub-title{font-size: 1.5rem;}
  .commonpages .page-content .content-box .content-titles{margin-left: 2rem;width: 92%;font-size: 1.8rem;}
  .commonpages .page-content .content-box .content{margin-left: 2rem;width: 90%;font-size: 1.5rem;line-height: 2rem;}
  .commonpages .page-content .content-box .content-withimg{margin-left: 2rem;width: 100%;}
  .commonpages .page-content .content-box .content-withimg .image{width: 100%;margin: 2rem 0;float: none !important;}
  .commonpages .page-content .content-box .content-withimg .text{width: 100%;font-size: 1.5rem;line-height: 2rem;}
  .content-group{width: 100% !important;}
  .content-withimg .point-content, .content-withimg .content-parts{width: 90% !important; font-size: 1.5rem;line-height: 2rem;margin-bottom: 2rem;}
  .text-highlight-yellow{margin-bottom: 0.5rem;}
  .about-content{width: 100%;box-sizing: border-box;}.about-img{width: 90%;margin-top: 0;}
  .product-gallery .page-title .notes{width: 100%;font-size: 1.3rem;}
  .product-gallery .products{width: 43%;height: auto !important;border-radius: 6px;}
  .product-gallery .products .title{text-align: center;font-size: 1.5rem;}
  .product-gallery .products .info{text-align: center;font-size: 1.3rem;line-height: 2rem;}
  .content-box-type2 .text {width: 100% !important;box-sizing: border-box;}
  .img-type1 {position: relative;width: 100% !important;right: 0;top: 3rem;left: 0;margin: 0 auto;}
  .img-type2 {position: relative;width: 113% !important;}
  .sub-page-lines{display: block;}
  .sub-page-lines span{background: #2196F3; color: #fff !important; border-radius: 2px; margin-right: 0.5rem;padding: 0.5rem 1rem;}
  .sub-page-lines span a {color: #fff !important;}
  .page-titles .type-1{font-size: 4rem;width: 100%;line-height: 4rem;}
  .doted-bg{position: absolute;z-index: 6;left: 0;width: 48%;right: -2px;margin: 0 auto;margin-bottom: 18rem;}
  .menu-icon{display: inline-block;width: 3rem;float: right;background: #ffffff;border-radius: 5px 5px 0 0;position: relative;bottom: -6px;height: 3rem;}
  .menu{display: inline-block;color: #b9b9b9;text-align: right;width: 87%;position: fixed;right: 2rem;}
  .menu-2{position: absolute;right: 1rem;top: 4rem;background-color: #fff;width: 43%;text-align: center;box-shadow: 0 12px 11px 0px #615c5c;border-radius: 0 0 5px 5px;}
  .menu-2 span{padding: 1rem;display: block;cursor: pointer;transition: all 0.3s ease 0s;border-bottom: 1px solid #ececec;width: 100%;box-sizing: border-box;}
  .menu-2 span:hover{background-color: #2196F3;color: #ffffff;}

  .addresbox .address{font-size: 1.7rem;width: 80%;}
  .addresbox .map{margin-top: 2rem;box-shadow: 0 0 14px -6px #000;width: 300px;}
  .addresbox .address .contact-details span{width: 10%;}
}