/*************************************************************************
*************************************************************************
    PL-BANNER
*************************************************************************
*************************************************************************/

/*
div{
    border:solid 1px red !important;
}
*/
#pl-banner{
    display:block;
    /*position:absolute;
    top:0;*/
    z-index: -1000;
    padding:0;
    width:100%;
    height:500px;
    margin:0;    
}

#pl-banner div.bnr{
    
    width:100%;
    height:100%;
    
    margin:0;
    padding:0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size:contain;
}


#pl-banner div.bnr.bnr1{
    background-image: url("../images/banner/bnr1.png");
    
}

#pl-banner div.bnr.bnr2{
    background-image: url("../images/banner/bnr2.png");
}
#pl-banner div.bnr.bnr3{
    background-image: url("../images/banner/bnr3.png");
}
#pl-banner div.bnr.bnr4{
    background-image: url("../images/banner/bnr4.png");
}
#pl-banner div.bnr.bnr5{
    background-image: url("../images/banner/bnr5.png");
}
#pl-banner div.bnr.bnr6{
    background-image: url("../images/banner/bnr6.png");
}
#pl-banner div.bnr.bnr7{
    background-image: url("../images/banner/bnr7.png");
}
#pl-banner div.bnr.bnr8{
    background-image: url("../images/banner/bnr8.png");
}
#pl-banner div.bnr.bnr9{
    background-image: url("../images/banner/bnr9.png");
}
#pl-banner div.bnr.bnr10{
    background-image: url("../images/banner/bnr10.png");
}
#pl-banner div.bnr.bnr11{
    background-image: url("../images/banner/bnr11.png");
}
#pl-banner div.bnr.bnr12{
    background-image: url("../images/banner/bnr12.png");
}

#pl-banner div.nav-button{
    width:120px;
    height:80px;
    display:block;
    position:relative;
    top: 40%;
    background-repeat: no-repeat;
    background-size: 40%;
    cursor: pointer;
    z-index: 2000;
    /*border:solid 1px white;*/
}
#pl-banner div.nav-button.left{
    float:left;
    background-position: center right;
    background-image: url("../images/banner/left-arrow.png");
}
#pl-banner div.nav-button.right{
    
    float:right;
    background-position: center left;
    background-image: url("../images/banner/right-arrow.png");
    /*z-index: 1000;*/
}


#pl-banner div.bullet-container{
    float:left;
    
    display:block;
    
    float:left;
    z-index: 1000;
    min-width:200px;
    height:80px;
    /*border:solid 2px red;*/
    
}
#pl-banner div.bullet{
    /*position:static;*/
    margin:auto;
    display:block;
    /*left:0;*/
    margin-left:8px;
    width:12px;
    height: 12px;
    border:solid 2px white;
    /*top:50%;*/
    /*left:50%;*/
    float:left;
    z-index: 1000;
    border-radius: 8px;
    cursor:pointer;
}
#pl-banner div.bullet.active{
    background-color: white !important;
}










/********************************************************************************/
/********************************************************************************/
/* Custom, iPhone Retina */ 
/********************************************************************************/
/********************************************************************************/
@media only screen and (min-width : 280px) {
    #pl-banner div.nav-button{
        width:30px;
        height:30px;
        background-size: 40%;
        top:80%;
    }
    
    #pl-banner div.nav-button,
    #pl-banner div.bullet-container,
 
}

/********************************************************************************/
/* Extra Small Devices, Phones */ 
/********************************************************************************/
@media only screen and (min-width : 480px) {

    #pl-banner div.nav-button{
        width:40px;
        height:40px;
        background-size: 40%;
        top:50%;
    }
    
    #pl-banner div.nav-button,
    #pl-banner div.bullet-container,
  
}

/********************************************************************************/
/* Medium Devices, Desktops */
/********************************************************************************/
@media only screen and (min-width : 992px) {
    #pl-banner div.nav-button{
        width:80px;
        height:60px;
        background-size: 40%;
        top:40%;
    }
    
    #pl-banner div.nav-button,
    #pl-banner div.bullet-container,
    
}

/********************************************************************************/
/* Large Devices, Wide Screens */
/********************************************************************************/
@media only screen and (min-width : 1200px) {

    #pl-banner div.nav-button{
        width:110px;
        height:70px;
        background-size: 40%;
        top:40%;
    }
    
    #pl-banner div.nav-button,
    #pl-banner div.bullet-container,
    
    
}

/********************************************************************************/
/* EXTRA Large Devices, Wide Screens */
/********************************************************************************/
@media only screen and (min-width : 1600px) {
    
    #pl-banner div.nav-button{
        width:120px;
        height:80px;
        background-size: 40%;
        top:40%;
    }
    
    #pl-banner div.nav-button,
    #pl-banner div.bullet-container,
    
    

  
}