/* fonts */
       
       @font-face {
            font-family: 'frijole'; 
            src: url("Frijole-Regular.ttf") format("opentype");
            font-style: normal;
        }
        
        /* paragraph fonts */
        @font-face {
            font-family: 'knewave'; 
            src: url("PottaOne-Regular.ttf") format("opentype");
            font-style: normal;
        }
        
        
        /* colors
        --raisin-black: #231f20ff;
        --international-orange-golden-gate-bridge: #bb4430ff;
        --middle-blue: #7ebdc2ff;
        --medium-champagne: #f3dfa2ff;

        --linen: #efe6ddff;
        */
        
        
        /* general */
        
        html, body {
            margin: 0;
            padding: 0;
        }
        
        body {
            width: 100%;
            height: 100%;
            height: auto;

            background-image: url("bg.jpg");
            background-size: 225%;
            
            font-family: knewave, times;
            font-size: 1em;
            color: #231f20ff;
        }
        
        /* change bg size for big screens */
        @media screen and (min-width: 1030px) {
            body {
                width: 100%;
                height:100%;
                background-size: 100%;
            }
        }
        
        /* text */
        
        h1 {
            margin: 2% 0 8% 0;;
            padding: 0;
            
            font-size: 1.8em;
            line-height: 0.8;
            font-family: frijole;
            color: #bb4430ff;
            color: #f3dfa2ff;
        }
        
        p, a:link, a:visited, a:hover, a:active {
            font-size: 1.2em;
            color: #231f20ff;
            text-decoration: none;
        }
        
        @media screen and (max-width: 1030px) {
            h1 {
                font-size: 2em;
            }
        }
        
        @media screen and (max-width: 1000px) {
            .gifje {
                top: 0%;
            }
        }


        /* header */
        
        #header {
            position: absolute;
            top: 0;
            left: 0%;
            
            width: 80%;
            height: 375px;
            
            margin: 0;
            
            background-image: url('torn-header-2.png');
            background-repeat: no-repeat;
            background-size: 100% 100%
        }

        .gifje-header {
            position: absolute;
            left: -6vw;
            top: -24vh;
            z-index: 1000;
            //width: 20vw;
            height: 50vh;
        }
        
        #header h1, #header h2 {
            position: relative;
            left: 14%;
            top: 6%;
            
            transform: rotate(1deg);
            font-size: 6em;
            color: #bb4430ff;
            text-shadow: 8px 6px #f3dfa2ff;
        }
        
        #header h2 {
            top: 8%;
            margin: 0%;
            padding: 0;
            font-size: 2em;
            font-family: frijole;
            transform: rotate(0.5deg);
        }
        
        @media screen and (max-width: 1400px) {

            #header h1 {
                font-size: 5em;
                left: 14%;
             }
        }
        
       @media screen and (max-width: 1280px) {

             #header h1 {
                font-size: 4em;
                left: 14%;
             }
             
             #header h2 {
                left: 14%;
                font-size: 2em;
             }
         }
         
         @media screen and (max-width: 1000px) {
             #header {
                width: 190%;
                height: 250px;
             }
             
             #header h1 {
                top: 8%;
                left: 2%;                
                font-size: 3em;
             }
             
             #header h2 {
                left: 2%;
                font-size: 1em;
             }
         }

         
         /* main layout - left and right column */
         
        #leftcontainer {
            position: absolute;
            left: 5%;
            top: 30%;
            width: 40%;
        }
        
        @media screen and (max-width: 1000px) {
            #leftcontainer {
                left: 5%;
                top: 25%;
                width: 100%;
            }
        }
        
        
        #container {
            position: absolute;
            left: 55%;
            top: 40%;
            width: 30%;
        }
        
        @media screen and (max-width: 1000px) {
            #container {
                left: 125%;
                top: 45%;
                width: 100%;
            }
        }
        

        /* homepage specifics */
        
        /* textblock */
        .homepage {
            transform: rotate(-0.9deg);
            width: 125%;
        }
        
        .homepage a {
            text-decoration: underline;
        }
        
        /* gescheurd papier */
        .homepage:before{
            content:" ";
            display:block;
            
            position:relative;
            top: -12%;;
            left: 0%;
            //width:144%;
            height: 50px;
            
            background-image:url('torn-border4.png');
            background-size: 100% 100%;
            z-index:1;
}

        .homepage:after{
            content:" ";
            display:block;
            
            position:relative;
            top: 95%;
            left: 0%;
            //width:144%;
            height: 50px;
            
            background-image:url('torn-border3.png');
            background-size: 150% 100%;
        }
        
        .homepage .homepagebox{
            height: auto;
            background-color: #f3dfa2ff;
            padding: 6% 6% 6% 6%;
            padding: 12%;
            //text-align: center;
        }
        
        #helppage {
            width: 100%;
        }

        .homepage .helppagebox{
            background-color: #f3dfa2ff;
            padding: 6%;
            text-align: center;
        }        
        
        .homepage h1 {
            color: #bb4430ff;
        }
        
        .ig {
            margin-top: 10%;
            margin-right: 5%;
            width: 30%;
        }
        
        @media screen and (max-width: 1030px) {
            
            .homepage {
                position: relative;
                width: 90%;
                left: 5%;
            }
            
            .ig {
                width: 80%;
            }
                        
        }
        
        
        .homepagevideo {
            left: 5%;
            transform: rotate(0.9deg);
        }
        
        /* gescheurd papier */
        .homepagevideo:before{
            content:" ";
            display:block;
            
            position:relative;
            top: -12%;;
            left: 0%;
            width:112%;
            height: 50px;
            
            background-image:url('torn-border-2-red.png');
            background-size: 100% 100%;
            z-index:1;
        }

        .homepagevideo:after{
            content:" ";
            display:block;
            
            position:relative;
            top: 95%;
            left: 0%;
            width:112%;
            height: 50px;
            
            background-image:url('torn-border-1-red.png');
            background-size: 150% 100%;
        }
        
        .homepagevideo .homepagevideobox{
            width: 100%;
            height: 50vh;
            background-color: #bb4430ff;
            padding: 6% 6% 6% 6%;
            text-align: center;
        }
        
         .homepagevideo video {
            max-width: 100%;
            max-height: 100%;
            height: auto;
            margin: auto;
        }
        
        
        
        .homepagekaart {
                    transform: rotate(-1.5deg) !important;
        }
        
        .homepagekaart img {
            width: 95%;
        }
        

       @media screen and (max-width: 1000px) {
            
            .homepagevideo {
                width: 80%;
            }
            
            .homepagekaart {
                top: 100% !important;
            }
        }

        
        /* page for finding creatures - blocks */
        
        /* afbeeldingen van creatures */
        #muur {
            position: relative;
            width: 90%;

            transform: rotate(-1.5deg);
        }
        
        /* gescheurd papier */
        #muur:before{
            content:" ";
            display:block;
            
            position:relative;
            top: -12%;;
            left: 0%;
            width:112%;
            height: 50px;
            
            background-image:url('torn-border4.png');
            background-image:url('torn-border-2-red.png');
            background-size: 100% 100%;
            z-index:1;
}

        #muur:after{
            content:" ";
            display:block;
            
            position:relative;
            top: 95%;
            left: 0%;
            width:112%;
            height: 50px;
            
            background-image:url('torn-border3.png');
            background-image:url('torn-border-1-red.png');
            background-size: 150% 100%;
        }
        
        #muur #muurbox{
            width: 100%;
            height: 50vh;
            background-color: #f3dfa2ff; /* yellow */
            background-color: #bb4430ff; /*red*/
            padding: 6% 6% 6% 6%;
            text-align: center;
        }
        
        #muur h1, #muur p {
            color: #f3dfa2ff; /* yellow */
        }
        
        #muur img {
            max-width: 100%;
            max-height: 80%;
            
        }
      
        
        @media screen and (max-width: 1000px) {
            
            #muur {
                width: 94%;
                top: 18%;
            }
            
        }

        
        /* animaties na een gevonden object */
        #animatie {
            width: 90%;
            transform: rotate(-1.5deg);
        }
        
        #animatie:before{
            content:" ";
            display:block;
            
            position:relative;
            top: -12%;;
            left: 0%;
            
            width: 112%;
            height: 50px;
            
            background-image:url('torn-border-2-red.png');
            background-size: 100% 100%;
            z-index:1;
}

        #animatie:after{
            content:" ";
            display:block;
            
            position:relative;
            top: 95%;
            left: 0%;
            
            height: 50px;
            width: 112%;
            
            background-image:url('torn-border-1-red.png');
            background-size: 150% 100%;
        }
        
        #animatie #animatiebox{
            width: 100%;
            height: 50vh;

            background-color: #f3dfa2ff;
            background-color: #bb4430ff; /*red*/
            padding: 6% 6% 6% 6%;
            text-align: center;
        }
        
        #animatie video {
            max-width: 100%;
            max-height: 100%;
            height: auto;
            margin: auto;
        }
        
        
        @media screen and (max-width: 1000px) {
            
            #animatie {
                width: 80%;
            }
            
        }

        
        /* kaart met markers */
        #kaart {
            position: relative;
            
            width: 100%;
            height: 70vh;
            margin: auto;
            transform: rotate(1deg);
        }
        
        /* gescheurd papier */
        #kaart:before{
            content:" ";
            display:block;

            position: relative;
            top: 0%;
            left: 0%;
            width:112%;
            height: 100px;

            background-image:url('torn-border-2-blue.png');
            background-size: 100% 100%;
            z-index:1;
}

        #kaart:after{
            content:" ";
            display:block;
            
            position: relative;
            top: 0%;
            left: 0%;
            height: 50px;
            width:112%;
            
            
            background-image:url('torn-border-1-blue.png');
            background-size: 100% 100%;

        }
        
        #kaart #kaartbox{
            width: 100%;
            height: 100%;
            
            padding: 6% 6% 6% 6%;
            background-color: #7ebdc2ff;
            text-align: center;
        }

        
        #mapid {
            width: 100%;
            height: 85%;
        }
        
        @media screen and (max-width: 1000px) {
            #kaart {
                width: 90%;
            }
        }

        
        /* gedichten */
        
        #gedicht {
            width: 100%;
            height: 30%;
            height: auto;
            margin: 0 0;
            transform: rotate(2.5deg);
        }
        
        /* gescheurd papier */
        #gedicht:before{
            content:" ";
            display:block;
            
            position:relative;
            top: -0%;
            left:0%;
            width:126%;
            height: 50px;
            
            background-image:url('torn-border4.png');
            background-size: 100% 100%;

            z-index:1;
        }

        #gedicht:after{
            content:" ";
            display:block;
            
            position:relative;
            top: 0%;
            width:126%;
            left: 0%;
            height: 50px;
            
            background-image:url('torn-border3.png');
            background-size: 100% 100%;
        }
        
        #gedicht div {
            width: 100%;
            padding: 20% 6% 6% 20%;
            background-color: \; \\#efe6ddff;
            background-color: ; /* red */
            background-color: #f3dfa2ff; /* yellow */
            
        }
        
        #gedicht h1 {
            margin-left: -5%;
            margin-top: -10%;
            transform: rotate(-1deg);
            color: #f3dfa2ff; /* yellow */
            color: #bb4430ff; /* red */
        }
        
        #gedicht p {
            margin-top: 10%;
            color: #f3dfa2ff; /* yellow */
            color: #bb4430ff; /* red */
        }
            
        
        @media screen and (max-width: 1000px) {
            
            #gedicht {
                left: 140%;
                width: 70%;
            }
        }
        
        
        
        /* gifje bij vragen */
        
        .gifje {
            position: absolute;
            top: -15%;
            right: 0;
            width: 50%;
            z-index: 1000;
        }


        /* navigatie */
        
        #navigatie {
            position: absolute;
            top: 4%;
            left: 1%;
            width: 60%;
            height: 100px;
            margin: 0 ;
            z-index: 2000;
        }
        
        #navigatie ul {
            padding: 0;
        }
        
        #navigatie li {
            font-size: 1.5em;
            list-style: none;
        }
        
        #navigatie li:nth-child(2) {
            margin-left: 0.3em;
        }
        
        #navigatie img {
            height: 5vh;
        }
            
         @media screen and (max-width: 1000px) {
             #navigatie {
                top: 14%;
                left: 4%;
             }
             
             #navigatie li {
                float: left;
                //padding-right: 4%;
             }
             
            #navigatie li:nth-child(2) {
                margin-left: 0em;
                margin-top: 0.5em;
            }
         }
        
        
        /* gevonden / volgende knop */
        
        .gevonden, .volgende {
            position: absolute;
            left: 44.5%;
            top: 22.5%;
            
            left: 70%;
            top: 4%;
            
            //width: 30%;
            //width: 50vw;
            //height: auto;
            //height: 50vh;
            cursor: pointer;
            
            z-index: 1999;
            
            border-radius: 25px;
            border-radius: 50%;
        }
        
        .gevonden:hover, .volgende:hover {
            top: 4.5%;
        }
        
        .gevonden img, .volgende img { 
                height: 30vh;
        }
                
        .gevonden p {
            color: #f3dfa2ff;
        }
        
        @media screen and (max-width: 1290px) {
            .gevonden, .volgende {
                top: 4%;
                left: 70%;
              
            }
            
            .gevonden img, .volgende img { 
                //width: 45%;
            }

        }
        
        @media screen and (max-width: 1000px) {
            .gevonden, .volgende {
                top: 2.5%;
                left: 165%;
            }
            
            .gevonden img, .volgende img { 
                //width: 40vw;
            }

        }
        
        @media screen and (max-width: 700px) {
            .gevonden, .volgende {
                top: 2.5%;
                left: 155%;
            }
            
            .gevonden img, .volgende img { 
                //width: 60vw;
            }

        }
        
        
        /* Scorebord mate badges */

        #score {
            width: 100%;
            height: auto%;
            padding: 2%;
            
            font-size: 1.5em;
            text-align: left;
        }
        
       /* gescheurd papier */
        #score:before{
            content:" ";
            display:block;
            
            position:relative;
            top: -12%;;
            left: 0%;
            width:112%;
            height: 50px;
            
            background-image:url('torn-border4.png');
            background-image:url('torn-border-2-red.png');
            background-size: 100% 100%;
            z-index:1;
}

        #score:after{
            content:" ";
            display:block;
            
            position:relative;
            top: 95%;
            left: 0%;
            width:112%;
            height: 50px;
            
            background-image:url('torn-border3.png');
            background-image:url('torn-border-1-red.png');
            background-size: 150% 100%;
        }
        
        #score #scorebox{
            width: 100%;
            height: auto;
            background-color: #f3dfa2ff; /* yellow */
            background-color: #bb4430ff; /*red*/
            padding: 6% 6% 6% 6%;
            text-align: center;
        }
        
        #score p {
            color: #f3dfa2ff;
        }
        
        #score img {
            width: 30%;
            display: none;
        }
        
        
        @media screen and (max-width: 1000px) {
            
            #score, .cbox, #navigatie li, .button  {
                font-size: 1em;
            }
            
            #score {
                top: 150%;
                left: 150%;
                width: 80%;
            }
            
        }