/* *** ESTILO PERFIL ALUMNO *** */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900);


*{ 
    padding: 0;
    margin: 0;
    border: 0;
    font-family: 'Roboto', sans-serif;
     
}


/* *** GENERAL *** */

.general {
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.47);
    background-size: cover;
    black;
}



}
/* *** HEADER FINAL*** */

header {
  text-align: center;
	width:100%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;}

.costado{
	max-width: 220px;
	height: 100%;
	background-color: #161623;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
    z-index: 1;
}

.item{
	width: 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	padding: 0px 5px;
  background-color: rgba(84, 90, 97, 0.53);
	flex-grow: 1;
	transition: all 0.3s ease 0s
	border: 5px solid transparent;
	border-right: 1px solid rgb(241, 241, 241);
	border-bottom: 1px solid rgb(50, 52, 60)}

.costado h2{
	padding: 5px 4px;
	font-family:'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.2em;
	color: rgb(255, 250, 247)}

.item1{}
.item1:hover{background-color: #65C6BB;}

.item2{}
	.item2:hover{background-color: #F64747;}

.item3{}
	.item3:hover{background-color: #913D88;}

.item4{}
	.item4:hover{background-color: #F62459;}

.item5{}
	.item5:hover{background-color: #2574A9;}

.item6{}
	.item6:hover{background-color: #66CC99;}

.menusup{
	    top: 0;
      width: 100%;
      padding: 0.2em;
      box-shadow: 0px 0.5px 5px 0px;
	    background-color: rgba(50, 64, 101, 0.34);}
.menusup ul{
        display: flex;
	      justify-content: center;
	     align-items: center;
        text-decoration: none;
	     justify-content: space-around;
	      flex: 1;}
.headericono {
	      display: flex;
	      justify-content: space-around;
	      align-items: center;
	      align-content: center;
	      flex-grow: 0;
	      text-decoration: none;
	      margin-left: 0.5em;}

/* *** HEADER *** */

header {
	    list-style: none; 
	    top: 0; 
        position: fixed; 
        width: 100%; 
        z-index: 100; 
        padding: 0.2em; 
        box-shadow: 0 0.5px 5px 0; 
	    background-color: rgba(50, 64, 101, 0.34); 
	    display: flex;
		height: 3em;
	    justify-content: space-around;
        align-items: center;
}

header li{
	       list-style: none;

}

header ul{ 
          display: flex;
	      justify-content: center;
	      align-items: center;
          text-decoration: none;
	      justify-content: space-around;
	      flex: 1;	      
}

.headericono {
	      
	      display: flex;
	      justify-content: space-around;
	      align-items: center;
	      align-content: center;
	      flex-grow: 0;
	      text-decoration: none;
	      margin-left: 0.5em;
		  
}

.busqueda01 {
	      justify-content: space-around;
	      align-items: center;
	      align-content: center;
	      flex-grow: 0;
	      text-decoration: none;
	
}
.busqueda {
	      
	       padding-left: 0.3em;
	       align-items: center;
	
}
#headerlogo {
	         width: 60%;
	         align-items: flex-start;
	         align-content: center;
	         padding-top: 0.5em;
	         padding-left: 0.5em;
}

.cajafoto {
    padding: 0;
    margin: 0;
    border: 0;    
    background-color: transparent;
    text-align: center;
    text-decoration: inherit  aliceblue;
    padding-top: 3em;
    padding-bottom: 1em;
    width: 100%;
    height: 100%;
    
}



.boton{
  background-color: #1ABAB6;
    color: #153930;
    border: 0em;
    padding: 0.5em 1em ;
    margin: 0em;
	width: 100%;
	font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: left;
    font-size: 1.2em;
}

.boton:hover{
	background-color: #153930; 
    color: #1ABAB6;
    text-align: left;
}

h1 {
    font-family: 'Roboto', sans-serif;
    color: #1ABAB6;
    background-color: transparent;
    font-size: 2em;
    font-weight: bold;
    
}

h2 {
    font-family: 'Roboto', sans-serif;
    color: #153930;
    background-color: transparent;
    font-size: 1.5em;
    }

h3 {
    font-family: 'Roboto', sans-serif;
    color: #153930;
    background-color: transparent;
    font-size: 1em;
    text-align: center;
}

h4 {
    font-family: 'Roboto', sans-serif;
    color: #4b2800;
}

h5 {
    font-family: 'Roboto', sans-serif;
    color: #080033;
}



.cajafoto img {
    border-radius: 50em;
    padding: 1em;
    border: 0;
    width: 12em;
    max-width: 100%;
}



/* *** FOOTER *** */


footer {
    padding: 1em;
    color: ‪#E8547E‬; 
    font-size: 0.5em;
    background-color: rgba(108, 105, 105, 0.06);
    bottom: auto;
}

footer figure {
    display: flex;
    align-items: center
} 

footer figure img {
    max-width: 20%;
    padding-right: 1em
}


/* *** BOTON ATRAS *** */


.botonatras {
	z-index: 90;
    display: flex;
    position: fixed;
	justify-content: flex-end;
	object-position: right;
	bottom: 1em;
	right: 0.2em;
}

/* *** MATERIAS CARRERAS ALUMNO *** */ 

.materias {
    background-color: rgba(227, 227, 227, 0.81);
    blue;
    width: 100%;
    text-align: center;
}


    
}

button {
	list-style-type: none;

} 
 
body {
            background-color: #E4E4E4;
    }



div.nivel{
	width: 25em;
	min-height: 3em;
	background-color: transparent;
    margin: auto; 
    
}




div.info{
	width: 25em;
	height:0;
	background-color: rgba(26, 186, 182, 0.2);
	overflow: hidden;
	transition: 1.5s;
        

}

p.titulo {
    
	text-align: center;
	
    
}


p.titulomateria {
    display: block;
	padding: 0em;
    border: 0em;
    margin: 0.3em;
	text-align: left;
	font-size: 1.2em;
    color: #153930; 
    
}

a {
    font-family: 'Roboto', sans-serif;
    list-style-type: none;
    display: block;
	margin: 0.5em;
	text-align: center;
	color:#4f4f4f;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    font-family: 'Roboto', sans-serif;
    list-style-type: none;
    display: block;
	margin: 0.5em;
	text-align: center;
	background-color: #153930;
    color: #1ABAB6;
    text-decoration: none;
}



div.nivel:hover div.info{
	height: 82em;
}


/* *** GALERIA *** */

.galeria{
    max-width: 100%;
    max-height: auto;
  background-color: transparent;
  color: #00e673;
  border: 0;
  padding: 0em;
  width: 100%;
  height: 100%;
  margin-top: 0em;
  margin-bottom: 1em;
  justify-content: center;
  text-align: center;
    
}

.galeria:hover{
	background-color: rgba(92, 151, 191, 0.24);
	color: rgb(254, 253, 251);
    text-align: center;
}


#slideshow-wrap {
    display: block;
    min-height: height: 135px;
    max-height: height: 320px;
    min-width: 240px;
    max-width: 640px;
    margin: 0.8em;
    position: relative;
	
}

#slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.56);
    overflow: hidden;
    position: relative;

}

#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
	
}

#slideshow-inner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
	
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
	width: 100%;
	
}

#slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: 1em;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: #003c3b;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
-webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color 1s;
}

#slideshow-wrap label:not(.arrows):active { bottom: 1em }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: #14de1c }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: #14de1c }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: #14de1c }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: #14de1c }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: #14de1c }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

label.arrows {
    font-size: 25px;
    color: rgb(255,255,240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0 0 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }


/* *** OTRAS CARRERAS FADU *** */


.otrasmaterias {
    width: 100%;
    height: 40.5em;
    padding: 0;
    margin: 0;
    border: 0;    
    background-color: transparent;
    text-align: center;
    text-decoration: aliceblue;
    padding-top: 0.1em;
    position: relative;
    display: flex;
}

.texto{
    position: absolute;
    top: 1.5em;
    bottom: 0em;
    right: 0em;
    left: 0em;
}


.arquitectura {
    position: absolute;
    top: 3em;
    bottom: 0em;
    right: 0em;
    left: -13em;
}

.industrial {
    position: absolute;
    top: 3em;
    bottom: 0em;
    right: 0em;
    left: 13em;
}

.imagensonido {
    position: absolute;
    top: 15em;
    bottom: 0em;
    right: 0em;
    left: -13em;
}

.textil {
    position: absolute;
    top: 15em;
    bottom: 0em;
    right: 0em;
    left: 13em;
}

.paisaje {
    position: absolute;
    top: 28em;
    bottom: 0em; 
    right: 0em;
    left: 0em;
}

.otrasmaterias img {
    border-radius: 1.25em;
    padding: 0.3em;
    border: 0.3em;
    width: 9.3em;
    max-width: 100%;
}

.otrasmaterias h3 {
    color: #153930;
    text-align: center;
    font-size: 1.2em;
}



/* *** PANTALLA APP *** */

@media screen and (min-width: 480px) {

    body {
	 background: url('fondo.jpg') no-repeat center center fixed;
	background-size: cover;
	height: 100%;
	width: 100%
}
    .menusup{
			display: none;}
		.menusup ul{
			display: none;}
		.headericono{
			display: none;}
      
      .header {
        display: none
    }
    

    .general {
    
        width: 1024px;
        height: 590px;
    } 
    
    .cajafoto {
        display: flex;
        height: 41%;
        width: 38%;
        position: relative;
        top: -34.5em;
        left: 39.5em;
       
    }
    
    .fotografico img {
        border-radius: 50em;
        padding: 1em;
        border: 0;
        width: 10em;
        height: 10em;
        position: absolute;
        top: 5em;
        bottom: 0em;
        right: 0em;
        left: -0.5em;
    }
    
    
    .fotoalumno img {
        border-radius: 50em;
        padding: 1em;
        border: 0;
        width: 13em;
        height: 13em;
        position: absolute;
        top: 4em;
        bottom: 0em;
        right: 0em;
        left: 10em;
    }
    
        
    .cajafoto h2 {
        padding: 0;
        margin: 0;
        border: 0;
        text-align: center;
        position: absolute;
        top: 0.25em;
        bottom: 0em;
        right: 0em;
        left: 0.2em;   
    }
        
     .cajafoto h3 {
        padding: 0;
        margin: 0;
        border: 0;
        text-align: left;
        position: absolute;
        top: 4.5em;
        bottom: 0em;
        right: 0em;
        left: 0.2em;   
    }
    
    .cajafoto h1 {
        display: none;
    }
    
    .galeria {
        display: flex;
        height: 50%;
        width: 39.9%;
        position: relative;
        top: -53.5em;
        left: 14em;
    }
    
    .galeria:hover {
        background-color: transparent;
    }
    
    #slideshow-wrap {
        max-height: 20em;
        max-width: 27em;
        position: absolute;
        top: 1em;
        left: 0em;
    }    
    
     #slideshow-inner {
        max-height: 15em;
        max-width: 27em;
        position: relative;
        top: 1em;
        left: 0em;
    }
    
    .slide1 img {
        max-width: 100%;
        max-height: auto;
        
    }
    
    .trabajos h2 {
        position: relative;
        text-align: right;
        top: 0.15em;
    }
    
    .materias {
        display: flex;
        height: auto;
        width: 75%;
        position: relative;
        top: -51em;
        left: 15em; 
    }
    
    .nivel {
        max-width: 15em;
   }
    
 .info {
        max-width: 15em; 
    }
    
    .materias h2 {
        position: absolute;
        top: -1.5em;
        left: 12em;
    }
    
.otrasmaterias {
        display: flex;
        height: 20%;
        width: 75%;
        position: relative;
         top: -50em;
        left: 15em;
        background-color: rgba(72, 144, 126, 0.87);
        border-radius: 1em;
  }
    
.texto{
    position: relative;
    max-width: 10em;
    text-align: center;
    left: 1em;
}


.arquitectura {
    position: relative;
    width: 7em;
    top: -0.3em;
    left: 2em;
}

.industrial {
    position: relative;
    width: 7em;
    top: -0.3em;
    left: 1em;
}

.imagensonido {
    position: relative;
    width: 7em;
    top: -0.3em;
    left: 1em;
}

.textil {
    position: relative;
    width: 7em;
    top: -0.3em;
    left: 1em;
}

.paisaje {
    position: relative;
    width: 7em;
    top: -0.3em;
    left: 1em;
}
    
.otrasmaterias h3 {
        display: flex;
        color: #00eaea;
    }
    
    header {
        display: none;
    }
    
    .botonatras {
        display: none;
    }
    

  
    .costado a:hover {
        background-color: transparent;
    }

}

/* *** PANTALLA WEB *** */

@media screen and (max-width: 480px) {
        
		.costado {
            display: none;
        }
        
     
    
}