:root {
	font-size: 8.5pt;
	--yellow: yellow;
	font-family: "Director";

	--pane-content-background-color: white;
	--pane-title-bar-color: white;
	--pane-title-bar-text-color: black;
	--pane-title-bar-hightlight-color: black;
	--pane-title-bar-text-hightlight-color: white;

	--pane-title-bar-height: 32px;
	--pane-default-width: 125px;
	--pane-default-height: 297px;
	--pane-intro-default-width: 297px;
	--pane-intro-default-height: auto;
	--pane-border-radius: 5px;
}

::selection{
	background: transparent;
}

* {
	box-sizing: border-box;
	margin: 0;
}

section#mob-v{
	display: none;
}



html{
	margin: 0;
	padding: 0;
	background-color: var(--yellow);
	background-image: url("./assets/PTAF_blason-PBCity.png");
	background-size: 50vh;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	height: 100%;
	width: 100%;
	overflow: clip;
}

img{
	width: 100%;
	height: auto;
	max-width: 100%;
}

.panel{
	position: absolute;
	display: inline-block;
	width: var(--pane-default-width);
	min-width: 105px;
	border-radius: var(--pane-border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.content, .content-info{
	width: var(--pane-default-width);
	height: auto;
	position: relative;
	/*background-color: blue;*/
}

.corner{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	cursor: nwse-resize;
	/*background-color: green;*/
}

.intro{
	position: absolute;
	height: var(--pane-intro-default-height);
	width: var(--pane-intro-default-width);
	background-color: white;
	border-radius: var(--pane-border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	/*box-shadow: 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd;*/
	overflow: hidden;
}

.intro .content, .intro .content-info, .outro .content{
	padding: 0.5rem;
	position: relative;
	width: 100%;
}

.intro .content-info{
	display: none;
}

.intro .content p:last-of-type { 
	margin-top: 0.5rem;
}

.outro .content p{
	margin-bottom: 0.5rem;
}

.outro .content p:last-of-type{
	margin-bottom: 0rem;
}

.outro{
	position: absolute;
	/*height: var(--pane-intro-default-height);*/
	/*width: var(--pane-intro-default-width);*/
	width: 225px;
	background-color: black;
	border-radius: var(--pane-border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	/*box-shadow: 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd, 0 0 30px #fcfdfd;*/
	overflow: hidden;
	color: white;
}

.outro p {
	font-size: 7.5pt;
}

.title {
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: left;
	width: 100%;
	cursor: grab;
	background-color: var(--pane-title-bar-color);
	color: var(--pane-title-bar-text-color);
	padding: 0.5rem;
}

.title h2{
	margin: 0;
	font-size: 10pt;
	/*text-transform: uppercase;*/
	font-variant: all-petite-caps;
}

.panel.is-dragging .title{
	background-color: var(--pane-title-bar-hightlight-color);
	color: var(--pane-title-bar-text-hightlight-color);
	cursor: grabbing;
}


.panel.is-resizing .corner{
	cursor: nwse-resize;
}


#id-01 {
	top:50px; 
	left:50px;
}
#id-02{
	top:25px; 
	left:150px;
}
#id-03{
	top:100px; 
	left:100px;
}


#id-04{
	top: 375px;
	left: 150px;
}
#id-05{
	left:50px;
}
#id-06{
	left: 260px;
}
#id-06, #id-05{
	top: 380px;
}


#id-07{
	top: 50px; 
	left: 375px;
}
#id-08{
	top: 100px; 
	left: 425px;
}
#id-09{
	top: 150px; 
	left: 300px;
}


#id-10{
	left: 575px;
}
#id-11{
	left: 625px;;
}
#id-12{
	left: 675px;
}
#id-10, #id-11, #id-12{
	top: 50px;
}


#id-13{
	top: 25px;
	left: 900px;
}
#id-14{
	top: 75px;
	left: 875px;
}
#id-15{
	top: 125px;
	left: 925px;
}


#id-16{
	top: 400px;
	left: 450px;
}
#id-17{
	top: 375px;
	left: 425px;
}
#id-18{
	top: 350px;
	left: 400px;
}


#id-19{
	top: 275px;
	left: 640px;
}
#id-20{
	top: 350px;
	left: 585px;
}
#id-21{
	top: 375px;
	left: 725px;
}


#id-00{
	bottom: 25px; 
	right:25px;
}
#id-000{
	bottom: 25px;
	left: 25px;
}


.intro .title, .outro .title{
	cursor: default;
}

@font-face{
	font-family: "Director";
	src:url("./assets/type/Director-Light.otf");
}


/*1035 615*/

@media screen and (orientation: landscape) and (min-width: 500px) and (max-width: 1075px), 
screen and (orientation: landscape) and (min-height: 500px) and (max-height: 615px){
	div.panel, div.outro, div.intro .content {
		display: none;
	}
	div.intro .content-info{
		display: block;
	}
	html{
		/*background-color: purple;*/
	}
}

@media screen and (orientation: landscape) and (min-width: 1350px) and (max-width: 1800px) and (min-height: 800px) {
	html{
		/*background-color: pink;*/
	}
	:root {
		--pane-default-width: 150px;
		font-size: 9pt;
	}
	#id-04{
		top: 400px; 
		left:175px;
	}

	#id-05{
		top: 405px; 
		left:50px;
	}

	#id-06{
		top: 405px; 
		left:325px;
	}

	#id-07{
		top: 50px; 
		left:400px;
	}

	#id-08{
		top: 100px; 
		left:450px;
	}

	#id-09{
		top: 150px; 
		left:325px;
	}

	#id-10{
		left: 675px;
	}
	#id-11{
		left: 725px;;
	}
	#id-12{
		left: 775px;
	}


	#id-13{
		left: 1000px;
	}
	#id-14{
		left: 975px;
	}
	#id-15{
		left: 1025px;
	}


	#id-16{
		top: 475px; 
		left:550px;
	}

	#id-17{
		top: 450px; 
		left:525px;
	}

	#id-18{
		top: 425px; 
		left:500px;
	}


	#id-19{
		top: 375px;
		left: 790px;
	}
	#id-20{
		top: 450px;
		left: 735px;
	}
	#id-21{
		top: 475px;
		left: 875px;
	}
}

@media screen and (orientation: landscape) and (min-width: 1801px) /*and (max-width: 1920px)*/ and (min-height: 850px) {
	html{
		/*background-color: green;*/
	}
	:root {
		--pane-default-width: 200px;
		font-size: 10pt;
	}

	.title h2{
		font-size: 11pt;
	}

	#id-04{
		top: 450px;
		left:225px;
	}

	#id-05{
		top: 455px;
	}

	#id-06{
		top: 455px;
		left:375px;
	}


	#id-07{
		left:500px;
	}

	#id-08{
		left:550px;
	}

	#id-09{
		left:425px;
	}


	#id-10{
		left: 875px;
	}
	#id-11{
		left: 925px;;
	}
	#id-12{
		left: 975px;
	}


	#id-13{
		left: 1300px;
	}
	#id-14{
		left: 1275px;
	}
	#id-15{
		left: 1325px;
	}


	#id-16{
		top: 525px; 
		left:700px;
	}

	#id-17{
		top: 500px; 
		left:675px;
	}

	#id-18{
		top: 475px; 
		left:650px;
	}


	#id-19{
		top: 375px;
		left: 1150px;
	}
	#id-20{
		top: 450px;
		left: 1000px;
	}
	#id-21{
		top: 525px;
		left: 1275px;
	}

}