@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

:root {
	--primary: #ffffff;
	--secondary: #747887;
	--tertiary: #cbb6d5;
	--quaternary: #c0c2c9;
	--quinary: #090808;
	--bg-primary: rgba(255, 255, 255, 0.3);
	--bg-secondary: rgba(116, 120, 135, 0.25);
	--bg-tertiary: rgb(211, 184, 215, 1);
	--bg-quaternary: rgba(211, 184, 215, 0.5);
	--bg-senary: rgba(48, 41, 54, 0.85);
	--bg-septenary: rgba(102, 89, 114, 0.85);
}
/*	--octonary: #COLOR;*/
/*	--nonary: #COLOR;*/
/*	--decennial: #COLOR;*/

.text-primary {
	color: var(--primary) !important;
}
.text-secondary {
	color: var(--secondary) !important;
}
.text-tertiary {
	color: var(--tertiary) !important;
}
.text-quaternary {
	color: var(--quaternary) !important;
}
.text-services {
	letter-spacing: clamp(.0987vh, 1.2vw, .24vh);
}
.text-services-bottom {
	border-bottom: .25vh solid var(--bg-quaternary);
}
.text-services-right {
	border-right: .25vh dashed var(--bg-quaternary);
}

.bg-primary {
	background: var(--bg-primary) !important;
}
.bg-secondary {
	background: var(--bg-secondary) !important;
}
.bg-tertiary {
	background: var(--bg-tertiary) !important;
}
.bg-quaternary {
	background: var(--quaternary) !important;
}
.bg-senary {
	background: var(--bg-senary) !important;
}
.bg-septenary {
	background: var(--bg-septenary) !important;
}

.fold {
	height: 100vh;
	width: 100vw;
}
.fold-bg {
	background-size: cover !important;
}
.fold-bg-home {
	background: url(../images/bg-home.jpg) no-repeat center;
}
.fold-bg-about {
	background: var(--primary);
}
.fold-bg-services {
	background: var(--primary) url(../images/bg-services.jpg) no-repeat center;
}
.fold-bg-portfolio {
	background: var(--primary) url(../images/bg-portfolio.jpg) no-repeat center;
}
.fold-bg-contact {
	background: var(--primary) url(../images/bg-contact.jpg) no-repeat center;
}
.bg-article-home {
	background: url(../images/article-home.png) no-repeat center;
	background-size: contain;
	height: 45vh;
}
.bg-article-home-en {
	background: url(../images/article-home-en.png) no-repeat center;
	background-size: contain;
	height: 45vh;
}
.bg-article-about {
	background: url(../images/article-about.png) no-repeat top;
	background-size: contain;
	height: 40vh;
}
.bg-article-about-en {
	background: url(../images/article-about-en.png) no-repeat top;
	background-size: contain;
	height: 45vh;
}
.bg-home-grafismo {
	background: url(../images/bg-home-grafismo.png) no-repeat center;
	background-size: contain;
	height: 60vh;
}
.bg-about-bottom {
	background: url(../images/bg-about-bottom.png) no-repeat center;
	background-size: contain;
	height: 5.5vh;
}
.bg-about-top {
	background: url(../images/bg-about-top.png) no-repeat center;
	background-size: contain;
	height: 5.5vh;
}
.bg-about-grafismo {
	background: url(../images/bg-about-grafismo.png) no-repeat top;
	background-size: contain;
	height: 15vh;
}
.bg-services-grafismo {
	background: url(../images/bg-services-grafismo.png) no-repeat top;
	background-size: contain;
	height: 22vh;
}
.bg-projects-bottom {
	background: url(../images/bg-projects-bottom.png) no-repeat center;
	background-size: contain;
	height: 5.5vh;
}
.bg-projects-top {
	background: url(../images/bg-projects-top.png) no-repeat center;
	background-size: contain;
	height: 5.5vh;
}
.bg-contact {
	background: var(--tertiary) url(../images/bg-contact-top.jpg) no-repeat center;
	background-size: cover;
	height: 33vh;
}
.bg-contact-grafismo {
	background: url(../images/bg-contact-grafismo-top.png) no-repeat left;
	background-size: contain;
}

body {
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-size: clamp(.987vh, 1.2vw, 2.4vh);
	line-height: clamp(1.4vh, 1.4vw, 2.8vh);
	color: var(--primary);
}
b, strong {
	font-weight: 700;
}
a,
a:hover {
	color: var(--primary);
	text-decoration: none;
}
p {
	font-weight: 300;
}
p mark {
	font-weight: 900;
	padding: 0;
	color: inherit;
	background-color: inherit;
}
p small {
	font-size: 1vh;
	font-weight: inherit;
	line-height: 2vh;
	letter-spacing: .4vh;
}
p samp {
	font-family: "Roboto", sans-serif;
	font-size: clamp(.75vh, 1.75vw, 3.5vh);
}
h1 {
	font-size: 4vh;
	font-weight: 100;
	letter-spacing: .1vh;
}
h1 small {
	font-size: 3vh;
	font-weight: inherit;
}
h2 {
	font-size: clamp(2vh, 4vw, 8vh);
	font-weight: 400;
	letter-spacing: clamp(.2vh, 4vw, .8vh);
}
h3 {
	font-size: clamp(1.5vh, 3vw, 6vh);
	font-weight: 100;
}
h4 {
	font-size: clamp(1.25vh, 2.5vw, 5vh);
	letter-spacing: clamp(.125vh, 2.5vw, .5vh);
}
h5 {
	font-size: clamp(1vh, 2vw, 4vh);
	font-weight: 300;
}
h6 {
	font-size: 3vh;
}
dl, ol, ul {
	margin-top: 0;
	margin-bottom: 0;
}
ul {
	padding-inline-start: 1.75vw;
}
li small {
	font-size: clamp(.987vh, .9vw, 1.8vh);
	font-weight: inherit;
	line-height: clamp(.0987vh, .9vw, .18vh);
}



.my-1, .mb-1 {
	margin-bottom: 1vh !important;
}
.my-1, .mt-1 {
	margin-top: 1vh !important;
}
.my-2, .mb-2 {
	margin-bottom: 2vh !important;
}
.my-2, .mt-2 {
	margin-top: 2vh !important;
}
.mx-5, .ml-5 {
	margin-left: 5vh !important;
}
.mx-5, .ml-5 {
	margin-right: 5vh !important;
}
.my-5, .mb-5 {
	margin-bottom: 5vh !important;
}
.my-5, .mt-5 {
	margin-top: 5vh !important;
}
.mx-1, .ml-1 {
	margin-left: 1vh !important;
}
.mx-3, .ml-3 {
	margin-left: 3vh !important;
}
.mx-3, .mr-3 {
	margin-right: 3vh !important;
}
.mx-dot-3, .mr-dot-3 {
	margin-right: .3% !important;
}
.p-1 {
	padding: 1vh !important;
}
.px-2, .pl-2 {
	padding-left: 2vh !important;
}
.px-2, .pr-2 {
	padding-right: 2vh !important;
}
.px-5, .pl-5 {
	padding-left: 5vh !important;
}
.px-5, .pr-5 {
	padding-right: 5vh !important;
}
.py-1, .pb-1 {
	padding-bottom: 1vh !important;
}
.py-1, .pt-1 {
	padding-top: 1vh !important;
}
.py-2, .pb-2 {
	padding-bottom: 2vh !important;
}
.py-2, .pt-2 {
	padding-top: 2vh !important;
}
.py-3, .pb-3 {
	padding-bottom: 3vh !important;
}
.py-3, .pt-3 {
	padding-top: 3vh !important;
}
.px-wdot-2, .pl-wdot-2 {
	padding-left: 2% !important;
}
.px-wdot-2, .pr-wdot-2 {
	padding-right: 2% !important;
}
.px-wdot-4, .pl-wdot-4 {
	padding-left: 4% !important;
}
.px-wdot-4, .pr-wdot-4 {
	padding-right: 4% !important;
}
.z-index-1 {
	z-index: 1100;
}
.z-index-2 {
	z-index: 1200;
}
.z-index-3 {
	z-index: 1300;
}

.close {
	font-size: clamp(2vh, 4vw, 8vh);
	font-weight: 100;
}

/* BEGIN NAVBAR */
.navbar {
	top: 0;
	right: 0;
}
.navbar ul {
	border-left: .25vh solid var(--primary);
	padding: 3vh 0;
}
.navbar.fold-change ul {
	border-left: .25vh solid var(--secondary);
}
.navbar li {
	display: block;
}

.navbar a {
	display: flex;
	align-items: center;
	padding: 2vh 5vh;
	transition: all 0.3s;
}

.navbar a::before{
	content: '';
	position: absolute;
	left: .65vh;
	transition: all 0.3s;
	border-bottom: 1vh solid var(--primary);
	border-left: 1vh solid var(--primary);
	transform: rotate(45deg);
}

.navbar a:hover {
	color: var(--quinary);
	padding-left: 7.5vh;
}

.navbar.fold-change a {
	color: var(--secondary);
}
.navbar a.ativo {
	color: var(--quinary);
}
.navbar.fold-change a.ativo,
.navbar.fold-change a:hover  {
	color: var(--tertiary);
}

.navbar a:hover::before,
.navbar a.ativo::before {
	border-bottom: 1vh solid var(--quinary);
	border-left: 1vh solid var(--quinary);
}
.navbar.fold-change a::before {
	border-bottom: 1vh solid var(--secondary);
	border-left: 1vh solid var(--secondary);
}
.navbar.fold-change a.ativo::before,
.navbar.fold-change a:hover::before {
	border-bottom: 1vh solid var(--tertiary);
	border-left: 1vh solid var(--tertiary);
}
/* END NAVBAR */

/* BEGIN NAVBAR TOGGLER*/
.navbar-toggler {
	display: none;
	position: fixed;
	top: 1vh;
	right: 1vh;
	height: 11vw;
	width: 11vw;
	background: var(--primary);
	border-radius: 50%;
	cursor: pointer;
}

.navbar-toggler.fechado {
	border: thin solid rgba(48, 41, 54, 0.5);
}

.navbar-toggler .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
	position: absolute;
	top: 50%;
	width: 50%;
	height: .1vh;
	background: var(--quinary);
}

.navbar-toggler .navbar-toggler-icon:before {
	display: block;
	content: ' ';
	top: -.5rem;
	width: 100%;
	transition: all 0.3s;
}

.navbar-toggler .navbar-toggler-icon:after {
	display: block;
	content: ' ';
	top: .5rem;
	width: 100%;
	transition: all 0.3s;
}

.navbar-toggler.fechado .navbar-toggler-icon {
	background: var(--primary);
}

.navbar-toggler.fechado .navbar-toggler-icon:before {
	top: 0;
	transform: rotate(45deg);
}

.navbar-toggler.fechado .navbar-toggler-icon:after {
	top: 0;
	transform: rotate(-45deg);
}
/* END NAVBAR TOGGLER*/

.header {
	padding: .75vh 0;
}
.header-border-bottom {
	height: 1vh;
	border-bottom: .5vh solid var(--bg-primary);
}

.header-share-wa {
	height: 5.67vh;
	width: 5.67vh;
	background: url(../images/icon-social-wa.png) no-repeat center;
	background-size: contain !important;
}
.header-share-wa:hover {
	background:url(../images/icon-social-wa-s.png) no-repeat center;
}


.multilingue {
	height: 3.312vh;
	width: 7.681vh;
	background-size: contain !important;
}
.icon-ml-br {
	background:url(../images/icon-ml-pt_br.png) no-repeat center;
}
.icon-ml-br-s,
.icon-ml-br:hover {
	background:url(../images/icon-ml-pt_br-s.png) no-repeat center;
}
.icon-ml-en {
	background:url(../images/icon-ml-en_us.png) no-repeat center;
}
.icon-ml-en-s,
.icon-ml-en:hover {
	background:url(../images/icon-ml-en_us-s.png) no-repeat center;
}

.height-services {
	height: 78vh;
}

#grid-gallery-instagram a {
	display: inline-block;
	width: 24.6%;
	height: 26vh;
	margin-left: .2%;
	margin-right: .2%;
	background-size: cover !important;
}

/* Small devices (landscape phones, 767.98px) */
@media (max-width: 767.98px) {
	body {
		font-size: clamp(1.5vh, 1.2vw, 2.4vh);
		line-height: clamp(2vh, 1.4vw, 2.8vh);
	}
	h3 {
		font-size: clamp(1.5vh, 5vw, 6vh);
	}
	h4 {
		font-size: clamp(1.25vh, 3.5vw, 5vh);
	}
	h5 {
		font-size: clamp(1vh, 2.5vw, 4vh);
	}
	p samp {
		font-size: clamp(.75vh, 3.75vw, 3.5vh);
	}
	li small {
		font-size: 80%;
	}
	.mx-5, .mr-5 {
		margin-right: 0 !important;
	}
	.mx-5, .ml-5 {
		margin-left: 0 !important;
	}
	.my-5, .mt-5 {
		margin-top: 1vh !important;
	}
	.my-5, .mb-5 {
		margin-bottom: 1vh !important;
	}
	.px-2, .pr-2 {
		padding-right: 1vh !important;
	}
	.px-2, .pl-2 {
		padding-left: 1vh !important;
	}
	.px-5, .pr-5 {
		padding-right: 2vh !important;
	}
	.px-5, .pl-5 {
		padding-left: 2vh !important;
	}
	.vh-93 {
		height: 93vh !important;
	}
	.navbar-toggler {
		display: -ms-flexbox !important;
		display: flex !important;
	}
	.navbar {
		right: -50%;
		width: 50% !important;
		background: rgba(48, 41, 54, 0.5);
	}
	.navbar.fold-change {
		background: rgba(255, 255, 255, 0.5);
	}
	.navbar a {
		padding: 2vh 2vh;
	}
	.navbar a:hover {
		padding-left: 3.5vh;
	}
	.navbar ul {
		margin-left: 25% !important;
	}
	.navbar a::before {
		left: 23.75%;
	}
	.close {
		font-size: inherit;
		float: inherit;
	}
	.back-small {
		display: inherit !important;
		font-weight: 300;
	}
	.bg-home-grafismo {
		height: 45vh;
	}
	.bg-article-about {
		background: url(../images/article-about-sm.png) no-repeat top;
		background-size: contain;
		height: 40vh;
	}
	.bg-article-about-en {
		background: url(../images/article-about-sm-en.png) no-repeat top;
		background-size: contain;
		height: 40vh;
	}
	.bg-services-grafismo {
		display: none;
	}
	.height-services {
		height: 76vh;
	}
	.not-wrapper-services {
		display: none !important;
	}
	.is-wrapper-services {
		display: block !important;
		padding-top: 1vh !important;
		padding-bottom: 1vh !important;
	}
	#wrapper-services > div {
		padding-top: 0 !important;
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		position: relative !important;
		width: 100% !important;
	}
	#grid-gallery-instagram a {
		height: auto;
		padding: 12.3% 0;
	}
}