/**



  Style   : Landing Luwuutarakab.go.id

  Version : 1.0

  Author  : Almuiz

  Copyright © All rights Reserved



 **/



/* ------------ Fonts ------------ */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');

@import url('https://fonts.googleapis.com/css?family=Satisfy');



/* ------------ General Style ------------ */

*,

*:after,

*::before {

  box-sizing: border-box;

  margin:0px;

  padding:0px;

}



html,body{

  height: 100%;

}



body {

  margin: 0;

  background: #000;

  overflow-x: hidden; 

  color: #fff;

}



a {

  text-decoration: none !important;

  color: #06162F;

}



a:hover,

a:focus {

  color: #c0392b;

  -webkit-transition: all 0.3s !important;

  transition: all 0.3s !important;

}



video { 

  position: fixed;

  top: 50%;

  left: 50%;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  z-index: -100;

  -ms-transform: translateX(-50%) translateY(-50%);

  -moz-transform: translateX(-50%) translateY(-50%);

  -webkit-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  /*background: url('../img/bg.jpg') no-repeat;

  background-size: cover;

  transition: 1s opacity;*/

}



#wrapper { 

  position: absolute;

  background-color: rgba(0,0,0,0.4);

  color: white;

  text-align: center;

  min-width: 100%;

  min-height: 100%;

}



#wrapper .btn {

  background: #009933;

  color: #ffffff;

  border: 1px solid #ffffff;

  border-radius: 0;

  font-family: 'Open Sans', sans-serif;

  font-weight: bold;

  font-size: 12px;

  letter-spacing: 1.5px;

}



#wrapper .btn:hover {

  background: #1A5E51;

}



.content {

  margin: 0 auto;

  margin-top: 50px;

  width: 730px;

  height: 100%;

}





/* ------------ Logo ------------ */

.logo img {

  width: 80px;

  margin-bottom: 10px;

}



.brand {

  font-size: 35px;

  font-family: 'Open Sans', sans-serif;

  color: #ffffff;

  letter-spacing: -1px;

  text-shadow: 0px 2px 0px #000000;

}



.slogan {

  color: #ffffff;

  font-size: 35px;

  font-family: 'Satisfy', cursive; 

  font-style: italic;

  text-shadow: 0px 2px 0px #000000;

}





/* ------------ Menu ------------ */

.menu{

  list-style: none;

  margin: 50px 0;

  padding:0;

  text-align: center;

  width: 750px;

}



.menu > li{

  display: inline-block;

}



.menu > li:nth-child(11n+1){

}



.menu li:nth-child(1n) .icon:before{

  background:#E74C3C;

}

.menu li:nth-child(2n) .icon:before{

  background:#2ECC71;

}

.menu li:nth-child(3n) .icon:before{

  background:#3498DB;

}

.menu li:nth-child(4n) .icon:before{

  background:#F1C40F;

}

.menu li:nth-child(5n) .icon:before{

  background:#E67E22;

}

.menu li:nth-child(6n) .icon:before{

  background:#72C02C;

}

.menu li:nth-child(7n) .icon:before{

  background:#8e44ad;

}

.menu li:nth-child(8n) .icon:before{

  background:#1ABC9C;

}



.menu-item{

  text-align: center;

  display: block;

  margin: 0 20px -23px;

  position: relative;

}



.menu-item:hover{

  z-index: 10;

}



.menu-item .icon {

  position: relative;

  width: 80px;

  height: 80px;

  display: block;

}



.menu-item .icon img{

  height: 40px !important;

  width: auto;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  -webkit-transform: translate(-50%,-50%);

}



.menu-item .icon:before{

  content: "";

  display: block;

  width: 80px;

  height: 80px;

  background-color: #00252B; 

  position: absolute;

  top:0;

  left:0;

  transform: rotate(45deg);

  -webkit-transform: rotate(45deg);

  border-radius: 0;

}



.menu-item .icon:hover:before{

  opacity: 0.5;

}



.menu-item .icon img:hover{

  opacity: 0.5;

}



.menu-item .title{

  white-space: nowrap;

  display: inline-block;

  background: #000;

  color: #fff;

  padding: 4px 15px;

  border-radius: 4px;

  text-transform: uppercase;

  font-size: 10px;

  font-weight: bold;

  position: absolute;

  bottom: 0px;

  left: 50%;

  transform: translate(-50%,0) scale(0);

  -webkit-transform: translate(-50%,0) scale(0);

  opacity: 0;

  transition: 200ms ease;

  -webkit-transition: 200ms ease;

}



.menu-item:hover .title{

  transform: translate(-50%, 25px) scale(1);

  -webkit-transform: translate(-50%, 25px) scale(1);

  opacity: 1;

}



.menu-item .dropdown-menu{

  top: auto;

  bottom: 120%;

  left: 50%;

  transform: translate(-50%,-30px);

  -webkit-transform: translate(-50%,-30px);

  border: none;

  border-radius: 0;

  box-shadow: none;

  padding: 15px 0;

  background: #ffffff;

  display: block!important;

  transition: all 300ms ease;

  -webkit-transition: all 300ms ease;

  opacity: 0;

  max-width: 100%;

  min-width: 250px;

  visibility: hidden;

}



.menu-item.open .dropdown-menu{

  opacity: 1;

  transform: translate(-50%,0);

  -webkit-transform: translate(-50%,0);

  visibility: visible;

}



.menu-item .dropdown-menu:before{

  content: "";

  position: absolute;

  bottom:-20px;

  left: 50%;

  transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  border: 10px solid transparent;

  border-top: 10px solid #ffffff;

}



.menu-item .dropdown-menu li.heading{

  background: #1A5E51;

  padding: 10px 25px;

  margin: -15px 0 0px;

}



.menu-item .dropdown-menu li a{

  position: relative;

  padding: 5px 15px;

  padding-left: 40px;

}



.menu-item .dropdown-menu li a:hover,

.menu-item .dropdown-menu li a:focus{

  background: #1A5E51;

  color: #ffffff;

}



.menu-item .dropdown-menu li a:before{

  content: "\f061";

  font-family: "FontAwesome";

  position: absolute;

  top: 5px;

  left: 25px;

  color: #c0392b;

}



/* ------------ Responsive ------------ */



@media screen and (max-width: 768px){

  

  body{

    background: url(../img/bg.jpg) fixed no-repeat center;

    background-size: cover;

  }



  #wrapper { 

    background-color: none !important;

    width: 100%;

  }



  .content {

    width: auto;    

    margin: 10px;

  }



  .content .logo img{

    margin-top: 15px;

    width: 60px;

    height: auto;

  }



  .content .brand {

    font-size: 20px;

  }



  .content .slogan {

    margin-top: 10px; 

    margin-bottom: 10px; 

    font-size: 18px;

  }



  #bgvid {

    display: none;

  }



  .menu-item{

    margin: 5px;

  }



  .menu-item .icon{

    width: auto;

    border: 1px solid rgba(255,255,255,0.3);

    position: static;

  }

  .menu-item .icon:before{

    transform: rotate(0);

    -webkit-transform: rotate(0);

    display: none;

  }



  .menu {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    margin: 10px 10px;

  }



  .menu > li{

    display: block;

    width: 165px;

    position: static;

  }



  .menu-item .dropdown-menu{

    position: fixed!important;

    top:auto!important;

    left:0!important;

    right:0!important;

    bottom:0!important;

    width: auto!important;

    -webkit-transform: none!important;

    transform: none!important;

    background: #fff!important;

    float: none!important;

    border-radius: 0;

    transition: 0s linear!important;

  }



  .menu-item .dropdown-menu:before{

    display: none!important;

  }





}