/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
   html,button,input,select,textarea {
      color:#222;
      }
      html {
      font-size:1em;
      line-height:1.4;
      }
      /*
       * Remove text-shadow in selection highlight: h5bp.com/i
       * These selection rule sets have to be separate.
       * Customize the background color to match your design.
       */
      ::-moz-selection {
      background: #b3d4fc;
      text-shadow: none;
      }
      ::selection {
      background: #b3d4fc;
      text-shadow: none;
      }
      /*
       * A better looking default horizontal rule
       */
      hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
      }
      /*
       * Remove the gap between images, videos, audio and canvas and the bottom of
       * their containers: h5bp.com/i/440
       */
      audio,canvas,img,video {
      vertical-align:middle;
      }
      /*
       * Remove default fieldset styles.
       */
      fieldset {
      border:0;
      margin:0;
      padding:0;
      }
      /*
       * Allow only vertical resizing of textareas.
       */
      textarea {
      resize:vertical;
      }
      
      /* ==========================================================================
         Main styles
         ========================================================================== */
      @font-face {
          font-family: 'libel_suitregular';
          src: url('fonts/libel-suit-rg-webfont.woff2') format('woff2'),
               url('fonts/libel-suit-rg-webfont.woff') format('woff');
          font-weight: normal;
          font-style: normal;
      }
      
      html{ background:#fff;}
      
      /*-- Percent Loader -- */
      .overlay{position:absolute;width:100%;height:800px;top:0;left:0;background:#53f;background:linear-gradient(95deg,#5533ff 40%,#25ddf5 100%);-webkit-transform:skewY(-12deg);transform:skewY(-12deg);-webkit-transform-origin:0;transform-origin:0;z-index:-12}
      #mainHolder{position:relative; margin: auto; width: 1200px; font-size:25px; color:#333; text-align:center; font-family: 'Poppins', sans-serif;}
      h2{ font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 600; color: #2c2d50; margin: 50px auto 20px; }
      h3{ font-family: 'Poppins', sans-serif; font-size: 30px; color: #53f; margin: 30px auto 10px; }
      h4{ font-family: 'Poppins', sans-serif; font-size: 22px; color: #53f; margin: 30px auto 10px; }
      
      h5 {
         font-family: 'Poppins', sans-serif; font-size: 100px; line-height: 100px; margin: 30px auto 10px;
         background: -webkit-linear-gradient(#9424f4, #3c175d);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
      
      p{ font-family: 'Poppins', sans-serif; color: #666666; text-align: center; font-size: 18px; line-height: 30px; max-width: 900px; margin: 30px auto; }
      section{ margin:100px 0 0;}
      section.header{ margin:0 0 0; }
      section.footer{ margin: 0 0 200px; }
      section.compatible h3{ margin:0px auto 10px; }
      section.compatible h5{ margin:30px auto 0px; }
      a{ color: #53f; }
      
      .row{ display: flex; flex-wrap:wrap; }
      .column{ flex: 0 0 50%; max-width: 50%;}
      .column .intro{ padding:120px 0 0; }
      .column .contents{ padding:120px 0; text-align: left; }
      .column .contents h2, .column .contents p{ color: #fff; text-align: left; }
      
      .featureLists{ text-align: left; max-width: 800px; margin: 0 auto 50px; }
      .featureLists ul{ list-style: none; margin: 0; padding: 0; }
      .featureLists li{ position: relative; margin: 20px 0; font-family: 'Poppins', sans-serif; font-size: 18px; padding-left: 30px; }
      .featureLists li img{ position: absolute; top:7px; left: 0; width: 20px; }
      
      .flexLists{ margin:0; padding:0; }
      .flexLists > ul{ display:flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; list-style: none; }
      .threeColumn > ul > li{ width: calc(33.3% - 27px); margin: 0 0 50px 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #fff; box-shadow: 0px 20px 24px 0px rgba(12, 0, 46, 0.1); transition: all 0.5s ease; }
      .threeColumn > ul > li:nth-child(3n+2){ margin: 0 40px 50px 40px;}
      .twoColumn > ul > li{ width: calc(50% - 20px); margin: 0 0 50px 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #fff; box-shadow: 0px 20px 24px 0px rgba(12, 0, 46, 0.1); transition: all 0.5s ease; }
      .twoColumn > ul > li:nth-child(2n+1){ margin: 0 40px 50px 0;}
      .flexLists > ul > li .content{ margin-bottom:10px; padding: 15px; }
      .flexLists > ul > li .content p{ font-size: 15px; line-height: 25px; }
      .threeColumn .content p{ max-width: 300px; }
      .twoColumn .content p{ max-width: 450px; }
      
      .demo{ margin-top: 50px; }
      .demo p{ text-align: center; margin: 20px auto; }
      .demo span{ color: #53f;}
      
      /*Image Slider CSS*/
      .sliderHolder{width:100%;margin:auto;position:relative;padding-bottom:30px;}
      .sliderHolder .nav{position:absolute; z-index:1; top:45%; width:100%; opacity: 0; transition: all 0.5s ease;}
      
      .sliderHolder .nav .leftArrow {position:absolute; left:2%; transform: scaleX(-1);}
      .sliderHolder .nav .rightArrow {position:absolute; right:2%;}
      .sliderHolder .nav a{ display: block; cursor: pointer; background: #fff; border-radius: 100px; font-size: 30px; width: 40px; height: 40px; box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.1); transition: all 0.5s ease; }
      .sliderHolder .nav a img{ display: block;}
      
      .lSSlideOuter .lSPager.lSpg > li a{ background:#ccc; }
      .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a{background:#53f;}
      
      .button{ font-size: 20px; padding: 14px 40px; color: #fff; text-decoration: none; background: #53f; border: #53f solid 2px; border-radius: 100px; display: inline-block; transition: background-color 0.5s ease; }
      .buttonMini{ font-size: 18px; padding: 14px 40px; color: #53f; text-decoration: none; background: #fff; border: #53f solid 2px; border-radius: 100px; display: inline-block; transition: background-color 0.5s ease; }
      .buttonWhite{ font-size: 20px; padding: 14px 40px; color: #53f; text-decoration: none; background: #fff; border: #53f solid 2px; border-radius: 100px; display: inline-block; transition: background-color 0.5s ease; }
      
      /*HOVER EFFECT*/
      @media not all and (pointer: coarse) {
         .flexLists > ul > li:hover{ margin-top: -15px;}
         .sliderHolder .nav a:hover{ transform: scale(1.2); }
         .sliderHolder:hover .nav { opacity: 1; }
         .button:hover{ color:#53f; background: #fff; }
         .buttonMini:hover{ color:#fff; background: #53f; }
         .buttonWhite:hover{ color:#fff; background: #53f; border: #fff solid 2px; }
      }
      
      .fitImg img{ width: 100%; height: auto; }
      @-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
      @-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
      @keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
      
      @-webkit-viewport{width:device-width}
      @-moz-viewport{width:device-width}
      @-ms-viewport{width:device-width}
      @-o-viewport{width:device-width}
      @viewport{width:device-width}
      
      @media only screen and (max-width: 1300px) {
         #mainHolder{ width: calc(100% - 100px); }
         p{ text-align: center; }
      }
      
      @media only screen and (max-width: 900px) {
         .overlay{height:1000px;}
         #mainHolder{ width: calc(100% - 100px); }
         section{ margin:50px 0 0;}
      
         h2{ font-size: 30px; }
         h3{ font-size: 28px; }
         h4{ font-size: 25px; }
         
         p{ font-size: 18px; }
      
         .column{ flex: 0 0 100%; max-width: 100%;}
         .column .intro{ padding:0 0 0; }
         .column .contents{ padding:50px 0; }
         
         .threeColumn > ul > li{ width:calc(100%); margin: 0 0 30px 0; padding:0 0 10%; }
         .threeColumn > ul > li:nth-child(3n+2){ margin: 0 0 30px 0;}
         .twoColumn > ul > li{ width:calc(100%); margin: 0 0 30px 0; padding:0 0 10%; }
         .twoColumn > ul > li:nth-child(2n+1){ margin: 0 0 30px 0;}
      
         .sliderHolder{ width: calc(100% + 100px); margin-left: -50px; }
      }
      
      @media only screen and (max-width: 500px) {
         .overlay{height:800px;}
         
         p{ font-size: 15px; line-height: 25px; }
         .featureLists li{ font-size: 15px; padding-left: 25px; }
         .featureLists li img{ width: 15px; }
      
         .button{ font-size: 15px; padding: 14px 40px; }
         .buttonMini{ font-size: 13px; padding: 14px 40px; }
         .buttonWhite{ font-size: 15px; padding: 14px 40px; }
      }
      
      
      /* ==========================================================================
         Helper classes
         ========================================================================== */
      /*
       * Image replacement
       */
      .ir {
      background-color: transparent;
      border: 0;
      overflow: hidden;
      /* IE 6/7 fallback */
      *text-indent: -9999px;
      }
      
      .ir:before {
      content: "";
      display: block;
      width: 0;
      height: 150%;
      }
      
      /*
       * Hide from both screenreaders and browsers: h5bp.com/u
       */
      .hidden {
      display: none !important;
      visibility: hidden;
      }
      
      /*
       * Hide only visually, but have it available for screenreaders: h5bp.com/v
       */
      .visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      }
      
      /*
       * Extends the .visuallyhidden class to allow the element to be focusable
       * when navigated to via the keyboard: h5bp.com/p
       */
      .visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
      }
      
      /*
       * Hide visually and from screenreaders, but maintain layout
       */
      .invisible {
      visibility: hidden;
      }
      
      /*
       * Clearfix: contain floats
       *
       * For modern browsers
       * 1. The space content is one way to avoid an Opera bug when the
       *    `contenteditable` attribute is included anywhere else in the document.
       *    Otherwise it causes space to appear at the top and bottom of elements
       *    that receive the `clearfix` class.
       * 2. The use of `table` rather than `block` is only necessary if using
       *    `:before` to contain the top-margins of child elements.
       */
      .clearfix:before,.clearfix:after{
      content: " "; /* 1 */
      display: table; /* 2 */
      }
      
      .clearfix:after{
      clear: both;
      }
      
      /*
       * For IE 6/7 only
       * Include this rule to trigger hasLayout and contain floats.
       */
      .clearfix{
      *zoom: 1;
      }
      
      /* ==========================================================================
         EXAMPLE Media Queries for Responsive Design.
         These examples override the primary ('mobile first') styles.
         Modify as content requires.
         ========================================================================== */
      
      @media only screen and (min-width: 35em) {
          /* Style adjustments for viewports that meet the condition */
      }
      
      @media print,
             (-o-min-device-pixel-ratio: 5/4),
             (-webkit-min-device-pixel-ratio: 1.25),
             (min-resolution: 120dpi) {
          /* Style adjustments for high resolution devices */
      }
      
      /* ==========================================================================
         Print styles.
         Inlined to avoid required HTTP connection: h5bp.com/r
         ========================================================================== */
      @media print{
      * {
      background:transparent!important;
      color:#000!important;
      box-shadow:none!important;
      text-shadow:none!important;
      }
      
      a,a:visited {
      text-decoration:underline;
      }
      
      a[href]:after {
      content:" (" attr(href) ")";
      }
      
      abbr[title]:after {
      content:" (" attr(title) ")";
      }
      
      .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
      content:"";
      }
      
      pre,blockquote {
      border:1px solid #999;
      page-break-inside:avoid;
      }
      
      thead {
      display:table-header-group;
      }
      
      tr,img {
      page-break-inside:avoid;
      }
      
      img {
      max-width:100%!important;
      }
      
      @page {
      margin:.5cm;
      }
      
      p,h2,h3 {
      orphans:3;
      widows:3;
      }
      
      h2,h3 {
      page-break-after:avoid;
      }
      }