body, html { width: 100%; height: 100% }
body { font-family: 'Poppins', sans-serif; }
hr { max-width: 50px; border-width: 3px; border-color: #00FFAD }
hr.light { border-color: #fff }
a { color: #00FFAD; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s }
a:hover { color: #00FFAD }
h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; }
.bg-primary { background-color: #00FFAD!important }
.bg-dark { background-color: #212529!important }
.text-faded { color: rgba(255,255,255,.7) }
section { padding: 6rem 0 }
.section-heading { margin-top: 0 }
::-moz-selection {
color:#fff;
background:#212529;
text-shadow:none
}
::selection { color: #fff; background: #212529; text-shadow: none }
img::selection { color: #fff; background: 0 0 }
img::-moz-selection {
color:#fff;
background:0 0
}
#mainNav { border-bottom: 1px solid rgba(33,37,41,.1); background-color: #fff; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s }
#mainNav .navbar-brand { font-weight: 700; text-transform: uppercase; color: #00FFAD; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif }
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover { color: #00FFAD }
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus { font-size: .9rem; font-weight: 700; text-transform: uppercase; color: #212529 }
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover, #mainNav .navbar-nav>li.nav-item>a.nav-link:hover { color: #00FFAD }
#mainNav .navbar-nav>li.nav-item>a.nav-link.active, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active { color: #00FFAD!important; background-color: transparent }
#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover { background-color: transparent }
#services { padding-top: 45px; padding-bottom: calc(10rem - 56px); background-image: url(../img/service.jpg); background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; position: relative; }
section { position: relative; background: #fff; z-index: 1; }
i.text-primary { background: #22325d; padding: 28px 15px 0; border-radius: 100px; width: 100px; height: 100px; text-align: center; font-size: 50px; }
.mb-3, .my-3 { font-size: 25px; }
.overly-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#overly { content: ''; background: transparent url(../img/pattern.png) repeat top left; position: absolute; width: 100%; height: 100%; top: 0; left: 0px; z-index: 0; background-position: center; background-attachment: fixed; opacity: 0.2; }
.text-dark-icon { font-size: 100px; color: #22325d; }
#counter { background: #22325d; padding: 40px 0; }
#contact { background: #22325d; }
#contact button.submitform { font-size: 1.5rem; display: inline-block; letter-spacing: .2rem; height: 4rem; line-height: normal; padding: 0 15%; background: #00ffad; color: #22325d; margin-top: .6rem; border: 0; text-transform: uppercase; font-weight: bold; }
#contact form { margin-top: 0; margin-bottom: 3rem; }
#contact form .form-field { position: relative; }
#contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact textarea { width: 100%; margin-bottom: 1rem; color: #fff; }
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { display: block; padding: 10px; border: 0; outline: none; vertical-align: middle; color: #444444; font-size: 15px; max-width: 100%; background: rgba(0, 0, 0, 0.1); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#about { background: url(../img/about-bg.png) no-repeat bottom center; }
.my-padd { padding: 15% 0; }
#page {
    background: #22325d;
    padding: 60px 0 0 0;
}
#page h1 {
 padding: 20px 0;
    color: #fff;
    text-transform: capitalize;
    font-size: 20px;
}
section#privacy_policy {
    padding: 25px 0;
}
@media (min-width:992px) {
#mainNav { border-color: transparent; background-color: transparent }
#mainNav .navbar-brand { color: rgba(255,255,255,.7) }
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover { color: #fff }
#mainNav .navbar-nav>li.nav-item>a.nav-link { padding: .5rem 1rem }
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus { color: rgba(255,255,255,.7) }
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover, #mainNav .navbar-nav>li.nav-item>a.nav-link:hover { color: #fff }
#mainNav.navbar-shrink { border-bottom: 1px solid rgba(33,37,41,.1); background-color: #fff }
#mainNav.navbar-shrink .navbar-brand { color: #00FFAD }
#mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover { color: #00FFAD }
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link, #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus { color: #212529 }
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover, #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover { color: #00FFAD }
}
header.masthead { padding-top: 10rem; padding-bottom: calc(10rem - 56px); background-image: url(../img/header.jpg); background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; position:relative; }
header.masthead hr { margin-top: 30px; margin-bottom: 30px }
header.masthead h1 { font-size: 2rem }
header.masthead p { font-weight: 300 }
#mainNav .navbar-brand { background: url(../img/logo-1.png) no-repeat; width: 190px; height: 45px; }
.navbar-shrink#mainNav .navbar-brand { background: url(../img/logo.png) no-repeat; }
#contact { background: #22325d; padding-left: 15px; padding-right: 15px; }
div#message-success { background: #00ffad; padding: 15px; color: #154c3a; font-size: 19px; border-radius: 5px; }
div#message-warning { background: #F44336; padding: 15px; color: #ffffff; font-size: 16px; font-family: 'Poppins', sans-serif; border-radius: 5px; }
section#footer { position: relative; background: #fff; z-index: 1; padding: 5px 0; background: #22325d; border-top: 1px solid #445a96; font-size: 12px; }
#footer a { font-size: 20px; margin: 0 10px; color: #fff; }

@media (min-width:768px) {
header.masthead p { font-size: 1rem }
#contact { background: #22325d; padding-left: 0; padding-right: 0; overflow: hidden; padding-bottom: 10px; }

}
@media (max-width:768px) {
#mainNav .navbar-brand { background: url(../img/logo.png) no-repeat; width: 190px; height: 45px; }
.navbar-shrink#mainNav .navbar-brand { background: url(../img/logo.png) no-repeat; }
#mainNav .navbar-brand .logo-text { color:#000; font-size: 18px;}

}
@media (min-width:992px) {
header.masthead { height: 100vh; min-height: 400px; padding-top: 0; padding-bottom: 0 }
header.masthead h1 { font-size: 3rem }
}

@media (min-width:1400px) {
header.masthead { height: 50vh; min-height: 400px; padding-top: 0; padding-bottom: 0 }
header.masthead h1 { font-size: 3rem }
}

@media (min-width:1200px) {
header.masthead h1 { font-size: 3rem }
}
h2.text-faded {
    color: rgb(0, 255, 173);
    margin: 0 0 10px!important;
    font-size: 30px;
}
.service-box { max-width: 400px }
.portfolio-box { position: relative; display: block; max-width: 650px; margin: 0 auto }
.portfolio-box .portfolio-box-caption { position: absolute; bottom: 0; display: block; width: 100%; height: 100%; text-align: center; opacity: 0; color: #fff; background: rgba(240,95,64,.9); -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); text-align: center }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { padding: 0 15px; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size: 14px; font-weight: 600; text-transform: uppercase }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 18px }
.portfolio-box:hover .portfolio-box-caption { opacity: 1 }
.portfolio-box:focus { outline: 0 }

@media (min-width:768px) {
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size: 16px }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 22px }
}
.text-primary { color: #00FFAD!important }
.btn { font-weight: 700; text-transform: uppercase; border: none; border-radius: 300px; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif }
.btn-xl { padding: 1rem 2rem }
.btn-primary { background-color: #00FFAD; border-color: #00FFAD }
.btn-primary:active, .btn-primary:focus, .btn-primary:hover { color: #fff; background-color: #22325d!important }
.btn-primary:active, .btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(43,224,216,0.50)!important }
#contact .form-field label { font-size: 9px; line-height: 1.4; position: absolute; bottom: -41px; right: 0; text-transform: uppercase; letter-spacing: .05rem; padding: .6rem 2rem .6rem 2rem; margin: 0; color: #FFFFFF; background: #f33224; border-radius: 3px; font-weight: bold; }
.bit { left: 0; position: absolute; height: 100%; opacity: 0.5; top:0; width:100%; }
.cpytext { padding-top: 8px; }
#contact .form-field label:after { position: absolute; right: 15px; top: 1px; margin-top: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #f33224; content: ""; }


@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
	
	

}
h2.section-heading.white-text {
    color: #697289;
    font-size: 16px;
    text-transform: uppercase;
    position: relative;
}
h2.section-heading.white-text span {
    display: inline-block;
    padding: 0 15px;
    position: relative;
}
h2.section-heading.white-text span:after {
    width: 100%;
    content: "";
    position: absolute;
    height: 2px;
    background: #00ffad;
    top: 7px;
    left: 100%;
}
h2.section-heading.white-text span:before {
    width: 100%;
    content: "";
    position: absolute;
    height: 2px;
    background: #00ffad;
    top: 7px;
    right: 100%;
}
 /* Bootstrap Lightbox using Modal */

#profile-grid { overflow: auto; white-space: normal; } 
#profile-grid .profile { padding-bottom: 40px; }
#profile-grid .panel { padding: 0 }
#profile-grid .panel-body { padding: 15px }
#profile-grid .profile-name { font-weight: bold; }
#profile-grid .thumbnail {margin-bottom:6px;}
#profile-grid .panel-thumbnail { overflow: hidden; }
#profile-grid .img-rounded { border-radius: 4px 4px 0 0;}

.privacy #mainNav .navbar-brand {
    background: url(../img/logo.png) no-repeat;
	   
}
.privacy #mainNav {
 border-bottom: 1px solid rgba(33,37,41,.1);
    background-color: #fff;
}

@media (min-width: 992px){
.privacy #mainNav .navbar-nav>li.nav-item>a.nav-link, 
.privacy #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
    color: #212529;
}
.privacy #mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover, 
.privacy #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
    color: #00FFAD;
}
}
