html,
body{
	height:100%;
	background-color:#fff;
	font-family: 'Work Sans', sans-serif;
	
}
@media(min-width:768px){
	html,
	body{
		background-color:#333;
	}
}

main{
	height:100%;
	background-color:#333;
}

#wrapper{
	max-width:500px;
	margin:0 auto;
	background-color:#fff;
	position:relative;
}
@media(min-width:768px){
	#wrapper{
		margin:30px auto;
		border-radius:3px;
	}
}

#loading{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(255,255,255,0.8);
	z-index:100;
	backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display:none;
}
#loading i{
	color:#053F48;
	font-size:24px;
	line-height:24px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-12px;
	margin-left:-12px;
}

.btn-nav{
	position:fixed;
	top:10px;
	right:10px;
	color:#fff !important;
	background-color:#053F48;
	width:50px;
	height:50px;
	border-radius:50%;
	text-align:center;
	font-size:20px;
	line-height:50px;
	z-index:99;
}

#gracias-nav{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#053F48;
	z-index:101;
	display:none;
}
.btn-close-gracias-nav{
	position:fixed;
	top:10px;
	right:10px;
	color:#000 !important;
	background-color:#fff;
	width:50px;
	height:50px;
	border-radius:50%;
	text-align:center;
	font-size:20px;
	line-height:50px;
	z-index:99;
}
#gracias-nav ul{
	margin-top:75px;
	width:100%;
}
#gracias-nav ul li a{
	display:block;
	color:#fff !important;
	text-decoration:none;
	font-size:18px;
	line-height:18px;
	text-align:center;
	margin:0 auto 5px auto;
	background-color:rgba(0,0,0,0.1);
	padding:15px;
	border-radius:3px;
	width:80%;
	max-width:280px;
}
#gracias-nav .logo{
	width:150px;
	position:absolute;
	bottom:30px;
	left:50%;
	margin-left:-75px;
}

.banner{

}
.banner img{
	max-width:100%;
}

.header{
	/* background-image:url('../img/bg-header.jpg'); */
	padding:30px;
	text-align:center;
}
.header .logo{
	
}
.header .logo span{
	display:inline-block;
	width:100%;
	font-size:30px;
	line-height:30px;
	text-transform:uppercase;
	margin:5px 0 0 0;
	font-weight:bold;
}
.header .logo img{
	width:180px;
	display:inline-block;
}

.body{
	padding:30px 15px;
}

.body .main-title{
	text-align:center;
	width:100%;
	font-size:24px;
	line-height:24px;
	font-weight:bold;
	margin:0 0 15px 0;
}
.body .main-title span{
	color:#59ef83;
}
.body .intro{
	font-size:14px;
	line-height:20px;
	color:#888;
	text-align:center;
	width:100%;
	padding:0 30px 15px 30px;
}

.form{
	background-color:#f8f8f8;
	padding:15px;
	border-radius:3px;
}
.gracias-form-row{
	width:100%;
	margin:0 0 15px 0;
	position:relative;
}
.gracias-form-row-100px{
	width:100px;
	display:inline-block;
}
.gracias-form-row-50px{
	width:50px;
	display:inline-block;
}
.gracias-form-row label{
	font-size:14px;
	line-height:18px;
	margin:0 0 5px 0;
	font-weight:bold;
	display:block;
}
.gracias-form-row label.error{
	display:none;
}
.gracias-form-row label.subLabel{
	font-weight:normal;
	font-size:12px;
	line-height:16px;
}
.gracias-form-row label.checkbox{
	display:block;
  	padding-left: 15px;
  	text-indent: -15px;
  	margin:0;
  	font-weight:normal;
}
.gracias-form-row label.checkbox a{
	color:#555;
}
.gracias-form-row input{
	width:100%;
	background-color:#fff;
	border:solid 1px #ddd;
	font-size:16px;
	padding:10px;
	border-radius:3px;
	outline:0;
}
.gracias-form-row input.error,
.gracias-form-row select.error{
	border:solid 2px #ff0000;
}
.gracias-form-row input[type=checkbox]{
	width: 15px;
  	height: 15px;
  	padding: 0;
  	margin: 0;
  	vertical-align: bottom;
  	position: relative;
  	top: -1px;
}
/*
.gracias-form-row select{
	background-color:#fff;
	border:solid 1px #ddd;
	font-size:16px;
	padding:10px;
	border-radius:3px;
	width:100%;
}
*/
.font-normal{
	font-weight:normal !important;
}
.gracias-form-row #suggestions ul{
	position:absolute;
	top:100%;
	left:0;
	right:0;
	background-color:#fff;
	z-index:10;
	border:solid 1px #ddd;
	border-radius:3px;
	max-height:200px;
	overflow-x:scroll;
}
.gracias-form-row #suggestions ul li a{
	text-decoration:none;
	font-size:14px;
	line-height:14px;
	padding:10px 10px;
	display:block;
	width:100%;
	border-bottom:solid 1px #eee;
	color:#555;
}
.gracias-form-row .btn-send{
	border:none;
	background-color:#053F48;
	color:#fff;
	padding:10px 15px;
	border-radius:3px;
	margin-top:15px;
}
.gracias-form-row:last-child{
	margin-bottom:0;
}

.btn-event{
	display:inline-block;
	text-decoration:none;
	text-align:center;
	background-color:#fff;
	padding:15px;
	margin:0 0 5px 0;
	width:100%;
	border-radius:3px;
	color:#555;
	font-size:14px;
	line-height:20px;
	border:solid 1px #eee;
	position:relative;
}
.btn-event:hover{
	color:#555;
}
.btn-event:last-child{
	margin:0;
}
.btn-event b{
	display:block;
}
.btn-event span{
	display:block;
	font-size:12px;
}
.btn-event.selected{
	background-color:#e3ffe4;
	border-color:#cdf0cf;
	color:#4b754d;
}
.btn-event .fa-check{
	display:none;
}
.btn-event.selected .fa-check{
	display:block;
	color:#4b754d;
	font-size:30px;
	line-height:30px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-15px;
}

.text{
	padding:15px;
	font-size:14px;
	line-height:20px;
}
.text .line{
	width:100%;
	margin:0 0 15px 0;
}
.text .line a{
	color:#555;
	text-decoration:none;
}
.text .line i{
	font-size:18px;
	margin:0 0 5px 0;
	display:block;
	color:#053F48;
}
.text .line a,
.text .line span{
	width:calc(100% - 20px);
}

.footer{
	padding:60px 30px 45px 30px;
	background-color:#053F48;
	margin-top:60px;
	/* background-image:url('../img/bg-footer.png'); */
	position:relative;
}
.footer .btn-to-top{
	background-color:#59ef83;
	width:50px;
	height:50px;
	line-height:50px;
	border-radius:50%;
	position:absolute;
	left:50%;
	margin-left:-25px;
	top:-25px;
	text-align:center;
	font-size:20px;
}
.footer .btn-to-top i{
	color:#fff;
}
.footer .line{
	width:100%;
	text-align:center;
	margin:0 0 10px 0;
	font-size:18px;
	line-height:18px;
}
.footer .line i{
	color:#fff;
	margin:0 5px 0 0;
}
.footer .line .social{
	width:40px;
	height:40px;
	border:solid 1px #fff;
	border-radius:50%;
	text-align:center;
	line-height:40px;
	display:inline-block;
	margin:15px 2px 0 2px;
}
.footer .line .social i{
	margin:0;
	color:#fff;
}
.copyright{
	background-color:#333;
	color:#fff;
	font-size:12px;
	line-height:12px;
	padding:15px 0;
	text-align:center;
}
.copyright a{
	color:#fff;
}

.banners{
	margin-top:15px;
}
.banners a{
	display:block;
	margin:0 0 15px 0;
}
.banners a img{
	max-width:100%;
}