/*
root:   front-size  is 16px
        line-height is 24px (font-size +25% up, +25% dn)
 */

:root {
  --mmb-orange: #f15700;
  --mmb-orange-light: #ffc495;

  --mmb-blue: #008390;
  --mmb-blue-light: #7cc3ca;

  --mmb-grey: #929292;
  --mmb-grey-light: #e9e9e9;

  --fontSize-Menu-Pages:    1.875rem; /* 30 px = 1.875 or 1.666em*/
  --fontSize-Menu-Sections: 1.125rem; /* 18 px = 1.125 or 1em*/
  --fontSize-Title-Toggled: 3.125rem;   /* 50 px = 3.125 or 2.777em*/

  --fontSize-Content-Title: 3.125rem;   /* 50 px = 3.125 or 2.777em*/
  --fontSize-Content-Text:  1.875rem; /* 30 px = 1.875 or 1.666em*/
}
/* #f15700; /*fallback */

body {
  font-size: 18px;
}
@font-face {
   font-family: mmbFontm;
   src: url("fonts/SimplonNorm-Medium.woff") format('woff'); /* Pretty Modern Browsers */


}
@font-face {
   font-family: mmbFontr;  
   src: url("fonts/SimplonNorm-Regular.woff") format('woff'); /* Pretty Modern Browsers */

}
* {
   font-family: mmbFontm;
}
.font-regular {
   font-family: mmbFontr;
}

/* switch to fluid on less than Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
  body{
    font-size: 15px;
  }
}
/* adapt font on less than Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
  .container {
    max-width: 100%;
  }
  body{
    font-size: 12px;
  }
}
.container {
	padding-left: 5%;
	padding-right: 5%;
}


/* mobile specific */
.title-mobile {
}
.btn-splash-mobile  {
  width: 90%;
  max-width: 300px;
  background-color: transparent;

  font-size: 1.666em;
  text-decoration: none;

  border-width: 3px;
  border-radius: 10px;
  border-color: black;
  border-style: solid;
  
  padding: 5px 0px 5px 0px;
  margin:5px 10px 5px 10px;	
}
.btn-splash-mobile a {
  text-decoration: none;
}

.btn-splash-noborder-mobile  {
  width: 90%;
  max-width: 300px;
  background-color: transparent;

  font-size: 1.666em;
  text-decoration: none;

  border-width: 0px;
  border-radius: 10px;
  border-color: black;
  border-style: solid;
  
  padding: 5px 0px 5px 0px;
  margin:5px 10px 5px 10px; 
}
.btn-splash-noborder-mobile a {
  text-decoration: none;
}

.btn-orange, .btn-orange:hover {
  background-color: #f15700; /*fallback */
  background-color: var(--mmb-orange); 
  border-color: #f15700; /*fallback */
  border-color: var(--mmb-orange); 
  color: white
}
.btn-blue, .btn-blue:hover {
  color: #008390; /*fallback */
  color: var(--mmb-blue); 
  border-color: #008390; /*fallback */
  border-color: var(--mmb-blue);  
}
.menu-toggled-mobile {
  display: none;
}
.menu-toggled-mobile a{
  color: black;
  line-height: 1.2;
}
.menu-toggled-mobile a:hover{
  text-decoration: none;
}
.menu-toggled-mobile .active {
  color: #f15700; /*fallback */
	color: var(--mmb-orange);
}

/* all site */
.theme-grey  {
  background-color: #e9e9e9; /*fallback */
  background-color: var(--mmb-grey-light);
}
.theme-orange  {
  background-color: #f15700; /*fallback */
  background-color: var(--mmb-orange);
}
.theme-blue-light {
  background-color: #7cc3ca; /*fallback */
  background-color: var(--mmb-blue-light);
}
.theme-blue  {
  background-color: #008390; /*fallback */
  background-color: var(--mmb-blue);
}
.font-white {
  color: white;
}
.font-blue {
  color: #008390; /*fallback */
  color: var(--mmb-blue);
}
.font-orange {
  color: red;
}
.pad-0 {
  padding: 0 0 0 0;
}
.row-0rm {
  margin-right: 0px;
  margin-left: 0px;
}
.header {
  padding-top: 10px;
  background-color: transparent;
  white-space:nowrap;
  position:relative;
  z-index:9;
}
.header-fixed {
  position: fixed;
  width: 100%;
  height: auto;
  top:0;
  z-index:9;
}
.unselectable {
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}
.regular-splash {
	z-index:0;
}
.h-full-screen {
  min-height: 100vh;
}
.hover-ptr {
	cursor:pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 3px;
  background-color: #333;
  margin: 8px 0 0 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform:  rotate(-45deg) translate(-9px, 6px);
  transform:          rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  -webkit-transform:  rotate(45deg) translate(-8px, -8px);
  transform:          rotate(45deg) translate(-8px, -8px);
}
.regular-menu-left {

}
.regular-menu-center{
  font-size: 1.666em;
  }
.regular-menu-center .active {
  color: #f15700; /*fallback */
	color: var(--mmb-orange);
}
.regular-menu-center, .regular-menu-center a {
	/*hover function in jquery*/
	line-height: 0.90;
	color: black;
	text-decoration: none;
	cursor:pointer;
}
.regular-menu-center a:hover, .menu-toggled li :hover{
	text-decoration:none;
}
.regular-menu-center a:active, .menu-toggled li :active{
	text-decoration:none;
}
.regular-menu-right-lang {
  font-size: 0.95rem;
  padding-bottom: 0px;
}
.regular-menu-right-lang span:hover {
  color: #929292; /*fallback */
  color: var(--mmb-grey);
}
.regular-menu-right, .regular-menu-right a {
	color: black;
	text-decoration: none;
}
.regular-menu-right-icon {
  padding-bottom: 4px;
}
.title-toggled {
  font-size: 2.777em; 
  line-height: 0.96em; /* 48px: 2px under font-size of 50px = 0.96*/
  z-index: 9;
}
.menu-toggled{
  visibility: hidden;
  font-size: 1em;
  line-height: 1.555em; /* 28px: 10px over font-size of 18px = 0.555*/
  z-index:9;
}
.menu-toggled-padding-top{
  padding-top: 5%;
  padding-bottom: 3%;
}
.menu-toggled ul, .menu-toggled-mobile ul {
	list-style-type: none; 
	padding-left:0;
 }
.theme-blue .menu-toggled {
  background-color: #7cc3ca; /*fallback */
  background-color: var(--mmb-blue-light);
}
.theme-orange .menu-toggled {
  background-color: #ffc495; /*fallback */
  background-color: var(--mmb-orange-light);
}
.menu-toggled, .menu-toggled a, .title-toggled {
	color: black;
}





/* content pages */
.background-white {
	background-color: white;
	}
  .content-break-l {
  padding-top: 80px;
}
.content-break-m {
  padding-top: 40px;
}
.content-break-s {
  padding-top: 10px;
}
.content-title {
	font-size: 2.777em;
  line-height: 1em;
}
.content-text {
  font-size: 1.666em;
  line-height: 1.1em;                                             /* 36 px */ 
}
.content-text-lh-small {
  font-size: 1.666em;
  line-height: 1.0334em;       /* 31 px */ 
}
.anchor-offset { 
  position:relative;
}
.anchor-offset-start {
 position:absolute;
 top:0px; 
 /* top is modified by jquery when the menu is fixed*/
}
.pad-between {
 padding-top: 1rem;
 padding-bottom: 3rem;
}


/* second life */
.img-lake-bkgnd {
  background: linear-gradient(to right, white 50%, white 50%, #f15700 10%, #f15700 100%); /*fallback */
  background: linear-gradient(to right, white 50%, white 50%, var(--mmb-orange) 10%, var(--mmb-orange) 100%);
}
.img-lake-bkgnd .container{
  background-color: #f15700; /*fallback */
  background-color: var(--mmb-orange);
}

/* download */
.app_store_btn {
  border-radius: 10px;
  background: #f15700; /*fallback */
  background: var(--mmb-orange);
}



/* Arrow Jump down */
.bounce-down {
	width: 60px;
  padding-top: 20px;
  padding-bottom: 25px;
	-moz-animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	animation: bounce 2s infinite;
  z-index:8;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* Register */
.register-price {
	font-size: calc(2.777em*2);
}





/* Cities */
/* default 0 to 479 */
/* xs =  480 to 767 */
/* sm =  768 to 991 */
/* md =  992 to 1199*/
/* lg = 1200 to x   */
.city-hide {
  display: none;
}
.cities-txt, .cities-txt a {
	line-height: 0.5;
	text-decoration: none;
	color: black;
}
.cities-coord-area-center, .cities-coord-area-poly {
  display: none;
}
.cities-right{
  max-width: 450px;
}
.cities-title {
  color: white;
  padding-top: 30px;
}
.cities-content {
  color: black;
  font-size: calc(1.666em*0.6); /* 18 px */
  padding-top: 10px;
}
.cities-bot{
  background-color: #7cc3ca; /*fallback */
  background-color: var(--mmb-blue-light);
}
.city-link{
  color: #008390; /*fallback */
  color: var(--mmb-blue);
  text-decoration: none;
}
#my_osm_widget_map { /* use the same name as <div id=""> */
	width: 100%; /* important! if you need full width display */
	height: 470px; /*Make sure the map container has a defined height*/
	margin: 0;
	border-radius: 0px;
}






/* About */
@keyframes team-parts-bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform:     translateY(0);
    transform:         translateY(0)
  }
  40% {
    -webkit-transform: translateY(-20px);
    -ms-transform:     translateY(-20px);
    transform:         translateY(-20px)
  }
  60% {
    -webkit-transform: translateY(-10px);
    -ms-transform:     translateY(-10px);
    transform:         translateY(-10px)
  }
}
#div_team {
  padding: 0;
  margin-left: -15px; 
  margin-top: -10%;
}
.team-parts {
  -webkit-animation-duration: 1s;
    animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: 
}
.team-parts:hover {
  cursor:pointer;
  animation-name: team-parts-bounce;
    -moz-animation-name: team-parts-bounce;
}
.bubble-rect {
  height: auto;
  display: none;
  position: absolute; 
  color: white; 
  background-color: #008390; /*fallback */
  background-color: var(--mmb-blue);
  padding: 20px 20px 20px 20px;
  margin: 0 0 0 0;
  border-radius: 10px;
  cursor:pointer;   
}
.bubble-arrow {
  display: none;
  position: absolute; 
  padding: 0px 0px 0px 0px; 
 
  height: auto;
}


/* Contact */
.btn-contact-email {
  width: 100%;
  background-color: transparent;
 
  border-width: 0.45vh;
  border-radius: 10px;
  border-style: solid;
  border-color: white;


  
  padding: 10px 10px 10px 10px;
  margin: 0 0 0 0;
 
}

.btn-contact-email a {
  font-size: 0.9*1.666em;
  text-decoration: none;
  color:white;
}


/* Experience */
.bubble-who-exp {
  margin: 0px 20px 0px 20px; 
}
.bubble-rect-exp {
  color: white; 
  padding: 20px 30px 20px 30px; 
  margin: 0px 20px 0px 20px; 
  border-radius: 10px;
}
.bubble-arrow-exp-offset {
  margin-top:-50px;
}
.bubble-arrow-exp {
  padding: 0px 0px 0px 0px;
  margin-left: -5%;
  height: 50px;
  width:auto;  
}
.bubble-arrow-exp-l {
}
.bubble-arrow-exp-r {
  float: right;
}
.piechart img {
  padding-top: 4rem;
}


/* FAQ */
.faq .faq-item{
  padding-top: 1rem;
}
.faq .card{
  background-color:#cfcdcd;
  border-radius: 10px;
  border: none;
}
.faq .on{
  background-color: #f15700; /*fallback */
  background-color: var(--mmb-orange);
}

.faq .card-header{
  background-color:transparent;
  padding: 0.8rem 1.1rem 0.8rem 1.1rem;
  text-decoration: none;
  border: none;
  border-radius: 10px;
}
.faq .card-body-pad{
  padding: 0.8rem 1.1rem 0.8rem 1.1rem;
  color: white;
}
.faq button{
  width: 100%;
  font-size: 1.666em;
  line-height: 1.1em;   
  background-color:transparent;
  color:white;
  text-decoration: none;
  border-radius: 10px;
  border: none;
  outline:none;
}
.faq button:hover{
  font-size: 1.666em;
  line-height: 1.1em;   
  background-color:transparent;
  color:white;
  text-decoration: none;
  outline:none;
}
.faq img{
  height: 1.666em;
}
.faq .faq-link{
  color: #ffc495; /*fallback */
  color: var(--mmb-orange-light);
}


/**
reference:
http://stackoverflow.com/a/20548578
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
*/


/* Form: order; */
.field_input {
  line-height: 2.1em;
  width: 40%;
}
.field_confirm {
  background-color: #e9e9e9; /*fallback */
  background-color: var(--mmb-grey-light);
  color: #929292; /*fallback */
  color: var(--mmb-grey);
  font-size:  1em;
  text-decoration: none;
  border: none;
  user-select: none
}
.btn-form {
  width: 180px;
 
  font-size: 1.2em;
  text-decoration: none;

  border-width: 2px;
  border-radius: 10px;
  border-style: solid;
 
  padding: 5px 20px 5px 20px;
  margin: 5px  5px  5px 0px;
}
.btn-form a {
  text-decoration: none;
}
.txt-validate {
  color: #008390; /*fallback */
  color: var(--mmb-blue);
  visibility: hidden; 
}

.txt-important {
  color: #f15700; /*fallback */
  color: var(--mmb-orange);
}

/* footer */
.footer, .footer p, .footer a {
  background-color: #e9e9e9; /*fallback */
  background-color: var(--mmb-grey-light);
  color: #929292; /*fallback */
  color: var(--mmb-grey);
  font-size:  1em;
  text-decoration: none;
}