/*****************UMUM****************************/
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.loader {
  position: relative;
  width: 100px;
  height: 100px;
}

.dot {
  position: absolute;
  top: 23px;
  left: 23px;
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 32px;
	tranform-origin: 0, 0;

  &:nth-child(1) {
    background-color: #1994f4;
  }
  &:nth-child(2) {
    background-color: #01c381;
  }
  &:nth-child(3) {
    background-color: #fe485b;
  }
}

body{
	overflow-x: hidden;	
	font-family: 'Josefin Sans', sans-serif;
	font-size: 18px;
	background-color: #e2e2e2;
	color: #495056;
}
.nav-link{
	margin-right: 8px;
}

hr{
	width: 200px;
	border-top: 2px solid #ffce00;
	margin-top: 8px;
	margin-bottom: 10px;
}

.offset:before {
	height: 0rem;
	margin-top: 0rem;
	content: "";
	display: block;
}
/*******************Navbar************************/
.navbar {
	text-transform: uppercase;
	font-weight: 700;
	font-size:.9rem;
	letter-spacing: .1rem;
	background: rgba(0,0,0,.6)!important;
}
.navbar-brand img{
	height: 2rem;
}

.navbar-nav {
	padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link{
	color: white;
	padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .navlink:hover{
	color: #ffce00;
}

/*******************Parallax*******************************/
.parallax {
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.jumbotron {
		background-size: cover;
		height: 400px;
		margin-bottom:0;
}


/*******************Slider*********************************/
.carousel-item {
    background-size:cover;
	height: 100vh;
}

.carousel-caption {
	position: absolute;
	top: 38%;
}


/*******************Card*********************************/
.card{
	background-color: #ffffff;
	border: 1px;
}

.cardbaru{
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  cursor: pointer;
}
.cardbaru:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/***********************DESKTOP************************************/
@media all and(min-width: 992px) {  

	/*Vertical Center Text*/
	.carousel-caption h1{
		font-size: 8vh  !important;

	}

	.carousel-caption h6{
		font-size: 4vh !important;
	}
	
	.middle{
		  height: 50%;
		  width: 90%;
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  transform: translate(-50%, -50%);
	}
	/*Jumbotron*/
	.jumbotron-height {
		height: 700px;
	}
	
	.carousel-item {
	    height: 700px;
	}

}
/********************Medium Devices***************************/
@media all and(max-width: 921px) { 
	/*Jumbotron*/
	.jumbotron-height {
		height: 900px;
	}
	
	.carousel-item{
	    height :900px;
	}
	
}

/*******************Footer*************************************/
footer{
	background-color:#40474e;
	color: white;
	padding: 2rem 0 3rem;
	margin-top: 1.5rem 0;
}


/********************ICON***************************************/
.fa-industry {
	font-size: 100px;
	margin-top: 30px;
	color: #ffce00;
}

.fa-shipping-fast {
	font-size: 100px;
	margin-top: 30px;
	color: #ffce00;
}


.fa-tools {
	font-size: 100px;
	margin-top: 30px;
	color: #ffce00;
}

.fa-bong {
	font-size: 100px;
	margin-top: 30px;
	color: #ffce00;
}

.fa-lightbulb {
	font-size: 100px;
	margin-top: 30px;
	color: #ffce00;
	}

.fa-handshake {
	font-size: 100px;
	margin-top: 30px;
	color: #ffce00;
}

.grey-text {
  color: #9e9e9e !important;
}

.center, .center-align {
  text-align: center;
}

.grey-text.text-darken-3 {
  color: #424242 !important;
}

.blue-grey.darken-4 {
  background-color: #263238 !important;  
  opacity: 0.1;

}

.card-panel {
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
  padding: 24px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 2px;
  background-color: #fff;
}

.white-text {
  color: #FFFFFF !important;
}

.none {
    border-width:1px;  
    border-style: none;
    border-bottom :groove;
}


/****************************8Swiper***************************/

.swiper-container {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 50px;
      height: 450px;
}

.swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;

}

.swiper-slide .imgBx {
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.swiper-wrapper .swiper-slider .imgBx img {
	width: 100%;
	height: 30px;
	border-radius:10%;
}

.swiper-slide .details {
	box-sizing: border-box;
	padding: 20px;
}

.swiper-slide .details h3 {
	margin: 0;
	padding: 0;
	font-size: 20px;
}

.swiper-slide:hover {
	color: #ffA500;
}

/* Blur */
.hover07 img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover07:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}