<?php 
  function colorBrightness($hex, $percent) {
    // Work out if hash given
    $hash = '';
    if (stristr($hex,'#')) {
      $hex = str_replace('#','',$hex);
      $hash = '#';
    }
    /// HEX TO RGB
    $rgb = array(hexdec(substr($hex,0,2)), hexdec(substr($hex,2,2)), hexdec(substr($hex,4,2)));
    //// CALCULATE
    for ($i=0; $i<3; $i++) {
      // See if brighter or darker
      if ($percent > 0) {
        // Lighter
        $rgb[$i] = round($rgb[$i] * $percent) + round(255 * (1-$percent));
      } else {
        // Darker
        $positivePercent = $percent - ($percent*2);
        $rgb[$i] = round($rgb[$i] * $positivePercent) + round(0 * (1-$positivePercent));
      }
      // In case rounding up causes us to go to 256
      if ($rgb[$i] > 255) {
        $rgb[$i] = 255;
      }
    }
    //// RBG to Hex
    $hex = '';
    for($i=0; $i < 3; $i++) {
      // Convert the decimal digit to hex
      $hexDigit = dechex($rgb[$i]);
      // Add a leading zero if necessary
      if(strlen($hexDigit) == 1) {
      $hexDigit = "0" . $hexDigit;
      }
      // Append to the hex string
      $hex .= $hexDigit;
    }
    return $hash.$hex;
  }
 ?>
<style>

  /* GLOBAL FONT */
  <?php if(!empty($webFont[0])): ?>
    <?php 
      $x = explode(':', $webFont[0]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    html,body{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>
  /* NAVBAR FONT */
  <?php if(!empty($webFont[1])): ?>
    <?php 
      $x = explode(':', $webFont[1]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .navbar .navbar-nav > li > a{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  /* CONTENT FONT */
  <?php if(!empty($webFont[2])): ?>
    <?php 
      $x = explode(':', $webFont[2]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .home-content p,
    .divider p,
    .section-content .content-box.content-text,
    .section-content .content-box.contact-info .contact-detail p,
    .section-content .content-box.contact-info .contact-detail a,
    footer.main-footer .footer-top .navigation ul > li > a,
    footer.main-footer .footer-top .contact ul,
    footer.main-footer .footer-bottom,
    .product-list .card .card-content .card-header .product-price,
    .product-list .card.product-detail .product-spec,
    .product-list .card.product-detail header .product-price{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  /* HEADING FONT */
  <?php if(!empty($webFont[3])): ?>
    <?php 
      $x = explode(':', $webFont[3]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .home-content h2,
    .home-content .card .card-content h3,
    .section-content .content-box.content-text h2,
    .section-content .content-box.contact-info #contactForm label,
    .section-content .content-box.contact-info .contact-detail h2,
    footer.main-footer .footer-top h4,
    .product-list .card .card-content .card-header h2,
    .product-list .card.product-detail header h2,
    .product-list .item-single h2,
    .category-wrapper .category-box > header a h2{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  /* IMAGE CAPTION FONT */
  <?php if(!empty($webFont[4])): ?>
    <?php 
      $x = explode(':', $webFont[4]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .banner-img .banner-content .content-text h2,
    .carousel .carousel-text,
    header .banner-section .banner-section-content h1{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  /* IMAGE SUB-CAPTION FONT */
  <?php if(!empty($webFont[5])): ?>
    <?php 
      $x = explode(':', $webFont[5]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .banner-img .banner-content .content-text p{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  /* COMPANY NAME FONT */
  <?php if(!empty($webFont[6])): ?>
    <?php 
      $x = explode(':', $webFont[6]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .navbar .navbar-header .navbar-brand span.text,
    .section-content .content-box.contact-info .contact-detail h2{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  /* BUTTON FONT */
  <?php if(!empty($webFont[7])): ?>
    <?php 
      $x = explode(':', $webFont[7]);
      $x = preg_replace('/[^a-zA-Z0-9]+/', ' ', $x[0]);
      $fontfamily = $x;
     ?>
    .btn-default{
      font-family: '<?php echo e($fontfamily); ?>';
    }
  <?php endif; ?>

  .navbar-default,
  .divider,
  .card,
  footer.main-footer,
  aside.share #shareLinks .modal-dialog .modal-header,
  .breadcrumb{
    background: #<?php echo e($navbarColor[0]); ?>;
    background: -webkit-linear-gradient(#<?php echo e($navbarColor[0]); ?>, #<?php echo e($navbarColor[1]); ?>);
    background: -o-linear-gradient(#<?php echo e($navbarColor[0]); ?>, #<?php echo e($navbarColor[1]); ?>);
    background: -moz-linear-gradient(#<?php echo e($navbarColor[0]); ?>, #<?php echo e($navbarColor[1]); ?>);
    background: linear-gradient(#<?php echo e($navbarColor[0]); ?>, #<?php echo e($navbarColor[1]); ?>);
  }

  footer.main-footer .footer-bottom {
    background-color: <?php echo e(colorBrightness('#'.$navbarColor[0],-0.9)); ?>;
    border-top-color: <?php echo e(colorBrightness('#'.$navbarColor[0],-0.9)); ?>;
  }

  footer.main-footer .footer-top,
  footer.main-footer .footer-top .contact ul > li > a,
  footer.main-footer .footer-top .navigation ul > li > a,
  footer.main-footer .footer-top .social-media a,
  footer.main-footer .footer-bottom .bottom-right a,
  .navbar-right .dropdown-menu li .category-image.first i,
  .navbar-right .dropdown-menu li .nav-text{
    color: #<?php echo e($webColor[3]); ?>;
  }

  footer.main-footer .footer-top .navigation ul > li > a:hover,
  .navbar-right .dropdown-menu li .nav-text:hover{
    color: #<?php echo e($webColor[0]); ?>;
  }

  footer.main-footer .footer-top .contact ul > li > a:hover,
  footer.main-footer .footer-bottom .bottom-right a:hover{
    color: <?php echo e(colorBrightness('#'.$webColor[3],0.8)); ?>;
  }

  .navbar .navbar-header .navbar-brand span.text,
  footer.main-footer .footer-top h4,
  a,
  .navbar .navbar-nav li > a.hover-line.active,
  .navbar .navbar-nav > li > a:hover,
  .navbar-right .dropdown-menu li .category-image.first i:hover,
  .breadcrumb a,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover{
    color: #<?php echo e($webColor[0]); ?>;
  }

  #categories-collapse .category-item span.icon .fa,
  #categories-collapse a{
    color: #<?php echo e($webColor[0]); ?>;
  }

  #categories-collapse .category-item span.icon{
    border-color: #<?php echo e($webColor[0]); ?>;
  }

  #categories-collapse .category-item a:hover span.icon .fa,
  #categories-collapse a:hover{
    color: <?php echo e(colorBrightness('#'.$webColor[0],0.8)); ?>;
  }

  #categories-collapse .category-item a:hover span.icon{
    border-color: <?php echo e(colorBrightness('#'.$webColor[0],0.8)); ?>;
  }

  .navbar .navbar-nav > li > a.hover-line:hover:after{
    background: #<?php echo e($webColor[0]); ?>;
  }

  @media  screen and (max-width: 768px){
    .navbar .navbar-nav > li > a.hover-line:hover:after{
      background: transparent;
    }
  }

  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:active,
  .navbar-default .navbar-nav > .open > a:focus{
    background-color: transparent;
    color: inherit;
  }

  .navbar .navbar-nav > li > a,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  aside.share #shareLinks .modal-dialog .modal-header h3{
    color: #<?php echo e($webColor[3]); ?>;
  }

  a:hover,
  .breadcrumb a:hover{
    color: <?php echo e(colorBrightness('#'.$webColor[0],0.8)); ?>;
  }

  .btn-default,
  button.navbar-toggle,
  .carousel .slideDown > button,
  #show_cart .label{
    background-color: #<?php echo e($btnColor[0]); ?>;
    color: #<?php echo e($btnColor[1]); ?>;
  }

  .btn-default:hover,
  .carousel .slideDown > button:hover,
  .btn-default:active,
  .carousel .slideDown > button:active,
  .btn-default:focus,
  .carousel .slideDown > button:focus{
    background-color: #<?php echo e($btnColor[2]); ?>;
    color: #<?php echo e($btnColor[3]); ?>;
  }

  body{
    background-color: #<?php echo e($webColor[1]); ?>;
    color: #<?php echo e($webColor[3]); ?>;
  }

  .product-list .card{
    border-color: <?php echo e(colorBrightness('#'.$webColor[1],-0.9)); ?>;
  }

  .featured-products .plate .heading:after, .featured-products .plate .heading:before {
    border-bottom-color: #<?php echo e($webColor[0]); ?>;
  }

  .banner-img .banner-content .content-text,
  header .banner-section .banner-section-content h1,
  .carousel .carousel-text,
  .category-wrapper .category-box > header h2{
    color: #<?php echo e($txtBannerColor); ?>;
  }

  .category-wrapper .category-box > header a:hover h2{
    color: <?php echo e(colorBrightness('#'.$txtBannerColor,-0.8)); ?>;
  }

  .carousel-indicators li{
    border-color: #<?php echo e($txtBannerColor); ?>;
  }

  .carousel-indicators .active{
    background-color: #<?php echo e($txtBannerColor); ?>};
  }
  
  .section-content .content-box.left{
    border-color: #<?php echo e($webColor[3]); ?>;
  }

  .section-content .content-box.contact-info .contact-detail a{
    color: #<?php echo e($webColor[3]); ?>;
  }

  .section-content .content-box.contact-info .contact-detail a:hover{
    color: <?php echo e(colorBrightness('#'.$webColor[3],0.8)); ?>;
  }

  .table tr.colored{
    background-color: #<?php echo e($btnColor[0]); ?>;
    color: #<?php echo e($btnColor[1]); ?>;
  }

  .page404{
    color: #<?php echo e($webColor[0]); ?>;
  }

  .page404 h1{
    font-size: 200px;
    font-weight: bold;
  }

  .page404 h1 i{
    position: relative;
    top: 25px;
  }

  .page404 p{
    font-size: 24px;
  }

  @media  screen and (max-width: 768px){

    .page404{
      margin-top: 100px;
    }

    .page404 h1{
      font-size: 120px;
      font-weight: bold;
    }

    .page404 h1 i{
      position: relative;
      top: 15px;
    }
  }

  .radio-area.active{
    color: #<?php echo e($webColor[3]); ?>;
  }

  .radio-area{
    color: <?php echo e(colorBrightness('#'.$webColor[3],0.56)); ?>;
  }
</style>
