body {
   font: 16px Helvetica;
   background: #999999;
  }

body { background: #eaeaea; font-family: sans-serif;  padding:0; margin:0;}

header {text-transform: uppercase; background: #333333; text-align: center; position: fixed; z-index:99!important; width:100%; top:0px; left: 0px;  }
header a {text-decoration: none; color: white; transition-duration: 1s; font-family: dosis; float:left; display: block; margin-left: 7rem;}

nav {margin-right: 7rem;}
nav ul {
    list-style-type: none;
    overflow: hidden;
}
nav ul li {
    float: right;
}
nav ul li a {
    display: block;
    margin: 0.15rem 0.5rem;
    padding: 0.5rem;
	color: white;
	font-family: biryani;
	font-size:0.47rem;
    text-decoration: none;
}

nav ul li a:hover { color: white;}


nav ul li > ul {
  display: none;
  position: absolute;
  top:5rem;
  width: 4rem;
  background: #333333; 
  text-align:center;
  list-style-type: none;
  overflow: hidden;
}

nav ul li > ul li {float: left;
}

nav ul li > ul li a {
    display: block;
    margin: 0.15rem;
	color: white;
	font-family: biryani;
	font-size:0.47rem;
    text-decoration: none;
	margin-left: -2rem;
}

#page {width: 90%; margin: 0 auto 0 auto;}

  #main {width: 58rem;
      margin: 3rem auto 0 auto;
   padding: 0;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
	  margin:0.5rem;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
   -webkit-order: 2;
           order: 2;
   }

  #main > nav {
   padding: 0.25rem;
   border-radius: 0.5rem;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   padding: 0.3rem;
   border-radius: 0.5rem;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
   
 
footer {font-size:0.5rem; text-transform:uppercase; background: #333333; padding: 1rem 15rem; text-align: center;  font-family: biryani; color: white;} 

::-webkit-scrollbar{ width:0.5rem; }
::-webkit-scrollbar-track{ background: white;}
::-webkit-scrollbar-thumb{ height: 0.3333rem; width:0.5rem; border: 0; background-color: #333333; }

/* Centro */
.centro {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

.centro ul {text-align:left; background:red;}
.centro:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #00ff99;
  height: 2px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.centro:hover:before, .centro:focus:before, .centro:active:before {
  left: 0;
  right: 0;
}

/* CAROUSEL HEADER */

.sp-slideshow {  position: relative; width: 100%; height: 35.3rem;}

.sp-content { background: #fff repeat scroll 0 0;position: relative;width: 100%;height: 100%;overflow: hidden;}

.sp-parallax-bg {
   background: transparent; webkit-background-size: cover;-moz-background-size: cover;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}

.sp-slideshow input {position: absolute;bottom: 15px;left: 50%;width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}

.sp-slideshow input + label { display: none;}

.sp-slideshow input:checked + label { background: #eee; }

.sp-selector-1, .button-label-1 {margin-left: -36px;}
.sp-selector-2, .button-label-2 { margin-left: -18px;}
.sp-selector-4, .button-label-4 {margin-left: 18px;}
.sp-selector-5, .button-label-5 {margin-left: 36px;}

.sp-arrow {position: absolute;top: 50%;width: 1.75rem;height: 2.375rem;margin-top: -1.188rem;display: none;opacity: 0.8;cursor: pointer;z-index: 1000;background: transparent url(http://catedraocampo.com.ar/vn08/tp/img/arrows.png) no-repeat;-webkit-transition: opacity linear 0.3s;-moz-transition: opacity linear 0.3s;-o-transition: opacity linear 0.3s;-ms-transition: opacity linear 0.3s;
transition: opacity linear 0.3s;}

.sp-arrow:hover{opacity: 1;}

.sp-arrow:active{margin-top: -18px;}

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a1 {
   right: 15px;
display: block;
background-position: top right;
}

.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2{
   left: 15px;
display: block;
background-position: top left;
}

.sp-slideshow input:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;}

.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}

input.sp-selector-1:checked ~ .sp-content {background-position: 0 0;background: transparent;}
input.sp-selector-2:checked ~ .sp-content {background-position: -100px 0;background: transparent;}
input.sp-selector-3:checked ~ .sp-content {background-position: -200px 0;background: transparent;}
input.sp-selector-4:checked ~ .sp-content {background-position: -18.75rem 0;background: transparent;}
input.sp-selector-5:checked ~ .sp-content {background-position: -400px 0; background: transparent;}

input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {background-position: 0 0;}

.sp-slider { position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; }

.sp-slider > li {height: 100%;padding: 0 60px;float: left;text-align: center;opacity: 0.4; -webkit-transition: opacity ease-in 0.4s 0.8s;-moz-transition: opacity ease-in 0.4s 0.8s;-o-transition: opacity ease-in 0.4s 0.8s;-ms-transition: opacity ease-in 0.4s 0.8s;transition: opacity ease-in 0.4s 0.8s; }
.sp-slider > li img{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;display: block;margin: 0;}

input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 10%;}
input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -87%;}
input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -180%;}
input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;}
input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}

input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){opacity: 1;}
input.forminput {display: inline-block;}

/* SLIDES */
.slideone { width: 56.25rem; height: 18.75rem; padding:0px; margin-left:-60px;display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;}
.slidetwo { width: 56.25rem; height: 18.75rem; padding:0px; margin-left:-120px;display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;}
.slidethree { width: 56.25rem; height: 18.75rem; padding:0px; margin-left:-120px;display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;}
 
 /* partes */
.presentacion { background: #434a77; margin:0;padding: 5.5rem 0 5rem 0; text-align:left;}
.presentacion h2 {font-family: dosis; color: white; font-size: 3rem; text-shadow: 2px 2px grey; margin-bottom:1rem;}
.presentacion h3 {font-family: dosis; color: white; font-size: 2rem; text-shadow: 2px 2px grey; text-align:left; margin-bottom:1rem;}
.presentacion p {text-align:justify; color: white; text-shadow: 1px 1px grey; font-size: 0.9rem;margin-top:0;}
.lista {text-align:justify; color: white; text-shadow: 1px 1px grey; font-size: 0.9rem;left:3rem; }

.presentacion2 { margin:0; background: #73BF9A;  padding: 2rem 0 0 0;text-align:left;}
.presentacion2 h2 {font-family: dosis; color: white; font-size: 3rem; text-shadow: 2px 2px grey; padding-top:5rem;margin-bottom:1rem;}
.texto {right:5rem;text-align:justify; color: white; text-shadow: 1px 1px grey; font-size: 1.2rem;  }
 
 /* MAIN2 */
  #main2 {width: 58rem;
      margin: 3rem auto 0 auto;
   padding: 0;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main2 > article {
	  margin:0.5rem;
   -webkit-flex: 3 1 50%;
           flex: 3 1 50%;
   -webkit-order: 1;
           order: 1;
   }
   
  aside img {margin:0;}
  #main2 article {color:white; font-family: dosis; font-size:1rem; width:25rem;text-align:justify;}


  #main2 > nav {
   padding: 0.25rem;
   border-radius: 0.5rem;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main2 > aside {
   padding: 0.3rem;
   border-radius: 0.5rem;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 2;
           order: 2;
   }
 
 
  /* Too narrow to support three columns */
  @media all and (max-width: 48rem) {
  #main {padding:1rem;
    -webkit-flex-flow: column;
            flex-flow: column;
   }
#main > aside {margin:auto;}
   #main > article, #main > nav, #main > aside { width: 36rem;
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside {
    /*min-height: 32rem;*/
    max-height: 32rem;
   }
   #main {padding:1rem;
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside {
    /*min-height: 32rem;*/
    max-height: 32rem;
   }
   
   #main2 {padding:1rem;
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main2 > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main2 > nav, #main > aside {
    /*min-height: 32rem;*/
    max-height: 32rem;
   }
   #main2 {padding:1rem;
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main2 > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main2 > nav, #main > aside {
    /*min-height: 32rem;*/
    max-height: 32rem;
   }
   
   footer {padding:2rem;}
.sp-slideshow {  position: relative; width: 64%; height: 35.3rem;}   

input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 16%;}
input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -119%;}
input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -252%;}
input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;}
input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}
   
.slideone { width: 50rem; height: 18.75rem; padding:0px; margin-left:-60px;-webkit-flex-flow: column;
            flex-flow: column;}
.slidetwo { width: 50rem; height: 18.75rem; padding:0px; margin-left:-120px;-webkit-flex-flow: column;
            flex-flow: column;}
.slidethree { width:50rem; height: 18.75rem; padding:0px; margin-left:-120px;-webkit-flex-flow: column;
            flex-flow: column;}
#main2 aside img {width:40%;}			
			
  }