/*
http://www.color-hex.com/color/a47c48
Main:		#a47c48 [164, 124, 72]
Dark:  		#41311c [65, 49, 28]
Light: 		#936f40 [147, 111, 64]
Orange:		#fc0	[255, 204, 0]
Blue:		#06f	[0, 102, 255 ]

logo:			2.4rem 300 | 800

card-title: 	2.0rem 300
card-p: 		1.2rem 400 | 500

menu-bar: 		1.2rem 400 | 500
language-bar:	1.0rem 400 | 500

footer-title:	1.6rem 400 | 500
footer-link:	1.0rem 400 | 500
*/


// ADOBE | Fonts: Museo, Museo Sans, Adobe Handwriting Ernie
// =====
@import url("https://use.typekit.net/sum4tnm.css");


// LESS
// ====
// @background-url:          "../images/background.jpg";
@background-url:          "../images/auditorio-radames-gnattali.jpg";
// @background-url:          "";
@background-opacity:      0%;
@background-color:        fade(@color-dark, 10%);

@font-size-base:          14px;
@font-weight-light:       300;
@font-weight-normal:      400;
@font-weight-semibold:    600;
@font-weight-bold:        700;
@font-weight-extrabold:   800;

@color-dark:              #000;    // 0, 0, 0
@color-light:             #fff;    // 255, 255, 255
@color-highlight:         #ffcc00; // 255, 204, 0
@color-highlight-light:   #ffee99; // 255, 238, 153
@color-highlight-dark:    #806602; // 128, 102, 2
@color-link:              #5198bb; // 81, 152, 187
@color-red:               #990000; // 153, 0, 0
@color-red-dark:          #4d0000; // 77, 0, 0
@color-green:             #4caf50; // 76, 175, 80
@color-green-dark:        #265828; // 38, 88, 40 | #064a36; // 6, 74, 54
@color-blue-shade1:       #001c37; // 0, 28, 55
@color-blue-shade2:       #0079a0; // 0, 121, 160
@color-blue-shade3:       #5198bb; // 81, 152, 187

@color-white-shade1:      #000;    // 0, 0, 0
@color-white-shade2:      #333;    // 51, 51, 51
@color-white-shade3:      #666;    // 153, 153, 153
@color-white-shade4:      #fff;    // 0, 0, 0

@color-black:             #000;

@color-red-cc:            #7e1830; // 126, 24, 48
@color-yellow-cc:         #e7b939; // 231, 185, 57


@max-small:               600px;
@min-med:                 601px;
@max-med:                 992px;
@min-large:               993px;
@max-large:              1200px;
@min-extra-large:        1201px;

@text-main:			      1.4rem;
@text-sub:			      1.1rem;
@fade-min:			      50%;
@fade-next:			      20%;
@border-radius:			  4px;
@header-height:           4rem;

@transition-time-quick:  .1s;
@transition-time-link:   .3s;
@transition-time-page:   .5s;
@transition-time-loader:  2s;
@transition-time-glow:    1s;

@font-face {
	
	font-family: DNMCA;
	src: url("https://cdn.dnmca.com/fonts/dnmca_ProximaNova-Light.ttf") format("truetype");
	font-weight: @font-weight-light;
	
}
@font-face {
	
	font-family: DNMCA;
	src: url("https://cdn.dnmca.com/fonts/dnmca_ProximaNova-Regular.ttf") format("truetype");
	font-weight: @font-weight-normal;
	
}
@font-face {
	
	font-family: DNMCA;
	src: url("https://cdn.dnmca.com/fonts/dnmca_ProximaNova-Semibold.ttf") format("truetype");
	font-weight: @font-weight-semibold;
	
}
@font-face {
	
	font-family: DNMCA;
	src: url("https://cdn.dnmca.com/fonts/dnmca_ProximaNova-Extrabold.ttf") format("truetype");
	font-weight: @font-weight-extrabold;
	
}

@-webkit-keyframes spin {

	0% {
		
		-ms-transform: rotate(0deg); 
		    transform: rotate(0deg); 
		
	}
	
	100% { 
	
		-ms-transform: rotate(360deg); 
		    transform: rotate(360deg); 
		
	}
	
}
@keyframes spin {

	0% {
		
		-ms-transform: rotate(0deg); 
		    transform: rotate(0deg); 
		
	}
	
	100% { 
	
		-ms-transform: rotate(360deg); 
		    transform: rotate(360deg); 
		
	}
	
}

@-webkit-keyframes glow {
	
	from { text-shadow: 0 0 10px @color-light, 0 0 20px @color-light, 0 0 30px @color-highlight, 0 0 40px @color-highlight, 0 0 50px @color-highlight, 0 0 60px @color-highlight, 0 0 70px @color-highlight; }
	
	to   { text-shadow: 0 0 20px @color-light, 0 0 30px @color-highlight-light, 0 0 40px @color-highlight-light, 0 0 50px @color-highlight-light, 0 0 60px @color-highlight-light, 0 0 70px @color-highlight-light, 0 0 80px @color-highlight-light; }

}
@keyframes glow {
	
	from { text-shadow: 0 0 10px @color-light, 0 0 20px @color-light, 0 0 30px @color-highlight, 0 0 40px @color-highlight, 0 0 50px @color-highlight, 0 0 60px @color-highlight, 0 0 70px @color-highlight; }
	
	to   { text-shadow: 0 0 20px @color-light, 0 0 30px @color-highlight-light, 0 0 40px @color-highlight-light, 0 0 50px @color-highlight-light, 0 0 60px @color-highlight-light, 0 0 70px @color-highlight-light, 0 0 80px @color-highlight-light; }

}

@keyframes blinker {

	50% {
	
		opacity: 0;
		
	}
	
}


html, 
body { height: 100%; }

html {
	
	background-color: @background-color;
	background-image: url(@background-url);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
		
	font-family: myriad-pro, sans-serif;
	text-rendering: optimizeLegibility;
	font-size: @font-size-base;
	letter-spacing: 0px;
	color: @color-dark;
	
	overflow-x: hidden; 
	overflow-y: auto;
	
	scroll-behavior: smooth;
	
	@media only screen and (max-width: @max-small) { scroll-behavior: auto; }
	
	// @media (orientation: portrait) { background-size: auto; }
	@media only screen and (max-width: @max-large) { font-size: @font-size-base * .85; }
	
}

body { margin: 0; }

div { 
	
	margin: 0;
	padding: 0;
	
}

a { text-decoration: none; }

.dnmca-anchor {

    display: block;
    position: relative;
    top:  @header-height * -3;
    visibility: hidden;

}

.dnmca-positioner {

	position: absolute;
	
	&.logo {
	
		top: -.5rem;
		left: 0;
	
	}
	
	&.ritornello {
	
		top: .5rem; 
		right: 3.75rem;
	
	}
	
	&.search {
	
		top: 1.5rem; 
		right: 4rem; 
		color: fade(@color-light, 100%);
	
	}
	
	&.house {
	
		top: -.25rem;
		left: -5rem;
	
	}

}

.dnmca-grid {

	&.decadary-alt {
	
		&-wrapper {
		
			display: grid;
			grid-gap: 0;
			grid-template-columns: auto auto auto auto auto auto;
			
			padding: 4rem;
			margin: -2rem 5% 4rem 5%;

			border: 1px solid fade(@color-dark, 20%);
			border-radius: @border-radius;
			background-color: fade(@color-light, 20%);

			@media only screen and (max-width: @max-small) { 
			
				grid-template-columns: auto auto;
				
				padding: 1rem 0 0 1rem;
				border: none;
				background-color: transparent;
				
			}
			
			@media only screen and (min-width: @min-med) and (max-width: @max-med) { 
			
				grid-template-columns: auto auto auto;
				
				padding: 2rem 1rem 2rem 4rem;
				margin: -2rem 0 4rem 0;
				
			}

			&.event { margin: 4rem 0; }
		
		}
	
		&-item {
		
			&.pictures {

				padding: 1rem 0;
								
				@image-square: 8rem;
				
				img {
				
					object-fit: cover;
					height: @image-square;
					width: @image-square;
			  
				}
				
				.polaroid {
					/*
					Frame: 88 mm × 107 mm
					Photo: 79 mm ×  79 mm
					Borders: 4.5 × 4.5 × 4.5 × 23.5
					*/
					
					@transition-time-polaroid: .25s;
					@line-height: 2rem;
					
					float: left;
					display: inline-block;
					width: @image-square;
					margin-right: -.5rem;
					padding: (4.5/79 * @image-square) (4.5/79 * @image-square) calc((23.5/79 * @image-square) - @line-height) (4.5/79 * @image-square);
					border: 1px solid fade(@color-dark, 30%);
					background-color: fade(@color-light, 100%);
					box-shadow: .75rem .75rem 1rem fade(@color-dark, 30%);
					
					font-size: 2rem;
					// font-family: adobe-handwriting-ernie, sans-serif;
					color: fade(@color-dark, 70%);
					text-align: center;
					line-height: @line-height;
					
					-webkit-transition: transform @transition-time-polaroid;
					   -moz-transition: transform @transition-time-polaroid;
					    -ms-transition: transform @transition-time-polaroid;
					     -o-transition: transform @transition-time-polaroid;
					
					
					&:hover { 
					
						transform: scale(1.2) !important;
					
						box-shadow: 0 0 1rem fade(@color-highlight, 100%),
									.75rem .75rem 1rem fade(@color-dark, 30%);
									
						@media only screen and (max-width: @max-small) {
						
							transform: inherit !important;;
							
							box-shadow: none;
						
						}
					
					}
					
					&.event { 
					
						font-size: 1.4rem; 
						
						&:hover { transform: inherit !important; }
					
					}
					
				}
				
			}
		
		}
	
	}

	&.decadary {

		&-wrapper {
		
			@margin: 12.5%;
			@offset: .5rem;
			@buffer:  5%;
			@cell:   (100% - (@margin + @buffer) * 2) / (11 - 4) ;
			
			display: grid;
			grid-gap: 0;
			grid-template-columns: calc(@margin + @offset) @buffer @cell @cell @cell @cell @cell @cell @cell @buffer calc(@margin - @offset);
			// grid-template-rows:    auto auto auto;
			padding: 0 5% 7rem 5%;
						
			a { color: inherit; }
		
		}
		
		&-item {
		
			position: relative; 
			top:  50%; 
			left: 50%; 
			
			margin: 0;
			padding: 1rem;
			
			text-align: center;
								
			-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);

			&.right { border-right: 2px solid fade(@color-white-shade3, 100%); }
			
			&.bottom { border-bottom: 2px solid fade(@color-white-shade3, 100%); }
			
			&.dashed { border-bottom: 2px dashed fade(@color-white-shade3, 100%); }
			
			@start:   3;
			@max:    12;		
			
			&.element1 {
			
				grid-column-start: @start;
				grid-column-end:   @start + 2;
			
			}
			
			&.element2 {
			
				grid-column-start: @start + 2;
				grid-column-end:   @start + 4;
			
			}
			
			&.element3 {
			
				grid-column-start: @start + 4;
				grid-column-end:   @start + 6;
			
			}
			
			&.element4 {
			
				grid-column-start: @start + 1;
				grid-column-end:   @start + 3;
			
			}
			
			&.element5 {
			
				grid-column-start: @start + 3;
				grid-column-end:   @start + 5;
			
			}
			
			&.element6 {
			
				grid-column-start: @start + 5;
				grid-column-end:   @start + 7;
			
			}
			
			&.element1,
			&.element2,
			&.element3,
			&.element4,
			&.element5,
			&.element6 {
			
				color: fade(@color-dark, 70%);
				font-weight: @font-weight-light;
				font-size: 2.8rem; 
				line-height: 2rem;
							
				background-color: transparent;
				text-shadow: none;
				
				-webkit-transition: background-color @transition-time-link ease, text-shadow @transition-time-link ease;
				   -moz-transition: background-color @transition-time-link ease, text-shadow @transition-time-link ease;
					-ms-transition: background-color @transition-time-link ease, text-shadow @transition-time-link ease;
					 -o-transition: background-color @transition-time-link ease, text-shadow @transition-time-link ease;
						transition: background-color @transition-time-link ease, text-shadow @transition-time-link ease;
			
				&:hover { 
				
					color: fade(@color-light, 100%); 
					font-weight: @font-weight-semibold;
									
					background-color: fade(@color-dark, 100%); 
					text-shadow: 0 0  1rem fade(@color-highlight, 70%),
								 0 0  1rem fade(@color-highlight, 50%);
					/*
					background-color: fade(@color-dark, 5%); 
					text-shadow: 0 0  1rem fade(@color-highlight, 70%),
					 			 0 0  1rem fade(@color-highlight, 50%);
					*/
				
				}		
			
			}
			
			&.line {
			
				grid-column-start: 1;
				grid-column-end:   @max;
				height: 1.5rem;
		
			}
			
			&-image {
			
				position: relative;
				
				&.start {
				
					top: 3rem;
					margin-top: calc(-1.5rem + 1px);
					margin-left: 100%;
					
				}
				
				&.end {
				
					margin-top: -36px;
					margin-left: -35.88px;
					
				}
						
				img { height: 72px; }
			
			}
		
		}
		
	}
	
	&.timeline {
	
		@grid-row-end: 3;
	
		&-wrapper {
		
			display: grid;
			grid-gap: 0;
			grid-template-columns: 5% 25% auto 5%;
			// grid-template-rows:    4rem 15rem auto 4rem;
			grid-template-rows:    4.5rem auto 4rem;
			
			@media only screen and (max-width: @max-med) { grid-template-columns: 5% 4rem auto 5%; }
		
		}
		
		&-item {
		
			&.gap { 
			
				border-right: .5rem dotted fade(@color-dark, 10%);
			
				&.start {
					
					height: 3rem;
					width: 30%;
					margin-left: -.5rem;
					
					@media only screen and (max-width: @max-med) { width: calc(5% + 4rem); }
				
				}
				
			}
			
			&.margins {
			
				grid-row-start: 1;
				grid-row-end:   @grid-row-end;
			
			}
		
			&.column { 
			
				grid-row-start: 1;
				grid-row-end:   @grid-row-end;
				
				position: relative;
				
				min-height: 4rem;
				padding-right: 2rem;
				border-right: .5rem solid fade(@color-dark, 10%); 
				
				// font-family: museo, serif;
				font-weight: @font-weight-light;
				font-size: 3.2rem;
				text-align: right;
				color: fade(@color-dark, 70%);
				
				@media only screen and (max-width: @max-small) { padding-right: 0; }
				
				.name {
				
					white-space: nowrap;
				
					@media only screen and (max-width: @max-med) { 
					
						transform: rotate(-90deg);

					}
				
				}
			
				.link {
				
					font-size: 1rem; 
					color: fade(@color-dark, 40%);
					
					@media only screen and (max-width: @max-small) { text-align: center; }
					
					a { 
						
						color: inherit;
						
						i { color: fade(@color-dark, 20%); }
						
						span {
						
							text-shadow: none;
							border-bottom: .25rem solid fade(@color-highlight, 0%);
							/*
							-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
							   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
								-ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
								 -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
									transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
							*/
						}
					
						&:hover,
						&:active { 
							
							color: fade(@color-dark, 70%);
							
							span {
							
								text-shadow: 0 0 .5rem fade(@color-light, 70%),
											 0 0  1rem fade(@color-light, 50%);
								border-bottom: .25rem solid fade(@color-highlight, 100%);
								font-weight: @font-weight-semibold;
							
							}
						
						}
					
					}
				
				}
			
				.video-container {
					
					display: block; 
					position: relative;
				
					& video { 
						
						width: 90%;
						margin-top: .5rem;
						border: .5rem solid fade(@color-light, 70%);
						border-radius: @border-radius;
						
						box-shadow: .75rem .75rem 1rem fade(@color-dark, 30%);
						
					}
				
					.play {
					
						position: absolute;
						top: 50%;
						right: 50%;
						transform: translate(50%, -50%);
						margin-right: -.5rem;
						font-size: 3rem;
						
						a { 
					
							color: fade(@color-light, 20%);
						
							&:active,
							&:hover { color: fade(@color-light, 70%); }
						
						}
						
					}
				
				}
				
			}
			
			.video-container-mobile {
					
				display: inline-block;
				position: relative;
				margin: -4rem 0 0 1rem;
			
				& video { 
					
					// width: calc(90% - 2rem);
					height: 8rem;
					// margin: -4rem 0 0 1rem;
					border: .25rem solid fade(@color-light, 70%);
					border-radius: @border-radius;
					
					box-shadow: .75rem .75rem 1rem fade(@color-dark, 30%);
					
					// @media only screen and (min-width: @min-med) and (max-width: @max-med) { width: 12rem; }
					
				}
			
				.play {
				
					display: inline-block;
					position: absolute;
					top: 50%;
					right: 50%;
					transform: translate(50%, -50%);
					font-size: 3rem;
					
					// @media only screen and (min-width: @min-med) and (max-width: @max-med) { transform: translate(calc(50% - 11rem), calc(-50% - 2.5rem)); }
					
					a { 
				
						color: fade(@color-light, 20%);
					
						&:active,
						&:hover { color: fade(@color-light, 70%); }
					
					}
					
				}
			
			}
			
			// &.pictures,
			&.event { 
			
				padding-left: 2rem;
				
				@media only screen and (max-width: @max-small) { padding-left: 1rem; }
			
				a { 
				
					color: inherit;
					
					-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
						-ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
						 -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
							transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					
				
					&:hover,
					&.hover { // Not the pseudo-element, the class itself
					
						padding: .5rem;
						border-left: .5rem solid fade(@color-highlight, 100%);
						background-color: fade(@color-highlight, 5%);
						
						color: fade(@color-dark, 100%);
						
						i { color: fade(@color-dark, 70%); }
						
						p { background-color: fade(@color-highlight, 5%); }
						
						.media { display: inline-block; }
						
					}
				
				}
				
			}
			
			&.pictures {

				padding: 3rem 0 1rem 0;

				@image-square: 12rem;
				
				img {
				
					object-fit: cover;
					height: @image-square;
					width: @image-square;
			  
				}
				
				span { white-space: nowrap; }
				
				.polaroid {
					/*
					Frame: 88 mm × 107 mm
					Photo: 79 mm ×  79 mm
					Borders: 4.5 × 4.5 × 4.5 × 23.5
					*/
					
					@transition-time-polaroid: .25s;
					@line-heigh: 3rem;
					
					display: inline-block;
					width: @image-square;
					margin-right: -.5rem;
					padding: (4.5/79 * @image-square) (4.5/79 * @image-square) calc((23.5/79 * @image-square) - @line-heigh) (4.5/79 * @image-square);
					border: 1px solid fade(@color-dark, 30%);
					background-color: fade(@color-light, 100%);
					box-shadow: .75rem .75rem 1rem fade(@color-dark, 30%);
					
					font-size: 3rem;
					// font-family: adobe-handwriting-ernie, sans-serif;
					color: fade(@color-dark, 40%);
					text-align: center;
					line-height: @line-heigh;
					
					-webkit-transition: transform @transition-time-polaroid;
					   -moz-transition: transform @transition-time-polaroid;
					    -ms-transition: transform @transition-time-polaroid;
					     -o-transition: transform @transition-time-polaroid;
						 
					
					&:hover,
					&.hover {
					
						box-shadow: 0 0 1rem fade(@color-highlight, 100%),
									.75rem .75rem 1rem fade(@color-dark, 30%);
									
						cursor: pointer;
					
					}
					
				}
				
				.pushpin {
				
					display: block; 
					position: absolute;
					
					-ms-transform: translate(-3rem, -15rem);
					    transform: translate(-3rem, -15rem);
						
					@media only screen and (max-width: @max-small) { 
					
						-ms-transform: translate(-2rem, -15rem);
							transform: translate(-2rem, -15rem);
							
					}
				
				}
			
			}
			
			&.event {
			
				padding-bottom:  6rem;			
			
				font-size: @text-sub;
				color: fade(@color-dark, 70%);
				line-height: 3rem;
				
				.media {
				
					display: none;
					position: absolute;
					right: calc(70% + 3px);
										
					.number { 
						
						display: inline-block;
						position: relative;
						bottom: .1rem;
						padding-right: .25rem; 
						font-size: .8rem; 
						color: fade(@color-dark, 70%);
						
					}

					.active,
					.inactive { 
						
						display: inline-block;
						padding-right: .5rem;
						
					}
					
					.active i { color: fade(@color-dark, 100%); }
					
					.inactive i { color: fade(@color-dark, 10%); }
					
				}
				
				.mark {
				
					display: inline-block; 
					position: absolute; 
					right: calc(70% - 2rem + 1px);
					
					font-size: 1.2rem; 
					color: fade(@color-dark, 20%);
					
					@media only screen and (max-width: @max-small) { right: calc(100% - 5% - 4rem - .75rem); }
					
					@media only screen and (min-width: @min-med) and (max-width: @max-med) { right: calc(100% - 5% - 8rem + 1px); }
					
				}
				
				.date {
				
					display: inline-block;
					width: 3rem;
					
					&.relevance {
					
						&-30 { font-weight: 800; }
					
						&-20 { font-weight: 400; }
						
						&-10 { font-weight: 300; color: fade(@color-dark, 60%); }
										
					}
				
				}
				
				.text {
				
					display: inline-grid; 
					color: fade(@color-dark, 100%);
					
					p {
		
						margin: -1rem -.5rem 0 -.5rem;
						padding: 0.5rem;
						line-height: @text-sub;
						
						&.extra { margin: -.5rem -.5rem 0 -.5rem; } 
					
					}
					
					&.relevance {
					
						&-30 { font-weight: 800; }
					
						&-20 { font-weight: 400; }
						
						&-10 { font-weight: 300; color: fade(@color-dark, 60%); }
										
					}
									
				}
			
			}
			
			&-subtitle {
			
				display: block;
				position: absolute;
				bottom: 1.5rem;
				left: 2rem;
				
				font-size: @text-sub;
				color: fade(@color-dark, 100%);
				
				padding: .5rem;
				border-left: .5rem solid fade(@color-highlight, 100%);
				background-color: fade(@color-highlight, 5%);
				
				.date {
				
					display: inline-block;
					width: 3rem;
					font-weight: 500;
				
				}
				
				.text {
				
					display: inline-block; 
					color: fade(@color-dark, 100%);
				
				}
			
			}
		
		}
	
	}
	
}

.dnmca-font {
	
	font-weight: @font-weight-normal;
	
	.light { font-weight: @font-weight-light; }
	
	.semibold { font-weight: @font-weight-semibold; }
	
	.extrabold { font-weight: @font-weight-extrabold; }
	
	&-original { font-family: DNMCA, sans-serif; }
	
}

.dnmca-text-align {
	
	&-left { text-align: left; }
	
	&-center { text-align: center; }
	
	&-right { text-align: right; }
	
}

.dnmca-color {
	
	&-highlight { color: @color-highlight !important; }
	
	&-green { color: @color-green !important; }
	
	&-green-dark { color: @color-green-dark !important; }
	
	&-red { color: @color-red !important; }
	
	&-red-dark { color: @color-red-dark !important; }
	
	&-dark {
		
		color: @color-dark;
		
		&-80 { color: fade(@color-dark, 80%); }
		
		&-60 { color: fade(@color-dark, 60%); }
				
		&-40 { color: fade(@color-dark, 40%); }
				
		&-20 { color: fade(@color-dark, 20%); }
		
		&-10 { color: fade(@color-dark, 10%); }
		
	}
	
	&-light {
		
		color: @color-light;
		
		&-80 { color: fade(@color-light, 80%); }
		
		&-60 { color: fade(@color-light, 60%); }
				
		&-40 { color: fade(@color-light, 40%); }
				
		&-20 { color: fade(@color-light, 20%); }
		
		&-10 { color: fade(@color-light, 10%); }
		
	}
	
}

.dnmca-input {
	
	margin: 0;
	
	& input,
	& textarea,
	& select { pointer-events: none; } // all inputs are disabled by default

	& input {
	
		outline: none;
		box-sizing: border-box;
		padding: 0;
		margin: 0 0 0 1.25rem;
		color: inherit;
		font-size: @text-main;
		height: $font-size * 2;
		width: calc(100% - 1.25rem);
		border: none;
		border-bottom: 1px solid fade(@color-dark, 10%);
		background-color: fade(@color-dark, 5%);
		
		@media only screen and (max-width: @max-med) { font-size: @text-sub; }

		&:focus {
		
			border-bottom: 1px solid fade(@color-highlight, 100%);
			background-color: fade(@color-dark, 10%);
		
		}
		
		&::-webkit-input-placeholder { color: fade(@color-dark, 50%); font-size: @text-sub; }
		&::-moz-placeholder { color: fade(@color-dark, 50%); font-size: @text-sub; opacity: 1; }
		&:-ms-input-placeholder { color: fade(@color-dark, 50%); font-size: @text-sub; }
		&:-moz-placeholder { color: fade(@color-dark, 50%); font-size: @text-sub; }
	
	}
	
	&.child {
	
		& input { 
		
			margin: 0; 
			width: 100%;
		}
	
	}
	
	&.numero input[type=text] { text-align: right; }
	
	& .inside { padding-right: 2.5rem; }
	
	& .main-search {
	
		pointer-events: visible;
	
		width: 60%;
		margin: 3rem 0 0 3.5rem; // calc((4rem - 1.4rem * 2) / 2) 0 0 0;
		padding: 0 2.5rem 0 1rem; // 0 3.3rem 0 1.2rem;
		border-radius: @border-radius;
		border: 1px solid fade(@color-dark, 20%);
		background-color: fade(@color-light, 60%);
		
		@media only screen and (max-width: @max-med) { 
		
			width: calc(100% - .25rem);
			margin: 2rem 0 0 0;
			
		}
		
		&:focus {
		
			// border: 1px solid fade(@color-highlight, 100%);
			box-shadow: 0 0 1rem fade(@color-red-cc, 70%);
			background-color: fade(@color-light, 90%);
		
		}
		
	}
	
	& .close {
	
		display: inline-block;
		margin: 0 -2rem;
		font-size: 1.25rem;
		color: fade(@color-dark, 80%);
		
		cursor: pointer;
	
	}
	
	& textarea { 
	
		height: 10rem;
		width: 100%;
		border: none;
		outline: none;
		
		&:focus { 
			
			outline: 1px solid fade(@color-link, 30%);
			background-color: fade(@color-dark, 5%);
		}
		
		&.small { height: 5rem; }

	}
	
	& .textarea-froala {
	
		font-size: @text-sub;
	
		&.curso { height: auto; } // 100vh;
		
		&.avaliacao { height: auto; } //20vh;
		
		&.email { height: auto; } //20vh;
	
	}
	
	&.textarea-vertical {

		background-color: fade(@color-light, 100%);
		border-radius: @border-radius;
		padding: 1rem;
				
		& textarea {
		
			padding: 0;
			background-color: transparent;
			font-size: @text-sub;
			// font-family: DNMCA;
			line-height: 1.5;
			resize: none;
			overflow: hidden;
			
		}
	
	}
	
	&.textarea-horizontal {

		background-color: fade(@color-light, 100%);
		border-radius: @border-radius;
		padding: 1rem;
				
		& textarea {
		
			height: @text-main * 2;
			padding: 0;
			background-color: transparent;
			font-size: @text-sub;
			// font-family: DNMCA;
			line-height: 1.5;
			resize: none;
			
		}
	
	}
	
	&.textarea-hidden-zone {
	
		position: relative;
		width: 100%; 
		height: 5rem;
		margin-top: -1 * $height - 1; 
		background-image: linear-gradient(0deg, fade(@color-light, 100%) 25%, fade(@color-light, 0%) 100%);
		
	}
	
	& label { left: 0; }
	
	&-label {
		
		padding-bottom: .25rem;
		font-size: 1rem;
		color: inherit;
	
	}
	
	&-comment {
		
		height: 2rem; 
		margin-top: -.5rem; 
		font-size: 1rem; 
		color: fade(@color-dark, @fade-min);
		
		&.photo {
			
			height: 1.5rem; 
			margin-top: 1rem; 
			
		}
	
	}
	
	&-ba {
	
		& input[type=text] { 
		
			box-sizing: border-box;
			padding: 0 0 0 1rem;
			background-color: fade(@color-light, 5%); 
			
		}
	
		& input:not([type]):disabled, 
		& input:not([type])[readonly="readonly"], 
		& input[type=text]:not(.browser-default):disabled, 
		& input[type=text]:not(.browser-default)[readonly="readonly"] { 
		
			color: fade(@color-light, @fade-min);
			border-bottom: 1px dotted fade(@color-light, 40%);
			background-color: fade(@color-light, 5%);
			
		}
		
		& input:not([type]):disabled+label,
		& input:not([type])[readonly="readonly"]+label,
		& input[type=text]:not(.browser-default):disabled+label,
		& input[type=text]:not(.browser-default)[readonly="readonly"]+label { color: fade(@color-light, 100%); }
	
		padding: 0 .75rem;
		
		&.title {
		
			padding: 0;
			font-size: 2rem; 
			font-weight: 500;
		
		}
		
		&.subtitle {
		
			padding: 0;
			font-size: 1.2rem; 
			font-weight: 300;
						
			& a {
			
				color: fade(@color-light, 40%);
		
				&, &:visited, &:hover, &:active { 
					
					border-bottom: none;
					box-shadow: none;
					
				}
		
				&:hover { color: fade(@color-light, 100%); }
			
			}
		
		}		
	
		&.numero input[type=text] { text-align: right; }
		
		&.big { 
		
			& .padding-right { padding-right: 1rem; }
		
			& input[type=text],
			& input[type=text].valid:not(.browser-default):focus,
			& input[type=text]:not(.browser-default):focus:not([readonly]) { 
			
				font-size: 2rem;
				font-weight: 300;
				border-bottom: none;
				background-color: fade(@color-light, 10%);
				padding: 0 1rem;
				box-sizing: border-box;
			}
			
			margin: 0;
			
		}
		
		&.alerta {
		
			font-size: 1rem;
			color: fade(@color-light, 100%);
			padding-left: 1rem;
		
		}
		
		& label { top: -1.75rem; }
		
		&.toolbar {
		
			width: 6rem;
			margin: 0;
			padding: 0 0 0 .5rem;
		
			& input[type=text] { 
			
				padding: 0;
				text-align: center; 
				
			}
		
		}
		
		&.icon,
		& .icon {
			
			& .input-right {
			
				display: inline-block;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 2rem;

			}
			
			& a:hover {
				
				border-bottom: none;
				box-shadow: none;
				cursor: pointer;
			
			}
			
		}
		
		& .icon { padding-right: 2rem; }
		
		& .comment {
		
			padding-top: .25rem;
			font-size: 1rem;
			color: fade(@color-light, @fade-min + @fade-next);
			
			& a {
			
				color: inherit;
		
				&, &:visited, &:hover, &:active { 
					
					border-bottom: 1px solid fade(@color-light, 50%);
					box-shadow: none;
					
				}
		
				&:hover { font-weight: 500; }
			
			}
		
		}
		
	}

	&.disabled-green {
	
		& input[type=text]:not(.browser-default):disabled {
	
			color: inherit;
			background-color: fade(@color-light, 40%);
			border-bottom: 1px solid fade(@color-green, 40%);
	
		}
	
	}
	
	&.margin-zero { margin: 0; }
	
	& .edit { 
	
		&-disabled { pointer-events: none; }
		
		&-enabled { pointer-events: auto; }
		
	}

}

.dnmca-select {

	width: calc(100% - 1.25rem);
	height: ~"calc(2.6rem + 3px)" !important; // (@text-main * 2) - 2rem
	font-size: @text-main;
	background-color: fade(@color-light, 5%);
	margin: 0 0 0 1.25rem;
	padding: 0;
	border: none;
	border-bottom: 1px solid fade(@color-light, 40%);
	border-radius: 0;

	&:focus { outline: none; }
	
	&.dark {
	
		background-color: fade(@color-dark, 5%);
		border-bottom: 1px solid fade(@color-dark, 10%);
		color: inherit;
		
		& option { background-color: fade(@color-dark, 30%); }
	
	}

}

.dnmca-display {
	
	&-table {
		
		display: table;
		width: 100%;
		
		&-row {	display: table-row;	}
		
		&-cell {

			display: table-cell;
			vertical-align: top;

			--column-width: 100%; /* HTML: style="--columns: 25%;" or style="--columns: 12rem;" */
			width: var(--columns);
			
			&.c2 { width: calc(100% / 2); }
			&.c3 { width: calc(100% / 3); }
			&.c4 { width: calc(100% / 4); }
			&.c5 { width: calc(100% / 5); }
			&.c6 { width: calc(100% / 6); }
			&.auto { width: auto; }
			&.min  { width: 1px; }
			
			&.column-padding { 
			
				padding: 0 1rem;
				
				&-table { padding: 0 1rem 0 1.5rem; }
				
				&-left { 
					
					padding: 0 0 0 1rem;
					
					&.extra { padding: 0 0 0 1.5rem; }
					
				}
				&-right { 
					
					padding: 0 1rem 0 0; 
					
					&.extra { padding: 0 0 1.5rem 0; }	
				}
				
			}
			
			&.column-divisor { border-left: 1px solid fade(@color-dark, 10%); }
			
		}
		
	}
	
}

.dnmca-infobox {
	
	padding: 1.5rem 1.5rem 2rem 1.5rem; 
	border: 1px solid fade(@color-green, 40%);
	border-radius: @border-radius;
	background-color: fade(@color-green, 20%);
	color: @color-green-dark; 
	font-size: @text-sub;
	font-weight: 300;

	& .welcome { font-size: 1.8rem; }
	
	& a.link {
			
		color: inherit;
		
		&, &:visited, &:hover, &:active { border-bottom: 1px solid fade(@color-green-dark, 20%); }
		
		&:hover { font-weight: 500; }
	
	}
	
	&.margin-top-bottom { margin: .5rem 0; }
	
	&.nome {
		
		font-weight: 500;
		font-size: 1.8rem;
		text-align: center;
	
	}
		
	&.termo {
		
		padding: 0;
		border: none;
		background-color: transparent;
		color: fade(@color-dark, @fade-min);
		
		& a {
			
			color: fade(@color-dark, @fade-min + @fade-next);
			
			&, &:visited, &:hover, &:active { 
				
				border-bottom: 1px solid fade(@color-link, 30%);
				box-shadow: 0 -4px 0 fade(@color-link, 30%) inset;
				
			}
			
			&:hover { font-weight: 500; }
			
		}
	
	}
	
	&.voucher {

		padding: 1rem;
		border: 1px solid fade(@color-highlight, 40%);
		background-color: fade(@color-highlight, 20%);
		color: @color-highlight-dark; 
		font-weight: 500;
		text-align: center;
		margin-bottom: 1rem;
		
		& input {
			
			background-color: fade(@color-light, 50%) !important;
			border-bottom: none !important;
			
		}
		
		& .note {
			
			font-size: @text-sub;
			text-align: left;
			color: @color-red;
			
		}
		
		&-pergunta {
		
			padding: 0 0 1rem .5rem;
			border: none;
			background-color: transparent;
			color: fade(@color-dark, @fade-min);
			font-size: @text-sub;
			
			& a {
				
				color: fade(@color-dark, @fade-min + @fade-next);
				
				&, &:visited, &:hover, &:active { 
					
					border-bottom: 1px solid fade(@color-link, 30%);
					box-shadow: 0 -4px 0 fade(@color-link, 30%) inset;
					
				}
				
				&:hover { font-weight: 500; }
				
			}
		
		}
		
	}
	
	&.avaliacao { 

		padding: 1rem;
		font-size: @text-main;
		text-align: left;
		line-height: 1.15;
		margin: 0 .5rem;
		border: 1px solid fade(@color-light, 90%);
		background-color: fade(@color-light, 70%);
		color: fade(@color-dark, 100%);
		
		&.comentarios { color: fade(@color-dark, 30%); }
		
		&.label {
		
			padding: 0 .5rem .25rem 0;
			font-size: 1rem;
			text-align: left;
			border: none;
			background-color: transparent;
			color: inherit;
			
			& .nivel { background-color: fade(@color-dark, 20%); }
			
			& .curso,
			& .nivel { font-weight: 500; }
			
			& .linha {

				&.superior {
				
					padding-top: 0;
					margin-bottom: .5rem;
					border-bottom: 1px solid fade(@color-light, 20%);
				
				}
				
				&.inferior {
				
					padding-top: 1.5rem;
					margin-bottom: 2.5rem;
				
				}
			
			}
		}
		
	}
	
	&.preco { 

		padding: 1rem;
		font-size: 3rem;
		text-align: center;
		margin: 0 .5rem;
		
		& .small { font-size: @text-sub; }
		
		&.ba { font-size: 2rem; }
		
		&.zero { background-color: fade(@color-green, 40%); }
		
		&.diferenca {
		
			border: 1px solid fade(@color-highlight, 40%);
			background-color: fade(@color-highlight, 20%); 
			color: @color-highlight-dark;
		
		}
		
		&.pago {
			
			border: 1px solid fade(@color-light, 20%);
			background-color: fade(@color-light, 10%);
			color: fade(@color-light, 100%);
		}
		
		&.esperado {
			
			border: 1px solid fade(@color-light, 20%);
			background-color: fade(@color-light, 40%);
			color: fade(@color-dark, @fade-min);
			font-weight: 500;
		}
		
		&.sinal {
		
			border: none;
			background-color: transparent;
			color: inherit;
		}
		
		&.diferenca,
		&.pago,
		&.esperado,
		&.sinal { font-size: 2rem; }
		
		&.label {
		
			padding: 0 .5rem .25rem 0;
			font-size: 1rem;
			text-align: left;
			border: none;
			background-color: transparent;
			color: inherit;
		}
	}
	
	&.gray { 
		
		border: 1px solid fade(@color-dark, 20%);
		background-color: fade(@color-dark, 10%);
		color: fade(@color-dark, @fade-min + @fade-next);
		margin: 0;
		
	}

	&.alerta {
		
		padding: 1rem;
		border: 1px solid fade(@color-highlight, 40%);
		background-color: fade(@color-highlight, 20%); 
		color: @color-highlight-dark; 
		font-weight: 500;
		text-align: center;
		
	}
	
	&.manutencao {
		
		padding: 1rem;
		border: 1px solid fade(@color-red, 40%);
		background-color: fade(@color-red, 20%); 
		color: @color-red-dark; 
		
	}
	
	&.pacote {
		
		padding: .5rem; 
		border: 1px solid fade(@color-highlight, 40%);
		background-color: fade(@color-highlight, 20%);
		color: @color-highlight-dark; 
		font-weight: 500;
		text-align: center;
		margin-bottom: 1rem;
		
	}
	
	&.pagamento {
		
		padding: 0;
		border: none;
		background-color: transparent;
		color: fade(@color-dark, @fade-min);
		font-size: @text-sub;
		
	}
	
	&.combobox { 
	
		padding: 2.5rem 1.5rem .5rem 1.5rem;
	
		& select {
		
			background-color: fade(@color-light, 40%);
			border-bottom: 1px solid fade(@color-green, 40%);
		}
	
	}
	
	&.turma { 
	
		padding: 1.5rem 1.5rem .5rem 1.5rem;
		border: 1px solid fade(@color-dark, 20%);
		background-color: fade(@color-dark, 10%);
		color: fade(@color-dark, @fade-min + @fade-next);
	
		& select {
		
			background-color: fade(@color-light, 40%);
			border-bottom: 1px solid fade(@color-dark, 40%);
		}
		
		& input[type=text] { background-color: fade(@color-light, 40%); }


		& input:not([type]):disabled, 
		& input:not([type])[readonly="readonly"], 
		& input[type=text]:not(.browser-default):disabled, 
		& input[type=text]:not(.browser-default)[readonly="readonly"] { 
		
			font-weight: 500;
			color: fade(@color-dark, @fade-min);
			border-bottom: 1px dotted fade(@color-dark, 40%);
			
		}
		
		& input:not([type]):disabled+label,
		& input:not([type])[readonly="readonly"]+label,
		& input[type=text]:not(.browser-default):disabled+label,
		& input[type=text]:not(.browser-default)[readonly="readonly"]+label { color: fade(@color-dark, @fade-min + @fade-next); }
		
		& input[type=text].valid:not(.browser-default):focus,
		& input[type=text]:not(.browser-default):focus:not([readonly]),
		& input[type=password].valid:not(.browser-default):focus,
		& input[type=password]:not(.browser-default):focus:not([readonly]) { 
		
			border-bottom: 1px solid fade(@color-link, 30%);
			background-color: fade(@color-light, 60%);
		
		}
	
	}
	
	&.midia {
		
		padding: 2rem 2rem 1rem 2rem; 
		border: 1px solid fade(@color-dark, 10%);
		background-color: fade(@color-light, 5%);
		color: inherit;
	
	}
	
	&-child {
		
		width: 20%;
		margin:  -8px auto 8px 32px;
		padding: 1rem 1.5rem;
		background-color: fade(@color-light, 10%);
		color: fade(@color-light, @fade-min + @fade-next);
		box-shadow: 0px 0.5rem 1rem fade(@color-dark, 20%) inset;
		border-radius: 0 0 @border-radius @border-radius;
		
		& a.link {
			
		color: inherit;
		
			&, &:visited, &:hover, &:active { border-bottom: 1px solid fade(@color-dark, 20%); }
			
			&:hover { font-weight: 500; }
		
		}
		
		&.status {
		
			width: 100%;
			margin: 0;
			padding: 0 2.5rem;
			background-color: transparent;
			color: fade(@color-dark, @fade-min + @fade-next);
			box-shadow: none;
			border-radius: 0;
		
		}
		
		&.pesquisa {
		
			width: 100%;
			margin: 0;
			padding: 1rem;
			background-color: transparent;
			color: inherit;
			box-shadow: none;
			border-radius: 0;
			line-height: 1.25;
		
		}
	
	}

}

.dnmca-pergunta {
	
	padding-bottom: .5rem;
	font-size: @text-main;
	
	& .texto { color: fade(@color-dark, @fade-min + @fade-next); }
	
	& .numero { color: fade(@color-dark, 20%); }
	
	&.padding-top { padding-top: 1rem; }
	
	&-comentario {
		
		margin-top: -.5rem;
		padding-bottom: .5rem;
		font-size: @text-main;
		
		&.half { padding-bottom: .25rem; }
		
		& .texto { 
			
			font-size: @text-sub;
			color: fade(@color-dark, @fade-min);
			
			/*
			& a {
				
				color: fade(@color-light, @fade-min + @fade-next);
				
				&, &:visited, &:hover, &:active { 
					
					border-bottom: 1px solid fade(@color-link, 30%);
					box-shadow: 0 -4px 0 fade(@color-link, 30%) inset;
					
				}
				
				&:hover { font-weight: 500; }
			
			}
			*/
			
		}
	
		& .numero { color: fade(@color-light, 0%); }
		
	}
	
}

.dnmca-buttons {

	&-none { background-color: transparent !important;}

	&-bar { 
		
		margin-top: 2rem !important;
		padding-top: 1rem !important;
		border-top: 1px solid fade(@color-dark, 10%);
		
		& .note { margin-top: -.5rem; }

	}
	
	&-close {
		
		position: absolute;
		top: 1rem;
		right: 1rem;

		font-size: 1.2rem;
		font-weight: @font-weight-semibold;
		padding-left: 1rem;
		text-shadow: .25rem .25rem .25rem fade(@color-dark, 20%);
				
		a {

			border-bottom: none !important;
			box-shadow: none !important;
			color: inherit;
			opacity: .7;

			&:hover, 
			&:active { 
				
				color: inherit !important;
				opacity: 1;
			
			}
			
		}
		
	}

	&-flat {

		// border: none !important;
		border: 1px solid !important;
		// border-radius: @border-radius;
		border-radius: 50%;
		display: inline-block;
		height: 2.4rem;
		line-height: $height;
		// min-width: $height / 1.5;
		min-width: $height;
		// padding: 0 1rem;
		margin-bottom: ~ "calc(.5rem + 1px)";
		text-transform: uppercase;
		vertical-align: middle;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
		font-size: 1rem;
		outline: 0;
		box-shadow: none;
		background-color: transparent;
		color: @color-dark;
		cursor: pointer;
		
		-webkit-transition: background-color @transition-time-link;
		   -moz-transition: background-color @transition-time-link;
			-ms-transition: background-color @transition-time-link;
			 -o-transition: background-color @transition-time-link;
				transition: background-color @transition-time-link;
				
		&.no-transition { 
		
			-webkit-transition: none !important; 
			   -moz-transition: none !important; 
			    -ms-transition: none !important; 
			     -o-transition: none !important; 
			        transition: none !important; 
			
		}
		
		&.divisor {
		
			min-width: 1rem;
			padding: 0;
			color: fade(@color-dark, 20%) !important;
			font-size: 2rem;
			
			-webkit-transition: none !important; 
			   -moz-transition: none !important; 
			    -ms-transition: none !important; 
			     -o-transition: none !important; 
			        transition: none !important; 
			
		}
		
		&.white {
		
			background-color: fade(@color-light, 10%) !important;
			color: fade(@color-light, 60%);
			
			&:hover {
			
				background-color: fade(@color-light, 20%) !important;
				color: fade(@color-light, 70%);
				
			}
		}
		
		&.dark {
		
			background-color: fade(@color-dark, 20%) !important;
			color: fade(@color-dark, 70%) !important;
			
			&:hover {
			
				background-color: fade(@color-dark, 30%) !important;
				color: fade(@color-dark, 80%) !important;
				
			}
		}
		
		&.new {
		
			background-color: fade(@color-link, 20%) !important;
			color: fade(@color-link, 70%) !important;
			
			&:hover {
			
				background-color: fade(@color-link, 30%) !important;
				color: fade(@color-link, 80%) !important;
				
			}
		}
		
		&.erase {
		
			background-color: fade(@color-red, 20%) !important;
			border-color: fade(@color-red, 20%) !important;
			color: fade(@color-red, 70%) !important;
			
			&:hover {
			
				background-color: fade(@color-red, 30%) !important;
				color: fade(@color-red, 80%) !important;
				
			}
		}
		
		&.favorite {
		
			background-color: fade(@color-dark, 70%) !important;
			border-color: fade(@color-dark, 70%) !important;
			color: fade(@color-light, 90%) !important;
			
			&:hover {
			
				background-color: fade(@color-dark, 80%) !important;
				color: fade(@color-light, 100%) !important;
				
			}
		}
		
		&.back {
		
			background-color: fade(@color-dark, 10%) !important;
			border-color: fade(@color-dark, 10%) !important;
			color: fade(@color-dark, 40%) !important;
			
			&:hover {
			
				background-color: fade(@color-dark, 20%) !important;
				color: fade(@color-dark, 50%) !important;
				
			}
		}

		&.accept {
		
			background-color: fade(@color-green, 20%) !important;
			border-color: fade(@color-green-dark, 20%) !important;
			color: fade(@color-green-dark, 70%) !important;
			
			&:hover {
			
				background-color: fade(@color-green, 30%) !important;
				color: fade(@color-green-dark, 80%) !important;
				
			}
		}
		
		&.dialog {
		
			background-color: fade(@color-black, 10%) !important;
			color: inherit !important;
			
			&:hover { background-color: fade(@color-black, 20%) !important; }
		}
		
		&.midia { margin-bottom: -2rem; }
		
		&.inside { 
		
			margin-left: -2.5rem; 
		
			&.main-search { 
			
				padding-right: .6rem; 
			
				@media only screen and (max-width: @max-med) { 
				
					margin: 0;
					padding: 0 1rem 0 0;
					line-height: 2.8rem;
					
				}
				
			}
		
		}

		&.inside, 
		&.inside:hover,
		&.no-background,
		&.no-background:hover	{ 
			
			background: none !important;
			border: none !important;
			
			&.table-outside { 
				
				margin-bottom: -.25rem;
				color: fade(@color-dark, 40%) !important;
				
			}
			
			&.textarea-outside { 
				
				margin-bottom: -2.5rem;
				color: fade(@color-dark, 40%) !important;
				
			}
		
		}
		
		& i {
		
			font-size: 1.4rem;
			line-height: inherit;
			
		}
		
		&:focus, &:active {
		
			background-color: transparent;
			box-shadow: none;
			
		}
	
	}

	&-image-container {
		
		margin-bottom: 1rem; 
		text-align: right;
		
		.separator {
		
			margin: 0 1rem -0.25rem 1rem;
			height: 1.5rem;
			border-left: 1px solid fade(@color-dark, 20%);
			display: inline-block;
		
		}
	
	}

}

.dnmca-dialog {

	font-size: 1.2rem;
	margin-top: 1rem;
	padding: 0;
	
	& > div {
	
		display: inline-block;
		width: auto;
		padding: 0 0 0 .5rem;
		
		& > a {
		
			color: inherit;
			margin-bottom: .25rem;
			
		}
		
	}
	
}

.dnmca-modal {

	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
		
	-ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);

	&-container {
	
		z-index: 999;
		background-color: fade(@color-dark, 80%);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;

	}
	
	&-content {

		margin: auto;
		background-color: fade(@color-light, 100%);
		position: relative;
		padding: 2rem;
		outline: 0;
		width: fit-content;
		border-radius: @border-radius;
		
		@media only screen and (max-width: @max-med) { 
		
			padding: 1rem;
			width: 90vw;
			
		}
	
		video,
		img { 
		
			box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); 
			max-height: 60vh;
			
		}
		
		.video-size {
		
			width: 50vw;
			
			@media only screen and (max-width: @max-med) { width: 90vw; }
		
		}
		
		.audio-size {
		
			width: 25vw;
			
			@media only screen and (max-width: @max-med) { width: 90vw; }
		
		}
		
		.subtitle {
		
			padding: 2rem 0 0 0;
			text-align: center;
			font-size: @text-sub;
			font-weight: @font-weight-semibold;
			color: fade(@color-dark, 70%);
		
		}
		
		.info {
		
			padding: 2rem 0 0 0;
			font-size: @text-sub;
			color: fade(@color-dark, 40%);
		
		}
	
	}

}

.dnmca-img-magnifier {

	&-container { position: relative; }

	&-glass {
		
		position: absolute;
		border: 3px solid fade(@color-dark, 40%);
		border-radius: 50%;
		cursor: none;
		width:  12rem; // 100px;
		height: 12rem; // 100px;
		
	}
}

.dnmca-wheel-zoom {

	position: relative;
    display: flex;
    align-items: center;

	&-container {
	
	    display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background-color: fade(@color-dark, 40%);
	
	}

}

.dnmca-tooltip {

  position: relative;
  display: inline-block;

	& i { font-size: 1.1rem; }

	& .tooltiptext {

		visibility: hidden;
		background-color: fade(@color-dark, 70%);
		color: fade(@color-light, 100%);
		text-align: center;
		font-size: 1rem;
		border-radius: @border-radius;
		padding: .75rem;
		position: absolute;
		z-index: 1;
		white-space: nowrap;
		bottom: .75rem;
		left: .5rem;
		opacity: 0;
		
		-webkit-transition: opacity @transition-time-link;
		   -moz-transition: opacity @transition-time-link;
			-ms-transition: opacity @transition-time-link;
			 -o-transition: opacity @transition-time-link;
				transition: opacity @transition-time-link;
	
	}
	
	&:hover .tooltiptext {

		visibility: visible;
		opacity: 1;
	}

}

.dnmca-emergency {

	font-weight: 400;
	font-size: 1.2rem;
	
	& a, & a:visited {
	
		color: @color-dark;
		border-bottom: 3px solid @color-highlight;
		box-shadow: 0 -5px 0 @color-highlight inset;
		
	}
	
	& a:hover, & a:active { font-weight: 500; }
	
}

.dnmca-cover {
	
	background-color: transparent; 
	position: fixed; 
	width: 100%; 
	height: 100%;
	z-index: -1;
	
}

.dnmca-loader {
	
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	
	-ms-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);

	&-container {
		
		z-index: 1000;
		background-color: @color-dark;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		
		-webkit-transition: opacity @transition-time-loader ease, top @transition-time-quick ease @transition-time-loader;
		   -moz-transition: opacity @transition-time-loader ease, top @transition-time-quick ease @transition-time-loader;
		    -ms-transition: opacity @transition-time-loader ease, top @transition-time-quick ease @transition-time-loader;
			 -o-transition: opacity @transition-time-loader ease, top @transition-time-quick ease @transition-time-loader;
		        transition: opacity @transition-time-loader ease, top @transition-time-quick ease @transition-time-loader;
		
	}
	
	&-spin {
		
		display: inline-block;
		border: .5rem solid fade(@color-light, 20%);
		border-top: .5rem solid @color-highlight;
		border-radius: 50%;
		width: 4rem;
		height: 4rem;
		
		-webkit-animation: spin @transition-time-loader linear infinite;
		   -moz-animation: spin @transition-time-loader linear infinite;
		        animation: spin @transition-time-loader linear infinite;
		
	}
	
	.name {
		
		padding-left: 1px;
		padding-bottom: 4px;
		font-size: .8rem;
		color: fade(@color-light, 70%);
		font-weight: @font-weight-semibold;
		
	}
	
	.slogan {
		
		font-size: 2rem; 
		color: @color-light; 
		font-weight: @font-weight-light;
		
	}
	
	.art {
		
		font-weight: @font-weight-semibold;
		color: @color-highlight;
		
		-webkit-animation: glow @transition-time-glow ease-in-out infinite alternate;
		   -moz-animation: glow @transition-time-glow ease-in-out infinite alternate;
		        animation: glow @transition-time-glow ease-in-out infinite alternate;
		
	}
	
	.secondline { padding-left: 10px; }
	
	.container {
		
		padding-top: 1rem;
		text-align: center; 
		
	}
	
}

.dnmca-site-container {

	max-width: @max-large;
	margin: auto;
	padding-top: @header-height * 2;
	
	@media only screen and (max-width: @max-med) { padding-top: @header-height; }
	
	/*
	background-color: fade(@color-light, 70%);
	// background-image: linear-gradient(30deg, fade(@color-blue-shade1, 100%) 0%, fade(@color-blue-shade2, 70%) 35%, fade(@color-blue-shade3, 40%) 100%);
	// background-image: linear-gradient(30deg, fade(@color-white-shade1, 100%) 0%, fade(@color-white-shade2, 70%) 35%, fade(@color-white-shade4, 40%) 100%);
	background-repeat: no-repeat;
	background-size: cover;
	*/
	
}

.dnmca-nav {
	
	position: fixed;
	top: 0;

	background-color: fade(@color-light, 60%);
	height: @header-height;
	font-size: 1.2rem;	
	// padding: 0 0 0 (($height - $font-size) / 2);
	padding: 0 $height;
	// width: calc(100% - (($height - $font-size) / 2));
	width: calc(100% - $height * 2);
	z-index: 1;
	
	@media only screen and (max-width: @max-med) {
	
		height: @header-height;
		padding: 0 ($height / 8) 0 ($height / 4);
		width: calc(100% - $height / 4 - $height / 8);
	
	}
	
	a {
		
		float: right;
		line-height: $height;
		color: fade(@color-dark, 80%);
		text-align: center;
		// padding: 0 $font-size * 3 / 4;
		padding: 0 $font-size * 1 / 2;
		
		-webkit-transition: background-color @transition-time-link;
		   -moz-transition: background-color @transition-time-link;
			-ms-transition: background-color @transition-time-link;
			 -o-transition: background-color @transition-time-link;
			    transition: background-color @transition-time-link;
		
		&:hover {
			
			background-color: fade(@color-dark, 70%);
			// font-weight: @font-weight-semibold;
			color: @color-light;
			
		}
		
		&.no-transition {
		
			-webkit-transition: none;
			   -moz-transition: none;
				-ms-transition: none;
				 -o-transition: none;
					transition: none;
					
		}
		
		&.special { 
			
			color: fade(@color-red-cc, 80%); 
			
			&:hover {
				
				background-color: fade(@color-dark, 70%);
				color: @color-yellow-cc;
				
			}
		
		}
	
	}

	img {
		
		float: left;
		height: $font-size;
		padding: $font-size 0;
		
		&.casadochoro {
		
			height: 4rem;
			padding: 0;
			
			@media only screen and (max-width: @max-large) { 
			
				height: 3rem;
				padding: 1rem 0;
				
			}
		
		}
		
	}

	.inactive {
	
		-webkit-transition: none;
		   -moz-transition: none;
			-ms-transition: none;
			 -o-transition: none;
				transition: none;
			
		&:hover {
			
			background-color: transparent;
			color: inherit;
			cursor: default;
			
		}
		
		span {
		
			font-size: 1.2rem; 
			color: fade(@color-dark, 40%);
			
		}
		
	}
	
	&-container {
	
		position: fixed;
		z-index: 1;
		top: 4rem;
		right: 0;
		height: calc(100% - $top);
		width: 0;
		background-color: fade(@color-dark, 20%);
		overflow: hidden;
		padding: 0;
		
		-webkit-transition: width @transition-time-link;
		   -moz-transition: width @transition-time-link;
			-ms-transition: width @transition-time-link;
			 -o-transition: width @transition-time-link;
				transition: width @transition-time-link;
		
		
		.sidenav {

			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			height: 100%;
			width: 15rem;
			background-color: fade(@color-dark, 70%);
			overflow-x: hidden;
			padding: 2rem;
			font-size: @text-sub;
			
			a {
			
				float: none;
				display: block;
				white-space: nowrap;
				width: 100%;
				height: 3rem;
				line-height: $height;
				color: fade(@color-light, 70%);
				text-transform: uppercase;
			
				-webkit-transition: background-color @transition-time-link;
				   -moz-transition: background-color @transition-time-link;
					-ms-transition: background-color @transition-time-link;
					 -o-transition: background-color @transition-time-link;
						transition: background-color @transition-time-link;
				
				&:hover { 
					
					background-color: fade(@color-light, 70%); 
					font-weight: @font-weight-semibold;
					color: @color-dark;
				
				}
				
				span { padding-left: 1rem; }
				
				&.special { 
			
					color: @color-yellow-cc; 
					
					&:hover {
						
						background-color: fade(@color-light, 70%);
						color: fade(@color-red-cc, 80%);
						
					}
				
				}
				
			}
			
			.inactive {
			
				&:hover {
					
					background-color: transparent;
					color: inherit;
					cursor: default;
					
				}
			}
			
			.divisor { border-bottom: 1px solid fade(@color-light, 20%); }
			
			.icon {
			
				padding: 0 0 0 .25rem;
				color: fade(@color-light, 40%);
			
			}
			
		}
		
	}
	
}

.dnmca-dropdown { 

	position: relative;
	display: inline-block; 
	float: right;
	
	&-content {
		
		display: none;
		position: absolute;
		top: 4rem;
		right: 0;
		background-color: fade(@color-light, 90%);
		box-shadow: 0px .5rem 1rem 0 fade(@color-dark, 20%);

		a {
			
			float: none;
			display: block;
			font-size: @text-sub;
			// font-weight: @font-weight-light;
			text-transform: uppercase;
			text-align: right;
			white-space: nowrap;
			padding-left: 3rem;
			line-height: 3rem;
		
			-webkit-transition: background-color @transition-time-link;
			   -moz-transition: background-color @transition-time-link;
			    -ms-transition: background-color @transition-time-link;
			     -o-transition: background-color @transition-time-link;
			        transition: background-color @transition-time-link;
			
			&:hover { 
				
				background-color: fade(@color-dark, 80%); 
				// font-weight: @font-weight-semibold;
				color: @color-light;
			
			}
			
			span { padding-right: 1rem; }
			
		}
		
	}
	
	&:hover &-content { display: block; }

}

.dnmca-blur {
	
	-webkit-transition: backdrop-filter @transition-time-page ease;
	   -moz-transition: backdrop-filter @transition-time-page ease;
	    -ms-transition: backdrop-filter @transition-time-page ease;
	     -o-transition: backdrop-filter @transition-time-page ease;

}

.dnmca-main {
	
	font-size: 1rem;
	
	// background-color: transparent;
	background-color: fade(@color-light, 85%);
	
	position: relative;
	padding: 0rem;
	
	// min-height: calc(100vh - @header-height * 3 - 10rem);
	// min-height: calc(100vh - @header-height * 3 - 16rem - 10rem - 3rem);
		
	@media only screen and (max-width: @max-small) { 
	
		font-size: 1rem; 
		// padding: .5rem;
		margin: 0 .5rem;
		min-height: calc(100vh - 4rem - 4rem);
		
	}
	
	@media only screen and (min-width: @min-med) and (max-width: @max-med) { 
	
		padding: 1rem; 
		min-height: calc(100vh - 4rem - 5rem);
	}
		
}

.dnmca-page {
		
	position: relative;
	padding: 4rem;
	width: auto;
	min-height: calc(100vh - @header-height * 3 - 14rem);
	
	// min-height: 12rem;
	color: fade(@color-dark, 80%);

	opacity: 1;
	/*
	-webkit-transition: opacity @transition-time-page linear @transition-time-page, height @transition-time-page step-start;
	   -moz-transition: opacity @transition-time-page linear @transition-time-page, height @transition-time-page step-start;
		-ms-transition: opacity @transition-time-page linear @transition-time-page, height @transition-time-page step-start;
		 -o-transition: opacity @transition-time-page linear @transition-time-page, height @transition-time-page step-start;
			transition: opacity @transition-time-page linear @transition-time-page, height @transition-time-page step-start;
	*/
		
	@media only screen and (max-width: @max-small) { padding: .5rem; }
	
	@media only screen and (min-width: @min-med) and (max-width: @max-med) { padding: 1rem; } 
	
	&.ng-hide { opacity: 0; }
		
	.title {
		
		font-weight: @font-weight-semibold;
		font-size: 3rem;
		color: fade(@color-red-cc, 100%);
		text-transform: uppercase;
		border-left: 2rem solid fade(@color-red-cc, 50%);
		padding-top: 1.5rem;
		padding-left: 1.5rem;
		margin-top: 3rem;
		// height: 4.5rem;
		
		@media only screen and (max-width: @max-small) { font-size: 2rem; }
		
		&.color-inherit { color: inherit; }
		
		&.home {
		
			font-size: 3rem;
			font-weight: 600;
			padding-bottom: .5rem;
		
		}
	
	}
	
	.subtitle {
		
		font-size: 1.4rem;
		color: fade(@color-dark, @fade-min + @fade-next);
		padding-bottom: .5rem;
		padding-left: 4rem;
		
		@media only screen and (max-width: @max-small) { font-size: 1.1rem; }
		
		&.home { 
		
			padding-bottom: 7rem;
			
			@media only screen and (max-width: @max-small) { padding-bottom: 2rem; }
			
			@media only screen and (min-width: @min-med) and (max-width: @max-med) { padding-bottom: 4rem; }
			
		}
		
		
	
		&-event {
					
			width: fit-content;
			padding: .5rem;
			margin-top: 2rem;
			
			border-left: .5rem solid fade(@color-highlight, 100%);
			background-color: fade(@color-highlight, 5%);
			
			font-size: 1.4rem;
			font-weight: @font-weight-semibold;
			color: fade(@color-dark, 100%);
		
		}
	
	}
	
	.image-container {
	
		position: absolute;
		right: 0;
		
		padding: 0 3rem;

		@image-square: 12rem;
		
		img {
		
			object-fit: cover;
			height: @image-square;
			width: @image-square;
	  
		}
		
		span { white-space: nowrap; }
		
		.polaroid {
			/*
			Frame: 88 mm × 107 mm
			Photo: 79 mm ×  79 mm
			Borders: 4.5 × 4.5 × 4.5 × 23.5
			*/
			
			@transition-time-polaroid: .25s;
			@line-heigh: 3rem;
			
			display: inline-block;
			width: @image-square;
			margin-right: -.5rem;
			padding: (4.5/79 * @image-square) (4.5/79 * @image-square) calc((23.5/79 * @image-square) - @line-heigh) (4.5/79 * @image-square);
			border: 1px solid fade(@color-dark, 30%);
			background-color: fade(@color-light, 100%);
			box-shadow: .75rem .75rem 1rem fade(@color-dark, 30%);
			
			font-size: 1.8rem;
			// font-family: adobe-handwriting-ernie, sans-serif;
			color: fade(@color-dark, 40%);
			text-align: center;
			line-height: @line-heigh;
			
			/*
			-webkit-transition: transform @transition-time-polaroid;
			   -moz-transition: transform @transition-time-polaroid;
				-ms-transition: transform @transition-time-polaroid;
				 -o-transition: transform @transition-time-polaroid;
			*/
				 
			/*
			&:hover,
			&.hover {
			
				box-shadow: 0 0 1rem fade(@color-highlight, 100%),
							.75rem .75rem 1rem fade(@color-dark, 30%);
							
				cursor: pointer;
			
			}
			*/
			
			.big { font-size: 3rem; }
			
		}		
	
	}
	
	.playlist-container {
	
		display: flex;
		gap: 2rem;
		justify-content: center;
		
		padding: 1rem 0;

		iframe {
		
			display: block;
			flex: 0 0 50%;
			width: 50%;
			height: auto;
			border: 0;
			min-width: 0;
			
		}
			
		iframe.square {
			
				aspect-ratio: 1 / 1;
				max-width: 240px;
			
			}
			
		iframe.normal {
			
				aspect-ratio: 16 / 9;
				max-width: 60%;
			
			}

		@media (max-width: @max-small) { 
		
			flex-direction: column;
			
			iframe { 
			
				flex: 0 0 auto; 
				align-self: center;
				width: 100%;
			
			}
			
			iframe.normal { max-width: 90%; }
		}
		
	}
	
	.photo-container {
	
		display: flex;
		gap: 2rem;
		justify-content: center;
		flex-direction: column;
		
		padding: 1rem 0;
		
		img {
		
			flex: 0 0 auto; 
			align-self: center;
			width: 60%;
			border: .5rem solid fade(@color-light, 70%);
		
		}
		
		@media (max-width: @max-small) { img { width: 90%; } }
	
	}
	
	.conteudo {
	
		width: calc(100% - 12rem - 3rem);
	
		column-count: 2;
		column-gap: 2rem; 
		column-rule: 1px solid fade(@color-dark, 10%);
	
		font-size: @text-sub;
		line-height: 1.4rem;
		text-align: justify;
		
		padding: 2rem 0 0 1rem;
		
		@media only screen and (max-width: @max-small) { 
		
			width: auto;
			column-count: 1;
			padding: 22rem 1rem 0 1rem; 
			
		}
		
		@media only screen and (min-width: @min-med) and (max-width: @max-med) { width: calc(100% - 12rem - 9rem); }
	
	}
	
	.media {
	
		@media only screen and (max-width: @max-small) { padding-left: .5rem; }
								
		.number { 
			
			display: inline-block;
			position: relative;
			bottom: .1rem;
			padding-right: .25rem; 
			font-size: .8rem; 
			color: fade(@color-dark, 70%);
			
		}

		.active,
		.inactive { 
			
			display: inline-block;
			padding-right: .5rem;
			
		}
		
		.active i { color: fade(@color-dark, 100%); }
		
		.inactive i { color: fade(@color-dark, 10%); }
		
	}
	
	.crumbles {

		font-size: 1rem;
		color: fade(@color-dark, @fade-min + @fade-next);
		
		@media only screen and (max-width: @max-small) { padding: .5rem 0 0 .5rem; }	
			
		a { 
			
			font-size: 1rem;
			font-weight: @font-weight-semibold;
			color: fade(@color-red-cc, 70%);
			border-bottom: .25rem solid fade(@color-red-cc, 0%);
			
			-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			    -ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			     -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			        transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			
			i { 
			
				color: fade(@color-red-cc, 40%);
				animation: blinker 2s linear infinite;
				padding-right: .5rem;
				
			}
			
			span {
			
				text-shadow: none;
				border-bottom: .25rem solid fade(@color-red-cc, 0%);
				/*
				-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
				   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					-ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					 -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
						transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
				*/
			}
		
			&:hover,
			&:active { 
				
				color: fade(@color-red-cc, 100%);
				background-color: fade(@color-red-cc, 10%);
				border-bottom: .25rem solid fade(@color-red-cc, 100%);
				
				span {
				
					text-shadow: 0 0 .5rem fade(@color-light, 70%),
								 0 0  1rem fade(@color-light, 50%);
					border-bottom: .25rem solid fade(@color-red-cc, 100%);
					// font-weight: @font-weight-semibold;
				
				}
			
			}
		
		}
		
	}
	
	.froala {
		
		font-size: @text-main;
		line-height: 1.7;
		padding: 1rem 1rem 0 4rem;
		
		@media only screen and (max-width: @max-small) { padding: .5rem; }
		
		a { 

			color: inherit;
			background-color: fade(@color-red-cc, 10%);
			text-shadow: none;
			border-bottom: .25rem solid fade(@color-red-cc, 20%);
						
			-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
				-ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
				 -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
		
			&:hover,
			&:active { 
				
				text-shadow: 0 0 .5rem fade(@color-light, 70%),
							 0 0  1rem fade(@color-light, 50%);
				border-bottom: .25rem solid fade(@color-red-cc, 100%);
				font-weight: @font-weight-semibold;
				
			}
		
		}
		
		p {
		
			/*
			margin-block-start: @text-main;
			margin-block-end: @text-main;
			*/
			// line-height: 2rem;
			
		}
		
		strong { font-weight: @font-weight-semibold; }
		
		ul { list-style-type: none; }
		
		li { 
		
			margin-left: 1rem;
			
			@media only screen and (max-width: @max-med) { margin-left: -1rem; }

			&::before {
		
				content: "\25a0"; 
				color: fade(@color-dark, 50%);
				margin-left: -2rem; 
				margin-right: 1rem;
				
			}
			
		}
				
		&.subtitle { 
		
			padding: .5rem 0 0 4rem; 
			text-transform: uppercase;
		}
		
		&.small { font-size: @text-sub;	}
		
		&.icon-container {
		
			// width: 90%;
			// margin: 3rem 0rem 0 4rem;
			padding: 2rem 0 0 0;
			// border-top: 1px solid fade(@color-dark, 30%);
		
		}
		
		.image-link {

			border-bottom: none;
			background-color: transparent;
			
			/*
			-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
				-ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
				 -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
					
			*/
		
			&:hover,
			&:active { 
			
				border-bottom: none;
				filter:drop-shadow(0 0 1rem fade(@color-red-cc, 40%)); 
			
			}
			
		}
		
	}
	
	.image-banner {
	
		text-align: center;
		height: calc(300px - 0.5rem);
		overflow: hidden;
		border: 1rem solid fade(@color-light, 90%);
		background-color: fade(@color-dark, 20%);
	
	}
	
	.caption {
	
		font-size: @text-sub;
		color: fade(@color-dark, 30%);
		text-align: right;
		padding: .5rem .5rem 0 0;
		
	}
	
	
	.side {
		
		padding-top: 2rem;
		font-size: @text-sub;
		color: fade(@color-dark, 60%);
				
		a { 

			color: inherit;
			text-shadow: none;
			border-bottom: .25rem solid fade(@color-red-cc, 0%);
			
			-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			    -ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			     -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			        transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
		
			&:hover,
			&:active { 
				
				background-color: fade(@color-red-cc, 10%);
				text-shadow: 0 0 .5rem fade(@color-light, 70%),
							 0 0  1rem fade(@color-light, 50%);
				border-bottom: .25rem solid fade(@color-red-cc, 100%);
				font-weight: @font-weight-semibold;
				
			}
		
		}
		
	}
	
	.teachers {
	
		padding: 2rem 4rem;
		
		@media only screen and (max-width: @max-med) { padding: 0; }
		
		.image-teacher {
	
			padding: 0;
			width: 100%;
			height: 12rem;
			overflow: hidden;
			border: .75rem solid fade(@color-yellow-cc, 80%);
			
			@media only screen and (max-width: @max-med) { width: 12rem; }	
			
			img {
			
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center; 
			
			}
		
		}
	
	}
	
	&.info {
		
		position: relative;
		width: calc(100% - 4rem);

		min-height: auto;
		font-size: 1rem;
		
		padding: 1rem calc(2rem + 11.55px) 1rem 1rem;
		
		border-radius: .25rem;
		border-width: 2px;
		border-style: solid;
		
		background-color: fade(@color-green, 60%);
		border-color: fade(@color-green, 40%);
		color: @color-green-dark;
		
		a { 

			color: inherit;
			text-decoration: underline;
			text-underline-position: under;

			&:hover,
			&:active { font-weight: @font-weight-semibold; }
		
		}
		
		&.warning {
			
			background-color: fade(@color-highlight, 60%);
			border-color: fade(@color-highlight, 40%);
			color: @color-highlight-dark;
			
		}
		
		&.alert {
			
			padding: 2rem;
			width: auto;
			background-color: fade(@color-red, 60%);
			border-color: fade(@color-red, 80%);
			color: @color-light;
			
			&.padding-half { padding: 1rem; }
			
			@media only screen and (max-width: @max-small) { margin-top: .5rem; }
			
		}
		
		&.transparent {
			
			padding: 0;
			background-color: transparent;
			border-color: transparent;
			color: @color-dark;
			
		}
		
		&.title { 
		
			font-size: 3.2rem;
			font-weight: @font-weight-light;
			
			@media only screen and (max-width: @max-small) { font-size: 1.8rem; }
			
		}
		
		&.announcement {
		
			width: 60%; 
			margin: auto;
			padding: 2rem; 
			font-size: 1.4rem;
			
			@media only screen and (max-width: @max-small) { width: 80%; }
		
		}
		
		img { width: 100%; }
		
		.records { 
		
			font-size: @text-sub;
			font-weight: @font-weight-semibold;
			text-align: center; 
		
		}
		
		@media only screen and (max-width: @max-med) { margin-bottom: 1rem; }
			
	}
	
	&.home,
	&.admin { 
	
		padding: 4rem; 
		
		@media only screen and (max-width: @max-small) { padding: .5rem; }
		
		@media only screen and (min-width: @min-med) and (max-width: @max-med) { padding: 2rem 4rem; }
		
		.results {
		
			width: 25%; 
			margin: 2rem 5%;
			
			@media only screen and (max-width: @max-med) { width: auto; }
		
		}
		
	}
	
	&.event { }
	
	&.about { }
	
	&.privacy-policies { }

}

.dnmca-above-footer {
	
	background-color: fade(@color-light, 75%);
	height: 16rem;
	width: 100%;
	font-size: @text-sub;
	color: fade(@color-dark, 100%);
	
	&.logos-container {
	
		background-color: fade(@color-light, 90%);
		height: 8rem;
		
		@media only screen and (max-width: @max-small) { 
		
			height: 4rem;
			margin-top: .5rem;
			
		}
		
		img {
		
			padding: 2rem 7rem;
			height: 4rem;
			
			@media only screen and (max-width: @max-small) {
			
				padding: 1rem;
				height: 3rem;
			
			}
		
		}
	
	}
		
	.shortcuts-container { 
		
		color: fade(@color-dark, 60%);
		width: auto;
		padding: 2rem 2rem 2rem 6rem;
	
	}
	
	.title { 
	
		font-size: 1.5rem; 
		font-weight: @font-weight-semibold;
		padding-bottom: 1rem;
		text-transform: uppercase;
		
	}
	
	.link {
		
		padding-bottom: .5rem;
		// text-transform: lowercase;
		
		a { 

			color: inherit;
			text-shadow: none;
			border-bottom: .25rem solid fade(@color-red-cc, 0%);
			
			-webkit-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			   -moz-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			    -ms-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			     -o-transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
			        transition: text-shadow @transition-time-link, border-bottom @transition-time-link linear;
		
			&:hover,
			&:active { 
				
				background-color: fade(@color-red-cc, 10%);
				text-shadow: 0 0 .5rem fade(@color-light, 70%),
							 0 0  1rem fade(@color-light, 50%);
				border-bottom: .25rem solid fade(@color-red-cc, 100%);
				font-weight: @font-weight-semibold;
				
			}
		
		}
		
	}
	
	.social {
	
		font-size: 2rem;
		
		a { 

			color: fade(@color-dark, 60%);
			text-shadow: none;
			padding-right: .5rem;
			// border-bottom: .25rem solid fade(@color-highlight, 0%);
			
			-webkit-transition: text-shadow @transition-time-link linear;
			   -moz-transition: text-shadow @transition-time-link linear;
			    -ms-transition: text-shadow @transition-time-link linear;
			     -o-transition: text-shadow @transition-time-link linear;
			        transition: text-shadow @transition-time-link linear;
		
			&:hover,
			&:active { 
				
				color: fade(@color-dark, 80%);
				text-shadow: 0 0  1rem fade(@color-red-cc, 70%),
							 0 0  1rem fade(@color-red-cc, 50%);
				// border-bottom: .25rem solid fade(@color-highlight, 100%);
				// font-weight: @font-weight-semibold;
				
			}
		
		}
	
	}
	
	.image-container {
		
		position: relative;
		// width: 12rem;
		padding: 2rem 3rem 2rem 2rem;
		text-align: right;
			
		img { 
		
			height: 12rem;
			position: absolute;
			// top: 50%;
			// left: 50%;
			
			-ms-transform: translate(-100%, 0%);
			    transform: translate(-100%, 0%);
			
		}
		
	}
	
}

.dnmca-footer {
	
	background-color: fade(@color-dark, 40%);
	height: 3rem;
	width: 100%;
	font-size: 1rem;
	color: fade(@color-light, 40%);
	text-align: center;
	line-height: $height;
	
	.update {
		
		color: fade(@color-light, 10%);
		text-align: right;
		padding-right: 2rem;
		
	}
	
}

.dnmca-video {

	position: fixed;
	right: 0;
	bottom: 0;
	z-index: -2;
	
	opacity: 1;
	-webkit-transition: opacity @transition-time-loader ease;
	   -moz-transition: opacity @transition-time-loader ease;
		-ms-transition: opacity @transition-time-loader ease;
		 -o-transition: opacity @transition-time-loader ease;
			transition: opacity @transition-time-loader ease;	
	

	video { width: 100vw; }
	
	@media (orientation: portrait) { 
	
		video { 
		
			width: auto;
			height: 100vh;
			
		}
		
	}

}

.dnmca-toast-animation {

	&.ng-enter {
	
		-webkit-animation: flipInY 1s;
		   -moz-animation: flipInY 1s;
		        animation: flipInY 1s;
				
	}
	
	&.ng-leave {
	
		-webkit-animation: flipOutY 1s;
		   -moz-animation: flipOutY 1s;
		        animation: flipOutY 1s;
	
	}
	
}

.dnmca-table {
	
	width: 100%;
	clear: both;
	table-layout: fixed;
	word-wrap: break-word;
	border-collapse: collapse;
	
	color: @color-light;
	font-size: 1rem;
	background-color: transparent;
	border-bottom: 1px solid fade(@color-light, 20%) !important;
	
	&.hover tbody tr:hover {
	
		background-color: fade(@color-dark, 30%) !important;
		color: inherit;
		cursor: pointer;
		
	}
	
	& > thead,
	& > thead > tr > th { 
		
		border-top: 1px solid fade(@color-light, 20%); 
		border-bottom: 1px solid fade(@color-light, 20%);
		background-color: fade(@color-dark, 20%) !important;
		color: fade(@color-light, @fade-min);
		
		& i { font-size: @text-sub; }
		
	}

	& > tbody > tr > td { border-bottom: 1px solid fade(@color-light, 5%); }
	
	& > tbody > tr:nth-child(odd),
	& > tbody > tr:nth-child(even) { background-color: fade(@color-dark, 20%); }
	
	&-page {
	
		display: inline-block;
		font-size: @text-sub;
		padding: 0 1.5rem 1rem 0;
		
		& a { border: none !important; }
		
	}
	
	&-white {
	
		color: @color-dark;
		font-size: 1rem;
		background-color: fade(@color-light, 20%);
		border-top: 1px solid fade(@color-dark, 40%) !important;
		border-bottom: 1px solid fade(@color-dark, 40%) !important;
	
		&-status {
		
			border-radius: @border-radius;
			padding: .5rem;
		
		}
	
		&.hover tbody tr:hover {
	
			background-color: fade(@color-dark, 10%) !important;
			color: inherit;
			cursor: pointer;
			
		}
		
		& > thead,
		& > thead > tr > th { 
			
			border-top: 1px solid fade(@color-dark, 20%); 
			border-bottom: 1px solid fade(@color-dark, 20%);
			background-color: fade(@color-dark, 5%) !important;
			color: fade(@color-dark, @fade-min);
			
			& i { font-size: @text-sub; }
			
		}
		
		& > thead th.sorting:after { color: inherit !important; }
		
		& > thead th.sorting-asc:after { color: fade(@color-red, 100%) !important; }
		
		& > thead th.sorting-desc:after { color: fade(@color-red, 100%) !important; }
		
		& > tbody > tr > td { border-bottom: 1px solid fade(@color-dark, 10%); }
		
		& > tbody > tr > td.details-control { color: fade(@color-dark, 20%); }
		
		& > tbody > tr:nth-child(odd),
		& > tbody > tr:nth-child(even) { background-color: fade(@color-dark, 5%); }

	}

}

.dnmca-override {

	&.datatables {
	
		&.no-pager { margin-bottom: 4rem; }
	
		.dataTables-wrapper .dataTables-paginate {
		
			color: fade(@color-dark, 20%);
			float: none;
			text-align: center;
			
			& .paginate-button { color: inherit !important; }
		
		}
		
	}

}

.dnmca-separator { 

	margin-top: 2rem;

	&.zero { margin-top: 0; }
	
	&.half { margin-top: 1rem; }
	
	&.double { margin-top: 4rem; }
	
	&.line {
		
		margin-top: .5rem;
		padding-bottom: .5rem;
		border-top: 1px solid rgba(0, 0, 0, .1);
	
	}
	
	&-padding {
		
		padding-top: 2rem; 
		
		&.half { padding-top: 1rem; }
	}
	
}

.dnmca-error {

	float: right;
	color: fade(@color-highlight, 100%) !important;
	font-weight: 700;

}

.dnmca-hierarchy {

	display: flex;
	align-items: flex-start;
	padding: 2rem 0 0 3rem;
	
	@media only screen and (max-width: @max-med) { 

		 flex-direction: column; 
		 padding: 0;

	}
		
	font-size: @text-main;
	font-weight: @font-weight-semibold;
	text-transform: uppercase;
	text-align: center;
	
	cursor: pointer;
		
	& .drill-down {
	
		background-color: fade(@color-light, 60%);
		border: 1px solid fade(@color-dark, 20%);
		border-radius: @border-radius;
		
		margin: 1rem;
		padding: 1rem;
		
		@media only screen and (max-width: @max-med) { margin: .5rem; }
		
		&:hover { 
		
			border: 1px solid fade(@color-red-cc, 40%);
			box-shadow: 0 0 1rem fade(@color-red-cc, 40%);

		}
	
		&.level1 { 
		
			width: -webkit-fill-available; 

			& .small { 
			
				font-size: @text-sub;	
				font-weight: @font-weight-normal;
			}	
			
		}
		
		&.level2 { font-size: @text-sub; }
		
		&.level3 { 
		
			font-size: @text-sub; 
			font-weight: @font-weight-normal;
			
			&:hover {
			
				background-color: fade(@color-dark, 70%);
				color: @color-light;
				
			}
		}
		
	}

}

.cc-color {
	
	&-red { color: @color-red-cc !important; }
	
	&-yellow { color: @color-yellow-cc !important; }

}

// FLAGS ICONS
// ===========
.flag-icon {

	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	width: 1.33333333em;
	line-height: 1em;

	&-background {
	  background-size: contain;
	  background-position: 50%;
	  background-repeat: no-repeat;
	}
	
	&:before { content: "\00a0"; }

	&-squared { width: 1em; }

	&-br { background-image: url("https://cdn.dnmca.com/packages/flags/4x3/br.svg"); }

	&-br.flag-icon-squared { background-image: url("https://cdn.dnmca.com/packages/flags/1x1/br.svg"); }

	&-es { background-image: url("https://cdn.dnmca.com/packages/flags/4x3/es.svg"); }

	&-es.flag-icon-squared { background-image: url("https://cdn.dnmca.com/packages/flags/1x1/es.svg"); }

	&-gb { background-image: url("https://cdn.dnmca.com/packages/flags/4x3/gb.svg"); }

	&-gb.flag-icon-squared { background-image: url("https://cdn.dnmca.com/packages/flags/1x1/gb.svg"); }

}


// MATERIALIZE 1.0.0
// =================
@media only screen and (max-width: @max-small) {
  .hide-on-small-only, .hide-on-small-and-down {
    display: none !important;
  }
}

@media only screen and (max-width: @max-med) {
  .hide-on-med-and-down {
    display: none !important;
  }
}

@media only screen and (min-width: @min-med) {
  .hide-on-med-and-up {
    display: none !important;
  }
}

@media only screen and (min-width: @max-small) and (max-width: @max-med) {
  .hide-on-med-only {
    display: none !important;
  }
}

@media only screen and (min-width: @min-large) {
  .hide-on-large-only {
    display: none !important;
  }
}

@media only screen and (min-width: @min-extra-large) {
  .hide-on-extra-large-only {
    display: none !important;
  }
}

@media only screen and (min-width: @min-extra-large) {
  .show-on-extra-large {
    display: block !important;
  }
}

@media only screen and (min-width: @min-large) {
  .show-on-large {
    display: block !important;
  }
}

@media only screen and (min-width: @max-small) and (max-width: @max-med) {
  .show-on-medium {
    display: block !important;
  }
}

@media only screen and (max-width: @max-small) {
  .show-on-small {
    display: block !important;
  }
}

@media only screen and (min-width: @min-med) {
  .show-on-medium-and-up {
    display: block !important;
  }
}

@media only screen and (max-width: @max-med) {
  .show-on-medium-and-down {
    display: block !important;
  }
}

@media only screen and (max-width: @max-small) {
  .center-on-small-only {
    text-align: center;
  }
}


/*
// FROM BOOTSTRAP TO SUPPORT NGTOAST
// =================================
.alert {

	padding: 1rem; // 15px
	margin-bottom: 1.5rem; // 20px
	border: 1px solid transparent;
	border-radius: @border-radius;

}

.alert h4 {

	margin-top: 0;
	color: inherit;

}

.alert .alert-link { font-weight: bold; }

.alert > p,
.alert > ul { margin-bottom: 0; }

.alert > p + p { margin-top: 5px; }

.alert-dismissable,
.alert-dismissible { padding-right: 35px; }

.alert-dismissable .close,
.alert-dismissible .close {

	position: relative;
	top: 0px;
	right: -8px;
	color: inherit;

}

.alert-success {

	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #3c763d;
	
}

.alert-success hr { border-top-color: #c9e2b3; }

.alert-success .alert-link { color: #2b542c; }

.alert-info {

	background-color: #d9edf7;
	border-color: #bce8f1;
	color: #31708f;

}

.alert-info hr { border-top-color: #a6e1ec; }

.alert-info .alert-link { color: #245269; }

.alert-warning {

	background-color: #fcf8e3;
	border-color: #faebcc;
	color: #8a6d3b;

}

.alert-warning hr { border-top-color: #f7e1b5; }

.alert-warning .alert-link { color: #66512c; }

.alert-danger {

	background-color: #f2dede;
	border-color: #ebccd1;
	color: #a94442;
	
}

.alert-danger hr { border-top-color: #e4b9c0; }

.alert-danger .alert-link { color: #843534; }


// TOAST OVERRIDE
// ==============
.ng-toast { margin-top: 8.5rem; }
.ng-toast.ng-toast--right .ng-toast__list { margin-right: .5rem;}

.close {

	opacity: .7;
	
	&:hover { opacity: 1; }
	
}

button.close {
	
    border: 0;
	padding: 0;
	cursor: pointer;
    background: transparent;
	-webkit-appearance: none;
	
}

.alert-dismissable .close,
.alert-dismissible .close {
 
	position: absolute;
	top: 8px;
	right: 6px;
	color: inherit;

}


// DATATABLES OVERRIDE
// ===================
table.dataTable.no-footer { border-bottom: none; }

table.dataTable thead th { 

	background-color: transparent;
	padding: 1rem 1.5rem;
	
}

table.dataTable thead .sorting { 

	background-image: url("../images/sort-amount-down-alt-solid.svg"); 
	background-size: 1.2rem;

}
table.dataTable thead .sorting_asc { 
	
	background-image: url("../images/sort-alpha-down-solid") !important;
	background-size: 1.2rem;

}
table.dataTable thead .sorting_desc { 
	
	background-image: url("../images/sort-alpha-up-alt-solid") !important;
	background-size: 1.2rem;
	
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc, 
table.dataTable thead .sorting_asc_disabled, 
table.dataTable thead .sorting_desc_disabled { background-position: center left; }

td.details-control {
	
	text-align: center;
    color: fade(@color-light, 20%);
	font-size: 1rem;
    cursor: pointer;
	
	&:focus { outline: none; }

}

tr {

	&.odd  td,
	&.even td { background-color: transparent; }

	&.shown td.details-control {

		text-align: center;
		color: fade(@color-green, 100%);
	
	}

}

.dataTables_wrapper .dataTables_paginate .paginate_button { color: fade(@color-dark, 60%) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

	background: none;
	border: none;
	color: fade(@color-highlight, 100%) !important;
	font-weight: 700;

}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {

	background: none;
	border: none;
	border-bottom: 3px solid fade(@color-highlight, 100%);
	color: fade(@color-highlight, 100%) !important;
	font-weight: 700;

}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { 

	color: fade(@color-dark, 10%) !important;
	text-shadow: none;
	
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter, 
.dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_processing, 
.dataTables_wrapper .dataTables_paginate { color: fade(@color-dark, 60%); }
*/