*{box-sizing: border-box;}

@font-face {
	font-family: 'Zodiak';
	src: url('../fonts/Zodiak/Zodiak_Complete/Fonts/OTF/Zodiak-Bold.otf');
	font-weight: bold;
  }


  @font-face {
	font-family: 'OpenSanz';
	src: url('../fonts/Open_Sanz/OpenSans-Variable.ttf');
  }
  body{
	background-color: transparent;
}

  html{
	background-color: #f6f3ee;
	background-size: cover;
    min-height: 90%;
}

h1{
	color:#f6f3ee;
}

.encabezado {
	background: url(greca.png);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 25px;
    background-size: 75px;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}


#registration-form{
	padding: 30px 0;
	height: auto;
    width: 98%;
	background-color:#45112a;
	background-size: cover;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 15px 50px 30px;
	font-family: 'OpenSanz';
}

#registration-form form{
	width: 99%;
    padding: 50px 70px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
}

registration-form .item{
	border-radius: 20px;
    margin-bottom: 25px;
    padding: 10px 20px;
}


#buzon_vecinal{
	font-family: 'OpenSanz';
}

#buzon_vecinal h1{
	color: #45112a;	
	font-family: 'Zodiak';
	font-weight: bold;
}


#buzon_form{
	color: #fff;
}


#registration-form .btn{
	background-color: #ddc9a3;
	color: #45112a;
	font-weight: bold;
}



@media (max-width: 350px) {
    .registration-form form{
        padding: 20x 10px;
		width: 100%;
    }

    
}



.panel {margin: 100px auto 40px; max-width: 500px; text-align: center;}
.button_outer {background: #83ccd3; border-radius:30px; text-align: center; height: 50px; width: 200px; display: inline-block; transition: .2s; position: relative; overflow: hidden;}
.btn_upload {padding: 17px 30px 12px; color: #fff; text-align: center; position: relative; display: inline-block; overflow: hidden; z-index: 3; white-space: nowrap;}
.btn_upload input {position: absolute; width: 100%; left: 0; top: 0; width: 100%; height: 105%; cursor: pointer; opacity: 0;}
.file_uploading {width: 100%; height: 10px; margin-top: 20px; background: #ccc;}
.file_uploading .btn_upload {display: none;}
.processing_bar {position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 30px; background:#83ccd3; transition: 3s;}
.file_uploading .processing_bar {width: 100%;}
.success_box {display: none; width: 50px; height: 50px; position: relative;}
.success_box:before {content: ''; display: block; width: 9px; height: 18px; border-bottom: 6px solid #fff; border-right: 6px solid #fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); position: absolute; left: 17px; top: 10px;}
.file_uploaded .success_box {display: inline-block;}
.file_uploaded {margin-top: 0; width: 50px; background:#83ccd3; height: 50px;}
.uploaded_file_view {max-width: 300px; margin: 40px auto; text-align: center; position: relative; transition: .2s; opacity: 0; border: 2px solid #ddd; padding: 15px;}
.file_remove{width: 30px; height: 30px; border-radius: 50%; display: block; position: absolute; background: #aaa; line-height: 30px; color: #fff; font-size: 12px; cursor: pointer; right: -15px; top: -15px;}
.file_remove:hover {background: #222; transition: .2s;}
.uploaded_file_view img {max-width: 100%;}
.uploaded_file_view.show {opacity: 1;}
.error_msg {text-align: center; color: #f00}