/* Theme Name: Construx | Construction, Architecture & Building Multipurpose HTML resposive Template
   Author: bulltheme
   Version: 1.0.0
   File Description: Main CSS file of the template
*/

/*********************************************************
*   1  :  HELPER                                         *
*   2  :  PRELOADER                                      *
*   3  :  HEADER                                         *
*   4  :  HOME                                           *
*   5  :  OUR COMPANY BROUCHER                           *
*   6  :  SERVICES                                       *
*   7  :  WHO WE ARE                                     *
*   8  :  HAVE ANY QUESTIONS                             *
*   9  :  HAVE ANY QUESTIONS                             *
*   10 :  OUR EXPERT TEAM                                *
*   11 :  OUR WORK                                       *
*   12 :  WHAT CLIENT SAY                                *
*   13 :  LATEST FROM BLOG                               *
*   14 :  CONTACT US                                     *
*   15 :  GOOGLE MAP                                     *
*   16 :  BOOK AN APPOINTMENT                            *
*   17 :  FOOTER                                         *
*   18 :  SOCIAL MEDIA RIGHT FIXED                       *
*   19 :  BACK TO TOP                                    *
*   20 :  RESPONSIVE                                     *
*********************************************************/

/*==========================================
    1. HELPER  
===========================================*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');

body {font-family: 'Source Sans Pro', sans-serif; color: #505050; line-height: 1.6; }

.btn,
.btn:focus,
button,
button:focus {outline: none !important; }
a {text-decoration: none !important; outline: none;}


h1, .h1 {font-size: 3.75rem;letter-spacing: 5px;}
h2, .h2 {font-size: 3.125rem;}
h3, .h3 {font-size: 2.5rem;}
h4, .h4 {font-size: 1.875rem;}
h5, .h5 {font-size: 1.25rem;}
h6, .h6 {font-size: 0.625rem;}

p:last-child {margin-bottom: 0;}


.btn {font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 0; box-shadow: none !important; padding: 1.0625rem 3.125rem; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.btn-black {color: #fff; background-color: #242424; border-color: #242424;}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.btn-black.focus,
.btn-black:active,
.btn-black:focus,
.btn-black:hover,
.open > .dropdown-toggle.btn-black {border-color: #000; background-color: #000; color: #fff; outline: none; box-shadow: none;}

.bg-black {background-color: #242424 !important; }
.bg-light {background-color: #f8f8f8 !important;}

.text-black {color: #242424!important;}

.svg-fluid {max-width: 100%;max-height: 100%;}

.font-weight-semi-bold {font-weight: 600 !important;}

.pt-100 {padding-top: 100px !important;}
.pb-100 {padding-bottom: 100px !important;}
.pt-200 {padding-top: 200px !important;}
.pb-200 {padding-bottom: 200px !important;}
.mt-100 {margin-top: 100px !important;}
.mt--100 {margin-top: -100px !important;}
.mt--130 {margin-top: -130px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-60 {margin-bottom: 60px !important;}

.section {padding-top: 100px; padding-bottom: 100px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: scroll; background-attachment: fixed; }
.bg-overlay {position: absolute; height: 100%; width: 100%; top: 0; right: 0; background: rgba(36, 42, 53, 0.5) url(../images/gridtile.png);}
.box-shadow {box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);}

.owl-carousel .owl-item img {width: auto; }
.owl-theme .owl-nav.disabled+.owl-dots {margin-top: 30px; }
.owl-theme .owl-dots .owl-dot span {width: 6px; height: 6px; border-radius: 0; background-color: #242424; position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.owl-theme .owl-dots .owl-dot span:before {border: 2px solid transparent; content: ""; height: 14px; left: -4px; position: absolute; top: -4px; width: 14px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {background-color: #242424;}
.owl-theme .owl-dots .owl-dot.active span:before,
.owl-theme .owl-dots .owl-dot:hover span:before {border-color: #242424;}
@-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;}}
@keyframes         fadeIn { from {opacity: 0;} to {opacity: 1;}}
.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn;}
@-webkit-keyframes fadeOut { from {opacity: 1;} to {opacity: 0;}}
@keyframes         fadeOut { from {opacity: 1;} to {opacity: 0;}}
.fadeOut {-webkit-animation-name: fadeOut; animation-name: fadeOut;}



/*==========================================
    2. PRELOADER  
===========================================*/
.loader-span {position: absolute; width: 50px; height: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); -webkit-animation: mainAnimation 2.6s ease 0s infinite forwards; animation: mainAnimation 2.6s ease 0s infinite forwards; z-index: 99998; }
.loader-span:after {content: ""; display: inline-block; position: absolute; width: 50px; height: 50px; top: 0; left: -50px; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); -webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards; animation: secundaryAnimation 2.6s ease 0s infinite forwards; }
.shadow-span {position: absolute; width: 100px; height: 10px; top: 50%; left: 50%; margin-top: 50px; margin-left: -75px; border-radius: 50%; background-color: #dfdfdf; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg); -webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards; animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards; z-index: 99998;}
.pre-loader-logo {position: absolute; z-index: 99998; bottom: 15px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.pre-loader {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999; width: 100%; height: 100%;}
.loader-section {position: fixed; top: 0; width: 51%; height: 100%; background: #f8f8f8; z-index: 99997; }
.section-left {left: 0; }
.section-right {right: 0; }
.loaded .section-left {-webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); }
.loaded .section-right {-webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); }

@-webkit-keyframes mainAnimation {
    0% {width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    20% {width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    40% {width: 150px; -webkit-transform: translateX(-50px) translateY(0px) rotate(0deg); transform: translateX(-50px) translateY(0px) rotate(0deg);}
    60% {width: 150px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: translateX(-150px) translateY(0px) rotate(90deg); transform: translateX(-150px) translateY(0px) rotate(90deg);}
    80% {width: 50px; -webkit-transform: translateX(-25px) translateY(0px) rotate(90deg); transform: translateX(-25px) translateY(0px) rotate(90deg);}
    100% {width: 50px; -webkit-transform: translateX(-50px) translateY(0px) rotate(90deg); transform: translateX(-50px) translateY(0px) rotate(90deg);}
}
@keyframes mainAnimation {
    0% {width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    20% {width: 50px; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    40% {width: 150px; -webkit-transform: translateX(-50px) translateY(0px) rotate(0deg); transform: translateX(-50px) translateY(0px) rotate(0deg);}
    60% {width: 150px; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: translateX(-150px) translateY(0px) rotate(90deg); transform: translateX(-150px) translateY(0px) rotate(90deg);}
    80% {width: 50px; -webkit-transform: translateX(-25px) translateY(0px) rotate(90deg); transform: translateX(-25px) translateY(0px) rotate(90deg);}
    100% {width: 50px; -webkit-transform: translateX(-50px) translateY(0px) rotate(90deg); transform: translateX(-50px) translateY(0px) rotate(90deg);}
}
@-webkit-keyframes secundaryAnimation {
    0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    20% {-webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg);}
    40% {-webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg);}
    60% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    80% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    100% {-webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg);}
}
@keyframes secundaryAnimation {
    0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    20% {-webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg);}
    40% {-webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg);}
    60% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    80% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); transform: translateX(0px) translateY(0px) rotate(0deg);}
    100% {-webkit-transform: translateX(0px) translateY(0px) rotate(180deg); transform: translateX(0px) translateY(0px) rotate(180deg);}
}
@-webkit-keyframes shadowAnimation {
    0% {width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg);}
    20% {width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg);}
    40% {width: 200px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg);}
    60% {width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg);}
    80% {width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg);}
    100% {width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg);}
}
@keyframes shadowAnimation {
  0% {width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg);}
  20% {width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg);}
  40% {width: 200px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg);}
  60% {width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg);}
  80% {width: 75px; -webkit-transform: translateX(37.5px) translateY(0px) rotate(0deg); transform: translateX(37.5px) translateY(0px) rotate(0deg);}
  100% {width: 150px; -webkit-transform: translateX(-25px) translateY(0px) rotate(0deg); transform: translateX(-25px) translateY(0px) rotate(0deg);}
}
@-webkit-keyframes float {0% {top: 50%;} 50% {top: 51%;} 100% {top: 50%;} }
@keyframes float {0% {top: 50%;} 50% {top: 51%;} 100% {top: 50%;} }



/*==========================================
    3. HEADER  
===========================================*/
.sticky {background-color: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.header-sticky {max-width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.navbar-custom {padding: 0; width: 100%; border-radius: 0px; z-index: 999; margin-bottom: 0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.navbar-custom .navbar-nav li a {font-weight: 700; line-height: 54px; background-color: transparent !important; letter-spacing: 0.03em; padding-left: 18px !important; padding-right: 18px !important; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.navbar-brand {color: #242424 !important;font-size: 1.5625rem;text-transform: uppercase; font-weight: 600; letter-spacing: 1px; padding-left: 15px; padding-right: 15px; line-height: 60px; }
.navbar-custom .navbar-nav .nav-link {color: #242424; }
.navbar-custom .navbar-toggler {color: #242424; border-width: 0 0 0 1px; border-radius: 0;}
.navbar-toggler {height: 90px; width: 90px; font-size: 30px; border-color: #eaeaea; }



/*==========================================
    4. HOME  
===========================================*/
.bg-home {min-height: 100vh;}
.carousel-control-next,
.carousel-control-prev {width: 6%; }
.particles {position: absolute; left: 0 right: 0; top: 0; bottom: 0; width: 100%; height: 100%; }
.scroller {position: absolute; left: 50%; margin-left: -12px; bottom: 40px; width: 25px; height: 75px; display: block; }
.scroller svg {fill: #fff;}



/*==========================================
    5. OUR COMPANY BROUCHER  
===========================================*/
.file {height: 105px;display: block; text-align: center; font-size: 50px; line-height: 80px; padding: 10px; }
.download-brochure {display: block;text-align: center; height: 105px; padding: 10px 30px; font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 85px; }



/*==========================================
    6. SERVICES
===========================================*/
.services-big-img {border-width: 10px; border-style: solid; }
.service-box {padding: 30px 15px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.service-box .service-icon {width: 80px; height: 80px; display: block; margin: 0 auto 45px auto; }
.service-box .service-icon svg {position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
.service-box:hover {box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); }



/*==========================================
    7. WHO WE ARE
===========================================*/
.who span {font-size: 5rem;color: #ededed;}



/*==========================================
    8. HAVE ANY QUESTIONS
===========================================*/
.have-questions {position: absolute; left: 15px; bottom: 0; }



/*==========================================
    10. OUR EXPERT TEAM
===========================================*/
.team-container {position: relative;top: -100px;}
.team {overflow: hidden;}
.team .team-overlay {height: 50%; left: 0; position: absolute; top: 75px; width: 100%; -webkit-transition: all 220ms linear 0ms; -moz-transition: all 220ms linear 0ms; -o-transition: all 220ms linear 0ms; -ms-transition: all 220ms linear 0ms; transition: all 220ms linear 0ms; opacity: 0; filter: alpha(opacity=0); }
.team .team-overlay:before {content: ""; height: 75px; position: absolute; top: -75px; left: 0; width: 100%; }
.team .team-image {position: relative; }
.team .has-thumbnail img {-webkit-transition: all 220ms linear 0ms; -moz-transition: all 220ms linear 0ms; -o-transition: all 220ms linear 0ms; -ms-transition: all 220ms linear 0ms; transition: all 220ms linear 0ms; }
.team .team-social {padding: 17px 0 25px 0; position: absolute; text-align: center; top: 0; width: 100%; -webkit-transition: all 220ms linear 0ms; -moz-transition: all 220ms linear 0ms; -o-transition: all 220ms linear 0ms; -ms-transition: all 220ms linear 0ms; transition: all 220ms linear 0ms; opacity: 0; filter: alpha(opacity=0); }
.team .team-social a {color: #fff; width: 40px; height: 40px; display: inline-block; line-height: 40px; text-align: center; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.team .team-meta {-webkit-transition: all 220ms linear 0ms; -moz-transition: all 220ms linear 0ms; -ms-transition: all 220ms linear 0ms; -o-transition: all 220ms linear 0ms; transition: all 220ms linear 0ms; }
.team:hover .has-thumbnail img {transform: translateY(75px); -webkit-transform: translateY(75px); -moz-transform: translateY(75px); -o-transform: translateY(75px); -ms-transform: translateY(75px); }
.team:hover .team-social,
.team:hover .team-overlay {opacity: 1; filter: alpha(opacity=1); }
.team:hover .team-meta {transform: translateY(100px); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); }



/*==========================================
    11. OUR WORK
===========================================*/
.work-grid {z-index: 5;}
.work-button-group .btn {margin: 0 -3px 10px -3px; font-weight: 700; text-transform: uppercase; border-top:5px solid #eaeaea; background-color: transparent; padding: 0.8125rem 1.25rem; letter-spacing: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.work {border: 1px solid #eaeaea; padding: 10px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.work .work-detail {position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; width: 100%; height: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.work .work-detail:before {content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.8; filter: alpha(opacity=80); }
.work:hover {box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); }
.work:hover .work-detail {height: 100%; }



/*==========================================
    12. WHAT CLIENT SAY
===========================================*/
.client-say {text-align: center; position: relative; background-color: #fff; border:1px solid #eaeaea; padding: 110px 15px 50px 15px; margin-top: 75px; }
.client-say .client-img {display: block; width: 150px; height: 150px; padding: 15px; position: absolute; top: -75px; left: 50%; margin-left: -75px; }
.client-say .client-img:before {content: ""; display: block; border-radius: 50%; width: 152px; height: 152px; position: absolute; border:1px solid #eaeaea; left: -1px; top: -1px; z-index: -1; }



/*==========================================
    13. LATEST FROM BLOG
===========================================*/
.blog {position: relative; overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.blog .blog-detail {padding: 30px 15px; border-left-width: 3px; border-left-style: solid; }
.blog .blog-date {font-weight: 700; display: inline-block; position: absolute; left: 20px; bottom: 20px; padding: 5px 10px; }
.blog .read-more {display: block; width: 30px; height: 30px; line-height: 20px; text-align: center; padding: 5px; position: absolute; right: -30px; bottom: -30px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.blog:hover .read-more {right: 0; bottom: 0; }



/*==========================================
    14. CONTACT US
===========================================*/
.contact-icn svg {fill: #fff; width: 80px; height: 80px; }
.contact-box p {line-height: 30px; }



/*==========================================
    15. GOOGLE MAP
===========================================*/
.map {height: 500px;}



/*==========================================
    16. BOOK AN APPOINTMENT
===========================================*/
.container-email {position: relative;top: -100px;}

.form-group {margin-bottom: 1.875rem; }
.form-control {position: relative; z-index: 2; height: 60px; font-size: 1.25rem; border-radius: 0; font-weight: 600; border-color: #eaeaea; border-width: 0 0 1px 0; background-color: transparent; box-shadow: none !important; }
.form-control:focus {box-shadow: none !important; border-color: #eaeaea; background-color: transparent; }
.form-control ~ label {position: absolute; left: 12px; width: 100%; top: 14px; color: #242424; font-size: 1.25rem; margin-bottom: 0; font-weight: 600; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.form-control ~ .focus-border {position: absolute; z-index: 3; bottom: 0; left: 0; width: 0; height: 2px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.form-control:focus ~ label,
.has-content.form-control ~ label {top: -20px; left: 0; font-size: 14px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.form-control:focus ~ .focus-border,
.has-content.form-control ~ .focus-border {width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.form-control::-webkit-input-placeholder {color: #242424; }
.form-control::-moz-placeholder {color: #242424; }
.form-control:-ms-input-placeholder {color: #242424; }
.form-control::-ms-input-placeholder {color: #242424; }
.form-control::placeholder {color: #242424; }
.img-book-appointment {position: absolute; bottom: 0; right: 15px; }
.help-block {display: block; margin-top: 5px; font-size: 14px; }
.has-error .form-control {border-color: #dc3545; }
.help-block ul,
.help-block ol {margin-bottom: 0; padding-left: 0;}



/*==========================================
    17. FOOTER
===========================================*/
.footer-content .footerlink li a {color: #898989; margin: 0 8px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.footer-content .footerlink li a:hover {color: #b7b7b7; }
.social-icon > li a {background-color: #2f2f2f; border-radius: 0px; color: #898989; display: inline-block; height: 40px; line-height: 40px; text-align: center; width: 40px; margin-left: 12px; margin-bottom: 20px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.social-icon > li a:hover {color: #fff; }



/*==========================================
    18. SOCIAL MEDIA RIGHT FIXED
===========================================*/
.social-fix {position: fixed; z-index: 100; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.social-fix ul li a {display: block; text-align: center; height: 40px; width: 40px; line-height: 40px; color: #fff; background-color: #242424; border-bottom: 1px solid rgba(255,255,255,0.15); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
.social-fix ul li:last-child a {border-bottom-width: 0;}

.bg-facebook:hover {background-color: #3a589e; }
.bg-twitter:hover {background-color: #429cd6; }
.bg-instagram:hover {background-color: #e95950; }
.bg-linkedin:hover {background-color: #0d77b7; }
.bg-youtube:hover {background-color: #f00; }
.bg-google-plus:hover {background-color: #db4437; }
.bg-email:hover {background-color: #dd4b39; }



/*==========================================
    19. BACK TO TOP
===========================================*/
.back-to-top {width: 30px; height: 30px; line-height: 30px; position: fixed; bottom: 15px; right: 15px; text-decoration: none !important; display: none; text-align: center; z-index: 10000; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; color: #fff !important; background-color: #3c3c3c; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }



/*==========================================
    20. RESPONSIVE
===========================================*/
@media only screen and (max-width: 991px) {

    .navbar-collapse {border-top:1px solid #eaeaea;}
    .navbar-custom .navbar-nav li a {line-height: 30px;}

}



@media only screen and (max-width: 575px) {

    body {word-break: break-word;}
    .btn {white-space: normal;}

}