#headr{
    text-align: center;
    vertical-align: middle;
    font-size: 720%;
    width: 50%;
    text-shadow: -10px -6px 6px rgba(0, 0, 0, 0.45);
}

#footer{
    background-color: dimgrey;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    font-size: small;
    color: white;
    text-align: center;
}

#readBlok{
    background-color: white;
    min-height: 750px; /*voorlopig!!!*/
    z-index: 0;
}

body{
    background-image:url(../Images/Urban-Concrete-Wall-Structure-Background-City-1840731.jpg);
    background-repeat: repeat-y;
    background-size:     cover;
}

.logo{
    text-align: left;
    width: 80%;
}

#extralogo{
    text-align: left;
}

#jka{
    width: 120%;
}

#shadow{
    width: 70%;
    opacity: 0.8;
    margin-top: 5%;
    margin-bottom: 5%;
}

#shotokan{
    width: 60%;
    padding-bottom: 2%;
}

#menu{
    background-color: dimgrey;
    left:30px;
    right:-10px;
    padding-top: 1%;
    padding-bottom: 1%;
    z-index: 999999;
}

#menu ul li{
    margin-left: 10px;
    float: left;
}

li .droppy{
    cursor: hand; !important;
}

#dropdown-menu {
    background:dimgrey !important;

}

#menu ul li a {
    display: inline;
    color: white;
}

.red{
    color: red;
}

#myCarousel{
    text-align: right;
    z-index: 1;
    width: 500px;
    margin-top: 10px;
}


.carousel-item{
    text-align: center;
    vertical-align: middle;
    height: 300px;
    width: 500px;
}

.active {
    text-decoration: underline;
    text-underline: black;
}

#menu ul li a:visited{
    background-color: dimgrey;
    color: white;
}

#menu ul li a:hover {
    background-color: #555;
    color: white;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-image:none !important;
}

#video {
    width: 80%;
    margin-top: 10px;
}

#picture {
    width: 100%;
}

@media only screen and (min-width: 65em){
    #picture {
        width: 50%;
    }
}

@media only screen and (max-width: 350px){
    #headr {
        font-size: 150%;
        text-shadow: -5px -3px 3px rgba(0, 0, 0, 0.45);
    }

    .logo{
        margin-left: -80%;
        width: 400%;
        margin-top: 50%;
    }

    #jka{
        width: 450%;
        margin-left: -30px;
    }

    #shotokan{
        width: 200%;
        margin-left: -30px;
    }

    #shadow{
        width: 300%;
        opacity: 0.8;
        margin-top: 80%;
        margin-bottom: 0%;
        vertical-align: middle;
        margin-left: -30px;
    }

    #menu{
        padding-top: 3%;
        padding-bottom: 3%;
    }

    #myCarousel{
        text-align: center;
        margin-left: 5px;
        margin-top: 10px;
        z-index: 1;
        height: 150px;
        width: 250px;
    }

    .carousel-item{
        text-align: center;
        vertical-align: middle;
        height: 150px;
        width: 250px;
    }

}
@media only screen and (min-width: 351px) and (max-width: 30em) {
    #headr {
        font-size: 150%;
        text-shadow: -5px -3px 3px rgba(0, 0, 0, 0.45);
    }

    .logo{
        text-align: left;
        width: 250%;
    }

    #jka{
        width: 330%;
        margin-left: -30px;
    }

    #shotokan{
        width: 200%;
        margin-left: -30px;
    }

    #shadow{
        width: 200%;
        opacity: 0.8;
        margin-top: 20%;
        margin-bottom: 0%;
        vertical-align: middle;
        margin-left: -30px;
    }

    #menu{
        padding-top: 3%;
        padding-bottom: 3%;
    }

    #myCarousel{
        text-align: center;
        margin-left: 25px;
        margin-top: 10px;
        z-index: 1;
        height: 150px;
        width: 250px;
    }

    .carousel-item{
        text-align: center;
        vertical-align: middle;
        height: 150px;
        width: 250px;
    }
}

@media only screen and (min-width: 30em) and (max-width: 35em) {
    #headr {
        font-size: 200%;
        text-shadow: -5px -3px 3px rgba(0, 0, 0, 0.45);
    }

    .logo{
        text-align: left;
        width: 200%;
        margin-top:5px;
    }

    #jka{
        width: 200%;
    }

    #shotokan{
        width: 90%;
    }

    #menu{
        padding-top: 2%;
        padding-bottom: 2%;
    }

    #myCarousel{
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
        z-index: 1;
        height: 200px;
        width: 350px;
    }

    .carousel-item{
        text-align: center;
        vertical-align: middle;
        height: 200px;
        width: 350px;
    }

    #shadow{
        width: 150%;
        opacity: 0.8;
        margin-top: 20%;
        margin-bottom: 0%;
        margin-left: -60px;
        vertical-align: middle;
    }
}

@media only screen and (min-width: 35em) and (max-width: 45em) {
    #headr {
        font-size: 400%;
        text-shadow: -5px -3px 3px rgba(0, 0, 0, 0.45);
    }

    .logo{
        text-align: left;
        width: 150%;
    }

    #jka{
        width: 280%;
        margin-left: -80px;
    }

    #shotokan{
        width: 130%;
        margin-left: -30px;
    }

    #menu{
        padding-top: 2%;
        padding-bottom: 2%;
    }

    #myCarousel{
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
        z-index: 1;
        height: 200px;
        width: 350px;
    }

    .carousel-item{
        text-align: center;
        vertical-align: middle;
        height: 200px;
        width: 350px;
    }

    #shadow{
        width: 160%;
        opacity: 0.8;
        margin-top: 50%;
        margin-bottom: 5%;
        margin-left: -60px;
    }
}

@media only screen and (min-width: 45em) and (max-width: 65em) {
    #headr {
        font-size: 400%;
        text-shadow: -5px -3px 3px rgba(0, 0, 0, 0.45);
    }

    .logo{
        text-align: left;
        width: 150%;
    }

    #jka{
        width: 100%;
        margin-left: 0px;
    }

    #shotokan{
        width: 45%;
        margin-left: 0px;
    }

    #menu{
        padding-top: 2%;
        padding-bottom: 2%;
    }

    #myCarousel{
        text-align: center;
        margin-left: 30px;
        margin-top: 10px;
        z-index: 1;
        height: 200px;
        width: 350px;
    }

    .carousel-item{
        text-align: center;
        vertical-align: middle;
        height: 200px;
        width: 350px;
    }

    #shadow{
        width: 130%;
        opacity: 0.8;
        margin-top: 20%;
        margin-bottom: 5%;
        margin-left: -30px;
        vertical-align: middle;
    }
}

@media only screen and (min-width: 65em) and (max-width: 1400px){
    #headr {
        font-size: 400%;
        text-shadow: -5px -3px 3px rgba(0, 0, 0, 0.45);
    }

    #myCarousel{
        text-align: center;
        margin-left: 400px;
        margin-top: 10px;
        z-index: 1;
        height: 250px;
        width: 400px;
    }

    .carousel-item{
        text-align: center;
        vertical-align: middle;
        height: 250px;
        width: 400px;
    }

}