/* 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: #bb1c38; background-color: #fff; 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: #bb1c38 !important; }

.bg-light {background-color: #f8f8f8 !important;margin-top:120px;}



.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-overlay0 {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; background:#b81d37; }

.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: #fff !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: #fff; }

.navbar-custom .navbar-toggler {color: #fff; 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: #bb1c38;}







/*==========================================

    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: #26366e; 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;}



}