/*------------------------------------*\
    $RESET
\*------------------------------------*/
/* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
/* nota AlE : box-sizing hace que padding y border no sumen al width */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, nav ul, nav li, form, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0;
}


h2 { /* ALE */
	font-size: 1.2em;
	margin-bottom: 0.7em;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0.2em;
}
/*------------------------------------*\
    $GLOBAL ELEMENTS
\*------------------------------------*/
/*------------------------------------*\
    $GLOBAL CLASSES
\*------------------------------------*/
/* Clearfix */

/* ALE ********** REVISAR ESTOOOOOO**********/
.cf, .l-two-col, [role=main] {
  *zoom: 1;
}

.cf:before, .l-two-col:before, [role=main]:before, .cf:after, .l-two-col:after, [role=main]:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after, .l-two-col:after, [role=main]:after {
  clear: both;
}
/* ----------- */

/* Floats */
.right {
  float: right;
  padding: 0 0 1rem 1rem;
}

.right-search {
  float: right;
  padding: 0 0 1rem 0;
}

.left {
  float: left;
  padding: 0 1rem 1rem 0;
}

/* Text-Align */
.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}
/* -------*/
html, body {
        width: 100%;
        height: 100%;  
        /* margin: 0;
        padding: 0; */
      }
body {
	background: white;
	font: 96%/1.5 "Arial", "HelveticaNeue", "Helvetica",  sans-serif;
	-webkit-text-size-adjust: 90%;
	color: #333333;
	
	font-weight: 300;
	/* background-image: url('../../images/unsplash-img-1.jpg'); */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #FFF; /*  0095b7   */
	box-sizing: border-box;

        /* ALE:   overflow: hidden;   lo saque xq no muestra scrol vertical */
      }
/* Links */
a {
  /* color: #333333; */
  text-decoration: none;
  outline: 0;
}
a:hover, a:focus {
  color: gray;
  text-decoration: underline;
}

/* Headings */
/*Further Reading: http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ */
h1, h2, h3 {
	line-height: 1.2;
}

/* Text-Related Elements */
p {
	margin-bottom: 1em;
}


/* Horizontal Rule */
hr {   height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}

abbr {
  border-bottom: 1px dotted gray;
  cursor: help;
}
/* ALE  cambio esto x el que sigue
ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
*/

/*------------------------------------*\
    $MEDIA ELEMENTS
\*------------------------------------*/
/* Flexible Media */
img, video, object {
  max-width: 100%;
  height: auto;
}

iframe {
  margin-bottom: 1rem;
}

figure {
  margin-bottom: 1rem;
}
figure img {
  margin-bottom: 0.25rem;
}

figcaption {
  font-style: italic;
}

/*------------------------------------*\
    $FORMS
\*------------------------------------*/
/*
form > div {
  margin-bottom: 1rem;
}

form ol, form ul {
  list-style: none;
  margin-left: 0;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

label {
  display: block;
  padding-bottom: 0.25rem;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

input, textarea {
  width: 100%;
  border: 1px solid gray;
  padding: 0.5rem 0.65rem;
}

input[type=text], input[type=search], input[type=url], input[type=number], textarea {
  -webkit-appearance: none;
}

button, input[type="submit"] {
  padding: 0.5rem;
  background: #333333;
  border: 1px solid gray;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.3em;
}

input[type="search"] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
*/

/*------------------------------------*\
    $Table
\*------------------------------------*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid gray;
  width: 100%;
}

th {
  text-align: left;
  border: 1px solid gray;
  padding: 0.2em;
}

td {
  border: 1px solid gray;
  padding: 0.2em;
}



/*------------------------------------*\
    $LAYOUT
\*------------------------------------*/
/* Layout Container */
.lc, .header, [role=main] {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem;
}

/*------------------------------------*\
    $PAGE STRUCTURE
\*------------------------------------*/
.header {
  background: white;
  padding: 0;
  border-bottom: 1px solid #dbdbdb;
}

.logo {
  float: left;
  max-width: 8rem;
  margin: 0.4rem;
}
@media all and (min-width: 46.8em) {
  .logo {
    max-width: 9rem;
  }
}

/*------------------------------------*\
    $NAVIGATION
\*------------------------------------*/
.nav {
  clear: both;
  overflow: hidden;
  max-height: 0;
}
.nav a {
  display: block;
  padding: 1rem;
  border-top: 1px solid #eeeeee;
}
.nav.active {
  max-height: 40em;
}
@media all and (min-width: 46.8em) {
  .nav {
    max-height: none;
    float: right;
    clear: none;
  }
  .nav li {
    float: left;
  }
  .nav a {
    border: 0;
  }
}

/*------------------------------------*\
    $MAIN CONTENT AREA
\*------------------------------------*/
[role=main] {
  padding: 0.5rem 0.5rem 2rem;
  overflow: hidden;
}



/*------------------------------------*\
    NAV DRAWER
\*------------------------------------*/
/* ALE  */	  
.app-bar-caja { /* dentro de app-bar */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
   /* ALE  height: 60px; */
  position: relative;
        background-color: #3367D6 ; /* ALE  */
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0 auto;
}
/* ---- */
.app-bar {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	width: 100%;
	height: 60px;

	background-color: #3367D6 ; /* ALE  */
	
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;

	position: fixed;

	top: 0;
	left: 0;

	z-index:2;
  }
.app-bar.open {
	-webkit-transform: translate(210px,0);
	transform: translate(210px,0);
  }
.app-bar .app-bar-caja .logo { /*  ALE   .app-bar  .logo      */
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	/* font-size: 28px; ALE 20 */
	/* line-height: 60px; */
	margin: 0 0 0 100px;
	color: #fefefe;
	float: none;
	max-width: none;
      }
.app-bar-actions  {/* search, etc */
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	display: none ; /* Ale hasta que este el SEARCH    */
  }
.app-bar button { /*	  ALE , .bottom-bar button   */
	width: 44px;
	height: 44px;
	
	background-image: none;
	background-color: transparent;
	
	border-style: solid;
	border-radius: 10%; /* Ale 100 */
	border-color: rgb(254, 254, 254);

	padding: 8px;
	margin: 8px;

	-webkit-transition: border 300ms ease-in,background 300ms ease-in;
	transition: border 300ms ease-in,background 300ms ease-in;

	-webkit-tap-highlight-color: transparent;
  }
.app-bar button img {
	width: 28px;
	height: 28px;
  }
.app-bar button.menu {
	position: relative;
  }
.app-bar button.menu img {
	position: absolute;

	top: 7px;
	left: 6px; /* Ale 7 */
  }
.app-bar button.menu .menu-icon {	opacity: 1.0;  }
.app-bar button.menu .close-icon {	opacity: 0.0;  }
.app-bar.open button.menu .menu-icon {	opacity: 0.0;  }
.app-bar.open button.menu .close-icon {	opacity: 1.0;  }
.app-bar button:hover { /*	  ALE , .bottom-bar button:hover */
	border-color: transparent;
	background-color: rgba(254, 254, 254, 0.4);
  }
.app-bar button:focus { /*	  ALE  , .bottom-bar button:focus  */
	border-color: transparent;
	outline: 0;
	background-color: rgba(254, 254, 254, 0.4);
  }
.app-bar button:active { /*	  ALE  , .bottom-bar button:active */
	border-color: transparent;
	background-color: rgba(254, 254, 254, 0.6);
  }
.app-bar, .navdrawer-container {
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
  }
.search {
	display: none;
	
	width: 400px;
	height: 60px;
	
	padding: 16px;
	margin: 0;
	
	box-sizing: border-box;
	
	border: none;
  }
/*	  ALE 
.bottom-bar {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	width: 100%;
	height: 60px;

	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;

	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;

	position: fixed;

	bottom: 0;
	left: 0;

	background-color: rgba(0,0,0,0.6);
  }
*/
.sublogo {
  display:none ;
}
.pie {
	padding: 5px;
	font-size: 0.9em ;
	float: none;
	clear: both;
	text-align: center;
	background-color: #F0F0F0;
	font-size: .9em;
}

.logo h1 { /*  ALE   .app-bar  .logo      */
	font-size: 1.5em; /* ALE 20  28 px*/
	line-height: 60px;
	margin: 0 16px;
	color: #fefefe;
	float: none;
	max-width: none;
	font-weight: normal;
      }	  
.logo a  {
	text-decoration: none;
	color: inherit;
	font-weight: normal;
  }





/* ALE */
.principal {
	/* float: left ; 
	width: 100% ;*/  
	margin: 0 ; /* top 0 o problema con menu */
	/* background-color: #FF9 ; */ 
}
.empty { /* capa debajo de la barra, evita prob c menu */
	height: 60px ; /* = alto barra  */
	width: 100% ; 
	float: none ; 
	margin: 0 ; /* top 0 o problema con menu */
	/* background-color: 	red ; */ 
}
.col-derecha {
	width: 100%;
	margin: 3px 0px;
	padding: 4px;
	/* float: right ; */
	height: 60px; /* 50 es alto de ads */
	background-color: #EFEFEF;
	}
.main-content  {
	/* width se ajusta */
	margin: 0 ; 
	padding:  5px 10px ;
	/* background-color: 	orange ; */
}
.ad-abajo {
	height: 300px ; /* ad cuad 336x280 ad-abajo*/
	margin: 0 ; 
	padding:  5px 10px ;
	text-align: center ;
	background-color: #EFEFEF;
} 
@media all and (min-width: 650px) {
/* ALE */
.principal {
}
.col-derecha {
	text-align: center ;
	width: 130px ; 
	height: 650px  ;
	margin: 3px 0 0 0;
	float: right ;
	}
.main-content, .ad-abajo {
	margin: 3px 133px 0 0 ;
}
}
@media all and (min-width: 950px) {

body {
	  max-width: 1200px ;
	  margin: auto ; 
	}
/* ALE */
.principal {	
/*display: inline-block ;
	float: left ;*/
	margin: 0 0 0 213px;
}
.col-derecha {
	width: 170px ; 
	margin: 0 ;
}
.empty { /* entre arriba y main / ad */
	height: 2px ; 
}
.main-content, .ad-abajo {	
	margin: 0  173px 0 0 ;
}

.sublogo {
  display: inline ;
  float: left ;
}

.logo h1 { /*  ALE  SOLO SE VEN en sc ancha */   
	line-height: 20px;		
	padding: 30px 0px 0px 0px;
	
  }
.sublogo {                         
	font-size: 1.2em; 
	line-height: 50px;	
	padding: 0px 0px 20px 0px;
	
	margin: 20px 16px;
	color: #fefefe;
	float: none;
	max-width: none;
	font-weight: normal;
      }
/* -----*/
.app-bar-actions {
	  display: none ; /* Ale hasta que este el SEARCH    */
	  float: right;
	  
	  margin: 35px 0;
	}	
.search {
	  display: none; /* Ale temp no muestro searsh   display: block;    */
	  
	  
	  padding-left: 16px;
	}
	
button.menu {
	  display: none;
	}
/*	  ALE 
.bottom-bar {
	  display: -ms-inline-flexbox;
	  display: -webkit-inline-flex;
	  display: inline-flex;
	  
	  width: auto;
	  height: auto;

	  -ms-flex-direction: column;
	  -webkit-flex-direction: column;
	  flex-direction: column;

	  position: initial;

	  float: left;

	  margin-top: 16px;

	  background-color: rgba(0,0,0,0.6);
	}
*/	
/*------------------------------------*\
    APP BAR ( barra de arriba )
\*------------------------------------*/
.app-bar {
	  display: block;	 
	/* ALE position: initial;  */
	  position: static; /* inicial no anda IE */
	  
	  height: auto;	  
	  padding: 0;
	  margin-bottom: 0px;
	  box-sizing: border-box;
	  background-color: transparent;

	  -webkit-transform: translate(0,0);
	  transform: translate(0,0);

	  -webkit-transition: none;
	  transition: none;
	}
.app-bar.open {
	  -webkit-transform: translate(0,0);
	  transform: translate(0,0);
	}
.app-bar .logo {
	float: left;
	margin: 0;
	/* font-size: 100px;
	line-height: 130px;*/ 
	}
.app-bar:after {
	  content: ' ';
	  
	  display:block;
	  height: 0;
	  overflow: hidden;
	  
	  clear: both;
	}
}

/**************************************************/