/*custom font*/

@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
/*Image only BG fallback*/
background: url('https://thecodeplayer.com/uploads/media/gs.png');
/*background = gradient + image pattern combo*/
background: #EEEEEE;
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#form1 {
		width: 100%;
		text-align: center;
		position: relative;
}
@media only screen and (max-width: 768px){
	#form1 {
		width: 100%;
		text-align: center;
		position: relative;
	}
}
#form1 fieldset {
background: white;
border: 0 none;
border-radius: 3px;
/*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);*/
padding: 10px;
box-sizing: border-box;
width: 100%;
margin: 0;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#form1 fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#form1 input, #form1 textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#form1 .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#form1 .action-button:hover, #form1 .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-top: 30px;
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: #333;
text-transform: uppercase;
font-size: 9px;
width: 20%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
background: #27AE60;
color: white;
}
#apDiv1 {
  position: absolute;
  left: 27px;
  top: 83px;
  width: 213px;
  height: 270px;
  z-index: 1;
  background-color: #FFF;
}
#apDiv1 img{
	width: 100%;
    height: 100%;
}
#apDiv2 {
	position: absolute;
  left: 86px;
  top: 362px;
  width: 85px;
  height: 83px;
  z-index: 2;
  background-color: #FFF;
}
#apDiv2 img{
	width: 100%;
    height: 100%;
}
#apDiv3 {
	position: absolute;
	left: 266px;
	top: 73px;
	width: 315px;
	height: 200px;
	z-index: 3;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px;
}
#apDiv4 {
	position: absolute;
	left: 516px;
	top: 650px;
	width: 138px;
	height: 21px;
	z-index: 4;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
#apDiv4 p {
	top: 50%;	
}

#apDiv5 {
	position: relative;
	/*left: 666px;
	top: 143px;*/
	width: 733px;
	height: 465px;
	/*z-index: 1;*/
	background-image:url(../../uje/cliente/fundo2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	background-size: 100% 100%;
}

@media only screen and (max-width: 768px){
	#apDiv1 {
		position: absolute;
		left: 12px;
		top: 48px;
		width: 84px;
		height: 152px;
		z-index: 1;
		background-color: #FFF;
	}
	#apDiv2 {
		position: absolute;
		left: 26px;
		top: 205px;
		width: 45px;
		height: 43px;
		z-index: 2;
		background-color: #FFF;
	}
	#apDiv3 {
		position: absolute;
		left: 116px;
		top: 43px;
		width: 205px;
		height: 200px;
		z-index: 3;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 8px;
		padding: 5px;
	}
	#apDiv4 {
		position: absolute;
		left: 516px;
		top: 400px;
		width: 138px;
		height: 21px;
		z-index: 4;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
	}
	#apDiv5 {
		position: relative;
		width: 100%;
		height: 265px;
		left: 0;
		top: 0;
		background-image:url(../../uje/cliente/fundo2.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: scroll;
		background-size: 100% 100%;
	}
}

#face-back {
width: 50%;
margin: 0 auto;
text-align: center;
position: relative;

}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

select {
	width: 95%;
	padding: 15px;
	margin: 10px !important;
}

#pageloader{
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img{
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}