/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */

    .icon-img {
        padding: 14px !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .icon-img img {
        max-width: 40px !important;
    }

    .sidebar-contact {
        right: -260px !important;
        width: 260px !important;
    }

    .sidebar-contact.active {
        right: 0 !important;
    }

    .jpInfra-moblogo {
        left: 44% !important;
    }
}

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

    /*** header ****/

    .loading-container img {
        max-width: 150px;
    }

    .small-span span {
        margin-left: 53px;
        font-size: 14px;
    }

    .small-span span:before {
        left: -52px;
        width: 3em;
    }

    .main-heading {
        margin-bottom: 20px;
    }

    .main-heading h1 {
        font-size: 30px;
    }

    .about-us-wrapper {
        margin-top: 0px;
        padding: 50px 0px 0px;
    }

    .about-us-wrapper .row {
        display: block;
    }

    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin-top: 23px;
        background-color: #000;
        border: 0;
    }

    .desktop-nav.scrolled .navbar-nav li a {
        color: #fff;
    }

    .desktop-nav .navbar-nav {
        display: block;
    }

    .desktop-nav .navbar-nav li:last-child {
        display: none;
    }

    .navbar-default .navbar-toggle,
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background-color: transparent;
        border: 0;
        margin-top: 0px;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #358bac;
        width: 28px;
    }

    .navbar-toggle .icon-bar + .icon-bar {
        margin-top: 8px;
    }

    .navbar-nav a::before,
    .navbar-nav a::after {
        display: none;
    }

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

    .navbar-brand > img {
        -webkit-filter: brightness(100%) invert(0);
        filter: brightness(100%) invert(0);
    }

    .desktop-nav.scrolled .navbar-brand {
        padding: 15px 0px;
    }

    .desktop-nav.scrolled .navbar-brand > img {
        width: 124px;
        -webkit-filter: brightness(100%) invert(0);
        filter: brightness(100%) invert(0);
    }

    .aboutJp h1 {
        font-size: 36px;
    }

    .gallery-content {
        height: auto;
    }

    .desktop-nav .navbar-nav li a {
        margin: 0 10px;
    }

    .desktop-nav .navbar-nav > li > a:hover,
    .desktop-nav .navbar-nav > li > a:focus,
    .desktop-nav .navbar-nav > li.active > a {
        color: #fff;
    }

    ol.gradient-list > li {
        padding-top: 0px;
    }

    ol.gradient-list > li::before,
    ol.gradient-list > li::after {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        top: 0;
    }

    .aboutJpWrapper {
        padding: 50px 0px;
    }

    .aboutJpWrapper img {
        margin: 15px 0px;
    }


    #gallery {
        padding: 0 0 100px;
    }

    /*** home-carousel-wrapper ***/

    .home-carousel-wrapper {
        margin-top: 85px;
    }

    /*** home-carousel-wrapper ***/

    /*** about-us ***/

    .about-img {
        margin-bottom: 20px;
    }

    .about-img:after {
        bottom: -12px;
    }
    
    .about-img1 {
        margin-bottom: 20px;
    }

    .about-img1:after {
        bottom: -12px;
    }

    .about-disclaimer {
        bottom: 5px;
    }

    .about-disclaimer p {
        font-size: 5px;
    }

    /*** about-us ***/

    /*** gallry ***/

    .gallry-carousel.owl-carousel .owl-nav {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .gallry-carousel.owl-carousel .owl-nav button.owl-next,
    .gallry-carousel.owl-carousel .owl-nav button.owl-prev {
        padding: 7px 16px !important;
        background-color: #000000;
    }

    .gallry-carousel.owl-carousel .owl-nav button.owl-next i.fa,
    .gallry-carousel.owl-carousel .owl-nav button.owl-prev i.fa {
        color: #fff;
    }

    .gallry-carousel.owl-carousel .owl-nav button.owl-prev {
        margin-right: 2px;
    }

    .gallery-box:hover .gallery-text {
        visibility: hidden;
        opacity: 0;
        bottom: 21px;
    }

    /*** gallry ***/

    /*** amenities ***/

    .amenities-wrapper {
        padding: 50px 0px 0px;
    }

    .amenities-wrapper .main-heading {
        margin-bottom: 50px;
    }

    .amenities-box {
        margin-top: 35px;
        padding: 2em 15px;
        height: 155px;
    }

    .icon-img {
        top: -40px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        padding: 15px;
    }

    .amenities-box p {
        margin-top: 30px;
    }

    .amenities-box h4 {
        font-size: 15px;
    }

    .no {
        top: 5px;
        left: 10px;
    }

    .no p {
        margin: 0px;
        font-size: 22px;
    }

    .icon-img img:last-child {
        display: none;
    }

    .amenities-box:hover .icon-img {
        -webkit-box-shadow: -4px 5px 10px 0px rgba(0, 0, 0, 0.2);
        box-shadow: -4px 5px 10px 0px rgba(0, 0, 0, 0.2);
        background-color: #fff;
    }

    /*** amenities ***/

    /*** location ***/

    .location-wrapper {
        padding: 50px 0px 0px;
    }

    .location-content {
        padding: 0;
    }

    /*** location ***/

    /*** contact ***/

    .map {
        margin-top: 30px;
    }

    .contactus-wrapper {
        padding: 0px 0px 50px;
    }

    /*** contact ***/

    /*** sidebar form ***/

    .sidebar-contact {
        right: -300px;
        width: 300px;
        padding: 20px;
    }

    .sidebar-contact .toggle {
        top: 0%;
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }

    .sidebar-contact.active .toggle {
        top: 0;
        right: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .scroll {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .content {
        padding: 50px 50px;
    }

    .sidebar-contact.active {
        right: 0;
    }

    .toggle:before {
        content: '\f003';
    }

    .toggle.active:before {
        content: '\f00d';

    }

    /*** sidebar form ***/

    /*** sidebar form ***/

    .modal-body {
        display: block;
    }

    #sub_form input {
        padding: 12px 15px;
    }

    #sub_form input[type="submit"] {
        width: 100%;
        margin-top: 10px;
    }

    /*** sidebar form ***/

    /*** sidebar form ***/

    .custom-footer p,
    .custom-footer p.right {
        text-align: center;
        font-size: 12px;
    }

    /*** sidebar form ***/

    .disclaimer {
        margin-bottom: 0px;
    }

    .footer-btns a {
    font-size: 14px;
    color: #f5f5f5;
    background-color: #134a7f;
    padding: 5px 0px;
    width: 111px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin: 20px 10px;
}

    .btm {
        bottom: 60px;
    }

    .about-content {
        width: 100%;
        max-width: 100%;
    }


    #amenities .main-heading h1,
    #gallery .main-heading h1 {
        font-size: 50px;
    }

    .desktop-nav {
        z-index: 9999;
    }

    .modal {
        z-index: 99999;
    }

    .aboutJp ul li,
    .aboutJp p,
    .main-heading p {
        text-align: left;
        font-size: 16px;
    }

    .award img {
        margin: 0 auto 20px;
    }

    #contact .main-heading h1 {
        font-size: 38px;
    }

    .about-img img {
        margin-top: 0;
    }
    
    .about-img1 img {
        margin-top: 0;
    }

    .gallry-carousel .owl-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .gallry-carousel .owl-nav .owl-prev,
    .gallry-carousel .owl-nav .owl-next {
        width: 35px;
        height: 35px;
        background-color: #EF6924 !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-right: 5px;
        position: relative;
    }

    .gallry-carousel .owl-nav button i.fa {
        font-size: 20px;
        color: #FFF;
    }

    .layputSection .imgBox a {
        width: 60%;
        font-size: 14px;
        text-align: center;
    }

    #chatbox-container {
        bottom: 10% !important;
        top: 38% !important;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    /* Styles */

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    /* location */
    .location-content .main-heading {
        margin-bottom: 20px;
    }

    .main-heading h1 {
        font-size: 30px;
    }

    .panel-default > .panel-heading a {
        padding: 10px 0px;
    }

    /* location */

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* header */

    .desktop-nav .navbar-nav li a {
        margin: 0px 0px;
    }

    .navbar-nav > li > a {
        padding: 15px 10px;
    }

    /* header */

    /* aboutus */

    .about-content {
        margin-bottom: 0em;
    }

    .about-content h1 {
        margin: 0px;
    }

    .about-content .main-heading {
        margin-bottom: 10px;
    }

    .about-content p {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 25px;
    }

    .about-disclaimer {
        width: 95%;
        bottom: 0;
    }

    .about-disclaimer p {
        font-size: 5px;
    }

    /* aboutus */

    /* gallery */
    .gallry-carousel.owl-carousel .owl-nav {
        position: relative;
        left: 0%;
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .gallry-carousel.owl-carousel .owl-nav button.owl-next,
    .gallry-carousel.owl-carousel .owl-nav button.owl-prev {
        padding: 7px 16px !important;
        background-color: #ff7b1a;
    }

    .gallry-carousel.owl-carousel .owl-nav button.owl-next i.fa,
    .gallry-carousel.owl-carousel .owl-nav button.owl-prev i.fa {
        color: #fff;
    }

    .gallry-carousel.owl-carousel .owl-nav button.owl-prev {
        margin-right: 2px;
    }

    /* gallery */

    /* amenities-wrapper */

    .amenities-wrapper {
        padding: 50px 0px 0;
    }

    /* amenities-wrapper */

    /* contact */
    .map {
        margin-top: 30px;
    }

    .custom-footer p {
        font-size: 12px;
    }

    /* contact */

    .disclaimer {
        padding-bottom: 0px;
    }

    .contactus-wrapper {
        padding: 0px 0px 50px;
    }

    .layputSection .imgBox a {
        width: 60%;
        font-size: 14px;
        text-align: center;
    }
}


/***Medium devices (tablets, 768px and up) ****/
@media (min-width: 768px) {
    /*** header ***/


    .nopadding-desktop {
        padding: 0px;
    }

    .modal-dialog {
        width: 400px;
    }

    .icon-img img:first-child {
        display: block;
    }

    .icon-img img:last-child {
        display: none;
    }

    .amenities-box:hover .icon-img img:first-child {
        display: none;
    }

    .amenities-box:hover .icon-img img:last-child {
        display: block;
    }
}

/*** Large devices (desktops, 992px and up) ****/
@media (min-width: 992px) {

    .gallry-carousel .owl-nav .owl-prev,
    .gallry-carousel .owl-nav .owl-next {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        left: -24px;
    }

    .gallry-carousel .owl-nav .owl-next {
        left: auto;
        right: -25px;
    }

    .layputSection .imgBox a {
        width: 40%;
        text-align: center;
        font-size: 14px;
    }


}

/*** Extra large devices (large desktops, 1200px and up) ****/
@media (min-width: 1200px) {

    .loading-container img {
        max-width: 250px;
    }

    .main-heading {
        margin-bottom: 20px;
    }

    .amenities-wrapper .main-heading {
        margin-bottom: 50px;
    }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        padding-bottom: 10px;
    }

    /*** location ***/

    .location-content .main-heading h1 {
        font-size: 36px;
    }

    .location-content .main-heading p {
        font-size: 14px;
    }

    .panel-default > .panel-heading a {
        padding: 10px 0px;
    }

    /*** location ***/

}

@media (min-width: 1366px) {
    .location-content .main-heading h1 {
        font-size: 45px;
    }

    .panel-default > .panel-heading a {
        padding: 15px 0px;
    }

    .main-heading {
        margin-bottom: 20px;
    }
}

@media (min-width: 1400px) {
    .location-content {
        padding: 80px;
    }

    .location-content .main-heading h1 {
        font-size: 45px;
    }

    .panel-default > .panel-heading a {
        padding: 20px 0px;
    }

    .main-heading {
        margin-bottom: 10px;
    }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        padding-bottom: 20px;
    }

    .desktop-nav .navbar-nav li a {
        font-size: 16px;
        margin: 0px 15px;
    }
}


@media (max-width: 425px) {
.navbar-default .navbar-toggle,
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background-color: transparent;
        border: 0;
        margin-top:10px;
    }
}