@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');

/* === Small CSS Reset === */
*{
    margin: 0;
    padding: 0;
}
*, *::after, *::before{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* ****** GENERAL STYLES ****** */
html {
    scroll-behavior: smooth;
}

.belowNavigation{
    padding-top:160px;
}

.siteTitle{
    font-family: source-code-pro, monospace;
    font-size: 45px;
    margin:0 0 10px 30px;
}

.descriptionText{
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    margin-left:30px;
    padding-bottom: 30px;
/*     width:95%; */
}

button{
    background: black;
    color:white;
    margin:30px 0;
    padding: 10px 15px;
    font-family: source-code-pro, monospace;
    font-size: 20px;
    border: none;
}
button:hover{
    background: #333333;
    color:white;
}


/************************* SITE ELEMENT STYLES FOR EVERY PAGE  - nav & footer - see BELOW **************************/
/******* NAVIGATION ****** */

nav{
    position:fixed;
    z-index: 99999;
    background:#ffffff;
    width: 100%;
}

nav ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-shadow:  0 2px 2px -2px rgba(0,0,0,0.2);
            box-shadow:  0 2px 2px -2px rgba(0,0,0,0.2);
}

nav ul li{
    list-style-type: none;
    color: black;
    width:210px;
}

.navLinks{
    color: black;
    font-family: source-code-pro, monospace;
    font-weight: 600;
    font-size:20px;
    font-style: normal;
    text-decoration: none;display: block;
    text-align: center;
    padding: 47px 30px 52px 30px;
}

.navLinks:hover{
    background: #333;
    color:#ffffff;
}

.currentLink{
    border-bottom: 3px solid #000000;
}

#logo{
    width: 150px;
    margin: 20px 30px !important;
}



/******* FOOTER *******/
footer{
    background-color:#000000;
    padding:30px;
    color: #ffffff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-family: 'Lato', sans-serif;
    font-size:20px;
    -webkit-box-shadow:  0px -7px 10px -2px rgba(0,0,0,0.2) ;
            box-shadow:  0px -7px 10px -2px rgba(0,0,0,0.2) ;
}

/*make general i selector?*/
footer i{
    font-size:40px;
}

footer a:visited{
    color: white !important;
    text-decoration: none;
}
footer a:link{
    color: white !important;
    text-decoration: none;
}
#footerLinks{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 55%;
}

footer > #footerLinks > div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size:20px;
}
#scrollToTheTop #arrow2Top{
    padding-left:15px;
}


/*******************************************************************************************/
/******************************** SITE SPECIFIC STYLES BELOW *******************************/

/******* HOME site *******/

/******* HEADER *******/
header{
    background: -webkit-gradient(
                     linear, 
                     left top, left bottom, 
                     from(rgba(20,20,20, .3)), 
                     to(rgba(20,20,20, .3))), /* one little exception of colorshema, well it's still in a grey tone.. */
                     url('../images/headerimage_selfmade.jpg');
    background: linear-gradient(
                     rgba(20,20,20, .3), 
                     rgba(20,20,20, .3)), /* one little exception of colorshema, well it's still in a grey tone.. */
                     url('../images/headerimage_selfmade.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#innerHeader{
    padding: 200px 0 400px 0;
}

#innerHeader h1{
    font-family: 'shadows-into-light', cursive;
    text-align: center;
    color: white;
    font-size: 80px;
    max-width:1100px;
}

/* ----------- ADVANTAGES Section ------------ */
#advantages{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    background: #eee;
    -webkit-box-shadow:  0px 10px 10px -2px rgba(0,0,0,0.2) inset;
            box-shadow:  0px 10px 10px -2px rgba(0,0,0,0.2) inset;
}

#advantages div{
    min-width:220px;
    width:500px;
    text-align: center;
    margin:100px 70px 120px 70px;
}

#advantages i{
    font-size: 120px;
    color: #333;
    margin-bottom: 20px;
}

#advantages h2{
    margin-bottom: 10px;
    margin-top: 10px;  
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

#advantages p{
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    text-align: center;
    color: #333;
    padding-top:10px;
}/**/

#fishtail_board_icon{
    min-width:100%;
    min-height:170px;
}


/* ----------- INFOPART ------------*/
/* 50% Image, 50% Text containers */
#infoparts{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#infoparts .items{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}

/* First infopart container has a shadow on top to seperate from other content */
#infoparts .items:nth-child(1) {
    -webkit-box-shadow:  0px -10px 10px -2px rgba(0,0,0,0.2) ;
            box-shadow:  0px -10px 10px -2px rgba(0,0,0,0.2) ;
}

/* Second infopart container is row reverse so that the image is on the other side */
/* and it has a shadow at the bottom to seperate from other content*/
.items:nth-child(even){
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-shadow:  0 10px 10px -2px rgba(0,0,0,0.2);
            box-shadow:  0 10px 10px -2px rgba(0,0,0,0.2);
}

.items .item_text{
    width:50%;
}

.item_text h2{
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 .5rem 0;    
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.item_text{
    padding:10% 7%;
}

.item_text p{
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    padding: 10px 0 30px 0;  
    color:#7a7a7a; /* one little exception of colorshema, well it's still in a grey tone.. */
}

.item_text a{
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    padding-bottom: 30px;
    color: #333333;
}

/* little hover effect on links to other sites */
.item_text a:hover{
    color: #000000;
}

.items .item_image_1, .items  .item_image_2, .items  .item_image_3{
    min-height:30rem;
    width:50%;
}

.item_image_1{
    background: url(../images/workshop.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.item_image_2{
    background: url(../images/skateboard_shapes/all_shapes_sideBySide.png) no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #eee;
}
.item_image_3{
    background: url(../images/me.png) no-repeat;
    background-size: contain;
    background-position: center;
}




/******* WORKSHOPS Site ****** */
#aboutWorkshops{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}

/* #aboutWorkshops .description{
    width: 100%;
}
 */
#aboutWorkshops .description{
    width: 65%;
}

#aboutWorkshops i{
    font-size: 100px;
    color: #333;
    position: absolute; /* for postitioning inside the price box */
    top: 30%;
    padding-left: 30px;
}

/* SLIDER - Skateboard Shapes Presentation  */
/* Slider ONLY displayed in Mobile version - see media queries max-width 480 mobile */
.sliderSkateboardShapes{
    display: none;
    overflow: hidden;
    width:300px;
    height: 450px;
    position: relative;
    margin:0 auto;
}
.sliderSkateboardShapes .slideImages{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.sliderSkateboardShapes .slideImages > img{
    width:300px;
    height: 450px;
}

/* Slider Buttons */
a.btnPrev, a.btnNext {
    position:absolute;
    top: 40%;
    display: block;
    padding: 10% 4%;
    width: auto;
    height: auto;
    color: white;
    background: rgb(12, 12, 12);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    opacity: 0.7;
    cursor: pointer;
    z-index: 9999;
}

a.btnPrev:hover, a.btnNext:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

a.btnPrev{
    border-radius: 0 10px 10px 0;
}
    
a.btnNext{
    right: 0;
    border-radius: 10px 0 0 10px;
}


/* Slider Autoplay */
.sliderAutoplay{
    display: none;
    margin: 0 auto;
}
.sliderAutoplay .autoplayCheckbox{
    width: 20px;
    height: 20px;
    background-color: red;
    margin-top:30px;
}
.sliderAutoplay label{
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    padding-top:-40px;
}

.price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width:35%;
    margin:100px 100px;
    position: relative;
    -webkit-box-shadow: 0 0 10px;
            box-shadow: 0 0 10px;
    background: #f5f5f5; /* one little exception of colorshema, well it's still in a grey tone.. */
}
.price i{
    text-align: center;
    float: left;
    width: 10%;
}
.price div{
    float: left;
    padding:20px 10px 20px 130px;
    /*background: #f5f5f5;  one little exception of colorshema, well it's still in a grey tone.. */
}
.price div p{
    float: left;
    width: 90%;
    padding-right: 30px;
}

#aboutWorkshops button{
    margin: 0 0 50px 30px; /* overwrites default button margins, otherwise it would be to close to the recent Workshops Section */
}


/* RECENT WORKSHOPS Section */
#recentWorkshops{
    margin-top:50px;
}
#recentWorkshops h2{  /*Title*/
    font-family: source-code-pro, monospace;
    font-weight: 600;
    font-style: normal;
    font-size: 30px;
    padding-left: 30px;
} 
#allRecentWorkshopsContainer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100%;
    padding:20px 0 70px 0;
}
#allRecentWorkshopsContainer .recentWorkshop{
    width: 22%;
    overflow: hidden;
}

#allRecentWorkshopsContainer .recentWorkshop img{
    height: 500px;
    -o-object-fit: fill;
       object-fit: fill;
    display: block;
    margin:0 auto;
}

/* Link Styling */
/* set default link underline color to black */
#allRecentWorkshopsContainer .recentWorkshop a{
    color:black;
}

#allRecentWorkshopsContainer .recentWorkshop h3{
    font-family: source-code-pro, monospace;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    color:black;
    font-size: 25px;
    padding-top:20px;
    color: #333333;
}

/* little hover */
#allRecentWorkshopsContainer .recentWorkshop h3:hover{
    color: #000000;
    font-family: source-code-pro, monospace;
    font-style: normal;
    font-weight: 600;
}


/******* WORKSHOP Gallery Site (Sub Page of Workshop Site) *******/
#galleryContainer{
    width:1000px;
    margin:0 auto;
    margin-bottom:50px;
}

#galleryContainer #bigImagePresentation{
    width: 100%;
    height: 600px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 20px 0;
    background: black;
}

#galleryContainer #bigImage{
    height: 100%;
    margin: 0 auto;
}

/* #galleryContainer #thumbnails{
    display: flex;
    flex-direction: row;
    background: red;
    width:1000px;
    height: 500px;
    justify-content: stretch;
} */

#galleryContainer #thumbnails img{
    height:180px;
}


/******* WORKSHOP DETAIL Site (SUb Page of Workshop Site) *******/
#workshopDetailExampleGallery h2{  /*Title*/
    font-family: source-code-pro, monospace;
    font-weight: 600;
    font-style: normal;
    font-size: 30px;
    padding-left: 30px;
} 
#workshopDetailExampleGallery .workshopDetailRow{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100%;
    padding:20px 0 70px 0;
}
#workshopDetailExampleGallery .workshopDetailRow .workshopGalleryPicture{
    width: 22%;
    overflow: hidden;
}

#workshopDetailExampleGallery .workshopDetailRow .workshopGalleryPicture img{
    height: 500px;
    -o-object-fit: fill;
       object-fit: fill;
    display: block;
    margin:0 auto;
}

#workshopDetailExampleGallery img:hover{
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

#workshopDetailExampleGallery img:hover{
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
}

#workshopDetailExampleGallery .workshopDetailRow .workshopGalleryPicture{
    overflow: hidden;
}




/******* SKATEBOARD SHAPES Site ****** */
#skateboardShapes .descriptionText{
    width:95%;
}

#skateboardShapesContainer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-bottom: 70px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.skateboardShapeBox {
    position: relative;
    overflow: hidden;
    border:3px solid rgb(212, 212, 212);
    width: 400px; /*After responsive Design lessons - remove this size and make it dynamics, for different kind of sizes */
    -webkit-box-shadow:  0 5px 10px -2px rgba(0,0,0,0.2);
            box-shadow:  0 5px 10px -2px rgba(0,0,0,0.2);
    margin: 0 10px 50px 5px;
}

.skateboardShapeBox:hover {
    border:3px solid rgb(37, 37, 37);
    overflow: hidden;
}

.skateboardShapeBox .shapeSketch{
    position: relative;
    float: left;
    width: 400px; /**/
    height: 700px;
}

.shapeWood{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.skateboardShapeBox:hover .shapeWood{
    display: block;
    width: 400px;
    height: 700px;
    -webkit-box-shadow: 0 0 15px 15px rgb(175, 175, 175) inset;
            box-shadow: 0 0 15px 15px rgb(175, 175, 175) inset;
    
    -webkit-animation: fadeInFromNone 1s ease-out;
    animation: fadeInFromNone 1s ease-out;
}

.shapeDescriptionText{
    padding:20px;
    padding-top:730px;
    text-align: center;
    font-family: 'Lato', sans-serif;
}

.shapeDescriptionText h3{
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
    font-size: 25px;
}

.shapeDescriptionText p{
    padding: 10px 0;
    font-size: 18px;
}

/******* ANIMATION: FADE FROM SHAPE SKETCH TO REAL WOOD SKATEBOARD ****** */
@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


/******* SKATEBOARD SHAPES IMAGES (WORKSHOP SITE) ****** */
/******* SK8 SHAPES SKETCHES ****** */
.classicShapeSketch{
    background-image: url('../images/skateboard_shapes/classic_sketch.png') !important;
    background-position: center;
  }

.fishtailShapeSketch{
    background-image: url('../images/skateboard_shapes/fishtail_sketch.png') !important;
    background-position: center;
}

.diamondShapeSketch{
    background-image: url('../images/skateboard_shapes/diamond_sketch.png') !important;
    background-position: center;
}

.roundShapeSketch{
    background-image: url('../images/skateboard_shapes/round_sketch.png') !important;
    background-position: center;
}

/******* SK8 SHAPES WOOD ****** */
.classicShape{
    background-image: url('../images/skateboard_shapes/classic.jpg');
    background-position: center;
    padding-top:300px;
}

.fishtailShape{
    background-image: url('../images/skateboard_shapes/fishtail.jpg');
    background-position: center;
}

.diamondShape{
    background-image: url('../images/skateboard_shapes/diamond.jpg');
    background-position: center;
}

.roundShape{
    background-image: url('../images/skateboard_shapes/round.jpg');
    background-position: center;
 }


 

/******* CONTACT Site *******/
#contact{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
} 

#contact_form{
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    height: 100%;
    background: white;
    padding: 0px 100px 30px 200px;
    margin:50px 50px 50px 0;
    font-family: 'shadows-into-light', cursive;
    font-size: 25px;
}
#contact_form label{
    padding:50px 0 10px 0;
}
#contact_form input{
    border:none;
    border-bottom: 1px solid #bbb;
    height: 40px;
    font-size:22px
}

#contact_form textarea{
    border: 1px solid #bbb;
    outline: none;
    font-size:22px
}

/* Focus effects */
#contact_form input:focus{
    border-bottom: 1px solid #333333 !important;
    outline: none;
}

#contact_form textarea:focus{
    border: 1px solid #333333 !important;
    outline: none;
}

/* Hover effects */
#contact_form input:hover{
    border-bottom: 1px solid #333333 !important;
}

#contact_form textarea:hover{
    border: 1px solid #333333 !important;
}

.notValidInput{
    border: 1px solid red !important;
}

#validationMessages{
    display: none;
    padding:20px;
    margin-top:30px;
    background: rgba(252, 63, 63, 0.4);
}

#contact #aboutMe{
    width: 50%;
} 
  
#aboutMe img{
    width: 100%;
}
#contact #contactForm{
    width: 50%;
}

/* GOOGLE MAP */
.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
}
.map-responsive iframe{
    height:100%;
    width:100%;
    position:absolute; /* map positioning inside the div container */
    left:0;
    top:0;
}




/******* IMPRESSUM Site *******/
#impressum{
    width:70%;
}

#impressum .descriptionText p{
    padding-top:30px;
}








/* NEW STYLES FOR GENERAL COMPONENTS ON MULTIPLE PAGES WHICH ARE FIRST 'DISPLAY: NONE' AND GET VISIBLE THROUGH JS OR RD (other new styles which are modified through JS and RD are found in the particular site section styles) */
/* Responsive Nav only visible at max-width: 900px */
#responsiveNav{
    display: none;
}
#responsiveNav #responsiveToggleLinks{
    display: none;
}
/* Toggle Class for opening and closing - by cicking the burger menu / X */
.responsiveNavVisible{
    display: block !important;
}

/* BACK TO TOP Button */
#backToTop {
    display: none;
    position: fixed;
    z-index: 999;
    bottom: 0;
    right: 0px;
    font-size: 1.2rem;
    background: black;
    color: white;
    height: 45px; /* 200px */
    width: 38px;
    padding: 10px 10px 0;
}
#backToTop .fas {
    font-size: 1.8rem;
    -webkit-transition: .25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: .25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

#backToTop:hover .fas {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    color: #eee;
}


/******************** MEDIA QUERIES  *******************/

/***********************************
CSS goes from Top to bottom, that means:
(Desktop Devices - General styles are above media queries)
Laptop Media queries - max width: 1200px
Tablet and smaller devices Media queries - max width: 900px
Mobile Media queries - max width: 480px *******/


/***  LAPTOP MEDIA QUERIES  ***/
@media screen and (max-width: 1200px){
    
    /* HOME Site responsive styles */
    #innerHeader h1{
        font-family: 'shadows-into-light', cursive;
        text-align: center;
        color: white;
        font-size: 60px !important;
        max-width:1100px;
        padding: 20px;
    }

    #advantages{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: center;
    }
    #advantages div{
        width:100%;
        min-width:220px;
        margin: 50px auto;
        padding:0 50px;
        font-size: 20px;
    }
    #advantages div:nth-child(4){
        margin-bottom: 120px;
    }

    #advantages i{
        font-size: 120px;
        margin:50px 0 20px 0;
    }

    #fishtail_board_icon{
        min-width:50px;
        max-height:270px;
    }

    /* WORKSOPS Site (workshops.html) */
    #aboutWorkshops{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #aboutWorkshops .description{
        width:90%;
    }
    #aboutWorkshops .price{
        width:70%;
        margin: 30px 100px 120px 100px;
        position: relative;
    }
    #allRecentWorkshopsContainer .recentWorkshop h3{
        font-size:20px;
    }
    
    #contact{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #contact #aboutMe{
        width: 100%;
        padding-right: 15px;
    }
    #contact #contact_form{
        width: 100%;
        padding: 0px 50px 30px 50px
    }

    /* WORKSHOP Gallery Site - Gallery (workshops_gallery.html)  */
    #galleryContainer{
        width:100%;
        padding:30px 10px;
    }
    #galleryContainer #bigImagePresentation{
        height:500px;
    }
    #galleryContainer #thumbnails > img{
        height:150px;
    }
}



/***  TABLET AND SMALLER DEVICES MEDIA QUERIES - STYLES FOR MAX-WIDTH 900PX ***/
/***  BURGERMENU IS VISIBLE HERE ***/
@media screen and (max-width: 900px) {
    
    /* GENERAL SITE STYLE (USED ON MORE PAGES) */

    /* BURGERMENU NAVIGATION - make it visible, and stylings here */
    nav{
        -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
                box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2)
    }
    nav > ul:first-of-type { /* hides first Navigation which is meant for bigger screen */
        display: none;  
    }

    #responsiveNav{
        display: block;
        background-color: rgba(255, 255, 255, 0.5);
    }

    #burgermenu{
        float:right;
        margin:10px 20px;
    }

    #burgermenu i{
        font-size: 30px;
        float:right;
    }

    #responsiveToggleLinks ul{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width:100%;
    }

    #responsiveToggleLinks ul li {
        width: 100%;
        padding:5px;
    }
    /* Last Link has some more space at the bottom, otherwise it looks ugly.. */
    #responsiveToggleLinks ul li:last-of-type{
        margin-bottom:20px;
    }
    
    .responsiveNavLinks{
        color: black;
        font-family: source-code-pro, monospace;
        font-weight: 600;
        font-size:20px;
        font-style: normal;
        text-decoration: none;display: block;
        text-align: center;
        padding: 5px 10px;
        margin:0;
    }
    
    /* Done with JS in the end.. + font-size animation
    .responsiveNavLinks:hover{
        background: #333;
        color:#ffffff;
    } */
    
    .currentLink{
        border-bottom: 3px solid #000000;
    }

    /* Spacing for content on page - not that is hidden by the navigation */
    .belowNavigation{
        padding-top:80px
    }
    
    /* GENERAL TEXT STYLES (on all pages) */
    /* Remove below if bigger text wanted */
    h2{
        font-size: 1.7rem !important;
    }
    .siteTitle{
        font-size: 2rem;
        margin: 0 0 10px 20px
    }
    .descriptionText{
        font-size:20px;
        margin:0 20px;
    }

    /* FOOTER styles (small devices) */
    footer span{
        font-size: 15px;
        margin:0px 10px;
    }
    /* footer > span (direct span child of footer) = '© Serial Design 2020'-Text  */
    footer > span{
        padding-right: 60px;
    }
    /*  disabled style - i want keep instagram icon big
    footer i{
        font-size:30px;
    } */

    /* disabled back to top button for mobile devices; to have more space for the Important links like contact and social media */
    footer > #footerLinks > #scrollToTheTop{
        display:none;
    }



    /* HOME Site responsive styles */
    #innerHeader h1{
        font-family: 'shadows-into-light', cursive;
        text-align: center;
        color: white;
        font-size: 50px !important;
        max-width:1100px;
        padding: 20px;
    }

    #advantages{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: center;
    }
    #advantages div{
        width:100%;
        min-width:220px;
        margin: 50px auto;
        padding:0 50px;
        font-size: 20px;
    }
    #advantages div:nth-child(4){
        margin-bottom: 120px;
    }

    #advantages i{
        font-size: 120px;
        margin:50px 0 20px 0;
    }

    #fishtail_board_icon{
        min-width:50px;
        max-height:270px;
    }

    #infoparts .items{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    #infoparts .items .item_text{
        width: 100%;
    }


    /* SkateboardShapes site text fix */ 
    #skateboardShapes .descriptionText{
        padding-right:25px;
        /* width: 85%; */
    }

    .item_text p{
        font-size: 20px;
    }
    .item_text a{
        font-size: 20px;
    }
    /* Remove above if bigger text wanted */
    
    .items .item_image_1, .items  .item_image_2, .items  .item_image_3{
        min-height:30rem;
        width:100%;
    }



    /* CONTACT PAGE  (contact.html) */
    #contact{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #contact #aboutMe{
        width: 100%;
        padding-right: 15px;
    }
    #contact #contact_form{
        width: 100%;
        padding: 0px 50px 30px 50px
    }



    /* WORKSHOPS Site (workshops.html) */
    #aboutWorkshops{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #aboutWorkshops .description{
        width:90%;
    }
    #aboutWorkshops button{
        margin: 0 0 50px 20px;
    }
    #aboutWorkshops .price{
        width:70%;
        margin: 30px 100px 120px 100px;
        position: relative;
    }
    #allRecentWorkshopsContainer .recentWorkshop h3{
        font-size:15px;
    }


    /* WORKSHOP Gallery Site - Gallery (workshops_gallery.html)  */
    #galleryContainer{
        width:100%;
        padding:30px 10px;
    }
    #galleryContainer #bigImagePresentation{
        height:400px;
    }
    #galleryContainer #thumbnails > img{
        height:100px;
    }

}


/***  Mobile Queries (Portrait)  ***
  Usually mobile Screens are between 320px to 479px*/ 
@media screen and (max-width: 480px){

    /* GENEREAL STYLES FOR MOBILE DEVICES (on all pages)*/
    /* FOOTER styles (small devices) */
    footer span{
        font-size: 10px;
    }

    
    /* WORKSHOPS Site (workshops.html) */
    #aboutWorkshops{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    #aboutWorkshops .description{
        width: 100%;
    }
    #recentWorkshops h2{
        padding-left:20px;
    }
    #recentWorkshops #allRecentWorkshopsContainer{
        padding:0;
    }

    /* SLIDER only visible in Mobile version - on big screens users should visit the skateboards.html site, where they see a nice hover effect with real wood of the skateboards*/
    /* Slider Images - make visible */
    .sliderSkateboardShapes{
        display: block;
    }
    /* Slider Autoplay - make it visible */
    .sliderAutoplay{
        display: block;
    }

    /*overrriding box color and shadow for price box (only on bigger screens visible)*/
    .price{
        background:white;
        -webkit-box-shadow: 0 0 0;
                box-shadow: 0 0 0;
        width: 100% !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: 50px 0 !important;
    }
    .price div{
        padding:0;
    }
    #aboutWorkshops i{
        position: relative;
        padding-left:0;
        width:100%;
        margin-top:60px;
        margin-bottom:30px;
    }

    /* Recent Workshops section */
    #allRecentWorkshopsContainer{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #allRecentWorkshopsContainer .recentWorkshop{
        width: 90%;
        margin: 0 auto;
        padding: 40px 0;
    }

    #allRecentWorkshopsContainer .recentWorkshop h3{
        font-size:20px;
    }



    /* SKATEBOARD SHAPES Site (skateboard_shapes.html) */
    #skateboardShapes .descriptionText{
        width: 90%;
        padding-right:10px;
    }
    .skateboardShapeBox .shapeSketch{
        width: 100%;
    }
    /* In Mobile Version there is no Hover effect for this intended, so .shapeWood doesnt have to be adjusted  */
    .shapeDescriptionText{
        padding-top: 10px;
    }


    /*CONTACT Site (contact.html) */
    #contact_form #validationMessages{
        font-size:17px;
    }

}