body { /*background-color: #111700;
	/*background: #000 url("imgs/bunnyDragon_website.gif")  no-repeat fixed center; */
		background-size: 100% 100%;
		margin: 0;
		padding: 0;
		width: 90%;
		animation: animate 20s infinite;}

@keyframes animate {
	0% {background-color: #10210E;
	}
	50% {background-color: #000;
	}
	100% {background-color: #10210E}
}

.EGOBBbackground {background: url("imgs/imgs_20212022/EGOBB.png") no-repeat center center fixed;
	 background-size: 100%;
					color: #333300;}
.Nikebackground {background: url("imgs/imgs_20212022/NikeCrewLove.jpg") no-repeat center center fixed;
	 background-size: 100%;
					color: #333300;}

.wotwbackground {background: url("imgs/imgs_2024/wotw_001.jpeg") no-repeat center center fixed;
	 background-size: 100%;
					color: #333300;}

.centreDiv {  max-width: fit-content;
  margin-inline: auto;}


.logo {width:200px;
		
		margin: 0 auto;
		margin:20px;

		}
		
.logo img:hover { -moz-box-shadow: 0 0 50px #E9967A;
-webkit-box-shadow: 0 0 50px #2BFB00;
	box-shadow: 0px 0px 50px #2BFB00;}

.menu {
		width: 100%;
		float: left;
		top: 10%;}




.work {float: left;
		padding-left: 10%;
		font-family: 'Germania One', cursive;
		color: #fff;
		font-size: 3em;}

.workactive {float: left;
		padding-left: 10%;
		font-family: 'Germania One', cursive;
		color: #fff;
		font-size: 3em;}

.workactive a {text-decoration: none;
		color: #2BFB00;
		-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;
text-shadow: 2px 2px 5px #2BFB00;
-webkit-text-shadow: 2px 2px 10px #2BFB00;}

.workactive a:hover {	color: #2BFB00;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;
text-shadow: 2px 2px 5px white;
-webkit-text-shadow: 2px 2px 5px white;}

.work a {text-decoration: none;
		color: transparent;
		-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;}

.work a:hover {	color: transparent;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;
text-shadow: 2px 2px 5px white;
-webkit-text-shadow: 2px 2px 5px white;}

.objagency {float: left;
		padding-left: 10%;
		font-family: 'Germania One', cursive;
		color: #fff;
		font-size: 2.5em;}

.objagency a {text-decoration: none;
		color: transparent;
		-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;}

.objagency a:hover {	color: transparent;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ff3300;
text-shadow: 2px 2px 5px white;
-webkit-text-shadow: 2px 2px 5px white;}

.active {
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;}

.about {float: right;
		padding-right: 10%;
		font-family: 'Germania One', cursive;
		color: #fff;
		font-size: 3em;

		}

.about a {text-decoration: none;
		color: transparent;
		-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;}

.about a:hover {	color: transparent;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;
text-shadow: 2px 2px 5px white;}

.aboutactive {float: right;
		padding-right: 10%;
		font-family: 'Germania One', cursive;
		color: #fff;
		font-size: 3em;

		}

.aboutactive a {text-decoration: none;
		color: #2BFB00;
		-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;
-webkit-text-shadow: 2px 2px 10px #2BFB00;}

.aboutactive a:hover {	color: #2BFB00;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;
text-shadow: 2px 2px 5px white;}

.projects {width: 100%;

}

.projects a {position:absolute;
	text-decoration: none;
	color: transparent;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #ff3300;}

.projects a:hover {	
	color: #52FF3F;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #fff;}

.projects a:visited {text-decoration: none;
	color: #fff;
}

.textdescrip {
	position: relative;
			top: 30%;
	font-family: 'Germania One', cursive;
		color: #397600;
		font-size: 1em;
}

.textdescrip a {
			top: 30%;
	font-family: 'Germania One', cursive;
		color: transparent;
	-webkit-text-stroke-width: 0.3px;
	-webkit-text-stroke-color: #fff;
		font-size: 1.5em;
}

.textdescrip a:hover {
			top: 30%;
	font-family: 'Germania One', cursive;
		color: transparent;
	-webkit-text-stroke-width: 0.3px;
	-webkit-text-stroke-color: #2BFB00;
		font-size: 1.5em;
}

#sueZuki {position:absolute;
		-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		left:10%;
		top: 70%;
		font-size: 2vw;
}


#tenkaipalm {position:absolute;
		-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		left:20%;
		top: 70%;
		font-size: 2vw;
}


#sonica {position:absolute;
		-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		left:30%;
		top: 70%;
		font-size: 2vw;
}



#oh141 {-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		position:absolute;
		left:40%;
		top: 70%;
		font-size: 2vw;
}

#opera {-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		position:absolute;
		left:50%;
		top: 70%;
		font-size: 2vw;
}

#hottowel {	-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		position:absolute;
		left:60%;
		top: 70%;
		font-size: 2vw;
}


		



#lylo {position:absolute;
		-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		left:70%;
		top: 70%;
		color: #fff;
		font-size: 2vw;
}

#europia {position:absolute;
		-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */
		left:80%;
		top: 70%;
		color: #fff;
		font-size: 2vw;
}

#temple {position:absolute;
		left:90%;
		top: 70%;
		color: #fff;
		font-size: 2vw;
		-ms-transform: rotate(-90deg); /* IE 9 */
	    -webkit-transform: rotate(-90deg); /* Safari */
	    transform: rotate(-90deg); /* Standard syntax */

}



.contentabout {position: absolute;
			margin: 0 auto !important;
			width: 100%;
			top: 50%;
			}
.content {position: absolute;
			margin: 0 auto !important;
	
			width: 100%;
			top: 40%;
			}

.contentimg {
			max-width: 100%;}

.contentimgBDE {
			max-width: 700px;
			}

.contentimgsonica {width: 400px;
			max-width: 100%;}

.indexvideo {max-width:100%;
			}

.Startpage {padding-top: 10%;
			width: 50%;
			max-width: 50%;
			padding-left: 20%;
			margin: auto;}

.skewed {color: #52FF3F;
		font-family: 'Germania One', cursive;
		-webkit-transform: rotateZ(-45deg); /* Safari */
    	transform: rotateZ(-45deg); /* Standard syntax */
    	font-size: 3em;
		}

.skewed a {text-decoration: none;
		color: transparent;
		-webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #FD5F00;}

.skewed a:hover {	color: transparent;
	
	text-shadow: 2px 2px 50px white;}

.skewed a:visited {color: transparent;}

.floatLeft {position: fixed;
			left: 0%;
			z-index: -999;
			max-width: 100%;}

.descriptor {float: none;
			position: static;
			margin: 60px 0 20px 0;
			
			/*color: #fff;*/
			font-size: 3vw;
			font-family: 'Germania One', cursive;


			animation: texts 20s infinite;}

@keyframes texts {
	0% {color: #000;
	}
	50% {color: #2BFB00;
	}
	100% {color: #000}
	}
.descriptor a {text-decoration: none;
	color: transparent;

	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;}

.descriptor a:hover {text-decoration: none;
	color: transparent;
	
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #fff;}



@media only screen and (max-width : 1981px ){
    /* For mobile phones: */
.menu {width: 100%;}

.about {
        font-size: 2em;
        float: right;
    }

 .work {font-size: 2em;
 		float: left;}

 .work .active {color: transparent;
	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #2BFB00;}

.projects {position:absolute;
			margin-top: 10%;
			width: 100%;
			font-size: 50px;}

.content {margin-top:70%;}

.descriptor {
			width: 100%;
			font-size: 20px;
			}

.contentimg {top: 30%;
			padding: 10%;}

.contentimgeuropia {padding: 10%;
					max-width: 100%;}

#sueZuki {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:20%;
		font-size: 30px;
}


#tenkaipalm {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:40%;
		font-size: 30px;
}


#sonica {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:60%;
		font-size: 30px;
}


#oh141 {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:80%;
		font-size: 30px;
}

#opera {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:110%;
		font-size: 30px;
}

#hottowel {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:140%;
		font-size: 30px;
}


		



#lylo {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:170%;
		font-size: 30px;
}

#europia {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:200%;
		font-size: 30px;
}

#temple {-ms-transform: rotate(0deg); /* IE 9 */
	    -webkit-transform: rotate(0deg); /* Safari */
	    transform: rotate(0deg); /* Standard syntax */
		left:30%;
		top:230%;
		font-size: 30px;

}


 #sonica a:visited {color: #000;
 	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #FD5F00;}

 #oh141 a:visited {color: #000;
 	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #FD5F00;}

 #opera a:visited {color: #000;
 	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #FD5F00;}

 #hottowel a:visited {color: #000;
 	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #FD5F00;}

 #lylo a:visited {color: #000;
 	-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #FD5F00;}

}

/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Original image */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}
/* Original text overlay */
.overlay-image .text {
 color: #2BFB00;
 font-family: 'Germania One', cursive;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
}

/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;
	-moz-box-shadow: 0 0 50px #fff;
-webkit-box-shadow: 0 0 50px #fff;
box-shadow: 0px 0px 50px #fff;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
 opacity: 1;
}

/********* Background and text only overlay on hover *******/
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}

@media screen and (min-width: 700px) {

        .contentimg {padding-left: 25%;
			max-width: 100%;}
		.contentimgoh141 {padding-left: 0%;}
		.contentimgeuropia {padding-left: 0%;
							max-width: 100%;}

		.content {top: 30%;}




    }



@media only screen and (max-width: 800px) {
    body {
    	max-width: 100%;
        background-size: 100% 100%;
		animation: animate 20s infinite;
        /*background-image: url("imgs/emerge1.gif");
		background-repeat: no-repeat;
		background-attachment: fixed;
    background-position: center;*/ 
    }
	
}	@keyframes animatesmall {
	0% {background-color: #10210E;
	}
	50% {background-color: #000;
	}
	100% {background-color: #10210E;
	}
}
	
    .Startpage {padding-top: 50%;
			width: 100%;
			max-width: 100%;
			padding-left: 0%;
			margin: auto;}


iframe {max-width: 100%;}

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 50 4px;
	
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 33%; /* IE10 */
    flex: 33%;
    max-width: 33%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;

}

.column img:hover {    border-style: solid;
    border-width: 5px;
    border-color: #FD5F00;}



/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}