/* ////////////////// global values /////////////////// */

html{
	margin:0; padding:0;
	background-color: #000000;
	scroll-behavior: smooth;
	/*cursor: pointer;*/
	cursor: url(../data/assets/cursor-01.png), auto !important;
}


body{
	margin: 0;
	overflow: hidden;
	/*overflow-y: hidden;*/
	padding: 0%;
	background-color: #000000;
	/*cursor: pointer;*/
	cursor: url(../data/assets/cursor-01.png), auto !important;
	/*z-index: 1;*/
}

h1{
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	color: #ffffff;
	font-size: 20px;
	position: relative;
}


h2{
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	color: #000000;
	background-color: rgb(150, 150, 255);
	font-size: 20px;
	position: relative;
}

h3{
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	color: #ffffff;
	font-size: 15px;
	/*font-weight: 200;*/
	position: relative;
}


p{
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	color: #ffffff;
	font-size: 15px;
	position: relative;
}


a{
	text-decoration: none;
	color: #ffffff;
	display: block;
	/*background-color: #4B4B4B;*/
	background-color: rgb(0, 0, 0);
	cursor: url(../data/assets/cursor-01.png), auto !important;
}

a.infoL{
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	font-size: 20px;
	color: #ffffff;
	text-decoration: none;
	background-color: rgb(50, 50, 50);
}

a.pageL{
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	/*font-size: 20px;*/
	color: #ffffff;
	text-decoration: none;
	background-color: rgb(50, 50, 50);
}

a.inline, a:hover{
	text-decoration: none;
	color: #000000;
	background-color: #ffffff;
}


a.imgL{
	text-decoration: none;
	display: block;
	background-color: #000000;
}

a.imgL:hover{
	text-decoration: none;
	background-color: #000000;
}


hr.a{
	border-style: none;
  	border-top: thin dotted rgb(255, 255, 255);
}


ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}


li{
	float: left;
	width: 25%;
}


marquee{
	position: fixed;
	width: 88%;
}

marquee.inline{
	position: relative;
	color: #ffffff;
	font-size: 50px;
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	width: 100%;
}

/*.imgFit{
	max-width: 100%;
    max-height: 100vh;
    margin: auto;
}*/

img{
	max-width: 100%;
    max-height: 100vh;
    margin: auto;
    
	/*width: 100%;
	height: auto;*/
    float: right;
}


.iframeCont{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
}

.iframeCont iframe{
	border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

iframe{
	border-style: none;
	position: relative;
	width: 100%;
	height: 50vh;
}

.fullJSCont{
	border-style: none;
	position: relative;
	width: 100%;
	height: 100vh;
}

.contFrame, .js-cont{
	position: fixed;
	overflow: hidden;
	top: 5%;
  	left: 5%;
  	bottom: 5%;
  	right: 5%;
	width: 90%;
	height: 90%;
	border-style: none;
	border: thin dashed rgb(255, 255, 255);
	z-index: 2;
}

.contFrame2{
	position: fixed;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-style: none;
	/*border: thin dashed rgb(255, 255, 255);*/
	z-index: 2;
}

.js-cont{
	z-index: -1;
}


/*::-webkit-scrollbar{
	width: 0;
	height: 0;
}*/

::-webkit-scrollbar {
	height: 20px;

}

::-webkit-scrollbar-thumb {
	background: rgb(150, 150, 255);

}


/* /////////////////////// CUSTOM DIVS ////////////////////// */

#jsCont{
	position: fixed;
}


.imgLink{
	width: 100%;
	border-style: none;
	border: thin dotted rgb(255, 255, 255);
	transition: .2s;
}

.imgLink:hover{
	width: 100%;
	opacity: 0.5;
}


.espace{
	height: 5%;
}

.espace2{
	display: none;
}

.collapsible{
	display: none;
}

.collapsible2{
	padding: 0%;
	border-style: none;
	margin: 0;
	display: block;
	position: relative;
	left: 0;
	float: all;
	width: 100%;
	border: thin dashed white;
	text-align: left;
	font-family: 'Roboto Mono', monospace;
	color: #ffffff;
	font-size: 20px;
	background-color: rgb(50, 50, 50);
	z-index: 1;
}

.header{
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	font-size: 20px;
	position: fixed;
	width: 89.9%;
	border: thin dashed rgb(255, 255, 255);
	z-index: 2;
	background-color: #000000;
	/*float: all;*/
}

.subMenu{
	position: relative;
	font-family: 'Roboto Mono', monospace;
	font-size: 20px;
	/*height: 100%;*/
	/*padding-bottom: 30px;*/

}

.cntrls{
	top: 94%;
	position: fixed;
}


.grid-container{
	display: grid;
	grid-template-columns: 300px auto auto;
	grid-column-gap: 3%;
	grid-row-gap: 3%;
	-webkit-overflow-scrolling: touch;
}

.grid-container2{
	display: grid;
	grid-template-columns: auto 35vw;
	-webkit-overflow-scrolling: touch;
}

.grid-container3{
	display: grid;
	grid-template-columns: 46% auto;
	grid-column-gap: 3%;
	grid-row-gap: 3%;
	-webkit-overflow-scrolling: touch;
}

.grid-container4{
	display: grid;
	grid-template-columns: auto auto auto;
	-webkit-overflow-scrolling: touch;
}


.grid-item{
	height: 100%;
	padding: 10%;
	margin: auto;
}

.imageScroll{
	/*height: 60vw;*/
	display: flex;
	overflow-x: auto;
	overflow-y: scroll;

}

.imageScroll::-webkit-scrollbar {
	/*width: 25px;*/
	height: 20px;

}

.imageScroll::-webkit-scrollbar-thumb {
	background: rgb(150, 150, 255);

}

.scrollImg{
	width: 100vw;
	max-height: 60vh;
	/*height: auto;*/
	text-align: center;
}

.homeCont, .homeCont2{
	float: left;
	display: block;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
	margin: 0;
	position: relative;
	width: 48%;
	height: 100%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

}


.infoCont{
	float: left;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
	margin: 0;
	position: relative;
	width: 25%;
	height: 100%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.infoCont2{
	float: left;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
	margin: 0;
	position: relative;
	width: 25%;
	height: 100%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.infoCont3{
	float: left;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
	margin: 0;
	position: relative;
	width: 34.5%;
	height: 100%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.infoCont4{
	display: none;
}

.mainCont{
	float: left;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
	width: 70.9%;
	height: 100%;
	margin: 0;
	position: relative;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	border-left: thin dashed rgb(255, 255, 255);
}

.fullCont{
	float: left;
	padding-top: 2%;
	padding-left: 1%;
	padding-right: 1%;
	width: 98%;
	height: 100%;
	margin: 0;
	position: relative;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.fullCont2{
	float: left;
	/*padding: 2%;*/
	width: 100%;
	height: 100%;
	margin: 0;
	position: relative;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.subCont{
	display: none;
	padding: 2%;
	margin: 0;
	border-style: none;
	border: thin dashed white;
	/*height: 100%;*/
}

.scrollText{
	position: relative;
	padding: 2%;
	width: 350px;
	min-width: 350px;
	max-width: 350px;
	max-height: 600px;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

.contentDiv{
	position: relative;
	padding: 2%;
	width: 40%;
	overflow: auto;

}

.contentDivL{
	left: 50%;
	position: relative;
	padding: 2%;
	width: 40%;
	overflow: auto;

}


.headLine{
	display: block;
}

img.mob{
	display: none;
}

.collapsible2:hover{
	background-color: #ffffff;
	color: #000000;
}

.spacerDiv{
	position: relative;
	width: 100%;
	height: 10%;
}

/* /////////////////// OUTSOURCED DIVS  ////////////////////// */

/* /////////////////// MEDIUM SCREEN  ////////////////////// */

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

/*.scrollImg{
	max-width: 200vw;
}*/

.imageScroll::-webkit-scrollbar, ::-webkit-scrollbar {
	width: 0px;
	height: 0px;

}

.header{
	width: 99.3%;
}

.headLine{
	display: none;
}

.grid-container{
	grid-template-columns: auto auto;

}

.grid-container2{
	grid-template-columns: auto;
}


.grid-container3{
	grid-row-gap: 5%;
	grid-column-gap: 5%;
}

/*.grid-item{
	padding-bottom: 40px;
}*/


.imgLink{

	width: 100%;
	border-style: none;
	transition: .2s;
}

.imgLink:hover{

	/*width: 99%;*/
	opacity: 0.5;
}

.contFrame, .js-cont{
	position: fixed;
	overflow: hidden;
	top: 0%;
  	left: 0%;
  	bottom: 0%;
  	right: 0%;
	width: 99.5%;
	height: 99.5%;
	border-style: none;
	border: thin dashed rgb(255, 255, 255);
}

.homeCont, .homeCont2{
	float: left;
	float: left;
	padding: 1%;
	top: 20px;
	position: relative;
	/*width: 98%;*/
	height: 100%;
}	

.infoCont{
	float: left;
	padding: 1%;
	top: 20px;
	position: relative;
	width: 40%;
	height: 100%;
	/*display: none;*/
}

.infoCont2, .infoCont3{
	display: none;
}

.infoCont4{
	display: block;
	padding: 1%;
	top: 20px;
	position: relative;
	width: 98%;
	height: 100%;
	overflow-y: : none;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}


.mainCont{
	float: left;
	padding: 1%;
	top: 20px;
	width: 56%;
	height: 100%;
	left: 0;
	position: relative;
	border-style: none;
}

.fullCont{
	float: left;
	position: fixed;
	top: 30px;
	padding-top: 1%;
	width: 98%;
	height: 100%;
}

.scrollText{
	max-height: 450px;
}


marquee{
	position: fixed;
	width: 97%;
}

.espace2{
	display: block;
	height: 5%;
}

.spacerDiv{
	height: 5%;
}


/*.subCont{
	padding-top: 40px;
	display: block;
}*/


img.mob{
	display: block;
}

.collapsible:hover{
	background-color: #ffffff;
	color: #000000;
}

}



/* /////////////////// SMALL SCREEN  ////////////////////// */

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

/*.scrollImg{
	max-width: 200vw;
}*/

.collapsible{
	padding: 0%;
	border-style: none;
	margin: 0;
	display: block;
	position: fixed;
	left: 0;
	top: 27px;
	float: all;
	width: 99.5%;
	border: thin dashed white;
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	color: #ffffff;
	font-size: 20px;
	background-color: rgb(0, 0, 0);
	z-index: 1;
}

.homeCont{
	float: left;
	padding: 1%;
	top: 45px;
	/*padding-top: 3%;*/
	position: relative;
	width: 98%;
	display: block;
	/*overflow: scroll;*/

}

.homeCont2{
	float: left;
	padding: 1%;
	top: 45px;
	/*padding-top: 3%;*/
	position: relative;
	width: 98%;
	display: none;
}


.infoCont{
	float: left;
	padding: 1%;
	top: 45px;
	/*padding-top: 3%;*/
	position: relative;
	width: 98%;
	display: none;
	/*overflow: scroll;*/
}


.mainCont{
	float: left;
	top: 45px;
	padding: 1%;
	width: 98%;
	left: 0;
	/*height: 100%;*/
	position: relative;
	border-style: none;
	/*overflow: scroll;*/
}

.fullCont{
	float: left;
	padding: 1%;
	position: relative;
}

.contentDiv, .contentDivL{
	left: 0;
	width: 94%;
}


.collapsible:hover{
	background-color: #ffffff;
	color: #000000;
}

.grid-container{
	display: block;
	/*grid-template-columns: auto;*/

}

.grid-container3{
	display: block;
	/*grid-template-columns: auto;*/
}

.spacerDiv{
	display: none;
}


}