/**** ESTILO ****/

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

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
    font-family: 'Roboto', sans-serif;}

html {height: 100%;}




/*////////////////////////////////////////////MENU JULY//*/

.menusup{
	    top: 0;
      width: 100%;
      padding: 0.2em;
      box-shadow: 0px 0.5px 5px 0px;
	    background-color: rgba(50, 64, 101, 0.34);
position: fixed;}

.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;}

  @media (min-width: 480px){
		.menusup{
			display: none;}
		.menusup ul{
			display: none;}
		.headericono{
			display: none;}
		}

	@media (max-width: 480px) {
		.costado{
			display: none}
			body{background: none}
	}


/* ///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;

}


/* ///TITULO// */

.tituloseccion{
	 display: flex;
	 align-items: center;
	 margin-top: 2.6em;
	 padding: 0.5em;
	 background-color: #5C97BF
}
.tituloseccion img{
	margin-right: 1em;
}
.tituloseccion h1{width: 4.8em;}
.tituloseccion h1, .tituloseccion h5{
	color: white;
	padding-right: 1em;
}


/* /////ENCABEZADO LONGI///// */

figure {display: flex;	    
	    flex-direction: row;
	    align-content: center;
	    align-items: center;
	    padding-top: 1em;
	    text-align: center;
	    }

figure img{
	       pad
	       display: flex;
	       align-items: center;
	       align-content: center;
	       width: 12em;
	margin-left: 1em
	      
}

figure h1 {
    color: #5C97BF;
    font-size: 2em;
	margin-left: 0.5em
}

h3{
	color: #5C97BF;
	font-kerning: 0.5em;
}


/* ////TABLA//// */

#tablaranking{
	margin-left: 1em;
	margin-right: 1em;
	margin-top: -1.5em;
}
h4 {
	
    color: #5C97BF;
    font-size: 1em;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.56);
	margin-top: 1em;
}
h6{ 
	font-size: 0.8em;
	color: #5C97BF;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.56); 
    padding: 0.5em
}


.ranking{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-around;
	align-items: stretch;
	background-color: rgba(92, 151, 191, 0.12);
	min-height:5em;
	padding: 1em;
	
}

.ranking img{
             justify-content: center;
             align-items: center;
             width: 8em;
             margin-top: 0.5em;
             margin-bottom: -0.5em}


/* ///FADU RUMOREA SECCION//// */

/* titulo */
h2 { 
    color: #5C97BF;
    font-size: 1.5em;
    background-color: rgba(255, 255, 255, 0.56);
	text-align: center;
    margin-top: 1em;
	width: 100%
    }

/* iconos */
#comentariosiconos{
	display: flex;
	align-items: center;
	align-content: space-around;
	align-self: stretch;
	flex-direction: row-reverse;
	padding-right: 0.8em;
	padding-top: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
	
}

h7{background: none;
   font-size: 0.8em;
}

.vercomentarios{
	display: flex;
	padding-top: 0em;
	
	
}

.vercomentarios img{width: inherit;
                    margin-left: -0.1em
}


.separadordecomentarios{ 
	background-color: rgba(232, 232, 232, 0.65);
     height: 1px;
     margin: 0 auto;
	 margin-top: 5px;
     margin-bottom: 6px;
	}

/* caja de texto */

h5, p{
	  padding-left: 0.5em;
	  padding-right: 0.7em;
		margin-left: 1em;
	margin-right: 1em;
}
h5 {
    color: #5C97BF;
}

p.fecha {
	  display: flex;
	  font-size: 0.6em;
	 flex-direction: row-reverse;
	padding-top: 1em
}



/* ver mas... */

.tambiensedice{
  background-color: rgba(92, 151, 191, 0.24);
  padding: 1em;
  width: 100%;
  border: none;
}

.tambiensedice:hover{
	background-color: rgba(92, 151, 191, 0.48);
	color: rgb(254, 253, 251)
}
	
}

/* ////RANKEARRRRR//// */

.dejarcomentario{
	display: flex;
	align-items: center;
	align-content: center;
	margin: 1em;
	padding: 1em;
	padding-bottom: 7em;
	background: none;
	border: none;
	
}

textarea{ margin-left: 1em;
          margin-top: 1em;}

.enviar{ 
         max-width: 15%;
	     background: none;
	     border: none;
}

.enviar img{
	width: 80%;
	border: none;
	
    
}

#nico{
	 margin-left: 1em;
	background-color: 
}



/* ///FOOTER/// */


footer {
	padding: 1em;
    color: #5C97BF;;
    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
}

footer p{
	text-align: left
}
/* /// BOTON ATRAS //// */


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

}

/* ///ACTIVAR y DESACTIVAR VOTO /// */



form {
	text-align: center;
	
}

form label { 
 	text-transform: uppercase;
 	line-height: 40px;
	vertical-align: top;
	color: #ddd;
	cursor: pointer;
}

input[type="checkbox"].checkslider {
  	margin-left: 15px;
	margin-top: 11px;
	outline: none;
	cursor: pointer;
}

label:active input[type="checkbox"].checkslider:after {
	width: 28px;
	left: -2px;
}

label:active input[type="checkbox"].checkslider:checked:after {
	width: 28px;
	left: 10px;
}

input[type="checkbox"].checkslider {
	position: relative;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	-o-appearance: none;
  	appearance: none;
 	display: inline-block;
 	height: 16px;
 	width: 38px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
 	background-color: #E8547E;
	backface-visibility: hidden;
 	transition: all 0.3s ease; 
 	-webkit-transition: all 0.3s ease;
 	-moz-transition: all 0.3s ease; 
 	-o-transition: all 0.3s ease;  
}

input[type="checkbox"].checkslider:checked {
	background-color: #1ABAB6;
}

input[type="checkbox"].checkslider:after {
	content: "";
  	width: 22px;
	height: 22px;
	box-shadow: 0p 0px 1px #fff, inset 10px 0px 10px #000;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
 	top: -3px;
  	left: -2px;
  	position: absolute;
  	background: #fff; 
	transition: all .25s ease;
}
input[type="checkbox"].checkslider:checked:after {
	left: 16px;
  	position: absolute;
  	background: #fff;
}



/* ////BOTON GALERIA//// */


.galeria{
  background-color: rgba(92, 151, 191, 0.19);
  color: #5C97BF;
  border: 0;
  padding: 1em;
  width: 100%;
  margin-top: 0em;
  margin-bottom: 1em;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 0.1em;
  justify-content: center;
}

.galeria:hover{
	background-color: #5C97BF;
	color: rgb(254, 253, 251)
}


/* ///GALERIA/// */


#slideshow-wrap {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: 1em;
    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: 0px;
    -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: rgba(92, 151, 191, 0.6);
    -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 .2s;
}

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

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

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

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

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

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

#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: 0px 0px 3px rgba(0,0,0,.8);
}










/* ////////////////////////////////////////////////PUNTOS DE QUIEBRE//////////////////////////////////////////// */

/* ////////////////////////////////////////////////// PUNTOS DE QUIEBRE ////////////////////////////////////////////////// */





@media screen and (min-width:482px){
	
	/* ///// MENU COSTADO //// */
body {
	background: url('fondo.jpg') no-repeat center center fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
	position: relative;
	font-size: 16px;
	background:rgba(#e4e4e4, 0.7);
	display: flex;
	
}
	
html {height: 100%;}

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;}

.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);
	background: none;}

.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;}
	
	
	
	/* ///TITULO// */

.tituloseccion{
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 background-color: #5C97BF;
	 height: 32em;
	 margin-top: -0em;
	 width: 68.1em;
}
.tituloseccion img{
	max-width: 70%;
	margin-left: 0.5em
}

.tituloseccion h1, .tituloseccion h5{
	color: white;
	padding-right: 1em;
}
	
	
/* //////////////ENCABEZADO LONGI///// */

figure{
	margin-top: 1em;
	background-image: url(img/fondolongi.png);
	background-size: cover;
	height: 80em;
	width: 60em;
	justify-content: center;
	margin-left: 4.5em;
	 }

figure img{display: none;}
	
figure h1 {
    color: #5C97BF;
    font-size: 2.5em;
	margin-left: 13.5em
}

h3{
	color: #5C97BF;
	font-kerning: 0.5em;
	width: 6em;
	margin-left: 32.5em;
}
	
		/* ///FOOTER/// */


footer {
	display: flex;
	flex-direction: column;
	padding: 1em;
    color: #E8547E;;
    font-size: 0.5em;
	background-color: rgba(240, 255, 255, 0.1);
	height: 25em;
	justify-content: center
}
	
footer figure{background: none}	
footer figure img{display: flex;
	max-width: 8em;
	padding-right: 1em
}
	footer p{width: 50em}

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


.botonatras {
	display: none;
}
	
	
/* ////////////////////  CUERPO /////////// */
	
	
.cuerpo{
		display: flex;
	    flex-direction: column;
	    width: 68em;
	height: 100
	}
	
	
/* ////TABLA//// */

#tablaranking{
	display: flex;
	flex-direction: column;
	width: 34em;
	margin-left: 4.5em;
	margin-top: 0.1em;
}
	
	
h4 {
	
    color: #fff;
    font-size: 1em;
	text-align: center;
	background-color: #5C97BF ;
	margin-top: 1em;
}
h6{ 
	font-size: 0.8em;
	color: #fff;
	text-align: center;
	background-color: #5C97BF; 
    padding: 0.5em
}


.ranking{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-around;
	align-items: stretch;
	padding: 1em;
	background: none;
}

.ranking img{
             justify-content: center;
             align-items: center;
             width: 9em;
             margin-top: 0.5em;
             margin-bottom: -0.5em}
	
	
	
/* ///ACTIVAR y DESACTIVAR VOTO /// */



form {
	text-align: center;
	
}

form label { 
 	text-transform: uppercase;
 	line-height: 40px;
	vertical-align: top;
	color: #ddd;
	cursor: pointer;
}

input[type="checkbox"].checkslider {
  	margin-left: 15px;
	margin-top: 11px;
	outline: none;
	cursor: pointer;
}

label:active input[type="checkbox"].checkslider:after {
	width: 28px;
	left: -2px;
}

label:active input[type="checkbox"].checkslider:checked:after {
	width: 28px;
	left: 10px;
}

input[type="checkbox"].checkslider {
	position: relative;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	-o-appearance: none;
  	appearance: none;
 	display: inline-block;
 	height: 16px;
 	width: 38px;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
 	background-color: #E8547E;
	backface-visibility: hidden;
 	transition: all 0.3s ease; 
 	-webkit-transition: all 0.3s ease;
 	-moz-transition: all 0.3s ease; 
 	-o-transition: all 0.3s ease;  
}

input[type="checkbox"].checkslider:checked {
	background-color: #1ABAB6;
}

input[type="checkbox"].checkslider:after {
	content: "";
  	width: 22px;
	height: 22px;
	box-shadow: 0p 0px 1px #fff, inset 10px 0px 10px #000;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
 	top: -3px;
  	left: -2px;
  	position: absolute;
  	background: #fff; 
	transition: all .25s ease;
}
input[type="checkbox"].checkslider:checked:after {
	left: 16px;
  	position: absolute;
  	background: #fff;
}
	
	
/* /////////////  GALERIA //////// */

#galeria{
		display: flex;
		flex-direction: column;
		width: 21.5em;
		margin-left: 43em;
		margin-bottom: 100em;
	}

	
#galeria h2{ color: #fff;
    font-size: 1em;
	text-align: center;
	background-color: #5C97BF ;
	margin-top: 1em;
	width: 22em
}
	
#galeria h6{width: 27.5em}
#slideshow-wrap {
    display: block;
    width: 22em;
	margin-left: -0em;
	margin-top: -0.1em}
	
	
	/* ////BOTON GALERIA//// */


.galeria{
  background-color: rgba(255, 255, 255, 0.11);
  color: #5C97BF;
  width: 14.7em;
  letter-spacing: 0.1em;
  justify-content: center;
  margin-top: -0.6em
}

.galeria:hover{
	background-color: #5C97BF;
	color: rgb(254, 253, 251)
}
	
	
/* ///FADU RUMOREA SECCION//// */
	
/* ////RANKEARRRRR//// */

.dejarcomentario{display: none}

textarea{display: none}

.enviar{display: none}

.enviar img{display: none}

#nico{display: none}


/* titulo */
.comentarios h2 {display: none}

/* iconos */
#comentariosiconos{
	display: none;}

h7{display: none}

.vercomentarios{display: none}

.vercomentarios img{display: none}


.separadordecomentarios{display: none}

/* caja de texto */

.comentarios h5, .comentarios p{display: none}
	

p.fecha {display: none}


	
/* ver mas... */

.tambiensedice{display: none}