:root {
  --black: #111111;
  --white: #ffffff;
  --yellow: #DCC49E;
  --red: #BF1A2F;
  --grey: #F9F9F9;
  --blue: #ECF5FC;
  --dark-grey: #d3d3d3;
}
html { 
	font-size: calc(10px + 0.390625vw);
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
}
body, h1, h2, h3, p, a, li, td, input, textarea, blockquote {
	font-family: 'Quicksand';
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.5em;
	color: var(--black);
}
b, strong {
	font-weight: 500;
}
h1 {
	font-size: 2.5em;
}
h2 {
	font-size: 1.6em;
	font-weight: 500;
}
h3 {
	font-size: 1.5em;
}
a {
	font-size: 1em;
	transition: all 0.5s ease;
}
header a,
footer a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
blockquote {
	font-style: italic;
}
.content {
	max-width: 1290px;
	width: 90%;
	padding: 0 5%;
	overflow: hidden;
	display: block;
}
.center {
	text-align: center;
}
div.reduzed,
p.reduzed,
blockquote.reduzed {
	width: 90%;
}
img.round {
	width: 400px;
	height: 400px;
	object-fit: cover;
	clip-path: circle(50% at 50% 50%);
}
img.square {
	border-radius: 10px;
	width: 100%;
	height: 300px;
	object-fit: cover;
}
img.profile {
	border-radius: 10px;
	width: 100%;
	object-fit: cover;
}
.button,
input[type=submit] {
	text-decoration: none;
	background: none;
	border: 1px solid #111;
	padding: 0.6em 1.4em;
	color: var(--black);
	border-radius: 5px;
	font-size: 1em;
	white-space: nowrap;
	transition: all 0.5s ease;
}
	.button:hover,
	input[type=submit]:hover {
		background-color: var(--yellow);
		cursor: pointer;
		text-decoration: none;
		color: var(--black);
		border-color: var(--yellow);
	}
.faded {
	color: rgb(17,17,17,0.5);
	text-decoration: none;
}
.error {
	width: 20px;
	height: 20px;
}
.error-message {
	display: inline-block;
	margin-left: 20px;
	color: var(--red);
}
form > span.alert {
	display: none;
}
.alert {
	margin-left: 20px;
	margin-right: 10px;
}
	.alert svg {
		stroke: var(--red);
		top: 5px;
		position: relative;
	}
header {
	z-index: 100;
	position: absolute;
	top: 0;
	padding: 20px 0px;
	display: flex;
	justify-content: center;
	width: 100%;
}
	header .logo {
		float: left;
	}
	header nav {
		float: right;
	}
	header nav a {
		margin-left: 30px;
		line-height: 60px;
		color: var(--black);
		font-size: 1em;
	}
	header.light nav a {
		color: var(--white);
	}
	header nav a.selected {
		color: var(--yellow);
	}
	header nav a:hover {
		color: var(--yellow);
		text-decoration: none;
	}
	header nav .button {
		margin-left: 50px;
		color: var(--black);
		border-color: var(--black);
	}
	header.light nav .button {
		border-color: var(--white);
	}
	header.light nav .button:hover {
		border-color: var(--yellow);
	}
	header .menu {
	  display: none;
	  width: 33px;
	  position: absolute;
	  cursor: pointer;
	  top:30px;
	  right:5%;
	}
		header .menu-open .menu {
			position: fixed;
		}
		header .menu-open nav a {
			color: var(--black);
		}
		header .menu span {
		  display: block;
		  height: 3px;
		  width: 33px;
		  margin: 6px 0px;
		  background: var(--black);
		  border-radius: 3px;
		  transition: all 0.5s ease;
		}
		header.light .menu span {
			background: var(--white);
		}
		header .menu-open .menu span {
			transform: rotate(45deg) translate(-3px, -3px);
			background: var(--black);
		}
		header .menu-open .menu span:nth-last-child(2) {
			transform: rotate(-45deg) translate(-3px, 3px);
		}
		header .menu-open .menu span:nth-last-child(3) {
			opacity: 0;
		}
footer {
	position: relative;
	display: flex;
 	justify-content: center;
  	width: 100%;
	background-color: var(--yellow);
	margin: 0;
	padding: 150px 0 80px 0;
}
	footer p,
	footer a {
		font-size: 1em;
	}
	footer .logos {
		padding: 10px 0 0 0;
		display: flex;
	}
	footer .logos a {
		display: inline-block;
		margin: 40px 40px 0 0;
		align-self: flex-end;
	}
section {
	position: relative;
	margin:0;
	padding:0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80px 0 80px 0;
}
section.light {
	background-color: var(--grey);
}
section.bright {
	background-color: var(--blue);
}
.flex {
	display: flex;
	gap: 100px;
	align-items: stretch;
}
	.flex > div {
		flex: 1;
	}
	.flex .bottom-right {
		text-align: right;
		align-self: flex-end;
		padding-bottom: 20px;
	}
	.flex .bottom {
		align-self: flex-end;
	}
.divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
	.divider-bottom {
	    bottom: 0;
	    transform: rotate(180deg);
	}
	.divider svg {
	    position: relative;
	    display: block;
	    width: calc(100% + 1.3px);
	    height: 50px;
	}
		.divider svg path {
		    fill: #ffffff;
		}
		.divider-color-grey svg path {
		    fill: var(--grey);
		}
.hero {
	height: 100vh;
	padding: 0 0;
	color: var(--white);
	background-position: top right;
	background-size: cover;
}
	.hero h1 {
		width: 60%;
		color: var(--white);
		text-shadow: 0px 0px 1px var(--dark-grey), 0px 0px 10px var(--black);
	}
	.hero em {
		top: -30px;
		position: relative;
		font-size: 1.2em;
		font-weight: 500;
		color: var(--yellow);
		text-shadow: 0px 0px 2px var(--black), 0px 0px 2px var(--dark-grey);
	}
.small-hero {
	height: 50vh;
	padding: 0 0;
	color: var(--white);
	background-position: center right;
	background-size: cover;
}
	.small-hero .content {
		bottom: 20px;
		position: absolute;
	}
	.small-hero .tema {
		color: var(--white);
	}
.cv td,
.contact td {
	padding: 20px 30px 0 0;
}
.cv tr:first-child td,
.contact tr:first-child td {
	padding-top: 0;
}
.blog {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 3%;
}
	.blog > div {
		width: 30%;
		transition: transform 0.5s;
	}
	.blog > div > a {
		text-decoration: none;
	}
	.blog > div:hover {
		transform: scale(1.03);
		
	}
	.tema {
		color: rgb(17,17,17,0.5);
	}
	.blog > div .tema {
		font-size: 1em;
	}
form {
	background-color: var(--grey);
	width: 70%;
	padding: 5% 5% 5% 5%;
	border-radius: 10px;
}
	form .step {
		padding: 0 0 30px 0;

	}
	form .type {
		display: flex;
		padding: 0 0 2.5em 0;
	}
		form .type div:first-child {
			margin-left: 0px;
		}
		form .type div {
			width: 25%;
			margin-left: 20px;
		}
			form .type label {
				background-color: var(--white);
				padding: 2.5em 1em;
				display: block;
				border: 1px solid var(--dark-grey);
				border-radius: 5px;
				text-align: center;
				font-size: 1em;
				cursor: pointer;
				transition: all 0.5s ease;
			}
			form .type input {
				display: none;
			}
			form .type input:checked ~ label {
				background-color: var(--yellow);
				border-color: var(--yellow);
			}
	form .time {
		padding: 0 0 50px 0;
	}
		form .time > div {

		}
		form .time > div > label {
			background-color: var(--white);
			border: 1px solid var(--dark-grey);
			padding: 0.6em 1.4em 0.6em 1em;
			color: var(--black);
			border-radius: 5px;
			font-size: 1em;
			width: 51%;
			display: inline-block;
			margin-bottom: 10px;
			cursor: pointer;
			transition: all 0.5s ease;
			vertical-align: middle;
			display: flex;
			align-items: center;
		}
		form .time > div > label svg {
			margin-right: 15px;
		}
		form .time > div > input {
			display: none;
		}
		form .time > div > input:checked ~ label {
			background-color: var(--yellow);
			border-color: var(--yellow);
		}
		form .week {
			padding: 20px 0 0 0;
			display: none;
		}
			form .time > div > input#select:checked ~ .week {
				display: flex;
				flex-wrap: wrap;
			}
			form .week > span {
				opacity: 0.5;
				width: 100%;
				display: inline-block;
			}
			form .week > div {
				flex: 1;
			}
			form .week div div {
				margin-bottom: 10px;
			}
			form .week > div > span {
				display: inline-block;
				margin-bottom: 10px;
			}
			form .week div .placeholder,
			form .week label {
				background-color: var(--white);
				padding: 10px 20px;
				margin-right: 20px;
				display: block;
				border: 1px solid var(--dark-grey);
				border-radius: 5px;
				text-align: center;
				font-size: 1em;
				cursor: pointer;
				color: rgb(17,17,17,0.5);
				transition: all 0.5s ease;
			}
			form .week div .placeholder {
				background-color: var(--grey);
				border-color: var(--grey);
				cursor: default;
			}
			form .week input {
				display: none;
			}
			form .week input:checked ~ label {
				background-color: var(--yellow);
				color: var(--black);
				border-color: var(--yellow);
			}
			form .week input:checked ~ label span {
				color: var(--black);
			}
	form .info {

	}
		form .info input[type=text],
		form .info input[type=email],
		form .info input[type=tel],
		textarea {
			background-color: var(--white);
			border: 1px solid var(--dark-grey);
			padding: 0.6em 1.4em;
			color: var(--black);
			border-radius: 5px;
			font-size: 1em;
			width: 50%;
			margin-bottom: 10px;
			outline-color: var(--yellow);
		}
		form .info > div {
			padding: 0 0 10px 0;
		}
			form .info label {
				padding: 0 0 5px 0;
				display: inline-block;
			}

.cky-btn-revisit-wrapper {
	background: transparent !important;
}
.cky-btn {
	border: 1px solid #111 !important;
	padding: 0.6em 1.4em !important;
	color: var(--black) !important;
	border-radius: 5px !important;
	font-size: 1em !important;
	transition: all 0.5s ease !important;
}
.cky-btn:hover {
	background: var(--yellow) !important;
	opacity: 1 !important;
	border: 1px solid var(--yellow) !important;
}
.cky-table-wrapper {
	margin-top: 1rem !important;
}

@media only screen and (max-width: 768px) {
  
  header nav {
  	display: none;
  	height: 100vh;
  	width: 100vw;
  	overflow: hidden;
  	background: var(--yellow);
  	position: fixed;
  	top:0;
  	left:0;
  	padding: 80px 0;
  }
  	header nav a {
  		color: var(--black);
  		font-size: 2.5em;
  		display: block;
  		padding: 0 0 20px 0;
  		margin: 0 10%;
  		width: 80%;
  		text-align: center;
  	}
  	header nav a:hover,
  	header nav a.selected {
  		color: var(--white);
  	}
  	header nav .button {
  		text-align: center;
  		margin: 0 10%;
  		width: 80%;
  		padding: 0;
  		border: 0;
  		color: var(--black);
  		font-size: 2.5em;
  	}
  header .menu-open nav,
  footer .logos,
  header .menu,
  .flex,
  .blog {
  	display: block;
  }
  .blog > div {
  	width: 100%;
  }
  img.round {
  	width: 300px;
  	height: 300px;
  }
  .hero h1,
  p.reduzed {
  	width: 100%;
  }
  .hero .content {
  	position: absolute;
  	bottom: 0px;
  }
  .hero h1,
  .hero em {
  	text-shadow: 0px 0px 1px var(--dark-grey), 0px 0px 10px var(--black), 0px 0px 20px var(--black);
  }
  section {
	padding: 40px 0 40px 0;
  }
  .flex .bottom-right {
  	padding-top: 20px;
  	text-align: left;
  }
  form {
  	width: 90%;
  }
	  form .type {
	  	flex-wrap: wrap;
	  }
		  form .type div {
		  	width: 47.5%;
		  	margin-bottom: 5%;
		  	margin-left: 0;
		  }
		  form .type div:nth-last-child(2n) {
		  	margin-right: 5%;
		  }
  	form .week {
  		flex-wrap: wrap
  	}
  		form .week > div {
  			flex-basis: 55%;
  		}
	  form .time > div > label {
	  	width: 88%;
	  }
	  form .info input {
	  	width: 87%;
	  }
	  .error-message {
	  	margin-top: 20px;
	  	margin-bottom: 20px;
	  	margin-left: 0px;
	  	width: 100%;
	  }
	  .error-message .alert {
	  	margin-left: 0px;
	  }
}