/*************************************

Template Name: Rocky - Personal & Portfolio Responsive HTML Template
Author: zebtheme
Version: 1.0
Design and Developed by: zwebtheme

NOTE: This is main stylesheet of the template.

****************************************/
 /*================================================
            Index of contents  
==================================================
 
0. BASE CSS
1. PRELOADER
2.SCROLL-TOP-BUTTON
3. SECTION TITLE AND SECTION PADDING
4. INTRO SECTION
    a. HEADER AREA
    b. WELCOME AREA
5. ABOUT SECTION
6.SKILL SECTION
7. SERVICES SECTION
8. QUOTES AREA
9. WORK SECTION
10.TESTIMONIAL SECTION
11. CONTACT INFO SECTION
12. FOOTER SECTION

====================================================
            End index content 
===================================================*/
 
@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Quicksand:wght@300..700&display=swap');

 /*================================================
             0 BASE CSS
==================================================*/
 
 .alignleft {
     float: left;
     margin-right: 15px;
 }
 
 .alignright {
     float: right;
     margin-left: 15px;
 }
 
 .aligncenter {
     display: block;
     margin: 0 auto 15px;
 }
 
 a:focus {
     outline: 0 solid
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin: 0 0 15x;
     font-weight: 700;
     color: #666;
 }
 
 p {
     color: #999;
 }
 
 html,
 body {
     height: 100%
 }
 
 body {
     font-family: 'Quicksand', sans-serif;
     font-weight: 600;
     letter-spacing: 1px;
     line-height: 24px;
 }
 
 a:hover {
     text-decoration: none
 }

 /* Remove Chrome Input Field's Unwanted Yellow Background Color */
 
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus {
     -webkit-box-shadow: 0 0 0px 1000px white inset !important;
 }
 
 
 /*========================
    DEMO PANEL CSS
=========================*/
 
 .demo_panel_box {
     position: fixed;
     width: 180px;
     height: 135px;
     background: #e6e6e6;
     left: -180px;
     top: 180px;
     text-align: center;
     z-index: 99;
 }
 
 .color_panel_box {
     margin-top: 20px;
     padding: 0 12px;
 }
 
 .spiner_button {
     height: 50px;
     width: 50px;
     background: #fff;
     position: absolute;
     display: block;
     right: -50px;
     ;
     top: 0px;
     z-index: 99;
     text-align: center;
     font-size: 30px;
     color: #000;
     padding-top: 10px;
     cursor: pointer;
     border-radius: 0 10px 10px 0;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 }
 
 .color_panel_box span {
     width: 30px;
     height: 30px;
     margin-left: 15px;
     display: block;
     float: left;
     margin-bottom: 15px;
     cursor: pointer;
 }
 
 .color_panel_box span.red_color {
     background-color: #DC143C;
 }
 
 .color_panel_box span.blue_color {
     background-color: #61bae4;
 }
 
 .color_panel_box span.yellow_color {
     background-color: #ffe162;
 }
 
 .color_panel_box span.purple_color {
     background-color: #663399;
 }
 
 .color_panel_box span.pink_color {
     background-color: #D2527F;
 }
 
 .color_panel_box span.green_color {
     background-color: #2db4a7;
 }


 /*======= yellow =========*/
    .yellow_color_theme .welcome-area:after,
    .yellow_color_theme .custom-navbar.top-nav-collapse,
    .yellow_color_theme .set_11_buttons > a,
    .yellow_color_theme .portfolio-overlay,
    .yellow_color_theme .single-testimonial i,
    .yellow_color_theme .btn.theme-color,
    .yellow_color_theme a.btn.theme-color,
    .yellow_color_theme #scroll-top-area,
    .yellow_color_theme .single-testimonial i,
    .yellow_color_theme .owl-theme .owl-controls .owl-page span,
    .yellow_color_theme .skills .progress-bar,
    .yellow_color_theme .custom-navbar{  background: #ffe162;}

    
    .yellow_color_theme .single-testimonial i,
    .yellow_color_theme .main-menu ul.navbar-nav li.active a.theme-color,
    .yellow_color_theme .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a.theme-color,
    .yellow_color_theme .single-testimonial i,
    .yellow_color_theme .full-adress  a,
    .yellow_color_theme .footer-text strong{    color: #001E9D; }
 
    .yellow_color_theme .single-process i,
    .yellow_color_theme .social-icon i { color: #ffe162; }

    .yellow_color_theme .portfolio-overlay .category,
    .yellow_color_theme .btn.theme-color,
    .yellow_color_theme a.btn.theme-color,
    .yellow_color_theme .set_11_buttons > a,
    .yellow_color_theme .btn.theme-color.btn-effect.disabled:hover,
    .yellow_color_theme .skills .progress-bar,
    .yellow_color_theme .skills .progress-bar span{ color: #fff;}

    .yellow_color_theme .portfolio-overlay .magnify-icon:hover,
    .yellow_color_theme .skills .progress-bar span,
    .yellow_color_theme .skills .progress-bar > span::before {    background: #001E9D; }

    .yellow_color_theme .form-control,
    .yellow_color_theme .full-adress .contact-padding {border-color: #001E9D;}

    .yellow_color_theme .form-control {color: #999;}


 /*======= end yellow =========*/
 /*=========== red ===========*/
 
    .red_color_theme .welcome-area:after,
    .red_color_theme .custom-navbar.top-nav-collapse,
    .red_color_theme .set_11_buttons > a,
    .red_color_theme .portfolio-overlay,
    .red_color_theme .btn.theme-color,
    .red_color_theme a.btn.theme-color,
    .red_color_theme #scroll-top-area,
    .red_color_theme .single-testimonial i,
    .red_color_theme .owl-theme .owl-controls .owl-page span,
    .red_color_theme .skills .progress-bar,
    .red_color_theme .custom-navbar{background: #DC143C;}
 
    
    .red_color_theme .main-menu ul.navbar-nav li.active a.theme-color,
    .red_color_theme .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a.theme-color,
    .red_color_theme .single-testimonial i,
    .red_color_theme .full-adress  a,
    .red_color_theme .footer-text strong { color: #23EBC3; }

    .red_color_theme .single-process i,
    .red_color_theme .social-icon i {color: #DC143C;}

    .red_color_theme .portfolio-overlay .category,
    .red_color_theme .set_11_buttons > a,
    .red_color_theme .btn.theme-color,
    .red_color_theme a.btn.theme-color,
    .red_color_theme .btn.theme-color.btn-effect.disabled:hover,
    .red_color_theme .skills .progress-bar,
    .red_color_theme .skills .progress-bar span {color: #fff;}

    .red_color_theme .portfolio-overlay .magnify-icon:hover,
    .red_color_theme .skills .progress-bar span,
    .red_color_theme .skills .progress-bar > span::before {  background: #23EBC3;}
  
    .red_color_theme .form-control,
    .red_color_theme .full-adress .contact-padding {border-color: #23EBC3;}

    .red_color_theme .form-control {color: #999;}

  
 /*=========== end red ===========*/
 /*=========== green ===========*/
 
    .green_color_theme .welcome-area:after,
    .green_color_theme .custom-navbar.top-nav-collapse,
    .green_color_theme .set_11_buttons > a,
    .green_color_theme .portfolio-overlay,
    .green_color_theme .btn.theme-color,
    .green_color_theme a.btn.theme-color,
    .green_color_theme #scroll-top-area,
    .green_color_theme .single-testimonial i,
    .green_color_theme .owl-theme .owl-controls .owl-page span,
    .green_color_theme .skills .progress-bar,
    .green_color_theme .custom-navbar {background: #44b272;}
  
    
    .green_color_theme .main-menu ul.navbar-nav li.active a.theme-color,
    .green_color_theme .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a.theme-color,
    .green_color_theme .single-testimonial i,
    .green_color_theme .full-adress  a,
    .green_color_theme .footer-text strong {  color: #BB4D8D; }

    .green_color_theme .single-process i,
    .green_color_theme .social-icon i {color: #44b272;}

    .green_color_theme .portfolio-overlay .category,
    .green_color_theme .set_11_buttons > a,
    .green_color_theme .btn.theme-color,
    .green_color_theme a.btn.theme-color,
    .green_color_theme .btn.theme-color.btn-effect.disabled:hover,
    .green_color_theme .skills .progress-bar,
    .green_color_theme .skills .progress-bar span {color: #fff;}

    .green_color_theme .portfolio-overlay .magnify-icon:hover,
    .green_color_theme .skills .progress-bar span,
    .green_color_theme .skills .progress-bar > span::before{  background: #BB4D8D;}

    .green_color_theme .form-control,
    .green_color_theme .full-adress .contact-padding {border-color: #BB4D8D;}

    .green_color_theme .form-control {color: #999;}
 

 /*=========== end green ===========*/
 /*=========== pink ===========*/
 
    .pink_color_theme .welcome-area:after,
    .pink_color_theme .custom-navbar.top-nav-collapse,
    .pink_color_theme .set_11_buttons > a,
    .pink_color_theme .portfolio-overlay,
    .pink_color_theme .btn.theme-color,
    .pink_color_theme a.btn.theme-color,
    .pink_color_theme #scroll-top-area,
    .pink_color_theme .single-testimonial i,
    .pink_color_theme .owl-theme .owl-controls .owl-page span,
    .pink_color_theme .skills .progress-bar,
    .pink_color_theme .custom-navbar {background: #D2527F;}
  
    
    .pink_color_theme .main-menu ul.navbar-nav li.active a.theme-color,
    .pink_color_theme .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a.theme-color,
    .pink_color_theme .single-testimonial i,
    .pink_color_theme .full-adress  a,
    .pink_color_theme .footer-text strong { color: #2DAD80;}

    .pink_color_theme .single-process i,
    .pink_color_theme .social-icon i {color: #D2527F;}

    .pink_color_theme .portfolio-overlay .category,
    .pink_color_theme .set_11_buttons > a,
    .pink_color_theme .btn.theme-color,
    .pink_color_theme a.btn.theme-color,
    .pink_color_theme .btn.theme-color.btn-effect.disabled:hover,
    .pink_color_theme .skills .progress-bar,
    .pink_color_theme .skills .progress-bar span {color: #fff;}

    .pink_color_theme .portfolio-overlay .magnify-icon:hover,
    .pink_color_theme .skills .progress-bar span,
    .pink_color_theme .skills .progress-bar > span::before {  background: #2DAD80;}

    .pink_color_theme .form-control,
    .pink_color_theme .full-adress .contact-padding {border-color: #2DAD80;}

    .pink_color_theme .form-control {color: #999;}

  
 /*=========== end pink ===========*/
 /*=========== purple ===========*/
 
    .purple_color_theme .welcome-area:after,
    .purple_color_theme .custom-navbar.top-nav-collapse,
    .purple_color_theme .set_11_buttons > a,
    .purple_color_theme .portfolio-overlay,
    .purple_color_theme .btn.theme-color,
    .purple_color_theme a.btn.theme-color,
    .purple_color_theme #scroll-top-area,
    .purple_color_theme .single-testimonial i,
    .purple_color_theme .owl-theme .owl-controls .owl-page span,
    .purple_color_theme .skills .progress-bar,
    .purple_color_theme .custom-navbar {background: #6f70b2;}

    
    .purple_color_theme .main-menu ul.navbar-nav li.active a.theme-color,
    .purple_color_theme .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a.theme-color,
    .purple_color_theme .single-testimonial i ,
    .purple_color_theme .full-adress  a,
    .purple_color_theme .footer-text strong { color: #99CC66;}

    .purple_color_theme .single-process i,
    .purple_color_theme .social-icon i{color: #663399;}

    .purple_color_theme .set_11_buttons > a,    
    .purple_color_theme .portfolio-overlay .category,
    .purple_color_theme .btn.theme-color,
    .purple_color_theme a.btn.theme-color,
    .purple_color_theme .btn.theme-color.btn-effect.disabled:hover,
    .purple_color_theme .skills .progress-bar,
    .purple_color_theme .skills .progress-bar span {color: #fff;}

    .purple_color_theme .portfolio-overlay .magnify-icon:hover,
    .purple_color_theme .skills .progress-bar span,
    .purple_color_theme .skills .progress-bar > span::before {  background: #99CC66;}

    .purple_color_theme .form-control,
    .purple_color_theme .full-adress .contact-padding {border-color: #99CC66;}

    .purple_color_theme .form-control {color: #999;}
  
 
 /*=========== end purple ===========*/
 /*=========== blue ===========*/
 
    .blue_color_theme .welcome-area:after,
    .blue_color_theme .custom-navbar.top-nav-collapse,
    .blue_color_theme .set_11_buttons > a,
    .blue_color_theme .portfolio-overlay,
    .blue_color_theme .btn.theme-color,
    .blue_color_theme a.btn.theme-color,
    .blue_color_theme #scroll-top-area,
    .blue_color_theme .single-testimonial i,
    .blue_color_theme .owl-theme .owl-controls .owl-page span,
    .blue_color_theme .skills .progress-bar,
    .blue_color_theme .custom-navbar {background: #61bae4;}

    
    .blue_color_theme .main-menu ul.navbar-nav li.active a.theme-color,
    .blue_color_theme .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a.theme-color,
    .blue_color_theme .single-testimonial i,
    .blue_color_theme .full-adress  a,
    .blue_color_theme .footer-text strong {  color: #017195;}

    .blue_color_theme .single-process i,
    .blue_color_theme .social-icon i {color: #9dcfe8;}

    .blue_color_theme .portfolio-overlay .category,
    .blue_color_theme .set_11_buttons > a,
    .blue_color_theme .btn.theme-color,
    .blue_color_theme a.btn.theme-color,
    .blue_color_theme .btn.theme-color.btn-effect.disabled:hover,
    .blue_color_theme .skills .progress-bar,
    .blue_color_theme .skills .progress-bar span {color: #fff;}

    .blue_color_theme .portfolio-overlay .magnify-icon:hover,
    .blue_color_theme .skills .progress-bar span,
    .blue_color_theme .skills .progress-bar > span::before {  background: #017195;}

    .blue_color_theme .form-control,
    .blue_color_theme .full-adress .contact-padding {border-color: #017195;}

    .blue_color_theme .form-control {color: #9cd0e8;}

  
 /*=========== end red ===========*/
 /*================================================
             1 PRELOADER
==================================================*/
 
 .preloader {
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     background-color: #fff;
     z-index: 9999999;
 }
 
 .preloader .spinner {
     left: 50%;
     margin-left: -20px;
     margin-top: -20px;
     position: absolute;
     top: 50%;
 }
 
 .spinner {
     width: 40px;
     height: 40px;
     background-color: #333;
     margin: 100px auto;
     -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
     animation: sk-rotateplane 1.2s infinite ease-in-out;
 }
 
 @-webkit-keyframes sk-rotateplane {
     0% {
         -webkit-transform: perspective(120px)
     }
     50% {
         -webkit-transform: perspective(120px) rotateY(180deg)
     }
     100% {
         -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
     }
 }
 
 @keyframes sk-rotateplane {
     0% {
         transform: perspective(120px) rotateX(0deg) rotateY(0deg);
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
     }
     50% {
         transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
         -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
     }
     100% {
         transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
         -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     }
 }
 /*================================================
            2 scroll-top-button
==================================================*/
 
 #scroll-top-area {
    /* background: rgba(0, 0, 0, 0.4);*/
     position: fixed;
     cursor: pointer;
     bottom: 10px;
     right: 10px;
     border-radius: 4px;
     z-index: 8;
     display: none;
     transition: all 1s;
     opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
 }

 #scroll-top-area:hover{opacity: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
 
 #scroll-top-area i {
     color: #fff;
     padding: 8px 12px;
     font-size: 25px;
 }
 /*================================================
     3 SECTION TITLE AND SECTION PADDING
==================================================*/
 
 .section-title {
     text-align: center;
     color: #000;
     margin-bottom: 65px;
 }
 
 .section-title h2 {
     font-size: 25px;
     position: relative;
     display: inline-block;
     margin: 10px 0 10px 0;
     border: 1px solid #ccc;
     padding: 6px 20px;
     text-transform: uppercase;
 }
 
 .section-title p {
     font-size: 15px;
 }
 
 .section-padding {
     padding: 100px 0;
 }
 /*================================================
             4 INTRO SECTION
==================================================*/
 
 .intro-section {
     height: 100%;
 }
 
 .welcome-area:after {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
    /* background: #000;*/
     opacity: .7;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
     z-index: -1;
 }
 
 #particles-js {
     position: absolute;
     width: 100%;
     height: 100vh;
     top: 0;
     left: 0;
 }
 
 .welcome-area {
     background: url(images/tandarts_gcboven.jpg);
     /*** intro-section background image ***/
     background-size: cover;
     z-index: 1;
     position: relative;
     height: 100vh;
 }
 /*================================================
             a HEADER AREA
==================================================*/
 
 .custom-navbar {
     background: transparent;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
 }
 
 .logo a {
     color: #fff;
     display: inline-block;
     font-size: 22px;
     font-weight: 500;
     letter-spacing: 3px;
     margin-top: 28px;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
 }
 
 .logo a:focus {
     text-decoration: none;
 }
 
 .main-menu {
     text-transform: uppercase;
 }
 
 .main-menu ul.navbar-nav {
     float: right;
 }
 
 .main-menu ul.nav.navbar-nav li.active {
     position: relative;
 }
 
 .main-menu ul.nav.navbar-nav li.active a {}
 
 .main-menu ul.navbar-nav li a {
     color: #fff;
     font-weight: 500;
     font-size: 16px;
     padding: 30px 13px;
     -webkit-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
 }
 
 .main-menu ul.navbar-nav li a:focus {
     background: none;
 }
 
 .main-menu ul li:hover a {
     color: #f9f9f9;
     background: none;
 }
 
 .custom-navbar.top-nav-collapse .logo a {
     color: #fff;
     margin-top: 20px;
 }
 
 .custom-navbar.top-nav-collapse .main-menu ul.navbar-nav li a {
     color: #fff;
     padding: 22px 13px;
 }
 
 .custom-navbar.top-nav-collapse .main-menu ul.nav.navbar-nav li.active a {}
 
 
 /*================================================
             b WELCOME AREA
==================================================*/
 
 .welcome-area {
     height: 100%;
     position: relative;
     z-index: 3;
 }
 
 .welcome-table {
     display: table;
     width: 100%;
     height: 100%;
     text-align: center;
 }
 
 .welcome-cell {
     display: table-cell;
     vertical-align: middle;
 }
 
 .welcome-text {}
 
 .welcome-text h1 {
     font-size: 80px;
     color: #fff;
     margin-bottom: 15px;
     font-weight: 700;
     text-transform: capitalize;
     letter-spacing: 8px;
 }
 
 .welcome-text h3 {
     color: #fff;
     font-weight: 500;
     font-size: 36px;
     text-transform: capitalize;
     letter-spacing: 3px;
 }
 
 .hire-btn {
     display: block;
     width: 135px;
     font-size: 20px;
     margin: 0 auto;
     margin-top: 25px;
     padding: 10px 22px;
 }
 
 .btn-style {
     padding: 12px 22px;
     color: #fff;
     display: inline-block;
     transition: all 0.5s;
     font-weight: 500;
     border: 1px solid #fff;
 }
 
 .btn-style:hover,
 .btn-style:focus {
     background-color: #fff;
     color: #164E71;
     border-color: transparent;
     text-decoration: none;
 }
 /*================================================
             5 ABOUT SECTION
==================================================*/
 
 .about-section {
     overflow: hidden;
 }
 
 .author-image {
     text-align: center;
     height: auto;
 }
 
 .social-icon {
     margin-top: 10px;
     margin-left: -5px;
     text-align: center;
 }
 
 .social-icon a {
     width: 32px;
     height: 32px;
     color: #000;
     display: inline-table;
     text-align: center;
     font-size: 16px;
     margin-left: 5px;
     margin-bottom: 15px;
 }
 
 .social-icon a i {
     display: table-cell;
     vertical-align: middle;
 }
 
 .about-text {
     padding: 0px 0;
 }
 
 section-title .about-text h3 {
     font-size: 32px;
     font-weight: 700;
 }
 
 .about-text p {
     font-size: 14px;
     line-height: 25px;
 }
 
 .author-image .btn {
     margin-right: 15px;
     margin-top: 10px;
 }
 
 .btn,
 a.btn {
     border-radius: 0px;
     cursor: pointer;
     font-size: 12px;
     font-weight: 700;
     height: 48px;
     letter-spacing: 0.2em;
     line-height: 48px;
     overflow: hidden;
     padding: 0 30px;
     text-align: center;
     text-transform: uppercase;
     -webkit-transition: all 0.4s ease 0s;
     transition: all 0.4s ease 0s;
     box-shadow: 0 7px 16px 0 rgba(50, 50, 50, 0.2);
 }
 
 .btn:hover,
 a.btn:hover,
 .btn.btn-effect:hover {
     box-shadow: 0px 16px 22px 0px rgba(50, 50, 50, 0.2);
     top: -5px;
 }
 
 .btn.extra,
 a.btn.extra {
     background: #f0f0f0;
     color: #000;
 }
 
 .btn:focus,
 a.btn:focus {
     outline: none;
 }
 
 .btn:hover,
 a.btn:hover {}
 
 .btn.extra:hover,
 a.btn.extra:hover {}

  .full-width {width: 100%}
 
 .set_11_buttons {
     margin-top: 0px;
 }
 
 .set_11_buttons > a {
     position: relative;
     font-size: 25px;
     text-align: center;
     display: inline-block;
     z-index: 1;
     border-radius: 50%;
     border: 0 none;
     line-height: 45px;
     margin: 10px;
     width: 45px;
     height: 45px;
 }
 
 .set_11_buttons > a::before {
     content: "";
     position: absolute;
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 0 none;
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     transform: rotate(0deg);
     -webkit-transition: 0.5s all ease-in-out;
     -moz-transition: 0.5s all ease-in-out;
     -o-transition: 0.5s all ease-in-out;
     transition: 0.5s all ease-in-out;
     z-index: -1;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
    
 }
 .set_11_buttons > a:hover{ color: #fff;}
 .set_11_buttons > a:hover::before {
     background: #02c39a;
     border-radius: 0;
     border: 0;
     -webkit-transform: rotate(225deg);
     -moz-transform: rotate(225deg);
     -ms-transform: rotate(225deg);
     -o-transform: rotate(225deg);
     transform: rotate(225deg);
 }
 
 .set_11_buttons > a.facebook:hover::before {
     background: #3b5998;
 }
 
 .set_11_buttons > a.twitter:hover::before {
     background: #61bae4;
 }
 
 .set_11_buttons > a.google-plus:hover::before {
     background: #d95232;
 }
 
 .set_11_buttons > a.github:hover::before {
     background: #0d2636;
 }
 
 .set_11_buttons > a.email:hover::before {
     background: #02c39a;
 }
 /*================================================
             6 SKILL SECTION
==================================================*/
 
 .skills {
    padding: 100px 0;
     background: #f9f9f9;
 }
 
 .skill-container {
     position: relative;
 }
 
 .skill-btn {
     margin-top: 35px;
 }
 
 .skill-overlay {
     position: absolute;
     right: 0;
     width: 100%;
     height: 100%;
     background: rgb(249, 249, 249);
 }
 
 .skills-content .progressbar-area p {
     margin-bottom: 21px;
     font-weight: 500;
     color: #6E6E6E;
     font-size: 15px;
 }
 
 .progressbar-area {
     margin-top: 30px;
 }
 
 .skills .progress-bar {
     
     position: relative;
     overflow: visible;
     box-sizing: border-box;
     padding-top: 0;
     padding-left: 10px;
     text-align: left;
     
     box-shadow: none;
     font-size: 10px;
     line-height: 20px;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
 .skill-category {
     max-width: 80%;
     margin: 0 auto;
 }
 
 .skills .progress {
     overflow: visible;
     height: 6px;
     margin-top: 10px;
     margin-bottom: 40px;
     letter-spacing: 1px;
     text-transform: uppercase;
     border-radius: 0;
     background: #d7d7d7;
     box-shadow: none;
     font-weight: 400;
     border-radius: 5px;
 }
 
 .skills .progressbar-area p {
     margin-bottom: 28px;
 }
 
 .skills .progress-bar span {
     position: absolute;
     top: -28px;
     right: -6px;
     display: inline-block;
     min-width: 25px;
     height: 22px;
     padding: 0 8px;
     text-align: center;
     letter-spacing: 0;
     border-radius: 30px;
     line-height: 21px;
     width: 36px;
 }
 
 .skills .progress-bar > span::before {
     position: absolute;
     bottom: -4px;
     left: 12px;
     display: block;
     width: 8px;
     height: 8px;
     content: "";
     transform: rotate(45deg);
     ;
 }
 /*================================================
              7 SERVICE SECTION
==================================================*/
 
 .work-process-area {}
 
 .single-process i {
     font-size: 40px;
     margin-bottom: 10px;
 }
 
 .single-process h2 {
     font-size: 12px;
     text-transform: uppercase;
     font-weight: 900;
     margin: 20px 0px;
     color: #000;
 }
 
 .single-process p {
     margin-bottom: 0;
 }
 /*================================================
            8 QUOTES  SECTION 
==================================================*/
 
 .quotes-area {
     background: #F9F9F9;
 }
 
 .quotes-content h3 {
     font-size: 42px;
     margin-bottom: 25px;
     font-size: 800;
 }
 
 .quotes-content p {
     color: #999;
 }
 
 .quotes-content a {
     margin-top: 25px;
 }
 
 .quotes-area i.fa.fa-pencil {
     font-size: 16px;
     padding-right: 6px;
 }
 /*================================================
            9 WORK SECTION 
==================================================*/
.portfolio{padding: 100px 0}
 .portfolio-content-head ul li {
     display: inline-block;
     cursor: pointer;
     padding: 12px 14px;
     font-weight: 700;
     color: #7B7B7B;
     margin: 0px 10px;
 }
 
 .portfolio-content-head ul li:hover {
     color: #164E71;
 }
 
 .mixitup-control-active {
     /*background: #fff;
     box-shadow: 0px 0px 10px #9f9f9f;*/
 }
 
 .mix {
     display: inline-block;
 }
 
 .portfolio-item {
     position: relative;
     margin: 20px 0;
 }
 
 .portfolio-img {
     position: relative;
     z-index: 1;
     transition: all 0.5s;
     overflow: hidden;
 }
 
 .portfolio-img img {
     transform: scale(1);
     transition: all 0.5s;
 }
 
 .portfolio-content-head {
     text-align: center;
     margin-bottom: 28px;
 }
 
 .portfolio-item:hover .portfolio-img img {
     transform: rotate(20deg) scale(1.4);
 }
 
 .portfolio-content {
     padding-top: 22px;
 }
 
 .portfolio-overlay {
     position: absolute;
     z-index: 2;
     top: 0;
     width: 100%;
     height: 101%;
     text-align: center;
     visibility: hidden;
     transition: all 0.5s;
     transform: scale(0);
 }
 
 .portfolio-item:hover .portfolio-overlay {
     visibility: visible;
     transform: scale(1);
 }
 
 .portfolio-overlay .category {
     margin-top: 54px;
     margin-bottom: 19px;
     font-size: 16px;
     font-weight: 500;
 }
 
 .portfolio-overlay .magnify-icon {
     height: 40px;
     width: 40px;
     border-radius: 20px;
     background: #000;
     margin: 0 5px;
     cursor: pointer;
     display: inline-block;
     transition: all 0.25s;
 }
 
 
 
 .portfolio-overlay .magnify-icon p span i {
     font-size: 15px;
     color: #fff;
     line-height: 40px;
     cursor: pointer;
 }
 /*================================================
              10 TESTIMONIAL SECTION
==================================================*/
 
 .testimonial-area {
     padding: 100px 0px;
     background: #F9F9F9
 }
 
 .testimonial-area .section-title h2 {
     color: #fff;
 }
 
 .testimonial-list {}
 
 .single-testimonial {}
 
 .single-testimonial h2 {
     font-size: 16px;
     text-transform: uppercase;
     font-weight: 700;
     margin-top: 10px;
 }
 
 .single-testimonial h3 {
     font-size: 12px;
     text-transform: capitalize;
     font-weight: 300;
     margin-top: 0;
 }
 
 .single-testimonial p {
     line-height: 25px;
     color: #999;
     padding: 20px 200px;
 }
 
 .single-testimonial i {
     
     height: 38px;
     width: 42px;
     border-radius: 50%;
     line-height: 30px;
 }
 
 .owl-theme .owl-controls .owl-page span {
     display: block;
     width: 10px;
     height: 10px;
     margin: 5px 7px;
     border-radius: 20px;
 }
 /*================================================
            11 CONTACT INFO SECTION
==================================================*/
 
 .contact-me-area {}
 
 .contact-form {
     border-radius: 3px;
     margin-top: 20px;
 }
 
 .form-control {
     display: block;
     border: 0px;
     width: 100%;
     height: 45px;
     padding: 5px 10px;
     font-size: 16px;
     line-height: 1.42857143;
     background-color: transparent;
     background-image: none;
     border-radius: 0px;
     box-shadow: none;
     border: 1px solid;
     margin-bottom: 25px;
 }
 
 .form-control:focus {
     outline: 0;
     box-shadow: none;
 }
 
 
 
 #submitButton .btn {
     width: auto;
 }
 
 .btn.active.focus,
 .btn.active:focus,
 .btn.focus,
 .btn.focus:active,
 .btn:active:focus,
 .btn:focus {
     outline: none;
 }
 
 .success {
     background: #50B948 none repeat scroll 0 0;
     color: #fff;
     font-weight: 700;
     padding: 20px;
     text-align: center;
 }
 /*adress area */
 
 .full-adress {
     background: #f5f5f5;
    
     margin: 20px 0 0 10px;
     
 }
 
 .contact-padding.col-md-12 {
     padding: 15px;
     margin-bottom: 16px;
 }
 
 .full-adress p.phone,
 .full-adress p.mail {
     position: relative;
     padding-left: 25px;
     font-size: 16px;
     line-height: 24px;
     margin: 0;
 }
 
 .full-adress p.adress {
     position: relative;
     padding-left: 25px;
     font-size: 16px;
     line-height: 24px;
     margin: 8px;
 }
 
 .full-adress p.phone:before,
 .full-adress p.mail:before,
 .full-adress p.adress:before {
     position: absolute;
     content: "\f041";
     font-family: "FontAwesome";
     top: 0;
     left: 0;
 }
 
 .full-adress p.phone:before {
     content: "\f095";
 }
 
 .full-adress p.mail:before {
     content: "\f003 ";
 }
 
 .full-adress p.adress:before {
     content: "\f041";
 }
 
 .full-adress p.phone a,
 .full-adress p.mail a {
     text-decoration: none;
     font-size: 16px;
 }
 /*================================================
            12 FOOTER SECTION
==================================================*/
 
 .footer {
     background-color: #F9F9F9;
     padding: 100px 0;
 }
 
 .footer-text {}
 
 .footer-text p {
     font-size: 16px;
     color: #000;
     margin-bottom: 0px;
 }