@import url('https://fonts.googleapis.com/css?family=Share+Tech');
* { margin: 0; padding: 0;}
html{width:100%; height: 100vh; overflow: auto;}
body {width:100%;min-height:100vh;
    background-color: #09F;
	 background:url(imgs/fons.png); background-size:100% 100vh;
	 color: rgba(255, 255, 255, 0.9);
	 font-family: 'Share Tech', sans-serif;
	 cursor: url("imgs/cursors/cursor.cur"), auto;
}
a:link {color: #FFF; text-decoration: none; cursor: url("imgs/cursors/cursor.cur"), auto;}
a:visited {	text-decoration: none;	color: #FFC;}
a:hover {text-decoration: none;	color: #FF9; text-shadow: 2px 2px 2px #916F09;}
a:active {text-decoration: none;color: #FF3;}
.thumb {
  width: 12vw;
  height: 12vw;
  border: 8px solid #AED6F1;
  margin: 5px 5px 0 0;
  border-radius:50%;
 }
ul {margin-left:1.7vw;}
.capcelera {background: rgba(255, 255, 255, 0.11); width:96%; height:auto; font-size:2.1em; font-weight:bold; color:#FFF; padding:2%; margin-bottom:.5%;}
.capcelera1 {background: rgba(255, 255, 255, 0.11); width:98%; height:auto; font-size:4vh; font-weight:bold; color:#FFF; padding:1.2%;}
.capcelera2 {background: rgba(255, 255, 255, 0.29); width:98%; height:auto; font-size:2.5vh; color:#FFF; padding:1.2%; line-height:150%;}
.iconscap,.iconscap1,.iconscap2,.iconscap3 {font-size:43%; border: 3px solid #e6f2ff; display: inline-block; border-radius: 50%;}
.iconscap {padding: .6em .8em; border: 3px solid #32CD32;}
.iconscap1 {padding: .6em .6em; border: 3px solid #FF4500;}
.iconscap2 {font-size:45%; padding: .5rem .9rem; border: 3px solid #FFD700; }
.iconscap3 {padding: .6em .6em;}
.iconscap:hover {color:#9CF;}
.iconscap2:hover {color:#FFC300;}
.titoluser{text-align:right;margin-right:1.7em;}
.reset{color:#2EFE2E;font-size:80%; margin-right:1vw;}
.reset:hover {color: lime; opacity:.8;}
.close{color:#F30;}
.close:hover {color: #F00; opacity:.8;}
.orange {color:#C88C0B;}
.config{color:#BBB; margin-right:1vw;}
.config:hover {color:#CCC; opacity:.8;}
.content{padding:1%; font-size:125%; list-style:circle decimal; line-height:170%;}
#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  list-style-type: none;
 
}
.hex { position: relative; visibility:hidden;  outline:1px solid transparent;}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{  
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {  
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
	cursor:pointer;
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img { 
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}
.hex h1, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  background-color: rgba(60, 191, 206, 0.79);
  font-weight: 300;
   cursor: pointer;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
  bottom: 50%;
  padding-top:50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left:5%;
  width: 90%;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.hex p {
  top: 50%;
  padding-bottom:50%;
  font-size: 170%;
  text-align: center;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}
.hexLink:hover h1, .hexLink:hover p {
  color: #FF9;
  text-shadow: 2px 2px 2px #916F09;
}
.hex p.mboturl { font-weight: bold; font-style: italic; }
.repte {font-size:1.25vw; border: 3px solid #ffcc66;
  	display: inline-block;
  	padding: 0.8vw .6vw;
  	border-radius: 50%;
	margin-top:7%;
	margin-left:-12%;}
.repte:hover {font-size:1.5vw; border: 4px solid #66ff66;
  padding: 0.8vw .5vw;
	margin-left:-13%;}
.big {font-size:170%;}	
	
/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0); 
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
  #hexGrid{    padding-bottom: 4.4% ; }
  .hex {    width: 20%; /* = 100 / 5 */  }
  .hex:nth-child(9n+6){ /* first hexagon of even rows */
    margin-left:10%;  /* = width of .hex / 2  to indent even rows */
  }
}
@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
  #hexGrid{    padding-bottom: 5.5%  }
  .hex {    width: 25%; /* = 100 / 4 */  }
  .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
  }
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{    padding-bottom: 7.4%  }
  .hex {    width: 33.333%; /* = 100 / 3 */  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
  }
}
@media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{    padding-bottom: 11.2%  }
  .hex {    width: 50%; /* = 100 / 3 */  }
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}
@media (max-width: 400px) {    #hexGrid {font-size: 13px;    }}

#okCookie{
  background-color:#F2F2F2;
  color:#333333;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:10px;
  font-family:sans-serif;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
  border-top:1px solid #ccc;
  z-index:1002;
}
#okCookie p{margin:0 0 10px 0; float:left; padding:5px 0px;}
#okCookie #okClose, #okCookie #okCprivacy{
  padding:5px 20px;
  float:right;
  margin-left:10px;
  text-decoration:none;
  border-radius:3px;
  color:white;
}
#okCookie #okClose{
  background-color:#39B54A;
  text-shadow:0px 1px 1px #507F2B;
  box-shadow:inset 0px -1px 1px #507F2B;
}
#okCookie #okClose:hover{background-color:#42ce55}
#okCookie #okCprivacy{
  background-color:#8D9499;
  text-shadow:0px 1px 1px #63666B;
  box-shadow:inset 0px -1px 1px #63666B;
}
#okCookie #okCprivacy:hover{background-color:#a0a8ae}
.okcBeginAnimate{
    -webkit-animation: myfirst 2s; 
    animation: myfirst 2s;
}
@-webkit-keyframes myfirst {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes myfirst {
    from {opacity: 0;}
    to {opacity: 1;}
} 
#cc {position:absolute;	right:10px;	bottom:7px;	width:87px;	height:38px; z-index:98;}
.navegadors {text-align:center; font-size:125%;}
.navegadoricon {padding: .6em .5em .5em .4em; margin: 1em; background-color: rgba(50,50,50,0.7); border-radius:50%;}
.nvermell {color:#F00;}
.ntaronja {color:orange;}
.nverd {color:green;}
.nlime {color:lime;}
.proc {padding:2%; font-size:125%; list-style:circle decimal; line-height:170%; text-align:center;}
.petit {font-size:79%}
.hits {color:gold;}
/*user*/
.cont {position: relative; height: 100%; background-image: url("imgs/fons.png"); background-size: cover; overflow: auto;}
.user-profile {margin: auto; margin-top:3%; width: 50em;  border-radius: .3em; background: rgb(255,255,241, 0.19);}
.user-profile input  {margin-bottom:1.7vw ;margin-top:1.7vw;}
input {border-width: 0; background-color: transparent; width:80%;}
.button {background-color: #0C0;  border: solid 2px;  padding: 5px; text-align: center; text-decoration: none; font-size: 16px; margin: 4px 2px; cursor: pointer; opacity: 1;transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -webkit-transition: opacity .15s ease-in-out;}
.button1 {border-radius: 4px; color: #9F9; border-color: #3F9;}
.button1:hover {background-color: #C00; color:#FFF; border-color: #F00; opacity:.79;}
.button2 {background-color: #6C6; text-align: center; text-decoration: none;  padding:.6em .6em; font-size:.5em; border-radius: 50%; color:#039; border-color: #390;}
.button2:hover {background-color: #F60; color:#6C6; border-color:#06C; opacity: .7;}
.data {list-style:none; display: flex;}
table {width:100%;}
th, td {padding: 4vw;}
tr, h2 {text-align:center;}
.advanced{visibility:hidden; font-size:85%;}
.tableadmin{ visibility:hidden; background-color:#FFF;color: #6C6; border-radius:5px; padding:10px;}
.box {width: 30%;  margin: 0 auto;  background: rgba(255,255,255,0.2);  padding: 15px;  border: 2px solid #fff;  border-radius: 20px/50px;  background-clip: padding-box; text-align: center;}
.overlay {position: fixed;  top:0;  bottom:0;  left:0;  right:0;  background: rgba(0, 0, 0, 0.6);  transition: opacity 350ms; visibility: hidden; opacity: 0; z-index: 100;}
.overlay:target {visibility: visible;  opacity: 1;}
.popup {margin:10% auto;  padding-top: 0px; color:#fff; background:#0D6480; border-radius: 5px;  width: 37%;  height: auto;  position: relative; transition: all 5s ease-in-out; opacity: 0.97;}
.popupcap {background:#0B4F66; width: 100%; padding-top:8px; padding-bottom:8px;line-height: 5px;}
.popup .close {position: absolute;  top: 20px;  right: 30px;  transition: all 200ms;  font-size: 30px;  font-weight: bold;  text-decoration: none;  color: #E76322;}
.popup .close:hover {color: #06D85F;}
.popup .content {padding:20px; text-align:center; overflow: auto; line-height: normal}
.bts {
  padding:.7vw 1.7vw;
  margin-right:1vw;
  background:#E76322;
  color: #fff;
  font-size: .9rem;
  font-weight: 400;
  border: 0;
  border-radius: 0.5rem;
  transition: background 250ms;
  cursor: pointer;
}
.bts1 {
  padding:.7vw 1.7vw;
  background:#2ECC71;
  color: #fff;
  font-size: .9rem;
  font-weight: 400;
  border: 0;
  border-radius: 0.5rem;
  transition: background 250ms;
  cursor: pointer;
}
.bts:hover, .bts1:hover {;box-shadow: 0px 2px 20px 2px rgba(255,114,132,0.7);}

.icona {color:#FFC300; padding-right:1vw; font-size:120%;}
hr.new {border-top: 1px solid red;}
.upload{width: 4vw; height: 4vw; position: relative; background-color: rgb(255,204,0, 0.98);
  border-radius: 50%;color: #fff;  font-size: 3vw; cursor:pointer; margin-top:-5vw;
  
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);}
.cont_tabs_login {position: relative;  float: left;  width: 100%;}
.ul_tabs > li {position: relative; float: left; width: 50%; list-style: none; text-align: center; margin-top: -2vh;}
.ul_tabs > li > a  {font-size: 2.1vw; padding: 1vw ; display: block;}
.ul_tabs > .active > a  {}
.cont_text_inputs {position: relative;  float: left;  width: 100%;  margin-top: 2vh;}
.input_form_sign {width: 89%; border: none;  border-bottom: 1px solid #B0BEC5; background-color: transparent;  font-size: 1.4vw; padding:.1vw;}
.btn_sign {
  background-color: rgb(255,204,0, 0.98);
  box-shadow: 0px 2px 20px 2px rgba(255,114,132,0.7);
  border-radius: 8px;
  padding:1vw 1.7vw;
  color: #fff;
  font-size: 1.2vw;
  font-weight: 400;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer; 
  margin-top: 4vh;
  margin-bottom: 2vh;
}
.btn_sign:hover {
  background-color: rgb(255,224,0, 0.98);
  box-shadow: 3px 4px 26px 4px rgba(255,114,132,0.8);
}
.controls {margin-left:2.5vw; display: flex; width:80%;}
#countdown {position:absolute; top:14vh; right:1.7vw; background: #fafafa; border:1px solid #777; box-shadow:2px 3px #CCC; padding:.9vw; border-radius:5px; z-index:1100; opacity:.8;}
.digits {font-size: 1.5vw; color: #000; font-weight:800;}
 
 /*User*/
.advert, .advert1, .advert2 {width:98%; height:5.5vw; padding:1vw; font-size:1.5vw; display:none;}
.advert1 {height:6.5vw;}
.advert:hover, .advert1:hover, .advert2:hover{opacity:1}
.advert {background-color: rgb(255,204,0, 0.89); border: 2px solid orange;}
.advert1 {background-color: rgb(205,204,204, 0.89); border: 2px solid #333;}
.advert2 {background-color: rgb(255,51,0, 0.8); border: 2px solid red;}

 .info{float:left; font-size:210%; border-radius: 50%; border:8px solid orange; padding:.0 .2vw .0 .2vw}
 .items{margin-left:8.5vw;}
.closetab {cursor:pointer;font-size:170%; float:right; color:#C00;}
.star{color:orange;cursor: pointer; font-size:60%;}
.play{color:lime; font-size:107%;}

/*app*/
.logo {float:left; margin-left:1em; font-size: 200%;}
.ricon {width: 50px; vertical-align:middle;transition: all .2s ease-in-out; margin:1vw;}
.ricon:hover {transform: scale(1.1); }

#error { color: #c0392b; margin-top: 10px; text-align: center; }