@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);

.teamThumbnail{
    width:249px;
    margin:auto;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

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

input, textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, main {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, main {
    display: block
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

.clear {
    clear: both;
    line-height: 0;
    height: 0;
}

a {
    text-decoration: none;
    outline: none;
    color: #010101;
    transition-delay: 0s;
    transition-duration: 0.6s;
    transition-property: all;
    transition-timing-function: ease;
}

a:focus, img:focus, button:focus, .btn:focus {
   outline: none;
}

::-moz-selection {
    background-color: #286090;
    color: #fff;
    text-shadow: none;
}

::selection {
    background-color: #286090;
    color: #fff;
    text-shadow: none;
}

@font-face {
    font-family: 'Raleway', sans-serif;
}

/*===== Header ===*/

header[role="header"].header-top, header[role="header"].header-top figure {
    position: relative;
    height: 100%;
}

header[role="header"].header-top .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    padding-top: 41px
}

header[role="header"].header-top figure::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(29, 23, 36, 0.5);
    z-index: 1
}

header[role="header"].header-top hgroup h1 {
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2
}

/*===== Nav ===*/

header[role="header"].header-top hgroup nav {
    background-color: transparent;
    min-height: inherit;
    border: none;
    text-align: right;
    margin-bottom: 0;
    padding-top: 18px
}

header[role="header"].header-top hgroup nav ul {
    text-align: right;
    padding: 0;
    margin: 0;
    float: none
}

header[role="header"].header-top hgroup nav ul > li {
    float: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px
}

header[role="header"].header-top hgroup nav ul > li > a {
    color: #FFF;
    line-height: 29px;
    padding-bottom: 5px;
    padding-top: 0;
    padding-left: 11px;
    padding-right: 12px;
    border-bottom: 3px solid transparent;
}

header[role="header"].header-top hgroup nav ul > li:hover a, header[role="header"].header-top hgroup nav ul > li.active a, header[role="header"].header-top hgroup nav ul > li.active:hover a {
    border-color: #286090;
    background-color: transparent !important;
    color: #FFF !important;
}

header[role="header"].header-top hgroup nav ul > li > a:focus {
    color: #FFF;
}

header[role="header"].header-top hgroup.navbar-fixed-top, header[role="header"].header-top hgroup, header[role="header"].header-top hgroup h1, header[role="header"].header-top hgroup h1 img, header[role="header"].header-top hgroup nav ul, header[role="header"].header-top hgroup nav ul > li, .four-box-pan figure, .four-box-pan figure i, .four-box-pan section, .section-two section, .section-two section figure, .section-two section figure > img, .pricing > section input[type="button"], .pricing > section, .team-pan figure, .team-pan figure img, .subscribe-form button, .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea, .contact-form input[type="submit"] {
    transition-delay: 0.8s;

    transition-duration: 0.8s;
    transition-property: all;
    transition-timing-function: ease;
}

header[role="header"].header-top .navbar-fixed-top {
    background-color: rgba(0, 0, 0, 1);
    padding: 5px 0
}

header[role="header"].header-top .navbar-fixed-top .container {
    padding-top: 0;
    position: static
}

header[role="header"].header-top .navbar-fixed-top h1 img {
    width: 30%
}

header[role="header"].header-top .navbar-fixed-top nav {
    padding-top: 7px
}

header[role="header"].header-top section {
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    z-index: 2;
}

header[role="header"].header-top section h2, header[role="header"].header-top section p {
    color: #FFF
}

header[role="header"].header-top section h2 {
    font-size: 48px;
    line-height: 50px;
    font-weight: 400
}

header[role="header"].header-top section p {
    font-size: 19px;
    line-height: 20px;
    font-weight: 500;
    padding-top: 15px
}

header[role="header"].header-top section a.button-header {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    line-height: 63px;
    font-size: 16px;
    font-weight: 400;
    padding: 0 53px;
    color: #FFF;
    background-color: #286090;
    border-radius: 4px;
    text-transform: uppercase
}

header[role="header"].header-top section a.button-header:hover {
    opacity:0.8;
    text-decoration: none
}

header[role="header"].header-top section a.video-button, .video-pan header a.video-button {
    margin: 67px auto;
    margin-bottom: 60px;
    display: block;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    border: 3px solid #FFF;
    border-radius: 100%;
    width: 94px;
    height: 94px;
    line-height: 94px;
    font-size: 60px;
    text-align: center;
    color: #FFF;
}

header[role="header"].header-top section a.video-button i, .video-pan header a.video-button i {
    padding-left: 10px
}

header[role="header"].header-top section a.video-button:hover, .video-pan header a.video-button:hover {
    border-color: #286090
}

.video-wrapper-popup .modal-content {
    background-color: #000
}

.video-wrapper-popup .modal-content .modal-body {
    padding-bottom: 5px
}

/*== Top Pan ==*/

.top-pan {
    overflow: hidden;
    background-color: #f7f7f8;
    padding-top: 62px;
    padding-bottom: 47px
}

.top-pan ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.top-pan li {
    line-height: 72px;
    height: 72px;
    text-transform: uppercase;
    font-size: 17px;
    color: #161620;
    font-weight: 800
}

.top-pan li img {
    vertical-align: middle;
    text-align: center;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    display: inline-block;
}

/*== Title-Page ==*/

header[role="title-page"] h4, header[role="title-page"] h4, header[role="title-page"] h4 {
    font-size: 19px;
    line-height: 20px;
    color: #71717c;
    text-transform: uppercase;
    font-weight: 600
}

header[role="title-page"] h4:after, header[role="title-page"] h4:after, header[role="title-page"] h4:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 79px;
    height: 2px;
    background-color: #286090;
    margin: 17px auto;
    margin-bottom: 0
}

header[role="title-page"] h2, header[role="title-page"] h2 {
    color: #000;
    font-size: 31px;
    line-height: 36px;
    font-weight: 600;
    padding-top: 2px
}

/*== Section One ==*/

.section-one {
    padding-top: 87px
}

.section-one article {
    padding-top: 36px
}

.section-one article p {
    font-size: 15px;
    line-height: 27px;
    color: #5e5e64;
    font-weight: 500
}

/*== Four Box Pan ==*/

.four-box-pan {
    overflow: hidden;
    padding-top: 81px
}

.four-box-pan figure {
    margin: 0 auto;
    display: block;
    border-radius: 100%;
    width: 98px;
    height: 98px;
    border: 2px solid #286090;
    text-align: center;
    line-height: 98px;
    color: #286090;
    font-size: 40px
}

.four-box-pan section figure i {
    color: #286090
}

.four-box-pan section:hover figure {
    background-color: #286090;
    color: #FFF
}

.four-box-pan section:hover figure i {
    color: #FFF
}

.four-box-pan section h5 {
    text-transform: uppercase;
    font-size: 15px;
    line-height: 16px;
    font-weight: 700;
    color: #000;
    padding-top: 26px
}

.four-box-pan section p {
    line-height: 27px;
    font-weight: 500;
    padding-top: 5px;
    color: #5e5e64
}

/*== Section Two ==*/

.section-two {
    background-color: #f7f7f8;
    margin-top: 80px;
    overflow: hidden
}

.section-two section figure {
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 593px
}

.section-two section:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.section-two section article {
    padding-left: 14%;
    padding-right: 90px;
    padding-top: 94px;
}

.section-two section:last-child article {
    padding-left: 11%
}

.section-two section article h2 {
    font-size: 31px;
    line-height: 36px;
    font-weight: 300;
    color: #000;
    padding-bottom: 12px
}

.section-two section article p {
    line-height: 27px;
    color: #5e5e64;
    padding-bottom: 17px;
    font-weight: 500
}

.section-two section article ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.section-two section article ul > li {
    padding-bottom: 10px
}

.section-two section article ul > li:before {
    content: "\f046";
    font-family: 'FontAwesome';
    color: #222222;
    font-size: 16px;
    padding-right: 9px
}

/*== Video ==*/

.video-pan {
    min-height: 528px;
    position: relative
}

.bg-container-youtube {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    overflow: hidden;
    height: 528px;
}

.video-pan:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background-color: rgba(29, 23, 36, 0.9)
}

.video-pan header {
    position: relative;
    z-index: 2;
    padding-top: 200px
}

.video-pan header h4 {
    font-size: 19px;
    color: #FFF;
    font-weight: 700;
    padding: 0;
    margin: 0
}

.video-pan header a.video-button {
    margin: 0 auto;
    margin-bottom: 20px
}

/*== Slider ==*/

.slider-pan {
    padding-top: 87px;
    padding-bottom: 91px
}

.slider-pan section article {
    font-size: 21px;
    line-height: 36px;
    font-weight: 400;
    padding-top: 38px
}

.slider-pan section article:before {
    content: "\f10d";
    font-family: 'FontAwesome';
    color: #5e5e64
}

.slider-pan section article:after {
    content: "\f10e";
    font-family: 'FontAwesome';
    color: #5e5e64
}

.slider-pan section header h5, .slider-pan article header h6 {
    font-size: 15px;
    line-height: 16px;
    padding: 0;
    margin: 0;
    font-weight: 400
}

.slider-pan section header h5 {
    text-transform: uppercase;
    font-weight: 700;
    color: #000;
    padding-bottom: 8px
}

.slider-pan section header {
    padding-top: 38px;
}

.slider-pan .owl-buttons {
    display: none
}

.slider-pan .owl-pagination {
    text-align: center;
    padding-top: 18px
}

.slider-pan .owl-pagination .owl-page {
    display: inline-block;
    border-radius: 100%;
    width: 9px;
    height: 9px;
    background-color: #c9c9c9;
    margin: 0 3px;
}

.slider-pan .owl-pagination .owl-page.active {
    background-color: #286090
}

/*== Section Three ==*/

.section-three {
    background-color: #286090;
    padding-top: 87px;
    padding-bottom: 156px
}

.section-three header[role="title-page"] {
    padding-bottom: 53px
}

.section-three header[role="title-page"] h4, .section-three header[role="title-page"] h2 , .section-three header[role="title-page"] h3 {
    color: #FFF
}

.section-three header[role="title-page"] h4:after {
    background-color: #FFF
}

.pricing {
    text-align: center
}

.pricing > section {
    display: inline-block;
    width: 100%;
    max-width: 300px;
    border: 2px solid #FFF;
    color: #FFF;
    margin: 0 31px;
    padding-bottom: 24px
}

.pricing > section > header {
    border-bottom: 2px solid #FFF;
    padding-top: 37px;
    padding-bottom: 15px
}

.pricing > section > header > h4 {
    text-transform: uppercase;
    font-size: 19px;
    font-weight: 700
}

.pricing > section > h2 {
    font-weight: 300;
    margin-top: 7px;
    margin-bottom: 29px;
    border-bottom: 2px solid #FFF;
    padding-bottom: 12px
}

.pricing > section > h2 > span {
    font-weight: 700;
    font-size: 48px
}

.pricing > section ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.pricing > section ul > li {
    font-size: 16px;
    line-height: 36px;
    font-weight: 400
}

.pricing > section input[type="button"] {
    margin: 27px auto;
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    outline: none;
    cursor: pointer;
    line-height: 53px;
    font-size: 14px;
    font-weight: 700;
    color: #286090;
    background-color: #FFF;
    padding: 0 32px
}

.pricing > section input[type="button"]:hover {
    background-color: #549e3a;
    color: #FFF
}

.pricing > section:hover {
    background-color: #83c76c;
    -webkit-transform: scale(1.1);

    transform: scale(1.1);
}

/*== Section Three ==*/

.section-four {
    padding-top: 86px;
    padding-bottom: 102px;
    background-color: #f7f7f8
}

.section-four header[role="title-page"] {
    padding-bottom: 63px
}

/* Team */

.team-pan figure {
    padding: 5px;
    border: 5px solid #286090;
    overflow: hidden;
    background-color: #FFF;
}

.team-pan section:hover figure img {
    webkit-transform: scale(1.1);

    transform: scale(1.1);
    opacity: 0.8
}

.team-pan header {
    text-align: center;
    padding-top: 38px;
    color:#EEE;
}

.team-pan header h5, .team-pan header h6 {
    font-size: 15px;
    line-height: 16px;
    padding: 0;
    margin: 0;
    color:#CCC;
    font-weight: 400
}

.team-pan header h5 {
    text-transform: uppercase;
    font-weight: 700;
    color:#EEE;
    padding-bottom: 8px;
    display: block
}

.team-pan header a {
    display: inline-block;
    text-align: center;
    background-color: #cdcdce;
    color: #FFF;
    width: 25px;
    height: 25px;
    font-size: 12px;
    line-height: 25px;
    font-weight: normal;
    border-radius: 100%;;
    margin: 15px 3.5px;
    margin-bottom: 0
}

.team-pan header a:hover {
    background-color: #286090
}

/*== Section Five ==*/

.section-five {
    background-color: #286090;
    padding-top: 87px;
    padding-bottom: 102px
}

.section-five header[role="title-page"] {
    padding-bottom: 49px
}

.section-five header[role="title-page"] h4, .section-five header[role="title-page"] h2 {
    color: #FFF
}

.section-five header[role="title-page"] h4:after {
    background-color: #FFF
}

/* Subscribe Form*/

.subscribe-form {
    width: 100%;
    max-width: 555px;
    margin: 0 auto;
    position: relative
}

.subscribe-form input[type="email"] {
    border-radius: 3px;
    background-color: transparent;
    border: 1px solid #FFF;
    outline: none;
    height: 58px;
    color: #FFF;
    font-size: 16px;
    line-height: 18px;
    padding-left: 33px;
    padding-right: 193px;
    width: 100%;
}

.section-five form input::-webkit-input-placeholder {
    color: #FFF;
}

.section-five form input::-moz-placeholder {
    color: #FFF;
}

.section-five form input:-ms-input-placeholder {
    color: #FFF;
}

.section-five form input:-moz-placeholder {
    color: #FFF;
}

.subscribe-form button {
    position: absolute;
    right: 0;
    top: 1px;
    height: 57px;
    line-height: 57px;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: center;
    background-color: #FFF;
    text-transform: uppercase;
    font-size: 16px;
    color: #286090;
    font-weight: 700;
    padding: 0 35px;

    -webkit-border-top-right-radius: 3px;

    -webkit-border-bottom-right-radius: 3px;

    -moz-border-radius-topright: 3px;

    -moz-border-radius-bottomright: 3px;

    border-top-right-radius: 3px;

    border-bottom-right-radius: 3px;
}

.subscribe-form button:hover {
    background-color: #e1e1e1
}

.subscribe-form button i {
    padding-left: 8px
}

.error_message {
    color: #e84d49
}

.subscribe-form .error_message {
    color: #e84d49;
    text-align: center
}

.subscribe-form #success_page h3, .subscribe-form #success_page p {
    color: #185005
}

/*== Section Six ==*/

.section-six {
    padding-top: 87px;
}

.contact-form {
    padding-left: 184px;
    padding-right: 186px;
    margin-top: 63px;
    padding-bottom: 20px
}

#success_page h3, #success_page p {
    color: #185005
}

/* Contact Form */

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
    height: 70px;
    outline: none;
    display: block;
    border: 1px solid #dbdbdb;
    font-size: 16px;
    line-height: 17px;
    color: #8f8f8f;
    width: 100%;
    padding: 0 41px
}

.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus {
    background-color: #f2f1f1
}

.contact-form input[type="email"] {
    border-left: none
}

.contact-form input::-webkit-input-placeholder {
    color: #8f8f8f;
}

.contact-form input::-moz-placeholder {
    color: #8f8f8f;
}

.contact-form input:-ms-input-placeholder {
    color: #8f8f8f;
}

.contact-form inputinput:-moz-placeholder {
    color: #8f8f8f;
}

.contact-form .col-lg-6 {
    padding: 0
}

.contact-form textarea {
    border-top: none;
    padding-top: 28px;
    height: 163px
}

.contact-form button {
    height: 63px;
    font-size: 16px;
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    display: block;
    background-color: #286090;
    padding: 0 53px;
    border-radius: 3px;
    margin: 40px auto;
    border:0px;
    border-bottom: 1px solid #89c474
}

.contact-form input[type="submit"]:hover {
    background-color: #84cf6a
}

/* Map */

.map-wrapper {
    width: 100%;
    height: 318px
}

.map-wrapper #surabaya {
    width: 100%;
    height: 100%
}

/*== Footer ==*/

.footer {
    background-color: #333333;
    padding-top: 101px;
    padding-bottom: 104px;
    text-align: center
}

.socil-icons a {
    display: inline-block;
    text-align: center;
    color: #333333;
    font-size: 22px;
    line-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #4a4a4a;
    margin: 0 4.9px
}

.socil-icons a:hover {
    background-color: #286090;
    color: #FFF
}

.footer nav {
    padding-top: 34px
}

.footer nav a {
    color: #b6b6b6;
    font-size: 14px;
    line-height: 17px;
    display: inline-block;
    font-weight: 300;
    padding-left: 6px
}

.footer nav a:first-child {
    border-right: 1px solid #b6b6b6;
    padding-right: 8px
}

.footer nav a:hover {
    text-decoration: none;
    color: #286090
}

.footer .copy {
    padding: 0;
    margin: 0;
    color: #b6b6b6;
    font-size: 13px;
    line-height: 17px;
    font-weight: 300;
    padding-top: 7px;
    letter-spacing: 1px
}

.footer .copy a {
    color: #b6b6b6;
}

.footer .fa-heart {
    color: #e84545;
    font-size: 11px;
    margin: 0 2px;
}