@font-face {
	font-family: 'Montserrat', sans-serif;
	src: url(/fonts/static/Montserrat-Black.ttf);
	src: url(/fonts/static/Montserrat-BlackItalic.ttf);
	src: url(/fonts/static/Montserrat-Bold.ttf);
	src: url(/fonts/static/Montserrat-BoldItalic.ttf);
	src: url(/fonts/static/Montserrat-ExtraBold.ttf);
	src: url(/fonts/static/Montserrat-ExtraBoldItalic.ttf);
	src: url(/fonts/static/Montserrat-ExtraLight.ttf);
	src: url(/fonts/static/Montserrat-ExtraLightItalic.ttf);
	src: url(/fonts/static/Montserrat-Italic.ttf);
	src: url(/fonts/static/Montserrat-Light.ttf);
	src: url(/fonts/static/Montserrat-LightItalic.ttf);
	src: url(/fonts/static/Montserrat-Medium.ttf);
	src: url(/fonts/static/Montserrat-MediumItalic.ttf);
	src: url(/fonts/static/Montserrat-Regular.ttf);
	src: url(/fonts/static/Montserrat-SemiBold.ttf);
	src: url(/fonts/static/Montserrat-Thin.ttf);
	src: url(/fonts/static/Montserrat-ThinItalic.ttf);
	src: url(/fonts/static/Montserrat-SemiBoldItalic.ttf);
	src: url(/fonts/Montserrat-Italic-VariableFont_wght.ttf);
	src: url(/fonts/Montserrat-VariableFont_wght.ttf); 
}

* {margin: 0; padding: 0; box-sizing: border-box; color: rgba(0, 0, 0, 1); font-family: 'Montserrat', sans-serif;}

.por {position: relative;}
.db {display: block;}

.container { margin: 0 auto; max-width: 1240px; min-width: 300px; padding: 10px;}
.type-box {display: flex; flex-wrap: wrap; gap: 10px; padding: 30px 0;}
.box-item {flex: 1; min-width: 280px;}

.accordion {border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 7px; 
			overflow: hidden; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);}
.accordion-item_input {position: absolute; top: 0; left: 0; opacity: 0;}
.accordion-item_trigger, .accordion-item_trigger-jq,
.accordion-item_trigger-jq2, .accordion-item_trigger-js,
.accordion-item_trigger-js2 {padding: 20px; background-color: #ffd700; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.accordion-item_trigger:hover, .accordion-item_trigger-jq:hover, .accordion-item_trigger-jq2:hover, 
.accordion-item_trigger-js:hover, .accordion-item_trigger-js2:hover {background: #ccad00; cursor: pointer;}
.accordion-item_content, .accordion-item_content-jq, .accordion-item_content-jq2,
.accordion-item_content-js, .accordion-item_content-js2 {padding: 20px; display: none; align-items: center;
									justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.2);}

.accordion-item_input:checked ~ .accordion-item_trigger {background-color: #ffd700;}
.accordion-item_input:checked ~ .accordion-item_content {background-color: #eee; display: flex;}

.accordion-item--active-jq .accordion-item_trigger-jq,
.accordion-item--active-jq2 .accordion-item_trigger-jq2,
.accordion-item--active-js .accordion-item_trigger-js,
.accordion-item--active-js2 .accordion-item_trigger-js2 {background-color: #ffd700;}
.accordion-item--active-jq .accordion-item_content-jq,
.accordion-item--active-jq2 .accordion-item_content-jq2,
.accordion-item--active-js .accordion-item_content-js,
.accordion-item--active-js2 .accordion-item_content-js2 {background-color: #eee; display: flex;}

table {font-size: 2vh; word-wrap: break-word; table-layout:fixed; width:100%;}
table, th, td {text-align: center; border: 1px solid black; padding: 5px; border-collapse: collapse; flex: 1;}
td a {text-decoration: none;}
td a:hover {font-weight: 600;}

h1 {padding: 20px 0;}
h3 {padding-bottom: 5px;}

body {background: rgb(224,12,80);
    background: linear-gradient(307deg, rgba(224,12,80,0.6134103299522935) 0%, 
	rgba(17,204,14,0.5966036072632177) 35%, rgba(14,21,225,0.4565475848542542) 100%);
	display: flex; 
	flex-direction: column;
	align-items: center;
    min-height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
}
main {
	position: relative;
	width: 100%;
	flex: 1;
}

header div {display: flex; align-items: center; justify-content: center;}
footer div {display: flex; align-items: center; padding: 20px 0;}

header, footer {
	width: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(315deg, rgba(0,0,0,0.5041666324733018) 0%, 
	rgba(0,0,0,0.09800416748730745) 55%, rgba(0,0,0,1) 88%);
}

.signature {display: flex; align-items: center; flex: 1;}
.signature img {width: 90px; height: 30px; margin-right: 10px; transition: 500ms; transition-timing-function: ease;}
.signature img:hover {cursor: pointer; transform: scale(1.1);}
.signature span, h1 {color: #eee;}
.signature a {display: flex; align-items: center;} 

@media (max-width: 480px) { 
	.container, .accordion, table {max-width: 300px;}
	table {font-size: 1vh;}
}

@media (max-width: 768px) {
	table {font-size: 1.5vh;}
	.signature {justify-content: center;}
}