@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');

body { margin: 0; padding: 0; font-family: 'Oxygen', sans-serif!important; transition: background-color .5s;}

a { transition: 0.5s ease-in-out; text-decoration: none;}
a:hover { transition: 0.5s ease-in-out; text-decoration: none;}
button { transition: 0.5s ease-in-out; text-decoration: none;}
button:hover { transition: 0.5s ease-in-out; text-decoration: none;}

.clr { clear: both; }
.clr-10 { clear: both; height: 10px;}
.clr-20 { clear: both; height: 20px;}
.clr-30 { clear: both; height: 30px;}
.clr-40 { clear: both; height: 40px;}
.clr-50 { clear: both; height: 50px;}


.bg-01{ background-color: rgba(0, 0, 0, 0.3); }

#wrapper { width: 100%; box-sizing: border-box; float: left; z-index: 9; position: relative;}
.container { width: 100%; max-width: 1200px; padding: 0 15px; margin: 0 auto; box-sizing: border-box; }

.area-col { width: 100%; float: left; height: 92%; box-sizing: border-box; overflow-y: scroll; }
.head { width: 100%; float: left; box-sizing: border-box; background-color: transparent; padding: 20px 0; position: absolute; top: 0; left: 0; 
  z-index: 11;}
.head-col { width: 100%; float: left; box-sizing: border-box; }
.head-inner { width:33%; float: left; box-sizing: border-box; font-size: 15px; font-weight: 700; color: #fff;}
.menu-bar img { width: 4%; float: left; margin: 5px 0 0 0; } 
.menu { float: right; width: 94%; margin: 3px 0px 0px 0px; font-size: 16px;}
.logo { text-align: center; }
.logo img { width: 35%; margin: 0 auto; } 
.media-icons { width: 50%; float: right; box-sizing: border-box; }
.media-icons a { margin-left: 10px; }
.media-icons img { width: 16%; }

.header-slider-col{ width: 100%; float: left; margin: 0px auto 0px; position: relative; z-index: 9}
#display-video { width: 100%; float: left; box-sizing: border-box; }
#mobile-video { display: none; width: 100%; float: left; box-sizing: border-box;}

.swiper-container { width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;
 display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }


#lab_video_text_overlay h2 { font-size:4em; font-family: 'Oxygen', sans-serif; left: 19%; position: absolute; margin: 257px 0 0 0; 
text-align: left;}
#lab_video_text_overlay .btn { border-radius:0; text-transform:uppercase; color: #fff; font-weight:200; font-family: 'Oxygen', sans-serif;}
#lab_video_text_overlay .btn-warning { font-family: 'Oxygen', sans-serif;}
#lab_video_text_overlay { position: absolute; color: #FFF; width: 100%; top: 25%; font-family: 'Oxygen', sans-serif; z-index: 999; }

#lab_video_text_overlay .container { text-align: center; margin: 0px auto; }
.swiper-pagination-bullet { width: 12px!important; height: 12px!important; background: #fff!important; opacity: .8!important;}
.swiper-pagination-bullet-active { opacity: 1!important; background: #007aff!important; }

.overlay-video {
  width: 100%;
  float: left;
  box-sizing: border-box;
  background: rgba(0,0,0,0.5);
  position: absolute;
  height: 99.5%;
  top: 0;
  right: 0;
}

@media screen and (max-width:991px) { 
  #lab_video_text_wrap { height: 300px; }
}
@media screen and (max-width:650px) {
#lab_video_text_wrap { height: 250px; }
#lab_video_text_overlay h2 { font-size: 2em; }
#lab_video_text_overlay p { font-size: .9em; }
}


.mobile-slider { display: none; width: 100%; float: left;}

.certified { width: 100%; float: left; box-sizing: border-box; margin: 70px 0; }
.certified-col { width: 100%; float: left; box-sizing: border-box; text-align: center; }
.certified-col img { width: 43%; }
.certified-details { font-size: 25px; color: #272727; line-height: 34px; width: 65%; margin: 0 auto; border-top: 1px solid #9a9a9a; padding: 20px 0 0 0;}

.about-rico { width: 100%; float: left; box-sizing: border-box; margin: 70px 0 0 0; }
.about-left { width: 40%; float: left; box-sizing: border-box; }
.about-left img { width: 100%; }
.about-right { width: 55%; float: right; box-sizing: border-box; padding: 60px 40px 60px 0; }
.about-rico h2 { color: #013193; font-size: 40px; font-weight: 300; line-height: 50px; width: 75%; margin: 0 0 40px 0; }
.about-rico p { color: #3a3a3a; font-size: 18px; font-weight: 300; line-height: 30px; }
.read-more { font-size: 15px; font-weight: 700; color: #fff; padding: 10px 22px; background-color: #d71635; border: 1px solid #d71635; 
  margin: 30px 0 0 0; display: inline-block; text-transform: uppercase;}
.read-more:hover { background-color: transparent; color: #d71635; }

.stock-100 { width: 100%; float: left; box-sizing: border-box; background-color: #f2f2f2; padding: 62px 0; }
.stock-col { width: 100%; float: left; box-sizing: border-box; }
.stock-col h2 { font-size: 30px; font-weight: 400; color: #013193; margin: 0px 0px 20px 0px; }
.stock-right { width: 100%; float: left; box-sizing: border-box; }
.financial-inner { width: 25%; float: left; box-sizing: border-box; margin-top: 10px;}
.stock-right img { width: 17%; float: left; margin-top: 5px;}
.stock-right p { font-size: 16px; color: #000; font-weight: 400; line-height: 25px; width: 80%; float: right; margin: 0; }


.product-100 { width: 100%; float: left; box-sizing: border-box; margin: 90px 0; }
.product-col { width: 100%; float: left; box-sizing: border-box; }
.product-left { width: 50%; float: left; box-sizing: border-box; background: url(../images/prod-range-bg.png) top left no-repeat; background-size: cover; padding: 130px 115px 130px;  }
.product-left h2 { color: #fff; font-size: 40px; font-weight: 700; line-height: 50px; width: 100%; margin: 0 0 40px 0; }
.product-left p { color: #fff; font-size: 18px; font-weight: 300; line-height: 30px; }
.product-right { width: 50%; float: left; box-sizing: border-box; padding: 120px 0;}
.product-inner-1 { width: 48%; float: left; box-sizing: border-box;}
.product-inner-1 img { margin-left: -100px; }
.product-inner-2 { width: 48%; float: right; box-sizing: border-box; }
.prod-margin { width: 100%; float: left; box-sizing: border-box; margin: 12px 0; }


.capabilities-100 { width: 100%; float: left; box-sizing: border-box; }
.capabilities-col { width: 100%; float: left; box-sizing: border-box; display: flex;}
.capabilities-left { width: 58%; float: left; box-sizing: border-box; padding-right: 100px;}
.capabilities-left h2 { font-size: 30px; font-weight: 400; color: #1b5fb0; margin-bottom: 10px; }
.capabilities-right { width: 42%; float: right; box-sizing: border-box; padding-right: 100px;}
.capabilities-right img { width: 100%; margin-top: 30px; }



.accordion dl,.accordion-list { &:after { content: ""; display:block; height:1em; width:100%; background-color:darken(#38cc70, 10%); }}
.accordion dd,.accordion__panel {font-size:15px; font-weight: 300;line-height:1.5em; margin: 0; color: #373737;}
.accordion { position:relative;}
.accordionTitle,.accordion__Heading {text-align:left;font-weight:400; padding:1em 0; display:block; text-decoration:none; color:#373737; font-size: 18px; transition:background-color 0.5s ease-in-out; border-bottom:1px solid #f3f0e9; &:before { content: "+"; font-size:12px; line-height:0.5em;
   float:left; transition: transform 0.3s ease-in-out; }
  &:hover { background-color:darken(#38cc70, 10%); }} 
.accordionTitleActive, .accordionTitle.is-expanded { background-color:darken(#38cc70, 10%); 
  &:before { transform:rotate(-225deg); }}
.accordionItem { height:auto; overflow:hidden; 
  //SHAME: magic number to allow the accordion to animate
  max-height:50em; transition:max-height 1s;     
  @media screen and (min-width:48em) {max-height:15em; transition:max-height 0.5s }}
.accordionItem a { color: #007fff; }
.accordionItem.is-collapsed { max-height:0;}
.no-js .accordionItem.is-collapsed { max-height: auto;}
.animateIn { animation: accordionIn 0.45s normal ease-in-out both 1; }
.animateOut { animation: accordionOut 0.45s alternate ease-in-out both 1; }
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
    0% {
       opacity: 1;
       transform:scale(1);
     }
     100% {
          opacity:0;
           transform:scale(0.9) rotateX(-60deg);
       }
}

.accordionTitle::before, .accordion__Heading::before { content: "+"; font-size: 25px;line-height: 0.5em; float: right; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.accordionTitle.is-expanded::before { -webkit-transform: rotate(-225deg); transform: rotate(-225deg);}

.why-rico-100 { width: 100%; float: left; box-sizing: border-box; margin: 90px 0 0 0;background: url(../images/dot-bg.png) top center #13419e;  padding: 50px 0; }
.why-col { width: 100%; float: left; box-sizing: border-box; }
.why-col h2 { font-size: 50px; color: #fff; font-weight: 700; text-align: center; margin: 0; }
.why-col h2::after { content: ""; height: 2px; width: 100%; max-width: 55px; background-color: #4c9fff; position: absolute; z-index: 999; 
left: 48%; margin: 80px 0 0 0px; }
.why-rico-col{ width: 20%; float: left; box-sizing: border-box; margin-top: 90px; text-align: center; font-size: 65px; line-height: 18px; color:#fff; font-weight: 900; padding: 0px 0px 10px 0px;  }
.year{  font-size: 15px; color: #4c9fff; font-weight: 300; letter-spacing: 5px;  position: relative; line-height: 15px; bottom: 30px; display: -moz-grid; text-align: left;}
.why-text { width: 100%; margin: 0px auto; color: #ccffff; font-size: 13px; font-weight: 500; margin: 10px 0px 0px 0px; }
.plus{ font-size: 40px; color: #fff; line-height: 10px; position: absolute;margin: -8px 0px 0px 0px; }
.percentage { font-size: 40px; color: #fff; line-height: 10px; position: absolute;margin: 4px 0px 0px 8px; }
.s-sign { font-size: 40px; color: #fff; line-height: 10px; position: absolute; margin: 10px 0px 0px -3px;}


.customer-100 { width: 100%; float: left; box-sizing: border-box; background: url(../images/pattern-20.png) top center no-repeat #fff; padding: 95px 0 80px; }
.customer-col { width: 100%; float: left; box-sizing: border-box; }
.customer-left { width: 40%; float: left; box-sizing: border-box; }
.customer-left h2 { color: #1b5fb0; font-size: 30px; font-weight: 400; margin: 0; }
.customer-left p { color: #272727; font-size: 18px; font-weight: 400; margin: 30px 0 0 0; width: 70%; line-height: 26px;}
.customer-right { width: 60%; float: right; box-sizing: border-box; }

.hr-100 { width: 100%; float: left; box-sizing: border-box; margin: 70px 0 ; }
.hr-col { width: 100%; float: left; box-sizing: border-box;}
.hr-left { width: 46%; float: left; box-sizing: border-box; }
.hr-left h2 { color: #1b5fb0; font-size: 30px; font-weight: 400; margin: 0; }
.hr-left p { color: #272727; font-size: 18px; font-weight: 400; margin: 30px 0 0 0; width: 70%; line-height: 26px;}
.hr-right { width: 54%; float: left; box-sizing: border-box; }
.hr-inner { margin: 0px 35px 0 0px; width: 44%; float: left; } .hr-inner h3 { font-size: 15px; color: #1b5fb0; font-weight: 700; }
.hr-inner img { width: 100%; } .hr-row { width: 100%; float: left; box-sizing: border-box; margin: 35px 0 0 0; }

.rico-media  { width: 100%; float: left; box-sizing: border-box; padding: 70px 0; background-color: #f9f9f9; }
.rico-media h2 { color: #1b5fb0; font-size: 30px; font-weight: 400; margin: 0; text-align: center;}
.rico-media-col { width: 100%; float: left; box-sizing: border-box; margin: 40px 0 0 0; }
.rico-media-left { width: 48%; float: left; box-sizing: border-box; }
.rico-media-left img { width: 100%; }
.rico-media-right img { width: 100%; }
.rico-media-right { width: 48%; float: right; box-sizing: border-box; }
.media-detail { width: 100%; float: left; box-sizing: border-box; margin: 5px 0; }
.media-detail img.icons { width: 4%; float: left; }
.media-detail p { width: 94%; float: right; box-sizing: border-box; font-size: 18px; color: #000; font-weight: 300; margin: 0;}
.media-margin { width: 100%; float: left; box-sizing: border-box; margin: 20px 0; }

.press-100 { width: 100%; float: left; box-sizing: border-box; background-color: #06205d; padding: 70px 0 0 0; }
.press-100 h2 { color: #fff; font-size: 30px; font-weight: 400; margin: 0;}
.press-col { width: 100%; float: left; box-sizing: border-box; margin: 0px 0 -237px 0; position: relative; padding: 0 120px;}
.press-inner { width: 32%; float: left; box-sizing: border-box; background-color: #fff; margin: 40px 18px 0 0;}
.press-inner:nth-child(4) { margin-right: 0; }
.press-inner img { width: 100%; }
.press-detail { width: 100%; float: left; box-sizing: border-box; padding: 40px 15px 15px; }
.press-detail p { font-size: 18px; font-style: 300; color: #000; margin: 0; line-height: 28px; font-weight: 700; }
.press-detail img { width: 20%; float: right; }

footer { width: 100%; float: left; box-sizing: border-box; background-color: #010a2b; padding: 315px 0 0 0; }
.footer-col { width: 20%; float: left; box-sizing: border-box; padding-left: 10px; }
.foot-header { font-size: 22px; color: #fff; font-weight:700; padding: 0px 0px 10px 0;}
.foot-header a { color: #fff; text-decoration: none; }
.foot-header a:hover { color: #fff!important; text-decoration: none; transition: 0.5s ease-in;  } 
.foot-links a { font-size: 18px; color: #fff; display: block; padding: 6px 0; transition: 0.5s ease-in; font-weight: 300; text-decoration: none;}
.foot-links a:hover { color: #ed1c24; text-decoration: none; }

.foot-sublinks a {font-size: 15px; color: #a4b2e7; display: block; padding: 4px 0; padding: 4px 0px 4px 0px; transition: 0.5s ease-in; font-weight: 400; text-decoration: none;}
.foot-sublinks a:hover { text-decoration: none; color: #d71635; font-weight: 400;}

.twitter-detail { width: 100%; box-sizing: border-box;}
.twitter-detail img { width: 7%; float: left; margin: 7px 0px 0px 0px;}
.twitter-detail p { font-size: 16px!important; color: #fff; float: right!important; width: 87%!important; margin: 0!important;
 font-weight: 300!important;}
.social-icons { float: left; width: 100%; margin: 20px 0 60px;}
.social-icons img { float: left; width: 12%; margin: 0px 5px; }

.copyright { width: 100%; float: left; box-sizing: border-box; border-top: 1px solid #343b55; margin: 40px 0 0 0;}
.copy-left { width: 50%; float: left; box-sizing: border-box; }
.copy-right { width: 50%; float: left; box-sizing: border-box; }
.copyright p { font-size: 14px!important; font-weight: 300!important; color: #a4b2e7!important; width: 50%!important; float: left;  }
.copyright a { color: #a4b2e7; font-size: 14px; line-height: 20px; }
.copy-right p { float: right; text-align: right; }
.margin-btm { margin: 0 0 30px 0; }



/*Slider Css Start*/
.slider-col{width: 100%; float: left;}
.jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
        
        .jssorb032 {position:absolute;}
        .jssorb032 .i {position:absolute;cursor:pointer;}
        .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
        .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .iav .b { fill:#013193;fill-opacity:1;stroke:#013193;stroke-opacity:.35;}
        .jssorb032 .i.idn {opacity:.3;}

        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
/*Slider Css end*/