/*!
Theme Name: MusicaViva
Theme URI: https://waldpixelwerk.de
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für MusicaViva
Version: 1.0.0
Tested up to: 8.2
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: musicaviva
*/


/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('./fonts/roboto-v30-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('./fonts/roboto-v30-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('./fonts/roboto-v30-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/roboto-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/roboto-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


 :root{
    --font:16px;
    --fontmedium:1.15em;
    --fontbig:2.5em;
    --gold:#CAC299;
    --dark:#463F3F;
    --grey:#3F3F3F;
    --white:#ffffff;
    --lineheight:1.4em;
    --container:1240px;

  }



@media(max-width:1280px){
  :root{
   --container:90%;
   --font:1.2vw;

  }
}

@media(max-width:768px){
 :root{
    --font:5vw;
    --fontsmall: 0.5rem;
    --fontbig: 1.5rem;
    --fontmenu: 1.8rem;
    --fonthead: 2.1rem;
    --fontfooter: 0.7rem;
    --lineheight:1.2rem;
    --container:90vw
  }
}


*:focus {
    outline: none;
}

::-moz-selection { background: var(--dark); color:var(--grey); }
  ::selection { background: var(--dark); color:var(--grey); }

body, html{padding:0;margin:0;left:0;top:0;width:100%;position:relative;font-size:var(--font);font-family:"Roboto";line-height:var(--lineheight);font-weight:400;color: var(--dark);background-color:var(--heathergrey);text-rendering: geometricPrecision;white-space-collapsing:discard}
.notransition *{transition:none !important}

a, a:link, a:hover, a:active, a:visited{text-decoration:none;font-style:normal;color:var(--dark);transition:color .2s ease-in-out}

h1, h2, h3, h4, h5, h6{letter-spacing:0.0em;margin-block-start:0;margin-block-end:0;font-weight:300}
img{max-width:100%;height:auto}


.mobileonly{display: none;}
.desktoponly{display: initial;}

.container{position: relative;width:100%;display:inline-block;text-align:center}
.container-inner{width:var(--container);text-align:left;display:inline-block}

.apply-now-button {
  position: fixed;
  top: 2em;
  right: 2em;
  background-color: var(--gold);
  color: black;
  border-radius: 999px;
width:10em;
	height:10em;

  font-weight: bold;
	text-align:center;
  font-size: 1rem;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

.apply-now-content{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

/*home*/

.home{min-height:700px;width:100%;position:relative;height:100vh}
.lang-switch{top:2em;right:2em;position:absolute;text-align:right;z-index:9}
.lang-switch a{margin-left:0.5em;text-transform: uppercase;color:var(--white)}
.lang-switch a.curlang, .lang-switch a:hover{color:var(--gold)}
.home-logo{position:absolute;top:calc(50% - 16em);text-align:left;width:100%;left:0;text-align: center;}
.notransition .home-logo img {opacity:0}
.home-logo img {
    width: 44em;
    max-width: 80%;
    margin-bottom: 0.5em;
    opacity:1;
    transition:all 1s ease-in-out 0s
}
.notransition .home-logo-subline{opacity:0;letter-spacing:0.1em}
.home-logo-subline{font-weight: 700;color:var(--white);font-size:2em;line-height: 1.2em;
transition:all .5s ease-in-out 1s}



header ul, .home ul {
    list-style-type: unset;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    unicode-bidi: isolate;
}



.home-menu{width:100%;position:absolute;top:calc(50% - 1em);text-align:center}
.home-menu:before{height:1px;width:100%;position:absolute;left:0;top:2em;content:"";background-color:var(--white)}
.home-menu ul{display:inline-block;}
.home-menu li{display:inline-block;appearance: none;width:12em;text-align:center;position: relative;padding-bottom:3em;}
.home-menu li a{color:var(--white);font-weight:700;transition:color .2s ease-in-out;text-transform:uppercase}
.home-menu li a:hover{color:var(--gold);}

ul .sub-menu{position:absolute;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;left:1em;width:10em;background-color:var(--gold);text-align:center;margin-top:3em;padding:0.3em 0}
.home-menu ul li:hover .sub-menu{opacity:1;pointer-events:auto}
ul .sub-menu li{position:relative;display:inline-block;text-transform: unset;margin:0;width:10em;padding:0.2em 0}
ul .sub-menu li a{color:var(--dark);text-transform: none;;font-weight:400}
ul .sub-menu li a:hover{color:var(--white)}
.page-menu li.current-menu-item a{color:var(--gold)}
.page-menu li.current-menu-item .sub-menu a{color:var(--white)}

.home-footer{bottom:3em;text-align:center;position:absolute;left:0;width:100%}
.notransition .home-footer-slogan{opacity:0;letter-spacing:0.2em}
.home-footer-slogan{font-size:3.5em;margin-bottom:5rem;color:var(--gold);display: inline-block;font-weight:100;opacity:1;letter-spacing:0;transition:all .5s ease-in-out 1.5s}
.home-footer-logo img{height:3em}
	.home-footer-slogan-2{font-size:1.8rem;color: var(--white);line-height:1.5em;
    font-weight: 700;display:inline-block;margin-top:0.2em;}


@media(max-width:768px){
    .home{min-height:500px}
    .home-logo{    top: calc(50% - 10em);}
    .home-logo-subline{font-size:1em}
    .home-menu li {
    padding-bottom: 1em;
}
	
	.home-menu li {
    padding-bottom: 0;
}
.home-menu:before{display:none}
.home-menu ul .sub-menu{display:none}

    .home-footer{bottom:2em}
    .home-footer-slogan {font-size: 1.5em;margin-bottom:1em}
	

	
    .home-footer-logo img {
    height: 2em;
}
	
	.home-menu .menu-main-menue-de-container {
    padding-left: 0;
    padding-top: 0;
}
}


/*template*/
.gold{color:var(--gold)}
h1, h2{color:var(--gold);font-size:var(--fontbig);line-height:1.2em;margin-bottom:1rem}
h3, h4{font-size:var(--fontmedium);font-weight:700}
p{    margin-block-start: 1em;
    margin-block-end: 2em;}


    .page li:before{
    content:"--";
    color:var(--gold);
    font-weight:700;
    width:3em;
    position:absolute;
    top:0;
    left:-2.3em;
    margin-right:2em;
}

.page li::marker{display:none;content:""}
.page li{position:relative;display:inline-block;}

.page ul {
    display: block;
    list-style-type: unset;
    margin-block-start: 0em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

.page a, .page a:link,.page a:hover, .page a:active, .page a:visited{text-decoration:underline;}
.page a:hover{color:var(--gold)}
header{background-color:var(--grey);padding:2em 0 0em 0;z-index:8;margin-bottom:1.5em}
.page-logo{width:20%;display: inline-block;float: left;}
.page-logo img{height:3.5em;margin-top:0.2em}
.page-menu{width:60%;display: inline-block;float: left;text-align:center}
.page-lang-switch{width:20%;display: inline-block;float: right;text-align:right;position:relative;padding-top:2em;top:0;right:0}




.page-menu ul{display:inline-block;margin-bottom:-0.5em}
.page-menu li{display:inline-block;appearance: none;width:8em;text-align:center;position: relative;padding-top:2em;padding-bottom:1em}
.page-menu li a{color:var(--white);font-weight:700;transition:color .2s ease-in-out;text-transform:uppercase}
.page-menu li a:hover{color:var(--gold);}
.page-menu li:hover .sub-menu{opacity:1;pointer-events:auto}
.page-menu ul .sub-menu{width:10em;left:-1em;background-color:var(--gold);text-align:center;margin-top:1.8em;padding:0.3em 0}

.page-left{width:18%;margin-right:3%;float:left;display: inline-block;}

.page-content{width:58%;float:left;display: inline-block;}
.page-right{width:18%;margin-left:3%;float:right;display: inline-block;}


.page-left-name{line-height:2em;margin-bottom:2em;font-weight:700}
.page-left-slogan{font-size:var(--fontmedium);color:var(--gold);font-weight:300;margin-bottom:10em}
.page-left-slogan a{color:var(--gold);text-decoration:none;}


table{width:100%;margin-bottom:1em}
table.desktoponly {display:table !important;}

th{}
tr:nth-child(even){    background-color: #f9f9f9;}

.page-right-image{margin-top:15em}
.page-left-image-4{margin-top:52em}
.page-right-image-1{margin-top:10em;transform:scale(1.2);transform-origin:right;}
.page-right-image-2{margin-top:45em}
.page-right img, .page-left img{max-width:100%}
.page-right-quote{margin-top:5em;width:70%;margin-left:15%}


.quote-start{color:var(--gold);font-weight:700}

.board{    width: 100%;
    display: grid;
    grid-auto-rows: auto;
    grid-template-areas: "a a a";
    position: relative;
    grid-gap: 3em 12.5%;
    grid-template-columns: 25% 25% 25%;}

.board-member-text{margin:1em 0 0 0}
.board-member-name{font-weight:700;color:var(--gold)}


.teacher-single{padding-bottom:1em;padding-top:1em;border-bottom:solid 2px var(--gold)}
.teacher-image{width:20%;float:left;display:inline-block}
.teacher-right{width:70%;margin-left:10%;float:right;display:inline-block}
.teacher-name{font-weight:700;width:100%;margin-top:2em;}
.teacher-single-info{width:100%;display:inline-block;padding-top:1em;}
.teacher-more-container{height:0;overflow:hidden;transition:height .5s ease-in-out;}
.teacher-single-info-head-gold{color:var(--gold);font-weight:700}
.teacher-single-info-head-rest{color:var(--dark);font-weight:700}
.teacher-more-click{padding-left:1.3em;cursor:pointer;position:relative;margin-top:1em;font-weight:700}
.teacher-more-click:before{position:absolute;border-bottom:solid 2px var(--dark);border-right:solid 2px var(--dark);transform:rotate(45deg);transition:transform .3s ease-in-out;width:0.6em;height:0.6em;content:"";left:0em;transform-origin:center;top:0.2em}
.more-open .teacher-more-click:before{transform:rotate(225deg)}
.teacher-single-ll{margin-top:1em}

.news-single{margin-bottom:1em;border-bottom:solid 2px var(--gold);position:relative;display:inline-block;width:100%}
.news-headline{font-weight:700;width:100%;margin-bottom:1rem;font-size:var(--fontmedium)}
.news-text{margin-bottom:1em}
.news-slider{width:100%;height:20em;margin-bottom:3em;position:relative}
.news-slider-arrows{width:100%;z-index:2;top:calc(50% - 1em);position:absolute;}
.news-slider-arrow{border-left:solid 2px #eee;border-top:solid 2px #eee;width:2em;height:2em;cursor:pointer}
.news-slider-arrow-left{float:left;transform:rotate(-45deg);margin-left:1em}
.news-slider-arrow-right{float:right;transform:rotate(135deg);margin-right:1em;}
.news-slider-inner{width:10000%;height:100%;position:absolute;left:0;top:0;transition:left .4s ease-in-out}
.news-slider-container{width:100%;height:100%;position:relative;overflow:hidden;}
.slider-image{width:1%;float:left;position:relative;display:inline-block;height:100%;}

.slider-image img{width:100%;height:100%;object-fit:contain}
.slider-dots{position:relative;width:100%;text-align:center;display:inline-block;margin-top: 0.5em;}
.slider-dot{width:0.6em;cursor:pointer;height:0.6em;border-radius:50%;background-color:#eee;position:relative;display:inline-block;margin:0 0.5em}
.slider-dot-active{background-color:#000}

.gallery{margin-bottom:2em;width:120%;display:inline-block}
.gallery-image{cursor:pointer;width:50%;box-sizing:border-box;float:left;display:inline-block;height:15em;margin-bottom:0.6em;}
.gallery-image img{height:100%;width:auto;}
.gallery-image:nth-child(odd){text-align:right;padding-right:0.3em}
.gallery-image:nth-child(even){text-align:left;padding-left:0.3em}


/*lightbox*/

.lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(55, 55, 55, 0.7);opacity:0;pointer-events:none;transition:opacity .5s ease-in-out;z-index:12}
.lightbox-active{opacity:1;pointer-events: auto}
.lightbox-image{width:80%;height:86%;left:10%;top:7%;position:absolute;opacity:0;transition:opacity .3s ease-in-out}
.lightbox-image img{width:100%;height:100%;object-fit: contain}
.lightbox-arrows{width:94%;left:3%;top:calc(50vh - 1em);position:absolute;}
.lightbox-arrow{font-size:2em;color:var(--dark);display:inline-block;cursor:pointer}
.lightbox-arrow-right{float:right}
.lightbox-close{font-size:2em;text-align:right;top:2rem;right:3%;cursor: pointer;position: absolute}
.lightbox-bu{position:absolute;left:10%;width:80%;bottom:5%;transition:opacity .3s ease-in-out;opacity:0;text-align:center;font-size:var(--fontfooter)}


footer{background-color:var(--grey);margin-top:3em;padding:2em 0}
footer a{color:var(--white)}

footer ul {

    list-style-type: none;

}
footer ul li a{color:var(--white) !important}
footer ul li{display:inline-block;list-style:none;margin-right:1em;}


input[type="submit"]{appearance:none;border:none;padding:0.3em 1em;background-color:var(--gold);color:var(--white)}

label{display:block;}

@media (max-width:768px){
	
	    .mobile-menu{display:inline-block;position:absolute;left:1.2em;top:1.2em;width:2em;height:1.4em;z-index:9}
    .mobile-menu-line{position:absolute;left:0;top:0.7em;width:100%;background-color:var(--white);height:2px;border-radius:2px;transition:transform .3s ease-in-out;}

    .mobile-menu-line-1{transform:translateY(-0.4em);}
     .mobile-menu-line-3{transform:translateY(0.4em);}

     .menu-open .mobile-menu-line-1{transform:translateY(-0.4em) translateX(-0.2em);}
      .menu-open .mobile-menu-line-2{transform:translateX(0.2em);}
    .menu-open .mobile-menu-line-3{transform:translateY(0.4em) translateX(-0.4em);}


.mobileonly{display: initial;}
	table.desktoponly {
		display: none !important;}
.desktoponly{display: none !important;}
table.mobileonly {display:table !important;}
header {
    background-color: var(--grey);
    padding: 1em 0 1em 0;
	position:fixed !important;
	top:0;
	left:0;
    z-index: 8;
    margin-bottom: 0;
	transition:transform .4s ease-in-out;
}
	
	header.menu-open{transform:translateX(80%)}
	
	.page-logo {
    width: 50%;
    display: inline-block;
    text-align: center;
    float: unset;
    margin-bottom: 0em;
    margin-left: 25%;
}
	
	.page-logo img {
    height: auto;
    margin-top: 0em;
}
	
	
	.page-lang-switch {
    width: 20%;
    display: inline-block;
    float: right;
    text-align: right;
    position: absolute;
    padding-top: 1.5em;
    top: 0;
    right: 1em;
}
	
	
	.lang-switch .curlang{display:none;}
	
	
	
.page{overflow:hidden}
.page-left, .page-right{display:none}
.page-content{width:100%;padding-top: 6em;}

.page-menu {
    width: 80%;
    top: 0;
    position: absolute;
    left: -80%;
    min-height: 100vh;
    background-color: var(--gold);
}
	
	.page-menu li a {
		    color: var(--black) !important;
    width: 100%;
    display: inline-block;}
	
	.page-menu ul .sub-menu {
    width: auto;
    left: 0;
    background-color: var(--gold);
    text-align: center;
    margin-top: 0em;
    padding: 0.4em 0;
    position: relative;
		width:100%;
    opacity: 1;
    pointer-events: auto;
}

    .page-menu li {
    display: inline-block;
    appearance: none;
    width: 100%;
    text-align: left;
    position: relative;
    padding-top: 1em;
    padding-bottom: 0;
}
	
	.page-menu li:after{content:"";display:inline-block;position:absolute;width:calc(100% - 1em);left:0;top:1.3em;background-color:var(--dark);height:0.1em;}
	
	.menu-item-has-children{margin-bottom:1em;}
	.page-menu li.menu-item-has-children:after{background-color:var(--white);height:0.3em;}
	
.page-menu li {
    display: inline-block;
    appearance: none;
    width: 100%;
    text-align: left;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

	.menu-main-menue-de-container, .menu-main-menu-en-container{padding-left:0em;padding-top:2em}
	
	ul .sub-menu li {
    position: relative;
    display: inline-block;
    text-transform: unset;
    margin: 0;
    width: 100%;
    padding: 0.2em 0;
}
	
	
	
	
	.board{    width: 100%;
   display:inline-block}
	.board-member{margin-bottom:2em}
	
	.news-slider{height:14em;}
	
	
	.gallery{margin-bottom:2em;width:100%;display:inline-block}
.gallery-image{cursor:pointer;width:100%;box-sizing:border-box;float:left;display:inline-block;height:10em;margin-bottom:0.6em;}
.gallery-image img{width:100%;height:auto}
	
	.page-image{width:100%;margin-top:2em}

	.teacher-image{width:100%}
	.teacher-right {
    width: 100%;
    margin-left: 0;
    float: left;
    display: inline-block;
    margin-bottom: 2em;
}
	.teacher-name{margin-top:1em}
	
	
	
}


.pt-cv-wrapper .pagination>.active>a, .pt-cv-wrapper .pagination>.active>a:focus, .pt-cv-wrapper .pagination>.active>a:hover, .pt-cv-wrapper .pagination>.active>span, .pt-cv-wrapper .pagination>.active>span:focus, .pt-cv-wrapper .pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    background-color: #000;
    border-color: #337ab7;
    cursor: default;
}

.pt-cv-wrapper .pagination>li>a, .pt-cv-wrapper .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}

@keyframes homebg{
	0%{transform:scale(1) translateX(0)}
	50%{transform:scale(1.1) translateX(2%)}
	100%{transform:scale(1) translateX(0)}
	
}
.home-bg img{animation:homebg  50s infinite}


.logo-home-5years {
    margin-top: 2em;
    transform: translateY(3em);
    height: 6em;
    width: auto !important;
    margin-left: 1em;
}

.logo-5years {
    transform: translateY(0.7em);
    margin-left: 0.4em;
}

@media (max-width:768px){
	.home-logo img {
    max-width: 70%;
}
	
	.logo-home-5years {
    margin-top: 0em;
    transform: translateY(0.5em);
    height: 3em;
    width: auto !important;
    margin-left: 1em;
}
	
	    .page-logo img {
        height: auto;
        margin-top: 0em;
        width: 83%;
    
}
	
	.logo-5years {
    transform: translateY(0.7em);
    margin-left: 0.4em;
    height: 1em !important;
    width: unset !important;
}
	
	
	
	.apply-now-button {
    position: fixed;
    top: unset;
    right: 1em;
    background-color: var(--gold);
    color: black;
    border-radius: 999px;
    width: 9em;
    height: 9em;

    font-weight: bold;
    text-align: center;
    font-size: 0.7em;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    line-height: 1rem;
    bottom: 2em;
}
}