/* ____________________________________ Allgemein ____________________________________ */
*{
outline:none;
}

html, body{
width:100%;
height:100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

.center_helper{ 
display: inline-block;
height: 100%;
vertical-align: middle;
}

.center_content{
display: inline-block;
height: auto;
vertical-align: middle;
width: 99%;
}

.clearfix{
clear: both;
}

section{
width: 100%;
}

.link_button{
margin: 60px auto 0px;
background-color: #fa3507;
padding: 15px 0px;
width: 200px;
text-align: center;
font-family: 'Nunito', sans-serif;
font-size: 17px;
letter-spacing: 0px;

font-weight: 300;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.link_button a{
text-decoration: none;
color:#fff;
display: block;
}

.link_button:hover{
-moz-transform: skewX(-20deg) skewY(0deg);
-webkit-transform: skewX(-20deg) skewY(0deg);
-o-transform: skewX(-20deg) skewY(0deg);
-ms-transform: skewX(-20deg) skewY(0deg);
transform: skewX(-20deg) skewY(0deg);
-webkit-border-radius: 0px;
border-radius: 0px;
}

/* ____________________________________ Logo ____________________________________ */
#logo{
position: absolute;
top:50px;
left: 50px;
}

/* ____________________________________ Menu ____________________________________ */
#menu_button{
position: fixed;
width:25px;
height:17px;
top:65.5px;
right: 50px;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 3;
}

.menu_stroke{
width:100%;
height: 1px;
background-color: #fa3507;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.menu_stroke:nth-child(2){
margin: 7px 0px;
}

.menu_stroke_open{
background-color: #fff;
}

.rotate_down{
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top:8px;
}

.rotate_up{
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top:-1px;
}

.fade_out{
display: none;
}

.menu{
position: fixed;
width:340px;
padding: 0px 80px;
height: 100%;
background-color: #fa3507;
top:0px;
right:-500px;
opacity: 0;
z-index: 2;
-webkit-box-shadow: 0px 0px 30px 0px #000000;
box-shadow: 0px 0px 30px 0px #000000;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.menu .center_content{
width: 98%;
}

.menu_open{
right:0px !important;
opacity: 1;
}

.menu a{
display: block;
font-family: 'Nunito', sans-serif;
font-size: 60px;
font-weight: 300;
color: #fff;
opacity: 1;
text-decoration: none;
margin-bottom: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.menu a:hover {
opacity: 0.6;
}

/* ____________________________________ Intro ____________________________________ */
#intro{
height: 100%;
background-image: url(../images/intro/fahrrad_schmidt_intro.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}

#intro_wrapper{
width:700px;
height: 100%;
margin: 0px auto;
position: relative;
}

.intro_content{
position: absolute;
bottom: 15%;
}

#intro_text{
width: 620px;
margin: 0px auto;
}

/* ____________________________________ Bikes ____________________________________ */
#bikes{
width:100%;
padding: 100px 0px;
background-color: #fff;
}

#bikes_headline{
width: 660px;
margin: 0px auto 50px;
}

.bike_col{
padding: 50px 0px 0px;
float: left;
width: 33.333%;
}

.bike_col img{
display: block;
max-width: 60%;
margin: 0px auto;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.bike_col img:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

.bike_col_text{
width: 60%;
margin: 30px auto 0px;
}

.bike_col_text table{
margin-top: 30px;
width: 100%;
}

.bike_col_text tr{
border-bottom: 1px solid #ddd;
}

.bike_col_text tr:last-child{
border-bottom: none;
}

.bike_col_text td{
padding: 8px 0px;
}

.bike_col_text td{
font-family: 'Nunito', sans-serif;
color:#666;
font-size: 15px;
font-weight: 300;
}

.bike_col_text td:first-child{
text-transform: uppercase;
width: 50%;
}

/* ____________________________________ Blog ____________________________________ */
#blog{
width:100%;
}

#blog_img{
position:relative;
}

#blog_img img{
max-width:100%;
display:block;
margin:0px auto;
}

#blog_overlay{
width:100%;
height:100%;
position: absolute;
z-index:1;
background-color: rgba(0,0,0,0.8);
}

#blog_overlay_wrapper{
width:300px;
height: 100%;
margin:0px auto;
}

#blog_overlay_wrapper .center_content{
width: 98%;
}

#blog_overlay_wrapper .center_content .link_button{
margin: 20px auto 0px;
}

/* ____________________________________ Shop ____________________________________ */
#shop{
height: 1000px;
background-color: #000;
}

.shop_50{
float: left;
width: 50%;
height: 100%;
background-size: cover;
}

#shop_50_right{
background-image: url(../images/shop/fahrrad_schmidt_shop_bg.png);
background-size: 50%;
}

#shop_headline{
width: 60%;
height: 100%;
margin: 0px auto;
}

.shop_25_33, .shop_50_33, .shop_16_33{
background-size: cover;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.7;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.shop_25_33:hover, .shop_50_33:hover, .shop_16_33:hover{
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}

.shop_25_33{
float: left;
width: 50%;
height: 33.333%;
background-position: center center;
}

#shop_25_33_left{
background-image: url(../images/shop/fahrrad_schmidt_shop_01.jpg);
}

#shop_25_33_right{
background-image: url(../images/shop/fahrrad_schmidt_shop_02.jpg);
}

.shop_50_33{
width: 100%;
height: 33.333%;
background-image: url(../images/shop/fahrrad_schmidt_shop_03.jpg);
background-position: center 40%;
}

.shop_16_33{
float: left;
width: 33.333%;
height: 33.333%
}

#shop_16_32_left{
background-image: url(../images/shop/fahrrad_schmidt_shop_04.jpg);
background-position: right center;
}

#shop_16_32_middle{
background-image: url(../images/shop/fahrrad_schmidt_shop_05.jpg);
background-position: center center;
}

#shop_16_32_right{
background-image: url(../images/shop/fahrrad_schmidt_shop_06.jpg);
background-position: right center;
}

/* ____________________________________ Map ____________________________________ */
#map{
height: 700px;
}

/* ____________________________________ Kontakt ____________________________________ */
#kontakt{
padding: 100px 0px;
background-color: #fa3507;
}

#kontakt_wrapper{
width: 1000px;
margin: 0px auto;
}

.kontakt_col, .kontakt_col_space{
float: left;
}

.kontakt_col{
width: 30%;
}

.kontakt_col_space{
width: 5%;
}

.kontakt_col td:first-child{
width: 100px;
}

.fb_link{
width: 47px;
height: 47px;
display: inline-block;
background-image: url(../images/kontakt/facebook.svg); 
background-repeat: no-repeat;
background-position: center;
margin-top: 26px;
background-color: #333;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease-out;
}

.fb_link.insta{
margin-left: 10px;
background-image: url(../images/kontakt/instagram.svg);    
}

.fb_link a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}

.fb_link:hover{
-moz-transform: skewX(-20deg) skewY(0deg);
-webkit-transform: skewX(-20deg) skewY(0deg);
-o-transform: skewX(-20deg) skewY(0deg);
-ms-transform: skewX(-20deg) skewY(0deg);
transform: skewX(-20deg) skewY(0deg);
-webkit-border-radius: 0px;
border-radius: 0px;
}

/* ____________________________________ Footer ____________________________________ */
footer{
width:100%;
height: 20px;
background-image: url(../images/shop/fahrrad_schmidt_shop_bg.png);
background-size: 25%;
padding: 30px 0px;
}

#footer_wrapper{
width: 1000px;
margin:0px auto;
}

.footer_col{
float: left;
width: 50%;
}

.footer_col a{
text-decoration: none;
color: #fff;
opacity: 1;
display: inline-block;
margin-left: 30px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.footer_col a:hover{
opacity: 0.6;
}

.footer_col.fr{
text-align: right;
}

/* ____________________________________ Overlay ____________________________________ */
.overlay{
width:100%;
height:100%;
background-color: rgba(0,0,0,0.8);
position: fixed;
z-index: 3;
display:none;
}

.overlay_close{
position: absolute;
top:25px;
right:25px;
cursor: pointer;
}

.overlay_wrapper{
width:600px;
height:90%;
position: relative;
top:5%;
left:50%;
margin-left: -300px;
background-color:#fa3507;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:80px 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.overlay_content{
height:100%;
width:100%;
}

.scroll_content{
padding:0px 100px 0px 50px;
}

.scroll_content a{
text-decoration: none;
color:#fff;
}

.scroll_content a:hover{
text-decoration: underline;
}