/* --- VON-GRAWERT.COM --- INDEX.CSS ------------------------  */

/* --- RESOURCES --------------------------------------------  */

@font-face
{
 	font-family : CalibriLight ;
	src : url(../res/fnt/calibri.woff) format('woff') ;
}

@font-face
{
 	font-family : Castellar ;
	src : url(../res/fnt/castellar.woff) format('woff') ;
}

/* --- GENERAL SETTINGS -------------------------------------  */

*
{
	line-height : 100% ;
	border-image-width : 0 ;
	box-sizing : border-box ;
	-webkit-user-select : none ;
	-ms-user-select : none ;
	user-select : none ;
}

html , body
{
	overflow : hidden ;
	height : 100% ;
	width : 100% ;
	padding : 0 ;
	margin : 0 ;
}

svg
{
	pointer-events : none ;
	display : block ;
	height : 100% ;
	width : 100% ;
}

.hidden
{
	display : none ;
}

/* --- MAIN ELEMENTS : COMMON -------------------------------  */

header
{
	position : absolute ;
	border-style : solid ;
	border-width : 0 0 1px 0 ;
	border-color : #344578 ;
	background : #FFF ;
	width : 100% ;
}

article
{
	position : absolute ;
	overflow : hidden ;
	width : 100% ;
}

footer
{
	position : absolute ;
	border-style : solid ;
	border-width : 1px 0 0 0 ;
	border-color : #344578 ;
	background : #FFF ;
	width : 100% ;
}

/* --- MAIN ELEMENTS : LANDSCAPE ----------------------------  */

.landscape header
{
	height : 11.5% ;
	top : 0 ;
}

.landscape article
{
	height : 85% ;
	top : 11.5% ;
}

.landscape footer
{
	height : 3.5% ;
	top : 96.5% ;
}

/* --- MAIN ELEMENTS : PORTRAIT -----------------------------  */

.portrait header
{
	height : 15vw ;
	top : 0 ;
}

.portrait article
{
	height : calc(100% - 27.5vw) ;
	top : 15vw ;
}

.portrait footer
{
	height : 12.5vw ;
	top : calc(100% - 12.5vw) ;
}

/* --- HEADER : COMMON --------------------------------------  */

.coa
{
	background-image : url(../res/png/CoatOfArms.png) ;
	background-size : contain ;
	position : relative ;
	display : block ;
	float : left ;
	z-index : 10 ;
}

.cap
{
	position : relative ;
	display : block ;
	float : left ;
}

.cvgm , .cvgm_ie , .cvgm_ff
{
	font-family : Castellar ;
	font-variant : small-caps ;
	white-space : nowrap ;
	text-align : center ;
	color : #344578 ;
}

.cnslt
{
	font-family : CalibriLight ;
	font-variant : small-caps ;
	white-space : nowrap ;
	text-align : center ;
	color : #344578 ;
}

/* --- HEADER : LANDSCAPE -----------------------------------  */

.landscape .coa
{
	height : 16vh ;
	width : 16vh ;
	left : 2vh ;
	top : 1vh ;
}

.landscape .cap
{
	left : 4vh ; top : 1.25vh ;
  	margin-right : 4vh ;
	height : 9vh ;
 	width : 65vh ;
}

.landscape .cvgm
{
	margin-top : 0.75vh ;
	font-size : 4.6vh ;
}

.landscape .cvgm_ie
{
	margin-top : 1.25vh ;
	font-size : 3.85vh ;
}

.landscape .cvgm_ff
{
	margin-top : 1.25vh ;
	font-size : 4.15vh ;
}

.landscape .cnslt
{
	letter-spacing : 0.08em ;
	font-size : 2.3vh ;
}

.landscape .area_LS
{
	justify-content : flex-end ;
	flex-direction : row ;
	stroke-width : 1.25 ;
	margin-right : 4vh ;
	margin-top : 2vh ;
	display : flex ;
	height : 9.5vh ;
	float : right ;
	width : 40vh ;
}

.landscape .symbol
{
	border-color : #344578 ;
	border-radius : 0.5vh ;
	border-style : solid ;
	border-width : 1.0px ;
	margin-left : 2vh ;
	cursor : pointer ;
	height : 7.5vh ;
	width : 7.5vh ;
	float : right ;
}

.landscape .symbol:hover
{
	box-shadow: 0 0 1vh 1vh #8A97BF ;
}

.landscape .symbol.idle
{
	background : #FFF ;
	stroke : #344578 ;
	display : block ;
	fill : none ;
}

.landscape .symbol.active
{
	background : #344578 ;
	display : block ;
	stroke : none ;
	fill : #FFF ;
}

/* --- HEADER : PORTRAIT ------------------------------------  */

.portrait .coa
{
	height : 20.8vw ;
	width : 20.8vw ;
	left : 2.2vw ;
	top : 1.6vw ;
}

.portrait .cap
{
  	margin-left : 2vw ;
  	width : 75vw ;
	top : 3.2vw ;
}

.portrait .cvgm
{
	font-size : 5.2vw ;
}

.portrait .cnslt
{
	letter-spacing : 0.04em ;
	font-size : 2.8vw ;
}

.portrait .area_LS
{
	display : none ;
}

/* --- ARTICLE : COMMON -------------------------------------  */

.overlay
{
	position: absolute ;
    z-index: 1 ;
}

.vennDiag
{
	stroke-width : 0.2 ;
	stroke : #344578 ;
	fill : none ;
}

.vennCaption
{
	font-family : CalibriLight ;
	text-anchor : middle ;
	font-size : 3.75px ;
	fill : #344578 ;
	stroke : none ;
}

.field.active
{
	fill : rgba(52, 69, 120, 0.28) ;
}

.choiceCap
{
	font-family : CalibriLight ;
	font-variant : small-caps ;
	text-align : center ;
	color : #344578 ;
	width : 100% ;
}

.choiceTxt
{
	font-family : CalibriLight ;
	text-align : justify ;
	overflow-y: auto ;
	color : #344578 ;
}

.confirm
{
	font-family : CalibriLight ;
	font-variant : small-caps ;
	border-color : #344578 ;
	border-style : solid ;
	border-width : 1.0px ;
	text-align : center ;
	cursor : pointer ;
	color : #344578 ;
}

.content
{
	transition : opacity 0.25s ;
	border : none ;
	height : 100% ;
	width : 100% ;
}

.content.static
{
	opacity : 1 ;
}

.content.loading
{
	opacity : 0 ;
}

/* --- ARTICLE : LANDSCAPE ----------------------------------  */

.landscape .overlay
{
    background: rgba(255,255,255,0.6) ;
	left: calc(100% - 44vh) ;
	height: 100% ;
	width: 44vh ;
}

.landscape .overlay.out
{ top : -100% ; }

.landscape .overlay.in
{
	transition-duration : 0.5s ;
	transition-property : top ;
	top : 0 ;
}

.landscape .vennDiag
{
	height: 44vh ;
	width: 44vh ;
}

.landscape .choiceCap
{
	font-size : 2.3vh ;
	height : 3.5vh ;
}

.landscape .choiceTxt
{
	width: calc(100% - 7vh) ;
	font-size: 1.75vh ;
	margin: 0 3.5vh ;
	height: 25vh ;
}

.landscape .confirm
{
	width: calc(100% - 7vh) ;
	border-radius: 0.5vh ;
	padding-top: 0.5vh ;
	margin: 0 3.5vh ;
	height: 3vh ;
}

.landscape .confirm:hover
{
	box-shadow: 0 0 1vh 1vh #8A97BF ;
}

/* --- ARTICLE : PORTRAIT -----------------------------------  */

.portrait .overlay
{
	background-image : linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.88) 10%) ;
	height: calc(100% - 5vw) ;
	width: 100% ;
	top: 5vw ;
}

.portrait .overlay.out
{ top : 100% ; }

.portrait .overlay.in
{
	transition-duration : 0.5s ;
	transition-property : top ;
	top: 5vw ;
}

.portrait .vennDiag
{
	margin: 0 10vw ;
	height: 80vw ;
	width: 80vw ;
}

.portrait .choiceCap
{
	font-size : 2.8vw ;
	height : 4.5vw ;
}

.portrait .choiceTxt
{
	width: calc(100% - 10vw) ;
	font-size : 2.7vw ;
	margin: 0 5vw ;
	height : 25vw ;
}

.portrait .confirm
{
	position : absolute ;
	width : calc(100% - 10vw) ;
	border-radius : 1vw ;
	padding-top : 1vw ;
	font-size: 2.8vw ;
	height : 5vw ;
	bottom : 5vw ;
	left : 5vw ;
}

/* --- FOOTER : COMMON --------------------------------------  */



/* --- FOOTER : LANDSCAPE -----------------------------------  */

.landscape .area_PT
{
	display : none ;
}

/* --- FOOTER : PORTRAIT ------------------------------------  */

.portrait .area_PT
{
	justify-content : right ;
	flex-direction : row ;
	stroke-width : 1.25 ;
	display : flex ;
	height : 100% ;
	width : 100% ;
}

.portrait .symbol
{
	cursor : pointer ;
	float : right ;
	height : 100% ;
	width : auto ;
}

.portrait .symbol.idle
{
	background : #FFF ;
	stroke : #344578 ;
	display : block ;
	fill : none ;
}

.portrait .symbol.active
{
	background : #344578 ;
	display : block ;
	stroke : none ;
	fill : #FFF ;
}

/* --- END OF FILE --- INDEX.CSS ----------------------------  */