/*
* {

	color: red;
}
*/

.container {
	width: 80%;
	margin: 0 auto;
}


.header {
	height: 60px;
	width: 100%;
	box-shadow: 0px 1px 0px #DDDDDD;
	background-color: white;
	position: fixed;
	top: 0;
	z-index: 1;
}


p {
	font-family: Kanit, sans-serif;
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	text-align: left;
	line-height: 1.6;
	color: black;
}

h1 {
	font-family: Kanit, sans-serif;
	font-size: 60px;
	font-weight: 800;
	text-align: left;
}

a {
	font-family: Kanit, sans-serif; 
	color: black;
}

.identity{
	display: flex;
	align-items: center;
}


.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	background-color: white;

}

#nav-name {
	font-family: Kanit, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	color: black;
	display: flex;
	align-items: center;
	margin-left: 12px;
}

#nav-name:after {
	content: '';
	background-color: #E05550;
	height: 17px;
	width: 2px;
	margin-left: 10px;
}


#nav-subtitle {
	font-weight: 300;
	font-size: 14px;
	padding-left: 8px;
}


.cv:hover,
.cv:hover .download-icon {
	transition: 0.25s ease-in-out;
	color: #E05550;
	fill: #E05550;
}


.download-icon {
	padding-left: 4px;
}


.header-divider {
	background-color: #E05550;
	height: 4px;
	margin-top: 30px;
	margin-bottom: 12px;
}

.overview {
	margin-top: 40px;
}

.presentation {
	margin-top: 120px;
	margin-bottom: 68px;
}


h5 {
	font-family: Kanit, sans-serif;
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	color: black;
	line-height: 160%;
	margin-bottom: 12px;
}


.grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


.frame {
	background-color: white;
	border: 1px solid black;
	border-radius: 2px;
	text-align: center;
	padding-bottom: 16px;
	margin-bottom: 32px;
}


.big-frame {
	width: 56%;
	height: 450px;
}

.big-frame:nth-child(2n+1) {
	margin-right: 36px;
}

.small-frame {
	width: calc(44% - 40px);
}

.small-frame:nth-child(2n+1) {
	margin-right: 36px;
}


.ux-outcomes .thumbnail {
	background-image: url(./img/ux-outcomes-thumb.png);
}

.inbox .thumbnail {
	background-image: url(./img/inbox-thumb.png);
}

.daily-feed .thumbnail {
	background-image: url(./img/daily-feed-thumb.png);
}

.alert-management .thumbnail {
	background-image: url(./img/alert-management-thumb.png);
}

.landing-pages .thumbnail {
	background-image: url(./img/landing-pages-thumb.png);
}

.site-hero .thumbnail {
	background-image: url(./img/site-hero-thumb.png);
}

.retargeting-material .thumbnail {
	background-image: url(./img/retargeting-material-thumb.png);
}

.aluras-icons .thumbnail {
	background-image: url(./img/aluras-icons-thumb.png);
}


.big-frame span, .small-frame span {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: block;
	width: 100%;
	height: 80%;
}

.frame {
	transition: 0.5s ease-in-out;
}

.frame:hover {
	transform: scale(1.02);
	box-shadow: 0px 4px 6px #DDDDDD; 
	border-color: #E05550;
}


.captionzinha {
	margin-top: 30px;
}


.project-title {
	font-family: Kanit, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 20px;
	color: black;
	margin-bottom: 4px;
}

.project-subtitle {
	color: #9798A6;
	margin-bottom: 4px;
}

.footer {
	margin-top: 20px;
	background-color: #F2F2F2;
}

.contact {
	text-align: center;
	padding: 60px 0px 10px 0px;
}

h3 {
	font-family: Kanit, sans-serif;
	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	color: black;
	line-height: 160%;
	margin-bottom: 4px;
}

h2 {
	font-family: Kanit, sans-serif;
	font-size: 32px;
	font-weight: 700;
	font-style: normal;
	color: black;
	line-height: 160%;
	letter-spacing: -0.4px;
}

.email {
	font-family: Kanit, sans-serif;
	font-size: 32px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.4px;
	color: black;
	margin-bottom: 32px;
	display: inline-block;
	text-decoration: underline;
}

.email:hover {
	transition: 0.25s ease-in-out;
	color: #E05550;
}

h4 {
	font-family: Kanit, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 130%;
}


.social-links a:hover {
	transition: 0.25s ease-in-out;
	color: #E05550;
	fill: #E05550;
}

.social-nav {
	align-items: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.social-nav a {
	display: block;
	height: 24px;
	width: 24px;
	margin: 20px 10px 24px 10px;
}

.social-nav svg {
	display: block;
	height: 100%;
	width: 100%;
	fill: #000;
}

.social-nav svg:hover {
	transition: 0.25s ease-in-out;
	fill: #E05550;
}