/*normal fadein animation settings*/
@keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    0%   { opacity:0 }
    100% { opacity:1 }
}

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

/* preload */
.preload{
    font-size: 6vw;
}

.preload img{
    width: 50vw;
    margin-bottom: 10px;
}


/* navbar -----------------------------------------------------------------------------------------------*/
.navigationbararea{
    flex-direction: column;
    height: 100vh;
    width: 80vw;
    transition: 0.8s;
    visibility: hidden;
}


/* when three stroke clicked, become black backgorund */
.navigationbararea.active{
    visibility: visible;
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%);
    transition: 0.8s;
}

.navbar3stroke{
    width: auto;
    display: flex;
    font-size: 8vw;
    color: var(--text);
    padding: 7vw;
    margin-bottom: 2vh;
    background: none;
    border: none;
    text-decoration: none;
    /* must add !important because 
    navbar3stroke is under navigationbararea,
    add !important to 
    override visibility: hidden; in navigationbararea*/
    visibility: visible !important;
}

.navbar3stroke.scrolledtozone2{
    color: #000;
}

.navbar3stroke.scrolledtozone3{
    color: #FFF;
}

.navigationbar{
    opacity: 0;
    left: -100%;
    margin: 0;
    padding: 0;
    justify-content: left;
    transition: 0.8s;
}

.navigationbar.active{
    opacity: 1;
    transition: 0.8s;
}

.navigationbar ul{
    flex-direction: column;
    margin: 0;
    margin-left: 0;
}

.navigationbar ul li{
    margin: 0;
    padding: 0;
    margin-bottom: 3.5vh;
    margin-left: 3vw;
}

.navigationbar ul li a{
    padding: 0;
    margin: 0;
    font-size: 5.5vw;
}

.navigationbararea .display{
    background-color: rgba(255, 255, 255, 0.363);
}


/* zone 2 -----------------------------------------------------------------------------------------------*/
.harrypottersticker{
    height: 100vh;
    flex-direction: column;
}

.harrypottersticker .textbox {
    padding: 6vw;
    width: 90vw;
}

.harrypottersticker .textbox button{
    padding: 2vw;
}

.harrypottersticker .textbox button p{
    font-size: 5vw;
}

.harrypottersticker .holdingphone img{
    width: 70vw;
}

/* zone 3 -----------------------------------------------------------------------------------------------*/
.dragonball{
    height: 60vh;
}

.dragonball .textbox {
    padding: 6vw;
}

.dragonball .textbox button{
    padding: 2vw;
}

.dragonball .textbox button p{
    font-size: 5vw;
}

/* zone 4 -----------------------------------------------------------------------------------------------*/
.socialmedia{
    height: 40vh;
}

.socialmediatitle{
    margin-bottom: 0;
}

.socialmediatitle h1{
    font-size: 17vw;
}

.socialmedia .sm{
    margin-top: 3vh;
    width: 20vw;
    height: 20vw;
}

.slider{
    width: 20vw;
    height: 20vw;
}


/* zone 5 -----------------------------------------------------------------------------------------------*/
.bibleverse{
    height: 50vh;
}

.bibleverse .verse{
    max-width: 100vw;
    background-color: rgba(255, 255, 255, 0.26);
    padding: 4vw;
}

.bibleverse .verse p{
    font-size: 8vw;
}


/* zone 12345.. -----------------------------------------------------------------------------------------------*/
.textbox{
    max-width: 80vw;
}
    
.textbox h2{
    font-size: 11vw;
    overflow-wrap: break-word;
}

.textbox p{
    font-size: 5vw;
    overflow-wrap: break-word;
}


/* contact us -----------------------------------------------------------------------------------------------*/
.contact-us h1{
    font-size: 13vw;
}

.contact-us h2{
    font-size: 5vw;
    margin: 0;
}


.contact-us .form-control{
    width: 80vw;
    font-size: 3vw;
}

.contact-us .submit{
    font-size: 5vw;
}


}