@import "../../glyphicon.min.css";

@font-face {
    font-family: 'Roboto-Regular';
    src: url("../../../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-width:1200px) {
    .featured-box {
        margin: 0 27px;
        width: 160px;
    }
    .banner-copyright {
        font-size: 18px;
        margin-left: 72% !important;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    #arsitagTestimonial {
        width: 90%;
    }
    #arsitagTestimonial .slick-list {
        min-height: 500px;
    }
    .testimonial-body-container {
        padding-left: 60px;
    }
    .testimonial-box-image {
        width: 58.33333333%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .testimonial-box-image img {
        width: 110%;
    }
    .testimonial-box-text {
        font-family: Lato;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.46px;
        line-height: 28px;
        text-align: left;
        min-height: 220px;
        width: 468px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 20px 0 #DEDEDE;
        color: #6B7479;
        position: absolute;
        top: 50%;
        left: 48%;
        padding: 30px;
    }
    .testimonial-box-text-user {
        font-size: 22px;
        line-height: 34px;
        text-align: left;
        float: right;
        display: block;
    }
    .testimonial-box-text-corp {
        font-size: 16px;
    }
    .play-img {
        position:absolute;
        top:45%;
        left:48%;
    }
    /* swiper */
    .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        left: 16%;
    }
    #arsitagTestimonial .swiper-pagination {
        position: absolute;
        top: 90%;
    }
}

@media screen and (min-width:768px) and (max-width:1199px) {
    .banner-copyright {
        font-size: 18px;
        margin-left: 72% !important;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .testimonial-body-container {
        padding-left: 60px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    #arsitagTestimonial {
        width: 100%;
    }
    .testimonial-box-image {
        width: 90%;
        float: left;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .testimonial-box-image img {
        width: 70%;
    }
    .testimonial-box-text {
        font-family: Lato;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.26px;
        line-height: 22px;
        text-align: left;
        width: 50%;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 20px 0 #DEDEDE;
        color: #6B7479;
        position: absolute;
        top: 50%;
        left: 42%;
        padding: 30px;
    }
    .testimonial-box-text-quote {
        color: #6B7479;
        font-family: Lato;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.58px;
        line-height: 28px;
        text-align: left;
    }
    .testimonial-box-text-user {
        font-size: 20px;
        line-height: 34px;
        text-align: left;
        float: right;
        display: block;
    }
    .testimonial-box-text-corp {
        font-size: 14px;
    }
    .play-img {
        position: absolute;
        top: 42%;
        left: 32%;
    }
    .play-img img {
        width: 100% !important;
    }
    /* swiper */
    .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        left: 18%;
    }
    #arsitagTestimonial .swiper-pagination {
        position: absolute;
        top: 80%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-box-text {
        font-family: Lato;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.26px;
        line-height: 22px;
        text-align: left;
        width: 50%;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 20px 0 #DEDEDE;
        color: #6B7479;
        position: absolute;
        top: 50%;
        left: 42%;
        padding: 30px;
    }
    .testimonial-box-image img {
        width: 70%;
    }
    .testimonial-box-text-user {
        font-size: 20px;
        line-height: 34px;
        text-align: left;
        float: right;
        display: block;
    }
    .testimonial-box-text-corp {
        font-size: 14px;
    }
    .play-img {
        position: absolute;
        top: 36%;
        left: 36%;
    }
    .play-img img {
        width: 100% !important;
    }
    /* swiper */
    .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        left: 21%;
    }
    #arsitagTestimonial .swiper-pagination {
        position: absolute;
        top: 70%;
    }
}

@media screen and (min-width: 501px) and (max-width: 767px) {
    .play-img {
        position: absolute;
        margin-left: 34%;
        margin-top: -34%;
    }
    .play-img img {
        width: 100% !important;
    }
}

@media screen and (max-width: 500px) {
    .play-img {
        position: absolute;
        margin-top: -34%;
        margin-left: 30%;
    }
    .play-img img {
        width: 100% !important;
    }
}

@media screen and (max-width: 767px) {
    .banner-title {
        font-size: 35px;
        line-height: 45px;
        /* margin-top: calc(50% - 38px); */
        /* margin-top: calc(50% - 178px); */
        /* margin-top: 35%; */
        letter-spacing: 0.168px;
    }
    #banner .banner-subtitle h1 {
        font-size: 16px;
        margin-top: 15px;
        line-height: 1.5;
        width: 80%;
    }
    .banner-btn {
        margin-top: 26px;
        margin-bottom: 20%;
        font-size: 18px;
        padding: 12px;
        /* width: 280px; */
        height: 54px;
    }
    /* .banner-copyright {
        display: none;
    } */
    .benefit-text-title-container {
        float: left;
        width: 100%;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .benefit-text-title {
        margin-top:20px;
        color:#4D4D4F;
        font-family:Roboto-Regular;
        font-size:22px;
        font-weight:600;
        letter-spacing:0.88px;
        line-height:28px;
        text-align:left;
    }
    .benefit-text-content-container {
        float: left;
        width: 100%;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        display: flex;
        margin-top: 10px;
    }
    .benefit-text-content {
        color: #6B7479;
        font-family: Roboto-Regular;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.78px;
        line-height: 28px;
        text-align: left;
    }
    .section-title {
        margin-top: 30px !important;
        color: #4d4d4f;
        font-family: Roboto-Regular;
        font-size: 30px;
        font-weight: 600;
        letter-spacing: 0.38px;
        line-height: 43px;
    }
    .arsitag-benefit-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 40px;
    }
    .how-it-works-last-node {
        display: none;
    }
    .how-step-odd { 
        margin-top: 30px;
    }
    .how-step-even {
        margin-top: 30px;
    }
    .how-it-works-flow {
        width: 100%;
    }
    .how-it-works-steps {
        margin-top: 10px;
    }
    .testimonial-body-container {
        width: 100%;
    }
    .testimonial-box-text {
        width: 100%;
    }
    .testimonial-box-text-user {
        margin-top: 20px;
    }
    .testimonial-box-text-quote {
        margin-bottom: 70px;
        line-height: 28px;
    }
    .how-it-works-box {
        width: 100%;
        padding: 25px;
        margin: auto;
        margin-bottom: 38px;
    }
    img.featured-boximage-bw {
        display: block;
        width: 80%;
        margin: auto !important;
    }
    img.featured-boximage-color {
        display: none;
        width: 80%;
        margin: auto !important;
        border-radius: 4px;
        box-shadow: 0 6px 24px 0 rgba(26, 44, 47, .18);
        background-color: #fff;
    }
    .testimonial-box-image img {
        width: 100%;
    }
    .testimonial-body-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .testimonial-box-text {
        font-family: Lato;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.46px;
        line-height: 22px;
        text-align: left;
        background-color: #fff;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        box-shadow: 0 0 20px 0 #DEDEDE;
        color: #6B7479;
        padding: 30px;
    }
    .testimonial-box-text-user {
        font-size: 20px;
        line-height: 34px;
        float: right;
        display: block;
    }
    .testimonial-box-text-corp {
        font-size: 14px;
    }
    .testimonial-box-text-icon {
        display: none !important;
    }
}

@media screen and (min-width: 1024px) {
    .featured-box {
        margin: 0 27px;
        width: 130px;
    }
    .how-it-works-node {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #EC4023;
        position: absolute;
        left: 49.3%;
        top: 29.2%;
        border-radius: 50%;
        box-shadow: 0 4px 24px 0 rgba(20, 153, 177, .5);
        z-index: 1;
    }
    .how-it-works-box {
        width: 312px;
        height: 245px;
        padding: 25px;
    }
}

@media screen and (max-width: 1023px) {
    .how-it-works-node-active {
        display: none;
    }
    .vertical-line {
        display: none;
    }
    .how-it-works-node {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .how-it-works-box {
        width: 60%;
        height: 245px;
        padding: 25px;
        margin: auto;
        margin-bottom: 38px;
    }
}

@media screen and (min-width: 1216px) {
    .how-it-works-node-active {
        left: -150%;
        top: -150%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .how-it-works-node-active {
        left: -160%;
        top: -150%;
    }
}

@media screen and (min-width: 992px) {
    #banner {
        top: 0px;
    }
}

@media screen and (max-width: 991px) {
    #banner {
        top: -28px;
    }
}

@media screen and (min-width: 768px) {
    .banner-title {
        font-size: 60px;
        line-height: 72px;
        margin-top: 18%;
        letter-spacing: 1.26px;
    }
    #banner .banner-subtitle h1 {
        font-size: 24px;
        line-height: 39px;
        max-width: 566px;
        margin-top: 18px;
    }
    .banner-btn {
        margin-top: 56px;
        font-size: 22px;
        padding: 14px;
        /* width: 350px; */
        height: 63px;
        letter-spacing: 1.2px !important;
    }
    .banner-copyright {
        font-size: 18px;
        margin-left: 62%;
        position: absolute;
        top: 80%;
    }
    .benefit-text-title-container {
        float: left;
        width: 100%;
        position: relative;
        min-height: 72px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .benefit-text-title {
        margin-top: 20px;
        color: #4D4D4F;
        font-family: Roboto-Regular;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 0.51px;
        line-height: 32px;
        text-align: left;
    }
    .benefit-text-content-container {
        float: left;
        width: 100%;
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        margin-top: 10px;
    }
    .benefit-text-content {
        color:#6B7479;
        font-family:Roboto-Regular;
        font-size:16px;
        font-weight:400;
        letter-spacing:0.23px;
        line-height:22px;
        text-align:left;
    }
    .section-title {
        margin-top:45px;
        color:#4d4d4f;
        font-family:Roboto-Regular;
        font-size:36px;
        font-weight:600;
        letter-spacing:0.51px;
        line-height:43px;
    }
    .arsitag-benefit-box {
        float: left;
        width: 33.33333%;
        margin-top: 30px;
        padding-left: 45px;
        padding-right: 45px;
    }
    .vertical-line {
        position: absolute;
        border-left: 1px solid;
        border-right: 1px solid;
        -o-border-image: linear-gradient(180deg,#EC4023,#FE6558) 1;
        -webkit-border-image: -webkit-linear-gradient(180deg, #EC4023, #FE6558) 1;
        border-image: linear-gradient(180deg, #EC4023, #FE6558) 1;
        top: 170pt;
        bottom: 130pt;
        left: 50%;
        box-sizing: border-box;
    }
    .how-it-works-last-node {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #EC4023;
        position: absolute;
        left: 49.3%;
        top: 28.4%;
        border-radius: 50%;
        box-shadow: 0 4px 24px 0 rgba(20, 153, 177, .5);
        z-index: 1;
    }
    .how-it-works-flow {
        width: 80%;
    }
    .how-it-works-steps {
        margin-top: 50px;
    }
    .testimonial-body-container {
        width: 100%;
    }
    .testimonial-box-text-user {
        margin-top: 25px;
        padding-right: 25px;
    }
    img.featured-boximage-bw {
        display: block;
        width: 80%;
        margin: auto !important;
    }
    img.featured-boximage-color {
        display: none;
        width: 80%;
        margin: auto !important;
        border-radius: 4px;
        box-shadow: 0 6px 24px 0 rgba(26, 44, 47, .18);
        background-color: #fff;
    }
    .testimonial-box-text-icon {
        position:absolute;
        top:-12%;
        left:92%;
    }
}

@media screen and (max-width: 576px) {
}

@media screen and (min-width: 577px) {
    .featured-box {
        margin: 0 15px;
        width: 110px;
    }
}

@media screen and (max-width: 999px) {
    #banner {
        background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url("https://storage.googleapis.com/arsitagx-master/img-large/35496/20462/studi-dj-house1627354345-l.jpeg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
    }
    #banner .banner-subtitle h1 {
        margin-bottom: 40px;
    }
    .banner-copyright {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-left: 25px;
        margin-bottom: 25px;
    }
}

@media screen and (min-width: 1000px) {
    #banner {
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://storage.googleapis.com/arsitagx-master/img-large/35496/20462/studi-dj-house1627354345-l.jpeg");
        background-position: 50% calc(40%);
        background-size: cover;
        background-repeat: no-repeat;
    }
    #banner .banner-subtitle h1 {
        margin-bottom: 50px;
    }
    .banner-copyright {
        margin-left: 10% !important;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

#banner {
    width: 100%; 
    height: 100% !important ;
    left: 0;
    top: 0;
    opacity: 1;
    overflow: hidden;
}

.banner-background {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.banner-background1 {
    background: url('https://storage.googleapis.com/arsitagx-master/img-large/35496/20462/studi-dj-house1627354345-l.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.banner-background2 {
    background: url('https://www.arsitag.com/images/testimonial/delution-cocowork-ev.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.banner-background4 {
    background: url('https://storage.googleapis.com/arsitag-assets/assets/homepage/banner_mobile.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-title {
    margin-left: 10%;
    font-family: Roboto-Regular;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
}

#banner .banner-subtitle h1 {
    margin-left: 10%;
    font-family: 'Lato',sans-serif;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.34px;
    text-align: left;
}

.banner-btn {
    background-image: linear-gradient(to right, #EC4023, #FE6558);
    border-radius: 4px;
    color: #ffffff;
    font-family: Roboto-Regular;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 33px;
    margin-left: 10%;
}
.banner-btn:hover {
    filter: brightness(1.1);
}

.banner-copyright {
    font-family: Roboto-Regular;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.29px;
    line-height: 24px;
}

.featured-box {
    width: 180px;
    height: 150px;
    margin: auto;
    display: flex;padding-top:20px;
}

#featured {
    background-color: #fff;
}

.featured-boximage-active {
    display: block !important;
}

.featured-boximage-inactive {
    display: none !important;
}

#arsitagTestimonial {
    margin: auto;
    margin-bottom: 80px;
}

.testimonial-body-container {
    margin: auto;
    display: block !important;
    position: relative;
    padding-bottom: 45px;
}

.testimonial-box-text-user {
    color: #4D4D4F;
    font-family: Roboto-Regular;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: right;
}

.testimonial-box-text-corp {
    color: #A1A1A1;
    font-family: Lato;
    font-weight: 400;
    letter-spacing: 0.26px;
    line-height: 22px;
}

#how-it-works {
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: right;
    transition: all .8s ease-in-out;
}

.how-it-works-flow {
    margin: auto;
}

.how-it-works-box {
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 0 20px 0 #E6E7E8;
}

.how-it-works-box-image {
    width: 49px;
}

.how-it-works-node-point {
    left: 49.4%;
}

.how-it-works-node-active {
    position: absolute;
    border-radius: 50%;
}

.how-it-works-node-inactive {
    display: none;
}

.how-it-works-learn {
    position: absolute;
    left: 46.7% !important;
    top: 13.8% !important;
}

.how-it-works-box-title h3, .how-it-works-box-title ol li {
    color: #4D4D4F;
    font-family: Roboto-Regular;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.34px;
    line-height: 29px;
    width: 100%;
    text-align: left;
    margin-top: 15px;
}

.how-it-works-box-title ol {
    padding-left: 27px;
}

.how-it-works-box-content {
    color: #6B7479;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.28px;
    line-height: 23px;
    width: 100%;
    text-align: left;
    margin-top: 10px;
}

.how-step-odd { 
    left: 0;
    text-align: left;
    display: flex;
    flex-direction: row;
}

.how-step-even {
    right: 0;
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}

.how-step-last {
    right: 0;
    text-align: left;
    display: flex;
    justify-content: center;
}

.how-it-works-learn-more {
    display: inline-block;
    padding: 16px 32px;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .5px;
    text-align: center;
    border-radius: 5px;
    background-image: unset !important;
    background-color: #fff;
    border: 1px solid #EC4023;
    color: #EC4023;
    font-family: Roboto-Regular;
    margin-top: 12%;
}

.arsitag-home-section-title {
    color:#EC4023;
    letter-spacing: 1.2px !important;
}

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
}
.slidingVertical span{
	animation: topToBottom 12.5s linear infinite 0s;
	-ms-animation: topToBottom 12.5s linear infinite 0s;
	-webkit-animation: topToBottom 12.5s linear infinite 0s;
	color: #EC4023;
    text-shadow: 2px 2px #000;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingVertical span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

/*Horizontal Sliding*/
.slidingHorizontal{
	display: inline;
	text-indent: 10px;
}
.slidingHorizontal span{
	animation: leftToRight 12.5s linear infinite 0s;
	-ms-animation: leftToRight 12.5s linear infinite 0s;
	-webkit-animation: leftToRight 12.5s linear infinite 0s;
	color: #EC4023;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.slidingHorizontal span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-50px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-50px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

/*leftToRight Animation*/
@-moz-keyframes leftToRight{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateX(-50px); }
	10% { opacity: 1; -moz-transform: translateX(0px); }
	25% { opacity: 1; -moz-transform: translateX(0px); }
	30% { opacity: 0; -moz-transform: translateX(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes leftToRight{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateX(-50px); }
	10% { opacity: 1; -webkit-transform: translateX(0px); }
	25% { opacity: 1; -webkit-transform: translateX(0px); }
	30% { opacity: 0; -webkit-transform: translateX(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes leftToRight{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateX(-50px); }
	10% { opacity: 1; -ms-transform: translateX(0px); }
	25% { opacity: 1; -ms-transform: translateX(0px); }
	30% { opacity: 0; -ms-transform: translateX(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

/* override */
#arsitagFeatured .slick-dots {
    display: none !important;
}
.slick-dots li, .slick-dots li button {
    width: 28px;
    margin-right: 10px;
}
.slick-dots li button:before {
    background-color: rgb(254, 101, 88);
    border-radius: 2px;
    width: 28px;
    height: 8px;
    content: "";
}
.mt42 {
    margin-top: 42px;
}
.slick-prev {
    display: none !important;
}
.slick-next {
    display: none !important;
}

/* swiper */
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-wrapper {
    min-height: 500px;
}
.swiper-slide {
    text-align: left;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    -webkit-justify-content: left;
    justify-content: left;
    -webkit-box-align: left;
    -ms-flex-align: left;
    -webkit-align-items: left;
    align-items: left;
}
.swiper-pagination-bullet {
    background-color: #fe6558;
    border-radius: 2px;
    width: 28px;
    height: 8px;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev, 
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev, 
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next, 
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next, 
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(1) !important;
}

/* carousel */
.carousel-inner {
    width: 100%;
    overflow: hidden
}

.carousel-inner>.item {
    position: relative;
    display: none
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img {
    line-height: 1
}

@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-inner>.item {
        -webkit-transition: -webkit-transform .6s ease-in-out;
        -o-transition: -o-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px
    }

    .carousel-inner>.item.active.right,
    .carousel-inner>.item.next {
        left: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    .carousel-inner>.item.active.left,
    .carousel-inner>.item.prev {
        left: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    .carousel-inner>.item.active,
    .carousel-inner>.item.next.left,
    .carousel-inner>.item.prev.right {
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
    display: block
}

.carousel-inner>.active {
    left: 0
}

.carousel-inner>.next,
.carousel-inner>.prev {
    position: absolute;
    top: 0;
    width: 100%
}

.carousel-inner>.next {
    left: 100%
}

.carousel-inner>.prev {
    left: -100%
}

.carousel-inner>.next.left,
.carousel-inner>.prev.right {
    left: 0
}

.carousel-inner>.active.left {
    left: -100%
}

.carousel-inner>.active.right {
    left: 100%
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    filter: alpha(opacity=50);
    opacity: .5
}

.carousel-control.left {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x
}

.carousel-control:focus,
.carousel-control:hover {
    color: #fff;
    text-decoration: none;
    filter: alpha(opacity=90);
    outline: 0;
    opacity: .9
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next,
.carousel-control .icon-prev {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -10px
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
    left: 50%;
    margin-left: -10px
}

.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
    right: 50%;
    margin-right: -10px
}

.carousel-control .icon-next,
.carousel-control .icon-prev {
    width: 20px;
    height: 20px;
    font-family: serif;
    line-height: 1
}

.carousel-control .icon-prev:before {
    content: '\2039'
}

.carousel-control .icon-next:before {
    content: '\203a'
}

.carousel-indicators {
    bottom: 10px;
    left: 50%;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px
}

.carousel-caption .btn,
.text-hide,
.ui.dropdown .menu {
    text-shadow: none
}

@media screen and (min-width:768px) {

    .carousel-control .glyphicon-chevron-left,
    .carousel-control .glyphicon-chevron-right,
    .carousel-control .icon-next,
    .carousel-control .icon-prev {
        width: 30px;
        height: 30px;
        margin-top: -10px;
        font-size: 30px
    }

    .carousel-control .glyphicon-chevron-left,
    .carousel-control .icon-prev {
        margin-left: -10px
    }

    .carousel-control .glyphicon-chevron-right,
    .carousel-control .icon-next {
        margin-right: -10px
    }

    .carousel-caption {
        right: 20%;
        left: 20%;
        padding-bottom: 30px
    }

    .carousel-indicators {
        bottom: 20px
    }
}

@media only screen and (max-height: 640px) {
    footer.new-footer {
        position: relative
    }
}

section#testimonial.homepage {
    background: #f1f1f2
}

section#featured.homepage {
    background: #e6e7e8
}

section#faq {
    background: #fff;
    padding-bottom: 50px
}

section#faq .content {
    max-width: 700px;
    margin: 0 auto
}

section#faq .content .panel-group .panel-default {
    background: #fff;
    border: 1px solid #c5c7c9;
    border-radius: 3px;
    margin-bottom: 14px
}

section#faq .content .panel-group .panel-default .panel-heading {
    font-size: 18px;
    border-color: transparent;
    background: #fff;
    border-radius: 3px
}

section#faq .content .panel-group .panel-default .panel-heading a h3 {
    letter-spacing: 1px;
    padding: 12px 16px
}

section#faq .content .panel-group .panel-default .panel-collapse .panel-body {
    padding: 0 16px 12px;
    border-top-color: transparent;
    border-radius: 3px
}

section#faq_title {
    background: #ED3F23;
    color: #fff;
    margin-bottom: 64px
}

@media (min-device-width:800px) and (max-device-width:1280px) {
    .images-info p {
        margin: 15px 100px
    }
}

.event h3,
.event ol li {
    font-size: 18px
}

.event .event-slider .slick-prev:before {
    margin-left: 50px
}

.event .event-slider .slick-next:before {
    right: 15px;
    position: absolute;
    top: -10px
}

a.btn.btn-arsitag-border-white.ganti-banner:focus,
a.btn.btn-arsitag-border-white.ganti-banner:hover {
    color: #fff
}

@media (max-width:768px) {

    #editor-pick .list-pro p.location,
    #testimoni .name,
    #testimoni h4.testi,
    #testimoni h4.testi a,
    .description.professionals h4.title,
    .role-location,
    ul.social-media {
        text-align: center
    }

    #banner h1 {
        font-size: 28px;
        line-height: 1.2
    }

    #banner h1.green {
        font-size: 28px !important
    }

    .list-pros .row .list-of-pro .lists .information .about {
        height: 24px !important
    }

    .list-pros .row .list-of-pro .lists .information .about .about-me {
        height: 2.4em !important
    }

    .list-pros .row .list-of-pro .lists .information .about .about-me:after {
        content: '';
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        height: 80px;
        -webkit-transition: opacity .3s 0s ease-in-out;
        -moz-transition: opacity .3s 0s ease-in-out;
        -ms-transition: opacity .3s 0s ease-in-out;
        -o-transition: opacity .3s 0s ease-in-out;
        transition: opacity .3s 0s ease-in-out;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, #fff 100%);
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0, #fff 100%);
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0, #fff 100%);
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0, #fff 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%)
    }

    #how-it-work-home .service {
        margin-bottom: 0 !important
    }

    ul.social-media.right {
        display: none
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .button-left.left {
        margin-top: 0;
        display: inline;
        width: auto;
        margin-left: 10px !important
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .button-left.left .btn {
        margin: 0 20px 10px 0
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .button-left.left ul.social-media {
        display: inline;
        margin-left: 0 !important
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .button-left.left .modal-content {
        border: 0 !important
    }

    .other-photos.mobile ul.social-media {
        display: inline !important
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .button-left.left .btn.btn-arsitag-green {
        display: inline-block
    }

    #photo_preview .project-title-mobile,
    span.button-close-mobile {
        position: absolute;
        color: #adadad;
        z-index: 9999;
        display: block !important
    }

    #photo_preview .project-title-mobile {
        top: -4px;
        padding-left: 10px;
        font-size: 16px;
        background-image: linear-gradient(to bottom, #3e3e3e, rgba(62, 62, 62, 0));
        height: 64px;
        width: 100%
    }

    #photo_preview .project-title-mobile h4 {
        font-size: 14px
    }

    #photo_preview .modal-dialog .modal-content {
        border: 0 solid #000 !important
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .col-md-12 {
        height: 80px
    }

    span.button-close-mobile {
        top: 0;
        right: 20px;
        font-size: 24px
    }

    #photo_preview .modal-dialog .modal-content .list-container .button .button-right,
    #photo_preview .modal-dialog .modal-content .photo-sidebar .header .close {
        display: none !important
    }

    #editor-pick .background .title {
        background: linear-gradient(to bottom, rgba(77, 77, 79, .34), rgba(255, 255, 255, 0))
    }

    footer.new-footer .copyright {
        height: 100%
    }

    #photo_preview .modal-dialog .modal-content .photo-sidebar .content {
        padding-left: 10px;
        background: #fff;
        overflow-y: hidden !important
    }

    footer.new-footer .copyright span.copy {
        float: none;
        text-align: center;
        display: block;
        margin: 16px
    }

    ul.social-media {
        list-style: none;
        display: block;
        float: none;
        padding-left: 0;
        margin-top: 16px;
        margin-bottom: 16px
    }

    .col-md-6.no-padding-left,
    .col-md-6.no-padding-right {
        padding: 0 !important
    }

    #editor-pick .list-pro.spesial .white-bg .slick-dots {
        margin-bottom: -120px
    }

    .title-headline h2 {
        margin-top: 30px;
        font-size: 22px
    }

    #how-it-work-home {
        padding-top: 16px
    }

    .col-md-4.col-sm-6.col-xs-4 {
        padding: 0
    }

    .home-slider div>.slick-track>.slide {
        height: 320px
    }

    .service .title {
        font-size: 14px;
        margin-top: 10px;
        line-height: 1.3
    }

    #how-it-work-home .service {
        background: 0 0;
        min-height: 230px;
        padding-bottom: 0
    }

    #photo_preview .modal-dialog .modal-content .photo-sidebar #details,
    #photo_preview .modal-dialog .modal-content .photo-sidebar .header {
        padding: 8px;
        background: #fff
    }

    #photo_preview .modal-dialog .modal-content .photo-sidebar .header {
        display: none
    }

    #editor-pick .list-pro-slider .background {
        height: 190px
    }

    .home-slider div>.slick-track>.slide .layer .caption.container.caption-left {
        margin-top: 10% !important
    }

    #banner p.subtitle {
        width: auto;
        display: inline-block
    }

    #banner .slick-dots {
        margin-bottom: 30px
    }

    .mt8.mb64.mt16 {
        margin-bottom: 10px
    }

    #articles {
        padding: 0 15px 15px
    }

    #articles .no-padding .col-md-6.no-padding-right {
        padding-left: 0
    }

    .homepage-articles .no-padding .col-md-6.no-padding-left {
        padding-left: 0;
        padding-right: 0
    }

    #articles .col-md-6 .title {
        min-height: 320px;
        border-radius: 3px;
        background-color: #f5f5f5;
        padding: 16px 10px 16px 16px
    }

    #featured,
    #testimoni {
        padding-bottom: 0
    }

    .list-article .col-md-3 {
        padding: 0;
        margin-bottom: 30px
    }

    #editor-pick .list-pro .profile-pic a div {
        margin: 0 auto
    }

    #editor-pick .list-pro p.location {
        display: inline-flex
    }

    .slick-dots {
        position: initial !important;
        margin-top: -20px;
        margin-bottom: 50px
    }

    .slick-prev {
        left: -40px !important
    }

    .slick-next {
        margin-right: 16px !important
    }

    #testimoni h4.testi {
        font-size: 20px
    }

    #testimoni .profile-pic div {
        margin: 0 auto
    }

    #testimoni .name {
        position: inherit;
        bottom: 0;
        margin-top: 20px
    }

    #featured .slick-dots {
        margin-top: 20px
    }

    #featured .slick-next,
    #featured .slick-prev {
        margin-top: -40px
    }

    .navbar-default .navbar-nav>li>a,
    .navbar-default .navbar-text {
        font-family: Lato, sans-serif;
        color: #4b4b4b;
        font-weight: 400
    }

    .input-group-arsitag .input-group-btn .btn-default i {
        margin-top: 0
    }

    h4.text-center.mb64 {
        margin-bottom: 40px !important
    }
}

#professional {
    background-image: url('https://arsitag-assets.s3-ap-southeast-1.amazonaws.com/assets/how-it-works/bg-contact.svg');
    background-repeat: no-repeat;
    height: 300px
}