.row-pie {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -20px;
}
.row:last-child {
  margin-bottom: 0;
}
[class*="colpie-"] {
  padding: 0 20px 20px 20px;
  width: 100%;
}

@media all and ( min-width: 600px ) {

  /* set col widths */
  .colpie-2-3 {
    width: 66.66%;
  }
  .colpie-100 {
    width: 100%; clear:both;
  }
  .colpie-1-2 {
    width: 50%;
  }
  .colpie-1-3 {
    width: 33.33%;
  }
  .colpie-1-4 {
    width: 25%;
  }
  .colpie-1-8 {
    width: 12.5%;
  }
  .colpie-7-8 {
    width: 87.5%;
  }

}

.primeralinea		{ position:relative; padding:30px 0; border-top:0px solid #738693; overflow:hidden}
.segundalinea		{ position:relative; display:; padding:40px 0; border-top:1px solid #738693; overflow:hidden}
.terceralinea		{ position:relative; display:; padding:30px 0; border-top:1px solid #738693; overflow:hidden}

.botonerapie		{ position:relative; z-index:1; margin-top:20px;}
.botonerapie		{ padding:5px 0 0 0;}
.botonerapie		{ clear:both; text-align:left; overflow:hidden}
.botonpie			{ display:inline-block; margin:0 0 5px 0; padding:7px 13px; text-align:center; text-decoration:none; font-size:90%; line-height:1.5em; background:#000;}
.botonpie			{ border-radius:5px; border:1px solid #666; color:#999;}
.botonpie:hover		{ border:none; border:1px solid #999; color:#000; background:#999; transition: 0.3s;}





.separadorpie	{ clear:both; border-bottom: 1px solid #f6f7f8; padding:10px 0 0 0; margin: 0 0px 20px 0;}
.cajapie1		{ position:relative; z-index:1; display:block; clear:both; font-size:95%; overflow:hidden}
.cajapie2		{ position:relative; z-index:1; display:block; clear:both; font-size:95%; overflow:hidden}
.izquierdapie	{ display:inline-block; float:left; padding:5px 7px 5px 0; overflow:hidden;}
.derechapie		{ display:inline-block; float:right; padding:5px 0 5px 0; overflow:hidden;}
.bajopie		{ clear:both; padding:0 0 0 0; margin: 0 0px 0px 0;}

.titulospie		{ font-family: 'Francois One', sans-serif; color:#fff; text-transform:uppercase; font-size:105%;}
.lineacorta		{ border-bottom:1px solid #fff; margin:0 0 20px 0; padding:0 0 15px 0; max-width:40px; overflow:hidden}

#logofafar		{ position:relative; display:inline-block; float:left; width:50px; height:50px; margin: 0 10px 0 0; border-radius:100%; overflow:hidden}
.logofafar		{ background: url(../../images/logos/fafar.png) no-repeat 0 0; background-size:cover; background-position:center center}

#marcapie		{ display:block; float:auto; width:150px; line-height:1.7em; overflow:hidden}
.marcafafar		{ font-family: 'Oswald', sans-serif; font-size:125%; color:#f3f3f3; text-decoration:none; margin:5px 0;}
.marcaus		{ font-family: 'Roboto', sans-serif; color:#f3f3f3; text-decoration:none; margin:5px 0 0 0;}

.textospie		{ display:inline-block; float:auto; color:#ddd; line-height:1.5em; margin:0 7px 0 0; text-decoration:none; }
.textospie a	{ color:#999; text-decoration:none}
.link			{ text-decoration:none; white-space:nowrap;}
.link a			{ color:#999; text-decoration:none}
.link:hover		{ color:#f3f3f3; border-bottom:1px dotted #f3f3f3; text-decoration:none}
.copyleft:before{ content:"\f08a"; font-family: FontAwesome; margin:0 5px 0 0}	
.copyleft:after	{ content:"EquipoWeb"}
.copyleft a		{ color:#666; text-decoration:none}
.copyleft:hover	{ color:#f3f3f3; border-bottom:1px dotted #f3f3f3; text-decoration:none}
.code:hover		{ color:#f3f3f3; border-bottom:1px dotted #f3f3f3; text-decoration:none}
.lineapie		{ display:none; clear:both; border-bottom: 1px solid #ddd; padding:20px 0 0 0; margin: 0 0px 20px 0;}

.socialpie		{ padding:10px 10px 10px 15px; font-size:130%; color:#f3f3f3; text-align:center;}
.socialpie:hover{ background:#3b5998; color:#fff; border-radius:5px;}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
@media only screen and (min-width: 1900px) {


}
/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {


}
/* for 980px or less */
@media screen and (max-width: 980px) {



}
/* for 700px or less */
@media screen and (max-width: 768px) {



}
/* for 480px or less */
@media screen and (max-width: 480px) {
.izquierdapie	{ display:block; clear:both; float:auto; padding:5px 0 25px 0; line-height:1.2em; border:none}
.derechapie		{ display:block; clear:both; float:none; text-align:center; margin:0; padding:15px 0 0 0; border-top:1px solid #667b8a}
.bajopie		{ clear:both; padding:0 0 0 0; margin: 0 0px 0px 0;}
.lineapie		{ display:block;}
.copyleft		{ float:auto; text-align:center; margin:0 auto}
.link:hover		{ border:none; text-decoration:none}
.textospie		{ display:block; float:left; line-height:1.5em; margin:0 -1px 7px 0; padding:1px 10px; border-left:1px solid #666; border-right:1px solid #666;}
.pie			{ text-align:center}
}