@charset "UTF-8";
/* CSS Document */



:root {
  --sidebar-width: 350px;
  --toggler-size: 40px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.wrapper {
  min-height: 100vh;
  min-width: 100vw;
  background: #102445;
  display: flex;

}

.sidebar {	z-index: 40000;
  width: var(--sidebar-width);
  transform: translateX(calc(var(--sidebar-width) * -1));
  /*background: linear-gradient(to bottom right, white, white);*/
	background: #102445;
  background-size: 400% 400%;
  background-position: 90% 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed!important;
  top: 0;
  bottom: 0;
  /*opacity: .5;*/
  transition: transform .6s, background-position 1s .6s;
	padding-left: 0px;
	
}

.input-toggler:checked ~ .sidebar {
 /* opacity: .9;*/
  opacity: 1!important;
  transform: translateX(0);
  background-position: 0 0;
	  position: fixed!important;

}

.content, .content div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
	

}

.content div[id] {
  display: none;
}

.menu {
  list-style-type: none;
	/*position: -webkit-sticky;  Safari 
position: sticky; */ 
	
}

.menu__link {
  color: #fff;
  font-weight: 100;
  text-decoration: none;
		/*font-size: calc(0.5em + 0.2vw)!important;
		line-height: calc(2.5em + 1vw)!important;
	letter-spacing: calc(0.02em + 0.1vw)!important;*/
	
font-size: 1rem!important;
  line-height: 2.2rem!important;	/* 
  font-size: calc(100% + 0.3vw + 0.8vh)!important;*/
	
	
	  transition-property: transform;
  /*transition-property: transform, opacity;*/
  transition-duration: .5s, .25s;
  transition-delay: 0s, .5s;
  animation-name: slidein;
  animation-duration: .5s;
  animation-iteration-count:1;
  animation-timing-function: ease-out;
	
}

.menu__link:hover,
.menu__link:focus,
.menu__link:active {
  color: #fff;
}

.menu-toggler {
  display: block;
  width: var(--toggler-size);
  height: var(--toggler-size);
  position: fixed;
  top: 50%;
  left: 10px;
  cursor: pointer;
  z-index: 1;
	z-index: 50000;
}



.menu-toggler__line {
  height: calc(var(--toggler-size) / 5);
  background: #fff;
	border: #00b4ba 1px solid;
  position: absolute;
  left: 0;
  right: 0;
	  transition-property: transform;
  /*transition-property: transform, opacity;*/
  transition-duration: .5s, .25s;
  transition-delay: 0s, .5s;
  animation-name: slidein;
  animation-duration: .5s;
  animation-iteration-count:1;
  animation-timing-function: ease-out;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line {
  transition-delay: .25s, 0s;
}


.menu-toggler__line:nth-child(2) {
  top: calc(var(--toggler-size) / 5 * 2);
animation-duration: .6s;
}

.menu-toggler__line:nth-child(3) {
  top: calc(var(--toggler-size) / 5 * 4);
    animation-duration:.7s;
}

.input-toggler {
  display: none;

}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line {
  background: #fff;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(1) {
  transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(2) {
  opacity: 0;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(3) {
  transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
}



/*GREEN MENU LINE*/


.menu-toggler__line-green {
  height: calc(var(--toggler-size) / 5);
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
	  transition-property: transform;
  /*transition-property: transform, opacity;*/
  transition-duration: .5s, .25s;
  transition-delay: 0s, .5s;
  animation-name: slidein;
  animation-duration: .5s;
  animation-iteration-count:1;
  animation-timing-function: ease-out;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line-green {
  transition-delay: .25s, 0s;
}


.menu-toggler__line-green:nth-child(2) {
  top: calc(var(--toggler-size) / 5 * 2);
animation-duration: .6s;
}

.menu-toggler__line-green:nth-child(3) {
  top: calc(var(--toggler-size) / 5 * 4);
    animation-duration:.7s;
}

.input-toggler {
  display: none;

}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line-green {
  background: black;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line-green:nth-child(1) {
  transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line-green:nth-child(2) {
  opacity: 0;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line-green:nth-child(3) {
  transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
}




/*END BLUE MENU LINE*/
















@keyframes slidein {
  from {left: -200%; right:200%;}
  to {left: 0; right: 0;}
}






/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
	

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
}

/* iPad 3 (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio : 2),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (min-resolution: 192dpi) { 

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
	
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	
}

/* Retina displays ----------- */
@media  only screen 
and (-webkit-min-device-pixel-ratio : 2), 
only screen 
and (min-resolution: 192dpi) {

}