@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border:0;
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }



body{
	background-color:#ffffff;
}
#conteiner{
	float:left;
	width:85%;
	height:auto;
	padding:0 5% 5% 10%;
}
	#central_conteiner{
		float:left;
		margin:0 2%;
		width:60%;
		height:auto;
		/*background-color:#CCC;*/
	}
		#central_conteiner p{
			font-family: 'Blinker', serif;
			font-size:16px;
			line-height:35px;
			color:#000;
		}
		.link{
			text-decoration:none;
			color:#03F;
			font-weight:bold;
		}
		#central_conteiner h1{
			font-family: 'Blinker', serif;
			font-size:35px;
			line-height:45px;
			margin-left:40px;
			color:#041E42;
		}
		#central_conteiner h3{
			font-family: 'Blinker', serif;
			font-size:25px;
			line-height:45px;
			margin-left:40px;
			color:#041E42;
		}
		#titulo{
			float:left;
			width:95%;
			height:auto;
			font-family: 'Blinker', serif;
			font-size:30px;
			line-height:30px;
			background-color:#041E42;
			color:#FFF;
			padding:10px;
			margin-bottom:40px;
		}
		
		#separador{
			float:left;
			width:100%;
			height:auto;
			border-bottom:solid 1px #041E42;
			margin-bottom:3%;
			
		}


/* Button used to open the contact form - fixed at the bottom of the page */
#open-button {
	float:left;
	background-color: #041E42;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	float:left;
	margin-left:35px;
	width: auto;
	font-family: 'Blinker', serif;
}
#close-button {
	float:left;	
	background-color: #041E42;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	margin-left:35px;
	width: auto;
	display:none;
	font-family: 'Blinker', serif;
}


/* The popup form - hidden by default */
.form-popup {
	display: none;
	float:left;
	/*position: fixed;*/
	bottom: 0;  
	z-index: 9;
}

#myForm{
	float:left;
	width: 100%;
	height:auto;
	font-family: 'Blinker', serif;
}
/* Add styles to the form container */
.form-container {
	float:left;
	width: 80%;
	height:auto;
	padding:2%;
	margin:20px 10% 0 10%;
	font-family: 'Blinker', serif;
	border-radius: 2%;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

	#box{
		float:left;
		width:100%;
		height:auto;
		margin:0;
	}
		#icon_box{
			float:left;
			width:10%;
			height:auto;
		}
		#campo_box{
			float:left;
			width:88%;
			height:auto;
		}
			label{
				float:left;
				font-family: 'Blinker', serif;
				font-size: 14px;
				color:#1863ca;
			}
	
			.form-container input[type=text], .form-container input[type=email] {
				width: 95%;
				padding: 5px 2%;
				font-family: 'Blinker', serif;
				color:#000;
				font-size:14px;
				line-height:20px;
				background: #FFF;
				border-bottom:solid 1px #CCC;
				margin-bottom:5px;
			}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=email]:focus {
	outline: none;
	border-bottom:solid 2px #0CF;
}
#msg{
	max-width: 95%;
	min-width: 95%;
	min-height:50px;
	padding: 2%;
	color:#000;
	border:solid 1px #CCC;
	font-family: 'Blinker', serif;
	font-size: 12px;
}
#msg:focus{
	outline: none;
}

#notas{
	float:left;
	width:100%;
	height:auto;
	font-size:10px;
}
	red{
		color:#F00;
		font-size:20px;
	}
#mensagem_erro, #mensagem_erro_nome, #mensagem_erro_telefone, #mensagem_erro_email{
	float:left;
	width:98%;
	margin:1%;
	height:auto;
	font-size:12px;
	color:#F00;
}


/* Set a style for the submit/login button */
#btn {
	background-color: #4CAF50;
	color: white;
	padding: 16px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
	margin-top:20px;
}

/* Add a red background color to the cancel button */
.cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
#btn:hover{
  opacity: 1;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, #open-button:hover, #close-button:hover {
  opacity: 1;
}

#msgErro{
	float:left;
	width:96%;
	height:auto;
	padding:2%;
	margin-top:2%;
}
#msgErro h3{
	color:#cf0b3f;	
}

/*---------------------------------------------------------------------------------------------------------------*/		
.toggle{
	--uiToggleSize: var(--toggleSize, 1.25rem);
	--uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
	--uiToggleColor: var(--toggleColor, #222);
	
	display: var(--toggleDisplay, inline-flex);
	position: relative;
}

.toggle__input{
	/*
	The pattern by Sara Soueidan https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
	*/
	width: var(--uiToggleSize);
	height: var(--uiToggleSize);
	opacity: 0;
	
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

/*
1. Calculation of the gap for the custom checkbox
*/

.toggle__label{
	display: inline-flex;
	min-height: var(--uiToggleSize);
	padding-left: calc(var(--uiToggleSize) + var(--toggleIndent, .4em));
}

.toggle__input:not(:disabled) ~ .toggle__label{
	cursor: pointer;
}

/*
1. Ems helps to calculate size of the checkbox
*/

.toggle__label::after{
	content: "";
	box-sizing: border-box;  
	width: 1em;
	height: 1em;
	font-size: var(--uiToggleSize); /* 1 */
	
	background-color: transparent;
	border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
	
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.toggle__input:checked ~ .toggle__label::after{
	background-color: var(--uiToggleColor);
}

.toggle__text{
	margin-top: auto;
	margin-bottom: auto;
}

/*
The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle

1. Ems helps to calculate size and position of the arrow
*/

.toggle__label::before{
	content: "";
	width: 0;
	height: 0;
	font-size: var(--uiToggleSize); /* 1 */
	
	border-left-width: 0;
	border-bottom-width: 0;
	border-left-style: solid;
	border-bottom-style: solid;
	border-color: var(--toggleArrowColor, #fff);
	
	position: absolute;
	top: .5428em;
	left: .25em;
	z-index: 3;
	
	transform-origin: left top;
	transform: rotate(-40deg) skew(10deg);
}

.toggle__input:checked ~ .toggle__label::before{
	--uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
	
	width: .4em;
	height: .2em;
	border-left-width: var(--uiToggleArrowWidth);
	border-bottom-width: var(--uiToggleArrowWidth);
}

/*
States
*/

/* focus state */

.toggle:focus-within{
	outline: var(--toggleOutlineWidthFocus, 3px) solid var(--toggleOutlineColorFocus, currentColor);
	outline-offset: var(--toggleOutlineOffsetFocus, 5px);
}

/* disabled state */

.toggle__input:disabled ~ .toggle__label{
	opacity: var(--toggleOpacityDisabled, .24);
	cursor: var(--toggleCursorDisabled, not-allowed);
	user-select: none;
}

/*
=====
PRESENTATION STYLES
=====
*/

/* 
The demo skin
*/

.toggle__label::after{
	border-radius: var(--toggleBorderRadius, 2px);
}

/* 
The animation of switching states
*/

.toggle__input:not(:disabled) ~ .toggle__label::before{
	will-change: width, height;
	opacity: 0;
}

.toggle__input:not(:disabled):checked ~ .toggle__label::before{
	opacity: 1;
	transition: opacity .1s ease-out .25s, width .1s ease-out .5s, height .2s ease-out .3s;
}

.toggle__input:not(:disabled) ~ .toggle__label::after{
	will-change: background-color;
	transition: background-color .2s ease-out;
}

/*
=====
SETTINGS
=====
*/

.page__custom-settings{
	--toggleColor: #690e90;
	--toggleOutlineColorFocus: #690e90;
	--toggleSize: 2rem;
}


/*
=====
DEMO
=====
*/


.page{
	box-sizing: border-box;
	max-width: 45rem;
	padding: 2.75rem 2rem 2.5rem;
	margin: auto;
	
	background-color: #fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
	border-radius: 2px;
}

.page__section{
	display: flex;
	flex-wrap: wrap;
	font-weight: 700;
}

.page__section:nth-child(n+2){
	margin-top: 3rem;
}

.page__custom-settings{
	--pageToggleTextFontSize: 1.25rem;
}

.page__name{
	width: 100%;
}

.page__name::first-letter{
	text-transform: uppercase;
}

.page__toggle{
	float:left;
	width:98%;
	padding-left:10%;
	margin-top: 1.25rem;
	margin-right: 1.5rem;
	font-size: var(--pageToggleTextFontSize);
}

@media screen and (max-width:1680px) {
}

@media screen and (max-width:1400px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}

}
@media screen and (max-width:1360px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}

}

@media screen and (max-width:1000px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}
	

}
@media screen and (max-width:900px) {

*{
	margin: 0;
	padding: 0;
	border:0;
}

#conteiner{
	width:96%;
	padding:0 2% 5% 2%;
}

	#central_conteiner{
		width:80%;
		/*background-color:#CCC;*/
	}
}
/*@media screen and (max-width:700px) {*/
@media screen and (max-aspect-ratio: 1/1) {
*{
	margin: 0;
	padding: 0;
	border:0;
}
		
}
@media screen and (max-width:700px) {
#conteiner{
	width:100%;
	padding:0;
}
	#central_conteiner{
		margin:0;
		width:100%;
	}
	.form-container {
		width: 88%;
		padding:2%;
		margin:20px 0 3% 3%;
	}
	#box{
		float:left;
		width:100%;
		height:auto;
		margin:0;
	}
		#icon_box{
			float:left;
			width:10%;
			height:auto;
		}
		#campo_box{
			float:left;
			width:86%;
			height:auto;
		}
	
			.form-container input[type=text], .form-container input[type=email] {
				width: 98%;
				padding: 5px 1%;
			}

#msg{
	max-width: 96%;
	min-width: 96%;
	min-height:60px;
	padding: 2%;
	font-size: 12px;
}

#notas{
	float:left;
	width:100%;
	height:auto;
	font-size:10px;
}
	red{
		color:#F00;
		font-size:20px;
	}
#mensagem_erro_empresa, #mensagem_erro_nome, #mensagem_erro_funcao, #mensagem_erro_telefone, #mensagem_erro_email{
	float:left;
	width:98%;
	height:auto;
	font-size:12px;
	font-family: 'Blinker', serif;
	margin-left:50px;
	color:#F00;
}


/* Set a style for the submit/login button */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 2%;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
  margin-top:20px;
}
}