/* Font */
@font-face{font-family:JaneAust;src:url('../font/JaneAust.ttf');}
@font-face{font-family:Champagne-Limousines;src:url('../font/Champagne-Limousines.ttf');}
body{
    background: url(../images/bg.jpg) repeat;
}
img{
    max-width: 100%;
    height: auto;
}
input[type=text], input[type=email], input[type=password], textarea{
    border: 1px solid #ccc;
    color: #666;
    padding: 3px;
}
html, body{width:100%;height:100%;}
.section{max-width: 100%;padding-top: 3.5rem;height: auto;margin: 0 auto;}

/* Header */
.header{
    z-index: 3;
    width: 100%;
    max-width: 100%;
    position: fixed;
    background: #3A3A38;
    overflow: hidden;
}
.header .section{
    padding: 0;
}
.header .logo{
    float: left;
    width: 25%;
    color: #fff;
    font-family: sans-serif;
}
.header nav{
    float: left;
    width: 50%;
}
.header nav .table{
    display: table;
    margin: 0 auto;
}
.header .menu{
    overflow: hidden;
}
.header .menu li{
    font-weight: bold;
    font-family: Champagne-Limousines;
    padding: 1.4rem;
    float: left;
}
.header .menu li a{
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
}
.header .menu li.recent a {
    padding-bottom: 0.2rem;
    border-bottom: solid #1FAAE1 2px;
}
.header .search{
    float: left;
    width: 25%;
}
.header .search input{
    margin: 1rem;
    float: right;
}

/* Content */
.content{}

/* Home */
.home{
    background: url(../images/home.jpg) no-repeat center fixed;
    text-align: center;
    overflow: hidden;
    padding-bottom: 3rem;
}
.home .badges{

}

/* About */
.about{
    overflow: hidden;
    background: #48D2EC;
    color: #fff;
    padding-bottom: 6rem;
}
.about h1{
    font-size: 3rem;
    border-bottom: 2px solid;
    display: block;
    text-transform: uppercase;
    font-family:Champagne-Limousines;
    margin: 1rem 2rem 3rem 2rem;
}
.about .sejarah{
    float: left;
    width: 33.33333333%;
}
.about .sejarah p, .about .sejarah h2, .about .terima p{line-height: 1.5rem;padding:0 1rem;}
.about .sejarah h2{
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-family:JaneAust;
}
.about .sejarah p{
    text-align: center;
    margin-bottom: 1rem;
    font-family:Champagne-Limousines;
    font-size: 1.4rem;
}
.about .team{
    float: left;
    width: 33.33333333%;
}
.about .team .dhimas, .about .team .ryan, .about .team .amir{
    overflow:hidden;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}
.about .team .dhimas .nama, .about .team .ryan .nama, .about .team .amir .nama{
    font-size: 2rem;
    
}
.about .team h2{
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-family:JaneAust;
}
.about .team .foto {
    float: left;
    width: 25%;
}
.about .team .cerita{
    float: left;
    width: 75%;
    font-family:Champagne-Limousines;
    font-size: 1.4rem;
    text-align: center;
}
.about .terima{
    float: left;
    width: 33.33333333%;
}
.about .terima h2{
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-family:JaneAust;
}
.about .terima p{
    text-align: center;
    margin-bottom: 1rem;
    font-family:Champagne-Limousines;
    font-size: 1.4rem;
}

/* Gallery */
.gallery{
    background: #34353A;
    color: #fff;
    overflow: hidden;
}
.gallery h1{
    font-size: 3rem;
    border-bottom: 2px solid;
    display: block;
    text-transform: uppercase;
    font-family:Champagne-Limousines;
    margin: 1rem 2rem;
}

/* Contact Us */
.contact{
    color: #fff;
    background: #FFD600;
    padding-bottom: 6rem;
    overflow: hidden;
}
.contact h1{
    font-size: 3rem;
    border-bottom: 2px solid;
    display: block;
    text-transform: uppercase;
    font-family: Champagne-Limousines;
    margin: 1rem 2rem 1rem 2rem;
}
.contact .kontak-us{
    overflow: hidden;
}
.contact .kontak{
    width: 50%;
    float: left;
}
.contact .kontak p {
    padding: 0 2rem;
    margin-bottom: 1rem;
    font-family:Champagne-Limousines;
    font-size: 1.4rem;
}
.contact .kontak h2{
    text-align: center;
    font-size: 5rem;
    margin-bottom: 2rem;
    font-family: Champagne-Limousines;
    font-weight: bold;
}
.contact .lokasi{
    padding: 1rem  0;
    font-weight: bold;
    font-family: Champagne-Limousines;
    font-size: 4rem;
}
.contact .maps{
    text-align: center;
}

/* Footer */
.footer{
    padding: 1rem 0;
    background: #181823;
    text-align: center;
}
.footer p{
    font-family: Champagne-Limousines;
    font-size: 2rem;
    color: #ecf0f1;
}
.footer .logo{
    width: 2.5%;
}
.footer .textlogo{
    font-size: 1rem;
}
.footer .mitrabusana{
    padding-top: .3rem;
}

/* CSS for Gallery */
.pengerjaan h2, .sampel h2{
    font-size: 2rem;
    font-family:Champagne-Limousines;
    text-align: center;
    margin-bottom: 1rem;
}
.pengerjaan{
    float: left;
    padding: 0 2rem;
}
.gallery .menu{
    text-align: center;
    padding: 1rem;
}
.pengerjaan img{
    width: 20%;
    float: left;
    filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);-webkit-filter:grayscale(100%);
    transition: filter .3s;
    -moz-transition: -moz-filter .3s;
    -webkit-transition: -webkit-filter .3s;
    -o-transition: -o-filter .3s;
}
.pengerjaan img:hover{filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0);-webkit-filter:grayscale(0);}
.sampel{
    padding: 3rem 2rem 6rem;
    float: left;
}
.sampel img{
    width: 25%;
    float: left;
    filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);-webkit-filter:grayscale(100%);transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;-o-transition:all .3s;
}
.sampel img:hover{filter:grayscale(0);-moz-filter:grayscale(0);-ms-filter:grayscale(0);-o-filter:grayscale(0);-webkit-filter:grayscale(0);}