@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Source+Sans+Pro:400,600,700);
*,
body,
html {
    margin: 0;
    padding: 0
}

.the-container,
body {
    position: relative
}

.page-banner,
.pre-loader {
    background-repeat: no-repeat
}

.arrow,
.content-head,
.loader-img-wrapper,
.response-loader-position,
.scrollup {
    text-align: center
}

* {
    list-style: none;
    text-decoration: none;
    outline: 0;
    resize: none;
    box-sizing: border-box
}

body,
html {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #3d4044;
    background-color: #f5f5f5;
    letter-spacing: 1px
}

.header-menu-list li a,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif
}

.the-container,
.the-row {
    margin-left: auto!important;
    margin-right: auto!important
}

p {
    letter-spacing: .8px;
    color: #626262
}

a,
a:focus,
a:hover {
    text-decoration: none!important;
    transition: .3s
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #373636
}

.arrow a,
.arrow a:focus,
.arrow a:hover {
    color: #21aaab
}

h1 {
    font-size: 60px
}

h2 {
    font-size: 48px
}

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

.the-container {
    width: 1200px;
    padding-left: 0!important;
    padding-right: 0!important
}

.form-control {
    border-radius: 0
}

.make-fixed-top {
    position: fixed!important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    transition: all .3s ease
}

.disable-scroll {
    overflow-y: hidden!important
}

.arrow {
    margin: 2% 0;
    position: absolute;
    bottom: 1%;
    width: 100%
}

.arrow a {
    display: inline-block;
    width: 65px;
    height: 65px;
    border: 4px solid #21aaab;
    border-radius: 50%
}

.scrollup,
.scrollup a,
.scrollup a:focus,
.scrollup a:hover {
    color: #fff
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite
}

@-webkit-keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

.scrollup {
    display: none;
    width: 50px;
    height: 45px;
    font-size: 30px;
    line-height: 38px;
    background-color: #21aaab;
    position: fixed;
    bottom: 80px;
    right: 10px;
    cursor: pointer;
    z-index: 9;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .51);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .51);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, .51);
    box-shadow: 0 0 10px rgba(0, 0, 0, .51)
}

.pre-loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #192027;
    background-image: url(../images/logo-loader2.gif);
    background-position: center center
}

.loader-img-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%)
}

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

.col5 {
    width: 45%
}

.col6 {
    width: 50%
}

.col7 {
    width: 55%
}

.table-container {
    display: table;
    width: 100%
}

.table-row {
    display: table-row;
    width: 100%
}

.table-cell {
    display: table-cell
}

.margin-top-30 {
    margin-top: 30px
}

.display-mobile,
.response-loader {
    display: none
}

.response-loader-position {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
    left: 0;
    top: 0;
    z-index: 999;
    background-image: url(../../images/reload.gif);
    background-repeat: no-repeat!important;
    background-position: 50% 105%!important;
    cursor: not-allowed!important;
}

header {
    position: absolute!important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030
}

.header-container {
    width: 95%
}

.header-menu-list {
    margin: 0
}

.header-menu-list li {
    line-height: 80px;
    padding-right: 10px;
    padding-left: 10px
}

.logo-wrapper {
    margin: 15px 0
}

.logo-wrapper a {
    display: inline-block
}

.header-menu-list li a {
    font-size: 16px;
    font-weight: 600;
    color: #27455a
}

.content-head h1,
.content-head h2,
.page-banner .banner-content h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700
}

.header-menu-list li i.fa {
    margin-right: 5px
}

.mobile-header-menu-list {
    font-size: 16px;
    color: #20aaab;
    display: none
}

.page-content-block {
    padding: 85px 0 60px
}

.page-banner {
    background-image: url(../images/south-india-kerala-tour-packages.jpg);
    position: relative;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 60vh
}

.intro-content-block,
.trail-categories-container .left-col {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat
}

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

.page-banner .banner-content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 65%
}

.page-banner .banner-content h2 {
    font-size: 65px;
    font-style: italic;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 10px #464646
}

.content-head h1,
.content-head h2 {
    color: #373636;
    margin-top: 0;
    margin-bottom: 15px
}

.get-intouch-form input[type=submit],
.package-name h4,
.package-name h5,
.package-name-wrapper {
    font-family: 'Source Sans Pro', sans-serif
}

.intro-content-block {
    position: relative;
    background-position: center bottom;
    background-size: cover
}

.intro-content-wrapper {
    padding: 0 5%
}

.intro-content-block .content-head h1 {
    margin-bottom: 35px
}

.package-wrapper {
    position: relative;
    margin-bottom: 30px
}

.package-name-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    width: 100%;
    -webkit-transition: .3s;
    transition: .3s
}

.package-name {
    position: relative
}

.package-name h4 {
    font-size: 25px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 5px;
    letter-spacing: .5px
}

.package-name h5 {
    font-size: 18px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 1px
}

.package-name .book-now {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0
}

.book-now-btn {
    padding: 8px 15px;
    font-size: 16px;
    border-radius: 0
}

.green-btn {
    background-color: #1fb6b5;
    color: #fff
}

.green-btn:focus,
.green-btn:hover {
    background-color: #1b9192;
    color: #fff
}

.package-name-wrapper .name {
    -webkit-transition: .3s;
    transition: .3s;
    display: inline-block;
    width: 70%
}

.package-name-wrapper .name a {
    color: #fff
}

.package-wrapper:hover .package-name-wrapper .name {
    margin-bottom: 20px;
    -webkit-transition: .3s;
    transition: .3s
}

.package-wrapper img {
    width: 100%;
    height: auto
}

.view-more-packages-btn-wrap {
    margin: 15px 0 70px
}

.view-more-btn {
    font-size: 18px;
    border-radius: 0;
    padding: 8px 25px
}

.trail-categories-container {
    background-color: #fff
}

.trail-categories-container .left-col {
    background-image: url(../images/get-in-touch-banner.jpg);
    position: relative;
    background-position: left center;
    background-size: cover
}

.trail-categories-container .right-col .page-content-block {
    padding: 0 8%;
    margin-top: 70px
}

.trail-categories-head {
    text-align: left!important
}

.trail-categories-container .content-head {
    text-align: left;
    margin-bottom: 30px
}

.trail-categories-container .content-head h2 {
    margin-bottom: 35px
}

.get-intouch-block {
    background-color: #f5f5f5;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 85px 0 25px!important
}

.get-intouch-block .content-head h2 {
    color: #3c3838
}

.get-intouch-form input[type=text],
.get-intouch-form input[type=email],
.get-intouch-form input[type=tel],
.get-intouch-form textarea {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    font-weight: 600;
    background-color: transparent;
    color: #3c3838;
    border-width: 3px;
    text-indent: 25px
}

.get-intouch-form input[type=text],
.get-intouch-form input[type=email],
.get-intouch-form input[type=tel] {
    height: 60px
}

.get-intouch-form input[type=submit] {
    font-size: 24px;
    font-weight: 600;
    background-color: #20aaab;
    color: #fff;
    padding: 10px;
    border: 2px solid #1a9fa0;
    border-radius: 2px;
    width: 100%
}

.get-intouch-form input[type=submit]:focus,
.get-intouch-form input[type=submit]:hover {
    background-color: #1b9192;
    transition: .3s
}

.get-intouch-form .form-control,
.get-intouch-form .form-control:focus {
    border-color: #3c3838;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.get-intouch-form .form-group {
    position: relative;
    margin-bottom: 25px
}

.get-intouch-form .form-group:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: #3c3838;
    line-height: 60px
}

footer a,
footer p {
    color: #d0d0d0
}

.get-intouch-form .form-group-name:before {
    content: "\f007";
    font-size: 30px
}

.get-intouch-form .form-group-email:before {
    content: "\f0e0";
    font-size: 26px
}

.get-intouch-form .form-group-tel:before {
    content: "\f095";
    font-size: 30px
}

.get-intouch-form .form-group-message:before {
    content: "\f040";
    font-size: 28px
}

.get-intouch-form input.error,
.get-intouch-form textarea.error {
    border: 3px solid red!important
}

.get-intouch-form input.valid,
.get-intouch-form textarea.valid {
    border: 3px solid #004d00!important
}

footer {
    background-color: #27455b;
    padding: 35px 0;
    text-align: center
}

footer a:focus,
footer a:hover {
    color: #20aaab
}

footer p {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px
}

footer .social-meda-links-list {
    margin-bottom: 25px
}

footer .social-meda-links-list li {
    padding-right: 10px;
    padding-left: 10px
}

footer .social-meda-links-list a {
    font-size: 22px
}

@media(max-width:1200px) {
    .the-container {
        width: 90%
    }
}

@media(max-width:1024px) {
    .logo-wrapper img {
        width: 100%
    }
    .header-menu-list li a {
        font-size: 12px
    }
    .logo-wrapper {
        display: inline-block
    }
    .header-container .pull-left {
        width: 25%
    }
    .page-banner .banner-content h2 {
        font-size: 40px
    }
    .content-head h6 {
        font-size: 12px;
        line-height: 20px
    }
    .page-content-block {
        padding: 40px 0
    }
    .content-head {
        text-align: center;
        padding: 5px 0
    }
    .content-head h1,
    .content-head h2 {
        font-size: 35px
    }
    .arrow a {
        width: 45px;
        height: 45px
    }
    .arrow a .fa-4x {
        font-size: 2.5em
    }
    .intro-content-block .content-head h1 {
        margin-bottom: 20px;
        font-size: 35px
    }
    .package-name h4 {
        font-size: 20px
    }
    .package-name h5 {
        font-size: 16px
    }
    .book-now-btn {
        padding: 7px 5px;
        font-size: 15px
    }
    .view-more-packages-btn-wrap {
        margin: 10px 0 45px
    }
    .get-intouch-block {
        padding: 40px 0 0!important
    }
    .get-intouch-form {
        padding-right: 0;
        padding-left: 0
    }
    .get-intouch-form .form-group-name:before {
        font-size: 24px
    }
    .get-intouch-form .form-group-email:before {
        font-size: 22px
    }
    .get-intouch-form .form-group-tel:before {
        font-size: 24px
    }
    .get-intouch-form .form-group-message:before {
        font-size: 22px
    }
    .trail-categories-container .right-col .page-content-block {
        margin-top: 45px
    }
}

@media(max-width:767px) {
    .table-cell,
    .table-container,
    .table-row {
        display: block;
        width: 100%
    }
    .display-mobile {
        display: block
    }
    header {
        background-color: #fff;
        position: fixed!important;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .51);
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .51);
        -o-box-shadow: 0 0 10px rgba(0, 0, 0, .51);
        box-shadow: 0 0 10px rgba(0, 0, 0, .51)
    }
    .get-intouch-form input[type=submit] {
        width: 100%
    }
    .header-container .pull-left {
        width: 65%;
        float: none;
        text-align: left
    }
    .header-container .pull-right {
        width: 35%;
        float: none;
        display: block;
        text-align: right
    }
    .logo-wrapper img {
        width: 75%
    }
    .mobile-header-menu-list {
        display: inline-block;
        margin-bottom: 0
    }
    .header-menu-list {
        display: none
    }
    .mobile-header-menu-list li {
        line-height: 75px
    }
    .mobile-header-menu-list li a,
    .mobile-header-menu-list li a:focus,
    .mobile-header-menu-list li a:hover {
        color: #21aaab;
        font-size: 20px
    }
    .page-content-block {
        padding: 30px 0
    }
    .page-banner .banner-content h2 {
        font-size: 35px;
        line-height: 38px
    }
    .intro-content-block .content-head h1 {
        margin-bottom: 10px;
        font-size: 30px;
        line-height: 34px
    }
    .intro-content-wrapper {
        padding: 0
    }
    .trail-categories-container .right-col .page-content-block {
        padding: 25px 25px 15px;
        text-align: center;
        margin-top: 0
    }
    .trail-categories-head {
        text-align: center!important
    }
    .trail-categories-container .content-head {
        margin-bottom: 25px
    }
    .get-intouch-block {
        padding: 20px 0 0!important
    }
    .get-intouch-form {
        padding-right: 0;
        padding-left: 0
    }
    .content-head {
        text-align: center;
        padding: 10px 0
    }
    .trail-categories-container .content-head h2 {
        margin-bottom: 10px
    }
    .content-head h1,
    .content-head h2 {
        font-size: 30px;
        line-height: 34px
    }
    .content-head h6 {
        margin-bottom: 15px
    }
    .get-intouch-form input[type=text],
    .get-intouch-form input[type=email],
    .get-intouch-form input[type=tel],
    .get-intouch-form input[type=submit],
    .get-intouch-form textarea {
        font-size: 20px
    }
    .get-intouch-form .form-group-message:before {
        top: -3px
    }
    footer {
        padding-left: 15px;
        padding-right: 15px
    }
    footer p {
        font-size: 14px
    }
}