@charset "UTF-8";
/* CSS Document */

/* ----- Förberedande stilar ----- */

html, body, div, header, nav, main, article, section, aside, footer {
    margin:0; padding:0;
}

header, nav, main, article, section, aside, footer {
    display:block;
} /* För webbläsare utan stöd för HTML5 */

html {
    -webkit-text-size-adjust:100%;
} /* Så att Safari i iPhone inte skalar om texten */

body, html {
    height: 100%;
}

h1{
	font-family: 'Russo One', sans-serif;
	color:#00537c;
	text-transform: uppercase;
	font-size: 1.9em;
	text-align: center;
	letter-spacing: 1px;
	line-height: 1.5em;
	margin-bottom:1em;
}

a{
	text-decoration: none;
}

img{
	vertical-align: middle;
}
header{
	height: 40px;
    background-color: #00537c; /* For browsers that do not support gradients */
    background-image: linear-gradient(to left, #00537c , #003b59); /* Standard syntax (must be last) */
	
} 
/* The hero image */
.hero-image {
	clear: both;
	  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("img/broson_backgrund_3500px.jpg");
	  height: 100%;
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: cover;
	  position: relative;
}

.hero-text {
  	max-width: 1200px;
	width: 100%;
 	 text-align: center;
	 position: absolute;
 	 top: 15%;
  	 left: 50%;
  	 transform: translate(-50%, -50%);
}
#wheels, #steel{
	width:49%;
	float: left;
}
#wheels{
	border-right: 2px solid #00537c;
}
.img{
	max-width:320px;
	width:100%;
	margin: 0 auto;
}
footer{
	height: 75px;
	background-color: #00537c; /* For browsers that do not support gradients */
    background-image: linear-gradient(to left, #00537c , #003b59); /* Standard syntax (must be last) */
	max-width: 100%;
   	width: 100%;
}

@media screen and (max-width: 2000px){
    .hero-image {
	  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("img/broson_backgrund_2000px.jpg");
    }
}
@media screen and (max-width: 1500px){
    .hero-image {
	  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("img/broson_backgrund_1500px.jpg");
    }
}
@media screen and (max-width: 1000px){
    .hero-image {
	  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("img/broson_web_staende_1000px.jpg");
    }
    #wheels, #steel{
	width:100%;
	float: left;
}
    #wheels{
        margin-top:230px;
        border-right: 0;
    }
    #wheels img:nth-child(1){
        padding-bottom:40px;
        border-bottom: 2px solid #00537c;
    }
    #steel{
        margin-top:40px;
    }
}