.mode-switcher {
	position: fixed;
	right: 36px;
	top: 15px;
	z-index: 299;
}

.mode-switcher .pts-text,
.mode-switcher .pts-switcher {
	display: block;
	overflow: hidden;
}

.mode-switcher .pts-text {
	font-size: 14px;
	margin-bottom: 4px; 
	text-transform: uppercase;
	font-weight: 600;
}

.mode-switcher .pts-text span.tlight,
.mode-switcher.pts-switch-active .pts-text span.tdark { display: none; }

.mode-switcher .pts-text span.tdark,
.mode-switcher.pts-switch-active .pts-text span.tlight { display: inline-block; }

/* --------------------------------------------------------------
	SWITCH
--------------------------------------------------------------  */

.switch-toggle {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
}

.switch-toggle + label {
	display: block;
	position: relative;
	cursor: pointer;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* --------------------------------------------------------------
	SWITCH 1 - ROUND
----------------------------------------------------------------- */
input.switch-toggle-round + label {
	padding: 2px;
	width: 60px;
	height: 30px;
	background-color: #DDD;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

input.switch-toggle-round + label::before,
input.switch-toggle-round + label::after {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	content: "";
}

input.switch-toggle-round + label::before {
	right: 1px;
	background-color: #F1F1F1;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	transition: background 0.4s;
}

input.switch-toggle-round + label::after {
	width: 28px;
	background-color: #FFF;
	-webkit-border-radius: 100%;
	-o-border-radius: 100%;
	border-radius: 100%;
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transition: margin 0.4s;
	-moz-transition: margin 0.4s;
	-o-transition: margin 0.4s;
	transition: margin 0.4s;
}

input.switch-toggle-round:checked + label::before { background-color: #1ABC9C; }
input.switch-toggle-round:checked + label::after { margin-left: 30px; }

/* --------------------------------------------------------------
	SWITCH 1 - ROUND- MINI
----------------------------------------------------------------- */
input.switch-rounded-mini.switch-toggle-round + label {
	padding: 1px;
	width: 32px;
	height: 16px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
}

input.switch-rounded-mini.switch-toggle-round + label::before {
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
}

input.switch-rounded-mini.switch-toggle-round + label::after { width: 15px; }
input.switch-rounded-mini.switch-toggle-round:checked + label::after { margin-left: 15px; }

/* --------------------------------------------------------------
	SWITCH 1 - ROUND- LARGE
----------------------------------------------------------------- */
input.switch-rounded-large.switch-toggle-round + label {
	width: 90px;
	height: 45px;
	-webkit-border-radius: 45px;
	-o-border-radius: 45px;
	border-radius: 45px;
}

input.switch-rounded-large.switch-toggle-round + label::before {
	-webkit-border-radius: 45px;
	-o-border-radius: 45px;
	border-radius: 45px;
}

input.switch-rounded-large.switch-toggle-round + label::after { width: 43px; }
input.switch-rounded-large.switch-toggle-round:checked + label::after { margin-left: 45px; }


/* --------------------------------------------------------------
	SWITCH 1 - ROUND- XLARGE
----------------------------------------------------------------- */
input.switch-rounded-xlarge.switch-toggle-round + label {
	width: 120px;
	height: 60px;
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

input.switch-rounded-xlarge.switch-toggle-round + label::before {
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

input.switch-rounded-xlarge.switch-toggle-round + label::after { width: 58px; }
input.switch-rounded-xlarge.switch-toggle-round:checked + label::after { margin-left: 60px; }


/* -----------------------------------------------------------
	SWITCH 2 - ROUND FLAT
-------------------------------------------------------------- */
input.switch-toggle-flat + label {
	padding: 2px;
	width: 60px;
	height: 30px;
	background-color: #DDD;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	transition: background 0.4s;
}

input.switch-toggle-flat + label::before,
input.switch-toggle-flat + label::after {
	display: block;
	position: absolute;
	content: "";
}

input.switch-toggle-flat + label::before {
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	background-color: #FFF;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	transition: background 0.4s;
}

input.switch-toggle-flat + label::after {
	top: 4px;
	left: 4px;
	bottom: 4px;
	width: 22px;
	background-color: #DDD;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	-o-border-radius: 22px;
	border-radius: 22px;
	-webkit-transition: margin 0.4s, background 0.4s;
	-moz-transition: margin 0.4s, background 0.4s;
	-o-transition: margin 0.4s, background 0.4s;
	transition: margin 0.4s, background 0.4s;
}

input.switch-toggle-flat:checked + label { background-color: #1ABC9C; }

input.switch-toggle-flat:checked + label::after {
	margin-left: 30px;
	background-color: #1ABC9C;
}


/* -----------------------------------------------------------
	SWITCH 2 - FLAT - MINI
-------------------------------------------------------------- */
input.switch-flat-mini.switch-toggle-flat + label {
	padding: 1px;
	width: 32px;
	height: 16px;
	-webkit-border-radius: 16px;
	-o-border-radius: 16px;
	border-radius: 16px;
}

input.switch-flat-mini.switch-toggle-flat + label::before {
	top: 1px;
	left: 1px;
	bottom: 1px;
	right: 1px;
	-webkit-border-radius: 16px;
	-o-border-radius: 16px;
	border-radius: 16px;
}

input.switch-flat-mini.switch-toggle-flat + label::after {
	top: 2px;
	left: 2px;
	bottom: 2px;
	width: 12px;
	-webkit-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
}

input.switch-flat-mini.switch-toggle-flat:checked + label::after { margin-left: 16px; }


/* -----------------------------------------------------------
	SWITCH 2 - FLAT - LARGE
-------------------------------------------------------------- */
input.switch-flat-large.switch-toggle-flat + label {
	width: 90px;
	height: 45px;
	-webkit-border-radius: 45px;
	-o-border-radius: 45px;
	border-radius: 45px;
}

input.switch-flat-large.switch-toggle-flat + label::before {
	-webkit-border-radius: 45px;
	-o-border-radius: 45px;
	border-radius: 45px;
}

input.switch-flat-large.switch-toggle-flat + label::after {
	width: 37px;
	-webkit-border-radius: 37px;
	-o-border-radius: 37px;
	border-radius: 37px;
}

input.switch-flat-large.switch-toggle-flat:checked + label::after { margin-left: 45px; }



/* -----------------------------------------------------------
	SWITCH 2 - FLAT - XLARGE
-------------------------------------------------------------- */
input.switch-flat-xlarge.switch-toggle-flat + label {
	padding: 2px;
	width: 120px;
	height: 60px;
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

input.switch-flat-xlarge.switch-toggle-flat + label::before {
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}
input.switch-flat-xlarge.switch-toggle-flat + label::after {
	width: 52px;
	-webkit-border-radius: 52px;
	-o-border-radius: 52px;
	border-radius: 52px;
}

input.switch-flat-xlarge.switch-toggle-flat:checked + label::after { margin-left: 60px; }

/*

FLOATING BUTTONS

*/

#presentation{
  width: 480px;
  height: 120px;
  padding: 20px;
  margin: auto;
  background: #FFF;
  margin-top: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
  transition: all 0.3s; 
  border-radius: 3px;
}

#presentation:hover{
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: all 0.3s;
  transform: translateZ(10px);
}

#floating-button{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #db4437;
  position: fixed;
  bottom: 80px;
  right: 23px;
  cursor: pointer;
  box-shadow: 0px 2px 5px #666;
}

.plus{
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}

#container-floating{
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
}

#container-floating:hover{
  height: 400px;
  width: 90px;
  padding: 30px;
}

#container-floating:hover .plus{
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.edit{
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}

#container-floating:hover .edit{
  animation: edit-in 0.2s;
   animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in{
    from {opacity: 0; transform: rotateZ(-70deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

@keyframes edit-out{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(-70deg);}
}

@keyframes plus-in{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(180deg);}
}

@keyframes plus-out{
    from {opacity: 0; transform: rotateZ(180deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

.nds{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform:  scale(0);
  cursor: pointer;
}

.nd1{
  background: transparent;
  right: 32px;
  bottom: 150px;
  animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
  animation-fill-mode:  forwards;
}

.nd2{
  background: transparent;
  right: 32px;
  bottom: 210px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

.nd3{
  background: transparent;
  right: 32px;
  bottom: 270px;
  animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
  animation-fill-mode:  forwards;
}

.nd4{
  background: transparent;
  right: 32px;
  bottom: 330px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

.nd5{
  background: transparent;
  right: 32px;
  bottom: 390px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

.nd6{
  background: transparent;
  right: 32px;
  bottom: 450px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

@keyframes bounce-nds{
    from {opacity: 0;}
    to {opacity: 1; transform: scale(1);}
}

@keyframes bounce-out-nds{
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(0);}
}

#container-floating:hover .nds{
  
  animation: bounce-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

#container-floating:hover .nd1{
  animation-delay: 0.08s;
}
#container-floating:hover .nd2{
  animation-delay: 0.16s;
}
#container-floating:hover .nd3{
  animation-delay: 0.24s;
}
#container-floating:hover .nd4{
  animation-delay: 0.32s;
}
#container-floating:hover .nd5{
  animation-delay: 0.4s;
}

.letter{
  font-size: 23px;
  font-family: 'Roboto';
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  line-height: 40px;
}

.reminder{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.profile{
  border-radius: 50%;
  width: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}

/*

SECTION TERMINAL

*/

.terminal_section {
	margin-top: 15px;
	margin-bottom: -15px;
	height: 220px;
	width: 100%;
}