@font-face {
  font-family: 'FuturaMedium';
  src: url('fonts/FMedium.eot'); /* IE9 Compat Modes */
  src: url('fonts/FMedium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/FMedium.woff') format('woff'), /* Modern Browsers */
       url('fonts/FMedium.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/FMedium.svg#svg') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'FuturaBold';
  src: url('fonts/FBold.eot'); /* IE9 Compat Modes */
  src: url('fonts/FBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/FBold.woff') format('woff'), /* Modern Browsers */
       url('fonts/FBold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/FBold.svg#svg') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}

body
{
	background-color: #FFF;
	color: #EEE;
	font-family: Arial;
	font-size: 16px;
	text-align: center;
	min-height: 100%;
	overflow: hidden;
}

p 
{
	margin: 0;
}

/* Start of Column CSS */
#containercol2 {
	background:#790012; /* Column 2*/
	clear:left;
	float:left;
	height: 100%;
	overflow:hidden;
	width:100%;
}

#containercol1 {
	background:#ca001c; /* Column 1*/
	float:left;
	height: 100%;
	position:relative;
	right:50%;
	width:100%;
}

#col1 {
	float:left;
	left:52%;
	overflow:hidden;
	padding: 3em 0;
	position:relative;
	transition: all 0.5s ease;
	width:46%;	
}

#col2 {
	float:left;
	left:56%;
	overflow:hidden;
	padding: 3em 0;
	position:relative;
	transition: all 0.5s ease;
	width:46%;
}

#info
{
	text-align: center;
	margin: 1em 0 5em 0;
	padding: 1em 1em 1em 3em;
}

#info hr
{
	background-color: #af4e59;
	border: 0;
	color: #af4e59;
	height: 3px;
}

#contacto 
{
	margin: 1em 0 5em 0;
	padding: 1em;
	text-align: left;
}

#contacto hr
{
	background-color: #af4e59;
	border: 0;
	color: #af4e59;
	height: 3px;
}

form {
	width: 95%;
	margin:0 auto;
}

label {
	display:block;
	margin: 1.5em 0 0 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

input, textarea {
	width: 95%;
	height: 1.4em;
	border-radius: 5px;
	padding: 0.2em;
	margin: 1.5em 0 0 0;
	font-family: "FuturaMedium", Arial;
	font-size: 1.2em;
	background: #ca001c;
	border: none;
	color: #FFF;
}

input:focus, textarea:focus 
{
	background: #f63039;
	transition: all ease 0.6s;
	color: #FFF;
}

::-webkit-input-placeholder 
{
   color: #FFF;
}

::-moz-placeholder 
{ 
	color: #FFF;
}

input:-ms-input-placeholder 
{ 
	color: #FFF;
}

[placeholder]:focus::-webkit-input-placeholder 
{
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}

textarea {
	height: 6em;
	font-family: "FuturaMedium", Arial;
	font-size: 1.2em;
}

#submit {
	width: 97%;
	height: 3em;
	border:none;
	cursor:pointer;
	color: #FFF;
	background: #40060d;
	transition: all ease 0.8s;
}

#submit:hover 
{
	transition: all ease 0.5s;
	color: #f63039;
	background: #FFF;
}

.twitter-slide {
	background-image: url('/images/twitter-hover.jpg');
	display: block;
	height: 48px;
	width: 48px;
	margin: 0.5em;
	float: right;
	transition: all ease 0.3s;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

}

.twitter-slide:hover {
	background-position: 0px -48px;
	/*box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);*/
}

.logo
{
	padding: 1em 0 1.5em 0;
	transition: all 0.5s ease-in-out;
}

.Fmedium 
{
	font-family: "FuturaMedium", Arial;
	font-size: 2em;
	color: #FFF;
	transition: all ease 0.5s;
}

.Fbold
{
	font-family: "FuturaBold", Arial;
	font-size: 1.5em;
	text-transform: uppercase;
	transition: all ease 0.5s;
	color: #FFF;
}

.Fbold_left
{
	font-family: "FuturaBold", Arial;
	font-size: 1.5em;
	text-transform: uppercase;
	text-align: left;
	transition: all ease 0.5s;
	color: #FFF;
}

.telefonos
{
	font-family: "FuturaBold", Arial;
	font-size: 1em;
	color: #f97783;
	transition: all ease 0.5s;
}
.telefonos a
{
	color: #f97783;
	text-decoration: none;
}
.respuesta
{
	font-family: "FuturaBold", Arial;
	text-align: center;
	font-size: 1.1em;
	color: #FFF;
	margin: 0.8em 0;
	padding: 1em;
	display: block;

}

@media screen and (max-width: 480px)
{
	body
{
	overflow: auto;

}
	#container2 {
		background: #ccc;
		clear:left;
}
	#container1 {
		background: #222;
		clear:left;
}
	#col1 {
		background:#ca001c;
		left:50%;
		width:100%;
		clear:left;
		/*margin: 2em 4em 2em -2em;*/
}
	#col2 {	
		background:#790012;
		float:left;
		left:50%;
		overflow:hidden;
		position:relative;
		width:100%;
		clear:left;
}

	#info{

		margin: -2em 0 2em 0;
		padding: 1.2em;
		text-align: left;
}
	#contacto{
		margin: 1em 0 2em 0;
		padding: 1em;
		width: 93%;
}

	.logo {
		text-align: center;
		margin: 0;
}

	.Fmedium {
	font-family: "FuturaMedium", Arial;
	font-size: 1.5em;
	text-align: left;
}

	.Fbold{
	font-family: "FuturaBold", Arial;
	font-size: 1.2em;
	text-transform: uppercase;
}

	.Fbold_left{
	font-family: "FuturaBold", Arial;
	font-size: 1em;
	text-transform: uppercase;
	text-align: left;
}

	.telefonos{
	font-family: "FuturaBold", Arial;
	font-size: 1.3em;
}
}