* { 
	margin:0;
	padding:0;
}

body{
    background-color:#ce2818;
    font-family: 'Montserrat', sans-serif;
    text-align:center;
}

h1{
    color:#d12605;
    text-shadow: 0 4px 0 #630801;
    font-size:60px;
    text-transform:uppercase;
    margin-bottom:50px;
}

h2{
    transition:0.3s;
    color:#fff;
    font-size:60px;
    text-transform:uppercase;
}

h3{
    transition:0.3s;
    color:#fff;
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:0.2em;
}

h4{
    color:#000;
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:0.2em;
}

#album{
    text-shadow: 0 10px 50px #000;
    position:absolute;
    bottom:50px;
    z-index:25;
    width:550px;
    left:50%;
    margin-left:-275px;
}

#album a{
    text-decoration:none;
}

#album a:hover h3, #album a:hover h2{
    transition:0.2s;
    color:#fdd728;
}

#videos{
    padding:150px;
}

.wrappervideo{
    display:inline-block;
    margin:0 20px;
}

.video{
    transition:0.2s;
    margin:20px auto 50px auto;
    width:300px;
    height:300px;
    border-radius:200px;
    overflow:hidden;
}
.video iframe{
    transition:0.2s;
    margin-top:-50px;
    margin-left:-50px;
}
.video:hover{
    transition:0.2s;
    width:400px;
    transition:0.2s;
    border-radius:0;
}
.video:hover iframe{
    transition:0.2s;
    margin-left:0;
}

#jubile{
    transition:0.2s;
    width:160px;
    height:160px;
    background-image:url('../img/jubile.svg');
    position:absolute;
    top:50px;
    left:50px;
    z-index:10;
}

#jubile:hover{
    transition:0.2s;
    -ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
    transform: rotate(-10deg);
}

#social{
    text-align:center;
    z-index:99;
    height:25px;
    bottom:380px;
    right: 10px
}

#social a{
    display:inline;
    margin:10px;
    opacity:0.7;
}
#social a:hover{
    opacity:1;
}

#facebook{
    background-image:url(../img/fb.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}

#youtube{
    background-image:url(../img/yt.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}

#twitter{
    background-image:url(../img/tw.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}
#instagram{
    background-image:url(../img/ig.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}
#deezer{
    background-image:url(../img/de.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}
#spotify{
    background-image:url(../img/sp.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}
#newsletter{
    background-image:url(../img/nl.svg);
    background-size:cover;
    background-position:center center;
    height:25px;
    width:25px;
    display:inline-block;
}
#header{
    background-color:#ce2818;
    background-image:url(../img/background.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    font-family: 'Montserrat', sans-serif;
    text-align:center;
    position:fixed;
    width:100%;
    height:100%;
    z-index:10;
}

#logo{
    background-image:url(../img/logo.svg);
    width:50%;
    min-width:400px;
    max-width:600px;
    height:500px;
    background-repeat:no-repeat;
    margin: 50px auto 0 auto;
}

#wrapper{
    position:absolute;
    top: calc( 100% - 70px);
    width:100%;
    height:100%;
    z-index:20;
}

#content{
    background-color:#fff;
}
#copyright{
    padding: 20px 0 50px 0;
}
#copyright p{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:#ccc;
}
.scratch{
    background-image:url('../img/scratch.svg');
    background-size:102%;
    height:90px;
    background-position:bottom;
    background-repeat:no-repeat;
}

#tour{
    max-width:700px;
    margin:0 auto;
}








@media screen and (max-height: 750px) {
    #logo{
        width:200px;
        height:150px;
        margin: 10px auto 0 auto;
    }
}
@media screen and (max-width: 750px) {
    #jubile{
        display:none;
    }
    #social{
        display:none;
    }
    #videos{
        padding:150px 0;
    }
    .video{
        transition:0.2s;
        margin:0 auto;
        width:400px;
        height:400px;
        border-radius:0;
        overflow:auto;
    }
    .video iframe{
        transition:0.2s;
        margin-top:0;
        margin-left:0;
    }
    .video:hover{
        transition:0.2s;
        width:400px;
        border-radius:0;
    }
}