/*--------------------------------------------------------------------------------------
Theme Name: Police
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly Apps Theme using Twitter Bootstrap Latest, Search Engine Friendly.
Author: DEVITFAMILY
Version: 1.0
----------------------------------------------------------------------------------------
    1. BASE CSS
    2. HOME PAGE
        2.1 HEADER AREA
        2.2 MAINMENU AREA
        2.3 HEADER TEXT AREA
        2.4 ABOUT AREA
        2.5 BLOG AREA
        2.6 TEAM AREA
        2.7 TESTIMONIAL AREA
        2.8 CLIENT AREA
        2.9 GALLERY AREA
        2.10 SERVICE AREA
        2.11 VIDEO AREA
        2.12 SUBSCRIBE FORM AREA
        2.13 FOOTER AREA
    3. ABOUT PAGE
        3.1 ABOUT HEADER
        3.2 ABOUT SKILL
        3.3 ABOUT CLIENT
        3.4 ABOUT MESSAGE
        3.5 ABOUT TESTIMONIAL
    4. SERVICE PAGE
        4.1 SERVICE HEADER
        4.2 SERVICE BODY
    5. GALLERY PAGE
        5.1 GALLERY HEADER
    6. TEAM PAGE
        6.1  TEAM HEADER
    7. TESTIMONIAL PAGE
        7.1 TESTIMONIAL HEADER
    8. CONTACT PAGE
        8.1 CONTACT HEADER
        8.2 CONTACT FORM
        8.3 CONTACT ADDRESS
----------------------------------------------------------------------------------------*/


/*-------------------
    Google Fonts
---------------------*/

@import url('https://fonts.googleapis.com/css?family=Lato:400,900|Merriweather:400,700|Open+Sans:400,700');

/*--------------------
   1. BASE CSS
----------------------*/

*,
*:after,
*:before {
    box-sizing: border-box;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.fix {
    overflow: hidden;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-decoration: none;
}

a:focus,
a:hover {
    outline: none;
}

a:hover {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    margin: 0 0 15px;
    color: #333333;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    line-height: 2;
    color: #555555;
    font-weight: 400;
}


/* 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;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.inline {
    display: inline-block;
}

.blue-bg {
    background-color: #000000;
}

.btn {
    border-radius: 0;
    margin: 0 6px;
    padding: 10px 28px;
    font-weight: 700;
    -webkit-transition: .4s;
    transition: .4s;
}

.blue-btn {
    background-color: #db2727;
    color: #ffffff;
}

.blue-btn:hover {
    background-color: #db2727;
    color: #ffffff;
}

.red-btn {
    background-color: #e15151;
    color: #dddddd;
}

.red-btn:hover {
    background-color: #da2525;
    color: #ffffff;
}


/*-------------------
    2.1 HEADER AREA
---------------------*/

.header-area {
    border-top: 3px solid #d71b1f;
}

.header-text-area {
    background-position: center center;
    height: 100%;
    position: relative;
    width: 100%;
}

.header-single-text {
    position: relative;
    z-index: 1;
}

.header-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-bg-1 {
    background: url("images/slide/slide_1.jpg") no-repeat scroll 0 0 / cover;
}

.header-bg-2 {
    background: url("images/slide/slide_2.jpg") no-repeat scroll 0 0 / cover;
}

.header-bg-3 {
    background: url("images/slide/silde_3.jpg") no-repeat scroll 0 0 / cover;
}

.header-bg:after {
    background-color: #000000;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}

.header-top-bar {
    padding: 15px 0;
}

.contact-info > div {
    display: inline-block;
}

.contact-info > div a {
    border: 1px solid #d71b1f;
    color: #222222;
    display: block;
    font-size: 15px;
    margin: 5px;
    padding: 6px 10px;
    font-family: 'Lato', sans-serif;
    font-weight: 900
}

.contact-info > div a i.fa {
    color: #3f51b5;
    margin-right: 10px;
}


/*-------------------
    2.2 MAINMENU AREA
---------------------*/

.mainmenu-area {
    background-color: #010100;
    box-shadow: 0 0 2px 0 #dddddd;
    z-index: 999;
    width: 100%;
}

.main-nav-scrolled {
    position: fixed;
    left: 0;
    top: 0;
}

.mainmenu-area a {
    color: #ffffff;
}

.mainmenu {
    position: relative;
}

.mainmenu ul.nav.navbar-nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-radius: 2px;
    margin: 15px 30px 15px 0;
    padding: 5px 8px;
    text-transform: uppercase;
}

.mainmenu ul.nav.navbar-nav li a:hover,
.mainmenu ul.navbar-nav li.active a {
    background-color: #db2727;
}

.mainmenu .navbar {
    margin-bottom: 0;
}

.search-box {
    position: absolute;
    right: 20px;
    top: 13px;
}

.search-box input,
.search-box button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
}

.sb-search-input::-webkit-input-placeholder {
    color: #ffffff;
}

.sb-search-input:-moz-placeholder {
    color: #ffffff;
}

.sb-search-input::-moz-placeholder {
    color: #ffffff;
}

.sb-search-input:-ms-input-placeholder {
    color: #ffffff;
}


/*------------------------
    2.3 HEADER TEXT AREA
-------------------------*/

.header-single-text {
    padding: 200px 0;
}

.header-single-text > h1 {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 68px;
    text-transform: uppercase;
}


/*-------------------
    2.4 ABOUT AREA
---------------------*/

.page-title > h2 {
    font-family: 'Merriweather', serif;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-size: 24px;
}

.about-area .btn {
    margin-top: 50px;
}

.about-image-slide .owl-nav {
    position: absolute;
    right: 0;
    top: 0;
}

.about-image-slide img {
    width: 100%;
}


/*-------------------
    2.5 BLOG AREA
---------------------*/

.blue-bg .page-title h2 {
    color: #ffffff;
}

.sinlge-blog {
    background-color: #ffffff;
    padding: 25px;
}

.single-team img,
.single-gallery img,
.blog-thumb img {
    width: 100%;
}

.sinlge-blog a h3 {
    color: #3350b9;
    margin: 20px 0;
    text-align: center;
    text-transform: uppercase;
}

.meta-date i.fa {
    margin-right: 5px;
}

.meta-tag span {
    color: #555555;
    font-weight: 400;
    margin-left: 5px;
}

.meta-tag span i.fa {
    margin-right: 5px;
}


/*-------------------
    2.6 TEAM AREA
---------------------*/

.team-details {
    background-color: #db2727;
    padding: 20px 0;
    text-align: center;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
}

.single-team {
    margin: 16px 0;
    overflow: hidden
}

.single-team img,
.single-gallery img {
    -webkit-transition: .6s;
    transition: .6s;
}

.single-gallery:hover img,
.single-team:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.team-details > h3 {
    color: #ffffff;
    font-size: 20px;
    text-transform: uppercase;
}

.team-social-list > a {
    background-color: #db2727;
    color: #ffffff;
    display: inline-block;
    height: 30px;
    margin: 0 5px;
    width: 30px;
}

.team-social-list > a:hover {
    background-color: #ffffff;
    color: #db2727;
}

.gallery-area .load-more {
    margin-top: 40px;
}


/*-------------------
    2.7 TESTIMONIAL AREA
---------------------*/

.testimonial-single-item {
    color: #ffffff;
}

.testimonial-single-item > img {
    margin: 15px auto;
}

.testimonial-single-item h4,
.testimonial-single-item h5 {
    color: #ffffff;
}

.testimonial-single-item > p:before {
    content: "\f10d";
    font-family: fontawesome;
    font-size: 30px;
    line-height: 1;
    margin-right: 10px;
}

.testimonial-single-item > p:after {
    content: "\f10e";
    font-family: fontawesome;
    font-size: 30px;
    margin-left: 10px;
    line-height: 1;
}


/*-------------------
    2.8 CLIENT AREA
---------------------*/

.client-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 60px;
}

.single-client {
    box-shadow: 0 0 2px 0 #666;
    margin: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 170px;
}

.single-client img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .4s;
    transition: .4s;
}

.single-client:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.single-client:hover {
    border-color: #3350b9;
}

.clients-text h3 {
    color: #3350b9;
    font-size: 24px;
    text-transform: uppercase;
}


/*-------------------
    2.9 GALLERY AREA
---------------------*/

.single-gallery {
    margin: 13px 0;
    overflow: hidden;
    position: relative;
}

.gallery-area .gallery-icon {
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    left: -100%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.gallery-icon > a {
    color: rgb(255, 255, 255);
    font-size: 26px;
    height: 30px;
    left: 50%;
    line-height: 1.2;
    margin-left: -15px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
    width: 30px;
}


/*-------------------
    2.10 SERVICE AREA
---------------------*/

.single-service {
    background-color: #000000;
    color: #ffffff;
    padding: 30px 15px;
    box-shadow: 0 0 0 0 #888888;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0);
    -webkit-transition: .4s;
    transition: .4s;
}

.single-service:hover {
    box-shadow: 0 40px 30px -26px #888888;
    -webkit-transform: translate(0px, -6px);
    transform: translate(0px, -6px);
}

.single-service .serivce-icon {
    font-size: 34px;
    margin-bottom: 10px;
}

.single-service h3,
.skill-area h3 {
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
}

.single-service a {
    color: #ffffff;
    display: inline-block
}

.single-service a:hover {
    color: #ffffff;
}

.about-text a i.fa,
.single-service a i.fa {
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.btn i.fa {
    -webkit-transition: .3s;
    transition: .3s
}

.btn:hover i.fa {
    padding-left: 10px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}


/*-------------------
    2.11 VIDEO AREA
---------------------*/

.video-text {
    color: #ffffff;
}

.video-text a {
    margin-top: 20px;
}

.video-overlay {
    box-shadow: 0 0 40px 6px #444444;
}


/*---------------------------
    2.12 SUBSCRIBE FORM AREA
----------------------------*/

.subscribe-form {
    background-color: #3350b9;
    display: inline-block;
    margin-top: 30px;
    padding: 50px;
    width: 100%;
}

.subscribe-form input[type="email"] {
    border: medium none;
    font-size: 14px;
    padding: 10px 15px;
    width: 100%;
}

.subscribe-form > form {
    position: relative;
}

.subscribe-form input[type="submit"] {
    border: medium none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    height: 100%;
    margin: 0;
    padding: 0 25px;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
}


/*---------------------------
    2.13 FOOTER AREA
----------------------------*/

.footer-area {
    background-color: #000000;
    color: #ffffff;
}

.single-footer h3 {
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
}

.single-footer h3 span {
    color: #d82626;
}

.social-list {
    margin-top: 20px;
}

.social-list a {
    background-color: #db2520;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    height: 35px;
    line-height: 2.4;
    margin-right: 10px;
    text-align: center;
    width: 35px;
}

.social-list a:hover {
    background-color: #ffffff;
    color: #db2520;
}

.single-footer .link ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.single-footer .link ul li a {
    color: #ffffff;
    font-size: 13px;
}

.single-footer .link ul li:before {
    content: "\f0da";
    font-family: fontawesome;
    margin-right: 10px;
    -webkit-transition: .2s;
    transition: .2s
}

.single-footer .link ul li:hover:before {
    margin-right: 15px
}

.single-events {
    position: relative;
}

.single-events .event-date {
    background-color: #db2727;
    float: left;
    font-size: 22px;
    font-weight: 700;
    height: 50px;
    line-height: 1;
    margin-right: 16px;
    padding: 5px;
    text-align: center;
    width: 50px;
    -webkit-transition: .4s;
    transition: .4s;
}

.single-events:hover .event-date {
    background-color: #ffffff;
    color: #db2727;
}

.single-events .event-date span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.single-events {
    line-height: 1.5;
    margin-bottom: 20px;
}

.single-events h4 {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.single-info {
    margin: 14px 0;
}

.single-info a {
    border: 1px solid #d92728;
    color: #ffffff;
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    padding: 10px 30px 10px 50px;
    position: relative;
}

.single-info span {
    background-color: #d92728;
    display: inline-block;
    font-size: 20px;
    height: 40px;
    left: -1px;
    line-height: 1.8;
    position: absolute;
    text-align: center;
    top: -4px;
    width: 40px;
    -webkit-transition: .3s;
    transition: .3s
}

.single-info a:hover span {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    background-color: #ffffff;
    color: #d92728;
}


/*------------------------
12. ABOUT PAGE
-------------------------*/


/*------------------------
3.1 ABOUT HEADER
-------------------------*/

.about .header-text-area {
    background-image: url("images/about/about-header.jpg");
}

.sub-header-text {
    padding: 100px 0;
}

.sub-header-text h2 {
    color: #ffffff;
    font-size: 40px;
    text-transform: uppercase;
    margin: 0
}

.sub-header-text > ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.sub-header-text li {
    color: #ffffff;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
}

.sub-header-text li {
    margin: 0 5px;
    text-decoration: line-through;
}

.sub-header-text li.active {
    text-decoration: none;
}


/*--------------------
3.2 ABOUT SKILL
---------------------*/

.skill > div {
    margin: auto auto 20px;
}


/*------------------------
3.2 ABOUT SKILL
--------------------------*/

.client-slide-item {
    border: 1px solid #ddd;
    margin: 0 10px;
}

.blog-nav.nav.navbar-right.nav-tabs {
    border: medium none;
    margin-bottom: 30px;
}

.blog-nav.nav.nav-tabs li a {
    background-color: #ffffff;
    border: medium none;
    border-radius: 0;
    color: #3451ba;
    margin-left: 10px;
    padding: 6px 15px;
}

.blog-nav.nav.nav-tabs li.active a {
    background-color: #d92728;
    color: #ffffff;
}


/*------------------------
3.4 ABOUT MESSAGE
--------------------------*/

.about-page .header-text-area {
    background-image: url(images/about/about-header.jpg)
}

.about-message-area .slide h2 {
    color: #fff;
    text-transform: uppercase;
}

.about-message-area .slide {
    color: #ffffff;
    padding: 30px 60px;
    position: relative;
}


/*------------------------
3.5 ABOUT TESTIMONIAL
--------------------------*/

.about-message-area .container {
    background: url("images/about/president.png") no-repeat scroll right 100px bottom;
}

.single-about-testimonial > img {
    float: left;
}

.about-testimonial-test {
    background-color: #3350b9;
    color: #ffffff;
    overflow: hidden;
    padding: 28px;
}

.about-testimonial-test h4 {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 10px;
}

.about-testimonial-test h5 {
    color: #ffffff;
}

.about-testimonial-area .owl-nav {
    margin-top: 30px;
    text-align: center;
}


/*------------------------
4.1 SERVICE HEADER
--------------------------*/

.service-page .header-text-area {
    background-image: url(images/service/service-header-bg.jpg);
}


/*------------------------
4.2 SERVICE BODY
--------------------------*/

.service-thumb-title {
    background-color: #3350b9;
    bottom: -30px;
    color: #fff;
    left: 0;
    margin: auto 30px;
    padding: 15px 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
}

.service-thumb {
    margin-bottom: 30px;
    position: relative;
}

.service-details h3 {
    color: #3350b9;
    margin: 25px 0;
}

.alignleft .service-details {
    text-align: right;
}

.service .service-details .blue-btn.btn {
    margin-top: 35px;
}


/*------------------------
5.1 GALLERY HEADER
--------------------------*/

.gallery-page .header-text-area {
    background-image: url(images/gallery/gallery-header-bg.jpg);
}


/*------------------------
6.1  TEAM HEADER
--------------------------*/

.team-page .header-text-area {
    background-image: url(images/team/team-header.jpg);
}


/*----------------------
7.1 TESTIMONIAL HEADER
----------------------*/

.testimonial-page .header-text-area {
    background-image: url(images/testimonial/testimonial-header.jpg);
}

.testimonial-page .testimonial-area .testimonial-single-item {
    color: #555555;
    margin: 15px 0;
    -webkit-transition: .3s;
    transition: .3s;
}

.testimonial-page .testimonial-single-item:hover {
    box-shadow: 0 24px 50px -40px #444;
    -webkit-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
}

.testimonial-page .testimonial-area .testimonial-single-item h5 {
    color: #555555;
}

.testimonial-page .testimonial-single-item {
    border: 1px solid #dddddd;
    padding: 20px;
}

.testimonial-page .testimonial-single-item > img {
    margin-bottom: 15px;
}

.testimonial-page .testimonial-single-item > h4 {
    color: #db2727 !important;
    margin: 20px 0 10px;
}


/*------------------------
8.1 CONTACT HEADER
-------------------------*/

.contact-page .header-text-area {
    background-image: url(images/contact/contact-header.jpg);
}


/*------------------------
8.2 CONTACT FORM
-------------------------*/

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    border: 4px double #dddddd;
    margin-bottom: 20px;
    padding: 5px 10px;
    width: 100%;
}


/*------------------------
 8.3 CONTACT ADDRESS
-------------------------*/

.address {
    padding: 20px;
}

.contact-page .address .single-info span {
    background-color: #ffffff;
    color: #3350b9;
}

.contact-page .address .single-info a {
    border-color: #ffffff;
}

.contact-page .address .social-list a {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.contact-page .address .social-list a:hover {
    background-color: #ffffff;
    color: #3350b9;
}

#scrollUp {
    background-color: #db2727;
    bottom: 20px;
    color: #fff;
    display: block;
    font-size: 18px;
    height: 40px;
    line-height: 2;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
}