/* Custom CSS for Mobile Fiendly Design
    Copyright: Alan Chin
    Company: Discovery 360
*/

/*
    Table of Content
    1. General Design
        1.1 Tiles
        1.2 Menu
        1.3 Header
        1.4 Footer
        1.5 Slider Design
        1.6 Table Design
    2. Pages Design
        2.1 
        2.2
        2.3
        2.4
        2.5
        2.6
        2.7
        2.8
        2.9
        2.10
        2.11
        2.12
        2.13
        2.14
        2.15
        2.16
        2.17
        2.18
        2.19
        2.20
    3. 

*/
/**********************/
/* 1. General Design  */
/**********************/
@media (min-width: 768px) and (max-width: 959px), (min-device-width: 768px) and (max-device-width: 959px) {
    body
    {
        width:100%;
    }
    /* Fix Everything to 960px*/
    .absolutetop,
    .oneColLiqCtrHdr #header,
    .container-footer,
    .footerbar{
        width:960px!important;
    }
   .oneColLiqCtrHdr #container{
        min-height:500px;
    }
}

@media only screen and (min-width: 768px) and (max-width:1024px), (min-device-width: 768px) and (max-device-width: 1024px) {
/*    .oneColLiqCtrHdr #container{
        padding:0 !important;
        width:100%!important;
    }
    /* Red Line After Menu Fix */
/*   nav, .navbar-nav {
    min-height:0!important;
    border:none!important;
    }

   .carousel-inner, .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img{
       height:auto!important;
   }

    /* Container Width Control */
/*    #container{
        width:100%;
    }

*/

}
@media only screen and (min-width: 960px) and (max-width:1024px) and (min-device-width: 960px) and (max-device-width: 1024px) {
    /* Fix header to full width */
    .absolutetop,
    #header{
        
    }
}

/********************/
/*    1.1 Tiles     */
/********************/
/*For smaller device, tab control should not appear*/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
/*
    .block1 {
        font-size: 36px;
        background-color: #FF9900;
        color: #FFF;
        text-align: center;
        padding-top: 0px;
        margin-bottom: 10px;
        padding: 15px 0;
    }

    .block2 {
        font-size: 36px;
        background-color: #6B9E09;
        color: #FFF;
        text-align: center;
        margin-bottom: 10px;
        padding: 15px 0;
    }

    .block3 {
        font-size: 36px;
        background-color: #35AdB3;
        color: #FFF;
        text-align: center;
        margin-bottom: 10px;
        padding: 15px 0;
    }

    .block4 {
        font-size: 36px;
        background-color: #CCC;
        color: #FFF;
        text-align: center;
        margin-bottom: 10px;
        padding: 15px 0;
    }

    .featuredcontent {
        width: 100%;
    }

    .block1:after,
    .block2:after,
    .block3:after,
    .block4:after {
        clear: both;
    }

    .block1 a,
    .block2 a,
    .block3 a,
    .block4 a {
        font-size: 36px;
    }

    .block1_en {
        width: 233px;
        font-size: 25px;
        font-weight: bold;
        height: 130px;
        background-color: #FF9900;
        color: #FFF;
        margin-right: 10px;
        float: left;
        text-align: center;
        vertical-align: middle;
        padding-top: 0px;
    }

    .block2_en {
        width: 232px;
        font-size: 25px;
        font-weight: bold;
        height: 130px;
        background-color: #6B9E09;
        color: #FFF;
        margin-right: 10px;
        text-align: center;
        float: left;
    }

    .block3_en {
        width: 232px;
        font-size: 25px;
        font-weight: bold;
        height: 130px;
        background-color: #35AdB3;
        color: #FFF;
        margin-bottom: 5px;
        margin-right: 10px;
        text-align: center;
        float: left;
    }

    .block4_en {
        width: 232px;
        font-size: 25px;
        font-weight: bold;
        height: 130px;
        background-color: #CCC;
        color: #FFF;
        margin-right: 0px;
        text-align: center;
        float: left;
    }

    .block5 {
        width: 350px;
        float: left;
        height: 45px;
        background-color: #CCC;
        margin-right: 10px;
        text-align: center;
        padding-top: 5px;
    }
}

@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .container {
        width: 100%;
    }
}


@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .container-topbar {
        width: 100%;
        max-width: 960px;
    }
*/
}

/*********************/
/*    1.2 Menu       */
/*********************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .container-menu-header{
        width:100%;
    }
    ul.MenuBarHorizontal{
        font-size: 100%;
        margin-right: auto;
        margin-left: auto;
        z-index: 1000; /* 20200507 Fix tablet menu behind 4 tiles below */
        top: -10px; /* 20200507 Fix Menu not aligned with top red banner */
    }
    /* Display Dropdowns on Hover */
    ul.MenuBarHorizontal li ul {
	    display:none;
    }
    ul.MenuBarHorizontal li:hover > ul,
    ul.MenuBarHorizontal li:focus > ul{
	    left: auto;
        display:block;
    }   
}


/* Fix for iPhone 5 */
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}
    

/*********************/
/*    1.3 Header     */
/*********************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .oneColLiqCtrHdr #header{
        margin-left:auto;
        margin-right:auto;
        height:165px;
        display:block;
    }
/*     .container-logo-header{
         width:100%;
     }
     .socialmediaicon{width:40%;}
     .language{width:15%;}
     .search{width:45%;}
*/
}


/*********************/
/*    1.4 Footer     */
/*********************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
/*    .container-footer{
        width: 100%;
        height:auto;
    }
    .container-footerbar{
        width:100%;
    }
*/
    #ctl00_pnlFooter,
    #ctl00_pnlFooter_en{
        float:none;
        display:block;
        margin-left:auto;
        margin-right:auto;
        background-color:#fff;
    }
    .footerbar-new{
        float:none;
    /*        
        position: relative;
        display:inline-block;
        margin-left:auto;
        margin-right:auto;*/
    }
    .footerbar table{
        /*width:100%;*/
    }
    .container-footerbar table,
    .container-footerbar tr,
    .container-footerbar td{
        background-color:#666;
    }
    .footer,
    .footer_en{
        float:none;
        display:block;
        margin-left:auto;
        margin-right:auto;
        position: relative;
        height:auto;
        background:none; /* 20200507 Seems to some fix at footer? */
    }
    .container-footer{
        height:auto;
        min-height:420px;
    }
}
@media only screen and (min-width: 768px) and (max-width:1024px), (min-device-width: 768px) and (max-device-width: 1024px){
    /* Fix iPad bottom full width */
    #ctl00_pnlFooterBar, #ctl00_pnlFooterBar_en{
        /*background-color: #fff!important;*/
    }
    .footer{
        /*background-color: #fff!important;*/
    }
 }

/**********************/
/*  1.5 Slider Design */
/**********************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
/*    #slider{
        width:100%;
    }
    .slick-slide{
        max-height:400px;
    }
    .main1title-container, .main2title-container, .main3title-container{
        top: 50px;
    }
    */
}
/* Slider Device Fix */
/*
@media only screen and (max-width: 959px) {
    .slick-slide{
        max-height:350px;
    }
    .main1title-container, .main2title-container, .main3title-container{
        top: -50px;
    }
}
@media only screen and (max-width: 899px) {
    .slick-slide{
        max-height:330px;
    }
    .main1title-container, .main2title-container, .main3title-container{
        top: -50px;
    }
}
@media only screen and (max-width: 859px) {
    .slick-slide{
        max-height:290px;
    }
    .main1title-container, .main2title-container, .main3title-container{
        top: -50px;
    }
}
@media only screen and (max-width: 799px) {
    .slick-slide{
        max-height:260px;
    }
    .main1title-container, .main2title-container, .main3title-container{
        top: -50px;
    }
}
*/

/*********************/
/*  1.6 Table Design */
/*********************/

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
/*    
    table{width:100%!important;} 
*/
}



/*********************/
/*   2 Pages Design  */
/*********************/

/*********************/
/*   2.1 Home Page   */
/*********************/
@media (min-width: 768px) and (max-width: 959px), (min-device-width: 768px) and (max-device-width: 959px) {
    #ctl00_ContentPlaceHolder1_hLinkBanner3 > img,
    #ctl00_ContentPlaceHolder1_hLinkBanner4 > img {
        width: 100% !important;
        margin-bottom: 10px;
        /* height: 200px !important; */
    }
}
/*
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
    .featured-block{
        width:100%!important;
    }

    .home-bible li {
        width: 48%!important;
    }
    .home-bible li a{
        font-size:12px!important;
    }
    .banner{        
        list-style-type: none;
        padding-left:0;
        margin-top:10px;
        margin-bottom:10px;
    }
    .learning{

    }
    #ctl00_ContentPlaceHolder1_divBanner1,
    #ctl00_ContentPlaceHolder1_divBanner2{
        float: left; 
        width: 100%; 
        height: auto; 
        background-color: none; 
        text-align: center; 
        vertical-align: top; 
        margin-bottom: 10px;
    }
    #ctl00_ContentPlaceHolder1_hLinkBanner1 > img,
    #ctl00_ContentPlaceHolder1_hLinkBanner2 > img{
        width:100%!important;
    }

    #ctl00_ContentPlaceHolder1_divBanner3,
    #ctl00_ContentPlaceHolder1_divBanner4{
        width: 48%;
        margin-left: 2%;
    }

    #ctl00_ContentPlaceHolder1_hLinkBanner3 > img,
    #ctl00_ContentPlaceHolder1_hLinkBanner4 > img{
        width: 100% !important;
        margin-bottom: 10px;
        height:140px!important;
    }


    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile1 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile2 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile3 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile4 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile5 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile6 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile7 > img,
    #ctl00_ContentPlaceHolder1_hLinkMessageSeriesTile8 > img,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile1,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile2,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile3,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile4,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile5,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile6,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile7,
    #ctl00_ContentPlaceHolder1_imgMessageSeriesTile8 {
        margin-bottom: 10px !important;
        margin-top: 0px;
        width: 100% !important;
        height: auto!important;
    }
*/
    /* Learning */
/*    .learning > div{
        float: left;
        width: 24%;
        height: auto;
        background-color: none;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 5px;        
    }
    .learning > div:nth-of-type(n) {
        margin-right: 1.33%;
    }
    .learning > div:nth-of-type(4n) {
        margin-right:0;
    }

    /* Bottom COntent Video */
/*    .bottom_content{
        width:24%!important;
        height: auto;
        margin-bottom: 20px;
    }
    .bottom_content:nth-of-type(n){
        margin-right: 1%;
    }
    .bottom_content:nth-of-type(4n){
        margin-right:0;
    }
}


/***************************/
/*   2.2 Know Jesus Page   */
/***************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/**********************/
/*  2.3 Sun Msg Page  */
/**********************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
 
}
/* Table conversion to Card From Layout */
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/****************************/
/*  2.4 LiveBroadcast Page  */
/****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/****************************/
/*  2.5 LiveBroadcast Page  */
/****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*****************************/
/*  2.6 Prayer Meeting Page  */
/*****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}


/**************************/
/*  2.7 Sun School Page  */
/*************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*************************************/
/*  2.8 New Testament Overview Page  */
/*************************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*************************************/
/*  2.8 Old Testament Overview Page  */
/*************************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*************************************/
/*  2.9 Everyday Emmanuel Page  */
/*************************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/****************************/
/*  2.10 Gospel Clips Page  */
/****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/****************************/
/*  2.11 Ask Pasator Page  */
/***************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}


/****************************/
/*     2.12 Photos Page      */
/****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
    iframe{
        width:100%!important;
    }
}

/*****************************/
/*  2.13 Gospel Blogs Page   */
/*****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*****************************/
/*  2.14 Gospel Blogs Page   */
/*****************************/
@media only screen and (max-width:767px) {

}


/******************************/
/*  2.15 Music Ministry Page  */
/*****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*****************************/
/*  2.16 Piano Prelude Page  */
/****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*****************************/
/*  2.16 Piano Prelude Page  */
/*****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*******************************/
/*  2.17 Bible Listening Page  */
/*******************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {
/*    #ctl00_ContentPlaceHolder1_pnlBibleList table,
    #ctl00_ContentPlaceHolder1_pnlBibleList tr,
    #ctl00_ContentPlaceHolder1_pnlBibleList td{
        width:100%!important;
    }
*/
}

/********************************************/
/*  2.17.1 Bible Listening Individual Page  */
/********************************************/
@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px)  {

}

/********************************/
/*  2.18 English Messages Page  */
/********************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/****************************/
/*  2.19 Message Play Page  */
/****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*********************************/
/*  2.20 Meetings Location Page  */
/*********************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}

/*****************************/
/*  3. Pop up Window Design  */
/*****************************/
@media only screen and (min-width: 768px) and (max-width:960px), (min-device-width: 768px) and (max-device-width: 1024px) {

}