html,
	body {
		height: 100%;
	}

	body {
		margin: 0px;
		padding: 0px;
		background: #FFF;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 12pt;
		font-weight: 300;
		color: #000000;
	}


	h1,
	h2,
	h3 {
		margin: 0;
		padding: 0;
		color: #8dc63f;
	}

	p,
	ol,
	ul {
		margin-top: 0;
	}

	ol,
	ul {
		padding: 0;
		list-style: none;
	}

	p {
		line-height: 180%;
	}

	strong {
		color: #8dc63f;
	}

	a {
		color: #8dc63f;
	}

	a:hover {
		text-decoration: none;
	}

	.container {
		overflow: hidden;
		margin: 0em auto;
		width: 1200px;
	}

	/*********************************************************************************/
	/* Image Style                                                                   */
	/*********************************************************************************/

	.image {
		display: inline-block;
	}

	.image img {
		display: block;
		width: 100%;
	}

	.image-full {
		display: block;
		width: 100%;
		margin: 0;
	}

	.image-left {
		float: left;
		margin: 0 2em 2em 0;
	}

	.image-centered {
		display: block;
		margin: 0 0 2em 0;
	}

	.image-centered img {
		margin: 0 auto;
		width: auto;
	}

	/*********************************************************************************/
	/* List Styles                                                                   */
	/*********************************************************************************/

	ul.style1 {}


	/*********************************************************************************/
	/* Social Icon Styles                                                            */
	/*********************************************************************************/

	ul.contact {
		margin: 0;
		padding: 2em 0em 0em 0em;
		list-style: none;
	}

	ul.contact li {
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1em;
	}

	ul.contact li span {
		display: none;
		margin: 0;
		padding: 0;
	}

	ul.contact li a {
		color: #FFF;
	}

	ul.contact li a:before {
		display: inline-block;
		background: #3f3f3f;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #FFFFFF;
	}

	ul.contact li a.icon-twitter:before {
		background: #2DAAE4;
	}

	ul.contact li a.icon-facebook:before {
		background: #39599F;
	}

	ul.contact li a.icon-dribbble:before {
		background: #C4376B;
	}

	ul.contact li a.icon-tumblr:before {
		background: #31516A;
	}

	ul.contact li a.icon-rss:before {
		background: #F2600B;
	}

	/*********************************************************************************/
	/* Button Style                                                                  */
	/*********************************************************************************/

	.button {
		display: inline-block;
		margin-top: 2em;
		padding: 1em 2em 1em 2em;
		background: #8dc63f;
		letter-spacing: 0.20em;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 0.90em;
		color: #FFF;
	}

	.button:before {}

	/*********************************************************************************/
	/* 3-column                                                                      */
	/*********************************************************************************/

	.boxA,
	.boxB,
	.boxC {
		width: 384px;
		text-align: center;
	}

	.boxA h2,
	.boxB h2,
	.boxC h2 {
		margin-bottom: 1em;
		font-weight: 600;
		font-size: 1.6em;
	}

	.boxA p,
	.boxB p,
	.boxC p {
		padding: 0em 1.5em;
	}

	.boxA,
	.boxB {
		float: left;
		margin-right: 20px;
	}

	.boxC {
		float: right;
	}

	/*********************************************************************************/
	/* Header                                                                        */
	/*********************************************************************************/

	#header {
		position: relative;
		padding: 5em 0em;
	}

	/*********************************************************************************/
	/* Logo                                                                          */
	/*********************************************************************************/

	#logo {
		position: absolute;
		top: 4em;
		left: 0;
	}

	#logo h1 {}

	#logo a {
		text-decoration: none;
		color: #8dc63f;
	}

	/*********************************************************************************/
	/* Menu                                                                          */
	/*********************************************************************************/

	#menu {
		position: absolute;
		top: 5em;
		right: 0;
	}

	#menu ul {
		display: inline-block;
	}

	#menu li {
		display: block;
		float: left;
		text-align: center;
	}

	#menu li:before {
		content: "//";
		padding: 1em 1.5em;
		font-weight: 700;
		color: rgba(0, 0, 0, .6);
	}

	#menu li a,
	#menu li span {
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1em;
		color: rgba(0, 0, 0, .4);
	}

	#menu li:hover a,
	#menu li.active a,
	#menu li.active span {
		color: rgba(0, 0, 0, .6);
	}

	#menu .current_page_item a {
		color: rgba(0, 0, 0, .8);
	}

	#menu .icon {}

	/*********************************************************************************/
	/* Banner  que el coche pase de izquierda a derecha por la carretera                                                                      */
	/*********************************************************************************/

	#banner {
		overflow: hidden;
		padding: 15em 0em;
		background: url(images/banner.jpg) no-repeat center;
		background-size: cover;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		position: relative;
		/*  posición relativa para mover la imagen del coche */
	}

	#coche-image {
		/*posicionamiento, altura */
		position: absolute;
		top: 80%;
		/* altura vertical del coche */
		animation: cruzarBanner 4s linear infinite;
		/* Animación para cruzar el banner */
	}

	@keyframes cruzarBanner {

		/*donde empieza y donde termina*/
		0% {
			left: -100%;
		}

		100% {
			left: 100%;
			/* Llega hasta el final */
		}
	}

	/*********************************************************************************/
	/* Page                                                                          */
	/*********************************************************************************/

	#page {
		position: relative;
		overflow: hidden;
		padding: 8em 0em;
	}

	/*********************************************************************************/
	/* Content                                                                       */
	/*********************************************************************************/

	#content {}

	/*********************************************************************************/
	/* Sidebar                                                                       */
	/*********************************************************************************/

	#sidebar {}

	/*********************************************************************************/
	/* Footer                                                                        */
	/*********************************************************************************/

	#footer {}

	/*********************************************************************************/
	/* Copyright                                                                     */
	/*********************************************************************************/

	#copyright {
		overflow: hidden;
		padding: 5em 0em;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	#copyright p {
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: rgba(0, 0, 0, 0.6);
	}

	#copyright a {
		text-decoration: none;
		color: rgba(0, 0, 0, 1);
	}

	/*********************************************************************************/
	/* Featured                                                                      */
	/*********************************************************************************/

	#featured {
		overflow: hidden;
		padding: 5em 0em;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
	}

	#featured .align-left {
		float: left;
		width: 384px;
		padding-top: 1em;
		text-align: center;
	}

	#featured .fa {
		font-size: 14em;
		color: #8dc63f;
	}

	#featured .align-right {
		float: right;
		width: 792px;
		font-size: 1.4em;
	}

	/***********************box engloba las tres imágenes de debajo del coche*/
    .box{
        margin-bottom: 2em;
        padding-bottom: 2em;
        border-bottom: 1px solid rgba(0,0,0,.1);
        position: relative;
        overflow: hidden;/*evitar desbordamiento*/
    }
    /***********************imagenTermial el la id de las 3 imágenes*/
    #imagenTermial{
        transition: transform 1s; /*rapidez de movimiento */
        position: relative; /
    }
    #imagenTermial:hover {
        transform: rotate(360deg); /* grados que gira */
        position: relative;
        z-index: 1; /* Coloca la imagen en la parte posterior */
    }
/***********************dentro de box esta la etiqueta spam  que esta justo debajo de las imágenes. Cuando gire la imagen spam tendrá que colocarse delante */
    .box span{
        padding: 3em 2em;/*Pra que no asome la imagen por debajo al girar*/
        background: #8dc63f;
        display: block;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.2em;
        color: #FFF;
        position: relative; /* para que la imagen pase por detrás */
        z-index: 2; /*Para que pase la imagen por detrás cuando retorna*/
        transition: background-color 0.9s; /* El color de fondo cambia poco a poco */
        cursor: pointer;/*que salga el dedo del ratón al pasar por encima*/
    }
	/***********************Que cambie de color al poner al pasar el ratón */
    .box span:hover {
        background: #C4376B;
    }
/***********************Todo los botones que cambien de color con transition al pasar el ratón por encima*/
    a.button {
        cursor: pointer;/*que salga el dedo del ratón al pasar por encima*/
        transition: background-color 0.9s; /* El color de fondo cambia poco a poco */
      }
   
      a.button:hover {
        background: #C4376B; /*color del cambio*/
    }