@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto:300,300i,400,400i,500,500i,700,700i");
/*Color Variables*/


/* Button */
.button_all {
  font: 700 2vh "Roboto", sans-serif;
  width: 20vh;
  text-align: center;
  background: #f6b60b;
  display: block;
  border: 0;
  color: #000;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  padding: 1vh 0 1vh 0;
}
.button_all:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #000;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  transform: scaleY(0);
  transform-origin: 50%;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.button_all:hover, .button_all:focus {
  color: #fff !important;
}
.button_all:hover:before, .button_all:focus:before {
  transform: scaleY(1);
}


/* Section Title*/

.tittle h2 {
  font: 500 5vh "Roboto", sans-serif;
  color: #000;
  padding-top: 40px;
  position: relative;
}
.tittle h2:after {
  content: "";
  position: absolute;
  background: #f6b60b;
  height: 3px;
  width: 10vh;;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
}
  
		  
/*--------------------------------------------------*/
/*Prefix Styles*/
.m0 {
  margin: 0;
}

.p0 {
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  /*Section Fix*/
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  margin: 0;
}
body p {
  font-family: "Roboto", sans-serif;
  line-height: 26px;
  color: #000;
  margin: 0;
}
body section.row, body header.row, body footer.row {
  margin: 0;
}

/*Ancore*/
a, .btn, button {
  outline: none;
  transition: all 300ms linear 0s;
}
a:before, a:after, .btn:before, .btn:after, button:before, button:after {
  transition: all 300ms linear 0s;
}
a:focus, a:hover, .btn:focus, .btn:hover, button:focus, button:hover {
  outline: none;
  text-decoration: none;
  transition: all 300ms linear 0s;
}


/*--------------------------------------------------*/
/* product_area */
.product_area {
	background-image:url(lockout-products.jpg);
    background-size:cover;
	background-position:center;
	overflow: hidden;
	position: relative;
	padding-bottom: 24%;
}

.product_area img {
	margin-top: 10%;
}

.product_area.visible {
	background-image: url('../images/lockout-products.jpg');
}

.product_area .product_row {
	text-align: center;
}

.product_area .product_row p {
  padding:8vh 0 4vh 0;
  font: 500 3.5vh "Roboto", sans-serif;
}