@charset "UTF-8";
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*font-family: "balboa-plus-fill",sans-serif;
font-family: 'Lato', sans-serif;*/
/*colors
Original Orange = #e4883b
Black = #010101
Dark Gray (body copy) = #31302e
*/

/* General For All
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {text-decoration: none; color: #31302e; }

body{font-family: 'Lato', sans-serif; background-color: white; font-weight: 100; }

nav {width: 100%; height: 137px;  background-image: url(images/Wreckless_Nav.png); position: fixed; z-index: 1000; text-align: center; padding-top: 20px; box-sizing: border-box; font-family: "balboa-plus-fill", sans-serif; font-size: 22px; letter-spacing: .5px; margin-top: -1px; }
nav a{color: white; text-decoration: none; margin-left: 35px; margin-right: 35px; }
nav a:hover {color: #31302e; transition: .3s; }

header {width: 100%; height: 614px; background-image: url(images/Wreckless_Hero.png); background-size: cover; text-align: center; background-position: center bottom; padding-top: 125px; background-repeat: no-repeat; }
header img {width: 360px; }

.logo {float: right; padding-top: 300px; padding-right: 50px; }

section {width: 420px; margin: auto; }
section p {line-height: 25px; font-weight: 200; color: #666}

h1 {font-family: "balboa-plus-fill",sans-serif; text-align: center; line-height: 15px;}
.h1 orange {color: #e4883b; }

.outer {width: 100%; height: 500px;}
.inner {width: 1024px; height: 500px; margin: auto; }

header {animation-delay: 2s; }
.one {animation-delay: .5s;}
.two {animation-delay: .6s;}
.three {animation-delay: .7s;}
.four {animation-delay: .8s;}
.five {animation-delay: .9s;}

.separator {text-align: center; margin: auto; padding-top: 40px; padding-bottom: 10px; box-sizing: border-box; }

#aboutus {padding-top: 20px; }

.outerabout {width: 100%; height: 660px; background-image: url(images/Wreckless_DimWrecklessText.png); background-position: center; background-repeat: no-repeat; margin: auto; text-align: center; }



button {
  position: relative;
  //display:block;
  height: 45px;
  width: 150px;
  margin: 10px 7px;
  padding: 5px 5px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #e4883b;
  border: 2px #e4883b solid;
  border-radius: 4px;
  text-transform: uppercase;
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition:         0.08s ease-in;
  -o-transition:      0.08s ease-in;
  -ms-transition:     0.08s ease-in;
  -moz-transition:    0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.fill:hover {
  color: whitesmoke;
}

.fill:before {
  content: "";
  position: absolute;
  background: #e4883b;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -1;
  -webkit-transition: top 0.09s ease-in;
}

.fill:hover:before {
  top: 0;
}

.productsouter {width: 1024px; height: 1370px; margin: auto; }

#ourproducts {width: 1024px; height: 500px; margin: auto; }

.skater {background-image: url(images/Wreckless_SkaterImg.png); width:560px; height: 537px;  float:left;}
.productsheadline {height: 530px; margin:auto; text-align: center; width:450px;  float:right; }

.productsheadline p {width: 400px; text-align: center; margin: auto; }

.separator1 {margin: auto; text-align: center; padding-top: 40px; padding-bottom: 20px; box-sizing: border-box; }

.boards {width: 490px; float: right; padding-right: 50px; }

.stripproducts {float: left;}

.stripandboards {width: 1024px; height: 700px;  margin: auto; }

.ourproduction {width: 1024px; height: 700px; margin: auto; }

.productioncontainer {width: 1024px; height: 587px; margin: auto; clear: both;}

.productionheadline {float: left; box-sizing: border-box}

.productionheadlinecontainer {width: 382px; margin: auto; padding-top: 60px; text-align: left; padding-left: 40px; box-sizing:border-box}

.skateboardpic { float: right; box-sizing: border-box}

.texture {color: #e4883b;}

.texture1 {color: #e4883b; font-weight: 100; }

.parkpic {float: left; padding-top: 120px; box-sizing: border-box; clear: both}

.productionstrip {float: right;  margin-top: -42px;}

#visitus {width: 1024px; height: 800px; margin: auto;}

.visitusheadline {float: right; padding-right: 80px; padding-top: 215px;}

.visitusheadline p {padding-left: 20px; box-sizing: border-box; }

.footer {clear: both;  width: 100%; background-image: url(images/Wreckless_Footer.png); z-index: 1000; box-sizing: border-box; background-repeat: repeat-x; background-position: bottom; }

.footerinner {width: 1024px; margin: auto; }

.graymonster {text-align: center; padding-left: 80px;}
    
.socialmedia {font-size: 8pt; float: left; padding-top: 160px; }

.socialmedia a {padding-left: 18px; }

.socialmedia a:hover {opacity: 0.5;
    filter: alpha(opacity=50); transition: .2s ease-in;}