/*========== HARMONIZE BROWSER DEFAULTS ==========*/

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, details, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, option, output, p, pre, q, ruby, s, samp, section, select, small, span, strike, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, tt, u, ul, var, video
{ margin:0; padding:0; border:none; outline:none; font-size:1em; letter-spacing:0px; vertical-align:baseline; background-color:transparent; }

html, body { width:100%; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }

table { border-collapse:collapse; border-spacing:0; empty-cells:show; table-layout:auto; }



/*========== FONTS ==========*/

@font-face {
	font-family: 'Open Sans'; font-weight: 400; font-style: normal;
	src: url('opensans-regular.eot');
	src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
		 local('Open Sans Regular'),
		 local('OpenSans-Regular'),
	     url('opensans-regular.woff2') format('woff2'),
	     url('opensans-regular.woff') format('woff'),
	     url('opensans-regular.ttf')  format('truetype'),
	     url('opensans-regular.svg#Open Sans') format('svg');
}
@font-face {
	font-family: 'Barlow'; font-weight: 400; font-style: normal;
	src:  url('barlow-reg-reg.ttf')  format('truetype');
}

@font-face {
	font-family: 'Barlow Semi Condensed'; font-weight: 400; font-style: normal;
	src:  url('barlow-semi-reg.ttf')  format('truetype');
}
html, body {
	font-family: "Barlow", sans-serif; -webkit-text-size-adjust: none;
	font-size: 1.1vw; font-weight: 400; line-height:140%; color:rgb(0,0,0);
}

table, div, p, textarea, input, span {
	font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit;
}

q { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: italic; line-height: inherit; color: inherit; }

h1 {
	font-family: "Barlow Semi Condensed", sans-serif;
	font-size: 3rem; font-weight: 200; letter-spacing: 0em; line-height: 0.9em; margin-bottom: 1.3em; text-align: center; color: rgba(255,255,255,0.2);
}

h2 {
	font-family: "Barlow Semi Condensed", sans-serif;
	font-size: 2rem; font-weight: 400; letter-spacing: 0em; line-height: 1.2em; margin-bottom: 4rem; text-align: center; color:rgb(255,150,0);
}
h2.subline { margin-bottom: 1rem; }

h3 {
	font-family: "Barlow", sans-serif;
	font-size: 1rem; font-weight: 400; line-height: 1.2em; margin-bottom: 4rem; text-align: center; color:rgba(0,0,0,0.8);
}

h4 {
	font-family: "Barlow", sans-serif;
	font-size: 1rem; font-weight: 600; line-height: 1.2em; margin: 2.1rem 0 1.4rem 0; color:rgb(255,150,0);
}

.submit {
	font-family: inherit;
	font-size: 1.15em; font-weight: 400; color:rgb(40,110,155);
}



/*========== GENERAL SETTINGS ==========*/

html, body		{ background-color:rgb(250,250,250); overflow-x: hidden; }

div.bigpic			{ position: relative; width: 100vw; height: calc(100vw/3); background-position: center; background-size: cover; }
video.bigvid		{ position: relative; width: 100vw; height: calc(100vw/3); }
div.videocover		{ display: none; position: absolute; width: 100%; height: 100%; left: 0; top:0;
					background-color: transparent; pointer-events: none; }
h1.pagetitel		{ display: block; position: absolute; left: 2vw; bottom: 2vw; }
div.photocreditW	{ position: absolute; right: 2vw; bottom: 0.5vw; color:rgb(255,255,255); font-size: 0.8rem; }
div.photocreditB	{ position: absolute; right: 2vw; bottom: 0.5vw; color:rgb(0,0,0); font-size: 0.8rem; }

div.textContainer					{ position: relative; width: 84vw; padding: 4vw 8vw; }
div.textContainer ul				{ list-style: none; margin-bottom: 0.7em; }
div.textContainer ul li				{ margin-left: 1em; }
div.textContainer ul li:before		{ content: "•"; color: rgb(230,190,160); display: inline-block; width: 1em; margin-left: -1em; }
div.textContainer ul.margin			{ margin-bottom: 0; }
div.textContainer ul.margin li		{ margin-bottom: 0.7em; }
div.textContainer ol				{ margin-bottom: 0.7em; }
div.textContainer ol li				{ margin-left: 1em; }
div.textContainer ol.margin			{ margin-bottom: 0; }
div.textContainer ol.margin li		{ margin-bottom: 0.7em; }
col_8								{ display: inline-block; width: 8em; }
col_10								{ display: inline-block; width: 10em; }
col_12								{ display: inline-block; width: 12em; }
col_16								{ display: inline-block; width: 16em; }
col_20								{ display: inline-block; width: 20em; }
col_24								{ display: inline-block; width: 24em; }

div.column		{ float: left; width: 42vw; }
div.columnspacer{ width: 100%; height: 4vw; clear: both; }
div.finalizer	{ width: 100%; height: 0; clear: both; }

p				{ margin-bottom: 0.5em; }
p:last-child	{ margin-bottom: 0; }

q.en:before		{ content: "‟"; }
q.en:after		{ content: "”"; }
q.de:before		{ content: "„"; }
q.de:after		{ content: "“"; }

hr				{ width: 100%; height: 0; margin: 0; border-top: 1px solid rgb(255,150,0); font-size: 0; line-height: 0; }

a				{ text-decoration: none; color: inherit; transition: color 500ms ease-out; }
a:hover			{ color: rgb(255,150,0); transition: color 50ms ease-in; }
a.more			{ color: rgb(255,150,0); text-decoration: none; white-space: nowrap; }
a.more:after	{ content: " »" }
a.more:hover	{ color: rgb(255,150,0); }

small			{ font-size: 0.8em; }
b, strong		{ font-weight: 600; }

span.pink		{ color:rgb(230,0,120); }
span.separator	{ margin-left: 0.7em; margin-right: 0.7em; color:rgb(255,255,255); }
span.separator2	{ margin-left: 0.7em; }
span.warning	{ color: rgb(180,40,0); }
span.optional	{ display: none; }
span.displayyes	{ display: inline; }
span.displaytrue{ display: inline; }

.alpha0			{ opacity: 0.0; filter: alpha(opacity=000); filter: grayscale(100%); transition: opacity 500ms ease, filter 200ms ease; }
.alpha100		{ opacity: 1.0; filter: alpha(opacity=100); transition: opacity 1000ms ease, filter 2000ms ease; }

img.findable	{ display: none; }
img.inlineleft	{ display: inline; float: left; margin: 0.2em 2em 1em 0; }
img.inlineright	{ display: inline; float: right; margin: 0.2em 0 1em 2em; }
img.portrait	{ width: 14vw; max-width: 400px; }

#contentContainer{ margin-top: 5vw; }



/*========== MAIN MENU ==========*/

#mainmenuContainer	{
	position: fixed; top: 0; left: 0; z-index: 500; height: 5vw; width: 100%; line-height: 1vw;
	background-color: rgb(255,150,0); background-image: url(../images/academy/troussov-academy-logo-menu.png);
	background-position: left center; background-repeat: no-repeat; background-size: contain;
	box-shadow: 0 0 0.5vw 0 rgba(0,0,0,0.6); user-select: none;
}

#mainmenuName {
	position: absolute; top: 2.5vw; left: 5vw; line-height: 0; color: rgb(255,255,255);
	font-family: "Barlow Semi Condensed", sans-serif; font-size: 2vw; font-weight: 400; letter-spacing: 0em;
}

#hamburger				{ display: none; }
#closer					{ display: none; }

#mainmenu				{ float: right; margin: 2vw 2vw 0 0; }
#mainmenu li			{ display: inline; float: left; }
a.menu 					{ color: rgb(0,0,0); }
a.menu:hover			{ color: rgb(255,255,255); }
a.menuHere				{ color: rgb(0,0,0); }
a.menuHere:hover		{ color: rgb(255,255,255); }

.submenu				{ display: none; position: absolute; z-index: 104; left: 5%; bottom: 5%; font-size: 1em;
						  text-shadow: 0 0.05em 0.1em rgba(0,0,0,1); }
.submenu li				{ display: inline; float: left; }
.hidden					{ opacity: 0.0; filter: alpha(opacity=000); transition: opacity 500ms ease-in-out, filter 500ms ease-in-out; }
.visible				{ opacity: 1.0; filter: alpha(opacity=100); transition: opacity 500ms ease-in-out, filter 500ms ease-in-out; }



/*========== HOME PAGE ==========*/

div.tiles {
	display: flex; flex-flow: row nowrap; justify-content: space-between; justify-items: center; align-items: flex-start;
	margin-top: 1.4em;
}
div.tile			{ text-align: center; }
div.tile img 		{ display: block; width: 25vw; height: auto; margin-bottom: 0.7em; box-shadow: 0 0 0.3vw 0 rgba(0,0,0,0.4); }



/*========== ACADEMY ==========*/

div.masterclasses		{ display: flex; flex-flow: row nowrap; justify-content: space-between; justify-items: center; align-items: flex-start;
						margin-top: 1.4em; }
div.lectures			{ display: flex; flex-flow: row nowrap; justify-content: center; justify-items: center; gap: 3.5em; align-items: flex-start;
						margin-top: 1.4em; }
div.masterclass			{ text-align: center; }
div.masterclass img		{ display: block; width: 14vw; margin-bottom: 0.7em; }



/*========== PROFILES AND PAGES WITHOUT DIRECT MENU ACCESS ==========*/

p.social				{ margin-top: 0.4em; }
p.social img			{ width: 2vw; max-width: 60px; margin-right: 0.5vw; filter: grayscale(100%); transition: filter 300ms ease-out; }
p.social img:hover		{ filter: grayscale(0%); transition: filter 50ms ease-in; }
a.back					{ float: right; color: rgb(0,0,0); }
a.back:hover			{ color: rgb(255,150,0); }
a.back:before			{ content: "« "; }


/*========== FOOTER ==========*/

#sponsorContainer		{ width: 100vw; height: auto; padding: 4vw 15vw; margin: 0; border-top: 4px solid rgb(255,150,0);
						display: grid; grid-template-columns: repeat(4, 17.6vw); grid-template-rows: repeat(1, 3.8vw); grid-row-gap: 3vw;
						align-items: center; justify-items: center; background-color: rgb(20,20,20); }
#sponsorContainer a   	{ width: 21vw; text-align: center; }
#sponsorContainer img  	{ height: 100%; width: auto; }
#pirastro				{ height: 100% !important; }
#henle					{ height: 100% !important; }
#fundacion				{ height: 180% !important; }
#gewa					{ height: 50% !important; }
#vc						{ height: 60% !important; }
#messmer				{ height: 100% !important; }
#fkmw					{ height: 90% !important; }
#brahms					{ height: 80% !important; }
#lions					{ height: 70% !important; }
#fcfa					{ height: 50% !important; }
#sparkasse				{ height: 100% !important; }
#strad					{ height: 50% !important; }

#legalContainer			{ width: 100vw; padding: 4vw 0; background-color: rgb(0,0,0); color: rgba(255,255,255,0.5); clear: both; text-align: center; }
#legalmenu ul			{ margin-top: 1em; }
#legalmenu li			{ display: inline; }
a.legal 				{ font-weight: 400; }
a.legal:hover			{ color: rgba(255,255,255,0.7) !important; }
a.legalHere				{ color: rgba(200,150,0) !important; }
a.legalHere:hover		{ color: rgba(255,255,255,0.9) !important; }


/*========== RESPONSIVENESS ==========*/

video, img, div.bigpic
	{ transition: filter 2000ms ease-out; filter: saturate(0); }
video.bigvid
	{ transition: filter 2000ms ease-in; filter: saturate(0) contrast(133%); }
video:hover, img:hover, div.bigpic:hover, div.masterclass:hover img, div.tile:hover img, video.bigvid:hover
	{ transition: filter 200ms ease-in; filter: saturate(1) contrast(100%); }

@media only screen and (max-width:1280px)
	{
	html, body							{ font-size: 1.5vw; }

	video, img, div.bigpic				{ transition: none; filter: none; }

	div.bigpic							{ height: calc(100vw/2.75); overflow: hidden; }
	video.bigvid						{ width: calc(100vw/2.75*3); height: calc(100vw/2.75); left: -5vw; }

	hr									{ width: 88vw; margin: 0 6vw; }
	div.textContainer					{ width: 88vw; padding: 4vw 6vw; }
	div.column							{ float: none; width: 88vw; margin-bottom: 2.1rem; }

	div.masterclass img					{ width: 17vw; }

	div.mcformrow div.formkey			{ width: 23vw; padding: 0.3em 0 0 0; }
	div.mcformrow div.formvalue			{ width: 50vw; padding: 0; }
	select								{ width: 48vw; background-position: 45.5vw center; background-size: 1.2vw auto }
	input.inputtext						{ width: 46.9vw; }
	div.inputfile						{ width: 47vw; }
	input.inputfile						{ position: absolute; left: -15vw; top: 0; width: 66.9vw;  }
	textarea.inputarea					{ width: 46.9vw; }
	div.mcactionrow						{ padding-left: 23vw; }

	img.portrait						{ width: 21vw; max-width: 400px; }
	p.social img						{ width: 3vw; }
	#sponsorContainer		{ width: 100vw; height: auto; padding: 4vw 5vw; margin: 0; border-top: 4px solid rgb(255,150,0);
							display: grid; grid-template-columns: repeat(4, 22vw); grid-template-rows: repeat(1, 7vw); grid-row-gap: 2vw;
							align-items: center; justify-items: center; background-color: rgb(20,20,20); }
	#sponsorContainer a   	{ width: 22vw; text-align: center; }
	}

@media only screen and (max-width:960px)
	{
	html, body							{ font-size: 2.15vw; }
	
	h1									{ font-size: 2rem; }
	div.bigpic							{ height: calc(100vw/2.5); }
	video.bigvid						{ width: calc(100vw/2.5*3); height: calc(100vw/2.5); left: -10vw; }
	hr									{ width: 88vw; margin: 0 6vw; }
	div.textContainer					{ width: 88vw; padding: 4vw 6vw; }
	h2									{ font-size: 1.5rem; margin-top: 2vw; }

	div.masterclasses, div.lectures		{ flex-flow: row wrap; justify-content: space-evenly; justify-items: center;
										align-items: flex-start; gap: initial; }
	div.masterclass:first-of-type		{ margin-bottom: 1em; }

	div.mcformrow div.formkey			{ width: 38vw; padding: 0.3em 0 0 0; }
	div.mcformrow div.formkey span		{ display: none; }
	div.mcformrow div.formvalue			{ width: 50vw; padding: 0; }
	input.inputtext						{ width: 46.9vw; }
	div.inputfile						{ width: 47vw; }
	select.multi						{ height: 2.05em; background-image: url(../images/system/select.png);
										background-position: 46vw center; background-repeat: no-repeat; background-size: 1.2vw auto;}
	input.inputfile						{ position: absolute; left: -15vw; top: 0; width: 66.9vw;  }
	textarea.inputarea					{ width: 46.9vw; }
	div.mcactionrow						{ padding-left: 38vw; }

	img.portrait						{ width: 35vw; max-width: 400px; }
	p.social img						{ width: 5vw; }
	}

@media only screen and (max-width:480px)
	{
	html, body							{ font-size: 4vw; }

	#mainmenuContainer					{ height: 15vw; }
	#mainmenuName						{ top: 7.5vw; left: 15vw; font-size: 4vw; }

	#hamburger							{ display: block; float: right; padding: 0; margin: 5.5vw 3vw 0 0; width: 4vw; height: 4vw;
										cursor: pointer; line-height:0; }
	#hamburger > div					{ width: 4vw; height: 0.5vw; margin: 0.35vw 0 0.9vw 0; background-color: rgba(0,0,0);
										transition: all 300ms ease; }
	#hamburger > div:last-child			{ margin: 0.9vw 0 0.35vw 0; }
	#hamburger:hover > div				{ background-color: rgb(255,255,255); transition: all 300ms ease; }
	#hamburger.active div:first-child	{ transform: translateY(1.47vw) rotate(45deg); }
	#hamburger.active div:nth-child(2)	{ opacity: 0; }
	#hamburger.active div:last-child	{ transform: translateY(-1.47vw) rotate(-45deg); }

	#mainmenu							{ position: fixed; z-index: 510; top: 15vw; left: 0; width: 100%; background-color: rgba(255,255,255,0.8);
										display: none; float: none; margin: 0; padding: 0.7em 0; font-size: 1em; line-height: 1; }
	#mainmenu li						{ display: block; float: none; padding: 0.5em; text-align: center; }
	#mainmenu li.mobile					{ display: block; }
	#mainmenu li.desktop				{ display: none; }
	#mainmenu li:hover					{ background-color: rgba(255,255,255,0.8); }
	#mainmenu li a						{ display: inline-block; width: 100%; }
	#mainmenu span.separator			{ display: none; }

	#contentContainer					{ margin-top: 15vw; }

	div.tiles							{ flex-flow: row wrap; }
	div.tile							{ margin-bottom: 2em; }
	div.tile img						{ width: 84vw; }

	div.bigpic							{ height: calc(100vw/2); }
	video.bigvid						{ width: calc(100vw/2*3); height: calc(100vw/2); left: -25vw; }

	hr									{ width: 88vw; margin: 4vw 6vw; }

	li col_8							{ width: calc(88vw - 1em); margin-top: 0.5em !important; }
	li:first-child col_8				{ margin-top: 0 !important; }
	line_break, #office					{ display: block; clear: left; }

	div.masterclasses, div.lectures		{ justify-content: space-between; }
	div.masterclass img					{ width: 40vw; }

	div.mcformrow						{ height: auto; }
	div.formcell						{ display: block; float: none; margin: 0 0 0 0; }
	div.mcformrow div.formkey			{ width: 88vw; padding: 0; }
	div.mcformrow div.formvalue			{ width: 88vw; padding: 0; }
	select								{ width: 86vw; background-position: 82vw center; background-size: 2vw auto }
	#divRepLabel br						{ display: none; }
	select.multi						{ width: 86vw; background-position: 82vw center; background-size: 2vw auto }
	input.inputtext						{ width: 84.9vw; }
	div.inputfile						{ width: 85vw; }
	input.inputfile						{ position: absolute; left: -15vw; top: 0; width: 104.9vw;  }
	textarea.inputarea					{ width: 84.9vw; }
	div.mcactionrow						{ padding-left: 0; }

	img.portrait						{ width: 40vw; max-width: 400px; }
	p.social img						{ width: 8vw; }

	#sponsorContainer					{ padding: 8vw 5vw 6vw 5vw; grid-template-columns: repeat(2, 44vw); grid-template-rows: repeat(2, 14vw); grid-row-gap: 8vw; }
	#sponsorContainer a   				{ width: 44vw; }
	#legalContainer						{ font-size: 2.5vw; }
	}