html, body{
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.bg-custom-dark{background-color: rgb(26, 26, 26);}
.site-logo img, .mid-screen-app img{height: 45px;}
.social-rounded li a {padding: 10px; text-align: center;}
.social-rounded li a>i {margin: 0px 5px;height: 3.6rem;width: .6rem;line-height: 3.6rem;}
#search-placeholder{top: 7.5%; left: 44%;}
.fa-x{transform: scale(1.5);}
.slider {width: 100% !important; margin:auto; }
.slick-slide {margin: 0px 8px;}
.slick-slide img {width: 100%;}
/*.slick-prev {left: -15px; z-index: 9 }*/
.slick-prev { z-index: 9 }
.slick-next::before { margin-left: 10px }
.slick-prev::before { margin-left: -20px }
/*.slick-next{right: -15px;}*/
.slick-prev:before,
.slick-next:before {
    background-color: #EC1C24;
    background-image: linear-gradient(180deg, #EC1C24 16.666%, #D91C5C 66.666%);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 60px;
}
.slick-next, .slick-prev{height: 60px;width: 60px;}
.slick-slide {transition: all ease-in-out .3s;}
.slick-slider .slick-list{transform: translate3d(25px,0,-15px);}
.slick-list{width: 95%;}

.ui-autocomplete{background-color: #D91C5C}
/*.ui-menu-item{padding: 5px 10px}*/
.ui-menu-item-wrapper{padding: 5px 10px}
@media (max-width: 767px){
    .slick-prev:before, .slick-next:before{
        font-size: 28px;
    }
    .slick-slider .slick-list{
        transform: translate3d(8px,0,0);
    }
}






.tt-dropdown-menu, .gist {
    text-align: left;
}

#scrollable-dropdown-menu .tt-dropdown-menu {
    max-height: 150px;
    overflow-y: auto;
}
.title, .example-name {
    font-family: Prociono;
}

.title {
    font-size: 64px;
    margin: 20px 0 0;
}
.example {
    padding: 30px 0;
}
.example-name {
    font-size: 32px;
    margin: 20px 0;
}
.demo {
    margin: 50px 0;
    position: relative;
}
.search-result-icon { width: 100px; height: auto; }
.search-result h5 { margin-left: 20px; color: black!important; }


.tt-query {
    border: 2px solid #CCCCCC;
    border-radius: 8px 8px 8px 8px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: auto;
}

.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 18px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
.gist {
    font-size: 14px;
}
.example-twitter-oss .tt-suggestion {
    padding: 8px 20px;
}
.example-twitter-oss .tt-suggestion + .tt-suggestion {
    border-top: 1px solid #CCCCCC;
}
.example-twitter-oss .repo-language {
    float: right;
    font-style: italic;
}
.example-twitter-oss .repo-name {
    font-weight: bold;
}
.example-twitter-oss .repo-description {
    font-size: 14px;
}
.example-sports .league-name {
    border-bottom: 1px solid #CCCCCC;
    margin: 0 20px 5px;
    padding: 3px 0;
}
.example-arabic .tt-dropdown-menu {
    text-align: right;
}


#credit {
    display: block;
    text-align: center;
    margin-top: 3rem !important;
    left: 0;
    right: 0
}

#search-input::before {
    content: "\f002";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
}


@media screen and (max-width: 320px){
    #search-placeholder{
        top: 4.5% !important;
        left: 21% !important;
    }
}

@media screen and (max-width: 767px){
    .mid-screen-search{
        flex: 0 0 100%;
        text-align: center;
    }
    .site-logo,
    .mid-screen-app{
        flex: 0 0 50%;
        max-width: 50%;
    }
    #search-placeholder{
        top: 4.5%;
        left: 28%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    #search-placeholder{
        top: 3.5%;
        left: 39.5%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1099px){
    #search-placeholder{
        top: 2.7%;
        left: 41.5%;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1439px){
    #search-placeholder{
        top: 4.5%;
        left: 43%;
    }
}

@media screen and (min-width: 1280px) and (max-height: 800px){
    #search-placeholder{
        top: 4.5%;
        left: 43.5%;
    }
}

@media screen and (min-width: 1280px) and (min-height: 851px){
    #search-placeholder{
        top: 3.8%;
        left: 43.5%;
    }
}

@media screen and (min-width: 1440px) and (min-height: 800px){
    #search-placeholder{
        top: 4%;
        left: 44%;
    }
}