/*
-------------------------------------------------------

                  KEYFRAME STYLES

-------------------------------------------------------
*/
@-webkit-keyframes bounce-down {
   0%, 60%, 75%, 90%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
   }
   60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
   }
   75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
   }
   90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
   }
   100% {
      -webkit-transform: none;
      transform: none;
   }
}

@-moz-keyframes bounce-down {
   0%, 60%, 75%, 90%, 100% {
      -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   0% {
      opacity: 0;
      -moz-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
   }
   60% {
      opacity: 1;
      -moz-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
   }
   75% {
      -moz-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
   }
   90% {
      -moz-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
   }
   100% {
      -moz-transform: none;
      transform: none;
   }
}

@keyframes bounce-down {
   0%, 60%, 75%, 90%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
   }
   60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
   }
   75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
   }
   90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
   }
   100% {
      -webkit-transform: none;
      transform: none;
   }
}



/*
-------------------------------------------------------

                   DEFAULT STYLES

-------------------------------------------------------
*/
* {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*:focus {
   outline: 0;
}

html, body {
   height: 100%;
   background: #FFF;
   color: #383838;
   font-size: 14px;
   word-break: break-word;
   margin: 0;
   padding: 0;
}

a, a:visited {
   position: relative;
   color: #2E8ECE;
   text-decoration: none;
}

a:hover {
   cursor: pointer;
   text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
   position: relative;
   display: block;
   padding: 0;
   margin: 0;
   font-weight: 400;
}

h1 {
   font-size: 26px;
}

h2 {
   font-size: 24px;
}

h3 {
   font-size: 22px;
}

h4 {
   font-size: 20px;
}

h5 {
   font-size: 18px;
}

h6 {
   font-size: 16px;
}

.text-left {
   text-align: left;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.pull-left {
   float: left;
}

.pull-right {
   float: right;
}

.container {
   position: relative;
   width: 80%;
   min-width: 700px;
   max-width: 1200px;
   margin: 0 auto;
   overflow: hidden;
}

hr {
   border: none;
   border-bottom: 1px solid #DDD;
}

::selection {
   background: #444;
   color: #DDD;
}

::-moz-selection {
   background: #444;
   color: #DDD;
}



/*
-------------------------------------------------------

                    HEADER STYLES

-------------------------------------------------------
*/
#header {
   position: relative;
   display: block;
   width: 100%;
   background: #FFF;
}

#header > .container > .pull-left {
   position: absolute;
   top: 30%;
}

#header > .container > .pull-left > a {
   font-size: 24px;
   font-weight: bold;
   text-decoration: none;
   color: #222;
}

#header > .container > .pull-right {
   position: relative;
   margin: 0;
   padding: 30px 0;
   overflow: hidden;
   list-style: none;
}

#header > .container > .pull-right > li {
   float: left;
   margin: 0 0 0 8px;
}

#header > .container > .pull-right > li > a {
   font-size: 14px;
   text-transform: capitalize;
   padding: 12px;
   cursor: pointer;
   border-style: solid;
   border-width: 2px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#header > .container > .pull-right > li > a:hover {
   text-decoration: none;
   cursor: pointer;
}

#header > .container > .pull-right > li > #facebook-btn {
   border-color: #23589A;
   color: #23589A;
}

#header > .container > .pull-right > li > #facebook-btn:hover {
   background: #23589A;
   color: #FFF;
}

#header > .container > .pull-right > li > #twitter-btn {
   border-color: #0095CF;
   color: #0095CF;
}

#header > .container > .pull-right > li > #twitter-btn:hover {
   background: #0095CF;
   color: #FFF;
}



/*
-------------------------------------------------------

                   HERO STYLES

-------------------------------------------------------
*/
#hero {
   position: relative;
   display: block;
   width: 100%;
   padding: 120px 0;
   background: #F05050;
}

#hero > .container > .pull-left {
   width: 50%;
   animation: 1s both bounce-down;
   -webkit-animation: 1s both bounce-down;
   -moz-animation: 1s both bounce-down;
}

#hero > .container > .pull-left > a {
   font-weight: bold;
   font-size: 34px;
   color: #FFF;
   text-decoration: none;
   text-transform: capitalize;
}

#hero > .container > .pull-left > p {
   font-size: 16px;
   color: #FFF;
   margin: 12px 0;
   opacity: 0.6;
   filter: alpha(opacity=60);
}



/*
-------------------------------------------------------

                   MAIN STYLES

-------------------------------------------------------
*/
#main, #main > .section {
   position: relative;
   display: block;
   width: 100%;
}

#main > .section {
   padding: 100px 0;
   border-bottom: 1px solid #E0E0E0;
}

#main > .section:last-child, #main > .section:last-of-type {
   border: none;
}

#main > .section > .container > .section-information {
   margin: 0 0 20px 0;
}

#main > .section > .container > .section-information > h2 {
   color: #222;
   text-transform: capitalize;
}

#main > .section > .container > .section-information > p {
   color: #666;
   margin: 10px 0 0 0;
}

#main > .section > .container > .gradient-list > div {
   position: relative;
   display: inline-block;
   width: 23%;
   margin: 1%;
   float: left;
}

#main > .section > .container > .gradient-list > div > a {
   display: block;
   color: #FFF;
   font-size: 16px;
   padding: 14% 4%;
   text-decoration: none;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#main > .section > .container > #gradient-code {
   position: relative;
   display: block;
   width: 100%;
   overflow: hidden;
}

#main > .section > .container > #gradient-code > div {
   width: 48%;
   margin: 1%;
}

#main > .section > .container > #gradient-code > div > h2 {
   margin: 0 0 1% 0;
}

#main > .section > .container > #gradient-code > div > div,
#main > .section > .container > #gradient-code > div > textarea {
   position: relative;
   display: block;
   width: 100%;
   height: 300px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

#main > .section > .container > #gradient-code > div > textarea {
   min-width: 100%;
   max-width: 100%;
   background: #EEE;
   padding: 10px;
   font-size: 14px;
   color: #222;
   border: 1px solid #DDD;
}

#main > .section > .container > #gradient-colors {
   position: relative;
   display: block;
   width: 100%;
   text-align: center;
   overflow: hidden;
}

#main > .section > .container > #gradient-colors > span {
   position: relative;
   display: inline-block;
   margin: 1%;
   text-transform: capitalize;
   font-size: 14px;
   color: #222;
   padding: 6px 8px;
   border: 1px solid #222;
   border-left: 12px solid #222;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}



/*
-------------------------------------------------------

                   FOOTER STYLES

-------------------------------------------------------
*/
#footer {
   position: relative;
   display: block;
   width: 100%;
   padding: 40px 0;
   background: #222;
}

#footer > .container > ul {
   list-style: none;
   padding: 0;
   margin: 0;
   overflow: hidden;
}

#footer > .container > ul.pull-left {
   padding: 9px 0;
}

#footer > .container > ul > li {
   display: inline-block;
   *display: inline;
   float: left;
}

#footer > .container > .pull-left > li {
   margin: 0 10px 0 0;
}

#footer > .container > .pull-right > li {
   margin: 0 0 0 10px;
}

#footer > .container > .pull-left > li > a,
#footer > .container > .pull-left > li > span {
   font-size: 14px;
   color: #888;
   text-transform: capitalize;
}

#footer > .container > .pull-right > li > a {
   display: block;
}

#footer > .container > .pull-right > li > a > i {
   width: 14px;
   height: 14px;
   font-size: 14px;
   padding: 10px;
   color: #222;
   background: #D2D2D2;
   text-align: center;
   border-radius: 100%;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

#footer > .container > .pull-right > li > a:hover > i {
   color: #FFF;
}

#footer > .container > .pull-right > li > a:hover > .fa-facebook {
   background: #3B5998;
}

#footer > .container > .pull-right > li > a:hover > .fa-google-plus {
   background: #D95232;
}

#footer > .container > .pull-right > li > a:hover > .fa-twitter {
   background: #00ABF0;
}

#footer > .container > .pull-right > li > a:hover > .fa-pinterest {
   background: #AE181F;
}

#footer > .container > .pull-right > li > a:hover > .fa-linkedin {
   background: #1C86BC;
}

#footer-copyright {
   position: relative;
   display: block;
   width: 100%;
   padding: 14px 0;
   background: #1E1E1E;
}

#footer-copyright > .container > span {
   font-size: 12px;
   color: #888;
   text-transform: capitalize;
}