/* Start My Framework */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

body {
    background: #F2F2F2
}

@media(min-width: 992px) {
   
    .container {
        margin: auto;
        width: 1170px
    } 

}

@media(max-width: 991px) {
    
    .container {
        margin: auto;
        width: 523px
    }

}

p {
    line-height: 1.7
}

.fl-right {
    float: right
}

.fl-left {
    float: left
}

/* End My Framework */

/* Start Header */

.header .slider {
    background: #3a4648;
    height: 350px;
}

.header .slider .intro {
    color: #FFF;
    padding-top: 70px;
    text-align: center
}

.header .slider .intro p:first-child {
    width: 600px;
    margin: 0 auto;
    font-size: 56px;
    color: #fff;
    font-weight: bold;
    border-top: 4px solid #FFF;
    border-bottom: 4px solid #FFF
}

.header .slider .intro p:first-child span {
    color: #2ecc71;
}

.header .slider .intro p:last-child {
    color: #fff;
    font-size: 20px;
    margin-top: 30px;
    background: none;
    padding: 7px 20px;
    letter-spacing: 0.5px;
    display: inline-block;
    border: 2.5px solid #FFF
}

.header .navbar {
    color: #FFF;
    overflow: hidden;
    background-color:#252F31
}

.header .navbar .container {
    overflow: hidden
}

.header .navbar .container {
    padding: 10px 0
}

.header .navbar .left {
    margin-top: 4px
}

.header .navbar .left h2 {
    color: #FFF
}

.header .navbar .left h2 sub {
    color: #2ecc71
}

.header .navbar .right ul {
    padding-left: 0;
    list-style: none;
    overflow: hidden
}

.header .navbar .right ul li {
    float: left;
    padding: 10px
}

.header .navbar .right ul li a {
    color: #FFF;
    text-decoration: none
}

.header .navbar .right ul li a.active,
.header .navbar .right ul li a:hover {
    color: #2ecc71
}

.header .navbar .right ul li a.active {
    font-weight: bold
}

/* End Header */

/* Start About Us */

.about-us {
    margin: 30px 0
}

.about-us .container {
    overflow: hidden;
    background: #fff;
    padding-right: 30px;
    border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid #888;
    -webkit-border-radius: 10px;
}

.about-us .left {
    width: 40%;
    margin-right: 3%
}

.about-us .left .image img {
    width: 100%
}

.about-us .right {
    width: 57%;
    text-align: justify
}

.about-us .right .icon {
    margin: 20px 0 30px
}

.about-us .right .icon p {
    font-size: 20px;
    background: none;
    color: #30B576;
    font-weight: bold;
    display: inline-block;
    border-bottom: 3px solid #30B576
    
}

.about-us .right .text .content {
    overflow: hidden;
    margin-bottom: 30px
}

.about-us .right .text .content:first-child {
    color: #888
}

.about-us .right .text .content:last-of-type {
    margin-bottom: 0
}

.about-us .right .text .content .image {
    width: 5%;
    margin-right: 5%
}

.about-us .right .text .content .image i {
    margin-top: 30px;
    color: #36c380
}

.about-us .right .text .content .text {
    width: 90%;
    color: #777
}

.about-us .right .text .content .text p {
    margin-top: 0
}

.about-us .right .text .content .text h3 {
    margin-bottom: 5px
}

/* End About us */

/* Start Booking */

.booking {
    margin: 30px 0;
    background-color:#F2F2F2
}

.booking .container {
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid #888;
    -webkit-border-radius: 10px
}

.booking .left {
    width: 40%;
    margin-right: 3%
}

.booking .left .image img {
    width: 100%
}

.booking .right {
    width: 57%
}

.booking .right .text p {
    font-size: 20px;
    margin-top: 20px;
    background: none;
    color: #30B576;
    font-weight: bold;
    display: inline-block;
    border-bottom: 3px solid #30B576
}

.booking .right .form > * {
    margin: 30px 0
}

.booking .right .form label {
    font-size: 17px;
    color: #777;
    font-weight: bold
}

.booking .right .form label sup {
    color: red
}

.booking .right .form input[type="text"],
.booking .right .form select {
    outline: 0;
    width: 250px;
    padding: 10px;
    display: block;
    font-size: 16px;
    margin-top: 15px;
    border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    border: 1px solid #777;
    -webkit-border-radius: 8px
}

.booking .right .form .date input {
    width: 67px;
    padding: 10px;
    text-align: center;
    display: inline-block
}

.booking .right .submit {
    margin: 50px 0 20px
}

.booking .right .submit button {
    outline: 0;
    font-size: 20px;
    color: #696969;
    font-weight: bold;
    padding: 10px 60px;
    border-radius: 8px;
    background: #f1f1f1;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    border: 2px solid #888;
    -webkit-border-radius: 8px
}

.booking .right .submit button:hover {
    background: #dadada
}

/* End Booking */

/* Start Employment */

.employment {
    margin: 30px 0;
    background-color:#F2F2F2
}

.employment .container {
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid #888;
    -webkit-border-radius: 10px
}

.employment .left {
    width: 40%;
    margin-right: 3%
}

.employment .left .image img {
    width: 100%
}

.employment .right {
    width: 57%
}

.employment .right .text p {
    font-size: 20px;
    margin-top: 20px;
    background: none;
    color: #30B576;
    font-weight: bold;
    display: inline-block;
    border-bottom: 3px solid #30B576
}

.employment .right .form > * {
    margin: 30px 0
}

.employment .right .form label {
    font-size: 17px;
    color: #777;
    font-weight: bold
}

.employment .right .form label sup {
    color: red
}

.employment .right .form input[type="text"] {
    outline: 0;
    width: 250px;
    padding: 10px;
    display: block;
    font-size: 16px;
    margin-top: 15px;
    border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    border: 1px solid #777;
    -webkit-border-radius: 8px
}

.employment .right .form .el > div {
    margin: 15px 0 5px
}

.employment .right .form .el > div label {
    font-weight: normal
}

.employment .right .form input[type="file"] {
    display: block;
    margin: 15px 0 5px
}

.employment .right .form .file span {
    color: #777;
    font-size: 14px
}

.employment .right .form .cpp a {
    cursor: pointer;
    color: #30B576;
    text-decoration: underline
}

.employment .right .form .cpp a:hover {
    color: #1c945b
}

.employment .right .submit {
    margin: 50px 0 20px
}

.employment .right .submit button {
    outline: 0;
    font-size: 20px;
    color: #696969;
    font-weight: bold;
    padding: 10px 60px;
    border-radius: 8px;
    background: #f1f1f1;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    border: 2px solid #888;
    -webkit-border-radius: 8px
}

.employment .right .submit button:hover {
    background: #dadada
}

/* End Employment */

/* Start Footer */

.footer {
    background-color:#191E22;
    color:#6A6E71;
    overflow: hidden;
    text-align: center;
    padding: 22px 0 15px
}

.footer .container {
    overflow: hidden
}

.footer .left {
    padding: 4px 0 0
}

.footer .right {
    overflow: hidden;
    padding: 3px 0 0
}

.footer .right ul {
    margin: 0;
    padding-left: 0;
    list-style: none
}

.footer .right ul li {
    display: inline-block
}

.footer .right ul li {
    font-size: 20px
}

.footer .right ul li a {
    cursor: pointer;
    color: #6a6e71
} 

.footer .right ul li:first-child a:hover {
    color: #4267B2
}

.footer .right ul li:nth-child(2) a:hover {
    color: #1DA1F2
}

.footer .right ul li:nth-child(3) a:hover {
    color: #0073B0
}

.footer .right ul li:last-child a:hover {
    color: #dc5246
}

/* End Footer */