/*Original Font Names*/

@font-face{
    font-family: 'logo'; /*Arvo*/
    src: url(sources/fonts/logo.ttf);
}
@font-face{
    font-family: 'text'; /*Lato*/
    src: url(sources/fonts/text.ttf);
}
@font-face{
    font-family: 'title'; /*Calluna-SemiBold*/
    src: url(sources/fonts/title.otf);

}
body{
    margin: 0;
}

img{
    display: block;
}

#bg1{
    background-image: url(sources/images/Wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
    background-attachment: fixed;
    background-position: center;
}

#bg2, #bg3, #bg4{
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    background-attachment: fixed;
    background-position: center;
    transition: all 2s ease;
}

#bg2 img, #bg3 img, #bg4 img{
    display: none;
}

#bg2{
    background-image: url(sources/images/Street_Art_01_bw.jpg);
}

#bg2:hover{
    background-image: url(sources/images/Street_Art_01.jpg);
    height: 800px;
    transition-delay: 0.5s;
}

#bg3{
    background-image: url(sources/images/Street_Art_02_bw.jpg);
}

#bg3:hover{
    background-image: url(sources/images/Street_Art_02.jpg);
    height: 800px;
    transition-delay: 0.5s;
}

#bg4{
    background-image: url(sources/images/Street_Art_03_bw.jpg);
}

#bg4:hover{
    background-image: url(sources/images/Street_Art_03.jpg);
    height: 800px;
    transition-delay: 0.5s;
}

/*HAMBURGER MENU*/

.hamb{
    width: 40px;
    margin: 10px;
    margin-top: 22px;
    position: fixed;
    right: 15px;
    z-index: 10;
    cursor: pointer;
}

.cross{
    display: none;
    width: 35px;
    margin: 10px;
    margin-top: 22px;
    position: fixed;
    right: 15px;
    z-index: 10;
    cursor: pointer;
}

nav {
    display: none;
    background-color: black;
    width: 300px;
    height: 100%;
    right: 0;
    top: 0;
    position: fixed;
}

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul:first-child{
    margin-top: 25%;
}

li{
    padding-left: 5%;
    transition: all 0.5s ease;

}

li:hover {
    background-color: white;
}

a {
    display: block;
    font-family: 'logo';
    font-size: 1.5vw;
    color: white;
    padding: 16px;
    text-decoration: none;
    transition: color 0.5s ease;
}

a:hover{
    color: black;
}

/*HAMBURGER MENU*/

header{
    display: flex;
    justify-content:flex-start;
    align-items: baseline;
    margin-top: -4px;
}

h1{
    padding-left: 1%;
    font-size: 33px;
    font-family: title;
    color: white;
    text-decoration: none;
    letter-spacing: 1.5px;
    font-weight: 200;
    text-shadow: 1px 1px black;
    width: 100%;
}

h2{
    font-family: title;
    color: white;
    text-decoration: none;
    text-shadow: 2px 2px black;
    font-size: 39px;
    margin: auto;
    margin-top: 12%;
    text-align: center;
    width: 70%;
    overflow: hidden;
}

#mob-img{
    display: none;
}

main{
    width: 100%;
}

article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    margin: auto;
    background-color: white;
    margin-bottom: 3%;
    margin-top: 3%;
}

article img{
    border-radius: 100%;
}

.block{
    display: flex;
    align-items: center;
}

h3{
    width: 100%;
    margin-bottom: 2%;
    font-family: logo;
    font-size: 45px;
    color: #3FE8CD;
    text-shadow: 1px 1px black;
}

h3:last-of-type{
    margin: 0;
}


p{
    line-height: 1.6;
    font-family: text;
    font-size: 19px;
    color: #2D2A24;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: keep-all;
}

/*STREET*/

#street{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

#bb{
    display: flex;
    margin: 0;
}

#block1{
    margin: 0;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    width: 50%;
}

#block1 p{
    line-height: 1.8;
}

#headline{
    font-size: 25px;
    font-family: logo;
    line-height: 1.4;
}

#block2{
    margin: 0;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    width: 50%;
}

#block2 p{
    line-height: 1.8;
    margin: 2% auto;
}

/*ALICE*/

#alice{
    display: flex;
    flex-direction: column;
}

#block3 p{
    margin: 10px 0;
}

#block3 img{
    height: 350px;
    width: auto;
    margin-left: 3%;
}

#block4{
    flex-direction: row-reverse;
    align-content: center;
    align-items: center;
}

#block4 img{
    height: 350px;
    width: auto;
    margin-right: 10%;
    margin-right: 4%;

}

#block5{
    align-content: center;
    align-items: center;
}

#block5 img{
    height: 350px;
    width: auto;
    margin-left: 3%;
    margin-right: 0;
}

/*BANKSY*/

#banksy{
    display: flex;
    flex-direction: column;
}

#block6{

}

#block6 p{

}

#block6 img{
    height: 350px;
    width: auto;
    margin-left: 4%;
}

#block7{
    flex-direction: row-reverse;
}

#block7 p{

}

#block7 img{
    height: 350px;
    width: auto;
    margin-right: 4%;
}

#block8{
}

#block8 p{

}

#block8 img{
    height: 350px;
    width: auto;
    margin-left: 4%;
}

/*SHEPARD*/

#shepard{
    display: flex;
    flex-direction: column;
}


#block9 img{
    height: 350px;
    width: auto;
    margin-left: 4%;
}

#block10{
    flex-direction: row-reverse;
}

#block10 img{
    height: 350px;
    width: auto;
    margin-right: 4%;
}

#block11 img{
    height: 350px;
    width: auto;
    margin-left: 4%;
}

hr{
    width: 75%;
    border-color: #3FE8CD;
}

.hr-left{
    margin: 50px 0 50px 0;
}

.hr-right{
    margin: 50px 0 50px 25%;
}

.button{
    font-family: logo;
    font-size: 1.5vw;
    text-decoration: none;
    color: #2D2A24;
    align-self: center;
    transition: color 0.5s;
    padding-top: 0;
}

.button:hover{
    color: #7cdeda;
}

/*Animation 1*/

@keyframes enlarge1 {
    from {height: 400px;}
    to {height: 1300px;}
}

@keyframes shrink1 {
    from {height: 1300px;}
    to {height: 400px;}
}

.contentsmall1{
    animation-name: shrink1;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.contentbig1{
    animation-name: enlarge1;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/*Animation 1*/
/*Animation 2*/

@keyframes enlarge2 {
    from {height: 400px;}
    to {height: 1300px;}
}

@keyframes shrink2 {
    from {height: 1300px;}
    to {height: 400px;}
}

.contentsmall2{
    animation-name: shrink2;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.contentbig2{
    animation-name: enlarge2;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/*Animation 2*/
/*Animation 3*/

@keyframes enlarge3 {
    from {height: 400px;}
    to {height: 1300px;}
}

@keyframes shrink3 {
    from {height: 1300px;}
    to {height: 400px;}
}

.contentsmall3{
    animation-name: shrink3;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.contentbig3{
    animation-name: enlarge3;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

/*Animation 3*/

.readmore{
    display:block;
    height: 400px;
    overflow: hidden;
}

/*FOOTER*/

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    bottom: 0;
    padding: 10px 0 10px 0
}

footer img{
    width: 30px;
    margin: auto 5px;
}

footer div{
    display: flex;
}

footer h1{
    font-family: logo;
    padding-left: 0;
    width: 400px;
    font-size: 12px;
}

footer h2{
    font-size: 12px;
    margin: 0px;
}

footer a{
    color: #3FE8CD;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}

footer a:hover{
    color: #3FE8CD;
}

#creds-mobile{
}

footer hr{
    border-color: white;
}

#flogo{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-left: 3%;
    margin-right: 4%;
}

#logos{
    margin-right: 10px;
}

/*MOBILE SMALL*/

@media only screen
    and (max-width:330px){

        #bg1{
            background-image: url(sources/images/Wallpaper_Mobile.jpg);
            background-size: contain;
            background-position: top;
            max-width: 330px;
        }
        
        
        /*ANIMATIONS*/

        /*Animation 1*/

        @keyframes enlarge1 {
            from {height: 200px;}
            to {height: 2100px;}
        }

        @keyframes shrink1 {
            from {height: 2100px;}
            to {height: 200px;}
        }
        /*Animation 1*/
        /*Animation 2*/

        @keyframes enlarge2 {
            from {height: 200px;}
            to {height: 2150px;}
        }

        @keyframes shrink2 {
            from {height: 2150px;}
            to {height: 200px;}
        }
        /*Animation 2*/
        /*Animation 3*/

        @keyframes enlarge3 {
            from {height: 200px;}
            to {height: 2000px;}
        }

        @keyframes shrink3 {
            from {height: 2000px;}
            to {height: 200px;}
        }
        /*Animation 3*/
        /*ANIMATIONS*/
}


/*MOBILE REGULAR*/
@media only screen
    and (min-width:331px)
    and (max-width:380px){

        #bg1{
            background-image: url(sources/images/Wallpaper_Mobile.jpg);
            background-size: contain;
            background-position: top;
            min-width: 331px;
            max-width: 380px;
        }
        
        /*Animation 1*/

        @keyframes enlarge1 {
            from {height: 200px;}
            to {height: 2500px;}
        }

        @keyframes shrink1 {
            from {height: 2500px;}
            to {height: 200px;}
        }
        /*Animation 1*/
        /*Animation 2*/

        @keyframes enlarge2 {
            from {height: 200px;}
            to {height: 2500px;}
        }

        @keyframes shrink2 {
            from {height: 2500px;}
            to {height: 200px;}
        }
        /*Animation 2*/
        /*Animation 3*/

        @keyframes enlarge3 {
            from {height: 200px;}
            to {height: 2360px;}
        }

        @keyframes shrink3 {
            from {height: 2360px;}
            to {height: 200px;}
        }
        /*Animation 3*/

}

/*MOBILE BIG*/
@media only screen
    and (min-width:381px)
    and (max-width:500px){

        #bg1{
            background-image: url(sources/images/Wallpaper_Mobile.jpg);
            background-size: contain;
            background-position: top;
            min-width: 381px;
            max-width: 500px;
        }


        /*Animation 1*/

        @keyframes enlarge1 {
            from {height: 200px;}
            to {height: 2730px;}
        }

        @keyframes shrink1 {
            from {height: 2730px;}
            to {height: 200px;}
        }
        /*Animation 1*/
        /*Animation 2*/

        @keyframes enlarge2 {
            from {height: 200px;}
            to {height: 2800px;}
        }

        @keyframes shrink2 {
            from {height: 2800px;}
            to {height: 200px;}
        }
        /*Animation 2*/
        /*Animation 3*/

        @keyframes enlarge3 {
            from {height: 200px;}
            to {height: 2610px;}
        }

        @keyframes shrink3 {
            from {height: 2610px;}
            to {height: 200px;}
        }
        /*Animation 3*/

}

/*ALL MOBILES*/

@media only screen
    and (max-width:800px){

        main{
            margin-bottom: 0;
        }
        
        
        /*    MENU*/

        .hamb{
            width: 20px;
            margin-top: 22px;
            margin-right: 0;
            position: fixed;
            right: 10px;
            z-index: 10;
            cursor: pointer;
        }

        .cross{
            display: none;
            width: 20px;
            margin: 10px;
            margin-top: 22px;
            position: fixed;
            right: 10px;
            z-index: 10;
            cursor: pointer;
        }

        nav {
            display: none;
            background-color: black;
            width: 200px;
            height: 100%;
            right: 0;
            top: 0;
            position: fixed;
            opacity: 0.9;
        }

        ul {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        ul:first-child{
            margin-top: 25%;
        }

        li{
            padding-left: 5%;
        }

        a {
            display: block;
            font-family: logo;
            font-size: 5vw;
            color: white;
            padding: 16px;
            text-decoration: none;
        }

        a:hover{
            color: black;
        }

        /*    MENU*/

        #bg1{
            background-image: url(sources/images/Wallpaper_Mobile.jpg);
            background-size: contain;
            background-position: top;
            height: 40%;
        }

        #bg2, #bg3, #bg4{
            display: none;
        }

        #bg2:hover, #bg3:hover, #bg4:hover{
            height: 300px;
            background-image: url(sources/images/Blank.jpg);
        }

        #bg2 img, #bg3 img, #bg4 img{
            display: block;
            width: 100%;
        }
        h1{
            font-size: 5vw;
        }

        h2{
            font-size: 4vw;
            margin: 10% auto 20% auto;
            text-shadow: 1px 1px black;
        }

        #bb{
            flex-direction: column;
        }

        #bb div{
            width: 100%;
            margin: auto;
        }

        article{
            width: auto;
            margin-top: 20px;
        }

        article h3{
            margin-bottom: 30px;
            font-size: 8vw;
            width: 100%;
        }

        article p{
            font-size: 4vw;
        }

        article img{
            border-radius: 0;
            height: auto;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        #headline{
            font-size: 4.5vw;
        }

        #block3, #block4, #block5, #block6, #block7, #block8, #block9, #block10, #block11{
            flex-direction: column;
            width: 100%;
        }

        #block3 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        }

        #block4 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        }

        #block5 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        }

        #block6 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        }

        #block7 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        } 

        #block8 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        } 

        #block9 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        }

        #block10 img{
            height: auto;
            width: 100%;
            margin: 10px 0 10px 0;
        }

        #block11 img{
            height: auto;
            width: 100%;
            margin: 10px 0 0 0;
        }

        hr{
            width: 75%;
            border-color: #3FE8CD;
            display: none;
        }

        .hr-left{
            margin: 50px 0 50px 0;
        }

        .hr-right{
            margin: 50px 0 50px 25%;
        }

        #mob-img{
            display: block;
            width: 100%;
        }
        

        /*ALICE*/

        #alice{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        #alice p{
            margin: 2% auto;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 1.7;
        }

        #alice h3{
            margin: 10px 0 10px 10px;
            width: 90%;
        }

        #block3 p{
        }

        #block4{
            align-content: center;
            align-items: center;
        }

        #block5{
            align-content: center;
            align-items: center;
        }

        /*ANIMATIONS*/

        .button{
            font-family: logo;
            font-weight: 600;
            font-size: 4vw;
            text-decoration: none;
            color: #2D2A24;
            align-self: center;
            transition: color 0.5s;
            padding-top: 15px;
        }

        .button:hover{
            color: #2D2A24;
        }

        .readmore{
            display:block;
            height: 200px;
            overflow: hidden;
        }

        /*ANIMATIONS*/

        #banksy p{
            margin: 2% auto;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 1.7;
        }

        #banksy h3{
            margin: 10px 0 10px 10px;
            width: 90%;
        }
        
        #shepard{
            margin-bottom: 0;
        }
        
        #shepard p{
            margin: 2% auto;
            padding-left: 10px;
            padding-right: 10px;
            line-height: 1.7;
        }

        #shepard h3{
            margin: 10px 0 10px 10px;
            width: 90%;
        }
        
        /*FOOTER*/

        footer{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 20px;
            background-color: black;
            bottom: 0;
            width: 100%;
        }

        footer img{
            width: 20px;
        }

        footer div{
            display: flex;
            margin: 0;
        }

        footer h1{
            width: 100%;
            font-family: logo;
            margin-left: 10px;
            font-size: 3vw;
        }

        footer h2{
            font-size: 3vw;
            margin: 0px;
        }

        footer a{
            margin: 0px;
            padding: 0px;
        }

        footer div:first-child{
            left: 10px;
            width: 200px;
        }

        #logos{
            width: 35%;
            margin-right: 0;
        }

        #logos a{
            margin: 0;
        }

        #logos div{
            margin: 0;
            width: 100%;
        }

        #creds-pc{
            display: none;
        }

        #creds-mobile{
            display: block;
        }

        #flogo{
            display: none;
        }

}