/*cores*/
:root{
	--roxo-botao: #896cae;
	--roxo-fonte: #5c2992;
	--roxo-hover: #4f1e6f;
	--azul-padrao: #19459d;
	--background-color: #dddaed;

	--carbona: 'carbona';
	--poppins-eb: 'poppins-eb';
}

/*fonts*/

@font-face {
	font-family: 'carbona';
	src: url("../fonts/Carbona/51602.otf");
}
@font-face {
	font-family: 'poppins-eb';
	src: url("../fonts/Poppins/37524.otf");
}
@font-face {
	font-family: 'GothamBlack';
	src: url("../fonts/Gotham-Black.otf");
}
@font-face {
	font-family: 'GothamLight';
	src: url("../fonts/Gotham-Light.otf");
}

@font-face {
	font-family: 'DanoneRegular';
	src: url("../fonts/DanoneOne-Regular.otf");
}
@font-face {
	font-family: 'DanoneBold';
	src: url("../fonts/DanoneOne-Bold.otf");
}
@font-face {
	font-family: 'DanoneLight';
	src: url("../fonts/DanoneOne-Light.otf");
}

/*default*/
*{
	padding: 0;
	margin: 0;
/*	font-family: GothamMedium;*/
}

body, html{
	/*background-image: url(../img/fundo-index.png);*/
	background-repeat: no-repeat;
 	background-position: left top;
 	background-size: 101vw 101vh;
	/*font-family: Myriad;*/
	color: white;
/*	background: #000000;*/
	background-image: linear-gradient(30deg,#53ce20 0%, #0378c0 65%, #0c5b8d 75%, #1c1a47 100%);
	cursor: default;
	margin: 0;
	padding: 0;
	overflow: hidden;
	touch-action: none;
	outline: none;
	-o-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: none;
	font-family: var(--dbold) ;
}
input, textarea, button, select, a{
    -webkit-tap-highlight-color: transparent;
}
body *{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img{
	border: hidden;
}
input, textarea, button, select, a{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	border: hidden;
}
textarea:focus, input:focus, select:focus, button:focus{
    outline: none;
}
input:focus, input:active:focus{
    outline: none;
    text-decoration: none;
}
input:focus{
    text-decoration: none;
}
input:hover{
    text-decoration: none;
}
a{
	-o-user-select: none;
    user-select: none;
	outline: none;
	text-decoration: none;
}
a:focus, a:active:focus{
    outline: none;
}
a:focus{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}


.container{
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: transparent;
	/*width: 100vw;*/
	width: calc(100vh * 9 / 16);
	max-width: 100vw;
	/*height: calc(100vw * 9 / 16);*/
	height: 100%;
	max-height: 100%;
	transform: translate(-50%,-50%);
	overflow: hidden;
}
.logo-danone{
    position: absolute;
    width: 60%;
    bottom: 5.5%;
    left: 20%;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.header img{
	width: 40%;
}
#category-intro-text {
/*	padding: 0.625em 0.938em;*/
	position: relative;

	font-size: 1.5vh;
	font-family: var(--carbona);
	font-weight: 900;
	padding: 1vh 1.5vh;
	margin-bottom: 3%;
}
#category-intro-text::before {
	border-bottom-left-radius: 1.2vh;
	border-bottom-right-radius: 1.2vh;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #182466;
	mix-blend-mode: overlay;
}
.footer{
	position: absolute;
	bottom: 3%;
	left: 0;
	width: 100%;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
#footerLogos{
	margin-top: 4%;
	width: 50%;
}
#footerInfo{
	width: 67%;
}


.gradient-border {
    position: relative;
    overflow: hidden;
    
    border-radius: 20vh; 

    background-image: 
        linear-gradient(#182466, #182466), 
        linear-gradient(to right, #51d2ff, #106cfd, #61e2ff, #32a7ff, #61e2ff, #32a7ff, #61e2ff, #32a7ff, #106cfd, #51d2ff);

    background-origin: border-box; 
    background-clip: content-box, border-box;
    border: 0.2vh solid transparent; 

    box-shadow: 
        0 0 0.1vh rgba(0, 191, 255, 0.8), 
        0 0 0.1vh rgba(0, 255, 200, 0.6); 

    display: flex;
    justify-content: center;
    align-items: center;
    color: white; 
    
    text-align: center;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: inherit;
    
    background: linear-gradient(to right, #004d40, #001f3f);
    
    mask-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    mask-size: 8px 8px;
}