* {padding: 0; border: 0; margin: 0; outline: 0; box-sizing: border-box; text-decoration: none; font-display: fallback;}
html {color: #555555; background: url("images/fondo.jpg") no-repeat center top black; background-size: 90% auto; padding: 0 15px; scroll-behavior: smooth;}
body {max-width: 1500px; margin: 0 auto; font-family: "Barlow Semi Condensed", sans-serif; font-size: large; scroll-behavior: smooth;}

header {padding: 50px; text-align: center;}
header .logo {display: block; width: 300px; max-width: 80%; margin: auto;}
main {display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 50px;}
section {padding: 30px; margin-bottom: 50px; background: #0009; border: 2px solid #F9423A; color: white; border-radius: 20px; margin-bottom: 50px;}
main div:nth-child(2) section {padding: 50px;}

h1 {font-size: 3.2rem; margin: 0 auto 30px; text-align: center; text-transform: uppercase; line-height: 1.1em;}
h1 + h2 {font-size: 1.5rem; font-weight: normal; padding: 1em 0; border-top: 2px solid; margin-bottom: 1.5rem; line-height: 1.3em; text-align: center; color: #F9423A;}
h2 {font-size: 2.25rem; color: #F9423A; margin: 0 auto 30px; text-transform: uppercase; line-height: 1.1em;}
h3 {font-size: 1.25rem; color: #F9423A;}
h4 {font-size: 1.15rem; color: #F9423A; font-weight: normal; margin-bottom: 20px;}
main div:nth-child(2) h2:first-child {font-size: 2.0rem; padding: 15px 25px; border: 2px solid; border-radius: 20px; transform: translate(-80px, -20px); background: black;}

p, ul, ol {margin-bottom: 1.5rem;}
ul {margin-left: 1em;}
a {color: #F9423A;}
img {display: block; max-width: 100%;}

.ponentes > div {display: grid; grid-template-columns: 120px 1fr; grid-gap: 30px;}
.ponentes img {display: block; width: 100%; height: auto; border: 2px solid #F9423A; border-radius: 100%;}

.formulario {background: white; color: black; border-color: white; position: sticky; top: 50px;}

input[type=text], input[type=email], select, textarea {display: block; width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid #ddd; background: #f9f9f9; font-family: "Barlow Semi Condensed", sans-serif; font-size: 1rem; transition: .2s;}
input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {border-color: black; background: white;}
input[type=submit], .boton {display: block; width: max-content; padding: 10px 25px; border-radius: 30px; background: #F9423A; color: white; font-family: "Barlow Semi Condensed", sans-serif; font-size: 1.25rem; font-weight: bold; cursor: pointer; transition: .2s;}
input[type=submit]:hover , .boton:hover {background: black;}

main div:nth-child(1) .boton {display: none;}

@media (max-width: 768px) {
	html {background-size: 250% auto;}
	main {grid-template-columns: 1fr; grid-gap: 0;}
	section {padding: 20px; margin-bottom: 15px}
	.boton {display: block !important;}
	.ponentes > div {grid-template-columns: 1fr;}
	.ponentes img {max-width: 150px;}
	h1 {font-size: 2.25rem; text-align: left;}
	h1 + h2 {text-align: left;}
	h2 {font-size: 1.2rem;}
	main div:nth-child(1) h2 {font-size: 2.25rem;}
	main div:nth-child(2) h2:first-child {transform: translate(-50px, 0); border-radius: 0 20px 20px 0;}
	main div:nth-child(3) h2 {font-size: 2.25rem;}
	main div:nth-child(2) section {padding: 30px;}
}