/* 
    Created on : Dec 19, 2016, 7:46:38 PM
    Author     : fearzify
*/
@font-face {
        font-family: Comforta;
        src: url("https://tendasafetynet.id/fonts/Comfortaa-Light.ttf") format("truetype");
}
@font-face {
        font-family: RobotoLight;
        src: url("https://tendasafetynet.id/fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
        font-family: RobotoRegular;
        src: url("https://tendasafetynet.id/fonts/Roboto-Regular.ttf") format("truetype");
}

#store-title a{
    font-weight:300;
    font-size:1.4em;
    color:white;
    font-family:Comforta;
    text-decoration: none;
}

#store-title .dewatatxt {
    font-weight:300;
    font-size:1.4em;
    color:red;
    font-family:Comforta;
}

#store-title .tendatxt {
    font-weight:300;
    font-size:1.4em;
    color:white;
    font-family:Comforta;
}

#store-title p {
    color:#AFAFAF;
    font-weight:normal;
    font-size:0.9em;
    font-family:RobotoLight;
    display:block;
    min-height:60px;
    margin-bottom: 25px;
}

a.ui-link {
     text-decoration: none;
}

ul {
    list-style: none;
}

.ui-bar-b, .ui-page-theme-b {
    text-shadow: none;
}

.ui-panel-wrapper {
    background-color: transparent !important;
}

div[data-role="page"]{
    background-color: #353535;
}

div[data-role="header"]:before {
    content: "";
    background-image: url(../images/banners/dewatastore_cl3.png);
    background-repeat: repeat-y;
    filter: grayscale(100%) opacity(40%) contrast(90%) brightness(25%);
    /* grayscale(100%) opacity(40%) contrast(100%) brightness(35%) */
    position:absolute;
    height:300px;
    width:100%;
}

div[data-role="header"]{
    background-color: transparent;
    border: none;
    /* di-set ulang height, agar element didalamnya yg menggunakan
       position absolute bisa di set bottom */
    height:300px;
}

#panel-bar {
    text-decoration: none;color: #2AD;font-size: 2em;z-index: 99;
}

#search-bar {
    position: absolute;bottom: 0;top: auto;
}

#store-title, #desktop-store-calllink {
    /* samakan margin dgn role=main ui-content,
       agar nanti bisa menggunakan padding-left yg sama (sejajar) */
    margin: 0 16px;
}

#store-title {
    position: relative; /* biar gak ikut ke-filter dengan header background */
    text-align: justify;
}

#store-title .store-infolink:before {
    content : "◼";
    color: #2AD;
}

#store-title .store-infolink {
    color: rgb(175, 175, 175) !important; 
    font-family: RobotoRegular !important;
    font-weight: normal !important;
    font-size: 0.7em !important;
}

.call-link, .sms-link {
    font-family: RobotoRegular;
    font-weight: normal !important;
    color:white !important;
    border: none !important;
    text-shadow: none !important;
    margin-right: 0;
}

.call-link {
    background-color: #008419 !important;
    
}

.sms-link {
    background-color: #008BBF !important;
}

/* MUNCULKAN FOOTER-BAR */
/* 320px = 20em*/
@media only screen and ( min-width: 320px ) {
    #main-page-footer {
        display:block;
    }

    div[data-role="header"]:before {
        background-size: 150% 100%;
        /*height: 270px;*/
    }
    
    #search-bar {
        left: 0;
    }
    
    #desktop-main-nav {
        display: none;
    }
    
    #mobile-panel, #panel-bar {
        display : block;
    }
    
    #desktop-store-calllink {
        display: none;
    }
    
    #store-title {
        padding-top: 65px;
    }

    #store-title a{
    font-size:1.2em;
    }

    #store-title .dewatatxt {
        font-size:1.2em;
    }

    #store-title .tendatxt {
        font-size:1.2em;
    }
}

/* First breakpoint is 40em (640px), 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media only screen and ( min-width: 40em ) {
    div[data-role="header"]:before {
        background-size: 101% 110%;
    }

    #main-page-footer {
        display:none;
    }
    
    #search-bar {
        left: auto;
    }
    
    #store-title {
        padding-top: 125px;
        z-index:9;
    }
    
    .call-link {
        font-size: 0.72em !important;
    }
    
    .sms-link {
        font-size: 0.72em !important;
    }
    
    #desktop-store-calllink {
        display: block;
        position: absolute;
        padding-top: 10px;
        right: 0px;
        width: 40%;
        text-align: right;
        z-index:99;
    }
}

/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media only screen and ( min-width: 63.75em ) {
    div[data-role="header"]:before {
        background-size: 101% 127%;
    }
    
    div[role='main']{
        padding-top: 40px;
    }
    
    .headercontent-sameleft {
        padding-left: 265px;
    }
    
    #store-title {
        width: 45%;
        padding-top: 100px;
    }
    
    .call-link {
        font-size: 0.8em !important;
    }
    
    .sms-link {
        font-size: 0.8em !important;
    }
    
    #desktop-main-nav {
        display: block;
        position: absolute;
        width: 225px;
    }
    
    #mobile-panel, #panel-bar {
        display : none;
    }
    
    #desktop-store-calllink {
        padding-top: 40px;
    }

    #store-title a{
    font-size:1.4em;
    }

    #store-title .dewatatxt {
        font-size:1.4em;
    }

    #store-title .tendatxt {
        font-size:1.4em;
    }
    
}

/* 85em (1360px) */
@media only screen and ( min-width: 85em ) {
    .headercontent-sameleft {
        padding-left: 300px;
    }
}