@charset "utf-8";
/* CSS Document */

body {
	font: 0.9em/150% Arial, Helvetica, sans-serif;
	background-image: url(none);
	background-position: 50% 0%; 
	background-repeat: no-repeat; 
	-moz-background-size: cover; 
	-webkit-background-size: cover; 
	background-size: cover;
	background-color: #FFFF;
	display: block;
	width: auto;
	height: auto;
	max-height: 900px;
	min-height: 700px;
	margin: 0;
	} 
a {
	color: #60F;
	text-decoration: none;
	}
a:link {
	color: #fff;
	}
a:visited {
	color: #fff;
	}
a:hover {
	text-decoration: none;
	}
h1 {
	font: bold 25px/100% Arial, Helvetica, sans-serif;
	}
h5 {
	font:  14px/100% Arial, Helvetica, sans-serif;
	color: #ff974b;
}
img{
	width: 100%;
	height: auto;
	vertical-align: top;
	}
	
/* #banner {
	margin-bottom: 15px !important; */
}
/*#pagewrap, #header, #logo, #slogan, #menu, #banner, #content, #footer, #footer-left, #footer-right {
	border: solid 1px Red !important;
}*/
/* border & guideline (you can ignore these) */
#menu, #banner, #sidebar, #content  {
	background: none;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 !important;
	}
#header {
	display: block;
	}
.logo {
	display: none; /* Oculto */
	width: auto;
	height: auto;
	}
#slogan {
	}
#menu {
	width: 100%;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
	}
#button-1 {
	width: 33%;
	background-color:#3b5998;
}
#button-2 {
	width: 33%;
	background-color:#1663a8;
	}
#button-3 {
	width: 33%;
	background-color:#eee;
	}
#contacto {
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height: 100px;
	background-color:#6bb32d;
	color: #fff;
	}
a:hover .contacto {
	color: #FFF;
	text-decoration: none;
	padding-left: 20px;
	}
a:link .contacto {
    transition: 0.4s;
	}
.buttons-header {
	margin: 0;
 	padding: 10px;
	text-align: center;
	}
a:hover .buttons-header {
	color: #FFF;
	text-decoration: none;
	padding-left: 20px;
	}
a:link .buttons-header {
    transition: 0.4s;
	}
.buttons-header img {
	width: 200px;
	height: auto;
	}
#banner {
	display: flex;
	width: 720px;
	height: 90px;
	margin-left: auto;
	margin-right: auto;
	background-color:#fff;
    align-items: center;
	justify-content: center;
	color: #68b527;
	}
#content {
    width: 100%;
    height: auto;
    background-color: #e7711b;
	}
#gallery {
	background: #6bb32d;
	}
#footer {
	display: flex;
    flex-flow: wrap;
    width: 100%;
    height: auto;
	margin: 0;
    justify-content: space-between;
	text-align: center;
	color: #ffdcc3;
    background-color: #e7711b;
	}
#footer-right {
	width: 40%;
	height: auto;
	padding: 20px;
	}
#footer-left {
	width: 40%;
	height: auto;
	padding: 20px;
	}
.bottom {
    display: block;
    padding: 20px;
    color: #ffdcc3;
    text-align: center;
    background-color: #dc630a;
	}
.logos {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
	color: #ffdcc3;
	}
.logos img {
    width: 135px;
    height: auto;
    margin: 10px 20px;
	}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	#sidebar {
		width: 43%;
		height: auto;
		float: right;
		text-align: center;
		margin: 0;
		margin-top: 145px;
	}
	#logo {
		width: auto;
		height: auto;
		left: 0;
		margin-right:15px;
		position: absolute;
	}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
	h1 {
		font-size: 18px;
	}
	#content {
		width: auto;
		height: auto;
		float: none;
	}
	#menu {
		flex-flow: column;
	}
	.buttons-header {
		padding: 5px;
	}
	.buttons-header img {
		width: 110px;
	}
	#button-1, #button-2, #button-3  {
		width: 100%;
	}
	#contacto {
    height: 55px;
	}
	#footer-right, #footer-left  {
		width: 100%;
	}
	#sidebar {
		margin-left: auto;
		margin-right: auto;
		width: 70%;
		height: auto;
		float: none;
		margin-top: 0px;
	}
	#slogan {
	}
	#banner {
		width: 100%;
		margin-left:auto;
		margin-right:auto;
	}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
	body {
		font: 0.8em/150% Arial, Helvetica, sans-serif;
		margin: 0;
	}
}