:root{
    /* CSS HEX */
--dgreen: #3e5622ff;
--black: #031926ff;
--brown: #502419ff;
--grey: #c4d7f2ff;
--lgreen: #9bc53dff;
--blue: #427aa1ff;
--green: #357266ff;
--wwhite: #fafaffff;
--bwhite: #fbfef9ff;

--dark-lava: #463730ff;
--creme: #fffce8ff;
--vblue: #759fbcff;
--bronze: #b27c66ff;
--vdgreen: #50723cff;
--vgreen: #4d8b31ff;

--nblack: #26292B;
--ngrey: #2E3239;
--nblue1: #5F7ADB;
--nblue2: #A2B2EE;
--nwhite: #fafaffff;

/* CSS HEX */

--nvdblue: #003049ff;
--nvred: #d62828ff;
--nvorange: #f77f00ff;
--nvyellow: #fcbf49ff;
--nvlemon: #eae2b7ff;


}

html{
    width:100%;
    height:100%;
    overflow-x:hidden;

    font-family: 'Bree Serif', serif;
}
body{
  width:100%;
height:100%;
overflow-x:hidden;

font-family: 'Bree Serif', serif;
}

.mobilewrapper{
     overflow-x: hidden;
        position: relative;
    min-height:100vh;
    width:100vw;
    background-color: #031926;
    }


 #sliderbox{
     display:flex;
     flex-direction:row;
     width:300vw;
     transition:0.5s ease-in-out ;
     -webkit-transition:0.5s ease-in-out ;
     -moz-transition:0.5s ease-in-out ;
     -ms-transition:0.5s ease-in-out ;
     -o-transition:0.5s ease-in-out ;
     position:relative;
     top:-5vh;
     flex-wrap: wrap;
}   

 .hider{
     position:absolute;
     visibility:hidden;
     opacity:0;
     transition:none!important ;
     -webkit-transition:none!important ;
     -moz-transition:none!important ;
     -ms-transition:none!important ;
     -o-transition:none!important ;
     top:-1000vh;
}   

.hide{
    position:absolute;
    visibility:hidden;
    opacity:0;
}



.bluebg{
    background-color: var(--dark-lava);
}

.brownbg{
    background-color: #345b22;
}


#backdash{
    position: absolute;
    z-index: 1999;
    top: 25px;
    left: 0px;
    height: 40px;
    right: 0px;
    display: block;
    margin: auto;
}

#backhome{
    color: white;
text-decoration: none;
background-color: transparent;
text-align: center;
margin: 0 auto;
display: block;
background-color: var(--black);
}




@media only screen and (max-width:400px){ 
	#agridiv{
		background-image:url("/photos/voedselbos.png");
	}
    #traveldiv{
        background-image:url("/photos/travels.jpg");
    }  

}


@media only screen and (min-width:401px) and (max-width:600px)  {     
	#agridiv{
		background-image:url("/photos/voedselbos.png");
	}
    #traveldiv{
        background-image:url("/photos/travelsm.jpg");
    }  
}

@media only screen and (min-width:601px) and (max-width:800px)  {     
	#agridiv{
		background-image:url("/photos/agrim.jpg");
	}
    #traveldiv{
        background-image:url("/photos/travelm.jpg");
    }  

    #constructdiv{
        background-image:url("/photos/bamboom.jpg")!important;
    }
}

@media only screen and (min-width:801px) and (max-width:1000px)  {     
	#agridiv{
		background-image:url("/photos/agriml.jpg");
	}
    #traveldiv{
        background-image:url("/photos/travelml.jpg");
    }  
    #constructdiv{
        background-image:url("/photos/bambooml.jpg")!important;
    }
}

@media only screen and (min-width:1001px) and (max-width:1200px)  {     
	#agridiv{
		background-image:url("/photos/agril.jpg");
	}
    #traveldiv{
        background-image:url("/photos/travell.jpg");
    }  
    #constructdiv{
        background-image:url("/photos/bambool.jpg")!important;
    }
}

@media only screen and (min-width:1201px) and (max-width:1400px)  {     
	#agridiv{
		background-image:url("/photos/agrixl.jpg");
	}
    #traveldiv{
        background-image:url("/photos/travelxl.jpg");
    }
    #constructdiv{
        background-image:url("/photos/bambooxl.jpg")!important;
    }  

    #topsliderbox{
        height: 15px!important;
    }
}

@media only screen and (min-width:1401px) {     
	#agridiv{
		background-image:url("/photos/agrixl.jpg");
	}
    #traveldiv{
        background-image:url("/photos/travel.jpg");
    }    
    #constructdiv{
        background-image:url("/photos/bamboo.jpg")!important;
    }

    #topsliderbox{
        height: 15px!important;
    }
}