/*-----------------------------*\
 #MAIN
---------------------------------
 SETTINGS
 - colors variables
 - global page configuration
 - reset
\*-----------------------------*/


/*-----------------------------*\
 SETTINGS
\*-----------------------------*/

/* color variable */

:root {
  --orange: #ec5e24;
  --blue: #006f8e;
  --darkorange:#ca4a18;
  --red:#971b2f;
  --darkred:#831526;
  --darkgrey: #3C3C3C;
  --grey: #B2B2B2;
  --medium-grey: #606060;
  --extrasmall-space: 0.5vw;
  --small-space: 1vw;
  --medium-space: 1.5vw;
  --big-space: 2.5vw;
  --small-typo: 0.9vw;
  --medium-typo: 1.4vw;
  --title: 1.7vw;
  --big-title: 2vw;
  --ref-typo: 0.9vw;

}


/* global page configuration */

body {
  margin: 0px;
  background-color: var(--darkgrey);
  overflow: hidden;
}


/* reset */

li, ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0px;
}

.video-section {
  position: absolute;
  display: none;
  opacity:0;
  width:100vw;
  height:100vh;
  background-color: var(--orange);
}
.video-section.bellinzona {
  background: var(--orange);
  /*background: linear-gradient(79deg, rgba(255,153,51,1) 0%, rgba(151,27,47,1) 100%);*/
  background: linear-gradient(79deg, var(--orange) 53%, var(--orange) 99%);
}
.video-section.Medicalis {
  background: var(--blue);
  background: linear-gradient(79deg, var(--blue) 53%, var(--blue) 99%);
}


.logo {
  position: relative;
  background-image: url("images/logo.svg") ;
  background-size: contain;
  background-repeat: no-repeat;
  width:30vw;
  height: 40vh;
  margin-left: 35vw;
  margin-top: 40vh;

}

.logo.Medicalis{
  background-image: url("images/logo-medicalis.svg") ;
}