@import url('body.css');
@import url('content.css');

/**/
#container{ width:100%; margin-right: auto; margin-left: auto; text-align: left;}
#content{ float:left; width:100%;}
#top{float:left; width:100%; padding:10px 0px; margin-bottom:30px; }
#top { margin:auto; display:block; width: 100%; color: #ffffff;}
#top h1 { margin:auto; display:block; font-weight: 100; font-size: 36px; }
#nav{float:left; width:100%;  background-color:#4E4546;}

body { overflow-x:hidden; }
.celu {display: none;}
.nocelu {display: block;}
/**/

@media only screen and (max-width: 780px) {
	#top .logo img { width: 100%;}
}

/**/
.center{ max-width: 1200px; width:100%; margin-right: auto; margin-left: auto; }
.center2{ max-width: 800px; width:100%; margin-right: auto; margin-left: auto; }

.center_divs {
	float:left;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
	    justify-content: space-evenly;
		
}
.center_divs .item {
	 width:25%;
	
}


.center_divs .card {
	 width:30%;
	 background: #fff;
     border-radius: 0px 0px 20px 20px;
}

@media only screen and (max-width: 1234px) {
	.center{ width:96%; padding:0% 3%;  }	
	.center2{ width:96%; padding:0% 3%;  }	
	.celu {display: block;}
	.nocelu {display: none;}
}

/*CONTENT*/
.module_1{float:left;  width:100%; padding:40px 0px; background-color: #2B3031; }
.module_2{float:left; width:100%; background-color: #E22417; padding:70px 0px 40px 0px; color: #fff;}
.module_2 h1 {color: #fff; font-size: 58px; margin-bottom: 15px;}
.module_2 h2 {color: #fff; font-size: 58px; margin-bottom: 15px;}

.module_3{
	float:left;
	width:100%;
	background: #fff;
	 padding:70px 0px;
	}
.module_3 h1 {color: #E22417; font-size: 58px; margin-bottom: 15px;}
.module_3 h2 {color: #E22417; font-size: 58px; margin-bottom: 15px;}

.module_4{float:left;  width:100%;  padding:30px 0px; background-color: #eeeeee;  }
.module_5{float:left;  width:100%;  padding:40px 0px;  background-color: #eeeeee; }
.module_5 .title { color:#fff;}
.module_6{float:left;  width:100%;  height: auto;background-image: url(../img/slide-pie.jpg); height: 400px; background-size: cover; }

.rojo {color:#000;}
.rojo2 {color:#E22417;}
.animar .rojo {color:#000; animation-name: rojardi; animation-duration: 2s; animation-fill-mode: both;}

@keyframes rojardi {
  from {color:#000}
  to {color:#E22417}
}

.links {
    color: #00AAE2;
	text-decoration: none;
}
.links:hover {
    color: #00AAE2;
	text-decoration: underline;
}
.flota {bottom: 150px; position: relative;}

@media screen and (max-width: 780px) {
	.module_2{padding:30px 0px;}
	.module_2 h1 {font-size: 40px;}
	.module_2 h2 {font-size: 40px;}
	.module_3{ padding:30px 0px;}
	.module_3 h1 {font-size: 40px;}
	.module_3 h2 {font-size: 40px;}
	.module_6{
		height: 140px;
    background-position: 25%;
    background-size: cover;
    background-size: 100% 140px;
    background-repeat: no-repeat;
	}

}

/*TOP*/
.logo{float:left; width:100%;}
.logo a { display: block; text-indent: -100px; overflow: hidden;}
.top_box1{float:left;  width:100%;}
.top_box2{float:left; width:100%;}


/*FOOTER*/
#foooter{ display:table;}
.footer_box{float:none;  width:20%; display: table-cell; vertical-align: top;}
.footer_box1{float:left;  width:100%;}
.footer_box2{float:left;  width:100%;}
.footer_box3{float:left;  width:100%;}
.footer_box4{float:left;  width:100%;}
.footer_box .title{ font-size:14px; margin-bottom:15px;}

@media screen and (max-width: 780px) {
.footer_box{float:left;  width:100%; margin-bottom:25px;}
}

.title{ 
float:left; width:100%; padding:0px 0px;
    font-size: 28px;
    width: 100%;
    letter-spacing: -1px;
	color:#2B9D93;

}

.title2{ 
	float: left;
	width: 100%;
	font-size: 20px;
	letter-spacing: -1px;
	color: #fff;
	margin-top: 30px;
    padding-left: 10px;
}

@media screen and (max-width: 780px) {
	.title{
	font-size: 23px;
    letter-spacing: -2px;
	}
	.title2{
	margin-top: 0px;
	}
}



/**/
.item { text-align:center;}
.icono {
	 width: 45%;
	 height:auto;
}
.icono2 {  width: 100%;	 height:auto;}


.caption {
    display: block;
    padding-top: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
	color:#666;
}

.buttom_1 {
	
    text-decoration: none;
    background-color: #0062cc;
    border-color: #005cbf;
    width: 400px;
    padding: 15px;
    text-align: center;
    color: #fff;
    text-align: center;
    display: block;
    margin: 20px auto;
    font-size: 20px;
    border-radius: 10px;

}
/* /////////   GRALS  //////// */


.subtitle{float:left; width:100%;}
.data{float:left; width:100%;}
.data2{width:75%;}
.lineagris{border-bottom:2px solid #ccc; padding-bottom:20px;}

@media screen and (max-width: 780px) {
	.data{  margin-top: 1px;}
	.data2{  margin-top: 1px;}
}

/* //////////   MENUS  //////// */

/*MENU VERTICAL*/
#menuv { }
#menuv ul, li { list-style-type: none; }
#menuv ul { margin: 0; padding: 0; }
#menuv li { border-bottom: 1px solid #ACCFE8; }
#menuv a { text-decoration: none; color: #000; display: block; padding: 3px 6px; width: 148px; }
#menuv a:hover { background: #DBEBF6; }


/*MENU HORIZONTAL*/
#menuh { }
#menuh ul, li { list-style-type: none; }
#menuh ul { margin: 0; padding: 0; }
#menuh li { float: left; }
#menuh a { text-decoration: none; color: #000; display: block; padding: 3px 10px; text-align: center; }
#menuh a#primero { border-left: 1px solid #ACCFE8; }
#menuh a:hover { background: #DBEBF6; }


/*MENU CENTRADO*/
#menuc { }
#menuc ul { list-style-type: none; margin: 0 auto; padding: 0; text-align: center; }
#menuc li { display: inline; padding: 5px; margin: 1px; }
#menuc a { }
#menuc a:hover { background: #DBEBF6; }

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    cursor: pointer;
    padding: 8px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-bottom: #E22417 2px solid;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
	padding: 0 8px;
    display: none;
    overflow: hidden;
    font-size: 16px;
}