/* 
	-------------------------------------------------- 
   	Que Quieres Vender
   	Tablon de Anuncios
	-------------------------------------------------- 
*/



body {
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	border-top: 5px #455460 solid;
	background: #ededed url('../images/css/background-objects.png') repeat  fixed 0 0;
	}


	body * {
		font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	}






/* -----------------------------------------
	typography
----------------------------------------- */
h1 {
	font-family: "Covered By Your Grace", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 60px;
	font-style: normal;
	font-weight: 800;
}

h2 {
	font-size: 26px;
	font-style: normal;
	font-weight: 300;
}

h3 {
	font-weight: 400;
	font-style: normal;
}

h4 {
	font-weight: 300;
	font-style: normal;
	color: #999;
}

h5 {
}

h6 {
}

p {
	font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	line-height: 1.6em;
}


.relative {
	position: relative;
}

.panel {
	border-color: #d8e5e9;
	background-color: #ededed;
}





/* -----------------------------------------
   font-face (iconic)
----------------------------------------- */
@font-face {
  font-family: 'IconicStroke';
  src: url("../font/iconic_stroke.eot");
  src: local('IconicStroke'),
  	url("../font/iconic_stroke.svg#iconic") format('svg'),
  	url("../font/iconic_stroke.otf") format('opentype');
}

.iconic {
	color:inherit;
	font-family: "IconicStroke";
	text-decoration: none;
}

a.iconic:hover {
	color:inherit;
}

.iconic.box{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

.iconic.home:before { content: '!'; }
.iconic.at:before { content: "@"; }
.iconic.quote:before { content: '"'; }
.iconic.quote-alt:before { content: "'"; }
.iconic.arrow-up:before { content: "3"; }
.iconic.arrow-right:before { content: "4"; }
.iconic.arrow-bottom:before { content: "5"; }
.iconic.arrow-left:before { content: "6"; }
.iconic.arrow-up-alt:before { content: "#"; }
.iconic.arrow-right-alt:before { content: "$"; }
.iconic.arrow-bottom-alt:before { content: "%"; }
.iconic.arrow-left-alt:before { content: "^"; }
.iconic.move:before { content: "9"; }
.iconic.move-vertical:before { content: "8"; }
.iconic.move-horizontal:before { content: "7"; }
.iconic.move-alt:before { content: "("; }
.iconic.move-vertical-alt:before { content: "*"; }
.iconic.move-horizontal-alt:before { content: "&"; }
.iconic.cursor:before { content: ")"; }
.iconic.plus:before { content: "+"; }
.iconic.plus-alt:before { content: "="; }
.iconic.minus:before { content: "-"; }
.iconic.minus-alt:before { content: "_"; }
.iconic.new-window:before { content: "1"; }
.iconic.dial:before { content: "2"; }
.iconic.lightbulb:before { content: "0"; }
.iconic.link:before { content: "/"; }
.iconic.image:before { content: "?"; }
.iconic.article:before { content: ">"; }
.iconic.read-more:before { content: "."; }
.iconic.headphones:before { content: ","; }
.iconic.equalizer:before { content: "<"; }
.iconic.fullscreen:before { content: ":"; }
.iconic.exit-fullscreen:before { content: ";"; }
.iconic.spin:before { content: "["; }
.iconic.spin-alt:before { content: "{"; }
.iconic.moon:before { content: "]"; }
.iconic.sun:before { content: "}"; }
.iconic.map-pin:before { content: "\\"; }
.iconic.pin:before { content: "|"; }
.iconic.eyedropper:before { content: "~"; }
.iconic.denied:before { content: "`"; }
.iconic.calendar:before { content: "a"; }
.iconic.calendar-alt:before { content: "A"; }
.iconic.bolt:before { content: "b"; }
.iconic.clock:before { content: "c"; }
.iconic.document:before { content: "d"; }
.iconic.book:before { content: "e"; }
.iconic.book-alt:before { content: "E"; }
.iconic.magnifying-glass:before { content: "f"; }
.iconic.tag:before { content: "g"; }
.iconic.heart:before { content: "h"; }
.iconic.info:before { content: "i"; }
.iconic.chat:before { content: "j"; }
.iconic.chat-alt:before { content: "J"; }
.iconic.key:before { content: "k"; }
.iconic.unlocked:before { content: "l"; }
.iconic.locked:before { content: "L"; }
.iconic.mail:before { content: "m"; }
.iconic.mail-alt:before { content: "M"; }
.iconic.phone:before { content: "n"; }
.iconic.box:before { content: "o"; }
.iconic.pencil:before { content: "p"; }
.iconic.pencil-alt:before { content: "P"; }
.iconic.comment:before { content: "q"; }
.iconic.comment-alt:before { content: "Q"; }
.iconic.rss:before { content: "r"; }
.iconic.star:before { content: "s"; }
.iconic.trash:before { content: "t"; }
.iconic.user:before { content: "u"; }
.iconic.volume:before { content: "v"; }
.iconic.mute:before { content: "V"; }
.iconic.cog:before { content: "w"; }
.iconic.cog-alt:before { content: "W"; }
.iconic.x:before { content: "x"; }
.iconic.x-alt:before { content: "X"; }
.iconic.check:before { content: "y"; }
.iconic.check-alt:before { content: "Y"; }
.iconic.beaker:before { content: "z"; }
.iconic.beaker-alt:before { content: "Z"; }



/* -----------------------------------------
	forms
----------------------------------------- */
div.alert-box {
	padding: 10px 20px;
}



/* -----------------------------------------
	forms
----------------------------------------- */
input[type="text"].big, 
input[type="password"].big, 
input[type="date"].big, 
input[type="datetime"].big, 
input[type="email"].big, 
input[type="number"].big, 
input[type="search"].big, 
input[type="tel"].big, 
input[type="time"].big, 
input[type="url"].big,
textarea.big{
	font-size: 20px;
	height: 40px;
}

textarea.big{
	height: auto;
}


input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="date"]:focus, 
input[type="datetime"]:focus, 
input[type="email"]:focus, 
input[type="number"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="time"]:focus, 
input[type="url"]:focus,
textarea:focus{
border-color: #afccd6;
box-shadow: 0 0 10px #afccd6;
}


.prefix, .postfix {
	font-weight: 800;
	font-style: normal;
	font-size: 26px;
}


.button {
	font-size: 14px; 
	font-weight: bold; 
	color: white; 
	-webkit-box-shadow: none; 
	-moz-box-shadow: none; 
	box-shadow: none; 
	border: none; 
	background: #334d60;
	}

.button:hover {
	color: white;
	background-color: #536d82; }

.button.success {
	background-color: #36a400;
	border: none;}

.button.secondary {
	background-color: #fff;
	border: none;}
.button.secondary:hover {
	color: #000;
}







/* -----------------------------------------
	generic layout
----------------------------------------- */



	/* -----------------------------------------
		header
	----------------------------------------- */
	header {
		margin-bottom: 40px;
		border-bottom: 1px solid #fff;
		background: #334d60; /* Old browsers */
		background: -moz-linear-gradient(top,  #334d60 0%, #536d82 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#334d60), color-stop(100%,#536d82)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #334d60 0%,#536d82 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #334d60 0%,#536d82 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #334d60 0%,#536d82 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #334d60 0%,#536d82 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#334d60', endColorstr='#536d82',GradientType=0 ); /* IE6-9 */
	}
	
	header hr {
		display: none;
		border-color: #fff;
	}

	header h1 {
		margin: 0 0 10px 0;
		padding: 0;
		font-family: "Dancing Script", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		color: #fff;
	}

	header h2 {
		margin: 0 0 30px 0;
		padding: 0;
		color: #70879b;
	}
	
	.front header{
		margin-bottom: 0;
	}

	.front header .row{
		background: none;
	}




	/* -----------------------------------------
		section
	----------------------------------------- */
	section h2 {
		font-weight: 800;
	}

	section h2 small {
		font-weight: 300;
	}



		/* -----------------------------------------
			section header
		----------------------------------------- */

		section header {
			margin: 0;
			border: none;
			background: none;
		}

		section header .row {
			background: none;
		}

		section footer {
			padding: 0;
			background: none;
		}


		/* -----------------------------------------
			article
		----------------------------------------- */
		article {
			padding: 30px 0;
			border-bottom: 1px #ddd dashed;
		}

		article.last {
			border-bottom: none;
		}

		article p {
			font-size: .85em;
		}

		article h3 {
			margin-top: 0;
		}

		article footer {
			padding: 0;
			background: none;
		}



		/* -----------------------------------------
			aside p
		----------------------------------------- */
		aside p {
			font-style: normal;
			font-weight: 300;
		}





	/* -----------------------------------------
		footer
	----------------------------------------- */
	footer {
		color: #fff;
		padding: 20px;
		background: #425460;
	}

		#footer h5 {
			font-weight: 300;
			color: #fff;
			margin: 0 0 0 0;
			padding: 5px 0 0 0;
		}






/* -----------------------------------------
	pages (boxes, components, widgets)
----------------------------------------- */



	/* -----------------------------------------
		home
	----------------------------------------- */



		/* -----------------------------------------
			slider
		----------------------------------------- */
		div.orbit {
			z-index: 3;
			position: relative;
			border-radius: 10px;
			background: #fff;
		}


		div.orbit img.fluid-placeholder {
			height:265px;
		}

		div.orbit .orbit-slide {
			padding: 10px 80px 0 460px;
		}

			div.orbit .slide-01 {
				background: url('../images/content/slide-01.png') no-repeat 20px 0;
			}

			div.orbit .slide-02 {
				background: url('../images/content/slide-02.png') no-repeat 20px 0;
			}

			div.orbit .slide-03 {
				background: url('../images/content/slide-03.png') no-repeat 20px 0;
			}

			div.orbit .orbit-slide h3 {
				font-family: "Dancing Script", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
				font-size: 40px;
				color: #91d2e8;
			}

			div.orbit .orbit-slide p {
				color:#666;
				font-weight: 300;
			}


		ul.orbit-bullets {
		  bottom: -40px;
		}

		div.orbit-wrapper span.rotator {
		  background: url('../images/orbit/rotator-black.png') no-repeat;
		}

		div.orbit-wrapper span.mask.move {
			background: url('../images/orbit/timer-black.png') repeat 0 0;
		}

		div.orbit-wrapper span.pause {
			background: url('../images/orbit/pause-black.png') no-repeat;
		 }

		div.orbit-wrapper span.pause.active {
			background: url('../images/orbit/pause-black.png') no-repeat 0 -40px;
		}

		div.orbit-wrapper div.slider-nav span.right {
			/* right: -92px; */
			background: url('../images/orbit/right-arrow-small.png');
		}
		div.orbit-wrapper div.slider-nav span.left {
			/* left: -92px; */
			background: url('../images/orbit/left-arrow-small.png');
		}

		ul.orbit-bullets li {
			background: url('../images/orbit/bullets.png') no-repeat 4px 0;
		}


		.slider-shadow-one,
		.slider-shadow-two {
			width: 100%;
			height: 265px;
			position: absolute;
			z-index: 2;
			border-radius: 5px;
		}

		.slider-shadow-one{
			-moz-transform: rotate(2deg);
			-webkit-transform: rotate(2deg);
			-o-transform: rotate(2deg);
			-ms-transform: rotate(2deg);
			transform: rotate(2deg);
			background: #1E2D38 url('../images/css/background-objects.png') repeat 0 0;
		}

		 .slider-shadow-two {
			-moz-transform: rotate(-1deg);
			-webkit-transform: rotate(-1deg);
			-o-transform: rotate(-1deg);
			-ms-transform: rotate(-1deg);
			transform: rotate(-1deg);
			background: #91d2e8 url('../images/css/background-objects.png') repeat 0 0;
		}



		/* -----------------------------------------
			step
		----------------------------------------- */
		#form-title{
			margin: 30px 0;
		}

			#form-title .row{
				position: relative;
			}


			#form-title h2{
				font-family: "Covered By Your Grace", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
				font-size: 44px;
				font-weight: normal;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				color: #455460;
				background: url("../images/css/underlined-white.png") no-repeat center top;
			}

			#form-title h2 small{
				font-family: "Dancing Script", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
				padding: 5px 10px;
				color: #455460;
			}



		#form-questions{
			width: 940px;
			max-width: 100%;
			min-width: 768px;
			padding: 20px;
			margin: 0 auto;
			border: 1px #d6e2e5 solid;
			background: #fff;
		}

			#form-questions h3 {
				font-family: "Covered By Your Grace", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
				font-size: 36px;
				color: #455460;
				line-height: 28px;
			}

			#form-questions h4 {
				font-family: "Dancing Script", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
				color: #85b8c5;
			}

		.form-questions-error {
			border-color: #C60F13;
		}






	/* -----------------------------------------
		preview (confirm, publish)
	----------------------------------------- */



		/* -----------------------------------------
			expand box
		----------------------------------------- */
		.expandbox {
			margin: 0 0 30px 0;
			padding: 10px;
			display:none;
			background: #e7e7e7;
		}

		.expandbox-clear {
			text-align: center;
			display:none;
			border: none;
			background: none;
		}

		.expandbox2 {
			margin: 0 0 0 0;
			padding: 10px;
			display:none;
			height:40px;
		}
		.expandbox2 ul li{display:inline;}




		/* -----------------------------------------
			preview
		----------------------------------------- */
		#preview {
			z-index: 2;
			padding: 20px;
			border: 1px #d6e2e5 solid;
			background: #fff;
		}

		#preview h3 {
			font-size: 26px;
			font-weight: 700;
			font-style: italic;
			color: #666;
		}

		#preview p {
			font-size: 14px;
			font-weight: 300;



		}




		/* -----------------------------------------
			change box
		----------------------------------------- */
		#change-box {
			background: #e7e7e7;
		}

		#change-box .panel {
			margin-top: 20px;
			border: 1px #ccc dashed;
			background: none;
		}


		#change-box h3 {
			font-family: "Covered By Your Grace", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
			font-size: 22px;
			font-weight: 800;
			color: #666;
		}



		/* -----------------------------------------
			publish box
		----------------------------------------- */
		#publish-box {
			margin: 30px 0 0 0;
			border-top: 1px #fff solid;
			background: #ededed url("../images/css/background-texture.png") repeat 0 0;
		}

		#publish-box-title {
			position: relative;
			z-index: 2;
			background: url("../images/css/underlined-green.png") no-repeat center center;
			background-size: 100%;
		}

				#publish-box h3 {
					font-family: "Covered By Your Grace", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
					font-size: 44px;
					font-weight: normal;
					margin: 30px 0 0 0;
					padding: 0 0 0 0;
					color: #455460;
				}

			#publish-box .panel {
				min-height: 220px;
				background: #fff;
			}

		

				#publish-box h4 {
					font-family: "Dancing Script", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
					font-size: 24px;
					font-weight: bold;
					color: #455460;
				}

				#publish-box p {
					font-size: 13px;
					font-weight: 300;
					color: #666;
				}





/* -----------------------------------------
	media queries
----------------------------------------- */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width: 480px) {
	
	/* header */
	header h1 {
		font-size: 44px;
	}

	header h2 {
		font-size: 20px;
	}

	article {
		padding: 15px 0;
	}


		/* slider */

		div.orbit img.fluid-placeholder {
			height:420px;
		}

			div.orbit .orbit-slide {
				padding: 10px 20px;
			}

				div.orbit .orbit-slide h3 {
					font-size: 28px;
				}

				div.orbit .orbit-slide p {
					font-size: 12px;
				}

				div.orbit .slide-01,
				div.orbit .slide-02,
				div.orbit .slide-03 {
					background-position: bottom center;
				}

			.slider-shadow-one,
			.slider-shadow-two {
				display: none;
			}

	
	/* titles */
	#form-title h2 small {
		display: block;
	}


	/* questions */
	#form-questions,
	.row{
		width: auto;
		min-width: 0;
		margin-left: 20px;
		margin-right: 20px;
	}

	#form-questions .columns {
		padding: 0;
	}


	/* changes */
	#change-box {
		margin: 15px 20px 0 20px;
	}

		#change-box h3 {
			font-size: 28px;
		}

		#change-box h3 .iconic {
			display: none;
		}


	/* publish */
	#publish-box-title {
		background-size: 100% 100%;
	}

	#publish-box .panel{
		min-height: auto !important;
	}

		#publish-box .panel p {
			display: none;
		}

		#publish-box .panel h4 {
			font-size: 30px;
			text-align: center;
		}

		#publish-box .button{
			width: auto;
			margin: 0 auto;
			padding-left: 15px;
			padding-right: 15px;
		}

	/* footer */	
	#footer {
		text-align: center;
	}

	#footer p {
		font-size: 10px;
	}

	#footer h5 {
		margin: -15px 0 10px 0;
	}
}






/* Between ----------- */
@media only screen and (min-width: 481px) and (max-width: 767px) {

	/* slider */
	div.orbit img.fluid-placeholder {
		height:100%;
	}

		div.orbit .orbit-slide {
			padding: 150px 20px 0 20px;
		}

		div.orbit .orbit-slide h3 {
			font-size: 30px;
			color: #23588e;
		}

		div.orbit .orbit-slide p {
			font-size: 13px;
			color: #000;
		}

			div.orbit .orbit-slide h3,
			div.orbit .orbit-slide p {
				margin:0 0 0 0;
				padding: 10px 0;
				background: #fff;
				opacity: .85;
			}


			div.orbit .slide-01,
			div.orbit .slide-02,
			div.orbit .slide-03 {
				background-size: 100%;
				background-position: bottom left;
			}

		.slider-shadow-one,
		.slider-shadow-two {
			top: 130px;
			width: 100%;
		}

	/* questions */
	#form-questions,
	.row{
		width: auto;
		min-width: 0;
		margin-left: 20px;
		margin-right: 20px;
	}

}






/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 945px) {
	
	/* questions */
	#form-questions,
	.row{
		width: auto;
		min-width: 0;
		margin-left: 20px;
		margin-right: 20px;
	}

	/* publish */
	#publish-box .button{
		width: auto;
		display: block;
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 16px;
	}
}