/*
 *  Garuda Style
 */
 
@font-face{font-family: swiss721; src: url(fonts/swiss721BT-Roman.otf);}
@font-face{font-family: dosis; src: url(fonts/Dosis-Medium.ttf);}

html,body{height:100%;}

body{
    margin:0;
    padding:0;
    background-color:#970707;
    font-family: Arial;
    font-size:13px;
    color:#111;
}

.floatClear{float:none; clear: both;}
.posLeft{float: left;} .posRight{float: right;} .posTop{position:absolute;top:0px;} .posBottom{position:absolute;bottom:0;}
.alignLeft{text-align: left;} .alignRight{text-align: right;} .alignCenter{text-align: center;} .alignJustify{text-align: justify;}
h1,h2,h3,h4,h5,h6{
    margin:0;
    padding:0;
    font-family:OpensansB;
}
.fco-y {color:#ffcb11;}
.fco-g {color:#616161;}
.bco-tw {background-color: rgba(255,255,255,.4);}
.bco-tb {background-color: rgba(0,0,0,.4);}
.fdosis {font-family:dosis;}
/* --------------------------------
   GLOBAL STYLE
   --------------------------------  */
   
.pg-body,.pg-container,.pg-vspace,.pg-wrap,.pg-header,.pg-top-banner
{
    display:block;
    position:relative;
}   

.pg-body{
    width:100%;
/*    max-width:1024px; */
    max-width:1104px;
    height:auto;
    min-height:100vh;
    margin:0 auto;
    background-image:url(../images/bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
}
.pg-container{
    width:100%;
    max-width:718px;
    height:auto;
    margin:0 auto;
    padding:0;
    background-color:#ffffff;    
}
.pg-vspace{
    height:100px;
}
.pg-wrap{
    overflow:hidden;
    width:98%;
    height:auto;
    margin:0 1%;
}
/* --------------------------------
   HEADER
   --------------------------------  */
.pg-header{
    width:100%;
    max-width:718px;
    height:192px;
    background-image: url(../images/bg-header.png);
    background-position: top left;
    background-repeat: no-repeat;
    margin:0 auto;
    padding:0;
}   
.pg-top-banner{
    width:98%;
    height: auto;    
    margin:5px auto 15px auto;
    padding:0;  
    text-align: center;      
}
.box-banner-slide{
    display:inline-block;
    position:relative;
    width:99%;    
    max-width:485px;
    height:auto;        
    margin:2.5% .5%;    
}
.page-content{
    width:100%;
    height: auto;        
    margin:5px auto 15px auto;
    padding:0;  
/*    text-align: center;        */
}
.box-content{
    display:inline-block;
    position:relative;
    width:99%;    
    max-width:485px;
    height:auto;
    min-height:1px;        
    margin:2.5% .5%;    
}
.box-content-img{
    display:block;
    position:relative;
    width:98%;
    height:auto;
    margin:1%;
    text-align:center;
}
.box-content-img img{
    max-width:100%;
    height:auto;
    margin:0;
}
.box-banner-slide img{
    width:100%!important;
    height:auto;
    margin:0;
}
.box-banner-right{
    display:inline-block;
    position:relative;
    width:185px;
    height:auto;        
    margin:2.5% .5%;   
    vertical-align:top;     
}
.box-banner-right ul{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
}
.box-banner-right ul li{
    display: inline-block;
    position:relative;
    vertical-align:top;
    text-align:center;
    margin-bottom:.5%;
}
.pg-content{
    display:block;
    position:relative;
    width:96%;
    height: auto;
    margin:0 auto;
    padding:0;
    margin-top:-5px;
}
.bar-title{
    display:block;
    position:relative;
    width:100%;
    height:93px;
    background:url(../images/bar-title.jpg) bottom left repeat-x;
    margin:20px 0;
}
span.title-content{
    display:block;
    position:absolute;
    top:0;
    font-family:Arial;
    font-size:19px;
    color:#fff;
    font-weight:bold;
    font-style:italic;
    text-align:center;
    top:48px;
    left:0;
    right:0;
}
span.title-content i{
    font-size:30px;
    color: #ff0000;
}
.bar-title-sm{
    display:block;
    position:relative;
    width:100%;
    height:32px;
    margin:10px 0;
    padding:0;
    background:url(../images/bar-title-sm.jpg) top left repeat-x;
    text-align:left;
}
.bar-title-sm span{
    display:block;
    font-family:Arial;
    font-size:12pt;
    color:#fff;
    padding-top:11px;
    padding-left:15px;
}
.bar-logo{
    display:block;
    position:relative;
    width:100%;
    height:114px;    
}
.bar-logo img{
    margin-left:11%;
}
.box-hitam-putih{
    display:block;
    position:relative;
    width:98.5%;            
    height:auto;
    background-color:#000;
    background-image: url(../images/bg-hitam-putih.jpg);
    background-position: 0 0;
    background-repeat: repeat-x;
    margin:0 auto;
    text-align:center;
}
.box-infopage{
    display:inline-block;
    position:relative;
    width: 33.10%;
    height:auto;
    min-height:275px;
    background: #000;
    background-image: url(../images/bg-hitam-putih.jpg);
    background-position: 0 0;
    background-repeat: repeat-x;
    margin:0 -0.1%;
    vertical-align:top;
    text-align:center;
}
.title-info{
    display: block;
    position:absolute;
    width:100%;
    height:30px;
    top:115px;
    left:0;    
    font-size:23px;
    line-height:1.3em;
    color:#ff0000;
}
.descr-info{
    display: block;
    position:absolute;
    width:98%;
    height:auto;
    top:145px;
    left:0;    
    font-size:13px;    
    color:#fff;
}
.a-more{
    display: block;
    position:absolute;
    bottom:5px;
    right:5px;
    text-decoration:none;
    color:#ff0000;
}
.box-banner-bottom{
    display:block;
    position:relative;
    width:680px;            
    height:auto;
    background-color:rgba(250,0,0,.8);
    margin:0 auto;
}

ul.list-p{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;    
}
ul.list-p li{
    display:inline-block;
    position:relative;
    width:219px;
    height:250px;
    margin:3px;        
}
.box-slide{
    display:block;
    position:absolute;    
    width:162px;
    height:109px;
    background-color:rgba(0,0,0,0);
    top:120px;
    left:28px;
}

.pics{
	width:100%;
	height:auto;
}
.pics img{
	width:100%!important;
	height:auto;
}
.pics2{
	width:100%;
	height:auto;
}
.pics2 img{
	width:100%!important;
	height:auto;
}
.pics3{
	width:100%;
	height:auto;
}
.pics3 img{
	width:100%!important;
	height:auto;
}

/*
.box-slide{
    display:block;
    position:absolute;    
    width:219px;
    height:147px;
    background-color:rgba(0,0,0,.2);
    top:101px;
    left:0;
} 
.box-slide IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

.box-slide IMG.active{    
    z-index:10;
    opacity:1.0;
}
.box-slide IMG.last-active {    
    z-index:9;    
}
*/
.icon-lp-sponsor{
    background-image: url(../images/title-sponsor.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
}
.icon-lp-business{
    background-image: url(../images/title-business-partner.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
}
.icon-lp-media{
    background-image: url(../images/title-media-partner.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* --------------------------------
   FOOTER
   --------------------------------  */
   
.pg-footer{
    width:100%;
    height:auto;    
    background-color:#000;
    text-align:center;
}
.pg-footer-garuda{
    display:inline-block;
    width:213px;
    height:160px;
    margin:0;
    background-color:#d80a0a;
    vertical-align:top;
}
.pg-footer-garuda img{
    width:213px;
    height:160px;
    margin:0;
}
.pg-footer-text{
    display:inline-block;
    width:100%;
    max-width:500px;
    height:auto;
    min-height:143px;
    vertical-align:top;    
}
.menu-sitemap{
    display:inline-block;
    width:120px;    
    vertical-align:top;
    margin:1px;
}
.menu-sitemap ul{
    list-style-type:none;
    margin:5px;
    padding:0;
    margin-left:10px;   
     
}
.menu-sitemap ul li{
    margin:3px 0;   
}
.menu-sitemap ul li a{
    text-decoration:none;
    color:#fff;
}
.menu-sitemap ul li:hover a{
    text-decoration:underline;
    color:#fff;
}
.box-address{
    display:inline-block;
    position:relative;
    width:98%;
    max-width:370px;
    height:auto;
    color:#fff;    
    border-left:2px solid #fff;
    vertical-align:top;
    margin-top: 5px;
}
.txt-address{
    display:block;
    position:relative;
    width:90%;
    height:95px;
    color:#fff;
    margin:0 auto;
    margin-top:10px;
    font-size:13px;
    text-align:left;
}
.box-sosmed{
    width:96%;    
    padding:0;
    height:28px;
    margin:0 auto;      
}
ul.list-sosmed{
    list-style-type: none;
    margin:0;
    padding:0;
    text-align:right;    
}
    ul.list-sosmed li{
        display:inline-block;
        position:relative;
        vertical-align:top;
        border-radius:10%;
            -webkit-border-radius:10%;
    }
    ul.list-sosmed li a{
        display:block;
        width:28px;
        height:28px;
        margin:0 2px;                   
        border-radius:10%;
            -webkit-border-radius:10%;     
    }

ul.list-sosmed li a.ico-fb{background:url(../images/sosmed/ico-fb.png) no-repeat;}
ul.list-sosmed li a.ico-tw{background:url(../images/sosmed/ico-tw.png) no-repeat;}
ul.list-sosmed li a.ico-yt{background:url(../images/sosmed/ico-yt.png) no-repeat;}

ul.list-sosmed li a.ico-fb:hover{background:url(../images/sosmed/ico-fb_hover.png) no-repeat;}
ul.list-sosmed li a.ico-tw:hover{background:url(../images/sosmed/ico-tw_hover.png) no-repeat;}
ul.list-sosmed li a.ico-yt:hover{background:url(../images/sosmed/ico-yt_hover.png) no-repeat;}

.copyright{
    width:100%;
    height:auto;    
    background-color:#fff;
    text-align:center;
    font-family:arial;
    font-size:10px;
    color:#000;
    line-height:1.2em;
    padding:5px 0;
}
/* ------------------ EVENT ------------------*/
.box-list-event{
    display:inline-block;
    position:relative;
    width:220px;
    height:auto;
    min-height:100px;
    margin:0 10px 5px 5px;
    vertical-align:top;
    
}
.box-list-event-title{
    display:block;
    position:relative;
    width:100%;
    height:auto;
    min-height:90px;    
    margin:0;
    margin-bottom:10px;
    text-align:center;
}
.box-list-event-title img{
    max-width:100%;
    height:auto;
}
/* ------------------ SCHEDULES ------------------*/
.img-jadwal{
    width:98%;
    height:auto;
}

/* ------------------ SERVICES ------------------*/
.box-services{
    display:block;
    position:relative;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    padding-bottom:35px;
}
.btn-gallery{
    display:block;
    position:absolute;
    width: 99px;
    height:34px;
    right:0;    
    color:#fff;
    background: url(../images/btn-gallery.jpg);
}
/* ------------------ GALLERY ------------------*/
.box-cp{
    display:block;
    position:relative;
    width:100%;
    max-width: 478px;
    height:auto;
    min-height:266px;
    background-color:rgba(0,0,0,.4);
    margin:0 auto;
}
.box-gallery-event-title{
    display:block;
    position:relative;
/*    width:100%; */
    width:40%;
    height:auto;
    min-height:60px;        
    margin:0;
    margin-bottom:10px;
    text-align:left;
}

.box-gallery-event-title img{
    max-width:100%;
    height:auto;
}
/* ------------------ TICKET BOX ------------------*/
.box-ticket-img{
    display:block;
    position:relative;
    width:98%;
    max-width:478px;
    height:auto;
    margin:0 auto;
}
.box-ticket-img img{
    width:100%!important;
    height:auto;
}
/* ------------------ CONTACT US ------------------*/
.box-contact-info{
    display:block;
    position:relative;
    width:100%;
    height:auto;
}
.box-cinfo-img{
    display:block;
    position:relative;
    width:98%;
    max-width:274px;
    height:auto;
    margin:0 auto;
}
.box-cinfo-img img{
    width:100%!important;
    height:auto;
}
/** -----------------------------------------------------------
    FORM CONTROL
----------------------------------------------------------- **/

    .form-group{margin-bottom:5px}
    .form-control{
        margin-bottom: 5px;
        background: transparent;
        border: none;
    }
    label{
        display: -moz-inline-block;
        display: inline-block;    
        color:#a1a1a1;
        margin-left: 5px;
        font-family:dosis;
    }
    label.lcontact{
        width:60px;    
    }
    .textbox{
        display: block;
        width: 94%;
        height:25px;
        padding:1px 10px 1px 10px;
        border:1px solid #737373;
        border-radius:3px;        
            -webkit-border-radius:3px;        
        color: #222;
        background: #fff;
        font-family:dosis;
        font-size:14px; 
        font-style:italic;
        margin-bottom: 5px;
        margin-right: auto;
        margin-left: auto;    
    }
    .text100{
        display: block;
        width:100px;
        height:35px;
        padding:1px 1px 1px 10px;
        border:1px solid #737373;
        border-radius:3px;        
            -webkit-border-radius:3px;        
        color: #222;
        background: #fff;
        font-family:dosis;
        font-size:14px; 
        font-style:italic;
            
    }
    textarea{
        display: block;
        width: 94%;    
        padding:1px 10px 8px 10px;
        border:1px solid #737373;
        border-radius:5px;        
            -webkit-border-radius:5px;        
        color: #222;
        background: #fff;
        font-family:dosis;
        font-size:14px; 
        font-style:italic;
        margin-bottom: 5px;
        margin-right: auto;
        margin-left: auto;
    }
    select{
        display: block;
        font-family:inherit;
        font-size:inherit;
        line-height:inherit;
        font-style:normal;
        padding:1px 10px 1px 10px;
        border:1px solid #737373;
        border-radius:5px;        
            -webkit-border-radius:5px;        
        color: #222;
        background: #fff;
        width: 98%;    
        margin-right: auto;
        margin-left: auto;
    }
    .tombol{
        display: block;
        position: relative;
        width: 75px;
        height: 35px;
        margin:10px auto;
        padding:0;    
        border:none;
        background: #ac0000;
        color: #fff;     
        font-family:OpenSansR;
        border-radius:3px;
           -webkit-border-radius:3px;
        float:right;
    }
    .tombol:hover{
        background: #fff;
        color: #ac0000;
        border:1px solid #ac0000;
        cursor: pointer;  
    } 
.box-maps{
    display:block;
    position:relative;
    width:98%;
    height:300px;
    background-color:rgba(0,0,0,.4);
    margin:0 1%;
}
.box-maps iframe{
    position:absolute;
    top:0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;    
}
/** Addtional css for articles **/
.article-row{
   float:none;
   clear:both;
   display:block;
   width:100%;
   height:auto;
}
.article-row p{
  font-family:Arial;
}
.box-thumb-er{
   display:block;
   position:relative;
   width:100%;
   max-width:170px;
   height:auto;
   margin: 0 auto;
}
.box-thumb-er img{
   width:170px;
   height:auto;
   margin:0;
}
.box-article{
   clear:both;
   display:block;
   position:relative;
   width:99%;
   height:auto;
   margin:0 auto;
   padding:0;
 
   
}
.btn-rm-article{
   color:#ff0000;
   text-decoration:none;
   font-family:arial;
   font-size:12px;
}
.btn-rm-article:hover{text-decoration:underline;}
.list-index{
   display:block;
   position:relative;
   width:99%;
   height:auto;
   padding:0;
   margin:0;
   margin-bottom: 5px;
   border-bottom:2px solid #ff0000;
   background: url(../images/sgtg.png) no-repeat left 5px center;
   text-align:left;
}
.list-index span{
   margin-left:20px;
   padding:10px 0;   
}
.list-index span a{
   text-decoration:none;
   color:#000;
   line-height:1.6em;
}
.list-index span a:hover{
   text-decoration:underline;
}
/* */
.box-ft{
   display:inline-block;
   position:relative;
   width:225px;
   height:auto;
   min-height:120px;
   background:rgba(0,0,0,0);
   margin:5px;
   margin-bottom:10px;
   vertical-align:top;
}
.box-ft-img{
   display:block;
   position:relative;
   width:111px;
   height:123px;
   text-align:center;  
   float:left; 
   margin-right:5px;
}
.box-ft-txt{
   display:block;
   position:relative;
   width:111px;
   height:123px;
   text-align:left;   
   float:left;
}
.box-ft-img img{
   width:111px;
   height:auto;
   margin:0;
}
/* */
ul.list-nl{
   list-style-type: none;
   margin:0;
   padding:0;
   text-align:left;
}
ul.list-nl li{
   display:inline-block;
   position:relative;
   width:112px;
   height:116px;
   margin:5px 10px;
   background:rgba(0,0,0,0);
}
ul.list-nl li img{
   width:112px;
   height:88px;
   margin:0 auto;
}
span.title-nl{
   display:table;
   position:absolute;
   width:112px;
   height:30px;
   bottom:0;
   left:0;   
}
span.title-nl span{
   display:table-cell;
   text-align:center;
   vertical-align:middle;
}