@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Montserrat:300,400,500,700";

/* [+] Add fonts */
@font-face{
    font-family: Gotham Book;
    src: url(fonts/gotham-book.otf);
}

@font-face{
    font-family: Gotham Rounded Light;
    src: url(fonts/gotham-rounded-light.otf);
}

@font-face{
    font-family: Gotham Rounded Medium;
    src: url(fonts/gotham-rounded-medium.otf);
}

body {
    font: 100% Gotham Book, Roboto, Calibri, Arial, Sans-serif;
    position: relative;
    background: transparent
}

button {
    padding: 10px;
    background: #2a2728;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px
}

button:focus,
button:hover {
    background: #e85324;
    transition: background linear .4s
}

/* [X] Dimension */
.dmsn { width: 95% }

.fixed{
    position: fixed;
    width: 25%!important;
    right: 7%;
    top: 7%;
}

/* [+] Form */
.ui-form{

}
    .ui-form-input .textarea, .ui-form-input select, .ui-form-input input{
        color: #2b2b2d;
        padding: 2%;
        width: 96%;
        margin-bottom: 1px;
        background: #e8e8e8;
        border: 0;
    }

    .ui-form-input .textarea{
        padding: 2%!important;
        width: 96%;
    }

    .ui-form-submit button {
        width: 200px;
        padding: 15px 0;
    }

/* [+] Title */
.title {
    font-size: 120%;
    color: #22544b;
    padding: 20px 0;
    font-weight: 700;
}   

/**
 *  Banner
 */
#banner {
    position: relative;
    background: #2352b3;
}
    /* [+] Banne Section */
    #banner > #menu-section {
        background: #f1f2f2;
        border-bottom: 1px solid #fff;
    }
        /* [+] Top Banner */
        #menu-section .top-banner{
            padding: 10px 0;
            background: #f1f2f2;
        }
            /* First Generation */
            #menu-section .dmsn > div {
                float: left;
            }

            /* [+] Logo */
            #menu-section .dmsn > .logo {
                text-align: left;
            }
                #menu-section .dmsn > .logo img {
                    max-width: 50%;
                }

            /* [+] Listen Live */
            #menu-section .listen-live-box {
                float: right!important;
                padding: 1.6% 0;
                display: none;
            }   
                #menu-section .listen-live-box .ui-ctru-box {
                    max-width: 150px;
                    margin-bottom: -90px; /* Pull it down */
                    padding: 15px 35px;
                    color: #fff;
                    background: #ed1c24;
                    border: 0px solid #ed1c24!important;
                }

        /* [+] Main Menu */
        #menu-section .main-menu{
            color: #fff;
            padding: 10px 0;
            background: #9b1d55;
        }
            /* Frequency */
            #menu-section .dmsn > .frequency{
                padding: 10px 0;
                font-style: italic;
            }

            /* Menu */
            #menu-section .dmsn > .ui-menu {
                float: right;
                color: #fff;
                display: none;
            }
                /* List */
                #menu-section .dmsn > .ui-menu li {
                    font-size: 95%;
                    padding: 3% 7.7%;
                }
                    /* Link */
                    #menu-section .dmsn > .ui-menu li a{
                        color: #fff;
                    }

                /* Active Tab */
                #menu-section .dmsn > .ui-menu li.active-tab {
                   font-weight: 700;
                }

                /* [+] Mobile Menu Button */
                #banner > #menu-section .ui-mobile-menu-button {
                    display: block;
                    top: 33px;
                    right: 30px;
                    width: 33px;
                    border: 0;
                }
                    /* Three Line */
                    #banner > #menu-section .ui-mobile-menu-button > div {
                        height: 3px;
                        background: #000;
                    }
                        #banner > #menu-section .ui-mobile-menu-button.active > div,
                        #banner > #menu-section .ui-mobile-menu-button:hover > div,
                        #banner > #menu-section .ui-mobile-menu-button:hover > div {
                            background: #9b1d55;
                        }

                    #banner > #menu-section .ui-mobile-menu-button:hover,
                    #banner > #menu-section .ui-mobile-menu-button.active {
                        background: transparent;
                    }

        /* [+] Mobile Menu */
        .ui-mobile-menu {
            background: #fff;
        }
            /* Each Tab */
            .ui-mobile-menu li {
                color: #544f4f;
                font-size: 100%;
                padding: 25px 10px;
                border-bottom: 1px solid #dedede;
            }

            .ui-mobile-menu li:active,
            .ui-mobile-menu li:hover {
               background: #9b1d55;
            }
                /* Link */
                .ui-mobile-menu li a {
                    color: #000
                }

                .ui-mobile-menu li:active a,
                .ui-mobile-menu li:hover a {
                    color: #fff
                }

/* Standard Page */
.page { 
    text-align: left;
    color: #000;
    min-height: 690px; 
}
    .page > .dmsn{
        padding: 10px 0;
    }


/* [+1] Home Page */
#home-page {
    min-height: auto;
    /*background: url(../images/ui/black-bck.jpg);*/
}
    /* [o] Slide */
    #home-page #praying-lady-slide{
        background: url(../images/ui/black-bck.jpg);
    }

    /* [o] Slide */
    #home-page #smiling-guy-slide{
        background: url(../images/ui/black-bck.jpg);
    }

    /* DMSN */
    #home-page .dmsn{
        padding-top: 8%;
        text-align: center;
    }
        /* Title */
        #home-page .dmsn > .title{
            font-size: 250%;
        }
            #home-page .dmsn > .title > div{
                padding-bottom: 20px;
                color: #338a7a;
            }

        /* Image */
        #home-page .dmsn > .image{
            margin-bottom: -10px;
        }

    /* Clouds */
    .clouds{
        min-height: 300px;
        background: url(../images/ui/clouds-strip.jpg);
    }

/* [+2] Home Page */
#station-page {
    background: url(../images/ui/station-bck.jpg);
}
    /* Title */
    #station-page .title{
        color: #9c1c55;
        padding: 10px 0;
    }

    /* Small Title */
    #station-page .title.small{
        font-size: 92%;
        padding: 5px 0;
    }

    /* Paragraph*/
    #station-page p,
    #station-page li{
        color: #9c1c55;
        padding: 5px 0;
        font-weight: 300;
        font-size: 90%;
        max-width: 700px;
    }
        #station-page ul{
            color: #9c1c55; 
            margin-left: 20px;
        }
            #station-page ul li{
                max-width: 680px;
            }

/* [+3] Line Up Page */
#line-up-page {
    background: url(../images/ui/line-up-bck.jpg);
}
    /* Content  */
    #line-up-page .content > div{
        float: left;
    }

    /* Line Up*/
    #line-up-page .line-up{
        width: 100%;
    }
        /* Row */
        #line-up-page .row{
            cursor: pointer;
            margin-bottom: 10px;
            background: #98ccbf;
        }

        #line-up-page .row:hover{
            background: #eee;
        }
            /* First-child generation */
            #line-up-page .row > div{
                float: left;
                text-align: center;
                padding: 2% 0;
                font-size: 95%;
                width: 100%;
                height: 40px;
                background: #98ccbf;
            }

            /* Time */
            #line-up-page .row > .time{
                background: #fff;
            }

             /* Name */
            #line-up-page .row > .name{

            }

             /* DJs */
            #line-up-page .row > .djs{
                background: #fff;
            }

        /* Line Up*/
    #line-up-page .spec{
        width: 31%;
        padding: 1%;
        margin-left: 1%;
        background: #fff;
    }
        #line-up-page p{
            padding: 0;
            font: 100% Roboto;
            color: #464444;
            padding-bottom: 25px;
        }

        /* Images */
        #line-up-page .spec .images{

        }
            /* Each Image */
            #line-up-page .spec .images > div{
                float: left;
                width: 48%;
                padding: 1%;
                overflow: hidden;
            }
                #line-up-page .spec .images img{
                    max-width: 100%;
                }

/* [+4] News Page */
#news-page {
    background: url(../images/ui/black-bck.jpg);
}
    /* Title */
    #news-page .title{
        color: #fff;
    }

    /* Grid */
    #news-grid{
        float: left;
        width: 70%;  
    }
        #news-grid .box{
            width: 100%!important;
        }
            #news-grid .box > div{
                padding: 10px;
            }
                /* Actual Box */
                #news-grid .news-box{
                    color: #fff;
                    text-align: center;
                }
                    #news-grid .news-box .image{
                        z-index: -100;
                        text-align: left;
                    }

                    #news-grid .news-box .subtitle{
                        width: 100%;
                        padding: 10px 0;
                        text-align: left;
                        color: #fff;
                        z-index: 1000000000;
                    }

/* [+4.5] Post Page */
#post-page {
    font-weight: 300;
    background: url(../images/ui/black-bck.jpg);
}
    /* Title */
    #post-page .title{
        color: #fff;
    }
    
    /* Paragraph */
    #post-page .content{
        color: #fff;
    }
        /* Paragraph */
        #post-page p{

        }

/* [+5] Contact Page */
#contact-page {
    padding-top: 40px;
    background: url(../images/ui/black-bck.jpg);
}
    #contact-page > .dmsn{
        width: 90%;
        padding: 10px;
        background: #fff;
        font-weight: 300;
    }
        /* Left div */
        #contact-page > .dmsn > .left{

        }
            #contact-page > .dmsn > .left > div{
                padding: 15px 0;
            }

            #contact-page > .dmsn > .left .contacts{
                padding: 20px 0;
                border-top: 1px solid #cecece;
            }

        /* Right div */
        #contact-page > .dmsn > .right{

        }

/**
 *  Footer
 */
#footer{
    padding: 1% 0;
    font-size: 90%;
    color: #9b1d55;
    /*margin-top: -110px;*/
}
    /* Each tab */
    #footer li {
        float: left;
        font-size: 90%;
        list-style: none;
        border-right: 1px solid #9b1d55;
        padding: 0px 15px 0 12px;
    }
        #footer li:first-child{
            padding-left: 0;
        }

        #footer li:last-child{
            border-right: 0;
        }
            /* Link */
            #footer li a{
                color: #9b1d55;
            }

    /* Facebook Div */
    #footer .facebook-div{
       
    }
        /* First-div generation */
        #footer .facebook-div > div{
            float: left;
            padding: 10px;
        }
            /* Text */
            #footer .facebook-div > .text{
               margin: 10px auto;
               width: 85%;
            }

            /* Image */
            #footer .facebook-div > .image{
                display: none;
            }

@media screen and (min-width: 601px),
media screen and (max-width: 1000px) {
    .grid > .box {
        width: 33.3%!important
    }
}

@media screen and (min-width: 1000px) {
    .grid > .box {
        width: 50%!important
    }
}