/*====================================*/
/*=========== yodesigner.com =========*/
/*====================================*/
html, body{
	height: 100%;
	width: 100%;
}
body {
	background-color: #f6f6f6;
	font-family: 'Open Sans', sans-serif;
}
header {
	position: absolute;
	top: 0px;
	z-index: 1 !important;
	width: 100%;
	min-height: 280px;
	background-image: url(../images/bkg-header1.png), url(../images/bkg-header2.png);
	background-position: left top, right top;
	background-repeat: no-repeat, no-repeat;
	background-size: 50%, 60%;
}
.navbar-default {
    border: none !important;
    background: none;
}
a.navbar-brand {
	background: url(../images/mercado-el-ruedo.png) no-repeat left top;
	width: 350px;
	height: 101px;
	background-size: cover;
	margin: 40px 0 0 140px;
}
ul.nav {
	margin: 40px 40px 0 0
}
ul.nav a{
	font-size: 1.4em;
	font-weight: 300;
	color: #fff !important;
	margin: 0 10px;
	-moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
ul.nav a:hover{
	color: #ffca02 !important;
	margin-top: 3px;
}
ul.nav li:nth-child(2){
	border: solid 2px #fff;
	border-radius: 100px;
	padding: 0 30px;
}
ul.nav li:nth-child(3):hover{
	background: #fff;
}
@media only screen and (max-width: 767px) {
	body{
		background: none;
	}
	a.navbar-brand {
		width: 199px;
		height: 58px;
		background-size: cover;
		margin: 10px 0 0 10px;
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #59b948;
		width: 30px;
	}
	header {
		position: initial;
		z-index: 1 !important;
		min-height: 80px !important;
		background: none;
	}
	header button {
		text-indent: -9999px;
		width: 50px;
	}
	.navbar-default .navbar-toggle {
		border-color: transparent !important;
	}
	.navbar-collapse{
		background: #59b948;
		margin-top: 10px
	}
	ul.nav {
		margin: 20px 40px 20px 0
	}
	ul.nav a{
		font-size: 1.2em;
	}
	ul.nav li:nth-child(3){
		border: none;
		border-radius: 0px;
		padding: 0 0px;
	}
	.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
		background-color: #ffffff;
	}
}
/*====================================*/
/*============== banner ==============*/
/*====================================*/
#banner{
	width: 100%;
	height: 100%;
	background: url(../images/supermercado-el-ruedo.jpg) no-repeat left bottom;
	background-size: cover;
}
#banner h2{
	font-family: 'Merriweather', serif;
	font-size: 4.6em;
	color: #f5f5f6;
	/* width: 70%; */
	margin-top: 280px;
}
#banner h2::after{
	content: "__";
	display: block;
	margin-top: -40px;
}
#banner h3{
	font-weight: 600;
	font-size: 2.4em;
	color: #f5f5f6;
	margin-top: 20px;
	margin-bottom: 30px;
}
#banner p{
	font-weight: 600;
	font-size: 2em;
	color: #f4f4f5;
	width: 100%;
	margin-top: 30px;
	margin-bottom: 60px;
}
#banner p a{
	color: #fff;
	margin-left: 20px;
}
#banner figure{
	overflow: hidden;
}
#banner img{
	width: 85%;
	float: right;
}
#banner a.bt-cotiza{
	background: #d61b46;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.6em;
	border-radius: 100px;
	padding: 13px 80px;
	-moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#banner a.bt-cotiza:hover{
	text-decoration: none;
	background: #f15176;
	color: #fff;
}
@media only screen and (max-width: 767px) {
	#banner {
		background: url(../images/supermercado-el-ruedo-movil.jpg) no-repeat center center;
		background-size: cover;
		height: auto;
		text-align: center;
	}
	#banner h2{
		font-size: 2.6em;
		width: 100%;
		margin-top: 20px;
	}
	#banner h3{
		font-size: 1.8em;
	}
	#banner p{
		font-size: 1.3em;
		width: 100%;
		margin-bottom: 40px;
	}
	#banner a.bt-cotiza{
		display: block;
		text-align: center;
		width: 280px;
		font-size: 1.4em;
		padding: 10px 0px;
		margin: 0 auto 20px auto !important;
		
	}
}
/*====================================*/
/*========= caracteristicass =========*/
/*====================================*/
section#caracteristicas{
	background: url(../images/bkg-vistas.png) no-repeat center bottom;
	background-size: 100%;
	background-color: #59b948;
	padding: 50px 0;
	/* margin-top: 50px; */
	text-align: center;
}
section#caracteristicas h2{
	font-family: 'Merriweather', serif;
	color: #fff;
	font-size: 3em;
	margin-bottom: 80px;
}
section#caracteristicas figcaption{
	color: #fff;
	font-size: 1.2em;
	margin-top: 30px;
	font-weight: 600
}
.vistas{
	margin-top: 80px;
}
@media only screen and (max-width: 767px) {
	section#caracteristicas{
		padding: 30px 0;
	}
	section#caracteristicas h2{
		font-size: 2em;
		margin-bottom: 50px;
	}
	section#caracteristicas figure img {
		width: 40%
	}
	section#caracteristicas figcaption {
		margin-top: 10px;
		margin-bottom: 30px;
		font-size: 1em;
		line-height: 1em;
	}
	.vistas{
		margin-top: 0px;
	}
}
/*====================================*/
/*============ ubicacion =============*/
/*====================================*/
section#ubicacion {
	margin-top: 50px;
}
section#ubicacion h2{
	font-family: 'Merriweather', serif;
	letter-spacing: 0.05em;
	color: #59b948;
	font-size: 3.6em;
	width: 50%;
	margin-top: 100px;
	margin-left: 50px;
}
section#ubicacion h2::after{
	content: "__";
	display: block;
}
section#ubicacion p{
	font-size: 1.6em;
	color: #666666;
	width: 50%;
	margin-left: 50px;
	margin-top: 20px;
}
@media only screen and (max-width: 767px) {
	section#ubicacion h2{
		font-size: 2.6em;
		width: 100%;
		margin-top: 50px;
		margin-left: 20px;
	}
	section#ubicacion p{
		font-size: 1.4em;
		width: 100%;
		margin-left: 20px;
	}
}
/*====================================*/
/*============== cotiza ==============*/
/*====================================*/
section#cotiza{
	background: url(../images/bkg-cotiza.png) no-repeat center top;
	padding-top: 300px;
	padding-bottom: 70px;
	background-size: 100%;
}
section#cotiza h2{
	font-family: 'Merriweather', serif;
	letter-spacing: 0.05em;
	color: #ffffff;
	font-size: 3.6em;
	width: 70%;
	line-height: 1.3em;
	margin-top: 50px;
}
section#cotiza h2::after{
	content: "__";
	display: block;
}
section#cotiza p{
	font-size: 1.6em;
	color: #ffffff;
	width: 50%;
}
section#cotiza form{
	background: #db4369;
	border-radius: 50px;
	padding: 30px 50px;
}
section#cotiza input, section#cotiza textarea{
	outline: transparent !important;
	border: none;
	border-radius: 30px;
	padding: 10px;
	width: 100%;
}
section#cotiza textarea{
	height: 100px;
}
section#cotiza label{
	display: block;
	color: #fff;
}
section#cotiza button{
	background: none;
	border: solid 2px #fff;
	border-radius: 50px;
	font-size: 1.4em;
	font-weight: 600;
	width: 100%;
	padding: 10px;
	margin-top: 20px;
	text-transform: uppercase;
}
section#cotiza button:hover{
	background: #d63a45
}
@media only screen and (max-width: 767px) {
	section#cotiza{
		background: none;
		background-color: #d51b45;
		padding-top: 0px;
		padding-bottom: 30px;
		background-size: 100%;
		margin-top: 40px;
	}
	section#cotiza h2{
		font-size: 2.2em;
		width: 100%;
	}
	section#cotiza p{
		font-size: 1.3em;
		width: 100%;
		margin-bottom: 30px;
	}
	section#cotiza form{
		background: #db4369;
		border-radius: 30px;
		padding: 20px 20px;
	}
}
/*====================================*/
/*============ beneficios ============*/
/*====================================*/
section#beneficios{
	padding-top: 100px;
	padding-bottom: 70px;
}
section#beneficios h2{
	font-family: 'Merriweather', serif;
	letter-spacing: 0.05em;
	color: #d51b45;
	font-size: 3.6em;
	width: 95%;
	line-height: 1.3em;
	margin-top: 50px;
}
section#beneficios h2::after{
	content: "__";
	display: block;
}
section#beneficios p{
	font-size: 1.6em;
	color: #666666;
	width: 50%;
	font-weight: 600
}
section#beneficios figcaption{
	text-align: center;
	margin-top: 30px;
	font-size: 1.4em;
	margin-top: 30px;
	font-weight: 600
}
@media only screen and (max-width: 767px) {
	section#beneficios{
		padding-top: 40px;
		padding-bottom: 70px;
	}
	section#beneficios h2{
		font-size: 2.2em;
		width:100%;
		line-height: 1.3em;
		margin-top: 0px;
	}
	section#beneficios p{
		font-size: 1.6em;
		color: #666666;
		width: 100%
	}
	section#beneficios figure img{
		width: 80%;
		margin: 0 auto !important;
	}
	section#beneficios figcaption{
		text-align: center;
		font-size: 1.2em;
		margin-top: 10px;
		margin-bottom: 20px;
	}
}
/*====================================*/
/*============== financia ============*/
/*====================================*/
section#financia{
	background: url(../images/bkg-financia.png) no-repeat left bottom;
	background-size: 50%;
	padding-top: 100px;
}
section#financia .col-md-7, section#financia .col-lg-7{
	padding-right: 0
}
section#financia h2{
	font-family: 'Merriweather', serif;
	letter-spacing: 0.05em;
	color: #ffffff;
	font-size: 2.6em;
	font-weight: 600;
	text-transform: uppercase;
	width: 60%;
	line-height: 1.3em;
	margin: 270px 0 20px 30px;
}
section#financia a{
	font-size: 4em;
	color: #fff;
	margin-left: 30px;
}
section#financia .bt-mas-info {
	display: block;
	width: 300px;
	text-align: center;
	color: #fff;
	border: solid 3px #fff;
	border-radius: 50px;
	padding: 10px;
	font-size: 1.4em;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 30px;
	margin-left: 30px;
	-moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
section#financia .bt-mas-info:hover {
	text-decoration: none;
	background: #fff;
	color: #5fb948;
}
section#financia .logo{
	margin-left: 30px;
	margin-right: 15px;
}
section#financia figure{
	overflow: hidden;
}
section#financia img.bolsa{
	width: 80%;
	float: right;
}
@media only screen and (max-width: 767px) {
	section#financia{
		background: none;
		padding-top: 0px;
	}
	section#financia .llamanos{
		background: #5fb949;
		text-align: center;
		padding-bottom: 20px;
		margin-bottom: 30px;
	}
	section#financia h2{
		letter-spacing: 0.05em;
		font-size: 2em;
		width: 100%;
		margin: 0px 0 20px 0px;
		text-align: center;
		padding-top: 30px;
	}
	section#financia a{
		font-size: 3em;
		margin-left: 0
	}
	section#financia .bt-mas-info {
		color: #01a85a;
		border: solid 3px #01a85a;
		overflow: hidden;
		margin-top: 170px !important;
		margin-bottom: 50px;
	}
	section#financia img{
		display: block;
		width: 50%;
		float: left;
		margin: 0 auto !important;
	}
}
/*====================================*/
/*============== footer ==============*/
/*====================================*/
footer{
	background-color: #4d4d4d;
	padding: 50px 0;
}
footer p{
	color: #fff;
	letter-spacing: 0.05em;
	line-height: 1.8em;
	margin-bottom: 0;
}
footer p.conocenos{
	width: 75%;
}
footer .bt-conocenos {
	display: block;
	width: 250px;
	text-align: center;
	color: #fff;
	border: solid 2px #fff;
	border-radius: 50px;
	padding: 10px;
	font-size: 1.2em;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 30px;
	-moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
footer .bt-conocenos:hover {
	text-decoration: none;
	background: #fff;
	color: #5fb948;
}
footer .logo{
	width: 90%;
}
footer h3{
	margin: 0 0 10px 0;
	font-size: 1.2em;
	font-weight: 600;
	color: #fff;
}
footer a{
	color: #fff;
}
footer a:hover{
	color: #59b948;
	text-decoration: none
}
footer ul.redes {
	overflow: hidden;
	margin-top: 20px;
	padding-left: 0
}
footer ul.redes a{
	display: block;
	text-indent: -9999px;
	width: 30px;
	height: 30px;
	margin-right: 20px;
}
footer ul.redes li{
	list-style-type: none;
	float: left;
}
footer ul.redes a.facebook{
	background: url(../images/icn-facebook.png) no-repeat left top;
	background-size: 30px;
}
footer ul.redes a.instagram{
	background: url(../images/icn-instagram.png) no-repeat left top;
	background-size: 30px;
}
@media only screen and (max-width: 767px) {
	footer {
		padding: 20px 0;
		text-align: center;
	}
	footer .logo{
		width: 50%;
		margin-bottom: 30px;
	}
	footer p{
		line-height: 1.4em;
		margin-bottom: 0;
	}
	footer .bt-conocenos {
		margin: 30px auto;
	}
	footer ul.redes {
		width: 100px;
		margin: 30px auto;
	}
}

h4.modal-title{
	font-family: 'Merriweather', serif;
	font-size: 1.8em;
	color: #d61b46;
	text-align: center;
}
.modal-body p{
	font-size: 1.05em;
	line-height: 1.8em;
	text-align: center;
	color: #666;
}
.modal-body p strong{
	display: block;
	color: #d61b46;
	font-size: 1.4em;
	text-align: center;
}