<!--[*STYLESHEETS*]-->
<style>
    .navbar {margin-bottom: 50px;border-radius: 0;width: 100%;}
    	.jumbotron { background: url(img/hqdefault.jpg);background-repeat: no-repeat;background-position: center;-webkit-background-size: cover;background-size: cover;color: #fff; height: 100%;-webkit-box-shadow: inset 0px -9px 24px 4px rgba(0,0,0,0.84);
    -moz-box-shadow: inset 0px -9px 24px 4px rgba(0,0,0,0.84);
    box-shadow: inset 0px -9px 24px 4px rgba(0,0,0,0.84);}
 
    	footer { background-color: #000; padding: 40px; width: 100%; margin: 0; position: absolute; left: 0px;}
    	body { padding-top: 50px; font-family: 'Titillium Web', sans-serif; background: #262626; color: #FFF;}

    	.codes{background: #778899; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: auto;}
    	.projects{background: #778899; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: auto;}
    	.clients{background: #778899;background-repeat: no-repeat;background-position: center;-webkit-background-size: cover;background-size: auto;}
    	.feedback{background: #778899;background-repeat: no-repeat;background-position: center;-webkit-background-size: cover;background-size: auto;}

        .fixedblock {height: 300px;}
        .neatdivider {margin-top: -20px;background: #FFF;height: 6px;width: 20%;border-radius: 4px;}
        .transparent {opacity: 0.96;}
        .transparent:hover {opacity: 1;}
    .panel-body {background: #000; color: #FFF;}
    .panel-default {background: #262626; color: #FFF; border: none; border-left: 6px solid green;}
    .panel {background: #262626; color: #FFF;}
    .panel > .panel-heading {
        background-image: none;
        background-color: #77dd77;
        color: #000;

    }
    button {
      background:#FFF; padding: 15px; box-shadow: 3px 10px 18px #000; border: none; width: 50%; font-size: 16px; border-radius: 10px; color: #000 !important;
    }
    button a{
      color: #000 !important;
    }
    button:hover {
      background: #808080;
    }
    a
    {
      color: #66ff33;
    }
    .panel > .panel-footer {
    background-color: #77dd77;
    color: #000;}
</style>

<style>
    /* Center the loader */
    #loader {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid green;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Add animation to "page content" */
    .animate-bottom {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 }
      to { bottom:0px; opacity:1 }
    }

    @keyframes animatebottom {
      from{ bottom:-100px; opacity:0 }
      to{ bottom:0; opacity:1 }
    }

    #mainPage {
      display: none;
      text-align: center;
    }
    .stroke-text {
      	text-shadow: -1px 1px 2px rgba(0,0,0,0.4),
      				  1px 1px 2px rgba(0,0,0,0.4),
      				  1px -1px 0 rgba(0,0,0,0.4),
      				  -1px -1px 0 rgba(0,0,0,0.4);
    }
    .font-limiter {
    font-size: 14px;
    }
    .font-limiter a{
      font-size: 14px;
    }
    .ripple {
      position: relative;
      overflow: hidden;
      -webkit-transform: translate3d(0, 0, 0);
    }
    .ripple:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      4pointer-events: none;
      background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      -webkit-transform: scale(10, 10);
      opacity: 0;
      -webkit-transition: transform .5s, opacity 1s;
    }
    .ripple:active:after {
      -webkit-transform: scale(0, 0);
      opacity: .2;
      -webkit-transition: 0s;
    }
    .ripple:hover {
      background: #484848 !important;
    }
    .block-panel {
      border-left: 6px solid green;
      border-right: 15px solid #262626;
      border-top: 6px solid #262626;
      background: #1a1a1a;
      padding: 20px;
      border-radius: 15px;
    }
    .block-panel-header {
      margin-left: 10%; font-size: 18px; position: absolute; right: 10px; top: 10px;
    }
    .product-icon {
      width:86px; height: 86px; position: absolute; left: 20px; top: 10px;
    }
    .block-popup {
      background: #000 !important;
      border: none;
      padding: 20px;
    }
    .block-popup button {
      background: green !important;
      padding: none;
      font-size: 12px;
    }
</style>
