/* ===============================
Default Theme
----------------------------------
Fonts:Raleway & open-sans
----------------------------------
Colors:
       Moonn Yellow:      #f4c613
       Grey:              #212226
       White smoke:       #f4f4f4
       White:             #fff     
       Black:             #000  
 ================================= */

 /* ===============================
                 Html, Body
  =================================*/

 html,
 body {
     height: 100%
 }

 body {
     color: #212226;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Raleway", sans-serif
 }

 p {
     font-family: "ope-sans", sans-serif;
     font-size: 13px;
     font-weight: 400;
     line-height: 24px;
 }

 section {
     background: #fff;
     overflow: hidden;
 }

 /* ===============================
                 Preloader
  =================================*/
 #preloader {
     background-color: #fff;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 9999;
 }

 #status {
     background-image: url("../img/preloader/anima.gif");
     background-repeat: no-repeat;
     width: 70px;
     height: 70px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -35px;
     margin-top: -35px;
 }

 /* ===============================
                 Home
  =================================*/
 #home {
     background: none;
     height: 100%;
 }

 #home-bg-video {

     position: fixed;
     top: 50%;
     left: 50%;
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform:
         translateX(-50%) translateY(-50%);
     min-height: 100%;
     min-width: 100%;
     width: auto;
     height: auto;
     z-index: -1;
     background: url(../img/videos/close.jpg) no-repeat;
     background-size: cover;
 }

 #home-overlay {
     background-color: rgba(0, 0, 0, 0.6);
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
 }

 #home-content {
     width: 100%;
     height: 100%;
     display: table;
 }

 #home-content-inner {
     display: table-cell;
     vertical-align: middle;
 }

 #home-heading h1 {
     color: #fff;
     font-size: 65px;
     font-weight: 100;
     text-transform: uppercase;
     margin: 0;
     display: inline-block;
 }

 #home-heading h1 span {
     color: #f4c613;
     font-weight: 500;
 }

 #home-text p {
     color: #fff;
     font-size: 17px;
     font-weight: 100;
     margin: 8px 0 30px 0;
 }

 /* ===============================
                 Buttons
  =================================*/
 .btn-general {
     font-family: 'Raleway', sans-serif;
     border-radius: 28px;
     font-size: 13px;
     text-transform: uppercase;
     margin: 0 6px;
     padding: 12px 46px 12px 46px;
     -webkit-transition: all .5s;
     transition: all .5s;
 }

 .btn-home {
     color: #fff;
     border: 1px solid #fff;
 }

 .btn-home:hover,
 .btn-home:focus {
     color: #fff;
     background-color: #f4c613;
     border: 1px solid #f4c613;
 }

 .btn-yellow {
     color: #fff;
     border: 1px solid #f4c613;
     background-color: #f4c613;
 }

 .btn-yellow:hover,
 .btn-yellow:focus {
     color: #fff;
     background-color: #212226;
     border: 1px solid #212226;
 }

 .btn-white {
     color: #212226;
     border: 1px solid #fff;
     background-color: #fff;
 }

 .btn-white:hover,
 .btn-white:focus {
     color: #fff;
     background-color: #212226;
     border: 1px solid #212226;
 }

 .btn-back-to-top {
     position: fixed;
     bottom: 20px;
     right: 20px;
     padding: 3px 15px;
     border-radius: 4px;
     font-size: 22px;
     display: none;
 }

 /* ===============================
                 Arrow Down
  =================================*/

 #arrow-down {
     position: absolute;
     left: 50%;
     bottom: 20px;
     color: #fff;
     font-size: 32px;
     width: 32px;
     height: 32px;
     text-align: center;
     margin-left: -16px;
     z-index: 1;
 }

 #arrow-down:hover,
 #arrow-down:focus {
     color: #f4c613;
 }

 /* ===============================
                 Content-Boxes
  =================================*/
 .content-box-lg {
     padding: 120px 0;
 }

 .content-box-md {
     padding: 100px 0;
 }

 .content-box-sm {
     padding: 90px 0;
 }

 /* ================================
    Vertical/horizontal Headings
  =================================*/
 .vertical-heading h5 {
     color: #f4c613;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
     word-spacing: 9px;
     display: inline-block;
     -webkit-transform: rotate(-90deg);
     transform: rotate(-90deg);
     position: relative;
     top: 60px;
     left: -53px;
 }

 .vertical-heading h2 {
     margin: 0 0 0 35px;
 }

 .horizontal-heading h2,
 .vertical-heading h2 {
     font-size: 42px;
     font-weight: 100;
     line-height: 45px;
 }

 .horizontal-heading {
     margin-bottom: 80px;

 }

 .horizontal-heading h5 {
     font-size: 16px;
     color: #f4c613;
     text-transform: uppercase;
     display: inline-block;
     margin-bottom: 10px;
 }

 .horizontal-heading h2 {
     margin: 0;
 }

 /* ===============================
                 About 01
  =================================*/


 #about-right p:first-child {
     margin-bottom: 30px;
 }

 #about-bottom {
     margin-top: 60px;
 }

 #about-bottom img {
     margin: 0 auto;
 }

 /*===============================]
               About 02
=================================*/
 #about-02 {
     background-color: #f4f4f4;
 }

 .about-item {
     background-color: #fff;
     padding: 80px 30px;
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0 .1);
     box-shadow: 0 0 10px rgba(0, 0, 0, .1);
 }

 .about-item i {
     font-size: 42px;
     margin: 0;
 }

 .about-item h3 {
     font-size: 24px;
     margin-bottom: 10px;
 }

 .about-item hr {
     width: 45px;
     height: 3px;
     background-color: #f4c613;
     margin: 0 auto;
     border: none;
 }

 .about-item p {
     margin-top: 20px;
 }

 /* Hover state*/

 .about-item:hover {
     background-color: #f4c613;
 }

 .about-item:hover i,
 .about-item:hover h3,
 .about-item:hover p {
     color: #fff;
 }

 .about-item:hover i {
     transform: translateY(-20px);
 }

 /*Smooth transition*/
 .about-item {
     -webkit-transition: all 400ms ease-in-out;
     transition: all 400ms ease-in-out;
 }

 /* ===============================
                 Team
  =================================*/
 #team-left .vertical-heading {
     min-height: 160px;
 }

 .team-member {
     margin: 8px;
     position: relative;
 }

 .team-member-overlay {
     background-color: rgba(33, 34, 38, .9);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     opacity: 0;
     -webkit-transition: all 300ms linear;
     transition: all 300ms linear;
 }

 .team-member-info {
     width: 100%;
     height: 100%;
     padding: 80px 0px;
 }

 .team-member-info h6 {
     color: #f4c613;
     font-size: 16px;
     margin: 0;
 }

 .team-member-info p {
     color: #fff;
 }

 .team-member:hover .team-member-overlay {
     opacity: 1;
 }

 /* ===============================
                 Social Icons
  =================================*/
 ul.social-list {
     padding: 0;
     margin-top: 20px;
 }

 ul.social-list li {
     display: inline-block;
     padding: 0;
 }

 ul.social-list li a {
     border: 1px solid #fff;
     width: 35px;
     height: 35px;
     display: inline-block;
     line-height: 35px;
     color: #fff;
     border-radius: 50%;
     -webkit-transition: all 400ms linear;
     transition: all 400ms linear;
 }

 ul.social-list li:nth-child(1) a:hover {
     background: #3b5998;
     border-color: transparent;
 }

 ul.social-list li:nth-child(2) a:hover {
     background: #00aced;
     border-color: transparent;
 }

 ul.social-list li:nth-child(3) a:hover {
     background: #dd4b39;
     border-color: transparent;
 }

 /* ===============================
         Slider buttons
  =================================*/

 .owl-theme .owl-nav [class*=owl-] {
     color: #212226;
     font-size: 40px;
     background: none;
     margin: 0;
 }

 .owl-theme .owl-nav [class*=owl-]:hover {
     background: none;
     color: #212226;
 }


 /* ===============================
         Skills
  =================================*/

 .skills {
     margin: 20px;
 }

 .skills h4 {
     line-height: 62px;
     margin: 0;
     font-weight: normal;
 }

 .progress {
     height: 25px;
     border-radius: 0px;
     background: #efefef;
     overflow: visible;
 }

 .progress-bar {
     background-color: #f4c613;
     position: relative;
 }

 .progress-bar span {
     font-size: 11px;
     font-weight: 100;
     font-family: "Open Sans", sans-serif;
     background: #212226;
     padding: 3px;
     position: absolute;
     left: 97%;
     top: -47px;
 }

 .progress-bar span:before {
     content: "";
     border-top: 8px solid #212226;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     position: absolute;
     bottom: -8px;
     left: 23%;
 }

 /* ===============================
         Statement Section
  =================================*/
 /*#statement .content-box-lg {
    background: rgba(0,0,0,0.1)
};*/

 #statement {
     background: url("../img/statement/apartment.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 #statement .content-box-lg {
     background: rgba(0, 0, 0, 0.3)
 }

 ;

 #tech-statement h3 {
     color: #fff;
     font-size: 28px;
     line-height: 45px;
 }

 #tech-statement p {
     font-size: 14px;
     color: #f4c613;
     font-family: "Raleway", sans-serif;
     margin-top: 8px;
 }

 /* ===============================
         Services 01
  =================================*/
 #services-01 img {
     margin: 60px 0;

 }

 .service {
     margin: 35px 0;
 }

 .service .icon {
     font-size: 42px;
     margin: 0;
     -webkit-transition: all 400ms linear;
     transition: all 400ms linear;
 }

 .service:hover .icon {
     color: #f4c613;
     -webkit-transform: translateX(-20px);
     transform: translateX(-20px);
 }

 .service h5 {
     font-size: 12px;
     text-transform: uppercase;
     color: #f4c613;
     margin: 0 0 6px 0;
 }

 .service:hover h5 {
     color: #212226;
 }

 .service h4 {
     font-size: 24px;
     margin: 0 0 8px 0;
 }

 .service p {
     line-height: normal;
 }

 /* ===============================
    Services 02 (Responsive Tabs)
  =================================*/

 #services-02 {
     background: #f4f4f4;
 }

 #services-tabs ul {
     margin-bottom: 40px;
 }

 #services-tabs ul li {
     padding: 5px 30px;
 }

 #services-tabs ul li a {
     font-family: "Raleway", sans-serif;
     font-size: 13px;
     color: #212226;
     text-transform: uppercase;
     font-weight: 400;
     padding: 0;
     text-decoration: none;
 }

 /* Tab Active State*/
 #services-tabs ul li.r-tabs-state-active a {
     color: #f4c613;
     font-weight: 700;
     border-bottom: 3px solid #f4c613;
     padding-bottom: 5px;
     -webkit-transition: border-color 300ms linear;
     transition: border-color 300ms linear;
 }

 .service-tab .col-md-6 {
     padding: 0;
 }

 .service-tab img {
     width: 100%;
     margin: 0 auto;
 }

 .service-tab .tab-bg {
     background: #fff;
     padding: 59px 30px;
     min-height: 481px;
 }

 .service-tab h2 {
     font-size: 48px;
     color: #bbb;
     margin-bottom: 20px;
     font-weight: 100;
 }

 .service-tab h3 {
     font-size: 32px;
     margin-bottom: 30px;
 }

 .service-tab p {
     line-height: 24px;
     margin-bottom: 30px;
 }

 /* ===============================
        Portfolio
  =================================*/
 #portfolio {
     padding-bottom: 160px;
 }

 #portfolio .vertical-heading {
     margin-bottom: 50px;
 }

 .row.no-gutters [class*=col-] {
     padding: 0;
 }

 .portfolio-item {
     overflow: hidden;
     position: relative;
 }

 /* Filter CSS*/
 #isotope-filters {
     margin-bottom: 10px;
     padding: 20px 25px 20px 0;
 }

 #isotope-filters button {
     font-family: "Raleway", sans-serif;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     background: transparent;
     -webkit-box-shadow: none;
     box-shadow: none;
     padding-right: 35px;
     outline: 0;
 }

 #isotope-filters button span {
     display: block;
     padding-bottom: 5px;
     -webkit-transition: border-color 4s ease-in-out;
     transition: border-color 4s ease-in-out;
 }

 #isotope-filters button.active span {
     color: #f4c613;
     border-bottom: 3px solid #f4c613;
 }

 /* Zoom Effect*/
 .portfolio-item img {
     width: 100% height:auto;
     -webkit-transition: -webkit-transform .5s ease;
     transition: -webkit-transform .5s ease;
     transition: transform .5s ease;
     transition: transform .5s ease,
         -webkit-transform .5s ease;
 }

 .portfolio-item:hover img {
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
 }

 /*Overlay efffect*/
 .portfolio-item-overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(14, 14, 17, 0.9);
     cursor: -webkit-zoom-in;
     cursor: zoom-in;
     opacity: 0;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }

 /* Item Details Effects*/
 .portfolio-item-details {
     width: 100%;
     position: absolute;
     top: 50%;
     left: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
 }

 .portfolio-item-details h3 {
     color: #f4c613;
     text-transform: uppercase;
     font-size: 30px;
     margin: 0;
     padding: 0;
     -webkit-transform: translateY(-20%);
     transform: translateY(-20%);
     -webkit-transition: all 0.5s;
     transition: all 0.5s;

 }

 .portfolio-item-details span {
     display: inline-block;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #fff;
     height: 6px;
     width: 30px;
     margin: 11px auto 5px auto;
 }

 .portfolio-item-details p {
     font-size: 17px;
     color: #fff;
     text-transform: uppercase;
     margin: 0;
     padding: 0;
     -webkit-transform: translateY(20%);
     transform: translateY(20%);
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
 }

 /*Show Overlay on mouse Hover*/
 .portfolio-item:hover .portfolio-item-details h3 {
     -webkit-transform: translateY(0);
     transform: translateY(0);
 }

 .portfolio-item:hover .portfolio-item-details p {
     -webkit-transform: translateY(0);
     transform: translateY(0);
 }

 .portfolio-item:hover .portfolio-item-overlay {
     opacity: 1;
 }

 /* ===============================
        Testimonials
  =================================*/

 #testimonials {
     background: #f4f4f4;
     padding: 45px;
     overflow: visible;
 }

 #testimonials .vertical-heading {
     padding: 80px 0;
     margin-bottom: 50px;
 }

 #testimonial-slider {
     background: #f4c613;
     top: -120px;
 }

 .testimonial .row {
     margin-bottom: 25px;
 }

 .testimonial {
     padding: 20px 45px 0 45px;
     color: #fff;
 }

 .testimonial h3 {
     font-size: 32px;
     line-height: 35px;
 }

 .testimonial .stars {
     font-size: 20px;
     margin: 20px 0 10px 0;
 }

 .testimonial p {
     line-height: normal;
     margin: 0;
     margin-top: 5px;
     margin-bottom: 20px;
 }

 .author .author-name-des {
     width: 106px;
     margin-top: 25px;
     text-align: left;
 }

 .author .author-name-des p {
     margin: 0;
 }

 /* ===============================
       Pricing
  =================================*/
 .pricing-table {
     -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
     border-radius: 6px;
     padding: 32px 21px;
     -webkit-transition: all 400ms linear;
     transition: all 400ms linear;
 }

 .pricing-table:hover {
     background: #f4c613;
 }

 .pricing-table .type h4 {
     color: #f4c613;
     font-size: 24px;
     margin-bottom: 25px;
 }

 .pricing-table .price {
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #e0e0e0;
     padding: 24px 0;
 }

 .pricing-table .price h2 {
     font-family: "Open Sans", sans-serif;
     font-size: 42px;
     font-weight: 100;
     margin: 0 0 0 24px;
     position: relative;
 }

 .pricing-table .price h2 span {
     font-family: "Raleway", sans-serif;
 }

 .pricing-table .price h2 span.dollar {
     font-size: 18px;
     font-weight: 400;
     position: absolute;
     left: -20px;
     top: 5px;
 }

 .pricing-table .price h2 span.month {
     font-size: 11px;
     font-weight: 400;
     position: absolute;
     left: 5px;
     bottom: -12px;
 }

 .pricing-table .price p {
     line-height: normal;
     font-weight: 200;
     margin: 0;
     padding: 0;
 }

 .pricing-table ul.package {
     list-style: none;
     padding: 20px 0;
 }

 .pricing-table ul.package li {
     font-family: "Open Sans", sans-serif;
     font-size: 13px;
     font-weight: 400;
     line-height: 40px;

 }

 .pricing-table ul.package li i {
     width: 24px;
 }

 .pricing-table .btn-yellow,
 .pricing-table.black .btn-white {
     width: 96%;
 }

 .pricing-table:hover h4,
 .pricing-table:hover h2,
 .pricing-table:hover p,
 .pricing-table:hover ul.package {
     color: #fff;
 }

 .pricing-table:hover .btn-yellow {
     background: #fff;
     color: #212226;
     border: 1px solid #fff;
 }

 .pricing-table .btn-yellow:hover,
 .pricing-table .btn-yellow:focus {
     background: #212226;
     color: #fff;
     border: 1px solid #212226;
 }

 /*Black pricing Table*/
 .pricing-table.black {
     background: #212226;
     color: #fff;
 }

 .pricing-table.black .type h4 {
     color: #fff;
 }

 .pricing-table.black:hover {
     background: #f4c613;
 }

 /* ===============================
          Stats
  =================================*/

 #stats {
     background: url("../img/stats/stats1.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 #stats .content-box-md {
     background: rgba(0, 0, 0, 0.8);
 }

 stats .vertical-heading {
     margin-bottom: 50px;
 }

 #stats .vertical-heading h2 {
     color: #fff;

 }

 .stats-item {
     background: rgba(61, 68, 0.6);
     border-radius: 4px;
     min-height: 170px;
     padding: 25px 50px;
     -webkit-transition: all 400ms linear;
     transition: all 400ms linear;
 }

 .stats-item i {
     font-size: 42px;
     color: #f4c613;
     margin: 0 0 6px 0;
     -webkit-transition: all 400ms linear;
     transition: all 400ms linear;
 }

 .stats-item h3 {
     font-size: 32px;
     color: #fff;
     margin: 5px 0 5px 0;
 }

 .stats-item p {
     color: #fff;
     margin: 0;
 }

 .stats-item:hover {
     background: #f3c613;
 }

 .stats-item:hover i {
     color: #212226;
     -webkit-transform: translateY(-20px);
     transform: translateY(-20px);
 }

 /* ===============================
          Clients
  =================================*/
 #clients .horizontal-heading {
     margin-bottom: 30px;

 }

 #clients-list {
     padding: 45px 0 0 0;
 }

 .clients {
     padding: 0 10px;
     max-width: 150px;
     margin: 0 auto;
     line-height: 100px;
 }

 .client img {
     display: inline-block !important;
 }

 /* ===============================
          Blog
  =================================*/
 #blog {
     background: #f4f4f4;
 }

 #blog-left p {
     margin: 25px 0;
 }

 #blog-btn a {
     margin: 0;
 }

 .blog-post {
     background: #fff;
     padding: 20px;
     -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
     border-radius: 6px;
 }

 .blog-post h4 {
     line-height: 40px;
     margin: 0;
 }

 .blog-post > p {
     line-height: 24px;
     margin: 0;
     font-weight: 300;
 }

 .blog-post a {
     display: inline-block;
     margin-top: 25px;
     text-transform: uppercase;
     font-family: "Raleway", sans-serif;
     color: #f4c613;
     font-size: 12px;
     font-weight: 500;
     text-decoration: none;
     -webkit-transition: all 400ms linear;
     transition: all 400ms linear;
 }

 .blog-post a:hover {
     color: #212226;
 }

 .blog-post .post-meta {
     border-top: 1px solid #e0e0e0;
     margin-top: 30px;
     padding-top: 10px;
 }

 .blog-post .post-meta p {
     font-size: 11px;
     font-family: "Raleway", sans-serif;
     line-height: 24px;
     font-weight: 500;
     margin: 0;
 }

 /* ===============================
          Contact
  =================================*/
 /*Contact Left*/
 #contact-left p {
     margin: 25px 0 20px;
 }

 ul.office-details {
     list-style: none;
     padding: 0;
 }

 ul.office-details li {
     font-family: "Open Sans", sans-serif;
     margin-top: 12px;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
 }

 ul.office-details li i {
     font-size: 20px;
     width: 45px;
 }

 #contact-left ul.social-list li a {
     color: #212226;
     border: 1px solid #212226;
     text-align: center;
 }

 #contact-left ul.social-list li a:hover {
     color: #fff;
     border-color: transparent;
 }

 /*Contact Right*/
 #contact-right {
     padding: 25 30px;
     -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
     border-radius: 4px;
 }

 #contact-right h4 {
     font-size: 24px;

 }

 #contact-right p {
     margin-bottom: 25px;
 }

 #contact-right form .form control {
     font-family: "Open Sans", sans-serif;
     padding: 10px 15px;
     font-size: 12px;
     line-height: 24px;
 }

 #contact-right form textarea.form control {
     min-height: 164px;
 }

 /* ===============================
             Footer
  =================================*/
 footer {
     background: #212226;
     padding: 30px;
 }

 footer p {
     color: #fff;
     line-height: 20px;
 }

 footer p span {
     color: #f4c613;
 }

 /* ===============================
             Navigation
  =================================*/
 .navbar {
     padding: 35px 0 20px 0;
     -webkit-transition: all 300ms linear;
     transition: all 300ms linear;
 }

 .site-nav-wrapper {
     padding: 0 85px;
 }

 .navbar-brand {
     padding: 13px 15px;
 }

 ul.navbar-nav > li > a {
     font-family: "Raleway", sans-serif;
     color: #fff;
     font-size: 13px;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 ul.navbar-nav > li > a:hover,
 ul.navbar-nav > li > a:focus {
     background: none;
     color: #f4c613;
 }

 /*White Navigation*/
 .white-nav-top {
     background: #fff;
     padding: 10px 0;
     -webkit-box-shadow: 0 8px 6px -9px #999;
     box-shadow: 0 8px 6px -9px #999;
     z-index: 2;
 }

 .white-nav-top ul.navbar-nav > li > a {
     color: #212226;
 }

 .white-nav-top ul.navbar-nav > li > a:hover,
 .white-nav-top ul.navbar-nav > li > a:focus {
     color: #f4c613;
 }

 /*sroll spy active state*/
 .white-nav-top ul.navbar-nav > li.active > a {
     color: #f4c613;
     font-weight: 500;
 }

 /* ===============================
         Mobile Menu
  =================================*/
 .navbar-header {
     position: relative;

 }

 #mobile-nav-open-btn {
     font-size: 30px;
     color: #f4c613;
     cursor: pointer;
     z-index: 2;
     position: absolute;
     right: 0;
     top: 6px;

     /*Hide mobile nav open btn*/
     display: none;
 }

 #mobile-nav {
     height: 100%;
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 3;
     background-color: rgba(255, 255, 255, .9);
     -webkit-transition: all 300ms linear;
     transition: all 300ms linear;
     overflow: hidden;
 }

 #mobile-nav-close-btn {
     font-family: "Raleway", sans-serif;
     font-size: 70px;
     color: #212226;
     font-weight: 400;
     cursor: pointer;
     position: absolute;
     top: -9px;
     right: 13px;
     -webkit-transition: .3s;
     transition: .3s;
 }

 #mobile-nav-content {
     text-align: center;
     width: 100%;
     margin-top: 30px;
     position: relative;
     top: 10%;

 }

 #mobile-nav ul li {
     margin-bottom: 20px;
 }

 #mobile-nav a {
     font-family: "Raleway", sans-serif;
     font-size: 18px;
     color: #212226;
     font-weight: 400;
     text-transform: uppercase;
     display: inline;
     -webkit-transition: .3s;
     transition: .3s;
 }

 #mobile-nav a:hover,
 #mobile-nav a:focus,
 #mobile-nav-close-btn:hover,
 #mobile-nav-close-btn:focus {
     color: #f4c613;
     background: none;
 }

 /*Mobile menu sroll spy active state*/
 .white-nav-top #mobile-nav ul.nav > li.active > a {
     color: #f4c613;
     font-weight: 500;
 }

 /* ===============================
         Animation
  =================================*/
#home-heading-1 {    
    animation-duration: 1.5s;
    animation-delay: 1s;
}