/** FONTS
================================================== */
@font-face {
    font-family: 'kievitotitalic';
    src: url('fonts/kievitot-italic-webfont.eot');
    src: url('fonts/kievitot-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/kievitot-italic-webfont.woff') format('woff'),
         url('fonts/kievitot-italic-webfont.ttf') format('truetype'),
         url('fonts/kievitot-italic-webfont.svg#kievitotitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'kievitotbolditalic';
    src: url('fonts/kievitot-bolditalic-webfont.eot');
    src: url('fonts/kievitot-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/kievitot-bolditalic-webfont.woff') format('woff'),
         url('fonts/kievitot-bolditalic-webfont.ttf') format('truetype'),
         url('fonts/kievitot-bolditalic-webfont.svg#kievitotbolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face{font-family: 'kievitotitalic';src: url('fonts/kievitot-italic-webfont.svg#kievitotitalic') format('svg');;}
	@font-face{font-family: 'kievitotbolditalic';src: url('fonts/kievitot-bolditalic-webfont.svg#kievitotbolditalic') format('svg');}
}


/** Enable HTML5 for older browsers
================================================== */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}

/* GERAL
================================================== */
*{
	margin:0;
	padding:0;
	list-style:none;
	font-family:"kievitotbolditalic", Arial, Helvetica, sans-serif;	
	color:#fff;
}
.content{
	width:80%;
	margin:0 auto;
	text-align:center
}

a img{border:none;}
.clear{clear:both}
.float-left{float:left}
.float-right{float:right}

/* HEADER
================================================== */
.logo{
	width:100%;
	max-width:443px;
	height:auto;
	margin:0 auto;
	margin-top:70px;
}

hr{
	width:70%;
	
	margin:0 auto;
	margin-top:30px;
	margin-bottom:80px;
	
	border:none;
	border-top:1px solid #236283;	
	border-bottom:1px solid #3fabdd;
}

form{
	position:relative;	
	width:100%;
}

form fieldset{
	border:none;
	float:left;
	width:49%
}

form fieldset + fieldset{
	border:none;
	float:right;
}

form fieldset img{width:100%;display:block;margin:0 0 -15px 0}

label{
	display:block;
	font-size:22px;
	cursor:pointer;
	margin:0 0 10px 0
}

input[type="text"],
input[type="password"]{
	width:100%;
	height:49px;
	background:url(../images/input.png) repeat-x;
	display:block;
	border:none;
	float:left;
	font-family:"kievitotitalic", Arial, Helvetica, sans-serif;	
	color:#7c7c7c;
	font-size:24px;
	text-indent:20px;
	z-index:2;
	position:relative;
	
	-webkit-border-radius:6px;
	   -moz-border-radius:6px;  
	        border-radius:6px;	
}

form fieldset + fieldset input[type="text"],
input[type="password"]{
	text-indent:60px;
}

input[type="submit"]{
	width:130px;
	height:130px;
	background:url(../images/submit.png) no-repeat;
	display:inline-block;
	border:none;
	font-size:0;
	cursor:pointer;
	margin:-10px 0 0 0;

	z-index:3;
	position:absolute;
	right: 0;
    left: 0;
    margin: auto;
}
.button_login{
	background:url(../images/login.png) no-repeat !important;
}

textarea{
	overflow:hidden;
	height:auto;
	width:90%;
	background:none;
	border:none;
	resize:none;
	font-size:60px;
	text-align:center;
	outline:none;
	
	ms-word-break: break-all;
	   word-break: break-all;
	   word-break: break-word;
}

form span{
	display:block;
	background-color:rgba(0, 0, 0, 0.2);
	
	width:60%;
	text-align:center;
	padding:60px 20px 40px 20px;
	margin:0 auto;
	clear:both;
	position:relative;
	
		
	-webkit-border-radius:0 0 6px 6px;	
	   -moz-border-radius:0 0 6px 6px;	
	        border-radius:0 0 6px 6px;	
}

.copyright{
	clear:both;
	padding-top:90px
}

.copiar_url{
	background: #151c21;
	font-size:20px;
	padding:30px;
	
	width:130px;
	position: absolute;
	right: 0;
    left: 0;
    margin: auto;
	
	margin-top:30px;
	margin-bottom:60px;
	
	-webkit-border-radius:6px;	
	   -moz-border-radius:6px;	
	        border-radius:6px;	
}
.copiar_url:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(21, 28, 33, 0);
	border-bottom-color: #151c21;
	border-width: 20px;
	margin-left: -20px;
}

.button_delete{
	width:82px;
	height:82px;
	display:block;
	background:url(../images/undo.png) no-repeat;	
	font-size:0;
	position:absolute;
	right:-40px
}

/* OPS
================================================== */
.pagina_404 img{
	width:100%;
	max-width:184px;
	height:auto;
	margin:0 auto;
	margin-top:-40px;
}

.pagina_404 h1{
	font-size:60px
}

.pagina_404 h2{
	font-size:30px
}



/* ERROS
================================================== */
.msg_erro{
	display:inline-block;
	margin:0 auto;
	margin-bottom:60px;
	font-size:20px;
	line-height:30px;
	padding:20px 40px;
	text-align:center;
	
	-webkit-border-radius:10px;
	   -moz-border-radius:10px;  
	        border-radius:10px;
}

.msg_erro{
	color:#b62424;
	border:1px solid #dc4e4d;
	
	background: #f28888; /* Old browsers */
	background: -moz-linear-gradient(top,  #f28888 0%, #e17575 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f28888), color-stop(100%,#e17575)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f28888 0%,#e17575 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f28888 0%,#e17575 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f28888 0%,#e17575 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f28888 0%,#e17575 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28888', endColorstr='#e17575',GradientType=0 ); /* IE6-9 */
}

@media screen and (max-width: 1020px) {
	.content{width:96%;}
}

@media screen and (max-width: 840px) {
	textarea{font-size:40px;}
	label{font-size:18px;text-align:left}
	form fieldset + fieldset label{text-align:right;float:right}
}

@media screen and (max-width: 685px) {
	label{width:200px;}
	textarea{font-size:30px;}
}

@media screen and (max-width: 420px) {
	form fieldset{
		float:none;
		width:100%
	}
	
	label{width:auto;text-align:center;}
	form fieldset + fieldset label{float:none;text-align:center;margin:30px 0 0 0}
	
	input[type="submit"]{
		position:relative;
		margin:0 auto;
		margin-top:20px
	}
	
	form span{
		width:80%;
		margin-top:-60px;
		padding-top:80px;
			
		-webkit-border-radius:6px;	
		   -moz-border-radius:6px;	
				border-radius:6px;	
	}
	
	.button_delete{right:-10px;z-index:10}
	
}