@import "reset.less";
@import "functions.less";


html, body {
	overflow-x: hidden;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 100px 10px;
}



#debug {
	display: none;
	text-align: center;
	color: #FFF;
	width: 100px;
	height: 20px;
	background: #D00D;
	position: fixed;
	bottom: 0;
	left: 50%;
	margin-left: -50px;
	z-index: 1000;
}




#app {
	font-family: roboto;
	.background {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-size: cover;
	    background-position: center;
	    background-repeat: no-repeat;
	}
	.background1 {
	    background: linear-gradient(@cor1, @cor2);
	    z-index: 1;
	}
	.background2 {
	    //background-image: url('../images/marca-dagua.svg');
	    background-size: 20%;
	    background-position: 95% 10%;
	    transform: scaleX(-1);
	    z-index: 2;
	    opacity: 0.2;
	}
	.background3 {
	    //background-image: url('../images/marca-dagua.svg');
	    background-size: 20%;
	    background-position: 95% 90%;
	    z-index: 2;
	    opacity: 0.2; 
	}

	#menu {
		position: fixed;
		width: 100%;
		height: 72px;
		padding: 5px 20px;
		text-align: center;
		z-index: 100;
		background: ~"@{cor1}77";
		.grid {
			.grid(auto 1fr; 8%);
			max-width: 1400px;
			margin: 0 auto;

			#icon-menu {
				display: none;
				width: 45px;
				height: 35px;
				right: 20px;
				top: 17px;
				cursor: pointer;
				.fx();
				&:hover {
					opacity: 70%;
				}
				span {
					display: block;
					height: 5px;
					background: #FFF;
					border-radius: 3px;
					.fx();
					&:not(:first-child) {
						margin-top: 10px;
					}
				}
				&.active:not(.close) {
					span:last-child {
						display: none;
					}
					span {
						transform: rotate(45deg);
					}
					span:first-child {
						transform: rotate(-45deg) translate(-23%, 200%);
					}
				}
			}
			
			#logos {
				.grid(auto auto auto; 5px);
				img {
					filter: grayscale(100%) invert(100%);
					cursor: pointer;
					&:hover {
						opacity: 80%;
					}
				}
			}
			
			.links {
				.grid(repeat(6, auto));
				justify-content: space-between;
				margin: 0 auto;
				width: 100%;
				a {
					font-family: robotolight;
					display: block;
					padding: 10px 5px;
					color: #FFF;
					text-transform: uppercase;
					cursor: pointer;
					border-top: 2px solid transparent;
					border-bottom: 2px solid transparent;
					font-size: .9em;
					&.active {
						color: #FF0;
						border-color: #FF0;
					}
					&:hover {
						color: #FFA;
					}
				}
			}
		}
		#icon-menu {
			position: absolute;
		}
		&.destaque {
			background: @cor1;
		}
	}

	#splash {
		position: relative;
	    z-index: 10;
	    width: 100%;
	    height: 100vh;
	    margin-bottom: -60px;
	    .flex();
	    justify-content: center;
		> div {
		    width: 100%;
		    .logo {
		    	display: block;
		    	max-height: 65vh;
		    	height: 100%;
		    	width: 100%;
		    	margin: auto;
		    	transform: translateY(-100vh);
		    	animation: showLogo forwards 1s, zoomLogo infinite 15s;
		    	animation-delay: 0s, 1s;
		    }
		    .horario {
		    	display: block;
		    	width: 50%;
		    	max-width: 400px;
		    	margin: auto;
		    	transform: translateY(100vh);
		    	animation: showHorario forwards 1s, zoomLogo infinite 15s;
		    	animation-delay: 0s, 7s;
		    }
	    }
	    .estacionamento {
	    	position: absolute;
	    	color: #FFF;
	    	bottom: -50%;
	    	width: 100%;
	    	text-align: center;
	    	animation: estacionamento forwards 1s;
	    	animation-delay: .2s;
	    }
	}

	@keyframes estacionamento {
		0% {
			bottom: -50%;
		}
		100% {
			bottom: 5vh;
		}
	}

	@keyframes zoomLogo {
		0%, 100% { transform: scale(100%); }
		50% { transform: scale(103%); }
	}

	@keyframes showLogo {
		0% { transform: translateY(-100vh); }
		100% { transform: translateY(0vh); }
	}
	@keyframes showHorario {
		0% { transform: translateY(100vh); }
		100% { transform: translateY(2vh); }
	}

	#slogan {
		font-size: 2em;
		text-align: center;
		background: @cor1;
		color: #FFF;
	}

	#programacao {
		min-height: 50vh;
        .grid-header {
            .grid(220px 1fr; 15px);
            h2 {
                margin: 10px;
            }
            #dias.filtro {
                .flex(10px);
                background: #1231;
                margin-bottom: 10px;
                > label {
                    margin: 0;
                    border-radius: 3px 0 0 3px;
                }
                .grid {
                    .grid(100px 100px 100px; 5px;);
                    span {
                        padding: 10px;
                    }
                }
            }
        }
        .filtro {
            > label {
                display: block;
                background: #1238;
                color: #FFF;
                padding: 10px 30px;
                border-radius: 3px 3px 0 0;
                margin: 15px 0 1px 0;
            }
            .grid {
                .grid(1fr; 2px);
                span {
                    display: block;
                    border: 1px solid #1234;
                    background: #EEE;
                    color: #123;
                    text-align: center;
                    padding: 7px;
                    font-size: .9em;
                    cursor: pointer;
                    .fx();
                    &.active {
                        background: #D02;
                        color: #FFF;
                    }
                    &:hover {
                        background: #1232;
                    }
                }
            }
        }
		.grid-programacao {
			.grid(200px 1fr; 20px; start);
		
			.lista {
				columns: 2;
				.categoria {
					padding: 10px 10px;
					break-inside: avoid;
					h4 {
						padding: 5px;
						font-size: 1.2em;
					}
					> div {
						padding: 5px 5px 5px 29px;
						color: #123;
						i {
							display: block;
							font-size: .9em;
							color: #666;
							&::before {
								content: "● ";
							}
							b {
								display: block;
								padding: 5px 0;
							}
						}
						span {
							display: block;
							padding: 2px 10px;
							font-size: .96em;
						}
					}
					> div:not(:empty)::before {
						content: "";
						position: absolute;
						border-width: 5px 8px;
						border-style: solid;
						border-color: transparent transparent transparent @cor1;
						transform: translate(-20px, 5px);
					}
					em {
						display: block;
						color: #D03;
						padding-left: 25px;
					}
                    .adicionais:not(:empty) {
                        .flex(3px);
                        margin-top: 4px;
                        font-size: .75em;
                        color: #FFF;
                        span {
                            padding: 2px 5px;
                            border-radius: 3px;
                        }
                        .horario {
                            background: #234;
                        }
                        .sala {
                            background: #D3A;
                        }
                    }
				}
				a {
					color: #5C7CFA;
					&[target="_blank"]:after {
						content: "";
						display: inline-block;
						width: 10px;
						height: 10px;
						background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6ElEQVR4nN2VwQ3CMAwA+2IDJJZgAGAOPk0QyhhVXPUFhaFYggcTFHawP0EprdSStAWnSIAlv6zcyU4UR9HfxDozEwF4lIA3CWRYqekqAXPLcgRC44ENhnYKjXtH8LCT2aS04E5BalrWnbjFys6FD3KeC++OJfo6QV+oxEylpvNHBKoJb0hGEagGXGi6bDMzG02gPHDfOZZAdcBHEageeLBgCB4keAUeJBCAp/opWplzIFQQA86tpA8eJOCG7BRU37X9crnwOKVVeWdAhceMeciSka3EnSOwa66U1J1wNhlQYeHelfmzcQcGEnr90ShuFQAAAABJRU5ErkJggg==);
						background-size: cover;
						background-position: center;
						transform: translateY(-2px);
						opacity: 60%;
					}
					&:hover {
						opacity: 80%;
					}
				}
			}
		}
        .textbox-textarea {
            white-space: pre-line;
            font-size: .8em;
            opacity: 70%;
            padding-left: 30px;
            b {
                display: block;
                margin: -15px 0 -10px 0;
            }
        }
	}
	#apresentacoes-artisticas {
	    background: linear-gradient(@cor1, @cor2);
	    position: relative;
	    padding: 30px 0;
	    .container {
	        color: #FFF;
	        h3 {
	            margin-bottom: 30px;
	            font-size: 2rem;
	            text-align: center;
	            margin-bottom: 20px;
	            div {
	            	font-size: 3rem;
	            	padding: 10px;
	            }
	        }
	        .grid {
	        	.grid(1fr 1fr; 30px; start);
	        	h4 {
	        		width: 200px;
	        		padding: 25px;
	        		margin: 0 auto;
	        		text-align: center;
	        		background: no-repeat url("../images/bg-title.svg");
	        		background-size: contain;
	        		background-position: center;
	        	}
	        	table {
	        		border-collapse: collapse;
	        		margin-top: 15px;
	        		td {
	        			padding: 15px;
	        			position: relative;
                        .flex {
                            .grid(1fr 220px);
                            .brinde {
                                position: absolute;
                                width: 220px;
                                right: 0;
                                margin: -2px 0 0 20px;
                            }
                        }
	        			&:first-child {
	        				width: 130px;
	        				text-align: center;
	        			}
    	        			
	        		}
	        	}
	        }
	    }
	    .background {
	    	opacity: 7%;
	    }
	}
	#interdisciplinaridade {
		border-bottom: 1px solid #1232;
	}
	#video {
		background: #1231;
		h2 {
			text-align: center;
			margin-bottom: 20px;
			text-transform: uppercase;
		}
		iframe {
			display: block;
			margin: 0 auto;
			max-width: 1000px;
		}
	}
	#como-chegar {
		h2 {
			margin-bottom: 20px;
		}
		.grid {
			.grid(1fr 250px; 30px; start);
			h4 {
				margin-bottom: 10px;
			}
			p {
				padding: 3px 0;
			}
		}
	}

	&.mobile {
		#menu {
			.grid {
				.links {
					position: absolute;
					display: block;
					font-size: 2rem;
					top: 70px;
					left: 0px;
					padding: 40px 0;
					background: @cor1;
					box-shadow: 0 5px 5px -5px #000;
					transform: translateY(-100vh);
					z-index: -1;
					a {
						padding: 20px;
						&.active {
							border-color: transparent;
						}
					}
				}
				#icon-menu {
					display: block;
					&.active:not(.close) ~ .links {
						animation: showMenu forwards 1s;
					}
					&.active.close ~ .links {
						animation: hideMenu forwards 1s;
					}
				}
			}
		}
	}
}

@media screen and ( max-width: 1100px ){
	#app #apresentacoes-artisticas {
		.container .grid {
			.grid(1fr; 20px);
		}
	}
}

@media screen and ( max-width: 950px ){
	#app {
		#menu {
			#logos {
				height: 50px;
				img {
					max-height: 50px;
				}
			}
		}
		#splash {
			.estacionamento {
				animation: estacionamento2 forwards 1s;
			}
		}
		#programacao {
			.grid-programacao { 
				.grid(1fr; 20px);
				#areas {
					display: none;
				}
				.filtro .grid span.active {
					background: #d02;
				}
				.lista {
					columns: 1;
				}
			}
		}
		#como-chegar {
			.grid {
				.grid(1fr; 30px);
			}
		}
	}
}

@media screen and ( max-width: 600px ){
	#app #apresentacoes-artisticas .container .grid table td .brinde {
		position: relative;
		margin: 0 auto;
		max-width: auto;
		width: 100%;
		display: block;
	}
    #app #programacao .grid-header {
        .grid(1fr; 15px);
        #dias.filtro {
            background: none;
            label {
                background: none;
                color: #123;
                border-bottom: 1px solid #123;
                width: 100%;
            }
            .grid {
                width: 100%;
                display: block;
                span {
                    display: inline-block;
                    width: 49%;
                }
            }
        }
    }
}

@keyframes estacionamento2 {
	0% {
		bottom: -50%;
	}
	100% {
		bottom: 15vh;
	}
}

@keyframes showMenu {
	0% { transform: translateY(-100vh); }
	100% { transform: translateY(0); }
}
@keyframes hideMenu {
	0% { transform: translateY(0vh); }
	100% { transform: translateY(-100vh); }
}

@keyframes fadeMenu {
	0% {
		background: transparent;
		box-shadow: 0 5px 5px -5px transparent;
	}
	100% {
		background: #170b46;
		box-shadow: 0 5px 5px -5px #000;
	}
}