/*
Theme Name: Quaster - Agencia 021
Description: Responsivo. Programado por ninepixels.com.br
Author: Agencia 021
Author URI: http://agencia021.com/
*/

:root {
    --pink: #d71678;
    --light-pink: #f96cb7;
    --dark-grey: #222222;
    --light-grey:#919191;
    --violet: #2f076b;
    --light-violet: #4c0874;
}

::-moz-selection {
    /* Code for Firefox */
    color: var(--dark-grey);
    background: var(--light-pink);
}

::selection {
    color: var(--dark-grey);
    background: var(--light-pink);
}

* {
    box-sizing: border-box;
}

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  /*user-drag: none;*/
}

body {
    margin: auto;
    line-height: 22px;
    font-size: 16px;
    font-family: 'Goldplay', sans-serif;
    background: var(--dark-grey);
    color: var(--dark-grey);
}

.p100 {
    width: 100%;
}

.p50 {
    width: 50%;
}

.p70 {
    width: 70%;
}

.content {
    width: 90%;
    margin: auto;
    max-width: 1200px;
}

a {
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
}

a:hover {
    color: var(--light-pink);
}

img {
    max-width: 100%;
    height: auto;
}

a,
img {
    transition: 0.3s;
}

.mobile {
    display: none;
}

/* rs */

.rs a {
    display:inline-block;
    background-size:contain;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
	background-position:center;
}

.ig {background-image:url(images/icon-ig.png)}
.in {background-image:url(images/icon-in.png)}
.wpp {background-image:url(images/icon-wp.png)}
.email {background-image:url(images/icon-msg.png)}

/* rodape */

#contato {
    background:var(--dark-grey);
    padding:80px 0px;
}

#contato .content {
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    color:#fff;
    justify-content:space-between;
    gap:50px;
}

#contato h1 {
    font-size:46px;
    line-height:46px;
    margin:0px;
    font-weight:700;
}

#contato h3 {
    color:var(--light-grey);
    font-size:18px;
    line-height:18px;
    margin:0px;
    font-weight:400
}

#contato h3:after {
    content:'';
    display:block;
    width:70px;
    height:2px;
    background:var(--pink);
    margin:20px 0px;
}

#contato form .row {
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

#contato form .row span, #contato form .row input, #contato form .row textarea {
    width:100%;
}

#contato input, #contato textarea {
    font-family:'Goldplay', sans-serif;
    background:none;
    outline:none;
    border:2px solid var(--light-grey);
    border-radius:4px;
    font-size:18px;
    line-height:18px;
    padding:10px;
    color:white;
}

#contato ::placeholder {
    font-style:italic;
}

#contato form input[type=submit] {
    background:var(--pink);
    color:white;
    border:none;
    text-transform:uppercase;
    font-size:22px;
    line-height:22px;
    padding:12px;
    width:310px;
    min-width:310px;
    border-radius:8px;
    transition:0.5s;
}

#contato input[type=submit]:hover {
    background:var(--light-pink);
    box-shadow:0px 0px 10px var(--light-pink)
}

#contato .right {
    max-width:630px;
}

#rodape {
    font-size:12px;
    padding:4px 0px;
	background:#fff;
}

#rodape a {
    color:var(--dark-grey);
}

#rodape a:hover {
    color:var(--pink);
}

#rodape .content {
    display:flex;
    justify-content:space-between;
}

#contato .rs a {
    width: 28px;
    height: 28px;
	margin-left:30px;
}

#contato .rs a:hover {
    transform:scale(1.2);
}

#contato .rs {
	text-align:right;
	display:block;
	margin-top:30px;
	font-size:0px;
}

/* cookies */

.cookieConsentContainer{
	z-index:999;
	width:350px;
	min-height:20px;
	box-sizing:border-box;
	padding:30px;
	background:#0e0e0ecc;
	overflow:hidden;
	position:fixed;
	bottom:30px;
	right:30px;
	display:none;
	box-shadow:0px 0px 20px rgba(0,0,0,0.1);
}

.cookieConsentContainer .cookieTitle a{
	font-size:22px;
	line-height:22px;
	display:block;
	color: white;
	font-weight: 400;
}

.cookieConsentContainer .cookieDesc p{
	margin:0;
	padding:0;
	color:#fff;
	font-size:13px;
	line-height:20px;
	display:block;
	margin-top:10px
}

.cookieConsentContainer .cookieDesc a{
	text-decoration:underline;
}

.cookieConsentContainer .cookieButton a{
	margin-top:20px;
	font-weight:600;
	padding:10px;
	display:inline-block;
	background:var(--pink);
	color:#fff;
}

.cookieConsentContainer .cookieButton a:hover{
	cursor:pointer;
	background: #fff;
	color:var(--light-pink);
}

/* frase */

#frase {
	background:linear-gradient(to bottom right, var(--violet), #7a2dbc, var(--violet));
	color:#fff;
	animation: gradient 5s ease infinite;
	background-size:400% 400%;
	box-shadow:0px 100px 100px var(--dark-grey);
	padding-top:70px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#frase .content {
	max-width:none;
	height:100vh;
	min-height: 850px;
	display:flex;
	align-items:center;
	background:url(images/art.png) no-repeat 50vw center;
	padding-right:50vw;
	width:100%;
	justify-content:flex-end;
}

#frase .content span {
	font-size:32px;
	line-height:32px;
	max-width:542px;
	text-align:right;
}

/* nossos servicos */
.up-row {
	display:flex;
	flex-flow: wrap;
	margin-bottom:-260px;
	justify-content:center;
	padding:30px 0px 8vw 30px;
	gap: 30px;
}

#servicos {
	background:#f7f7f9;
	padding-top:230px;
}

.servico {
	border-radius:12px;
	box-shadow:0px 0px 20px rgba(0,0,0,0.1);
	background:#ffffff;
	padding:40px 40px 0px;
	margin-bottom: 60px;
	width:calc(50% - 85px);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
}

.servico p {
	text-align:justify;
	margin-top: 0;
	font-weight: 500;
}

.servico h2 {
	font-size:20px;
	line-height:20px;
	margin:0px auto;
	text-align:center;
	max-width:300px;
	font-weight:900;
	margin-bottom: 15px;
}

.servico .list {
	display:
	flex;
	justify-content:
	center;
	align-items:
	center;
	margin-top:
	auto;
	font-size:15px;
	line-height:22px;
}

.servico .list li {
	background:
	url(images/icon-check.png) no-repeat left 4px;
	background-size:16px;
	display: grid;
	padding-left:22px;
	font-weight: 500;
}

.servico .list li:hover {
	color:var(--light-pink)
}

.servico h4 {
	font-weight:900;
	font-size:18px;
	margin:0px;
}

.servico .btn {
	background:linear-gradient(to left, var(--light-pink), var(--pink) 50%, var(--light-pink));
	width:auto;
	margin-left:auto;
	margin-right:auto;
	font-size:16px;
	line-height:18px;
	font-weight:600;
	padding:14px 60px;
	border-radius:8px;
	transform:translateY(50%);
	color:#fff;  
	transition:1s;
	background-size:200%;
	min-width:200px;
}

.servico .btn:hover {
    background-position:100px;
	box-shadow:0px 0px 10px var(--light-pink)
}

.title, #pagina h1 {
	text-align:center;
	font-size:30px;
	line-height:30px;
	margin:0px;
}

.title:after, #pagina h1:after {
	content:'';
	width:120px;
	height:2px;
	background:var(--pink);
	display:block;
	margin:10px auto 20px;
}

#servicos h3 {
	text-align:center;
	max-width:640px;
	margin:0px auto 40px;
	font-weight:normal;
	font-size:16px;
	line-height:16px;
}

/* topo */

#topo {
	background:linear-gradient(to right, var(--violet), #7a2dbc, var(--violet));
	color:#fff;
	animation: gradient 5s ease infinite;
	background-size:400% 400%;
}

.sobre {
	background:
	var(--dark-grey);
	border-radius:24px;
	padding:50px 40px 0px;
	margin: auto 60px auto 110px;
}

.sobre .flex {
	display:flex;
	gap:40px;
	align-items:flex-start;
}

.sobre .left {
	min-width:410px;
	margin-left:-150px;
	position:relative;
	padding-left:40px;
}

.sobre .left:before {
	content:'';
	display:block;
	width:110px;
	height:210px;
	position:absolute;
	background:var(--pink);
	border-radius:24px 0px 0px 24px;
	bottom:-40px;
	left:0px;
}

.sobre .left img {
	z-index:1;
	position:relative;
}

.sobre .right {
	text-align:justify;
	position:relative;
}

.sobre .right:before {
	content:'';
	display:block;
	width:60px;
	height:250px;
	position:absolute;
	background:var(--pink);
	border-radius:0px 24px 24px 0px;
	bottom:60px;
	right:-100px;
}

.clientes {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	text-align:center;
}

.cliente {
	width:33.33%;
}

.cliente img {
	max-width:110px;
	max-height:50px;
	filter:saturate(0%) contrast(40%);
	margin-bottom:40px;
}

.cliente img:hover {
	filter:saturate(100%) contrast(100%);
	transform:scale(1.1);
}

#sobre h1.title {
	margin-bottom:40px;
}

#sobre h2.title {
	text-align:left;
	margin:40px 0px;
	font-size:22px;
	font-weight:600;
}

#sobre h2.title:after {
	margin-left: initial;
	width:70px;
}

#sobre {
	position:relative;
	margin-bottom:-160px;
}

/* header */

#header {
	background:url('./images/header.png') no-repeat 50vw center;
	margin-bottom:50px;
}

#header .content {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:700px;
}

#header h2 {
	font-size:22px;
	line-height:22px;
	margin:0px;
	font-weight:400;
}

#header h1 {
	text-transform:uppercase;
	font-size:62px;
	line-height:62px;
	margin:10px 0px;
}

#header i {
	color:var(--light-pink);
}

#header .btn {
	display:block;
	border:2px solid;
	color: #FFFFFF;
	margin-right:auto;
	font-size:26px;
	line-height:26px;
	padding:12px 24px;
	margin-top:20px;
	border-radius:8px;
}

#header .btn:hover {
	box-shadow:0px 0px 20px #fff;
	color:#fff;
}

#topo.p100 {
	padding:30px 0px;
	transition:0.2s;
	z-index:999;
}

#topo.p100 .content {
	display:flex;
	align-items: center;
}

#topo .menu {
	font-size:16px;
}

#topo .menu a {
	margin-left:40px;
}

#topo .rs {
	margin-left:auto;
	font-size:0px;
}

#topo .rs a {
	width:22px;
	height:22px;
	margin-right:24px;
}

#topo .rs a:hover {
	transform:scale(1.2)
}

.btn-outline {
	display:block;
	border:2px solid;
	color: #FFFFFF;
	font-size:16px;
	line-height:16px;
	padding:12px 24px;
	border-radius:8px;
}

* {
	cursor:none;
}

#cursor {
	position: fixed;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 999;
	transition: border .2s;
	border:6px solid var(--light-pink );
	box-shadow:0px 0px 15px var(--light-pink );
}

#cursor.hover {
	border-color:#fff;
	border-width:2px;
	width:32px;
	height:32px;
}

/* 404 */

.error404 #topo,.error404 #contato {
	display:none;
}

.error404 {
	height:100vh;
	display:flex;
	flex-direction:column;
	text-align:center;
	color:#fff;
}

.error404 #rodape {
	color:var(--dark-grey );
}

.error404 h1 {
	font-size:30vh;
	font-weight:100;
	margin:0px;
	line-height:30vh;
	text-shadow:0px 0px 20px;
}

.error404 h2{
	text-transform:uppercase;
	font-weight:400;
	letter-spacing:10px;
	color:var(--light-pink);
	font-size:18px;
	line-height:18px;
}

.error404 h3 {
	font-weight:500;
	font-size:18px;
	line-height:18px;
	color:var(--light-pink);
}

/* pagina */

.page-template-default {
	background:#fff;
}

.page-template-default #topo {
	padding-bottom:30px;
}

#pagina {
	width:90%;
	margin:auto;
	padding:80px 0px;
	text-align:justify;
	color:#676767;
}

#pagina h1 {
	color:var(--dark-grey);
	font-weight:300;
}

#pagina h2 {
	color:var(--pink);
	font-weight:300;
}

.back-to-top {
	position:
	fixed;
	bottom:-45px;
	right:-1px;
	width: 31px;
	height: 31px;
	background-image:
	url(images/arrow.png);
	background-size: 8px;
	background-repeat:
	no-repeat;
	background-position:
	center;
	transform:
	rotate(270deg);
	background-color:
	var(--light-pink);
	box-shadow: 0px 0px 20px var(--light-pink);
}

.back-to-top:hover {
	filter:none;
	width:44px;
	height:44px;
	background-size:12px;
}

.scroll .back-to-top {
	bottom:-1px;
}

.scroll #topo.p100 {
	/*position:fixed;*/
	top:0px;
	background:#fff;
	box-shadow:0px 0px 50px #00000030;
	padding:20px 0px;
}

.scroll #topo.p100 a {
	color:var(--dark-grey)
}

.scroll #topo.p100 .rs a {
	filter:invert();
	opacity:0.7
}
.select-country{
	display: flex;
    justify-content: end;
	margin-top: 30px;
}
.select-country select{
	color: #FFF;
	max-width: 200px;
	background: transparent;
    border: 2px solid #FFF;
}
.select-country select:after{
	color: #FFFFFF;
}
.select-country select option{
	color: black;
}
.show-scroll, .scroll .hide-scroll, .scroll .mobile.show-scroll {display:none}
.scroll .show-scroll {display: initial;}
@media (min-width:2000px) {
	.up-row {
		margin-bottom: -380px;
	}
}
@media (min-width:1600px) and (max-width:1999px) {
	.up-row {
		margin-bottom: -300px;
	}
}

@media (max-width:1023px) {
	.mobile,.scroll .mobile.show-scroll  {display:block}
	.desktop {display:none !important}
	.show-scroll, .scroll .hide-scroll {display:none}
	body {
		font-size:2.5vw;
		line-height:4vw;
	}
	p{
		font-size: 4vw;
		line-height: 1.2;
		font-weight: 500;
	}
	/* sobre */
	#sobre h2.title{
		font-size: 4.5vw;
	}
	#sobre .left {
		display:none;
	}

	#sobre .right:before {
		display:none;
	}

	#sobre:before {
		width:50%;
		height:200px;
		border-radius:20px;
		background:var(--pink);
		content:'';
		display:block;
		position:absolute;
		top:0px;
		right:0px;
	}

	#sobre:after {
		width:50%;
		height:200px;
		border-radius:20px;
		background:var(--pink);
		content:'';
		display:block;
		position:absolute;
		bottom:-20px;
		right:left;
	}

	.sobre {
		margin: 0px 20px auto;
		z-index:1;
		position:relative;
	}

	#sobre {
		padding-top:20px;
		position:relative;
	}

	#sobre h1.title {
	    margin-bottom: 5vw;
	}

	.title, #pagina h1 {
	    font-size: 6vw;
	    line-height: 6vw;
	}

	.title:after, #pagina h1:after {
		width:30vw;
		margin:3vw auto 4vw;
		height:4px;
	}

	.cliente img {
		max-height:8vw;
		max-width:16vw;
	}

	.up-row {
		padding: 0;
		margin-bottom: -150px;
	}

	#servicos {
		padding-top:300px;
	}

	#servicos h3 {
		max-width: 80vw;
		margin: 0px auto 65px;
		font-size: 4vw;
		line-height: 4vw;
	}

	.servico {
		max-width: 100%;
		width: 90%;
		padding: 60px 50px 0px;
	}

	#frase {
		padding-top: 200px;
		padding-bottom: 100px;
	}

	#frase .content {
		background-position:center top;
		padding:0px;
		justify-content:center;
		min-height:850px;
		height:auto;
	}

	#frase .content span {
		padding:0px 0vw;
		text-align:center;
		max-width:80vw;
		font-size:6vw;
		line-height: 1.1;
	}

	#contato .content {
		flex-direction:column;
		text-align:center;
	}

	#contato .rs, #contato h1, #contato h3 {
		text-align:center;
	}

	#contato .rs a {
		margin:0px;
		width:8vw;
		height:8vw
	}

	#contato .rs {
		display:flex;
		justify-content:center;
		gap:10vw;
	}

	#contato h1 {
	    font-size:8vw;
	    line-height:8vw;
		margin-top:80px;
	}
	
	#contato h3 {
	    font-size:4vw;
	    line-height:3vw;
	}
	
	#contato h3:after {
	    height:4px;
	    margin:4vw auto;
	}

	#contato form .row {
		display:block;
		margin:0px;
	}

	#contato form input, #contato form textarea{
		margin-bottom:20px;
		font-size:3vw;
		line-height:3vw;
	}

	#contato form input[type=submit] {
		margin:auto;
		display:block;
		font-size:4vw;
		line-height:4vw;
		padding:3vw;
	}

	#topo.p100 {
		position:absolute;
		background:none;
		top:0px;
	}

	#header {
		background:none;
		margin-bottom:80px;
	}

	#topo {
		background:url(images/bg-mobile.png) no-repeat top center var(--violet);
		background-size:contain;
	    animation: none;
	}

	#header .content {
		justify-content:flex-end;
		align-items:center;
		min-height:700px;
		height:50vh;
	}

	#header .content .btn {
		margin-right:initial;
	}
	
	#header h2 {
		font-size: 4.2vw;
		line-height: 1;
		text-align: center;
		font-weight: 500;
	}
	
	#header h1 {
		font-size: 9vw;
		line-height:1;
		margin:2vw 0px;
	}
	
	#header .btn {
		font-size:5vw;
		line-height:5vw;
		padding:2.5vw 5vw;
		margin-top:4vw;
	}
	.servico ul {
		flex:1;
	}

	#servicos .row:last-child {
		margin-top:0px;
		margin-bottom:0px;
	}

	#servicos .content {
		width:100%;
	}

	.servico h2 {
	    font-size: 5vw;
	    line-height: 1.2;
	    max-width: 80%;
		margin-bottom:2vw;
	}
	
	.servico .list li {
	    background: url(images/icon-check.png) no-repeat left 1vw;
	    background-size: 3vw;
		padding-left: 4vw;
		font-size: 4vw;
		line-height: 1.2;
		font-weight: 600;
		margin-bottom: 15px;
	}

	.servico .list {
	    font-size: 2vw;
		line-height:5vw;
	}
	
	.servico h4 {
	    font-size: 30px;
	}

	.servico .btn {
	    width: auto;
	    font-size: 4vw;
	    line-height: 4vw;
	    font-weight: 600;
	    padding: 3vw 6vw;
	    border-radius: 8px;
	    min-width: 40vw;
		text-align:center;
	}

	.menu, #topo .rs, #topo .btn-outline {display:none;}

	.btn-menu {
		display:none;
		margin-left:auto;
		position:absolute;
		right:0px;
		top:0px;
		width:64px;
		height:64px;
		background:url(images/menu.png) no-repeat center;
	}

	#topo.p100.open .btn-menu, .scroll .btn-menu {
		background-image:url(images/menu-h.png);
	}

	#topo.p100.open {
		background:#fff;
	}

	#topo.p100.open .menu, 
	#topo.p100.open .rs, 
	#topo.p100.open .btn-outline {
		display:initial;
		margin:initial;
	}

	#topo.p100.open a {
		color:var(--dark-grey)
	}
	
	#topo.p100.open .rs a {
		filter:invert();
		opacity:0.7
	}

	#topo.p100 .logo {
		margin-right:auto;
	}

	#topo.p100 .logo img {
		height:84px
	}

	.scroll #topo.p100 .logo img,
	#topo.p100.open .logo img{
		height:64px
	}

	#topo.p100 .content {
		position:
		relative;
		flex-direction:
		column;
		align-items: center;
		gap:10vh;
		height:64px;
	}

	#topo.p100.open .content {
		height:calc(100vh);
	}

	#topo.p100 .menu a {
		display:block;
		text-align:center;
		margin:8vh 0px 0px;
		font-size:4vh;
	}

	#topo.p100 .rs a {
		margin:0px 20px;
		width:3vh;
		height:3vh;
		margin-right:24px;
	}

	.btn-outline {
		display:block;
		border:1px solid;
		font-size:2vh;
		line-height:2vh;
		padding:1vh 3vh;
		border-radius:8px;
	}

	#topo.p100.open .logo .show-scroll {display:block}
	#topo.p100.open .logo .hide-scroll {display:none}

	#cursor {
		display:none;
	}

	#pagina {
		padding-top:140px;
	}

	#rodape {
		font-size:2.2vw;
		line-height:3vw;
		padding:1vw 0px;
	}

	.scroll .back-to-top, .scroll .back-to-top:hover {
	    bottom: 7vw;
	}

	.back-to-top, .back-to-top:hover {
	    bottom: -7vw;
	    right: 2vw;
	    width: 6vw;
	    height: 6vw;
	    background-size: 2.5vw;
	}

	.cookieConsentContainer .cookieDesc p{
		font-size:3vw;
		line-height:5vw;
		display:block;
		margin:3vw 0px;
	}

	.cookieConsentContainer .cookieTitle a {
	    font-size: 5vw;
	    line-height: 5vw;
	}

	.cookieConsentContainer {
		width:96vw;
		box-sizing:border-box;
		bottom:2vw;
		right:2vw;
		padding:6vw;
	}

	.cookieConsentContainer .cookieButton a {
		font-size:3vw;
		line-height:3vw;
		padding:3vw;
	}

	.select-country {
		margin-top: 60px;
	}

	.select-country select{
		max-width: inherit;
		height: 70px;
		font-size: 3.5vw;
	}
}

@media (max-width:761px) {
	.servico {
		width: 100%;
		max-width: auto;
	}
}