@charset "UTF-8";
/*
________Author | sumbioun.com
_______License | (c) copyright sumbioun 2025
*/

body{
	/*min-width: 700px;*/
	font-family: "museo-sans-rounded", sans-serif;
	font-weight: 500;
	font-style: normal;
	background-color: #e2e3e0;
	margin: 0px;
	overflow-x: hidden; 
	scrollbar-gutter: stable both-edges;
}

#logo{
	/*position: absolute;*/
	width: 100vw;
	height: 135px;
/*	margin-left: auto;
	margin-right: auto;*/
	margin-top: 80px;
	text-align: center;
	/*overflow: auto;*/
	interpolate-size: allow-keywords;
	transition: width 1s, margin-top 1s, margin-left 1s, margin-right 1s;
}

#header{
	position: absolute;
	z-index: -1;
	top: 0px;
	margin: 0px;
	width: 100vw;
	overflow: hidden;
	transition: margin-left 2s, margin-right 2s;
}

#footer{
	/*position: absolute;*/
	width: 50vw;
	margin-top: 50px;
	margin-bottom: 20px;
	margin-left: 25vw;
	/*bottom: 30px;*/
	interpolate-size: allow-keywords;
	transition: width 2s, height 2s, margin-top 2s;

}

#tagline{
	/*position: absolute;*/
	width: 40vw;
	margin-left: 30vw;
	margin-top: 70px;
/*	margin-left: auto;
	margin-right: auto;*/
	font-family: "bd-jupiter", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	text-align: center;
	line-height: 26px;
	interpolate-size: allow-keywords;
	transition: font-size 1s, line-height 1s, width 1s, margin-top 1s;
}

.content-container{
	margin-top: 0;
	margin-bottom: 0;
	width: 50vw;
	height: 0;
	margin-left: 25vw;
	visibility: hidden;
	font-size: 18px;
	line-height: 24px;
	overflow-y: clip;
	interpolate-size: allow-keywords;
	transition: height 2s ease, visibility 2s, margin-top 2s, margin-bottom 2s, width 2s, margin-left 2s, margin-bottom 2s;
}

#about-container{
	font-weight: 500;
	font-size: 16px;
	text-align: justify;
	width: 50vw;
	interpolate-size: allow-keywords;
	transition: width 2s, margin-left 2s, height 2s, visibility 2s, display 2s, margin-top 2s, margin-bottom 2s;
}

.credits-function{
	display: inline-block;
	width: 30%;
	margin-top: 17px;
	text-align: right;
	font-size: 14px;
	font-weight: 900;
	line-height: 18px;
	text-transform: uppercase;
}

.credits-name{
	display: inline-block;
	width: 60%;
	margin-top: 14px;
	margin-left: 30px;
	text-align: left;
	font-size: 16px;
	vertical-align: top;
}

.menu{
	position: fixed;
	top: 470px;
	width: 150px;
	left: 0px;
	margin-left: 100px;
	opacity: 1;
/*	overflow: hidden;
	interpolate-size: allow-keywords;
	transition: width 1s ease, visibility 1s ease;*/
	transition: opacity 1s ease, visibility 1s ease;
}

.button_container{
	/*padding: 5px;*/
	margin-bottom: 5px;
	width: auto;
	display: inline-block;
}

.button_line{
	position: absolute;
	background: linear-gradient(0.25turn,#e2e3e0,#000000);
	margin-top: 14px;
	width: 80px;
	left: -90px;
	height: 3px;
	display: block;
	transition: width 0.5s;
}

#button-1{
	font-weight: 100;
}

.menu_button{
	font-family: bd-jupiter, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	text-transform: uppercase;
	padding: 5px;
	/*margin-bottom: 5px;*/
	width: auto;
	display: inline-block;
	margin-left: 0px;
	transition: margin-left 0.5s;
}

.menu_button:hover{
	cursor: pointer;
	/*font-weight: 400;*/
}

.content{
	/*position: absolute;*/
	/*display: inline-block;*/
	font-size: 18px;
	line-height: 22px;
	width: 900px;
	margin-left: 25vw;
	margin-top: 100px;
	height: auto;
	visibility: visible;
	/*top: 480px;*/
	overflow-y: clip;
	interpolate-size: allow-keywords;
	transition: margin-left 1s, margin-right 1s, width 1s, margin-top 3s, height 2s ease, visibility 2s;
}

.content-header{
	/*position: absolute;*/
	display: inline-block;
	font-size: 18px;
	line-height: 22px;
	width: 100%;
	left: 0px;
	height: 50px;
	top: 0px;
	interpolate-size: allow-keywords;
	transition: width 2s, margin-left 2s, text-align 2s;
}

.content-header-cell{
	display: inline-block;
	width: 50%;
	font-family: bd-jupiter, sans-serif;
	font-weight: 400;
	font-size: 24px;
	text-transform: uppercase;
	margin-left: -20px;
	background: linear-gradient(0.25turn, #3ED691, #5BEFA9);
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-bottom: 15px;
	interpolate-size: allow-keywords;
	transition: width 2s, margin-left 2s, text-align 2s, padding-left 2s, padding-right 2s;
}

.black-header{
	background: linear-gradient(0.25turn, #111111, #5e5e5e);
	color: #ffffff;
	display: block;
}

.workshops{
	display: inline-block;
	height: 340px;
	width: 540px;
	/*margin-top: 65px;*/
}

.news{
	display: inline-block;
	height: 340px;
	width: 350px;
	left: 0px;
	/*top: 50px;*/
}

.news-left{
	display: inline-block;
	width: 35%;
	padding-right: 15%;
	height: 300px;
	vertical-align: top;
}

.news-right{
	display: inline-block;
	height: 300px;
	/*width: 70%;*/
	vertical-align: top;
}

.news-date{
	margin-left: 10%;
	font-size: 16px;
	margin-top: 4px;
	margin-bottom: 20px;
}

.news-content{
	margin-bottom: 30px;
	text-transform: uppercase;
	font-size: 16px;
}

.news-button{
	width: 60%;
	text-align: center;
	font-weight: 900;
	display: inline-block;
	padding: 15px;
	font-size: 16px;
	color: black;
	transition: --a 0.5s;
	background: linear-gradient(90deg,#949494,#b5b5b5);
	transition: background 1s;
	border-radius: 30px;
}

.subcontent-visible{
	visibility: visible;
	height: auto;
	margin-top: 80px;
	margin-bottom: 80px;
}

.button-visible{

}

.content-invisible{
	visibility: invisible;
	height: 0;
	margin-top: 0px;
}

.workshop-logo{
	top: 20px;
}

.submit{
	width: auto;
	text-align: center;
	font-weight: 900;
	display: inline-block;
	padding: 15px 40px 15px 40px;
	margin-left: 120px;
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 16px;
	color: black;
	transition: --a 0.5s;
	background: linear-gradient(0.25turn, #3ED691, #5BEFA9);
	transition: background 1s;
	border-radius: 30px;
}

.submit:hover{
	cursor: pointer;
	background: linear-gradient(0.75turn, #3ED691, #5BEFA9);
}

#only-portuguese{
	visibility:hidden;
	display:none;
	margin-top:0px;
	margin-bottom: 40px;
	text-transform: uppercase;
	background: linear-gradient(0.25turn, #222222, #545454);
	color: #e2e3e0;
	padding: 10px 20px;
	font-size: 14px;
}

.workshop-header-cell{
	/*display: inline-block;*/
	width: 50%;
	text-align: center;
	font-family: bd-jupiter, sans-serif;
	font-weight: 400;
	font-size: 24px;
	text-transform: uppercase;
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(0.25turn, #3ED691, #5BEFA9);
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 7px;
	padding-bottom: 7px;
	margin-bottom: 15px;
	interpolate-size: allow-keywords;
	transition: width 2s, margin-left 2s, margin-right 2s, padding-left 2s, padding-right 2s;
}

.workshop-list{
	display: inline-block;
	width:30%;
	font-weight: 700;
	text-transform: uppercase;
	text-align: right;
	vertical-align: top;
	font-size: 14px;
	line-height: 16px;
	margin-top: 0px;
}

.workshop-element{
	display: inline-block;
	margin-left: 5%;
	width:60%;
	vertical-align: top;
	line-height: 18px;
	margin-bottom: 8px;
}

.workshop-header{
	display: inline-block;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: 10%;
	margin-top: 30px;
	margin-bottom: 10px;
}

.workshop-bullet{
	display: inline-block;
	margin-left: 0px;
	width:70%;
	line-height: 20px;
	margin-bottom: 8px;
}

.workshop-content{
	margin-top: 80px;
	margin-bottom: 40px;
	width: 50vw;
	height: auto;
	margin-left: 25vw;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: justify;
	overflow-y: clip;
	interpolate-size: allow-keywords;
	transition: height 2s, visibility 2s, margin-left 2s, width 2s, margin-top 2s, margin-bottom 2s;
}

.workshop-invisible{
	visibility: hidden;
	display: none;
}

ul{
	width: 70%;
	line-height: 20px;
	text-align: left;
}

li{
	margin-bottom: 12px;
}

.mailing-veil{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.7;
	interpolate-size: allow-keywords;
	transition: opacity 1s, height 1s;
}

.mailing-container{
	position: fixed;
	top: 35vh;
	margin-left: 30vw;
	width: 40vw;
	height: 300px;
	font-size: 18px;
	/*padding: 30px;*/
	background: linear-gradient(0.25turn, #e2e2e2, #efefef);
	opacity: 1;
	/*border: 1px solid blue;*/
	overflow-y: hidden;
	interpolate-size: allow-keywords;
	transition: height 1s, visibility 1s;
	min-width: 500px;
}

.mailing-header{
	width: 90%;
	height: auto;
	padding: 2% 5%;
	text-align: center;
	font-family: bd-jupiter, sans-serif;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	background: linear-gradient(0.25turn, rgb(224, 224, 83), rgb(239, 236, 120));
}

.mailing-close{
	font-family: 'bd-jupiter';
    display: block;
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 22px;
    width: 36px;
    background-color: #3e3e3e;
    color: #efefef;
    height: 28px;
    padding-top: 6px;
    text-align: center;
    padding-bottom: 1px;
    font-weight: 300;
    border-radius: 22px;
    interpolate-size: allow-keywords;
    transition: background-color 0.5s, color 0.5s;
}

.mailing-close:hover{
	color: #3e3e3e;
	background-color: #efefef;
	cursor: pointer;
}

.mailing-button{
	width: 40%;
	margin-bottom: -10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-weight: 900;
	padding: 15px;
	font-size: 16px;
	color: black;
	background: linear-gradient(0.25turn, rgb(224, 224, 83), rgb(239, 236, 120));
	border-radius: 30px;
}

.mailing-message{
	text-align: center;
	padding: 100px 20px;
	visibility: hidden;
}

.mailing-hidden{
	display: none;
	visibility: hidden;
}

.mailing-message-variation{
	padding: 0px;
	font-size: 14px;
}

.mailing-increase{
	height: 340px;
}

input[type=button], input[type=submit]{
	display: block;
	width: 40%;
	margin-bottom: -10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: museo-sans-rounded,sans-serif;
	font-weight: 900;
	padding: 15px;
	font-size: 16px;
	color: black;
	background: linear-gradient(0.25turn, rgb(224, 224, 83), rgb(239, 236, 120));
	border-radius: 30px;
	text-transform: uppercase;
	border:  none;
	cursor: pointer;
}

input[type=submit]:hover{
	background: linear-gradient(0.75turn, rgb(224, 224, 83), rgb(239, 236, 120));
}

input[type=text]{
	display: inline-block;
	margin-left: 17%;
	height: 32px;
	width: 60%;
	font-family: 'museo-sans-rounded', sans-serif;
	font-size: 18px;
	padding: 1% 3%;
}

label{
	display: inline-block;
	font-family: museo-sans-rounded,sans-serif;
	font-weight: 500;
	padding-left: 15px;
	font-size: 16px;
	text-transform: uppercase;
	width: 120px;
}

form{
	margin-top: 30px;
	margin-bottom: 30px;
}

.mailing-invisible{
	visibility: invisible;
	height: 0;
	pointer-events: none;
}

.veil-invisible{
	visibility: invisible;
	pointer-events: none;
	opacity:  0;
}

@media all and (orientation:portrait) {  
    /* Styles for Portrait screen */ 
    .menu{
    	visibility: hidden;
    	opacity: 0;
    } 
    #logo{
    	margin-left: 25vw;
    	width: 50vw;
    	margin-top: 60px;
    }
    #tagline{
    	/*font-size: 20px;*/
    	/*line-height: 22px;*/
    	width: 60vw;
    	margin-left: 20vw;
    	margin-top: 25px;
    }
    .about{
    	display: inline-block;
    	visibility: visible;
    	margin-left: auto;
		margin-right: auto;
    }
    .credits{
    	display: inline-block;
    	visibility: visible;
    	margin-left: auto;
		margin-right: auto;
    }
    #footer{
    	width: 80vw;
    	margin-left: 10vw;
    }
    .content{
    	margin-left: 20vw;
    	/*margin-right: auto;*/
    	margin-top: 50px;
    	width: 60vw;
    }
    .content-container{
    	visibility: visible;
    	height: auto;
    	margin-left: 5vw;
    	width: 90vw;
    	margin-top: -100px;
    	margin-bottom: 160px;
    }
    .content-header-cell{
    	width: 100%;
    	margin-left: 0vw;
    	text-align: center;
    	padding-left: 0px;
    	padding-right: 0px;
    }
    .black-header{
    	/*width: 460px;*/
    }
    #header-2{
    	width: 460px;
    }
    #about-container{
    	width: 90vw;
    }
    .content-invisible{
    	visibility: visible;
		height: auto;
		margin-top: 100px;	
    }

    .workshop-content{
    	width: 90vw;
    	margin-left: 5vw;
    	margin-top: 35px;
    }
    .workshop-header-cell{
    	width: 100%;
    	padding-left: 0px;
    	padding-right: 0px;
    }
} 