html {
  height: 100%;

}

body {
  overflow-x: hidden;

}

.cloak {
  display: block;
}

hr {
  width: 80px;
  border-color: #ffa800;
  border-width: 2px;
  height: 2px;
}


.dropdown{
	text-align:center;
	margin-top: 13px;	
}

.bannerBtn {
  border: none;
  background: #ffa800;
  color: white;
  padding: 10px 20px;
}
.bannerBtn:hover {
  background: rgba(128,128,128,1.5)
}

.inputInline {
  width: 49%;
  float: left;
}

.navbar-btn {
  padding-top: 13px;
  margin: 0 10px 0 0;
  color: #fff;
  font-size: 18px;
}
.navbar-btn:hover {
  color: #ffa800;
}

.navbar {
  background: #000;
  padding: 5px;
}
.navbar .navbar-toggle {
  border-color: #fff;
}
.navbar .navbar-toggle .icon-bar {
  background-color: #ffa800;
}
.navbar .navbar-brand {
  color: #ffa800;
  text-align:center;
  margin-top: -12px;
}
.navbar .navbar-brand:hover {
  color: #ffa800;
}

.navbar .navActive {
  color: #ffa800;
}



.parallax, .parallaxTop, .parallaxSection {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}

.parallaxTop {

  min-height: 100vh;
  background-image: url(https://amainsider.com/wp-content/uploads/2016/09/Motor-Oil.jpg);
}

.parallaxSection {
  min-height: 250px;
  
}

.shadow {
	padding-top: 5%;
	padding-bottom: 5%;
	margin: 0 auto;
}
.shadow, .shadowSection {
  background: rgba(0, 0, 0, 0.5);
  min-height: 100vh;
  width: 100%;
  
}

.shadowSection {
  min-height: 250px;
}

.jumboBanner {
  text-align: center;
}
.jumboBanner .banner {
  color: #fff;
  padding-top: 15vh;
  text-align: center;
  font-family: sans-serif;
  font-size: 112px;
  margin-top: 0;
}

.jumboBanner .hr {
	width: 50%;
	border-top: 1px solid rgba(0, 0, 0, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	margin-top: 50px;
	margin-bottom: 55px;
}


.jumboBanner .btn {
	padding:10px;
	background-color: #bbb;
	border: 1px solid #555;
	color: #222;
	transition: all 0.3s linear;
}

.jumboBanner .btn>img {
	width: 40px;
}

.jumboBanner .btn:hover {
	background-color: #FFDA3C;
	color: #222;
	border: 1px solid #333;
	transform: scale(1.1);
	box-shadow: 6px 6px 2px -2px rgba(0,0,0,0.5);
}




.jumboBanner .motto {
  color: #fff;
  margin: 50px auto;
}

#aboutBlock {
  width: 94%;
}

#aboutRow, .aboutLeft, .aboutRight, .aboutImg {
  min-height: 400px;
  margin: 20px auto;
}
#aboutRow hr, .aboutLeft hr, .aboutRight hr, .aboutImg hr {
  margin-left: 0;
  text-align: left;
}
#aboutRow .aboutImg, .aboutLeft .aboutImg, .aboutRight .aboutImg, .aboutImg .aboutImg {
  
  background-repeat: no-repeat;
  background-size: 90% 90%;
}


#servicesRow {
  background-image:url(https://amainsider.com/wp-content/uploads/2016/09/Motor-Oil.jpg);
  text-align: center;
  color: white;
}
#servicesRow h2 {
  padding-top: 100px;
}

#serviceBlocks .container {
  width: 94%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
	
}

.serviceBlock {
  text-align: center;
  margin: 20px auto 50px auto;
  padding: 25px;
}
.serviceBlock img {
  width: 100px;
  height: 100px;
  margin: 10px 0 20px 0;
}

.serviceBlock p {
  font-size: 18px;
}

.phoneContact {
  background: #ffa800;
  text-align: center;
  color: white;
  height:100px;
}
.phoneContact h2 {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-top: 30px;
}

#formMessage {
  margin-bottom: 2%;
  height: 100px;
  max-width: 100%;
}

.contactForm {
	margin: 50px auto;
  text-align: center;
}
.contactForm h2 {
  margin: 0 auto;
}
.contactForm form {
  width: 75%;
  margin: 50px auto 0 auto;
}
.contactForm form input {
  margin-bottom: 2%;
}
.contactForm form input[name="name"] {
  margin-right: 2%;
}

#contactInfo {
  background: #131413;
  min-height: 200px;
}
#contactInfo .contactStack {
  margin: 50px 0;
  text-align: center;
  font-size: 16px;
}
#contactInfo h4 {
  color: #ffa800;
}
#contactInfo p {
  color: #9d9d9d;
}

#copyright {
  background: #ffa800;
  height: 50px;
  text-align: center;
  color: white;
}


   



@media screen and (max-width: 766px) {
  .jumboBanner .banner {
    font-size: 72px;
  }

  .cloak {
    display: none;
  }
  

}
@media screen and (max-width: 500px) {
  .inputInline {
    width: 100%;
    float: none;
  }

  form input {
    margin-bottom: 5%;
  }

  input[name="submit"] {
    width: 100%;
  }

  input[name="name"] {
    margin-right: 0%;
  }

}
/*
#carousel1 {
  width: 50%;
  height: 120px;
  overflow: hidden;
  padding: 8px;
  
  margin: 0 auto;
  border-radius: 5px;
  
}

.holder {
  animation: carousel 20s linear infinite;
  white-space: nowrap;
  will-change: transform;
  
  &:hover {
    animation-play-state: paused;
  }
}

.holder>img {
  display: inline-block;
  width: 150px;
  height: 75px;
}

/*
@keyframes carousel {
  0% {
    transform: translateX(0);
  }
  
  50% {
    transform: translateX(-25%);
  }
  
  100% {
    transform: translateX(0);
  }
}
*/



.wrapper{
  width: 960px;
  margin: 100px auto;
}

.col-1-2{
  float: left;
  width: 50%;
}

.product-wrap{
  margin: 0 auto;
  width: 350px;
  
  
  .product-shot{
    padding-top: 30px;
    transition: all 0.5s ease;
    &:hover{ transform: scale(1.1); }
  }
}

.product-info{
  h2{
    padding-bottom: 15px;
    font-size: 32px; 
    border-bottom: 1px solid #d9d9d9;
  }
  
  .desc{ 
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.6;
  }

  
  .sizing-list{
    margin-top: 25px;
    padding: 0px;
    list-style-type: none; 
  }
  
  .size{ 
    display: inline;
    margin-right: 10px;
    padding: 10px 15px; 
    color: rgb(194, 194, 194);
    border: 1px solid rgb(194, 194, 194);
    cursor: pointer;
    
    &.active{
      color: white;
      background-color: rgb(194, 194, 194);
    }
  }
   
}

.buttonencomendas{
  display: inline-block;
  margin-top: 35px;
  padding: 12px 25px;
  font-size: 16px;
  text-decoration: none;
  background-color: #505050;
  color: white;
  transition: 0.25s ease;
}

.buttonencomendas:hover{
  background-color: #323232;
  color:#fff;
}

.buttonencomendas:active{
  background-color: #323232;
  color:#ffa800;
}



.login-wrap{
	width:100%;
	margin:auto;
	max-width:525px;
	min-height:670px;
	position:relative;
	
	background: url(/img/DSC_0025.JPG) center no-repeat ;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	position:absolute;
	padding:90px 70px 50px 70px;
	background:rgba(255,168,0,.1);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top: 0;
	left: 2px;
	right: 0;
	bottom: 0;
	position: absolute;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	transition: all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
	color:#fff;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#ffa800;
	border-bottom: solid 3px;
	border-color:#ffa800;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	font-weight: bold;
	background:rgba(255,255,255,.4);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#fff;
	font-size:12px;
}
.login-form .group .button{
	background:#ffa800;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.5);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#ffa800;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:60px 0 50px 0;
	background:rgba(255,255,255,.5);
}
.foot-lnk{
	text-align:center;
	margin-top: -30px;
	
}



.arallax, .arallaxTop, .arallaxSection {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}

.arallaxTop {

  min-height: 100vh;
  background:#FFF;
}

.arallaxSection {
  min-height: 250px;
  
}

.hadow {
	padding-top: 150px;	
	margin: 0 auto;
}
.hadow, .hadowSection {
  background:#FFF;
  min-height: 100vh;
  width: 100%;
  
}

.hadowSection {
  min-height: 250px;
}

.umboBanner {
  text-align: center;
}
.umboBanner .banner {
  color: #fff;
  padding-top: 15vh;
  text-align: center;
  font-family: sans-serif;
  font-size: 112px;
  margin-top: 0;
}

.umboBanner. hr {
	width: 50%;
	border-top: 1px solid rgba(0, 0, 0, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	margin-top: 50px;
	margin-bottom: 55px;
}


.umboBanner .btn {
	padding:10px;
	background-color: #bbb;
	border: 1px solid #555;
	color: #222;
	transition: all 0.3s linear;
}

.umboBanner .btn>img {
	width: 40px;
}

.umboBanner .btn:hover {
	background-color: #FFDA3C;
	color: #222;
	border: 1px solid #333;
	transform: scale(1.1);
	box-shadow: 6px 6px 2px -2px rgba(0,0,0,0.5);
}
 
.umboBanner .motto {
  color: #fff;
  margin: 50px auto;
}