<style>
   /*  ************************************* */
.btn-sm a hover{
  background-color: #be1510; 
  color: #fff;
}
  .btn-purple-moon {
    background: #4e54c8;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #8f94fb, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}
}

.btn-ultra-voilet {
    background: #654ea3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #eaafc8, #654ea3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-pink-moon {
    background: #ec008c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fc6767, #ec008c);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fc6767, #ec008c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-cool-blues {
    background: #2193b0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-dark-blue {
    background: #7474BF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #348AC7, #7474BF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #348AC7, #7474BF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-green-moon {
    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-orange-moon {
    background: #fc4a1a;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-dark-moon {
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-light-moon {
    background: #FFEFBA;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFFFFF, #FFEFBA); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #000;
    border: 3px solid #eee;
}

.btn-funky-moon {
    background: #A770EF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(145deg, #FDB99B, #CF8BF3, #A770EF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(145deg, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    border: 3px solid #eee;
}

.btn-rounded {
    border-radius: 35px;
}
/* ************************PROJECT CSS ****************************** */

.shape{    
  border-style: solid; border-width: 0 150px 150px 0; float:right; height: 0px; width: 0px;
  -ms-transform:rotate(360deg); /* IE 9 */
  -o-transform: rotate(360deg);  /* Opera 10.5 */
  -webkit-transform:rotate(360deg); /* Safari and Chrome */
  transform:rotate(360deg);
}

.shape-text{
    color:#fff; font-size:12px; font-weight:bold; position:relative; right:-55px; top:2px; white-space: nowrap;
  -ms-transform:rotate(45deg); /* IE 9 */
  -o-transform: rotate(360deg);  /* Opera 10.5 */
  -webkit-transform:rotate(45deg); /* Safari and Chrome */
  transform:rotate(45deg);
}

/* .project {
    min-height:300px;
    height:auto;
} */

.project{
    background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden;
    min-height:300px;
    height:auto;
}

.project-radius{
    border-radius:7px;
}

.project-default {    border-color: #999999; }
.project-default .shape{
  border-color: transparent #999999 transparent transparent;
  border-color: rgba(255,255,255,0) #999999 rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-danger {    border-color: #d9534f; }
.project-danger .shape{
  border-color: transparent #d9534f transparent transparent;
  border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-success {  border-color: #5cb85c; }
.project-success .shape{
  border-color: transparent #5cb85c transparent transparent;
  border-color: rgba(255,255,255,0) #5cb85c rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-primary {  border-color: #428bca; }
.project-primary .shape{
  border-color: transparent #428bca transparent transparent;
  border-color: rgba(255,255,255,0) #428bca rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-info { border-color: #5bc0de; }
.project-info .shape{
  border-color: transparent #5bc0de transparent transparent;
  border-color: rgba(255,255,255,0) #5bc0de rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-warning {  border-color: #f0ad4e; }
.project-warning .shape{
  border-color: transparent #f0ad4e transparent transparent;
  border-color: rgba(255,255,255,0) #f0ad4e rgba(255,255,255,0) rgba(255,255,255,0);
}

.project-content {
    padding:0 20px 10px;
}
/* ***************************Newsletter***************************** */
.newsletter {
  padding-bottom: 80px;
background: #19beda;
}

.newsletter .content {
max-width: 650px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2; }
.newsletter .content h2 {
color: #243c4f;
margin-bottom: 40px; }
.newsletter .content .form-control {
height: 50px;
border-color: #ffffff;
border-radius:0;
}
.newsletter .content.form-control:focus {
box-shadow: none;
border: 2px solid #243c4f;
}
.newsletter .content .btn {
min-height: 50px; 
border-radius:0;
background: #243c4f;
color: #fff;
font-weight:600;
}
/* *******************social icons css ************************** */
 .social-icons-ql li{
     list-style:none;
     float:left;
     width:40px;
     height:40px;
     line-height:45px;
     background:#000;
     text-align:center;
     margin:10px 5px;
   }
  
   .social-icons-ql li:nth-child(1){
     width:50px;
     height:50px;
     line-height:57px;     
     margin:5px 5px;
     background:#34558E;
   }
   
   .social-icons-ql li:nth-child(1) i{
     font-size:25px;
     
   }
  .social-icons-ql li:nth-child(2) {
   background:#25B8E6;#0198DE
    }

    .social-icons-ql li:nth-child(3) {
       background:rgba(0, 122, 181, 1);
    }
    .social-icons-ql li:nth-child(4) {
       background:#DC4A38;
    }
    .social-icons-ql li:nth-child(5) {
       background:#CC2028;
    }

    .social-icons-ql li:nth-child(6) {
       background:#E05929;
    }
    .social-icons-ql li:nth-child(7) {
       background:#EB4924;
    }

   
   
   .social-icons-ql li i{
     color:#fff;
     font-size:20px;
   }

/*  *************************************** */
#slideshow { 
    margin: 40px auto; 
    position: relative; 
    width: 100%; 
    height: 220px; 
    /* padding: 10px; */ 
    /* box-shadow: 0 0 20px rgba(0,0,0,0.4); */ 
}

#slideshow > div { 
    position: absolute; 
    left: 10px; 
    right: 10px; 
    /* bottom: 10px;  */
}
    /* #showContainer {
          Main wrapper for all images
          width: 100%;
          padding: 0;
          margin: 0 auto;
          overflow: hidden;
          position: relative;
        }
        .navButton {
          Make buttons look nice 
          cursor: pointer;
          position: absolute;
          float: left;
          width: 25px;
          height: 22px;
          padding: 10px;
          margin-right: 5px;
          overflow: hidden;
          text-align: center;
          color: white;
          font-weight: bold;
          font-size: 18px;
          background: #000000;
          opacity: 0.65;
          user-select: none;
        }
        .navButton:hover {
          opacity: 1;
        }
        .caption {
          float: right;
        }
        .imageContainer:not(:first-child) {
          Hide all images except the first
          display: none;
        }
        .fade {
      -webkit-animation-name: fade;
     -webkit-animation-duration: 10s;
      animation-name: fade;
       animation-duration: 10s;
    }
    
    
    @-webkit-keyframes fade {
      from {opacity: 1} 
      to {opacity: 2}
    }
    
    @keyframes fade {
      from {opacity: 1} 
      to {opacity: 2}
    } */
    /* * {box-sizing:border-box}
    Slideshow container
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }
    
    Hide the images by default
    .mySlides {
      display: none;
    }
    
    Next & previous buttons
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }
    
    Position the "next button" to the right
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    On hover, add a black background color with a little bit see-through
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    } 
    
    Caption text
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }
    
    Number text (1/3 etc)
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }
    
    The dots/bullets/indicators
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .activeslide, .dot:hover {
      background-color: #717171;
    }
    
    Fading animation
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 10s;
      animation-name: fade;
      animation-duration: 10s;
    }
    
    
    @-webkit-keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    On smaller screens, decrease text size
    @media only screen and (max-width: 300px) {
      .text {font-size: 11px}
    } */

    .footer{
      background-color:#808080; color: #fff;
    }
  </style>