html {
  scroll-behavior: smooth;
}

body, button {
	font-family: 'Eczar', serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
	background: #fff;
}

h1, h2, h3, h4{
    font-weight: bold;
}
    
h1{
    text-align: center;
    font-size: 48px;
    margin: 15px;
}

h2 {
	text-align: center;
	font-size: 25px;
} 

h3 {
	text-align: left;
	font-size: 20px;
	margin-bottom: 0px;
}

.subtitle{
	font-size: 20px;
	text-align: center;
	margin: 30px 0px 50px 0px;
}

h3.madeup {
	margin-left: 20px;
}

h3 .material-icons{
	margin-right: 5px; 
	vertical-align: bottom;
}

h1 p, h2 p, h3 p{
	font-weight: normal;
    margin: 10px;
}

#maintitle{
/*	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;*/
}

#menutitle{
	/*max-height: 100px; dunno why*/
  	transition-duration: 0.5s;
	transition-property: max-height;
	overflow: hidden;
}

#menutitle.collapsed{
	max-height: 0px;
}

blockquote{
	border-left: 5px solid #888;
	text-align: justify;
}

blockquote::before, blockquote p:last-child::after {
	font-family: 'Gelasio', serif;
	font-size: 55px;
	color: #555;
}

blockquote::before {
  	content: "“";
    float: left;
    margin-left: -30px;
    padding-top: 24px;
    background: white;
    line-height: 10px;
    
}

blockquote p:last-child::after {
	content: "”";
	line-height: 0;
	vertical-align: text-bottom;
	display: inline-block;
	margin-bottom: -12px;
	margin-left: 5px;
}

.section {
	padding:0;
}

.invisible{
	display:none;
}

a, nav a, .sidenav a {
	color: #000;
	font-weight: bold;
}

a:focus, .sidenav div:focus {
	outline:none;
}

.disabled {
	color:#aaa;
}

.disabled a, .sidenav li.disabled > a{
	color:#aaa;
	font-weight: normal;
}

.disabled > h3 > p{
	display: none;
}

.pressable{
	cursor: pointer; 
	font-weight: bold;
}

.sidenav h1{
	font-size: 30px;
	margin: 20px 10px 0px 10px;
}


.sidenav h3{
	font-weight: normal;
	margin: 15px;
}

.sidenav > ul li a{
	font-size: 18px;
	line-height: 48px;
}
.sidenav > ul li i.material-icons{
	color:inherit;
	margin: 0 10px 0 10px;
}

.btn i.material-icons{
    margin: 0 7px 2px -5px;
    vertical-align: middle;
}

.sidenav .chaptersymbol{
	margin: 30px 10px 20px 10px;
}

.sidenav li > a {
	font-size: 16px;
	line-height: 16px;
	display: block;
    height: auto;
    padding: 0;
}

.sidenav #navChapters a {
    padding: 10px 5px 10px 10px;
}

.navbar-fixed {
    /*z-index: 1000;*/
    height: 56px;
    display:none; /* replaced with button*/
}

nav {
	background-color: #fff;
	color: #000;
	height: 56px;
}
/* children no longer inherit disableness
#navChapters li.disabled ul{
	display: none;
}
*/

#navChapters ul ul {
	padding-left: 10px;
}

/*#navChapters li li a::before{
    content: " ";
    color: #eee;
    margin-left: -13px;
    margin-right: 5px;
}*/

#navChapters ul ul li{
	border-left: 3px solid #eee;
}

#navChapters a.active {
    border-left: 3px solid #000;
    margin-left: -3px;
    font-weight: bold;
    /*background-color: rgb(255, 251, 124);*/
}

#navChapters li li a.active::before{
    color: #000;
    content: "▶";
    /*background-image: url("media/bullitt.png");*/
    width: 12px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center bottom;
    display: inline-block;
    margin-left: -13px;
    margin-right: 5px;
}

#navChapters a.active:hover {
    /*background-color: rgb(255, 211, 8);*/
}

#navChapters li.active .collapsible-header{
    color: #000;
}

#navChapters a {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
}

#navChapters .collapsible-header, #navChapters .collapsible-body, .nav-header {
	padding: 0;
}

#navChapters .collapsible-header a, .nav-header a {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
}

.page-ref{
	/*font-style: italic;*/
	font-weight: 500;
	margin-top: -15px;
	text-align: left;
}

.sidenav{
	width: 300px;
}

.sidenotnav{
	width: calc(100% - 300px);
	margin-right: 0;
	margin-left: auto;
	padding-bottom: 100px;
}

/****SECTIONS****/

#containor{
	width: 1300px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
}

#containor.disabledStart{
	display: none;
}

#precontainor{
	text-align: center;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
}

.pair{
	display: flex;
	flex-wrap: wrap;/* era nowrap pero no se por que. Ahora wrapea para tener el guide text abajo*/
	justify-content: center;
	/*align-items: center;*/
}

.quoteContainer{
	max-width: 41%;
	max-height: 500px;
	overflow: hidden;
	text-align: end;/*so halp button on the right*/

	transition-duration: 0.5s;
	transition-property: max-width, max-height;
}

.quotepart{
	/*max-width: 41%; taken to container*/
	width: 500px;
	text-align: end;
	/*flex-grow: 1;*/
	padding-left: 10px;
	opacity: 100;
	transition-duration: 0.3s;
	transition-property: opacity;
	max-height: 480px;/*para evitar desborde que rompe el doscroll*/
}

.mediapart{
	text-align: center;
	flex-grow: 10;
	position: relative;

	margin: 15px;

	height: 480px;
	transition-duration: 0.5s;
	transition-property: height;
}

/****GUIDED****/

#guideChoice{
	display:flex;
	flex-wrap: wrap;
    justify-content: center;
}

#guideChoice h2{
	margin: 15px;
}


#btnGuideNope, #btnGuideStart{
	text-align: center;
    width: 200px;
}

#choiceSeparator{
	width: 75px;
	height: 25px;
}

.guidepart{
	font-weight: 400;
    font-size: 22px;
    text-align: center;
    line-height: 26px;

    /*align-items: center;
  	justify-content: center;
  	display: flex;*/

	width: 100%;

	overflow-x: hidden;
	overflow-y: auto;
  	max-height: 0px;
  	opacity: 0;
  	transition-duration: 0.5s;
	transition-property: max-height, opacity;
}

.guidepart p{
    margin-top: 0.5em;
}


#guideControls{	

	width: inherit;
	height: 86px;
	
	display: flex;
	align-items: center;
  	justify-content: center;
  	overflow: hidden;

  	max-height: 0px;

  	transition-property: max-height;
	transition-duration: 0.5s;
	transition-delay: 0.3s;
}

#guideControls.cmon{	
	max-height: 90px;
}

.btnGuide{
	position: absolute;/* removed absolute to avoid it being pressed while invisible. Added it back because it got cropped by max height*/
	margin-left: -50px;
	margin-top: -50px;
	opacity: 1000;
	transition-duration: 0.3s;
	transition-property: opacity;
}

.guided .btnGuide{
	opacity: 0;
}

.guideon #containor .notguided, .guideon #containor h2, .guideon #containor h3, .guideon #containor .chaptersymbol{
	opacity: 0.15;
}

#navChapters {
	/*padding-top: 80px;
	padding-bottom: 50px;
	margin-bottom: 50px;*/
	overflow: hidden;
	transition-duration: 1s;
	transition-property: max-height;
	max-height: 2000px;
}

#explanations{
	max-width: 654px;
    margin-left: auto;
    margin-right: auto;
	/*display:inline-block;*/
}

.guideon #navChapters{
	max-height: 0px;
}

.guideon #explanations{
	display: none;
}

.btnBook{
	position: absolute;
	opacity: 0;
	display: none;
	transition-duration: 0.5s;
	transition-property: opacity;

	margin-top: 50px;
	width: 75px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
}

.btnBook .material-icons{
	font-size: 36px;
}

.btn-large i {
    font-size: 2rem;
}

.btn-larger {
    width: 76px;
    height: 76px;
}

.btn-larger i {
    font-size: 3.5rem;
    line-height: 76px;
}

.btn-floating.btn-extralarge {
    width: 100px;
    height: 100px;
    padding: 0;
}

.btn-extralarge i {
    font-size: 4rem;
    line-height: 96px;
}

.guided .btnBook{
	opacity: 100;
	display: inline-block;
}

.guided .quoteContainer{
	max-width: 0%;
	max-height: 150px;
}

.guided .quotepart{
	opacity: 0;
}

.guided .mediapart.current{
	height: 600px;
}

.guided .guidepart{
	max-height: 150px; /* era 200 innecesariamente bajo?*/
	min-height: 120px;
	opacity: 100;
}

.guidepart .step{
	display: none;
	margin-top: 15px;
	transition-duration: 0.5s;
	transition-property: opacity;
}
.guidepart .step.current{
	display: inline-block;
}

#btnEdit{
	right: 3vmin;
	bottom: 3vmin;
	z-index: 300;
}

#btnMenu{
	left: 3vmin;
	top: 3vmin;
	z-index: 300;
}


#btnBookSample, #btnGuideSample{
	display: none;
}

#btnBack, #btnPlay, #btnForward, #btnBeginning, #btnExitGuide{
	margin: 0 4vw 0 4vw;
}

#guideControls .btnDesc{
	display: none;
    color: black;
    text-transform: none;
    text-align: center;
    line-height: 22px;
    margin-top: 10px;
}


/*
#guideControls{
	position: fixed;
	z-index: 200;
	bottom: 0;
	margin: 0;
	width: 100%;
	background: rgba(256,256,256,0.8);
    box-shadow: 0 -4px 6px -2px rgba(0, 0, 0, 0.2);
}

.guided #btnExitGuide{
	position: fixed;
    right: 3vmin;
    top: 3vmin;
    margin: 0;
}
*/

/**** MEDIA REFs ****/

.mediaref{
	border-radius: 5px;  
}

.mediaref.start{
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.mediaref.middle{
	border-radius: 0px;
}
.mediaref.end{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.mediaref.link{
	cursor: pointer;
	font-weight: bold;
    padding: 2px 5px 0px 5px;
    display: inline-block;
    
}

.mediaMarker{
	position: absolute;
	border-radius: 10px;
	border: 5px solid rgba(0,0,0,0);
	z-index: 2;
	width: 100px;
	height: 100px;

	transition: opacity 0.5s;
	transition: background-color 0.5s;
}

.mediaMarker.animating{
	opacity: 1;

	animation-name: blink;
	animation-duration: 1s;
	animation-delay: 0.3s;
	animation-timing-function: linear;
	animation-iteration-count: 2;
}

.mediaMarker.animating.finished{
	background-color: rgba(255,255,255,0) !important;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.mediapart img, .mediapart video{
	height: auto;
	max-height: 100%;
	z-index: 0;
	position: relative;
}

.mediaContainer{
	position: relative;
	margin: auto;
	height: 100%;
	/*width: 100%;*/
    width: fit-content;
}

.mediaContainer .btn-play{
	height: 120px;
	width: 120px;
	background-image: url('media/btnpause.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 120px 120px;
    position: relative;
    
    opacity: 0;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.mediaContainer.pauseme:hover .btn-play{
	opacity: 0.33;
}

.mediaContainer.playme:hover .btn-play{
	opacity: 0.8 !important;
}

.mediaContainer.playme .btn-play{
	opacity: 0.5;
	background-image: url('media/btnplay.png');
}

.mediaContainer.playme.buthideme .btn-play{
	opacity: 0;
}

.guided .btn-play{
	display:none;
}

.chaptersymbol {
    text-align: center;
    height: 2px;
    margin: 75px 0px 50px 0px;
    background: black;
}

.chaptersymbol img {
    margin-top: -23px;
    height: 48px;
}
/*
.card-panel{
	margin:1rem;
}
.card-panel p:first-child{
	margin-top: 0;
}*/
.card-panel p:last-child{
	margin-bottom: 0;
}
.card-panel {
    padding: 1px 14px 5px 14px;
}
.card-panel h3{
	margin-block-start: 10px;
}

.tooltip {
	position: absolute;
	color: white;
    padding: 5px 10px;
    text-align: center;
    max-width: 150px;
	font-weight: normal;
	border-radius: 5px;
	background: #000;
}

.tooltip:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000;
    border-width: 15px;
    margin-left: -15px;
}

/* Smaller desktop ----------- */
@media only screen
and (max-width : 1599px) {

	body {
	    font-size: 14px;
	    line-height: 18px;
	}
	h1{
		font-size: 45px;
	}

	h2{
		font-size: 22px;
	}

	h3{
		font-size: 18px;
	}

	.subtitle{
		font-size: 18px;
	}

	.guidepart {
	    font-size: 18px;
	    line-height: 24px;
	}

	.sidenav{
		width: 250px;
	}

	.sidenotnav{
		width: calc(100% - 250px);
	}
	#containor{
		width: 1024px;
	}

	.quoteContainer{
	/*	flex-grow: 10;
		flex-shrink: 6;
		no se si alguna vez ayudo a alguien, peto mantiene a las quotes descentradas*/
	}

	.quotepart{
		width: 350px;
	}

	.mediapart{
		height: 350px;
		flex-grow: 1;
		flex-shrink: 10;
	}

	.pair.wideson{
		flex-wrap: wrap;
	}	
	.notguided .wideson .mediapart, .wideson .quoteContainer {
		max-width: 100%;
	}

	.notguided .wideson .quotepart {
		width: 100%; /*expand to full width since media is gone*/
	}

	.notguided .wideson .mediaContainer video, .wideson .mediaContainer img{
		max-height: 100%;
		max-width: 100%;
	}
}
/* Smartphones (landscape) ----------- */
/* ---- no more columns ----*/
@media only screen
and (max-width : 1100px) {

	body {
	    font-size: 13px;
	    line-height: 17px;
	}


	.guidepart {
	    font-size: 16px;
	    line-height: 22px;
	}

	.pair{
		flex-wrap: wrap;
	}

	#containor {
	    padding: 0px; /* to keep from stacking at 1024*/
	}

	.quotePart{
		width: 320px;
	}

	.mediapart{
		max-width: 100%;
		max-height: 320px;
		margin: 15px 0px;
	}

	.quoteContainer { /*so no more funny widening when vertically stacked*/
		max-width: 100%;
	}
	.notguided .quotepart {
		/*width: 100%; *//*expand to full width since media is gone << nidea, pero mejor lo dejo en 350 porque sino stackea verticalmente antes de lo necesario y jode la animacion entre guide y notguide*/
	}

	.mediaContainer video, .mediaContainer img{
	    max-width: 100%;
	    max-height: 100%;
	}

}
/* no more sideav  ----------- */
@media only screen
and (max-width : 992px) {
	.sidenotnav{
		width: 100%;/*adapt to hidden sidenav*/
	}
	#containor {
	    padding: 15px; /* go back to stacking if you want*/
	}
	.mediapart{
		margin: 15px; /*vos tambien*/
	}

	.notguided .quotepart {
		width: 100%; /*stackea de una vez por todas */
	}

	.quoteContainer {
	    transition-duration: 0.25s;
	}

}

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

	.mediapart{
		height: auto;/*the medium heights become too big*/
		max-height: 400px /* higher than landscape to fill whole screen*/
	}

	.btn-play{
		/*display: none;*//*double play on safari*/
	}

	.quoteContainer .btnBook {
	   /* margin-left: -35px;*/
	   display: none;
	}
	/*
	#btnBack, #btnPlay, #btnForward, #btnExitGuide{
		position: fixed;
		bottom: 3vmin;
	}
	*/
	/*
	#guideControls{
		position: fixed;
		z-index: 200;
		bottom: 0;
		margin: 0;
		width: 100%;
		background: rgba(256,256,256,0.8);
	    box-shadow: 0 -4px 6px -2px rgba(0, 0, 0, 0.2);
	}

	.guided #btnExitGuide{
		position: fixed;
	    right: 3vmin;
	    top: 3vmin;
	    margin: 0;
	}*/

	.guided .quoteContainer {
	    max-height: 0px;
	}

	.guided .guidepart{
		max-height: 250px; /* era 200 innecesariamente bajo?*/
	}

	#choiceSeparator{
		flex-basis: 100%;
	}

}

/* miniphones (portrait) ----------- */
@media only screen
and (max-width : 321px) {
	body {
	    font-size: 12px;
	    line-height: 16px;
	}

	h1{
		font-size: 30px;
	}

	h2{
		font-size: 18px;
	}

	h3{
		font-size: 16px;
	}
	
	.subtitle{
		font-size: 15px;
	}

	.guidepart {
	    font-size: 14px;
	    line-height: 20px;
	}
	
	#btnBack, #btnPlay, #btnForward, #btnBeginning, #btnExitGuide {
	    margin: 2.5vw;
	}
}

.displayNone{
	display: none !important;
}

.invisible{
	opacity: 0 !important;
}

/*MATERIALIZE*/

#preloader {
	left: 0px;
    right: 0px;
    margin: auto;
    position: absolute;
    top: 50vh;
}

#preloader .spinner-layer{
	border-color: white;
}

.modal{
	outline: none;
	max-height: 80%;
}

.sidenav .btn, .sidenav label, .modal .btn, .leaflet-popup-content .btn{
	height: auto;
	font-size: 18px;
    line-height: 18px;
    padding: 10px 15px  8px 15px;
    font-family: 'Eczar';
    text-transform: none;
}

html body .sidenav a {
	padding: 0;/*cointer materialize mobile*/
}

.sidenav .btn{
	margin: 0px 7px;
	border-radius: 19px;
}

.sidenav label .option{
    display: inline-flex;
    vertical-align: middle;
}

.sidenav .switch label .icon{
    display: inline-flex;
    vertical-align: top;
	padding-top: 10px;
    padding-left: 20px;
    width: 20%;
}
.sidenav .switch label .lever{
	margin-left: -10px;
    margin-top: 5px;
}

.sidenav .switch label div{
    display: inline-flex;
    vertical-align: top;
    padding-top: 18px;
}

.sidenav span.badge{
	margin-top: 17px;
	padding-top: 1px;
    background: black;
    border-radius: 3px;
    color:#fff;
}


.btn-floating{
	z-index:100;
	text-align: center;
}

#disablor
{
    z-index:899;

    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
 
    /* make it white but fully transparent */
    background-color: white; 
    opacity:.00; 
    filter: alpha(opacity=00); 
}

.notransition {
  -o-transition: none !important;
  -ms-transition: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

#toast-container{
	bottom: 15%;
}


/****VIDEO****/

.videoOverlay{
	display: flex;
	align-items: center;
  	justify-content: center;
  	position: absolute;
  	z-index: 2;
  	width: 100%;
  	height: 100%;
}


.player-controls {
  display:flex;
  position: absolute;
  bottom:0;
  width: 100%;
 
  transition:all .3s;
  flex-wrap:wrap;
  /*opacity: 0;*/
  /* transform: translateY(100%) translateY(-5px);*/
  margin-bottom:-15px;
  padding-top: 15px; /*tokeep mouse hover*/
}

.videoOverlay:hover .player-controls {
  opacity:1;
}

.player-controls > * {
  flex:1;
}

.progress {
  flex:10;
  position: relative;
  display:flex;
  flex-basis:100%;
  transition:all 0.3s;
  background:#333;
  cursor:ew-resize;

   margin: 0 2.8%;
   border-radius: 0px;

   height:5px;

   overflow: visible;
}

.progress-bar {
  width:50%;
  background:#ffd10c;
  /*background:#ffd10c;*/
  flex:0;
  flex-basis:50%;
}

.progress-ball {
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 0%;
    border-style: solid;
    border-color: #ffd10c;
    border-width: 0px;

	width: 5px;
	height: 5px;
	float: right;
	margin-right: -5px;
	background:#ffd10c;
	margin-top:0px;
	transition:all .3s;
	
}

.videoOverlay:hover .player-controls .progress {
  height:10px;
  margin-bottom:-5px;
}

.videoOverlay:hover .player-controls .progress-ball {
	height:18px;
	width:18px;
	margin-top:-4px;
	margin-right:-9px;
	border-radius: 100%;
	border-width: 3px;
	border-color: #333;
	background:#fff;
}

input[type=range] {
  -webkit-appearance: none;
  background:transparent;
  width: 100%;
  margin: 0 5px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255,255,255,0.8);
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.5px;
  box-shadow:0 0 2px rgba(0,0,0,0.2);
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #bada55;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
}