@charset "utf-8";
/*
 * CSS Document
 */

@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap');

@import url("icons.css");

:root {
	--green: #2b7A68;
	--red: #9e424d;
	--blue: #42589e;
	--purple: #65429e;
	--yellow: #9e6c42;
	--cyan: #6d7587;
}

* {
	outline: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

img,
table {
	border: 0;
}

.page {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.content-page {
	margin: 60px auto 0 auto;
	padding: 0;
	width: 1040px;
	min-height: 650px;
}


/* Header */
#header {
	position: relative;
	width: 100%;
	height: 200px;
	background-color: transparent;
	z-index: 1;
}

/* Menu */
#menu {
	display: grid;
	grid-template-columns: repeat(5, minmax(10px, auto));
	grid-column-gap: 10px;
	padding: 0;
	width: 1060px;
	height: 40px;
	margin: 20px auto 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#menu .link {
	height: 36px;
	line-height: 32px;
	text-align: center;
}

#menu .link i {
	font-size: 20px;
	margin-left: -9px;
	text-shadow: 1px 1px 0 #FFF;
	transition: all 0.35s ease 0s;
}

#menu a {
	position: relative;
	font-family: 'Bangers', Verdana;
	font-size: 32px;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 1px;
	transition: all 0.35s ease 0s;
}

#menu a.active:hover {
	cursor: default;
}

#menu a:after {
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	margin: auto;
	content: '';
	color: transparent;
	height: 3px;
	border-radius: 3px;
	transition: all .5s ease 0s;
}

#menu a.active:after,
#menu a.deactive:after {
	width: 0%;
}

#menu a.deactive:hover:after {
	width: 100%;
}

#menu a {
	text-shadow: 1px 1px 0 #FFFFFF;
}

#menu .link i.home,
#menu a.home {
	color: var(--green);
}

#menu .link i.about,
#menu a.about {
	color: var(--red);
}

#menu .link i.skills,
#menu a.skills {
	color: var(--blue);
}

#menu .link i.portfolio,
#menu a.portfolio {
	color: var(--purple);
}

#menu .link i.contact,
#menu a.contact {
	color: var(--yellow);
}

#menu a.active:after {
	width: 100%;
	box-shadow: 1px 1px 0 0 #FFFFFF;
}

#menu a.active.home:after {
	background-color: var(--green);
}

#menu a.active.about:after {
	background-color: var(--red);
}

#menu a.active.skills:after {
	background-color: var(--blue);
}

#menu a.active.portfolio:after {
	background-color: var(--purple);
}

#menu a.active.contact:after {
	background-color: var(--yellow);
}

#menu a.deactive:after {
	box-shadow: 1px 1px 0 0 #FFFFFF;
}

#menu a.deactive.home:after {
	background-color: var(--green);
}

#menu a.deactive.about:after {
	background-color: var(--red);
}

#menu a.deactive.skills:after {
	background-color: var(--blue);
}

#menu a.deactive.portfolio:after {
	background-color: var(--purple);
}

#menu a.deactive.contact:after {
	background-color: var(--yellow);
}

/* Social Media */
#social-media {
	position: fixed;
	z-index: 2;
	left: 1vw;
	top: 100vh;
	padding: 0;
	width: 45px;
	height: 180px;
	margin-top: calc(-1vh - 200px);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#social-media div {
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	text-shadow: 1px 1px 0 #FFFFFF;
}

#social-media .linkedin {
	color: #004b74;

	font-size: 22px;
}

#social-media .instagram {
	color: #f53737;

	font-size: 26px;
}

#social-media .twitter {
	color: #16A0E8;

	font-size: 26px;
}

#social-media .article {
	color: #FF5C5D;

	font-size: 26px;
}

.menu-fixed {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;

	background-color: transparent;
	/* border-bottom: 1px dashed #FFFFFF; */
	transition: all 0.35s ease 0s;
}

.border-fixed-small {
	border-bottom: 2px dotted #FFFFFF;
	-webkit-box-shadow: 0 1px 3px 0 rgba(128, 128, 128, 0.1);
	box-shadow: 0 4px 14px 0 rgba(128, 128, 128, 0.1);
}

.grid-menu .menu-separate {
	height: 8px;
	border-radius: 50%;
	background-color: #707070;
	margin-top: 16px;
}

.grid-menu-small {
	display: grid;
	grid-template-columns: 0.7fr 1fr 1fr 250px 1fr 1fr 1fr;
	grid-column-gap: 8px;
}

.menu-content-fixed {
	height: 48px !important;
	line-height: 48px !important;
}

.title-portfolio {
	width: 100%;
	font-family: 'Bangers';
	font-weight: normal;
	font-style: normal;
	text-align: center;
}

.title-portfolio span.red {
	font-size: 48px;
	margin-left: 3px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.title-portfolio span.black {
	font-size: 42px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.title-contact {
	width: 100%;
	font-family: 'Bangers';
	font-weight: normal;
	font-style: normal;
	text-align: center;
	margin-bottom: 28px;
}

.title-contact span.red {
	font-size: 46px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.title-contact span.black {
	font-size: 42px;
	margin-left: 6px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.title-page {
	width: 100%;
	text-align: left;
	font-family: 'Bangers';
	font-weight: normal;
	font-style: normal;
	font-size: 28px;
	color: #1f1f1f;
	text-shadow: 1px 1px 0 #FFF;
	padding: 0 18px;
	margin-top: -26px;
	letter-spacing: 1px;
}

.subtitle-page {
	width: 100%;
	text-align: left;
	font-family: 'Verdana';
	font-weight: bold;
	font-style: italic;
	font-size: 13px;
	line-height: 24px;
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #FFF;
	text-transform: uppercase;
	padding: 0 16px;
	margin-top: -8px;
}

.menu-logotipo-small {
	display: none;
	text-align: center;
	font-family: Heavitas;
	font-size: 26px;
	height: 64px;
	line-height: 64px;
	transition: all 0.15s ease 0s;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 2px 2px 0 #B4B4B4;
}

.menu-fixed.about a {
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #161616;
}

.menu-fixed.about a:hover {
	color: #FFFB00;
}

.menu-fixed.skills a {
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #D8D8D8;
}

.menu-fixed.skills a:hover {
	color: #308d35;
}

.menu-fixed.portfolio a {
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #D8D8D8;
}

.menu-fixed.portfolio a:hover {
	color: #3c1585;
}

.menu-fixed.contact a {
	color: #FFF;
	text-shadow: 1px 1px 0 #000;
}

.menu-fixed.contact a:hover {
	color: #CD1433;
}

.menu-fixed a:after,
.menu-fixed a:before {
	transition: all .5s ease 0s;
}

.menu-fixed a {
	position: relative;
}

.menu-fixed a:after {
	position: absolute;
	bottom: 4px;
	left: 0;
	right: 0;
	margin: auto;
	width: 0%;
	content: '';
	color: transparent;
	height: 1px;
}

.menu-fixed.home a:after {
	background: #429E89;
	box-shadow: 1px 1px 0 0 #C3C3C3;
}

.menu-fixed.about a:after {
	background: #FFFB00;
}

.menu-fixed.skills a:after {
	background: #308d35;
}

.menu-fixed.portfolio a:after {
	background: #3c1585;
}

.menu-fixed.contact a:after {
	background: #CD1433;
}

.menu-fixed a:hover:after {
	width: 100%;
}

.menu-fixed a i {
	font-size: 26px;
	margin-right: -32px;
	display: none;
}

footer {
	background-color: #1c1d25;
	background-image: url('../image/background-article-title.png');
	background-repeat: repeat;
}

.footer-main {
	width: 100%;
	min-height: 340px;
}

.footer-logo {
	margin: 0 auto;
	width: 980px;
	height: 180px;
	color: #FFFFFF;
	padding-top: 56px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.15s ease 0s;
}

.footer-logo .up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-family: 'Bangers', Verdana;
	font-size: 56px;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 3px 2px 0 #000;
}

.footer-logo .first-name {
	text-align: right;
	position: relative;
	transform: rotate(-1deg);
}

.footer-logo .last-name {
	text-align: left;
	position: relative;
	transform: rotate(-1deg);
}

.footer-logo .up span {
	font-size: 66px;
}

.footer-menu {
	width: 770px;
	height: 56px;
	line-height: 36px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(30px, auto));
	grid-column-gap: 50px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.footer-menu>div {
	font-family: 'Spartan', Verdana, Arial;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 3px 2px 0 #000;
}

.footer-menu a {
	position: relative;
	color: #FFFFFF;
	transition: all 0.35s ease 0s;
}

.footer-menu a:hover {
	cursor: pointer;
}

.footer-menu a:after {
	position: relative;
	bottom: 6px;
	left: 0;
	right: 0;
	margin: 0 auto 0 10px;
	content: '';
	color: transparent;
	height: 3px;
	width: 0;
	border-radius: 3px;
	transition: all .5s ease 0s;
	display: block;
	box-shadow: 3px 2px 0 0 #000;
}

.footer-menu .twitter a:after {
	color: #16A0E8;
	background-color: #16A0E8;
}

.footer-menu .twitter i {
	font-size: 20px;
	margin-right: -3px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .linkedin a:after {
	color: #004b74;
	background-color: #004b74;
}

.footer-menu .linkedin i {
	font-size: 18px;
	margin-right: -2px;
	vertical-align: 2px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .dribbble a:after {
	color: #bf2460;
	background-color: #bf2460;
}

.footer-menu .dribbble i {
	font-size: 18px;
	margin-right: -2px;
	vertical-align: 1px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .github a:after {
	color: #ecc4ab;
	background-color: #ecc4ab;
}

.footer-menu .github i {
	font-size: 24px;
	margin-right: -8px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu .codepen a:after {
	color: #FFFFFF;
	background-color: #FFFFFF;
}

.footer-menu .codepen i {
	font-size: 18px;
	margin-right: -2px;
	text-shadow: 2px 1px 0 #000;
}

.footer-menu a:hover:after {
	width: 90%;
}

.footer-copyright {
	font-family: 'Spartan', Verdana, Arial;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	height: 56px;
	line-height: 56px;
	text-align: center;
	text-shadow: 1px 1px 0 #000;
}

.footer-copyright span {
	font-size: 20px;
	transform: rotate(180deg);
	display: inline-block;
	vertical-align: 2px;
	padding: 0 2px;
}

.text-bottom {
	width: auto;
	min-height: 60px;
	margin-top: 96px;
	font-family: 'Spartan', Verdana, Arial;
	font-size: 16px;
	font-weight: normal;
	font-style: italic;
	color: #253A44;
	text-shadow: 1px 1px 0 #FFF, 2px 2px 0 #CCC;
	line-height: 36px;
	text-align: center;
	padding: 0px 90px;
}

.text-bottom span {
	font-family: 'Bangers', Verdana;
	font-size: 26px;
	font-weight: normal;
	font-style: normal;
	padding: 0 4px;
	vertical-align: -4px;
}

.text-bottom .designer {
	color: var(--green);
}

.text-bottom .developer {
	color: var(--blue);
}

.text-bottom .quality {
	color: var(--red);
}

#transition-one {
	background-color: #FFF;
}

#transition-two {
	background-color: #FFF;
}

#transition-three {
	background-color: #FFF;
}

#transition-four {
	background-color: #FFF;
}

#transition-five {
	background-color: #FFF;
}

.line-page {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 16px 1fr;
	grid-column-gap: 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-top: 14px;
}

.line-page>div:nth-child(1) {
	width: auto;
	height: 0;
	border: none;
	border-top: 2px dotted #666;
	margin: 20px 0 0 30px;
}

.line-page>div:nth-child(2) {
	font-size: 16px;
	color: #FF5C5D;
	height: 30px;
	line-height: 38px;
}

.line-page>div:nth-child(3) {
	width: auto;
	height: 0;
	border: none;
	border-top: 2px dotted #666;
	margin: 20px 30px 0 0;
}

.contact-page {
	width: 100%;
	min-height: 580px;
	display: grid;
	grid-template-columns: 270px 1fr;
	grid-column-gap: 120px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page>div {
	padding-top: 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .div-two-input {
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap: 24px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .div-input {
	width: 100%;
	padding: 15px 5px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page fieldset {
	width: 100%;
	border: 1px solid #CCCCCC;
	border-radius: 6px;
	padding: 3px 6px 12px 6px;
	background-color: transparent;
	background-color: rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page legend {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	color: #ff5c5d;
	text-decoration: none;
	text-shadow: 1px 1px 0 #FFFFFF;
	margin-left: 6px;
	padding: 0 6px;
	letter-spacing: 1px;
}

.contact-page .div-input input {
	font-family: 'Spartan', Verdana, Arial;
	font-size: 15px;
	color: #585D6A;
	width: 100%;
	border: none;
	outline: none;
	padding: 4px 5px 2px 5px;
	display: block;
	background-color: transparent;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 1px 1px 0 #FFFFFF;
}

.color_white {
	color: #FFFFFF !important;
}

.contact-page .div-input textarea {
	font-family: 'Spartan', Verdana, Arial;
	font-size: 15px;
	color: #585D6A;
	width: 100%;
	height: 100px;
	background-color: transparent;
	border: none;
	padding: 4px 5px 2px 5px;
	outline: none;
	resize: none;
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 1px 1px 0 #FFFFFF;
}

.contact-page button {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	color: #FFFFFF;
	border: none;
	padding: 6px 24px;
	margin-top: 8px;
	margin-right: 10px;
	border-radius: 32px;
	background-color: #FF5C5D;
	text-shadow: 2px 2px 0px #FF2829;
	box-shadow: inset 2px 2px 1px #FF2829;
	transition: all 0.35s ease 0s;
}

.contact-page button:hover {
	cursor: pointer;
	text-shadow: 3px 3px 1px #FF2829;
	box-shadow: inset 4px 4px 2px #FF2829;
}

.contact-page button[disabled="disabled"] {
	cursor: default !important;
	color: #CCCCCC !important;
	text-shadow: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.contact-page .div-button-send {
	padding: 5px 0 5px 5px;
	margin-left: 55px;
	margin-top: 10px;
	margin-bottom: 25px;
	text-align: right;
}

.contact-page .item-contact-page {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 0 60px;
	grid-column-gap: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0 0 50px 0;
}

.icon-required {
	font-size: 18px;
	color: #ff5c5d;
	vertical-align: 4px;
	margin-left: 3px;
	text-shadow: 1px 1px 0 #FFF;
	display: none;
}

.contact-page .item-contact-page>div:nth-child(1) {
	text-align: right;
	padding-right: 22px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .item-contact-page>div:nth-child(2) {
	margin: 2px 0 2px 0;
	border-right: 2px dotted #666;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.contact-page .item-contact-page>div:nth-child(3) {
	font-size: 28px;
	color: #9E6C42;
	line-height: 60px;
	text-align: center;
	text-shadow: 1px 1px 0 #FFF;
}

.title-icon {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	color: #6d7587;
	text-decoration: none;
	text-shadow: 1px 1px 0 #FFFFFF;
	text-align: right;
	letter-spacing: 1px;
	margin-top: 26px;
}

.item-contact {
	font-family: 'Spartan', Verdana, Arial;
	font-size: 15px;
	color: #5a5d64;
	font-style: italic;
	text-shadow: 1px 1px 0 #FFF;
	text-align: right;
	letter-spacing: -1px;
	margin-bottom: 38px;
	margin-top: 4px;
	padding-right: 4px;
}

.phone-small {
	font-size: 13px;
	margin-right: 4px;
	vertical-align: 1px;
}

.item-contact.text {
	font-size: 16px;
}

.contact-page .title {
	font-family: 'Roboto Mono', Arial;
	font-size: 16px;
	font-weight: bold;
	color: #1F1F1F;
	text-transform: uppercase;
	height: 36px;
	line-height: 40px;
}

.contact-page .item {
	font-family: 'Roboto Mono', Arial;
	font-size: 15px;
	color: #1F1F1F;
	height: 24px;
	line-height: 16px;
}

.contact-page .captch-text {
	font-family: 'Spartan', Verdana, Arial;
	font-size: 14px;
	color: #6d7587;
	font-style: italic;
	height: 24px;
	line-height: 16px;
	padding: 0 30px;
	text-align: center;
	text-shadow: 1px 1px 0 #FFFFFF;
}

/* *** BACKGROUND *** */

#page-home,
#page-about,
#page-skills,
#page-portfolio,
#page-curriculum,
#page-contact {
	background-color: #E8E1D1;
	background-image: url('../image/c.png');
	background-repeat: repeat;
}

#page-curriculum {
	background-color: #232323 !important;
}

.div-curriculum {
	margin-top: -70px;
	margin-bottom: 20px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* *** LOGOTIPO *** */

.logo {
	margin: 0 auto;
	width: 980px;
	height: 180px;
	color: #FFFFFF;
	padding-top: 40px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.15s ease 0s;
}

.logo .up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 2;
	font-family: Bangers;
	font-size: 86px;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.logo .first-name {
	text-align: right;
	position: relative;
	transform: rotate(-1deg);
}

.logo .last-name {
	text-align: left;
	position: relative;
	transform: rotate(-1deg);
}

.logo .up span {
	font-size: 96px;
}

.logo .down {
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 50px;
	text-decoration: none;
	margin-top: -19px;
}

#header .logo .first-name {
	text-shadow: 3px 2px 0 #B4B4B4;
}

#header .logo .last-name {
	color: #FFFFFF;
	text-shadow: 3px 2px 0 #B4B4B4;
}

#header .logo .down {
	color: #1F1F1F;
	text-shadow: 2px 2px 0 #C3C3C3;
}

.load .logo .first-name,
.load .logo .last-name,
.load .logo .down {
	text-shadow: 3px 2px 0 #3c3d3f;
}

/* *** HEADER PAGE *** */

.home .logo .first-name {
	color: var(--green);
}

.about .logo .first-name {
	color: var(--red);
}

.skills .logo .first-name {
	color: var(--blue);
}

.portfolio .logo .first-name {
	color: var(--purple);
}

.contact .logo .first-name {
	color: var(--yellow);
}

.curriculum .logo .first-name {
	color: var(--white);
}

.curriculum .logo .down {
	color: #FFFFFF !important;
	text-shadow: none !important;
}

#page-curriculum .open-menu i {
  color: #FFF !important;
  text-shadow: none !important;
}

/* *** PAGE LOADING *** */

.load {
	position: absolute;
	background-color: #63666A;
	background-image: url('../image/c.png');
	background-repeat: repeat;
	left: 0;
	top: 0;
	width: 100vw;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.load .logo {
	padding-top: 0;
	opacity: 0.8;
	height: 250px !important;
}

.load-down {
	height: 0;
	animation: load-down .5s forwards 0s ease-in-out;
}

@keyframes load-down {
	0% {
		height: 0;
	}

	100% {
		height: 100vh;
	}
}

.load-up {
	height: 100vh;
	animation: load-up .5s forwards 1s ease-in-out;
}

@keyframes load-up {
	0% {
		height: 100vh;
	}

	100% {
		height: 0;
	}
}

.text-load {
	width: auto;
	height: 120px;
	line-height: 120px;
	text-align: center;
	font-family: 'Dancing Script';
	font-size: 28px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #3c3d3f;
	text-decoration: none;
	position: relative;
	transform: rotate(-4deg);
}

.text-load i {
	font-size: 24px;
	margin-right: -8px;
	vertical-align: 12px;
}

.text-load .point-one {
	font-size: 76px;
	animation: text-point 1s infinite 0s ease-in-out;
}

.text-load .point-two {
	font-size: 76px;
	animation: text-point 2s infinite 0s ease-in-out;
	margin-left: -12px;
}

.text-load .point-three {
	font-size: 76px;
	animation: text-point 3s infinite 0s ease-in-out;
	margin-left: -12px;
}

@keyframes text-point {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.layer-front {
	margin: 40px auto 60px auto;
	width: 600px;
	height: 300px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 90px solid #b1c570;
	border: 90px solid transparent;
	border-bottom: none;
	border-radius: 300px 300px 0 0;
}

.layer-back {
	width: 400px;
	height: 200px;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 80px solid #49a6c5;
	border: 80px solid transparent;
	border-bottom: none;
	border-radius: 200px 200px 0 0;
}

.layer-database {
	width: 220px;
	height: 110px;
	margin: 10px auto 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 70px solid #e85a4c;
	border: 70px solid transparent;
	border-bottom: none;
	border-radius: 110px 110px 0 0;
}

.layer-skills {
	margin: 40px auto 60px -2%;
	width: 1000px;
	height: 360px;
	min-height: 360px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
}

.layer-skills .html {
	position: absolute;
	left: 18%;
	top: 53%;
	font-size: 62px;
	color: #e45126;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-html 6s infinite alternate linear;
	--rot: 7deg;
	transform: rotate(var(--rot));
}

.layer-skills .css {
	position: absolute;
	left: 78%;
	top: 79%;
	font-size: 62px;
	color: #0c73b8;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-css 7s infinite alternate linear;
	--rot: -7deg;
	transform: rotate(var(--rot));
}

.layer-skills .js {
	position: absolute;
	left: 47%;
	top: 85%;
	font-size: 62px;
	color: #e4a228;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-js 8s infinite alternate linear;
	--rot: -13deg;
	transform: rotate(var(--rot));
}

.layer-skills .sass {
	position: absolute;
	left: 88%;
	top: 53%;
	font-size: 54px;
	color: #c76494;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-sass 6.5s infinite alternate linear;
	--rot: -5deg;
	transform: rotate(var(--rot));
}

.layer-skills .less {
	position: absolute;
	left: 65%;
	top: 16%;
	font-size: 56px;
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-less 7.5s infinite alternate linear;
	--rot: 8deg;
	transform: rotate(var(--rot));
}

.layer-skills .angular {
	position: absolute;
	left: 9%;
	top: 36%;
	font-size: 60px;
	color: #bd002e;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-angular 8.5s infinite alternate linear;
	--rot: -2deg;
	transform: rotate(var(--rot));
}

.layer-skills .react {
	position: absolute;
	left: 78%;
	top: 9%;
	font-size: 44px;
	color: #5ed3f3;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-react 9s infinite alternate linear;
	--rot: 4deg;
	transform: rotate(var(--rot));
}

.layer-skills .python {
	position: absolute;
	left: 49%;
	top: 36%;
	font-size: 62px;
	color: #336e9d;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-python 7.2s infinite alternate linear;
	--rot: 3deg;
	transform: rotate(var(--rot));
}

.layer-skills .php {
	position: absolute;
	left: 30%;
	top: 3%;
	font-size: 80px;
	color: #4d588e;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-php 6.8s infinite alternate linear;
	--rot: -4deg;
	transform: rotate(var(--rot));
}

.layer-skills .node {
	position: absolute;
	left: 68%;
	top: 53%;
	font-size: 52px;
	color: #13672a;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-node 8.2s infinite alternate linear;
	--rot: -6deg;
	transform: rotate(var(--rot));
}

.layer-skills .django {
	position: absolute;
	left: 53%;
	top: 66%;
	font-size: 70px;
	color: #0c2d1f;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-django 7.8s infinite alternate linear;
	--rot: 2deg;
	transform: rotate(var(--rot));
}

.layer-skills .laravel {
	position: absolute;
	left: 30%;
	top: 77%;
	font-size: 60px;
	color: #f72718;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-laravel 8.8s infinite alternate linear;
	--rot: -8deg;
	transform: rotate(var(--rot));
}

.layer-skills .codeigniter {
	position: absolute;
	left: 54%;
	top: 1%;
	font-size: 44px;
	color: #e84023;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-codeigniter 6.2s infinite alternate linear;
	--rot: -8deg;
	transform: rotate(var(--rot));
}

.layer-skills .nginx {
	position: absolute;
	left: 15%;
	top: 12%;
	font-size: 80px;
	color: #1F1F1F;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-nginx 7.3s infinite alternate linear;
	--rot: -3deg;
	transform: rotate(var(--rot));
}

.layer-skills .github {
	position: absolute;
	left: 14%;
	top: 86%;
	font-size: 64px;
	color: #191c20;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-github 7.6s infinite alternate linear;
	--rot: 13deg;
	transform: rotate(var(--rot));
}

.layer-skills .unity {
	position: absolute;
	left: 35%;
	top: 56%;
	font-size: 60px;
	color: #162733;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-unity 8.4s infinite alternate linear;
	--rot: -5deg;
	transform: rotate(var(--rot));
}

.layer-skills .wordpress {
	position: absolute;
	left: 92%;
	top: 26%;
	font-size: 58px;
	color: #21759b;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-wordpress 7.9s infinite alternate linear;
	--rot: -12deg;
	transform: rotate(var(--rot));
}

.layer-skills .photoshop {
	position: absolute;
	left: 29%;
	top: 34%;
	font-size: 69px;
	color: #3aa29c;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-photoshop 8.7s infinite alternate linear;
	--rot: 10deg;
	transform: rotate(var(--rot));
}

.layer-skills .npm {
	position: absolute;
	left: 75%;
	top: 37%;
	font-size: 58px;
	color: #c53636;
	text-shadow: 1px 1px 0 #FFF;
	z-index: 1;
	animation: move-npm 8.7s infinite alternate linear;
	--rot: 10deg;
	transform: rotate(var(--rot));
}

@keyframes move-html {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(18px, 18px); }
}
@keyframes move-css {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(-12px, 16px); }
}
@keyframes move-js {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(-18px, 18px); }
}
@keyframes move-sass {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(18px, -18px); }
}
@keyframes move-less {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(-20px, 20px); }
}
@keyframes move-angular {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(20px, -20px); }
}
@keyframes move-react {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(0px, 25px); }
}
@keyframes move-python {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(-25px, 0px); }
}
@keyframes move-php {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(0px, -25px); }
}
@keyframes move-node {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(25px, 25px); }
}
@keyframes move-django {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(15px, 0px); }
}
@keyframes move-laravel {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(0px, -15px); }
}
@keyframes move-codeigniter {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(-15px, 15px); }
}
@keyframes move-nginx {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(15px, -15px); }
}
@keyframes move-github {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(18px, 0px); }
}
@keyframes move-unity {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(0px, -18px); }
}
@keyframes move-wordpress {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(-18px, 18px); }
}
@keyframes move-photoshop {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(18px, -18px); }
}
@keyframes move-npm {
	0% { transform: rotate(var(--rot)) translate(0px, 0px); }
	100% { transform: rotate(var(--rot)) translate(18px, -18px); }
}

.other-skills {
	width: auto;
	min-height: 400px;
	margin-bottom: 120px;
}

.title-other-skills {
	font-family: 'Bangers';
	color: #6d7587;
	font-weight: normal;
	font-style: normal;
	text-align: right;
	padding-right: 32px;
}

.title-other-skills span.red {
	font-size: 40px;
	margin-left: 2px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.title-other-skills span.black {
	font-size: 38px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.chart {
	margin: 0 35px 0 30px;
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-column-gap: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.line-right {
	font-family: 'Bangers';
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
	text-transform: uppercase;
	height: 100px;
	line-height: 100px;
	padding-right: 26px;
	text-align: right;
	border-right: 1px solid #AAA;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	letter-spacing: 1px;
}

.line-dotted {
	border-top: 1px dotted #666;
}

.column {
	position: relative;
	z-index: 2;
	width: 875px;
	height: 400px;
	margin-top: -400px;
	margin-left: 130px;
	border-bottom: 1px solid #AAA;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: flex-end;
}

.column>div {
	width: 156px;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-shadow: inset 1px 1px 32px 0px rgba(0, 0, 0, 0.1);
}

.column .aqua {
	height: 380px;
	background-color: #01b8aa;
}

.column .aqua .percent {
	margin-top: 315px;
}

.column .green {
	height: 360px;
	background-color: #b1c570;
}

.column .green .percent {
	margin-top: 295px;
}

.column .yellow {
	height: 380px;
	background-color: #f9d156;
}

.column .yellow .percent {
	margin-top: 315px;
}

.column .blue {
	height: 240px;
	background-color: #49a6c5;
}

.column .blue .percent {
	margin-top: 175px;
}

.column .red {
	height: 80px;
	background-color: #e85a4c;
}

.column .red .percent {
	margin-top: 15px;
}

.column .percent {
	font-family: 'Bangers', Verdana;
	font-size: 52px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.column .percent span {
	font-size: 26px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.column .text {
	font-family: 'Bangers', Verdana;
	font-size: 26px;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -1px -1px 0 #585b62;
	margin-top: 26px;
	margin-bottom: 120px;
}

/* MENU MOBILE */

.open-menu {
	position: absolute;
	top: 2vh;
	right: 2vw;
	width: 8vh;
	height: 8vh;
	line-height: 8vh;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
	display: none;
}

#menu-mobile .close-menu {
	position: absolute;
	top: 2vh;
	right: 2vw;
	width: 8vh;
	height: 8vh;
	line-height: 8vh;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	z-index: 10;
}

.open-menu i {
	font-size: 4rem;
	color: #2D2D2D;
	text-shadow: 1px 1px 0 #C3C3C3;
	transition: all 0.35s ease 0s;
}

.open-menu:hover i {
	cursor: pointer;
	color: #2b7A68;
}

.close-menu i {
	font-size: 4rem;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 #5f5f5f;
	transition: all 0.35s ease 0s;
}

.close-menu:hover i {
	cursor: pointer;
	color: #FF5C5D;
}

#menu-mobile {
	position: fixed;
	background-color: #63666A;
	background-image: url('../image/c.png');
	background-repeat: repeat;
	left: 100%;
	top: 0;
	width: 100vw;
	min-height: 100vh;
	height: 100vh;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow-y: auto;
	z-index: 100;
	padding: 2vw;
	transition: left 0.5s ease;
}

#menu-mobile.open-menu-mobile {
	animation: open-menu-mobile .5s forwards 0s ease-in-out;
}

@keyframes open-menu-mobile {
	0% { left: 100%; }
	100% { left: 0; }
}

#menu-mobile .link {
	height: 14vh;
  	line-height: 14vh;
	text-align: center;
}

#menu-mobile .link i {
	font-size: 4vmin;
	margin-left: -12px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #5F5F5F;
	transition: all 0.35s ease 0s;
}

#menu-mobile a {
	position: relative;
	font-family: 'Bangers', Verdana;
	font-size: 10vmin;
	letter-spacing: 3px;
	transition: all 0.35s ease 0s;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 #5F5F5F;
}

#menu-mobile a.active {
	border-bottom: 2px solid #FFFFFF;
}

#menu-mobile a.active:hover {
	cursor: default;
}

#menu-mobile a.deactive:hover {
	color: #BBBBBB;
}




.div-title-article {
	font-family: 'Bangers';
	text-decoration: none;
	width: 1060px;
	height: 60px;
	margin-top: 50px;
	margin-bottom: 20px;
	text-align: center;
}

.div-title-article span.red {
	font-size: 40px;
	margin-left: 3px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.div-title-article span.black {
	font-size: 36px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
}

.div-button-article {
	width: 1060px;
	height: 80px;
	text-align: right;
	padding: 0 34px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-button-article button {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 22px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	color: #FFFFFF;
	border: none;
	padding: 6px 24px;
	border-radius: 32px;
	background-color: #FF5C5D;
	text-shadow: 2px 2px 0px #FF2829;
	box-shadow: inset 2px 2px 1px #FF2829;
	transition: all 0.35s ease 0s;
}

.div-button-article button:hover {
	cursor: pointer;
	text-shadow: 3px 3px 1px #FF2829;
	box-shadow: inset 4px 4px 2px #FF2829;
}

.div-articles {
	width: auto;
	margin: 0 12px 36px 12px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 42px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 36px;
}

.div-articles .title {
	display: block;
	font-family: 'Bangers', Arial;
	font-size: 24px;
	line-height: 26px;
	text-align: right;
	color: #6d7587;
	margin: 7px 0 8px 0;
	text-shadow: 1px 1px 0 #FFF;
	transition: all 0.25s ease 0s;
}

.div-articles .title:hover {
	cursor: pointer;
	color: #db4551;
}

.div-articles .description {
	display: block;
	font-family: 'Spartan';
	font-size: 12px;
	font-style: italic;
	line-height: 18px;
	display: block;
	color: #5a5d64;
	text-shadow: 1px 1px 0 #FFF;
	margin: 3px 0;
	text-align: right;
}

.div-about {
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-column-gap: 26px;
	padding: 0 26px;
	margin-bottom: 40px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-about img {
	border: 0;
	width: 260px;
	margin-top: 16px;
}

.div-about .title {
	font-family: 'Bangers', Verdana, Arial;
	line-height: 50px;
	text-align: center;
	color: #6d7587;
	text-shadow: 1px 1px 0 #FFF;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 24px;
}

.div-about .title span.red {
	font-size: 48px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #FF2829;
}

.div-about .title span.black {
	font-size: 42px;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -2px -1px 0 #585b62;
	margin-right: 4px;
}

.div-about .description {
	font-family: 'Spartan';
	font-size: 13px;
	font-weight: normal;
	font-style: italic;
	line-height: 22px;
	text-align: justify;
	color: #6d7587;
	text-shadow: 1px 1px 0 #FFF;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -1px -1px 0 #585b62;
}

.div-about .description p {
	margin-bottom: 12px;
	text-indent: 34px;
}

.div-portfolio {
	width: auto;
	padding: 0 18px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.div-portfolio .div-separate-one {
	display: block;
	width: 422px;
	height: 36px;
	margin-left: 218px;
}

.div-portfolio .div-separate-one.en {
	width: 308px;
	margin-left: 332px;
}

.div-portfolio .div-separate-two {
	display: block;
	width: 260px;
	height: 36px;
	margin-left: 640px;
}

.div-portfolio .div-separate-three {
	display: block;
	width: 760px;
	height: 36px;
	margin-left: 140px;
}

.div-portfolio .div-separate-four {
	display: block;
	width: 300px;
	height: 36px;
	margin-left: 140px;
}

.div-portfolio .div-separate-five {
	display: block;
	width: 300px;
	height: 36px;
	margin-left: 440px;
}

.div-portfolio .div-separate-six {
	display: block;
	width: 522px;
	height: 36px;
	margin-left: 218px;
}

.div-portfolio .left {
	border-left: 2px dotted #AAA;
}

.div-portfolio .right {
	border-right: 2px dotted #AAA;
}

.div-portfolio .top {
	border-top: 2px dotted #AAA;
}

.div-portfolio .bottom {
	border-bottom: 2px dotted #AAA;
}

.div-portfolio .item {
	position: relative;
	width: 930px;
	border: 5px solid #DDD5C1;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-shadow: inset 0 2px 80px 0 rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.div-portfolio .item:hover {
	cursor: pointer;
}

.div-portfolio .item > div:first-child {
	position: relative;
	width: 0;
	height: 100%;
	display: grid;
	grid-template-rows: 85px 1fr 70px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow: hidden;
	transition: all .6s ease 0s;
	z-index: 3;
}

.div-portfolio .item:hover > div:first-child,
.div-portfolio .item.touch-open > div:first-child {
	width: 100%;
	height: 100%;
}

.div-portfolio .item .div-item-feedback {
	position: absolute;
	top: 100%;
	left: 100%;
	transform: translate(-100%, -100%);
	width: 50px;
	height: 50px;
	z-index: 2;
	text-align: left;
}

.div-portfolio .item .div-item-feedback i {
	font-size: 38px;
	color: #FFFFFF;
  	text-shadow: 2px 1px 0 #B4B4B4;
	opacity: 0.8;
	animation: blink-animation 2.5s ease-in-out infinite;
}

@keyframes blink-animation {
    0% { opacity: 0.8; }
    50% { opacity: 0.2; }
    100% { opacity: 0.8; }
}

.div-portfolio .item:hover > div:first-child .number,
.div-portfolio .item:hover > div:first-child .title,
.div-portfolio .item:hover > div:first-child .description,
.div-portfolio .item:hover > div:first-child .button,
.div-portfolio .item.touch-open > div:first-child .number,
.div-portfolio .item.touch-open > div:first-child .title,
.div-portfolio .item.touch-open > div:first-child .description,
.div-portfolio .item.touch-open > div:first-child .button {
	visibility: visible;
	transition: all .6s ease .6s;
}

.div-portfolio .number {
	width: 90px;
	line-height: 85px;
	text-align: right;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	float: right;
	font-size: 64px;
	padding-right: 25px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	visibility: hidden;
	transition: none;
}

.div-portfolio .title {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 42px;
	line-height: 85px;
	text-align: left;
	color: #FFFFFF;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0 24px;
	visibility: hidden;
	transition: none;
}

.div-portfolio .description {
	font-family: 'Spartan';
	font-size: 14px;
	font-weight: normal;
	font-style: italic;
	line-height: 28px;
	text-align: left;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0 100px 0 24px;
	visibility: hidden;
	transition: none;
}

.div-portfolio .description span {
	display: inline-block;
	text-indent: 16px;
}

.div-portfolio .description span:not(:last-child) {
	margin-bottom: 12px;
}

.div-portfolio .button {
	height: 60px;
	width: 100%;
	text-align: right;
	padding: 0 32px 0 24px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	visibility: hidden;
	transition: none;
}

.div-portfolio button {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 1px;
	border: none;
	padding: 6px 24px;
	border-radius: 32px;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.div-portfolio button:hover {
	cursor: pointer;
	box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
}

.div-portfolio .dashboard {
	height: 450px;
	background-image: url('../portfolio/dashboard.png');
	margin-left: 37px;
}

.div-portfolio .dashboard > div:first-child {
	background-color: var(--purple);
}

.div-portfolio .dashboard button {
	color: var(--purple);
}

.div-portfolio .artzan {
	height: 450px;
	background-image: url('../portfolio/artzan.png');
	margin-left: 74px;
}

.div-portfolio .artzan > div:first-child {
	background-color: var(--red);
}

.div-portfolio .artzan button {
	color: var(--red);
}

.div-portfolio .agendar {
	height: 450px;
	background-image: url('../portfolio/agendar.png');
}

.div-portfolio .agendar > div:first-child {
	background-color: var(--green);
}

.div-portfolio .agendar button {
	color: var(--green);
}

.div-portfolio .advogados {
	height: 450px;
	background-image: url('../portfolio/advogados.png');
	margin-left: 74px;
}

.div-portfolio .advogados > div:first-child {
	background-color: var(--blue);
}

.div-portfolio .advogados button {
	color: var(--blue);
}

.div-portfolio .ademotos {
	height: 450px;
	background-image: url('../portfolio/ademotos.png');
}

.div-portfolio .ademotos > div:first-child {
	background-color: var(--yellow);
}

.div-portfolio .ademotos button {
	color: var(--yellow);
}

.div-portfolio .fotografia {
	height: 450px;
	margin-bottom: 80px;
	background-image: url('../portfolio/fotografia.png');
	margin-left: 37px;
}

.div-portfolio .fotografia > div:first-child {
	background-color: var(--cyan);
}

.div-portfolio .fotografia button {
	color: var(--cyan);
}

.div-portfolio .div-number {
	display: block;
	height: 36px;
}

.busines-card {
	margin: 0 auto;
	width: 588px;
	display: grid;
	grid-template-columns: 134px 52px 252px 150px;
	column-gap: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;

	margin-top: 120px;
	margin-bottom: 120px;
}

.busines-card>div {
	font-family: 'Bangers', Verdana;
	font-size: 48px;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	text-shadow: -1px -1px 0 #585b62;
}

.separate {
	margin-top: 60px;
	width: auto;
	height: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 1px 1px 2px #C1B7AE, inset -1px -1px 2px #FFF;
	box-shadow: inset 1px 1px 2px #C1B7AE, inset -1px -1px 2px #FFF;
}

.quote {
	width: auto;
	padding-right: 30px;
	text-align: right;
	font-family: 'Spartan', Arial;
	font-size: 13px;
	font-weight: normal;
	font-style: italic;
	color: #7e828b;
}

.author {
	width: auto;
	margin-top: 4px;
	margin-bottom: 60px;
	padding-right: 38px;
	text-align: right;
	font-family: 'Spartan', Arial;
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
	color: #6d7587;
}

@media (max-width: 1024px) {
	#menu {
		display: none;
	}

	.separate, .div-article, .div-icon-code {
		display: none;
	}

	.open-menu {
		display: block;
	}

	/* .page vira grid (regra mais abaixo) só com grid-template-ROWS definido.
	   Sem declarar as colunas, a única coluna implícita usa largura "auto"
	   e se ajusta ao maior conteúdo interno (ex.: elementos com largura
	   fixa em px, como o logo do header/footer) em vez de travar na
	   largura da tela — isso é o que fazia texto e ilustrações vazarem
	   para fora da viewport. minmax(0, 1fr) trava a coluna em 100% da
	   largura disponível e ainda permite que os itens encolham. */
	.page {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.content-page, .div-title-article {
		width: 100% !important;
		padding: 0 6% !important;
		height: auto !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/* Logo do header: sempre foi fixo em 980px/86-96px, nunca teve um
	   ajuste para telas <=1024px. vw mantém a proporção em toda a faixa
	   tablet/celular sem precisar de mais um breakpoint. */
	.logo {
		width: 100%;
		height: auto;
		padding-top: 20px;
	}

	.logo .up {
		font-size: 9vw;
	}

	.logo .up span {
		font-size: 10vw;
	}

	.logo .down {
		font-size: 4.5vw;
	}

	/* Mesmo problema no logo do footer. */
	.footer-logo {
		width: 100%;
		height: auto;
		padding-top: 24px;
	}

	.footer-logo .up {
		font-size: 6.5vw;
	}

	.footer-logo .up span {
		font-size: 7.5vw;
	}

	/* Menu de redes sociais do footer: 770px fixos em 5 colunas, também
	   nunca ajustado. Quebra em 2 colunas e libera a altura fixa (56px)
	   para poder empilhar as linhas. */
	.footer-menu {
		width: 100%;
		height: auto;
		padding: 0 6%;
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 16px;
		grid-column-gap: 20px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	/* Nuvem de ícones de tecnologia da página Skills: os ícones já usam
	   left/top em %, então só a largura fixa do container (1000px)
	   precisa ceder para a nuvem inteira acompanhar a tela. */
	.layer-skills {
		width: 100%;
	}

	#full-stack {
		display: grid;
		grid-template-columns: 1fr 1fr !important;
		gap: 16px !important;
	}

	#full-stack .text-designer {
		text-align: center !important;
		grid-column-start: 1 !important;
  		grid-column-end: 3 !important;
		order: 1 !important;
	}

	#full-stack .icons-designer {
		order: 2 !important;
		margin-left: 140px;
	}

	/* Acima de ~600px (tablet) o valor fixo de 140px funciona; abaixo disso
	   a coluna do grid encolhe e esse offset fixo empurra o cluster de
	   ícones para fora da área visível. Ver bloco <=600px mais abaixo. */

	#full-stack .designer {
		order: 3 !important;
	}

	#full-stack .text-developer {
		grid-column-start: 1 !important;
  		grid-column-end: 3 !important;
		order: 4 !important;
	}

	#full-stack .developer {
		order: 5 !important;
	}

	#full-stack .icons-developer {
		order: 6 !important;
	}

	#full-stack .text-designer .title,
	#full-stack .text-developer .title {
		width: 100% !important;
		text-align: center !important;
		padding: 0 10% !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	#full-stack .text-designer .text,
	#full-stack .text-developer .text {
		width: 100% !important;
		text-align: center !important;
		padding: 0 10% !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.div-articles {
		width: 100% !important;
		padding: 0 20% !important;
		grid-template-columns: 1fr !important;
		grid-row-gap: 30px !important;
	}

	.div-articles .title, .div-articles .description {
		text-align: center !important;
	}

	.div-article .div-button-article {
		display: none !important;
	}

	/* Linhas pontilhadas decorativas entre os itens do portfólio: usam
	   largura/margin-left fixos em px calculados para o layout desktop
	   (nunca sobrescritos), então em qualquer tela <=1024px ficam fora
	   de posição. Mais simples e seguro escondê-las. */
	.div-portfolio .div-separate-one,
	.div-portfolio .div-separate-two,
	.div-portfolio .div-separate-three,
	.div-portfolio .div-separate-four,
	.div-portfolio .div-separate-five,
	.div-portfolio .div-separate-six {
		display: none !important;
	}

	.div-about {
		grid-template-columns: 1fr;
	}

	.div-about .div-about-image {
		display: none !important;
	}

	.title-portfolio {
		padding: 0 6% !important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.layer-skills {
		margin: 40px auto 60px -5%;
		width: 100% !important;
	}

	.other-skills {
		width: 100% !important;
	}

	.other-skills .column {
		width: auto !important;
	}

	.other-skills .column > div {
		width: 18% !important;
	}

	.div-portfolio .item {
		width: auto !important;
		margin: 0 !important;
	}

	/* O overlay de cada item (título/número/descrição/botão) foi feito
	   para o card largo do desktop: grid-template-rows:85px 1fr 70px
	   supõe título em 1 linha só (line-height:85px). Com o card ocupando
	   a tela toda no mobile, títulos longos ("Gerenciamento e
	   Rastreamento") quebram em 2 linhas e a segunda linha invade a
	   descrição logo abaixo, já que a linha do título não cresce. Achado
	   testando o toque no card com Playwright em viewport de 375px. */
	.div-portfolio .item > div:first-child {
		grid-template-rows: auto 1fr auto;
	}

	.div-portfolio .number {
		width: auto;
		font-size: 32px;
		line-height: normal;
		padding: 10px 16px 0 0;
	}

	.div-portfolio .title {
		font-size: 26px;
		line-height: 1.3;
		padding: 14px 16px 6px 16px;
	}

	.div-portfolio .description {
		font-size: 13px;
		line-height: 1.5;
		padding: 0 16px;
	}

	.div-portfolio .button {
		height: auto;
		padding: 10px 16px;
	}

	.div-portfolio .fotografia {
		margin-bottom: 30px !important;
	}

	.div-portfolio .top,
	.div-portfolio .bottom,
	.div-portfolio .left,
	.div-portfolio .right {
		border: none !important;
	}

	.contact-page {
		grid-template-columns: 1fr !important;
		grid-column-gap: 20px !important;
	}

	.contact-page > div {
		margin-top: 1vh;
		margin-bottom: 2vh;
	}

	.contact-page .div-button-send {
		margin-bottom: 2vh;
	}

	.text-bottom {
		font-size: 1.4rem;
		line-height: 2.2rem;
		padding: 0 1vw;
		margin-top: 6vh;
		margin-bottom: 4vh;
	}

	.contact-page .captch-text {
		font-size: 1rem;
		line-height: 1.2rem;
	}

	.title-icon {
		font-size: 2rem;
		text-align: center;
	}

	.item-contact.text,
	.item-contact {
		font-size: 1.5rem;
		text-align: center;
	}

	/* O e-mail (ex.: contato@sandrojordao.com.br) é uma única "palavra"
	   sem espaço para quebrar — o grid-template-columns:"1fr 0 60px" de
	   .item-contact-page não tem largura definida (o "1fr" também sofre
	   do min-width:auto padrão do grid), então o texto empurra a coluna
	   para caber inteiro numa linha só e vaza da tela. Deixando quebrar
	   a palavra resolve sem precisar mudar a estrutura do grid. Achado
	   testando com Playwright em viewport de 375px. */
	.item-contact {
		overflow-wrap: anywhere;
	}

	.text-bottom span {
		font-size: 2rem;
	}

	.page {
		min-height: 100vh !important;
		display: grid;
		grid-template-rows: minmax(100px, auto) 0 minmax(100px, auto) 1fr;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	.div-about .title span.black {
		font-size: 3.5rem;
	}

	.div-about .title span.red {
		font-size: 4rem;
	}

	.div-about .description {
		font-size: 1.5rem;
		line-height: 2rem;
	}

	.div-about .description p {
		margin-bottom: 2vh;
		text-indent: 2rem;
	}

	.quote, .author {
		display: none !important;
	}

	.footer-copyright {
		font-size: 1.2rem;
	}

	.title-contact span.black,
	.title-other-skills span.black,
	.title-portfolio span.black {
		font-size: 2.8rem;
	}

	.title-contact span.red,
	.title-other-skills span.red,
	.title-portfolio span.red {
		font-size: 3rem;
	}

	.other-skills {
		margin-top: 6vh;
    	margin-bottom: 8vh;
	}

	.div-portfolio {
		height: 3270px !important;
	}

	.translator {
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid #81868c;
		margin-top: 2vh;
	}

	.languages {
		margin-top: 2vh;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 2vw;
		font-family: 'Bangers', Verdana;
		letter-spacing: 3px;
		font-size: 6vmin;
		color: #FFFFFF;
		text-shadow: 2px 2px 0 #5F5F5F;
	}

	.languages .actived {
		color: rgba(255, 255, 255, 0.3);
	}
}

/* Ajustes específicos para celulares (o breakpoint de 1024px acima trata
   tablet e celular como se fossem a mesma largura; vários offsets em px
   ali foram calibrados para tablet e estouram em telas menores). */
@media (max-width: 600px) {
	/* #full-stack (home) em 2 colunas de ~1fr cada não sobra espaço para
	   o boneco de 192px (#designer/#developer) nem para o cluster de
	   ícones (~200px): o item do grid não encolhe abaixo do conteúdo
	   (min-width:auto padrão), então o grid "estoura" e empurra tudo para
	   fora da tela. Em vez de forçar 2 colunas apertadas, empilha em 1
	   coluna só, com folga de sobra para centralizar cada peça. */
	#full-stack {
		grid-template-columns: 1fr !important;
	}

	#full-stack .text-designer,
	#full-stack .text-developer {
		grid-column: 1 / 2 !important;
	}

	/* O boneco (#designer/#developer) é posicionado com position:relative
	   nele mesmo, então basta centralizar o item do grid ao redor dele —
	   as partes internas (rosto, cabelo etc.) se movem juntas. */
	#full-stack .designer,
	#full-stack .developer {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	/* Tentei encaixar o cluster de ícones perto do boneco (colado, como
	   no desktop) de duas formas — com espaço embaixo (ficava um vão
	   grande, parecendo 2 blocos soltos) e sobrepondo (os ícones caíam
	   em cima do rosto, bagunçado). No desktop os ícones ficam do LADO
	   do boneco, não embaixo/em cima — empilhados numa coluna só, essa
	   relação lateral não existe. Em vez de forçar uma posição vertical
	   que sempre bate em algum problema, esconde o cluster solto de
	   ícones no mobile (o título + texto já dizem do que se trata) e
	   fica só com o boneco, que sozinho não tem esse conflito. Mesmo
	   padrão já usado em .quote/.author/.div-about-image nesta folha. */
	#full-stack .icons-designer,
	#full-stack .icons-developer {
		display: none !important;
	}

	/* Gráfico de barras da página Skills: a sobreposição .column sobre
	   .chart (margin-top:-400px / margin-left:130px) continua correta em
	   qualquer largura, pois .chart usa colunas/linhas fixas em px. O que
	   não acompanha a tela é o tamanho do texto dentro de cada barra. */
	.column .percent {
		font-size: 1.6rem;
	}

	.column .percent span {
		font-size: 0.9rem;
	}

	.column .text {
		font-size: 0.85rem;
	}

	/* Só o tamanho da fonte muda aqui: a margem esquerda de .chart (30px)
	   soma com a largura da coluna de rótulos (100px) = os 130px de
	   margin-left de .column acima. Não mexer nessa margem sem também
	   recalcular o alinhamento das barras. */
	.line-right {
		font-size: 1rem;
	}
}

/* Título visível apenas para leitores de tela / buscadores, sem alterar o layout visual */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}