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

Project: 	Sena - Responsive One Page Parallax Template
Info:		https://themeforest.net/item/sena-responsive-one-page-parallax-template/25354391
Version: 	1.0
Author:		AthenaStudio
Profile:	https://themeforest.net/user/athenastudio

-----------------------------------------------------------------
					*** TABLE OF CONTENTS ***
-----------------------------------------------------------------

	1.	General
	2.	Animations
	3.	Loader
	4.	Sections
	5.	Navigation
	6.	Slider
	7.	Intro
	8.	Arrows
	9.	Services
	10.	Clients
	11.	Buttons
	12.	Inputs, Textareas
	13.	Portfolio
	14.	Info box
	15.	Our team
	16.	Contact
	17.	Google maps
	18.	Footer
	19.	Tables
	20.	Images slider
	21.	Blog posts
	22.	Sidebars
	23.	Pagination
	24.	Comment form
	25.	Comments
	26.	Error page
	27.	Share panel
	28.	Progress bars
	29.	Pricing tables
	30.	Counters
	31.	Testimonials
    32. Support
		
=============================================================*/

/*********************
    - 1. General -
*********************/
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    height: 100%;
    font-family: oswald;
    font-size: 14px;
    line-height: 1.75em;
    color: #666;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: oswald;
    color: #282828;
    font-weight: 600;
}

h1,
.h1 {
    font-size: 70px;
    line-height: 70px;
}

h2,
.h2 {
    font-size: 40px;
    line-height: 40px;
}

h3,
.h3 {
    font-size: 32px;
    line-height: 32px;
}

h4,
.h4 {
    font-size: 24px;
    line-height: 24px;
}

h5,
.h5 {
    font-size: 20px;
    line-height: 20px;
}

h6,
.h6 {
    font-size: 16px;
    line-height: 16px;
}

    h1 b,
    h2 b,
    h3 b,
    h4 b,
    h5 b,
    h6 b,
    h1 strong,
    h2 strong,
    h3 strong,
    h4 strong,
    h5 strong,
    h6 strong {
        font-weight: 700;
    }

hr {
    margin: 0;
    border-color: #f1f1f1;
}

a {
    color: #444;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
}

    a:hover {
        text-decoration: none;
        outline: 0;
    }

blockquote {
    font-style: italic;
    margin: 20px 0;
}

.text-semibold {
    font-weight: 500;
}

.text-light {
    font-weight: 300;
}

.text-white {
    color: #fff !important;
}

.img-rounded,
.rounded {
    border-radius: 3px;
}

.opacity8 {
    opacity: 0.8;
}

.opacity9 {
    opacity: 0.9;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: none;
}

.full-width {
    width: 100% !important;
}

.empty-10 {
    clear: both;
    height: 10px;
}

.empty-20 {
    clear: both;
    height: 20px;
}

.empty-30 {
    clear: both;
    height: 30px;
}

.empty-50 {
    clear: both;
    height: 50px;
}

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mr-15 {
    margin-right: 15px;
}

p.info {
    font-size: 18px;
    color: #999;
}

section.parallax p.info {
    color: #fff;
}

p.info.white {
    margin-bottom: 35px;
}

input,
input:hover,
input:focus,
button,
button:hover,
button:focus,
textarea,
textarea:focus,
textarea:active {
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

    a:focus,
    a:active,
    button::-moz-focus-inner,
    input[type="reset"]::-moz-focus-inner,
    input[type="button"]::-moz-focus-inner,
    input[type="submit"]::-moz-focus-inner,
    select::-moz-focus-inner,
    input[type="file"] > input[type="button"]::-moz-focus-inner {
        border: 0;
        outline: 0;
    }

::-webkit-input-placeholder {
    opacity: .8;
    color: #a6a6a6;
}

::-moz-placeholder {
    opacity: .8;
    color: #a6a6a6;
}

::-ms-input-placeholder {
    opacity: .8;
    color: #a6a6a6;
}

/************************
    - 2. Animations -
************************/
.csstransitions.csstransforms.no-touch .animation[class*="animation-"] {
    position: relative;
    opacity: 0;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

    .csstransitions.csstransforms.no-touch .animation[class*="animation-"].animation-grow {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }

    .csstransitions.csstransforms.no-touch .animation[class*="animation-"].animation-from-left {
        left: -30px;
    }

    .csstransitions.csstransforms.no-touch .animation[class*="animation-"].animation-from-right {
        left: 30px;
    }

    .csstransitions.csstransforms.no-touch .animation[class*="animation-"].animation-from-bottom {
        top: 30px;
    }

    .csstransitions.csstransforms.no-touch .animation[class*="animation-"].animation-from-top {
        top: -30px;
    }

    .csstransitions.csstransforms.no-touch .animation[class*="animation-"].active {
        left: 0;
        top: 0;
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

/*************************
    - 3. Loader -
*************************/
.page-loader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background-color: #212121;
}

.loader-middle {
    position: absolute;
    top: 50%;
    width: 100%;
}

.loader-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

    .loader-ellipsis div {
        position: absolute;
        top: 27px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .loader-ellipsis div:nth-child(1) {
            left: 6px;
            animation: loader-ellipsis1 0.6s infinite;
        }

        .loader-ellipsis div:nth-child(2) {
            left: 6px;
            animation: loader-ellipsis2 0.6s infinite;
        }

        .loader-ellipsis div:nth-child(3) {
            left: 26px;
            animation: loader-ellipsis2 0.6s infinite;
        }

        .loader-ellipsis div:nth-child(4) {
            left: 45px;
            animation: loader-ellipsis3 0.6s infinite;
        }

@keyframes loader-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes loader-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(19px, 0);
    }
}

@keyframes loader-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

/**********************
    - 4. Sections -
**********************/
section {
    position: relative;
    /* background: #fff0; */
}

    section .container {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    section.bg-grey {
        background-color: #f3f3f3;
    }

    section.bg-dark {
        background-color: #1f1f1f;
    }

/* Section title */
.section-title h2 {
    position: relative;
    clear: both;
    display: inline-block;
    margin: 0 0 20px 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 400;
    text-transform: none;
}

    .section-title h2 > em {
        font-weight: 200;
        font-style: normal !important;
    }

.section-title p {
    font-size: 18px;
    line-height: 1.5em;
    color: #999;
    margin-bottom: 70px;
}

/* White section title */
.section-title.white h2 {
    color: #fff;
}

.section-title.white p {
    color: #fff;
    opacity: 0.9;
}

/* Page title */
.page-title {
    height: 450px;
    /* background: #212121; */
}

    .page-title.parallax {
        height: 700px;
        margin-top: 0;
    }

/* Section close icon */
section .section-title .icon.close {
    position: relative;
    cursor: pointer;
    margin-bottom: 20px;
    opacity: 0.3;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s;
}

    section .section-title .icon.close:hover {
        opacity: 1;
    }

    section .section-title .icon.close i {
        color: #000;
        font-size: 20px;
        line-height: 20px;
    }

.icon.large i {
    font-size: 50px;
}

.icon.largest i {
    font-size: 130px;
}

/* Section background */
section.parallax,
section.video {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top !important;
    background-size: cover;
}

    section.parallax .parallax-overlay,
    section.video .parallax-overlay,
    section.parallax .video-overlay,
    section.video .video-overlay {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.4);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    section.parallax .video-control,
    section.video .video-control {
        width: 70px;
        margin: 0 auto;
        cursor: pointer !important;
    }

        section.parallax .video-control i,
        section.video .video-control i {
            cursor: pointer !important;
            font-size: 18px;
            line-height: 64px;
            width: 70px;
            border: 3px solid #fff;
            border-radius: 50%;
            -moz-backface-visibility: hidden;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

            section.parallax .video-control i.fa-play,
            section.video .video-control i.fa-play {
                text-indent: 4px;
            }

        section.parallax .video-control:hover i,
        section.video .video-control:hover i {
            background-color: #fff;
            -webkit-transform: scale(1.12);
            -moz-transform: scale(1.12);
            transform: scale(1.12);
        }

    section.parallax header,
    section.video header,
    section.bg-dark header,
    section.parallax i,
    section.video i,
    section.bg-dark i,
    section.parallax h1,
    section.video h1,
    section.bg-dark h1,
    section.parallax .h1,
    section.video .h1,
    section.bg-dark .h1,
    section.parallax h2,
    section.video h2,
    section.bg-dark h2,
    section.parallax .h2,
    section.video .h2,
    section.bg-dark .h2,
    section.parallax h3,
    section.video h3,
    section.bg-dark h3,
    section.parallax .h3,
    section.video .h3,
    section.bg-dark .h3,
    section.parallax h4,
    section.video h4,
    section.bg-dark h4,
    section.parallax .h4,
    section.video .h4,
    section.bg-dark .h4,
    section.parallax h5,
    section.video h5,
    section.bg-dark h5,
    section.parallax .h5,
    section.video .h5,
    section.bg-dark .h5,
    section.parallax h6,
    section.video h6,
    section.bg-dark h6,
    section.parallax .h6,
    section.video .h6,
    section.bg-dark .h6 {
        color: #fff;
    }

    section.parallax a:hover,
    section.video a:hover,
    section.parallax a:focus,
    section.video a:focus {
        text-decoration: none;
    }

    section.parallax i.fa,
    section.video i.fa {
        cursor: default;
    }

    section.parallax a i.fa,
    section.video a i.fa {
        cursor: pointer;
    }

    section.video .video-responsive {
        top: -40px;
    }

    section.video .video-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
    }

/************************
    - 5. Navigation -
************************/
.navbar {
    /* position: absolute; */
    background-color: #DE182E;
    z-index: 9999;
    width: 100%;
    height: 35px;
    min-height: 19px;
    padding: 20px 45px 45px 0;
    margin-bottom: 0;
    border-radius: 0;
    border: 0;
    font-family: oswald;
    -webkit-backface-visibility: hidden;
}

    .navbar .navbar-header {
        height: 25px;
    }

    .navbar .navbar-nav {
        margin-left: 140px;
        margin-right: 0;
        padding-top: 1%;
        padding-bottom: 1%;
        /* color: #167fdb; */
        margin-left: 0px;
        background-color: #c72a3b;
        /* margin-right: 0; */
        /* margin: 0 0px 10px 20px; */
        float: none;
        display: block;
        top: 20px;
        border-left: none;
        /* border-bottom: 2px solid #c47b80; */
        /* box-shadow: 0px 10px 10px grey; */
    }

        .navbar .navbar-nav > li a {
            cursor: pointer;
            color: #fff;
            -webkit-transition: all 0.15s ease;
            -moz-transition: all 0.15s ease;
            transition: all 0.15s ease;
        }

        .navbar .navbar-nav > li:last-child > a {
            padding-right: 0;
        }

        .navbar .navbar-nav > li a:hover,
        .navbar .navbar-nav > li a:focus {
            background: none;
        }

        .navbar .navbar-nav > li > a {
            font-size: 15px;
            font-weight: 500;
            padding: 0 12px;
            background-color: transparent !important;
        }

    .navbar .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
        height: auto;
        line-height: 1;
        position: relative;
    }

        .navbar .navbar-brand img {
            position: absolute;
        }

    .navbar .navbar-collapse {
        padding-left: 0;
        padding-right: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

        .navbar .navbar-collapse.collapse.in,
        .navbar .navbar-collapse.collapsing {
            position: absolute;
            z-index: 100;
            width: 100%;
            background: #C72A3B;
            margin-top: -5px;
            overflow: hidden;
        }

            .navbar .navbar-collapse.collapse.in .navbar-nav > li a,
            .navbar .navbar-collapse.collapsing .navbar-nav > li a {
                padding-top: 1%;
                padding-bottom: 1%;
                color: #ddc5c5;
                float: none;
                border-left: none;
                margin: 8px 15px 0px 0px;
                border-bottom: 1px solid #a78688;
            }

    .navbar .navbar-toggle {
        background: transparent;
        padding: 0;
        margin-top: 3px;
        margin-bottom: 0;
    }

        .navbar .navbar-toggle .icon-bar {
            height: 3px;
            position: relative;
            bottom: 10px;
            border-radius: 1px;
            background-color: #fff;
            -webkit-transition: all 0.1s ease-in;
            -moz-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in;
        }

    .navbar .navbar-nav > li > .dropdown-menu {
        top: 40px;
        border-radius: 3px;
        border: none;
        background-color: #fff;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

        .navbar .navbar-nav > li > .dropdown-menu > li a {
            padding-top: 10px;
            padding-bottom: 10px;
            color: #282828;
            font-size: 14px;
            text-transform: none;
            background-color: transparent !important;
        }

    /* Floating navbar */
    /* .navbar.floating {
	position:fixed;
	display:block;
	padding:30px 0;
	background-color:rgba(33, 33, 33, 0.93);
} */

    .navbar.floating .navbar-nav > li > .dropdown-menu {
        border-radius: 0 0 3px 3px;
        top: 45px;
    }

    /* Menu icons */
    .navbar .navbar-icon {
        position: relative;
        float: right;
        line-height: 1;
        margin-left: 30px;
    }

        .navbar .navbar-icon a {
            padding: 0 10px;
        }

            .navbar .navbar-icon a:last-child {
                padding-right: 0;
            }

            .navbar .navbar-icon a > i {
                color: #fff;
                -webkit-transition: all 0.15s ease;
                -moz-transition: all 0.15s ease;
                transition: all 0.15s ease;
            }

/* Search wrapper */
.search-wrapper {
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    bottom: 100%;
    right: 0;
    background: #fff;
    z-index: 9999;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.search-wrapper-close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 40px;
    top: 40px;
    opacity: 0;
    cursor: pointer;
}

.search-wrapper .search-form {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0 20px 0 0;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .search-wrapper .search-form .searchbox-input {
        font-size: 45px;
        font-weight: 700;
        background: none;
        border: none;
        margin-bottom: 10px;
        text-align: center;
    }

.search-wrapper span {
    font-size: 16px;
    color: #c5c3c3;
    display: inline-block;
    width: 100%;
}

.search-wrapper.wrapper-active {
    visibility: visible;
    bottom: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

    .search-wrapper.wrapper-active .search-wrapper-close {
        opacity: 1;
    }

    .search-wrapper.wrapper-active input::-webkit-input-placeholder {
        color: #111;
        font-weight: 700;
        font-size: 45px;
        line-height: 60px;
    }

    .search-wrapper.wrapper-active input:-moz-placeholder {
        color: #111;
        font-weight: 700;
        font-size: 45px;
        line-height: 60px;
    }

    .search-wrapper.wrapper-active input::-moz-placeholder {
        color: #111;
        font-weight: 700;
        font-size: 45px;
        line-height: 60px;
    }

    .search-wrapper.wrapper-active input:-ms-input-placeholder {
        color: #111;
        font-weight: 700;
        font-size: 45px;
        line-height: 60px;
    }

.search-wrapper .search-close-btn {
    position: relative;
    display: block;
    z-index: 9998;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-transform: none;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

    .search-wrapper .search-close-btn:hover {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .search-wrapper .search-close-btn:before,
    .search-wrapper .search-close-btn:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        width: 30px;
        height: 2px;
        background: #aaa;
    }

    .search-wrapper .search-close-btn:before {
        top: 50%;
        transform: rotate(135deg);
    }

    .search-wrapper .search-close-btn:after {
        bottom: calc(50% - 2px);
        transform: rotate(45deg);
    }

/********************
    - 6. Slider -
********************/
.slider {
    width: 100%;
    height: 700px;
    position: absolute;
    z-index: -1;
    background-color: black;
}

    .slider.fullscreen {
        height: 100%;
    }

    .slider .image {
        position: absolute;
        width: inherit;
        height: inherit;
        background-attachment: scroll;
        background-position: center center;
        background-size: cover;
        background-color: #000;
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }

/*******************
    - 7. Intro -
*******************/
.intro {
    position: relative;
    height: 100%;
    color: #fff;
    background: none;
}

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

    .intro .intro-slideshow .owl-item {
        position: relative;
        height: 100vh;
    }

    /* Caption */
    .intro a,
    .intro p,
    .intro h1,
    .intro .h1,
    .intro h2,
    .intro .h2,
    .intro h3,
    .intro .h3,
    .intro h4,
    .intro .h4,
    .intro h5,
    .intro .h5,
    .intro h6,
    .intro .h6 {
        color: #fff;
    }

    .intro .caption {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        -webkit-transform: translate(0%, -50%);
        -moz-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

        .intro .caption h3 {
            clear: both;
            color: #fff;
            font-weight: 200;
            letter-spacing: 3px;
            -webkit-animation-delay: .3s;
            -moz-animation-delay: .3s;
            animation-delay: .3s;
        }

        .intro .caption h1 {
            clear: both;
            color: #fff;
            margin: 0 0 9px 0;
            font-size: 64px;
            line-height: 64px;
            font-weight: 700;
            text-transform: uppercase;
            -webkit-animation-delay: .6s;
            -moz-animation-delay: .6s;
            animation-delay: .6s;
        }

        .intro .caption p {
            clear: both;
            font-size: 14px;
            color: #eee;
            word-spacing: 2px;
            margin-bottom: 0;
            /* padding: 0px 10px 0px 20px; */
            -webkit-animation-delay: .9s;
            -moz-animation-delay: .9s;
            animation-delay: .9s;
        }

        .intro .caption .btn,
        .parallax .btn {
            -webkit-animation-delay: 1.2s;
            -moz-animation-delay: 1.2s;
            animation-delay: 1.2s;
        }

            .intro .caption .btn > i,
            .parallax .btn > i {
                opacity: 0;
                width: 0;
                font-size: 14px;
                padding: 0 !important;
                -webkit-transform: translateY(1px);
                -moz-transform: translateY(1px);
                transform: translateY(1px);
                -webkit-transition: .5s;
                -moz-transition: .5s;
                transition: .5s;
            }

            .intro .caption .btn:hover > i,
            .parallax .btn:hover > i {
                text-align: center;
                opacity: 1;
                width: 5px;
                margin-left: 10px;
            }

    /* Video control */
    .intro .content .video-control {
        width: 70px;
        margin: 0 auto 30px;
        cursor: pointer;
    }

        .intro .content .video-control i {
            font-size: 18px;
            line-height: 64px;
            width: 70px;
            border: 3px solid #fff;
            border-radius: 50%;
            -moz-backface-visibility: hidden;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

            .intro .content .video-control i.fa-play {
                text-indent: 4px;
            }

        .intro .content .video-control:hover i {
            background-color: #fff;
            -webkit-transform: scale(1.12);
            -moz-transform: scale(1.12);
            transform: scale(1.12);
        }

    .intro .content .video-container {
        margin-top: 10px;
        display: inline-block;
        width: 47.86324786324786%;
        min-width: 150px;
        padding: 4px;
        background-color: #fff;
        border-radius: 3px;
        line-height: 0;
    }

    /* Magic mouse */
    .intro .mouse {
        position: absolute;
        z-index: 2;
        width: 24px;
        height: 38px;
        border: 1px solid #fff;
        border-radius: 12px;
        background: transparent;
        bottom: 30px;
        margin: 0 auto;
        left: 0;
        right: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

        .intro .mouse a {
            display: block;
            width: 26px;
            height: 40px;
        }

        .intro .mouse .wheel {
            position: absolute;
            display: block;
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            margin-left: auto;
            margin-right: auto;
            top: 3px;
            left: 0;
            right: 0;
            -webkit-animation: magic-mouse 1.7s infinite ease;
            -moz-animation: magic-mouse 1.7s infinite ease;
            animation: magic-mouse 1.7s infinite ease;
        }

@keyframes magic-mouse {
    0% {
        top: 3px;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        top: 16px;
        opacity: 0;
    }
}

/********************
    - 8. Arrows -
********************/
.arrows {
    font-size: 0;
    margin-top: 35px;
}

    .arrows .arrow {
        line-height: 1;
        font-size: 14px;
        cursor: pointer;
        display: inline-block;
        position: relative;
        color: #fff !important;
    }

        .arrows .arrow.left {
            margin-right: 12px;
        }

        .arrows .arrow i.fa {
            padding: 5px;
            color: inherit;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

/* Intro arrows */
.intro .intro-slideshow .owl-nav > button {
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 80px;
    line-height: 80px;
    margin-top: -40px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    border: 0;
    /* background:rgba(33, 33, 33, 0.6) !important; */
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .intro .intro-slideshow .owl-nav > button:hover {
        width: 60px;
        background: #212121 !important;
        text-decoration: none;
    }

    .intro .intro-slideshow .owl-nav > button > span {
        display: none;
    }

.intro .intro-slideshow .owl-nav > .owl-next {
    left: auto;
    right: 0;
    border-right: 0 !important;
}

.intro .intro-slideshow .owl-nav > button:before {
    font-family: "linea-arrows-10" !important;
    font-size: 25px;
    line-height: 60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.intro .intro-slideshow .owl-nav > button:hover:before {
    font-size: 40px;
}

.intro .intro-slideshow .owl-nav > .owl-prev:before {
    content: "\e03f";
}

.intro .intro-slideshow .owl-nav > .owl-next:before {
    content: "\e04b";
}

/* Intro dots */
.intro .intro-slideshow .owl-dots {
    position: absolute;
    right: 30px;
    bottom: 23px;
}

    .intro .intro-slideshow .owl-dots > .owl-dot span {
        display: block;
        width: 2px;
        height: 15px;
        background: #fff;
        cursor: pointer;
        margin: 0 5px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .intro .intro-slideshow .owl-dots > .owl-dot:last-child span {
        margin-right: 0;
    }

    .intro .intro-slideshow .owl-dots > .owl-dot.active span {
        height: 25px;
    }

/**********************
    - 9. Services -
**********************/
.service-single {
    position: relative;
    text-align: center;
}

    .service-single .icon {
        display: inline-block;
        font-size: 52px;
        width: 110px;
        height: 110px;
        line-height: 110px;
        text-align: center;
        background: #fff;
        border-radius: 50%;
        -webkit-box-shadow: 0 30px 73px rgba(40, 40, 40, .1);
        -moz-box-shadow: 0 30px 73px rgba(40, 40, 40, .1);
        box-shadow: 0 30px 73px rgba(40, 40, 40, .1);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .service-single:hover .icon {
        color: #fff;
    }

    .service-single h3 {
        font-size: 18px;
        margin: 20px 0 18px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .service-single > p:last-child {
        margin-bottom: 0;
    }

/**********************
    - 10. Clients -
**********************/
.clients-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

    .clients-slider .client {
        position: relative;
        overflow: hidden;
        text-align: center;
    }

        .clients-slider .client img {
            display: block;
            width: 80px !important;
            margin: 0 auto;
            text-align: center;
            opacity: 0.7;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

            .clients-slider .client img:hover {
                opacity: 1;
            }

    .clients-slider .owl-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -60px;
        text-align: center;
    }

        .clients-slider .owl-dots > .owl-dot {
            display: inline-block;
        }

            .clients-slider .owl-dots > .owl-dot span {
                display: block;
                width: 2px;
                height: 15px;
                background: #ccc;
                cursor: pointer;
                margin: 0 5px;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                transition: all 0.3s;
            }

            .clients-slider .owl-dots > .owl-dot.active span {
                height: 25px;
            }

/**********************
    - 11. Buttons -
**********************/
.btn {
    border-radius: 2px;
    padding: 10px;
    line-height: 1;
    font-size: 13px;
    font-weight: 700;
    border-width: 0;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .btn i {
        color: inherit;
        padding-right: 0px;
    }

        .btn i.right {
            padding-left: 5px;
            padding-right: 0;
        }

    .btn.btn-default {
        color: #fff;
    }

    .btn.btn-link {
        text-decoration: none !important;
    }

    .btn.btn-inverse {
        background-color: transparent !important;
        border: 2px solid;
        padding: 16px 28px;
    }

        .btn.btn-inverse:hover,
        .btn.btn-inverse:focus {
            background-color: transparent;
        }

    .btn.btn-rounded {
        border-radius: 30px;
    }

    .btn.btn-small {
        padding: 13px 20px 14px;
    }

        .btn.btn-small i.fa {
            font-size: 12px;
            padding-right: 3px;
        }

        .btn.btn-small.btn-inverse {
            padding: 11px 18px 12px;
        }

    .btn.btn-white {
        color: #fff !important;
    }

        .btn.btn-white.btn-inverse {
            border-color: #fff;
        }

            .btn.btn-white.btn-inverse:hover {
                border-color: rgba(255, 255, 255, 0.8);
            }

    .btn[disabled] {
        opacity: 1;
    }

/********************************
    - 12. Inputs, Textareas -
********************************/
input,
textarea {
    line-height: 1;
    padding: 15px 18px;
    color: #a6a6a6;
    border-radius: 3px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-weight: normal;
    -webkit-transition: border-color 0.15s ease-in;
    -moz-transition: border-color 0.15s ease-in;
    transition: border-color 0.15s ease-in;
}

    input[disabled],
    textarea[disabled] {
        background-color: #fff;
        border-color: #f1f1f1;
        color: #a6a6a6;
    }

textarea {
    line-height: 1.5;
}

/*** Videos ***/
.video-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

    .video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 0;
    }

iframe {
    border: 0;
}

/************************
    - 13. Portfolio -
************************/
.portfolio {
    overflow: hidden;
}

    .portfolio .container {
        padding-bottom: 30px;
    }

/* Filter */
.portfolio-filters span {
    display: inline-block;
    padding: 1px 20px;
    font-weight: 600;
    color: #282828;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
}

/* Items */
.portfolio-item {
    position: relative;
    overflow: hidden;
}

    .portfolio-item a {
        z-index: 3;
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .portfolio-item img {
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .portfolio-item:hover {
        background-color: #3090A9;
    }

        .portfolio-item:hover img {
            -webkit-transform: scale(1.12);
            -moz-transform: scale(1.12);
            transform: scale(1.12);
        }

    .portfolio-item .overlay-info {
        text-align: center;
    }

    .portfolio-item h6 {
        position: relative;
        margin-bottom: 0;
        color: #fff;
        letter-spacing: 1px;
    }

    .portfolio-item p {
        color: rgba(255, 255, 255, 0.9);
    }

    .portfolio-item h6,
    .portfolio-item p {
        transform: translateY(15px);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .portfolio-item:hover h6,
    .portfolio-item:hover p {
        transform: translateY(0);
    }

    /* Overlay */
    .portfolio-item .img-overlay {
        position: absolute;
        z-index: 2;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        opacity: 0;
        background: rgba(0, 0, 0, 0.7);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .portfolio-item:hover .img-overlay {
        opacity: 1;
        transform: translateY(0);
    }

    /* Loading */
    .portfolio-item .loading {
        position: absolute;
        z-index: 4;
        width: 0;
        height: 100%;
        left: 0;
        bottom: 0;
    }

/* Details */
#portfolio-details {
    display: none;
    border-bottom: 1px solid #f1f1f1;
}

    #portfolio-details .section-title p {
        margin-bottom: 20px;
    }

    #portfolio-details h4 {
        margin-bottom: 20px;
    }

/***********************
    - 14. Info box -
***********************/
.info-box .container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.info-box h1,
.info-box .h1,
.info-box h2,
.info-box .h2,
.info-box h3,
.info-box .h3,
.info-box h4,
.info-box .h4,
.info-box h5,
.info-box .h5,
.info-box h6,
.info-box .h6 {
    line-height: 1em;
    font-weight: 400;
    margin: 0;
}

.info-box p {
    color: #999;
    font-style: italic;
    margin: 0;
}

.info-box .btn {
    margin-top: 5px;
}

.info-box input[type="email"],
.info-box input[type="text"] {
    font-family: oswald;
    font-size: 24px;
    color: #282828;
    line-height: 1;
    padding: 0;
    width: 100%;
    border: 0;
    background-color: transparent;
    margin-top: 0.5em;
    font-weight: 500;
}

.info-box ::-webkit-input-placeholder {
    opacity: 1;
    color: #282828;
}

.info-box ::-moz-placeholder {
    opacity: 1;
    color: #282828;
}

.info-box ::-ms-input-placeholder {
    opacity: 1;
    color: #282828;
}

/***********************
    - 15. Our team -
***********************/
.team-slider {
    clear: both;
    text-align: center;
}

.team-member {
    border: none;
    padding: 35px 50px;
    background: #f7f7f7;
}

    /* Details */
    .team-member .team-details {
        position: relative;
        margin-bottom: 30px;
    }

        .team-member .team-details .title {
            font-size: 18px;
            margin: 0;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

        .team-member .team-details .position {
            padding: 0;
            margin: 0;
            color: #666;
            overflow-wrap: break-word;
        }

/* Image */
.team-thumb {
    margin-bottom: 30px;
}

    .team-thumb > img {
        display: inline-block !important;
        max-width: 200px;
        border-radius: 50%;
    }

/* Excerpt */
.team-excerpt {
    margin-bottom: 20px;
}

/* Social */
.team-member .team-social > a {
    display: inline-block;
    text-align: center;
    margin: 0 10px;
    font-size: 16px;
    line-height: 16px;
    width: 1.2em;
}

/* Center */
.team-slider .center {
    z-index: 999;
}

    .team-slider .center .team-member {
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .1);
        box-shadow: 2px 2px 20px rgba(0, 0, 0, .1);
    }

/* Team arrows */
.team-slider .owl-nav > button {
    position: absolute;
    left: 0;
    top: 50%;
    width: 36px;
    height: 36px;
    line-height: 80px;
    margin-top: -18px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .team-slider .owl-nav > button:hover {
        text-decoration: none;
    }

    .team-slider .owl-nav > button > span {
        display: none;
    }

.team-slider .owl-nav > .owl-next {
    left: auto;
    right: 0;
    border-right: 0 !important;
}

.team-slider .owl-nav > button:before {
    font-family: "linea-arrows-10" !important;
    font-size: 20px;
    line-height: 36px;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.team-slider .owl-nav > .owl-prev:before {
    content: "\e03f";
}

.team-slider .owl-nav > .owl-next:before {
    content: "\e04b";
}

.team-slider:hover .owl-nav > button {
    opacity: 1;
}

.team-slider:hover .owl-nav > .owl-prev {
    left: 32%;
}

.team-slider:hover .owl-nav > .owl-next {
    right: 32%;
}

/**********************
    - 16. Contact -
**********************/
/* Contact info */
.contact-info h3 {
    margin: 0 0 30px 0;
}

.contact-content {
    clear: both;
    padding: 25px 0;
    border-bottom: 1px solid #ddd;
}

.contact-info > .contact-content:last-child {
    border-bottom: 0;
}

.contact-content > .icon {
    position: relative;
    display: block;
    float: left;
    font-size: 40px;
    line-height: 40px;
    font-weight: normal;
    margin-right: 20px;
    text-align: center;
    cursor: default;
}

.contact-content > .contact-text {
    position: relative;
    display: block;
    float: left;
    width: calc(100% - 60px);
}

    .contact-content > .contact-text > h4 {
        margin: 0;
        font-size: 18px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .contact-content > .contact-text > p {
        margin: 0;
    }

/* Contact form */
.contact-form .field {
    width: 98.24561403508772%;
    margin-bottom: 20px;
    position: relative;
}

    .contact-form .field:last-child {
        margin-bottom: 40px;
    }

    .contact-form .field input,
    .contact-form .field textarea {
        width: 100%;
    }

    .contact-form .field textarea {
        height: 110px;
    }

    .contact-form .field .error {
        display: none;
        position: absolute;
        top: 17px;
        right: 15px;
        line-height: 1;
        cursor: default;
    }

        .contact-form .field .error i.fa {
            font-size: 14px;
            cursor: inherit;
            color: #a6a6a6;
        }

.contact-form-result {
    display: none;
}

    .contact-form-result h3 {
        margin: 0 0 20px 0 !important;
    }

.contact-form h5 {
    margin-top: 0;
}

/**************************
    - 17. Google maps -
**************************/
.map {
    position: relative;
    overflow: hidden;
}

    .map #google-map {
        height: 450px;
    }

    .map #map-info {
        display: none;
    }

#zoom-in,
#zoom-out {
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-left: 40px;
    background-repeat: no-repeat;
    background-size: 32px 64px;
    background-image: url("images/map-controller.svg");
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#zoom-in {
    background-position: 50% 0;
    margin-top: 100px;
    margin-bottom: 1px;
}

#zoom-out {
    background-position: 50% -32px;
}

/*********************
    - 18. Footer -
*********************/
footer {
    position: relative;
    clear: both;
    z-index: 10;
    font-family: oswald;
    color: #b0b0b0;
}

    /* Widgets */
    footer .footer-widgets {
        position: relative;
        clear: both;
        background: #222;
        padding-top: 60px;
        padding-bottom: 60px;
    }

        footer .footer-widgets h5 {
            color: #fff;
            margin-bottom: 30px;
        }

        footer .footer-widgets a {
            color: #b0b0b0;
        }

        footer .footer-widgets .textwidget i {
            color: #fff;
            margin-right: 5px;
            line-height: 25px;
            vertical-align: top;
        }

        footer .footer-widgets .textwidget span {
            display: inline-block;
        }

        footer .footer-widgets .footer-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        footer .footer-widgets .tags {
            margin-top: 16px;
        }

            footer .footer-widgets .tags .tag {
                border: 1px solid #b0b0b0;
                background: transparent;
            }

    /* Recent post */
    footer .recent-post {
        width: 70%;
        padding: 0;
    }

    footer .recent-post-image,
    footer .recent-post-categories {
        display: none;
    }

    footer .recent-post-info {
        width: 100%;
        padding-left: 0;
        padding-bottom: 15px;
    }

        footer .recent-post-info h4 {
            font-size: 14px !important;
            line-height: 20px !important;
            font-weight: 400;
            margin: 0;
        }

    /* Newsletter form */
    footer .newsletter-form input[type=email] {
        width: 100%;
        border-color: #666;
        background: transparent;
    }

    footer .newsletter-form .newsletter-form-fields p {
        position: relative;
    }

        footer .newsletter-form .newsletter-form-fields p:first-child {
            margin-bottom: 20px;
        }

    footer .newsletter-form button {
        position: absolute;
        top: 50%;
        right: 0;
        width: auto;
        height: 100%;
        background-color: transparent;
        padding: 0 15px 0 15px;
        font-size: 18px;
        line-height: 40px;
        color: #fff;
        border: 0;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

/* Scroll top */
#scrollTop {
    position: fixed;
    display: block;
    opacity: 0;
    z-index: 10;
    right: 18px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    border: 2px solid grey;
    /* background-color: rgba(215, 186, 186, 0.25); */
    overflow: hidden;
    cursor: pointer;
    transition: opacity .3s, bottom .5s, box-shadow .3s cubic-bezier(.55, 0, .1, 1), background-color .1s linear;
}

    #scrollTop div {
        position: relative;
        z-index: 10;
        width: 39px;
        height: 39px;
        line-height: 39px;
        font-size: 24px;
        top: 0;
        left: 0;
        text-align: center;
        background-color: transparent;
        transform: translate(0, 0px);
        transition: transform .2s ease;
    }

        #scrollTop div:before {
            line-height: 39px;
        }

    #scrollTop:hover {
        transition: box-shadow .3s cubic-bezier(.55, 0, .1, 1), background-color .05s linear .25s;
        background-color: transparent;
    }

        #scrollTop:hover div {
            transform: translate(0, -39px);
        }

    #scrollTop:before,
    #scrollTop:after {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        display: block;
        content: ' ';
        height: 100%;
        width: 100%;
        background-color: #000;
        transform: scale(0);
        transition: all .3s cubic-bezier(.55, 0, .1, 1);
        border-radius: 50%;
    }

    #scrollTop:before {
        z-index: 2;
        opacity: 0;
        background-color: rgba(255, 255, 255, .25);
        transform: scale(1);
        transition: all .5s cubic-bezier(.165, .84, .44, 1);
    }

    #scrollTop:hover:after {
        transform: scale(1);
    }

    #scrollTop:active:before {
        opacity: 1;
    }

/* Social */
.footer-social {
    cursor: default;
    line-height: 1;
}

    .footer-social a {
        margin: 0 10px;
    }

        .footer-social a:last-child {
            margin-right: 0;
        }

        .footer-social a > i {
            font-size: 16px;
            line-height: 16px;
            color: #fff;
            width: 1.2em;
            text-align: center;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

/* Copyright */
footer .footer-copyright {
    position: relative;
    clear: both;
    background: #1a1a1a;
    padding-top: 30px;
    padding-bottom: 30px;
}

footer .copyright {
    clear: both;
    margin: 0;
    line-height: 16px;
}

    footer .copyright a {
        color: #fff;
        font-family: oswald;
        font-weight: 600;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

/*********************
    - 19. Tables -
*********************/
.table-bordered,
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-color: #f1f1f1 !important;
}

/****************************
    - 20. Images slider -
****************************/
.image-slider div {
    display: none;
}

    .image-slider div.arrows {
        display: block;
    }

    .image-slider div:first-child {
        display: block;
    }

.image-slider .arrows {
    position: absolute;
    margin-top: 0;
    margin-left: 0;
    bottom: 5px;
    right: 27px;
    z-index: 999;
}

    .image-slider .arrows.large {
        left: 0;
        right: 0;
        bottom: auto;
        top: 50%;
        margin-top: -0.5em;
        margin-right: 0 !important;
    }

        .image-slider .arrows.large .arrow {
            position: absolute;
            display: block;
        }

            .image-slider .arrows.large .arrow i {
                opacity: .2;
                color: #282828 !important;
                font-size: 16px;
            }

            .image-slider .arrows.large .arrow:hover i {
                opacity: 1;
            }

            .image-slider .arrows.large .arrow.left {
                left: -40px;
            }

            .image-slider .arrows.large .arrow.right {
                right: -40px;
            }

/*************************
    - 21. Blog posts -
*************************/
.blog-home .blog-col {
    position: relative;
}

[class^="col-"]:last-child .blog-home .blog-col {
    margin-bottom: 0 !important;
}

.blog-home .blog-wrapper {
    clear: both;
    padding-top: 30px;
}

.blog-home .blog-col > p {
    position: relative;
    margin-bottom: 0 !important;
}

    .blog-home .blog-col > p > a {
        display: block;
        background: #fff;
        border-radius: 3px;
        overflow: hidden;
    }

.blog-home .blog-img {
    width: 100%;
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .blog-home .blog-img:hover {
        opacity: 0.7;
        -webkit-transform: scale(1.12);
        -moz-transform: scale(1.12);
        transform: scale(1.12);
    }

.blog-home .blog-category {
    position: absolute;
    display: block;
    left: 0;
    bottom: 20px;
    color: #fff;
    padding: 10px;
    font-size: 11px;
    line-height: 11px;
    font-weight: 700;
    border-radius: 0 3px 3px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-home .blog-text h4 {
    margin: 0 0 5px;
}

.blog-home .blog-text p:last-child {
    margin-bottom: 0;
}

/* About */
.blog-about {
    clear: both;
    padding: 0 0 20px 0;
    margin: 0;
    color: #999;
    font-size: 12px;
    font-weight: 600;
}


.blog-post header .info span:last-child:after {
    content: '';
}

.blog-post header + p {
    margin-top: 20px;
}

.blog-post header + img,
.blog-post header + img + p,
.blog-post header + .video-responsive,
.blog-post header + .video-responsive + p,
.blog-post header + .image-slider,
.blog-post header + .image-slider + p,
.blog-post .image-slider + p {
    margin-top: 20px;
}

.blog-post .image-slider div {
    padding: 0 !important;
}

.blog-post .image-slider .arrows {
    right: 12px;
}

.blog-post .btn {
    margin-top: 20px;
    padding: 16px 28px;
}

/* Share button */
.share-btn {
    float: right;
    position: relative;
    cursor: pointer;
    padding-top: 9px;
    padding-left: 10px;
    margin: 12px 0 0 0 !important;
}

    .share-btn > p {
        color: #444;
        font-size: 11px;
        line-height: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

        .share-btn > p > i {
            color: #444 !important;
            margin-right: 8px;
            margin-top: 2px;
            font-size: 16px;
        }

    .share-btn:hover ul {
        display: block;
    }

    .share-btn ul {
        position: absolute;
        display: none;
        height: 36px;
        width: 144px;
        /* 36x4 */
        right: 100%;
        top: 1px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 3px;
        padding: 4px;
        z-index: 5;
    }

        .share-btn ul:after {
            position: absolute;
            font-family: 'Font Awesome 5 Free';
            content: '\f0da';
            font-weight: 900;
            font-size: 14px;
            top: 10px;
            left: 100%;
            color: #eee;
        }

    .share-btn li {
        display: inline-block;
        width: 32px;
        height: 27px;
        padding: 0;
        padding-right: 5px;
        margin-right: -3px;
    }

/* Post counters */
.post-counters {
    float: right;
    position: relative;
    margin: 20px 0 0 0;
    padding: 0;
}

    .post-counters li {
        display: inline-block;
        margin-left: 10px;
    }

        .post-counters li > a {
            font-size: 11px;
            line-height: 11px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

            .post-counters li > a > i {
                font-size: 16px;
            }

/*** Masonry blog ***/
.blog-masonry.blog-masonry-four header h3 {
    font-size: 18px;
}

.blog-masonry .blog-post.masonry {
    padding-left: 25px;
    padding-right: 25px;
    background-color: #fff;
}

.blog-masonry .btn {
    padding: 14px 24px;
}

/* Post footer */
.post-footer {
    clear: both;
    padding-bottom: 27px;
    border-bottom: 1px solid #f1f1f1;
}

    .post-footer.single-post-footer {
        padding-bottom: 40px;
        border-bottom: 0;
    }

        .post-footer.single-post-footer .tags {
            float: left;
            margin-top: 20px;
        }

/* Previous/Next posts */
.post-navigation-wrapper {
    position: relative;
    z-index: 1;
    clear: both;
    width: 100%;
}

    .post-navigation-wrapper > .container {
        margin-top: 40px;
    }

.nav-links {
    clear: both;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
}

    .nav-links:before {
        content: '';
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 0;
        bottom: 0;
        margin-left: -3px;
        width: 6px;
        height: 150px;
        background: #fff;
    }

    .nav-links span {
        position: relative;
        z-index: 10;
        display: block;
        color: #999;
        font-size: 14px;
        font-weight: 400;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .nav-links .nav-previous,
    .nav-links .nav-next {
        position: relative;
        width: 50%;
        padding: 40px;
        background-color: #f3f3f3;
        overflow: hidden;
    }

    .nav-links .nav-previous {
        float: left;
        text-align: left;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

        .nav-links .nav-previous i {
            margin-right: 5px;
        }

    .nav-links .nav-next {
        float: right;
        text-align: right;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

        .nav-links .nav-next i {
            margin-left: 5px;
        }

    .nav-links .nav-title {
        position: relative;
        z-index: 10;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .nav-links .nav-thumb {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center !important;
        background-size: cover;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

        .nav-links .nav-thumb:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            opacity: 0.3;
        }

    .nav-links .nav-previous:hover span,
    .nav-links .nav-next:hover span,
    .nav-links .nav-previous:hover .nav-title,
    .nav-links .nav-next:hover .nav-title {
        color: #fff !important;
    }

    .nav-links .nav-previous:hover .nav-thumb,
    .nav-links .nav-next:hover .nav-thumb {
        opacity: 1;
    }

/* Post author */
.post-author {
    position: relative;
    z-index: 2;
    top: -20px;
    padding-bottom: 40px;
}

    .post-author .avatar {
        clear: both;
        display: inline-block;
    }

        .post-author .avatar img {
            clear: both;
            display: block;
            max-width: 100%;
            border: 6px solid #fff;
        }

    .post-author .description {
        width: 80%;
        margin: 0 auto;
    }

        .post-author .description > p:last-child {
            margin: 0;
        }

/* About author */
.about-author {
    margin-top: 20px;
}

    .about-author .avatar {
        display: inline-block;
        margin-right: 10px;
    }

        .about-author .avatar img {
            width: 40px;
        }

    .about-author .description {
        display: inline-block;
        color: #999;
        font-size: 12px;
        font-weight: 600;
        margin-top: 0;
    }

        .about-author .description > span {
            font-weight: 400;
        }

section.parallax .about-author .description,
section.parallax .about-author a {
    color: #fff;
}

/***********************
    - 22. Sidebars -
***********************/
.sidebar {
    padding-left: 20px;
    margin-bottom: 40px;
}

    .sidebar header {
        margin-bottom: 30px;
    }

    .sidebar ul.menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .sidebar ul.menu li {
            border-bottom: 1px solid #f1f1f1;
            padding: 8px 10px;
        }

            .sidebar ul.menu li a {
                color: inherit;
                font-weight: 600;
                text-decoration: none !important;
                -webkit-transition: color 0.15s ease;
                -moz-transition: color 0.15s ease;
                transition: color 0.15s ease;
            }

            .sidebar ul.menu li span {
                float: right;
                font-size: 11px;
                text-align: center;
                min-width: 24px;
                height: 24px;
                border-radius: 100%;
                color: #fff;
            }

    .sidebar ul.links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .sidebar ul.links li {
            padding: 4px 0;
        }

            .sidebar ul.links li a {
                color: inherit;
                text-decoration: none !important;
                -webkit-transition: color 0.15s ease;
                -moz-transition: color 0.15s ease;
                transition: color 0.15s ease;
            }

    /* Title */
    .sidebar header h4 {
        position: relative;
        padding: 15px;
        margin: 0;
        text-align: center;
        font-weight: 600;
        background: #f5f5f5;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    .sidebar h4:after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-top-color: #f5f5f5;
        border-width: 8px;
        margin-left: -8px;
    }

    /* Search form */
    .sidebar .search-form {
        position: relative;
    }

        .sidebar .search-form input[type="text"] {
            width: 100%;
            height: 40px;
            padding: 0 40px 0 16px;
            margin: 0;
        }

        .sidebar .search-form button {
            position: absolute;
            top: 50%;
            right: 0;
            width: auto;
            height: 100%;
            background-color: transparent;
            padding: 0 15px 0 15px;
            font-size: 18px;
            line-height: 40px;
            color: #333;
            border: 0;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }

/* Tag cloud */
.tags {
    overflow: hidden;
}

    .tags .tag {
        display: inline-block;
        text-align: center;
        padding: 0 12px;
        line-height: 24px;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 12px !important;
        border-radius: 12px;
        background: #eee;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

        .tags .tag:hover {
            color: #fff;
        }

/* Author */
.author-content {
    text-align: center;
    padding-top: 10px;
}

    .author-content img {
        border-radius: 50%;
    }

    .author-content h5 {
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 0;
        text-transform: none;
    }

    .author-content p {
        margin: 20px 0;
    }

        .author-content p.position {
            padding: 0;
            margin: 0;
            color: #666;
        }

.author-social {
    margin: 0 !important;
}

/* Recent posts */
.recent-post {
    padding: 14px 0 6px;
}

.recent-post-image {
    position: relative;
    display: table-cell;
    width: 24%;
    padding-top: 8px;
}

    .recent-post-image img {
        border-radius: 2px;
    }

    .recent-post-image:before {
        content: attr(data-count);
        position: absolute;
        top: -6px;
        left: -14px;
        font-size: 12px;
        font-weight: 400;
        width: 30px;
        height: 30px;
        text-align: center;
        border: 2px solid #fff;
        border-radius: 50%;
        color: #fff;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

.recent-post-info {
    width: 75%;
    display: table-cell;
    padding-left: 12px;
    vertical-align: middle;
}

    .recent-post-info h4 {
        font-size: 16px;
        margin: 3px 0;
    }

.recent-post-categories {
    color: #999;
    font-size: 12px;
}

    .recent-post-categories a:hover {
        text-decoration: underline;
    }

.recent-post-info p {
    color: #666;
    font-size: 12px;
    margin: 0;
}

/* Instagram feed */
.instagram-feed {
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: -6px;
}

    .instagram-feed div {
        padding: 0 3px 6px 3px;
    }

    .instagram-feed img {
        width: 100%;
        border-radius: 3px;
    }

/*************************
    - 23. Pagination -
*************************/
.pages-navigation a {
    padding: 12px 20px;
    color: #fff !important;
    text-decoration: none !important;
}

/***************************
    - 24. Comment form -
***************************/
.comment-form {
    margin-top: 40px;
    padding: 40px;
    background: #f3f3f3;
    border-radius: 3px;
}

    .comment-form header {
        margin-bottom: 40px;
    }

        .comment-form header h3,
        .comment-form header p {
            margin: 0;
        }

    .comment-form .field {
        margin-bottom: 20px;
    }

        .comment-form .field input {
            width: 99.4%;
        }

        .comment-form .field textarea {
            height: 130px;
            width: 100%;
        }

/***********************
    - 25. Comments -
***********************/
.user-comment {
    margin-bottom: 40px;
}

.comments .row .col-md-12 > .user-comment:last-child {
    margin-bottom: 0;
}

.user-comment .image {
    float: left;
    width: 50px;
    margin-right: 20px;
    margin-top: 5px;
}

.user-comment .details {
    margin-left: 70px;
}

    .user-comment .details .info {
        width: 100%;
        margin-bottom: 10px;
        overflow: hidden;
    }

        .user-comment .details .info .author {
            clear: both;
            display: block;
            font-size: 18px;
            font-weight: 600;
            color: #282828;
        }

        .user-comment .details .info .date {
            clear: both;
            display: block;
            color: #999;
            font-size: 12px;
            font-weight: 600;
        }

            .user-comment .details .info .date > span {
                font-weight: 400;
            }

    .user-comment .details .reply a {
        font-size: 12px;
        font-weight: 600;
    }

        .user-comment .details .reply a:hover {
            color: #444;
        }

.user-comment .user-comment {
    margin-top: 40px;
    margin-left: 5%;
}

/*************************
    - 26. Error page -
*************************/
#error-page {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

/**************************
    - 27. Share panel -
**************************/
.share-panel {
    margin-bottom: 70px;
    line-height: 1;
    text-align: center;
}

    .share-panel span {
        clear: both;
        display: block;
        margin-bottom: 20px;
        color: #444;
        font-weight: 600;
    }

    .share-panel .social {
        display: inline-block;
        cursor: default;
    }

    .share-panel a {
        display: inline-block;
        margin-right: 10px;
        padding: 5px;
    }

        .share-panel a:last-of-type {
            margin-right: 0;
        }

        .share-panel a:hover i {
            color: #282828;
        }

    .share-panel i {
        cursor: pointer;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.2);
        -webkit-transition: color 0.15s ease;
        -moz-transition: color 0.15s ease;
        transition: color 0.15s ease;
    }

/****************************
    - 28. Progress bars -
****************************/
.skills,
.bar {
    clear: both;
}

.progress {
    height: 8px;
    margin-bottom: 15px;
    background-color: #ddd;
    border-radius: 4px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.skills > .bar:last-child > .progress {
    margin-bottom: 0;
}

.progress .progress-bar {
    width: 0;
    border-radius: 0 4px 4px 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.progress-heading {
    overflow: hidden;
    margin-bottom: 5px;
}

    .progress-heading .progress-title {
        float: left;
        margin: 0;
        padding: 0;
        color: #444;
        font-weight: 600;
        text-transform: none;
    }

    .progress-heading .progress-value {
        text-align: right;
        font-weight: 500;
    }

/* White */
section.parallax .progress {
    background-color: rgba(255, 255, 255, 0.3);
}

section.parallax .progress-heading .progress-title {
    color: #fff;
}

/*****************************
    - 29. Pricing tables -
*****************************/
.price-table {
    border-radius: 3px;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    color: #444;
    background-color: #fff;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .price-table:hover {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    /* Title */
    .price-table .price-title {
        position: relative;
        padding: 30px 30px 0 30px;
        margin-bottom: 0;
        border-radius: 3px 3px 0 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

        .price-table .price-title .icon {
            position: relative;
            display: block;
            font-size: 36px;
            line-height: 26px;
            font-weight: normal;
            margin-bottom: 20px;
            text-align: center;
            cursor: default;
        }

        .price-table .price-title > h5 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 50px;
            letter-spacing: 1px;
            color: #282828;
        }

        .price-table .price-title .price-rate .currency {
            font-weight: 700;
            font-size: 40px;
            line-height: 60px;
            vertical-align: top;
        }

            .price-table .price-title .price-rate .currency > i.fa {
                color: #444;
            }

        .price-table .price-title .price-rate .rate {
            font-weight: 700;
            font-size: 80px;
            line-height: 80px;
        }

        .price-table .price-title .price-rate .time {
            clear: both;
            display: block;
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

    /* Ribbon */
    .price-table .card-ribbon {
        position: absolute;
        overflow: hidden;
        top: -10px;
        right: -10px;
        width: 114px;
        height: 114px;
        z-index: 99;
    }

        .price-table .card-ribbon span {
            position: absolute;
            display: block;
            width: 165px;
            padding: 9px 0;
            background-color: #23292c;
            box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
            color: #fff;
            font-size: 12px;
            text-transform: uppercase;
            text-align: center;
            right: -40px;
            top: 21px;
            letter-spacing: 1px;
            transform: rotate(45deg);
        }

        .price-table .card-ribbon:before,
        .price-table .card-ribbon:after {
            position: absolute;
            z-index: -1;
            content: '';
            display: block;
            border: 5px solid #0c0c0c;
            border-top-color: transparent;
            border-left-color: transparent;
        }

        .price-table .card-ribbon:before {
            top: 0;
            left: 0;
        }

        .price-table .card-ribbon:after {
            bottom: 0;
            right: 0;
        }

    /* Content */
    .price-table .price-content {
        padding: 50px 30px 30px 30px;
    }

        .price-table .price-content ol,
        .price-table .price-content ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .price-table .price-content ol li,
            .price-table .price-content ul li {
                padding-bottom: 5px;
            }

                .price-table .price-content ol li:last-child,
                .price-table .price-content ul li:last-child {
                    padding-bottom: 0;
                    margin-bottom: 0;
                    border-bottom: 0;
                }

    /* Footer */
    .price-table .price-button {
        clear: both;
        margin-top: 30px;
    }

    /* Featured */
    .price-table.featured {
        margin-top: 0;
        box-shadow: 2px 2px 20px rgba(0, 0, 0, .3);
    }

        .price-table.featured .price-title {
            padding-top: 50px;
        }

            .price-table.featured .price-title,
            .price-table.featured .price-title > .icon,
            .price-table.featured .price-title > h5,
            .price-table.featured .price-title .price-rate .currency > i,
            .price-table.featured .price-title .price-rate .rate,
            .price-table.featured .price-title .price-rate .time,
            .price-table.featured .price-content {
                color: #fff !important;
            }

        .price-table.featured .price-content {
            padding: 50px 30px;
        }

/***********************
    - 30. Counters -
***********************/
.counter {
    text-align: center;
    overflow: hidden;
}

    .counter .icon {
        position: relative;
        display: block;
        font-size: 48px;
        line-height: 48px;
        font-weight: normal;
        margin-bottom: 20px;
        text-align: center;
        cursor: default;
        border-right: 1px solid rgba(40, 40, 40, 0.1);
    }

[class^="col-"]:last-child .counter .icon {
    border-right: 0;
}

.counter-content h5 {
    font-weight: 700;
    font-size: 45px;
    line-height: 45px;
    margin: 0;
}

.counter-content p {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 20px;
}

.odometer-digit {
    padding: 0 5px 0 0 !important;
}

/* Dark */
section.bg-dark .counter {
    color: #fff;
}

/***************************
    - 31. Testimonials -
***************************/
.testimonial-carousel .carousel-images {
    margin-bottom: 20px;
}

    .testimonial-carousel .carousel-images .slick-slide img {
        cursor: pointer;
        padding: 12px;
        opacity: 0.5;
        border: 2px solid transparent;
        transition: all 0.3s;
    }

    .testimonial-carousel .carousel-images .slick-slide .client-info {
        margin-top: 20px;
        text-align: center;
        transition: all 0.3s;
        visibility: hidden;
        opacity: 0;
    }

        .testimonial-carousel .carousel-images .slick-slide .client-info h3 {
            font-size: 16px;
            line-height: 16px;
            margin: 0;
        }

        .testimonial-carousel .carousel-images .slick-slide .client-info span {
            display: block;
            color: #666;
            margin-top: 7px;
            line-height: 1;
        }

    .testimonial-carousel .carousel-images .slick-slide:active,
    .testimonial-carousel .carousel-images .slick-slide:focus {
        outline: none;
    }

    .testimonial-carousel .carousel-images .slick-center img {
        padding: 2px;
        opacity: 1;
    }

    .testimonial-carousel .carousel-images .slick-center .client-info {
        visibility: visible;
        opacity: 1;
    }

.testimonial-carousel .carousel-text .single-box {
    width: 620px;
    text-align: center;
    margin: 0 auto;
}

    .testimonial-carousel .carousel-text .single-box p {
        font-size: 25px;
        line-height: 1.5em;
    }

        .testimonial-carousel .carousel-text .single-box p:last-child {
            margin-bottom: 0;
        }

/* Testimonial arrows */
.testimonial-nav .slick-arrow {
    position: absolute;
    left: 0;
    top: 65px;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 36px;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .testimonial-nav .slick-arrow > div.icon:before {
        line-height: 36px !important;
        text-decoration: none;
    }

    .testimonial-nav .slick-arrow.slick-next {
        left: auto;
        right: 0;
    }

/**********************
    - 32. Support -
**********************/
.faq-support .panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.faq-support .panel-heading {
    padding: 0;
}

    .faq-support .panel-heading h4 {
        font-size: 20px;
        font-weight: 400;
        cursor: pointer;
    }

        .faq-support .panel-heading h4 a {
            display: block;
            padding: 16px 16px 16px 44px;
            text-decoration: none;
        }

            .faq-support .panel-heading h4 a.collapsed {
                color: #444;
            }

.faq-support .panel-body {
    color: #666;
    border: none !important;
}

    .faq-support .panel-body p {
        margin-left: 30px;
    }

        .faq-support .panel-body p:last-child {
            margin-bottom: 0;
        }

.faq-support .panel-heading .panel-title a {
    position: relative;
}

    .faq-support .panel-heading .panel-title a:before {
        position: absolute;
        font-family: 'Font Awesome 5 Free';
        content: '\f068';
        left: 21px;
        top: 16px;
        font-size: 14px;
        font-weight: 900;
    }

.faq-support .panel-heading a.collapsed:before {
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    content: '\f067';
    left: 21px;
    top: 16px;
    font-weight: 900;
}




/* ini halaman css honda neo-fusion*/


body,
html {
    color: #444 !important;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.red_ahm {
    color: #E92030;
}

body h3,
h4 {
    font-family: oswald !important;
}

.logo_ahm {
    position: absolute;
    height: 56px;
    right: 5px;
    top: 22px;
}

.logo_honda {
    position: absolute;
    height: 90px;
    left: 0;
}

#container_page_home {
    min-height: 360px;
}

#menu_home {
    font-size: 20px;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #333;
}

.navbar-default {
    border: none;
    background: #E92030;
    border-radius: 0;
}

    .navbar-default .navbar-nav > li > a {
        color: #fff;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active > a:hover {
        color: #fff;
        background: #444;
    }

    .navbar-default .navbar-nav > li > a:focus {
        color: #fff !important;
        background-color: transparent;
    }

.form-group {
    margin: 15px;
}

    .form-group input {
        border-radius: 3px;
    }

.form-control {
    padding: 7px !important;
}

.large-button {
    min-width: 80px;
    min-height: 25px;
    font-size: 12px !important;
}

.form-login {
    background: #fff;
    border-top: 3px solid red;
    padding: 25px 40px;
    margin: 60px auto;
    box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.4);
}

.form-title-row {
    margin-bottom: 30px;
}

select {
    height: auto;
}

header {
    background: #fff;
}

.container_form {
    margin: 10px 0 30px;
}

    .container_form > div > div > div:first-child {
        border: 1px solid #ccc;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .container_form > div > div > div:nth-child(2) {
        background: white;
        border: 1px solid #ccc;
        padding-top: 15px;
        padding-bottom: 15px;
    }

.page_identifier {
    margin-top: 15px;
}

    .page_identifier li {
        list-style: none;
        font-weight: 700;
        color: #888;
        margin-bottom: 10px;
    }

        .page_identifier li i {
            display: none;
        }

        .page_identifier li.active {
            color: #444;
        }

            .page_identifier li.active i {
                display: inline-block;
            }

.footer_address h3 {
    font-weight: 700;
    margin-bottom: 10px !important;
    margin-left: 0 !important;
}

.footer_address ul {
    padding-left: 0px;
}

#footer container row {
    padding-left: 10px;
}

.table {
    margin-top: 10px;
}

    .table th {
        font-weight: 700;
        font-size: 12px;
        /*text-align:center;*/
    }

    .table td {
        font-size: 12px;
        vertical-align: middle !important;
    }

.small_button {
    font-size: 10px !important;
    min-width: 45px;
}

.form-register-with-email input {
    box-shadow: none !important;
}

.headpic {
    position: absolute;
    height: 90px;
    left: 0;
}

.headpic2 {
    position: absolute;
    height: 56px;
    right: 5px;
    top: 22px;
}

.navbar-inner > .container {
    position: relative;
    height: 90px;
}

#container_login {
    background-image: url('../image/cube.gif');
    background-size: 100%;
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

#thumb_user {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 10px;
    border: 1px solid #ccc;
}

.dropdown-menu:first-child {
    position: relative !important;
}

#greeting_text {
    position: absolute;
    left: 100px;
    top: 18px;
}

#username_loginn {
    position: absolute;
    left: 100px;
    top: 35px;
    width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: capitalize;
}

.dropdown-menu {
    background: white !important;
}

#container_slides_candidate > div.col-lg-12 {
    padding-left: 30px;
    padding-right: 30px;
}

.navbar-default .navbar-toggle {
    border: none !important;
}

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff !important;
    }

    .navbar-default .navbar-toggle:hover .icon-bar,
    .navbar-default .navbar-toggle:focus .icon-bar {
        background-color: #fff !important;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: #444;
    }

.login-outer {
    padding: 40px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 999999999999;
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
}

#loading_upload_file {
    background-image: url('../image/ajax-loader-small.gif');
    background-color: rgba(255, 255, 255, 0.8);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    height: 98%;
    width: 100%;
    position: absolute;
    top: 0;
    /*display:none;*/
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    #username_loginn {
        width: auto !important;
    }
}

@media only screen and (min-width : 768px) {
    #username_loginn {
        width: 80px !important;
    }
}

@media only screen and (max-width : 767px) {
    .dropdown-menu {
        border-radius: 0 !important;
    }

    .footer_address {
        padding: 0 30px;
    }
}

@media only screen and (min-width : 481px) {
    .form-group div.label_login {
        padding-top: 10px;
    }
}

@media only screen and (max-width : 480px) {
    .headpic2 {
        height: 32px !important;
        top: 8px !important;
    }

    .headpic {
        height: 60px !important;
        top: -7px !important;
    }

    .logo_ahm {
        height: 32px !important;
        top: 8px !important;
    }

    .logo_honda {
        height: 60px !important;
        top: -7px !important;
    }

    .navbar-inner > .container {
        height: 50px;
        overflow: hidden;
    }

    .form-login {
        margin: 30px auto;
    }

    .validatorCandidate {
        text-align: right;
        font-size: 11px;
        color: #E92030;
    }
}

/*    --------------------------------------------------
    :: General
    -------------------------------------------------- */
body {
    font-family: oswald;
    color: #353535;
}

.content h1 {
    text-align: center;
}

.content .content-footer p {
    color: #6d6d6d;
    font-size: 12px;
    text-align: center;
}

    .content .content-footer p a {
        color: inherit;
        font-weight: bold;
    }

.dropdown .dropdown-backdrop {
    display: none;
}

table > tbody > tr > td label {
    font-weight: normal !important;
}

/* 
ul li {
	display: inline-block;
	padding: 0;
  }
  ul li ~ li {
	border-left: 1px solid #333;
  } */

button.btn.honda-red {
    background-color: #FE0021;
}

.newspaper {
    column-count: 2;
    padding: 10px 0 0 0;
    margin-top: 20px;
}

.ahm-range {
    margin-left: 60px;
}


button.btn.ahm-button-big {
    font-size: 20px;
    background-color: red;
    border-radius: 25px;
    padding: 10px 20px;
    margin-left: 10%;
}

button.btn.ahm-button-reg {
    margin-top: 0px;
    display: block;
    font-size: 20px;
    background-color: red;
    border-radius: 35px;
    padding: 20px 25px 20px 25px;
    margin-top: -5px;
    margin-left: 10%;
    color: white;
}

@media only screen and (max-width : 767px) {
    button.btn.ahm-button-reg {
        margin-top: 0px;
        display: block;
        font-size: 20px;
        background-color: red;
        border-radius: 35px;
        padding: 20px 25px 20px 25px;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        color: white;
    }
}

.mt-10 {
    margin-top: 15em;
}

@media only screen and (max-width : 720px) {
    .mt-10 {
        margin-top: 100px !important;
        margin-bottom: 100px !important;
    }
}

h6.ahm-sub.text-muted {
    font-size: 12px;
}


* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-sheets {
    float: left;
    width: 10%;
    padding: 10px;
    height: 300px;
    /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

img.ahm-kelas {
    border-radius: 50%;
    padding: 35px;
    top: -18px;
    position: relative;
    display: block;
    height: 90%;
}

.ahm-round {
    font-size: 14px;
    background-color: red;
    border-radius: 25px;
    padding: 15px;
    color: white;
    margin-top: 15px;
}

@media only screen and (max-width : 720px) {
    .ahm-round {
        font-size: 10px;
        width: 40vw;
        background-color: red;
        border-radius: 25px;
        padding: 15px;
        padding: 12px 20px;
        color: white;
        margin-top: 15px;
    }

    .hide-yes {
        display: none;
    }
}

.row.portfolio-items.clearfix {
    background-color: #8CD2D9;
}

img.ahm-code {
    width: 150px;
    top: 50px;
    position: relative;
}

.borderless {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 6px;
}

a.ahm-borderless {
    border-radius: 8px;
    padding: 30px;
    line-height: 1;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid white;
    /* border-width: 0; */
    letter-spacing: 1px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn.btn-white {
    color: red !important;
    background-color: white;
    border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.btn.btn-jack {
    color: white !important;
    border: 1px solid white;
    /* background-color: #DE182E; */
    border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 8px;
    padding-top: 8px;
}


.btn.btn-jack-logout {
    color: white !important;
    border: 1px solid white;
    /* background-color: #DE182E; */
    border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.ahm-cal {
}

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

.spacer {
    margin-top: 2%;
    margin-bottom: 2%;
}

/* .block {
	height: 300px;
	padding-top: 15px;  
	background-color: darkorange;
  }   */
.block2 {
    min-height: 500px;
    padding-top: 10px;
}

.center {
    position: absolute;
    /*  top: 0;
	bottom: 0; */
    left: 0;
    right: 0;
    top: -70px;
    margin: auto;
}

.bg-ahm {
    /* background-color: #424242;
		border-radius: 12px;
		-webkit-box-shadow: 0px 0px 48px 14px rgba(0,0,0,1);
		-moz-box-shadow: 0px 0px 48px 14px rgba(0,0,0,1);
		box-shadow: 0px 0px 48px 14px rgba(0,0,0,1);
		-moz-box-shadow: 0px 0px 37px -7px rgba(242,242,242,1); */
    height: 400px;
    position: relative;
    bottom: 200px;
    display: block;
}




/* w3 school */

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300);

* {
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

    a:hover {
        color: #4FDA8C;
    }

input {
    font: oswald;
}

body {
    color: #666;
    background-color: #fcfcfc;
    font: oswald;
}

.form-wrap {
    background-color: #424242;
    width: 450px;
    height: 550px;
    margin: 3em auto;
    box-shadow: 0px 1px 8px #BEBEBE;
    -webkit-box-shadow: 0px 1px 8px #BEBEBE;
    -moz-box-shadow: 0px 1px 8px #BEBEBE;
}



@media only screen and (max-width : 1200px) {
    .form-wrap {
        width: 100%;
        top: 335px;
        position: relative;
    }
}


.form-wrap .tabs {
    overflow: hidden;
}

    .form-wrap .tabs h3 {
        float: left;
        width: 50%;
    }

        .form-wrap .tabs h3 a {
            padding: 0.5em 0;
            text-align: center;
            font-weight: 400;
            background-color: #e6e7e8;
            display: block;
            color: #666;
        }

            .form-wrap .tabs h3 a.active {
                background-color: #fff;
            }

.form-wrap .tabs-content {
    padding: 1.5em;
}

    .form-wrap .tabs-content div[id$="tab-content"] {
        display: none;
    }

    .form-wrap .tabs-content .active {
        display: block !important;
    }

.form-wrap form .input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    padding: .8em 0 10px .8em;
    border: 1px solid #CFCFCF;
    outline: 0;
    display: inline-block;
    margin: 0 0 .8em 0;
    padding-right: 2em;
    width: 100%;
}

.form-wrap form .button {
    width: 100%;
    padding: 0.8em 0 10px 0;
    background-color: #FE0021;
    border: none;
    color: #fff;
    top: -200px;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
}

    .form-wrap form .button:hover {
        background-color: #4FDA8C;
    }

.form-wrap form .checkbox {
    visibility: hidden;
    padding: 20px;
    margin: .5em 0 1.5em;
}

    .form-wrap form .checkbox:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

/*.form-wrap form label[for] {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
}

    .form-wrap form label[for]:before {
        content: '';
        position: absolute;
        border: 1px solid #CFCFCF;
        width: 17px;
        height: 17px;
        top: 0px;
        left: -14px;
    }

    .form-wrap form label[for]:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 9px;
        height: 5px;
        background-color: transparent;
        top: 4px;
        left: -10px;
        border: 3px solid #28A55F;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }*/

.form-wrap .help-text {
    margin-top: .6em;
}

    .form-wrap .help-text p {
        text-align: center;
        font-size: 14px;
    }


.pt {
    padding-top: 25px;
}


* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
    /* Should be removed. Only for demonstration */
}

label.forget {
    float: right;
    position: relative;
}

@media (max-width: 767px) {
    .res-margin {
        margin-bottom: 0;
    }
}


@media only screen and (max-width : 720px) {
    .parallax {
        height: 720px !important;
    }
}

.mt-ahm {
    margin-top: 80px;
}

.mt-ahm-short {
    margin-top: 40px;
}

/* .btn-group, .btn-group-vertical {
    position: relative;
    left: 20%;
    display: inline-flex;
    vertical-align: middle;
    -webkit-transform: scale(1.1);
    transform-origin: 0 0;
} */

label.btn.active.btn-success {
    background-color: red !important;
}

label.btn.btn-success {
    background-color: red;
}

button.btn.btn-danger.btn-lg.ahm-btn-large {
    position: relative;
    background-color: red;
    width: 7em;
    height: 2.5em;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
}

button.btn.btn-danger.btn-lg.ahm-btn-cancel {
    position: relative;
    color: red;
    background-color: #EAEAEA;
    width: 7em;
    height: 2.5em;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
}


button.btn.btn-danger.btn-lg.ahm-btn-large.width {
    width: 26%;
}

select#less {
    width: 108%;
}

input#less {
    width: 108%;
}

p.title-less {
    position: relative;
    display: block;
    top: 18px;
}

.container.mt-ahm.col-sm-7.form-less {
    margin-left: 6em;
}

.row.mb-form {
    margin-top: 18px;
}

input[type=file] {
    display: block;
    max-height: 46px;
    width: 100%;
    /* position: relative; */
}

button.btn.btn-danger.mt-button {
    width: 85%;
    height: 45px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    background-color: red;
}

button.btn.btn-danger.mt-button-cancel {
    width: 85%;
    height: 45px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
    background-color: transparent;
    border: 2px solid red;
    color: red;
}

.safety-form {
    top: 70px;
    position: relative;
    display: block;
    left: 15px;
}

i.fas.fa-map-marker-alt {
    font-size: 70px;
    color: red;
    margin-bottom: 20px;
    padding: 10px;
    display: block;
}

i.far.fa-clock {
    font-size: 70px;
    color: red;
    margin-bottom: 20px;
    padding: 10px;
    display: block;
}

i.fas.fa-ticket-alt {
    font-size: 70px;
    color: red;
    margin-bottom: 20px;
    transform: rotate(-40deg);
    padding: 10px;
    display: block;
}

.jumbotron {
    background-color: #424242;
}

.parallax-container {
    position: relative;
    bottom: 50px;
}

.v1 {
    position: relative;
    bottom: 30px;
}

span.strong-weight {
    font-weight: 100;
}

bold {
    font-weight: bolder;
}

.owl-item.active.center {
    top: 0px;
}

.container.team {
    padding-top: 0px;
}

.text-danger {
    color: red;
}




/* ini halaman css honda resmi */


.red_ahm {
    color: #E92030;
}



.logo_ahm {
    position: absolute;
    height: 56px;
    right: 5px;
    top: 22px;
}

.logo_honda {
    position: absolute;
    height: 90px;
    left: 0;
}

#container_page_home {
    min-height: 360px;
}

#menu_home {
    font-size: 20px;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #333;
}

.navbar-default {
    border: none;
    background: #E92030;
    border-radius: 0;
}

    .navbar-default .navbar-nav > li > a {
        color: #fff;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active > a:hover {
        color: #fff;
        background: #444;
    }

    .navbar-default .navbar-nav > li > a:focus {
        color: #fff !important;
        background-color: transparent;
    }

.form-group {
    margin: 15px;
}

    .form-group input {
        border-radius: 3px;
    }

.form-control {
    padding: 7px !important;
}

.large-button {
    min-width: 80px;
    min-height: 25px;
    font-size: 12px !important;
}

.form-login {
    background: #fff;
    border-top: 3px solid red;
    padding: 25px 40px;
    margin: 60px auto;
    box-shadow: 0px 2px 5px rgba(100, 100, 100, 0.4);
}

.form-title-row {
    margin-bottom: 30px;
}

select {
    height: auto;
}

header {
    background: #fff;
}
/*  */

.headpic2 {
    position: absolute;
    height: 56px;
    right: 5px;
    top: 22px;
}

.navbar-inner > .container {
    position: relative;
    height: 90px;
}

#container_login {
    background-image: url('../image/cube.gif');
    background-size: 100%;
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

#thumb_user {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 10px;
    border: 1px solid #ccc;
}

.dropdown-menu:first-child {
    position: relative !important;
}

#greeting_text {
    position: absolute;
    left: 100px;
    top: 18px;
}

#username_loginn {
    position: absolute;
    left: 100px;
    top: 35px;
    width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: capitalize;
}

.dropdown-menu {
    background: white !important;
}

#container_slides_candidate > div.col-lg-12 {
    padding-left: 30px;
    padding-right: 30px;
}

.navbar-default .navbar-toggle {
    border: none !important;
}

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff !important;
    }

    .navbar-default .navbar-toggle:hover .icon-bar,
    .navbar-default .navbar-toggle:focus .icon-bar {
        background-color: #fff !important;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: #444;
    }



@media only screen and (max-width : 480px) {
    .headpic2 {
        height: 32px !important;
        top: 8px !important;
    }

    .headpic {
        height: 60px !important;
        top: -7px !important;
    }

    .logo_ahm {
        height: 32px !important;
        top: 8px !important;
    }

    .logo_honda {
        height: 60px !important;
        top: -7px !important;
    }

    .navbar-inner > .container {
        height: 50px;
        overflow: hidden;
    }

    .form-login {
        margin: 30px auto;
    }

    .validatorCandidate {
        text-align: right;
        font-size: 11px;
        color: #E92030;
    }
}

/*    --------------------------------------------------
    :: General
    -------------------------------------------------- */

/* 
ul li {
	display: inline-block;
	padding: 0;
  }
  ul li ~ li {
	border-left: 1px solid #333;
  } */


.mt-10 {
    margin-top: 15em;
}

@media only screen and (max-width : 720px) {
    .mt-10 {
        margin-top: 100px !important;
        margin-bottom: 100px !important;
    }
}

h6.ahm-sub.text-muted {
    font-size: 12px;
}


* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-sheets {
    position: relative;
    float: left;
    width: 10%;
    padding: 10px;
    height: 300px;
    /* Should be removed. Only for demonstration */
    right: 6em;
    margin-right: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

img.ahm-kelas {
    border-radius: 50%;
    padding: 35px;
    top: -18px;
    position: relative;
    display: block;
    height: 90%;
}

.ahm-round {
    font-size: 14px;
    background-color: red;
    border-radius: 25px;
    padding: 15px;
    color: white;
    margin-top: 15px;
}

@media only screen and (max-width : 720px) {
    .ahm-round {
        font-size: 10px;
        width: 40vw;
        background-color: red;
        border-radius: 25px;
        padding: 15px;
        padding: 12px 20px;
        color: white;
        margin-top: 15px;
    }

    .hide-yes {
        display: none;
    }
}

.row.portfolio-items.clearfix {
    background-color: #8CD2D9;
}

img.ahm-code {
    width: 150px;
    top: 50px;
    position: relative;
}

.borderless {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 6px;
}

a.ahm-borderless {
    border-radius: 8px;
    padding: 30px;
    line-height: 1;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid white;
    /* border-width: 0; */
    letter-spacing: 1px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn.btn-white {
    color: red !important;
    background-color: white;
    border-radius: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

.btn.btn-jack {
    color: white !important;
    border: 2px solid white;
    background-color: #FE0021;
    border-radius: 40px;
    padding-left: 30px;
    /* padding-right: 30px; */
}

.btn.btn-jack-logout {
    color: white !important;
    border: 2px solid white;
    background-color: #FE0021;
    border-radius: 40px;
    padding-left: 30px;
    /* padding-right: 30px; */
}

.ahm-cal {
}

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

.spacer {
    margin-top: 2%;
    margin-bottom: 2%;
}

/* .block {
	height: 300px;
	padding-top: 15px;  
	background-color: darkorange;
  }   */
.block2 {
    min-height: 500px;
    padding-top: 10px;
}

.center {
    position: absolute;
    /*  top: 0;
	bottom: 0; */
    left: 0;
    right: 0;
    top: -70px;
    margin: auto;
}

.bg-ahm {
    /* background-color: #424242;
		border-radius: 12px;
		-webkit-box-shadow: 0px 0px 48px 14px rgba(0,0,0,1);
		-moz-box-shadow: 0px 0px 48px 14px rgba(0,0,0,1);
		box-shadow: 0px 0px 48px 14px rgba(0,0,0,1);
		-moz-box-shadow: 0px 0px 37px -7px rgba(242,242,242,1); */
    height: 400px;
    position: relative;
    bottom: 200px;
    display: block;
}




/* w3 school */

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300);

* {
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

    a:hover {
        color: #4FDA8C;
    }

input {
    font: oswald;
}

body {
    color: #666;
    background-color: #fcfcfc;
    font: oswald;
}

.form-wrap {
    background-color: #424242;
    width: 450px;
    height: 550px;
    margin: 3em auto;
    box-shadow: 0px 1px 8px #BEBEBE;
    -webkit-box-shadow: 0px 1px 8px #BEBEBE;
    -moz-box-shadow: 0px 1px 8px #BEBEBE;
}



@media only screen and (max-width : 1200px) {
    .form-wrap {
        width: 100%;
        top: 335px;
        position: relative;
    }
}


.form-wrap .tabs {
    overflow: hidden;
}

    .form-wrap .tabs h3 {
        float: left;
        width: 50%;
    }

        .form-wrap .tabs h3 a {
            padding: 0.5em 0;
            text-align: center;
            font-weight: 400;
            background-color: #e6e7e8;
            display: block;
            color: #666;
        }

            .form-wrap .tabs h3 a.active {
                background-color: #fff;
            }

.form-wrap .tabs-content {
    padding: 1.5em;
}

    .form-wrap .tabs-content div[id$="tab-content"] {
        display: none;
    }

    .form-wrap .tabs-content .active {
        display: block !important;
    }

.form-wrap form .input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: black;
    font-family: inherit;
    padding: .8em 0 10px .8em;
    border: 1px solid #CFCFCF;
    outline: 0;
    display: inline-block;
    margin: 0 0 .8em 0;
    padding-right: 2em;
    width: 100%;
}

.form-wrap form .button {
    width: 100%;
    padding: 0.8em 0 10px 0;
    background-color: #FE0021;
    border: none;
    color: #fff;
    top: -200px;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
}

    .form-wrap form .button:hover {
        background-color: #4FDA8C;
    }

.form-wrap form .checkbox {
    visibility: hidden;
    padding: 20px;
    margin: .5em 0 1.5em;
}

    .form-wrap form .checkbox:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

/*.form-wrap form label[for] {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
}

    .form-wrap form label[for]:before {
        content: '';
        position: absolute;
        border: 1px solid #CFCFCF;
        width: 17px;
        height: 17px;
        top: 0px;
        left: -14px;
    }

    .form-wrap form label[for]:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 9px;
        height: 5px;
        background-color: transparent;
        top: 4px;
        left: -10px;
        border: 3px solid #28A55F;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }*/

.form-wrap .help-text {
    margin-top: .6em;
}

    .form-wrap .help-text p {
        text-align: center;
        font-size: 14px;
    }


.pt {
    padding-top: 25px;
}


* {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
    /* Should be removed. Only for demonstration */
}

label.forget {
    float: right;
    position: relative;
}

@media (max-width: 767px) {
    .res-margin {
        margin-bottom: 0;
    }
}


@media only screen and (max-width : 720px) {
    .parallax {
        height: 720px !important;
    }
}

.mt-ahm {
    margin-top: 80px;
}

.mt-ahm-short {
    margin-top: 40px;
}

/* .btn-group,
.btn-group-vertical {
	position: relative;
	left: 20%;
	border-radius: 14px;
	border: 2px solid #FF0000;
	display: inline-flex;
	vertical-align: middle;
	-webkit-transform: scale(1.1);
	transform-origin: 0 0;
} */

label.btn.active.btn-success {
    background-color: red !important;
}

label.btn.btn-success {
    background-color: red;
}

button.btn.btn-danger.btn-lg.ahm-btn-large {
    position: relative;
    background-color: red;
    width: 7em;
    height: 2.5em;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
}

button.btn.btn-danger.btn-lg.ahm-btn-cancel {
    position: relative;
    color: red;
    background-color: #EAEAEA;
    width: 7em;
    height: 2.5em;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
}


button.btn.btn-danger.btn-lg.ahm-btn-large.width {
    width: 26%;
}

select#less {
    width: 108%;
}

input#less {
    width: 108%;
}

p.title-less {
    position: relative;
    display: block;
    top: 0px;
}

.container.mt-ahm.col-sm-7.form-less {
    margin-left: 6em;
}

.row.mb-form {
    margin-top: 18px;
}

input[type=file] {
    display: block;
    max-height: 46px;
    width: 100%;
    /* position: relative; */
}

button.btn.btn-danger.mt-button {
    width: 85%;
    height: 45px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 30px;
    background-color: red;
}

button.btn.btn-danger.mt-button-cancel {
    width: 85%;
    height: 45px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
    background-color: transparent;
    border: 2px solid red;
    color: red;
}

.safety-form {
    top: 70px;
    position: relative;
    display: block;
    left: 15px;
}

i.fas.fa-map-marker-alt {
    font-size: 70px;
    color: red;
    margin-bottom: 20px;
    padding: 10px;
    display: block;
}

i.far.fa-clock {
    font-size: 70px;
    color: red;
    margin-bottom: 20px;
    padding: 10px;
    display: block;
}

i.fas.fa-ticket-alt {
    font-size: 70px;
    color: red;
    margin-bottom: 20px;
    transform: rotate(-40deg);
    padding: 10px;
    display: block;
}

.jumbotron {
    background-color: #424242;
}

.parallax-container {
    position: relative;
    bottom: 50px;
}

.v1 {
    position: relative;
    bottom: 30px;
}

span.strong-weight {
    font-weight: 100;
}

bold {
    font-weight: bolder;
}

.owl-item.active.center {
    top: 0px;
}

.container.team {
    padding-top: 0px;
}

.text-danger {
    color: red;
}




/* CSS ASTRA HONDA RESMMI*/

/* @import "https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap";
@import "https://fonts.googleapis.com/css?family=Oswald:300,400,600,700&display=swap"; */


/* dari sini */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}



fieldset,
img {
    display: block;
    border: 0
}


ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-size: 100%; */
    font-weight: 400;
}

q:before,
q:after {
    content: ""
}

abbr,
acronym {
    border: 0
}

/* sampai sini casenya */
/* and then CLEAR */




strong {
    font-weight: 700
}

em {
    font-style: italic
}

a {
    color: #f14d4d;
    text-decoration: none
}

.fullBox:after {
    content: "";
    display: block;
    clear: both
}

.bg-red {
    background: #e92030
}

.bg-white {
    background: #fff
}

.white {
    color: #fff
}

.red {
    color: #e92030
}

.pull-right {
    float: right
}

.align-center {
    text-align: center
}

.row-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center
}

    .row-flex.flex-start {
        align-items: flex-start;
        -ms-flex-item-align: start
    }

    .row-flex.justify-start {
        justify-content: flex-start;
        -ms-flex-item-align: start
    }

.new_contact {
    display: none
}

/* .col-4 {
	width: 33.3%
}

.col-6 {
	width: 50%
}

.col-8 {
	width: 66.6%
} */

.flex-list {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    list-style: none;
    margin: 30px -10px
}

    .flex-list > li {
        float: left;
        width: 25%;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 15px
    }

        .flex-list > li .image-wrapper {
            width: 250px;
            height: 250px;
            max-width: 100%;
            margin: 0 auto 15px
        }

            .flex-list > li .image-wrapper img {
                width: 100%;
                height: 100%;
                object-fit: cover
            }

        .flex-list > li .text-wrapper {
            text-align: center
        }

            .flex-list > li .text-wrapper h4 {
                line-height: 1.2;
                margin-bottom: 5px
            }

.button {
    padding: 5px 30px;
    font-weight: 700;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease
}

    .button.bg-white {
        border: 2px solid #fff
    }

        .button.bg-white:hover,
        .button.bg-white:focus {
            background: #e92030;
            color: #fff
        }

/* h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: oswald;
	margin-bottom: 20px
} */

/* h2 {
	color: #e0232a;
	font-size: 40px;
	font-weight: 400;
	line-height: 150%
} */
/* 
h3 {
	font-size: 30px;
	font-weight: 400;
	line-height: 150%
}

h4 {
	color: #000;
	font-size: 22px;
	font-weight: 400;
	line-height: 180%
} */

.wrapper {
    width: 100%
}

.widthBox {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
}

header {
    width: 100%;
    font-family: oswald
}

.header_top_menu {
    height: 5px;
    border-bottom: 2px solid #f14d4d;
}

.mobile-topmenu {
    font-family: oswald;
    color: #fff;
    padding: 15px 0;
    cursor: pointer;
    text-align: right;
    display: none
}

.leftMenu {
    float: left
}

    .leftMenu ul li {
        border-right: 1px solid #333;
        float: left;
        transition: all .5s ease
    }

        .leftMenu ul li:hover {
            background: #333;
            transition: all .5s ease
        }

        .leftMenu ul li a {
            font-size: 16px;
            color: #eee;
            padding: 8px 10px;
            display: block
        }

.socialBox {
    padding-top: 5px;
    display: block;
    float: right
}

    .socialBox .icon {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: inline-block;
        transition: all .1s ease-out;
        margin: 0 1px;
        overflow: hidden
    }

        .socialBox .icon:hover {
            box-shadow: 0 0 5px 3px #999
        }

        .socialBox .icon img {
            width: 100%
        }

.logoWrapper {
    padding: 35px 0 30px
}

.hondaLogo {
    width: auto;
    max-width: 320px;
    float: left
}

.ahmLogo {
    margin-top: 10px;
    float: right
}

.hondaLogo img {
    width: 100%
}

nav {
    width: 100%;
    background: #FE0021;
    border-bottom: 2px solid #af1c26;
    z-index: 9999;
}

    nav.fixed {
        position: fixed;
        left: 0;
        top: 0
    }

.mobile-brand {
    display: none;
    position: absolute;
}

    .mobile-brand img {
        height: 20px
    }

#mobnav-btn {
    /* background-color:#e92030; */
    /* font-family:oswald; */
    /* color:#fff; */
    /* cursor:pointer; */
    /* font-size:15px; */
    /* line-height:15px; */
    padding: 15px 10px;
    text-align: right;
    display: none;
}

.leftNav {
    float: left
}

.rightNav {
    float: right;
    display: flex;
}

.leftNav .menu li {
    border-left: 1px solid #AF1C26;
    display: block;
    float: left;
    position: relative;
}

    .leftNav .menu li:first-child a span {
        display: none
    }

    .leftNav .menu li:last-child {
        border-right: 1px solid #af1c26
    }

    .leftNav .menu li:hover {
        background: #a91d28
    }

    .leftNav .menu li a {
        height: 52px;
        padding: 0 12px;
        display: block;
        position: relative;
    }

        .leftNav .menu li a img {
            height: 16px;
            display: inline-block;
            padding-right: 0;
            margin-top: 17px;
            margin-bottom: -1px
        }

        .leftNav .menu li a span {
            height: 52px;
            font-size: 16px;
            color: #fff;
            line-height: 52px;
            padding-left: 8px;
            display: inline-block;
            position: relative;
            text-transform: capitalize
        }

/* .hassubMenu {
	padding-right: 13px !important
}

.hassubMenu span:after {
	font-family: fontawesome;
	font-size: 10px;
	content: "\f0dd";
	position: absolute;
	top: -3px;
	right: -15px
}

.subMenu {
	position: absolute;
	left: -1px;
	top: 52px;
	display: none;
	z-index: 100
}

.hassubMenu.open .subMenu {
	display: block
}

.subMenu li {
	background: #818181;
	border: none !important;
	border-left: 1px solid #616161 !important;
	border-bottom: 1px solid #616161 !important;
	display: block;
	float: none !important
}

.subMenu li:hover {
	background: #444 !important
}

.subMenu li a {
	font-size: 16px;
	color: #fff;
	line-height: 52px;
	display: inline-block;
	white-space: nowrap
}

.subMenu li a:after {
	display: none
} */

.search {
    /* border: 1px solid #fff; */
    margin-top: 9px;
    margin-left: 14px;
    display: block;
}

.searchInput {
    width: 0;
    height: 30px;
    background: 0 0;
    color: #fff;
    border: none;
    display: inline-block;
    transition: all .3s ease-out
}

.fa-search {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    padding: 9px
}

/* .ahm-breadcrumbBox {
	background: #ccc !important;
	height: 41px;
	line-height: 41px
}

.ahm-breadcrumbBox ul {
	max-width: 1140px;
	margin: 0 auto
}

.ahm-breadcrumbBox ul li {
	font-family: oswald;
	font-size: 13px !important;
	text-transform: uppercase;
	float: left;
	color: gray !important
}

.ahm-breadcrumbBox ul li:after {
	content: "\00bb";
	display: inline-block;
	margin: 0 10px
}

.ahm-breadcrumbBox ul li a {
	color: #424242 !important
}

.ahm-breadcrumbBox ul li a:hover {
	color: red
}

.ahm-breadcrumbBox ul li:last-child:after {
	display: none
}

.mainContent {
	padding: 30px 0 0
}

.mainContent p {
	line-height: 1.4em;
	margin-bottom: 15px
}

.leftSide {
	width: 60%;
	max-width: 748px;
	float: left
}


.testBanner p {
	background: #fe0021;
	font-size: 38px;
	color: #fff;
	padding: 30px 70px;
	border-radius: 55px;
	border: 1px solid #fff;
	margin: 0 auto;
	display: inline-block;
	text-transform: uppercase
}

.testBanner p span {
	font-weight: 700
}

.bikeTest {
	width: 100%;
	margin-bottom: 30px;
	display: block
}

.bikeTest .note {
	font-size: 10px
}

.bikeTest .note span {
	color: #fe1432
}

.compareWrapper {
	width: 100%;
	display: block
}

.compareWrapper table {
	margin-bottom: 20px
}

.compareWrapper table tr {}

.compareWrapper table tr th {
	width: 33%;
	font-size: 20px;
	color: #e21823;
	padding: 5px;
	text-transform: capitalize;
	border-bottom: 2px solid #e21823
}

.compareWrapper table tr td {
	width: 33%;
	line-height: 1.4;
	vertical-align: top;
	padding: 10px 5px
}

.compareWrapper table tr td:first-child {
	text-transform: capitalize
}

.compareWrapper table tr td:not(:first-child) {
	border-bottom: 1px solid #ccc
}

.compareWrapper table.noBorder tr td {
	border: none
}

.compareWrapper table tr td img {
	width: 100%;
	display: block
}

.productWrapper .videoBox {
	width: 95%;
	max-width: 1140px;
	display: block;
	margin: 0 auto;
	padding: 60px 0;
	text-align: center
}

.ahm-container .ahm-section-left .ahm-form-box .ahm-form-right .ahm-infoBox .ahm-info {
	background: #fff;
	z-index: 1
} */

@keyframes pulse-white {
    0% {
        box-shadow: 0 0 #fff;
        transform: scale(1)
    }

    50% {
        box-shadow: 0 0 0 8px transparent;
        transform: scale(1.1)
    }

    100% {
        box-shadow: 0 0 transparent;
        transform: scale(1)
    }
}

@keyframes pulse-white {
    0% {
        box-shadow: 0 0 gold;
        transform: scale(1)
    }

    50% {
        box-shadow: 0 0 0 8px transparent;
        transform: scale(1.1)
    }

    100% {
        box-shadow: 0 0 transparent;
        transform: scale(1)
    }
}

@keyframes pulse-white {
    0% {
        box-shadow: 0 0 #fff;
        transform: scale(1)
    }

    50% {
        box-shadow: 0 0 0 8px transparent;
        transform: scale(1.1)
    }

    100% {
        box-shadow: 0 0 transparent;
        transform: scale(1)
    }
}

@media only screen and (max-width:1024px) {
    .homeInner .leftBox {
        width: 100%;
        padding: 0;
        float: none
    }

    .homeInner .rightBox {
        width: 100%;
        padding: 0;
        float: none
    }

    .subscribeBox {
        margin-bottom: 40px
    }

    .articlePanel .thumb img {
        width: 87%
    }

    .specTabs .ui-tabs-panel {
        padding: 50px 10%
    }

    .specWrapper {
        padding: 50px 0
    }

    .specTabs .ui-tabs-anchor {
        padding: 15px 5px
    }
}

@media only screen and (max-width:800px) {
    .productWrapper .contentElement .featureSlider div img {
        width: 80%
    }
}

@media only screen and (max-width:767px) {
    .afwrapper {
        display: none
    }

    .new_contact {
        display: block
    }

    .new_margin {
        margin-bottom: 40px !important
    }

    .new_phone_btn,
    .new_mail_btn,
    .new_chat_btn {
        width: 100%;
        line-height: 40px;
        max-width: 360px;
        margin: 0 auto 20px;
        border: 2px solid #ccc;
        display: block;
        background: url(../images/icon_new_phone.png) no-repeat left center/40px;
        border-radius: 50px;
        text-align: center;
        color: #000;
        text-transform: uppercase;
        font-family: oswald;
        font-weight: 700;
        font-size: 22px
    }

    .new_mail_btn {
        background: url(../images/icon_new_mail.png) no-repeat left center/40px
    }

    .new_chat_btn {
        background: url(../images/icon_new_chat.png) no-repeat left center/40px
    }
}

@media only screen and (max-width:768px) {
    .row-flex {
        display: block;
        flex: none;
        justify-content: center;
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify
    }

    .productBox .topCategory .right .row-flex {
        display: block
    }

    .col-4,
    .col-6,
    .col-8 {
        width: 100% !important
    }

    .leftNav .menu li:first-child a span {
        display: inline-block
    }

    .widthBox {
        padding: 0 15px
    }

    .top-btn {
        margin-bottom: 10px !important
    }

        .top-btn a {
            margin-left: 0
        }

    .mobile-topmenu {
        display: block
    }

    .mobile-brand {
        display: block;
        left: 12px;
        top: 15px
    }

    #mobnav-btn {
        display: block
    }

    .leftMenu {
        width: 100%;
        display: none;
        float: none
    }

        .leftMenu.open {
            display: block
        }

        .leftMenu ul li {
            border-right: none;
            display: block;
            float: none
        }

            .leftMenu ul li a {
                border-top: 1px solid #555;
                text-align: center
            }

    .socialBox {
        display: none
    }

    .hondaLogo {
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin: 0 auto;
        float: none
    }

    .ahmLogo {
        display: none
    }

    nav .widthBox {
        padding: 0
    }

    nav.fixed {
    }

    .leftNav {
        width: 100%;
        border-top: 1px solid #af1c26;
        display: none;
        float: none
    }

        .leftNav .menu li {
            float: none;
            border-left: none;
            border-bottom: 1px solid #af1c26
        }

    .rightNav {
        width: 100%;
        padding: 10px;
        display: none;
        float: none
    }

        .leftNav.open,
        .rightNav.open {
            display: block
        }

    .hassubMenu {
        padding-right: 0 !important
    }

        .hassubMenu.open a {
            background: #515151
        }

        .hassubMenu.open .subMenu a {
            background: #818181
        }

        .hassubMenu.open .subMenu li:hover a {
            background: #515151
        }

        .hassubMenu a:after {
            right: 12px
        }

    .subMenu {
        width: 100%;
        position: static
    }

    .search {
        margin: 0
    }

    .fa-search {
        float: right
    }

    .bannerPanel {
        width: calc((100% - 5px)/2)
    }

    #bp2 {
        margin-right: 0
    }

    .homeContent {
        width: 100%;
        padding: 0;
        float: none;
        margin: 0 auto 20px
    }

    .sideBar {
        width: 100%;
        padding: 0;
        float: none
    }

    .articlePanel .thumb {
        width: 33%
    }

    .leftSide {
        width: 100%;
        float: none
    }

    .contentElement .wrapLeft,
    .contentElement .wrapRight {
        width: 100% !important;
        margin: 0 auto 20px
    }

        .contentElement .wrapLeft img,
        .contentElement .wrapRight img {
            width: 100%
        }

    .dealerPanel {
        width: 100%;
        float: none;
        padding: 0;
        margin-bottom: 40px;
        display: block
    }

        .dealerPanel .heading .logo {
            width: 50%;
            max-width: 100px;
            float: none;
            margin: 0 0 20px
        }

        .dealerPanel .heading h4 {
            line-height: normal;
            padding: 0;
            float: none
        }

    .profileWrapper .intro .logo {
        width: 100%;
        float: none;
        margin: 0 auto 30px
    }

    .profileWrapper .intro .caption {
        width: 100%;
        padding: 0;
        float: none;
        margin: 0 auto 30px
    }

    .tableWrapper {
        width: 100%;
        overflow-x: scroll
    }

    .dealer_table {
        width: 1000px
    }

    .addressData {
        width: 100%;
        float: none;
        margin: 0 auto 30px
    }

    .addressDetails {
        width: 100%;
        float: none;
        padding: 0
    }

        .addressDetails .addressPanel {
            width: 100%;
            float: none;
            padding: 0
        }

    .profileDealers .box .panel {
        width: calc((100% - 30px)/2)
    }

        .profileDealers .box .panel:nth-child(4n) {
            margin-right: 30px
        }

        .profileDealers .box .panel:nth-child(2n) {
            margin-right: 0
        }

    .visionMission .heading {
        width: 90%
    }

    .visionMission .headline .left,
    .visionMission .headline .right {
        width: 100%;
        float: none
    }

    .visionMission .content {
        display: block
    }

        .visionMission .content .column {
            width: 100%;
            padding: 0 !important;
            float: none;
            margin: 0 auto 60px
        }

    .tvcWrapper {
        width: 100%;
        display: block
    }

    .tvcPanel {
        width: 100%;
        display: block;
        margin: 0 auto 10px
    }

    .siteMap .panelWrapper {
        padding: 30px 10px
    }

        .siteMap .panelWrapper .sitemapBox {
            width: 100%
        }

            .siteMap .panelWrapper .sitemapBox .panel {
                width: 100%
            }

                .siteMap .panelWrapper .sitemapBox .panel .heading h3,
                .siteMap .panelWrapper .customerPanel .heading h3 {
                    width: 100%;
                    font-size: 11px
                }

                .siteMap .panelWrapper .sitemapBox .panel .box:hover .heading h3,
                .siteMap .panelWrapper .customerPanel .box:hover .heading h3 {
                    width: 100%
                }

                .siteMap .panelWrapper .sitemapBox .panel .list li {
                    width: 100%
                }

        .siteMap .panelWrapper .customerPanel {
            width: 100%
        }

    .productBox {
        padding: 0
    }

        .productBox .topCategory {
            max-width: none;
            float: none;
            padding-top: 20px
        }

        .productBox .mainCategory {
            display: block;
            margin: 0 auto;
            padding: 30px 0;
            float: none
        }

    .poiPoint {
        width: auto
    }

    .partFeature {
        position: fixed;
        top: 20%;
        left: 50%;
        bottom: auto
    }

        .partFeature:after {
            display: none
        }

        .partFeature .closeWrapper {
            display: block
        }

    .categoryDesktop {
        display: none !important
    }

    .categoryDDown {
        display: block !important
    }

    .productWrapper .contentElement .itemSlider {
        padding: 0
    }

    .productWrapper .contentElement .productFeature {
        padding: 20px 0
    }

    .owl-carousel.desktop {
        display: none !important
    }

    .owl-carousel.mobile {
        display: block !important
    }

    .catalog-wrapper .download-wrapper {
        text-align: center
    }

        .catalog-wrapper .download-wrapper:first-child {
            margin-top: 30px
        }
}

@media only screen and (max-width:640px) {
    .red-btn {
        display: block
    }

    .productBox .topCategory ul li,
    .ahm-maintabs .ahm-menutabs li,
    .ahm-apparel-wrapper ul li {
        border: none !important
    }

    .ahm-maintabs .ahm-menutabs {
        display: block
    }

        .ahm-maintabs .ahm-menutabs li {
            display: none
        }

        .ahm-maintabs .ahm-menutabs .right {
            padding: 15px
        }

    .productWrapper .owl-carousel.desktop {
        display: none
    }

    .productWrapper .owl-carousel.mobile {
        display: block
    }

    .contentFeature {
        display: block
    }

        .contentFeature .imageContainer {
            width: 100%;
            margin: 0 0 10px
        }

    .panelWrapper .productPanel {
        width: calc((100% - 10px)/2) !important
    }

        .panelWrapper .productPanel:not(:nth-child(3n)) {
            margin-right: 0 !important
        }

        .panelWrapper .productPanel:not(:nth-child(2n)) {
            margin-right: 10px !important
        }

    .categoryBox .header h3:before,
    .categoryBox .header h3:after {
        width: 40%
    }

    .specTabs .ui-tabs-anchor {
        font-size: 12px
    }

    .bx-wrapper:hover .bx-prev {
        left: 5px
    }

    .bx-wrapper:hover .bx-next {
        right: 5px
    }
}

@media only screen and (max-width:560px) {
    .home_video .vid_terms .item {
        width: 100%
    }

        .home_video .vid_terms .item .thumb {
            max-height: none
        }

    .contentElement .buttonArea li {
        width: 48%;
        margin-bottom: 5px
    }

    .categoryBox .header h3:before,
    .categoryBox .header h3:after {
        width: 36%
    }

    .specWrapper {
        padding: 20px 0
    }

    .specTabs .ui-tabs-anchor {
        font-size: 10px;
        padding: 10px 5px
    }

    .contentElement .defBtn {
        display: block;
        padding: 10px
    }

    .news-navigation {
        display: block
    }

        .news-navigation .news-btn {
            width: 100%;
            margin: 30px 0
        }

    .catalog-wrapper .info-wrapper {
        border: none;
        padding: 0
    }

    .ahm-apparel-wrapper .ahm-product-apparel-wrapper .ahm-product-apparel-box {
        margin: 0 5px 15px;
        width: calc((100% - 20px)/2);
        width: -webkit-calc((100% - 20px)/2);
        width: -moz-calc((100% - 20px)/2);
        width: -ms-calc((100% - 20px)/2);
        width: -o-calc((100% - 20px)/2)
    }
}

@media only screen and (max-width:480px) {
    .panelWrapper {
        padding: 5px
    }

        .panelWrapper .productPanel {
            padding: 10px !important
        }

            .panelWrapper .productPanel .detail-btn,
            .ahm-product-apparel-box .detail-btn {
                padding: 10px !important
            }

            .red-btn,
            .panelWrapper .productPanel .flag span,
            .ahm-product-apparel-box .flag span,
            .panelWrapper .productPanel .detail-btn,
            .ahm-product-apparel-box .detail-btn {
                font-size: 14px !important;
                width: 100%;
                padding: 10px
            }

            .panelWrapper .productPanel .flag,
            .ahm-product-apparel-box .flag {
                top: 17px !important;
                left: 10px !important
            }

    .rightBanner .top,
    .rightBanner .bottom {
        width: 100%;
        float: none;
        margin: 0 auto 5px
    }

    .bannerPanel {
        width: 100%
    }

    .profileDealers .box .panel {
        width: 100%;
        margin: 0
    }

    .specTabs .ui-tabs-panel {
        padding: 50px 5%
    }

    .contentElement h3 {
        font-size: 22px
    }

    .contentElement .defBtn {
        line-height: 1.6em
    }

    .productRec .owl-item div span {
    }

    .productRecommend .buttonArea .defBtn {
        padding: 10px
    }

    .panelWrapper .productPanel .name p,
    .ahm-product-apparel-box .name p {
        font-size: 14px;
        height: 18px
    }

    .panelWrapper .productPanel .name span {
        font-size: 14px
    }
}

@media only screen and (max-width:360px) {
    .lightboxLink {
        width: 100%;
        height: auto;
        margin: 0 auto 20px;
        display: block
    }

    .lightboxThumb {
        position: relative;
        top: auto;
        left: auto;
        transform: none
    }
}




/* ending astra honda website */



/* navbar mobile */
@media (min-width: 768px) {
    .navbar {
        border-radius: 4px;
        display: none;
    }
}


i.fa.fa-home.query {
    top: 0;
}

@media (max-width: 767px) {
    button.btn.btn-jack {
        padding: 12px 20px;
        top: -5px;
        right: 10px;
        position: relative;
    }

    button.btn.btn-jack-logout {
        padding: 12px 20px;
        top: -5px;
        right: -5px;
        position: relative;
    }

    button.btn.btn-white {
        padding: 12px 20px;
        top: -5px;
        right: 10px;
        position: relative;
    }

    button.btn.btn-user {
        padding: 12px 20px;
        top: -5px;
        right: 20px;
        position: relative;
    }

    .btn-logout {
        padding: 12px 20px;
        top: -5px;
        right: 10px;
        position: relative;
    }
}

i.fa.fa-home {
    color: white;
    bottom: -11px;
    position: relative;
}

i.fa.fa-calendar-alt {
    color: white;
    font-size: 20px;
    top: 5px;
    position: relative;
}

i.fa.fa-sign-out-alt {
    color: white;
    font-size: 20px;
    top: 5px;
    position: relative;
}

i.fas.fa-arrow-up {
    position: relative;
    top: 7px;
    color: #605f5f;
}

button.btn.btn-user {
    background: none;
    color: white;
    font-size: 14px;
}

h5.detail-class {
    position: relative;
    display: block;
    top: 0px !important;
}

.newspaper2 {
    margin-top: 20px;
}

.form-group textarea {
    border-radius: 3px;
    min-height: 46px;
}

.select2-container--default .select2-selection--single {
    height: 46px;
    padding: 7px;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 7px !important;
    }

@media (max-width:767px) {
    .column-sheets {
        position: relative;
        float: left;
        width: 10%;
        padding: 10px;
        height: 300px;
        right: 0;
        margin-right: 0;
    }

    .select2-container--default .select2-selection--single {
        height: 46px;
        padding: 7px;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 7px !important;
        }

    .btn-usr, .btn-pwd {
        height: 38px !important;
    }

    .modal {
        z-index: 9999 !important;
    }
}

@media (min-width: 768px) {
    .btn-usr, .btn-pwd {
        top: -4px !important;
        height: 39px !important;
    }

    .modal {
        z-index: 9999 !important;
    }
}

.section-clear {
    margin: 0.5em;
}