/*
    static/css/app/index.css

    mostly landing page but some general style too :(

*/

/**** body ****/
body {
    background-color: #fff;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #3F9ACE;
    border-color: #337ab7;
}
.dropdown-menu>li>a {
    color: #fff;
}
.footer-fixed {
    position: absolute;
    bottom: 0;
    width: 100%;
}

/***** start slider  ***/
.carousel-control.left {
    background-image: none;
}
.carousel-control.right {
    background-image: none;
}

/*** fade effect **/
.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(50, 0, 0);
    transform: translate3d(50, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}
html, body, .carousel, .carousel-inner, .carousel-inner .item {
    height: 100%;
}
.item:nth-child(1) {
    background: #74C390;
}
.item:nth-child(2) {
    background: #51BCE8;
}
.item:nth-child(3) {
    background: #E46653;
}

/*** end fade effect**/

/** search form **/

#searchForm {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    z-index: 99;
}
#search-input {
    background-color: rgba(255, 255, 255, 1);
    color: black;
    border-color: #3FC1D9;
    height: 50px;
    font-size: 22px;
}
.tt-hint {
    font-size: 22px;
    line-height: 24px;
}
#search-btn {
    border-color: #3FC1D9;
    background-color: #3FC1D9;
    color: #fff;
    height: 50px;
}
#how-to {
    position: absolute;
    z-index: 5;
    background-color: #EE6602;
    border-color: #EE6602;
    color: #fff;
    height: 50px;

}
#how-to:hover {
    background-color: #fc6b03;
    border-color: #EE6602
}
@media (max-width:450px) {
    #search-input {
        font-size: 14px;
    }
}

.carousel-caption {
    position: absolute;
    top: 20%;
    width: 100%;
    left: 0%;
    z-index: 99;
    background-color: rgba(0, 0, 0, .2);
    height: 150px;
}
.carousel-fade .carousel-control {
    position: absolute;
    top: 0%;
    z-index: 100;
}

/***** end slider  ***/

/* modify input file btn */
.control input:checked ~ .control-indicator {
    color: #fff;
    background-color: #ee6602;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    top: 46%;
}

/* autocomplete */
.ac-city {
    padding: 5px 5px 5px 10px;
    font-size: 18px;
}

.frontend .ac-city {
    padding: 5px 5px 5px 10px;
    font-size: 14px;
}

/* language picker menu */

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 60px;
    margin-top: 10px;
}

.languagepicker button {
    background-color: #5db9d4;
    color: #fff;
    border: 1px solid #fff;
}

.languagepicker button:hover  {
    background-color: #87cfe4;
    color: #fff;
    border: 1px solid #fff;
}


.languagepicker div {
    background-color: #5db9d4;
}

.languagepicker div ul li{
    background-color: #5db9d4;
}

#langmenu .open {
    background-color: #5db9d4;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    color: #fff;
    background-color: #87cfe4;
    border: 1px solid #fff;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: #fff;
    background-color: #87cfe4;
    border: 1px solid #fff;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    color: #fff;
    background-color: #87cfe4;
    border: 1px solid #fff;
}

@media (min-width:320px) and (max-width: 375px) {
    #how-to {
        left: 25% !important;
        font-size: 12pt !important;
    }
}

@media (min-width:375px) and (max-width: 540px) {
    #how-to {
        left: 26% !important;
        font-size: 13pt !important;
    }
}

@media (min-width:540px) and (max-width: 768px) {
    #how-to {
        left: 37% !important;
        font-size: 15pt !important;
    }
}
@media (min-width:768px) and (max-width: 1024px) {
    #how-to {
        left: 41% !important;
        font-size: 15pt !important;
    }
}