/*cores*/
:root{
	--azul-padrao: #005EB8;
	--azul-claro: #00ACED;
	--white:#fff;
	--black: #000;

	--title-bold: 'Calibri-Bold';
	--title-regular: 'Calibri';
	--regular: 'Bariol-Regular';
	--bold: 'Bariol-Bold';
}

/*fonts*/

@font-face {
	font-family: 'Bariol-Bold';
	src: url("../fonts/Bariol-Bold.otf");
}
@font-face {
	font-family: 'Bariol-Regular';
	src: url("../fonts/Bariol-Regular.otf");
}
@font-face {
	font-family: 'Calibri';
	src: url("../fonts/calibri.ttf");
}
@font-face{
	font-family: 'Calibri';
	src: url('../fonts/calibri.ttf');
}
@font-face{
	font-family: 'Calibri-Bold';
	src: url('../fonts/calibrib.ttf');
}

/*default*/
*{
	padding: 0;
	margin: 0;
	font-family: var(--regular);
}

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;
	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: GothamLight ;
}
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%;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    transform: translate(-50%, -50%);
    background: transparent;
}
.background{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.column{
	height: 100%;
}
#column1{
    width: 6%;
}
#column2{
	width: 82%;
	background-color: var(--azul-padrao);

	display: flex;
	justify-content: center;
	align-items: center;


	overflow-y: auto;
	overflow-x: hidden;
}
#column3{
	width: 12%;
}
.top{
	height: 50%;
	width: 100%;
	background-color: var(--azul-claro);
}
.bottom{
	height: 50%;
	width: 100%;
	background-color: var(--white);
}
.top-logo{
	height: 26%;
	width: 100%;
	background-color: var(--white);

	display: flex;
	justify-content: center;
	align-items: center;
}
.top-logo img{
	max-width: 100%;
}
.bottom-logo{
	height: 74%;
	width: 100%;
	background-color: var(--azul-claro);
}


body {
  --sb-track-color: #232E33;
  --sb-thumb-color: #00ACED;
  --sb-size: 5px;
}

body::-webkit-scrollbar, .content-scroll::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track, .content-scroll::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb, .content-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

/* Qualquer dispositivo na vertical (retrato) */
@media screen and (orientation: portrait) {
  .background{
  	flex-direction: column-reverse;
/*  	flex: re;*/
  }
  .column{
  	width: 100%!important;
  	height: 9%;
  }
  #column2{
  	height: 82%;
  }
  .top-logo{
  	width: 15%;
  	height: 83%;
  }
  .top-logo img{
  	max-height: 100%;
  }
}