header{
	position: relative;
	width: 100%;
}
.containermenu{
	/*padding: 10px;*/
	position: relative;
	height: 80px;
	/*max-width: 1200px;*/
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items:center;
	text-transform: uppercase;
	font-size: 13px;
	border-bottom: 3px solid #838383;
}
.apartados{
	display: none;
}
.apartados.vertical, .apartados.horizontal{
	display: inline-block;
}
header span{
	color: #133e6e;
	margin: 10px;
	margin-top: 0;
	margin-bottom: 0;
}
header .container{
	display: flex;
	margin-right: 20px;
	justify-content: flex-end;
	align-content:flex-end;
	flex-direction: column;
	text-align: right;
	box-sizing: border-box;
	/*padding: 40px;*/
}
header .container.row{
	flex-direction: row;
	align-items: center;
}
header .flex-item{
	width: 90%;
}
 header .flex-item.logo-item {
    left: 25px;
    min-width: 140px;
    max-width: 140px;
    padding: 1em;
    position: relative;
}
header img{
	position: relative;
	max-height: 100%;
}
header .c2.menu{
	max-width: 1100px;
}
header a{
	color: #181818;
	text-decoration: none;
	font-weight: bolder;
	-webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .25s linear;
}

header a.over,header a.touched,header a.active{
	color: #fff;
}


@media screen and (max-width: 850px) and (orientation: portrait){
	.apartados,.apartados.horizontal{
		display: none;
	}
	.apartados.vertical{
		display: none;
	}
	.flex-item.logo-item{
		width: 90%;
	}
	.logo{
	    padding: 0;
	    padding-left: 30px;
	    /*left: 30%;*/
	    max-width: 200px;
	    position: relative;
	    z-index: 100;
	}
	header {
		text-align: center;
	}
	header .apartados{
		display: none;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 30;
		background-color: #666;
		box-sizing: border-box;
		padding: 30px;
		text-align: center;


	}

	header .apartados::before{
		content: "";
		position: relative;
		display: block;
		text-align: center;
		width: 200px;
		height: 45px;
		/*background-image: url(../../img/svg/logo.svg);
		background-repeat: no-repeat;*/
		left: 40%;
		transform: translateX(-50%);
		margin-bottom: 10vh;
	}
	header .punto{
		display: none;
	}
	header span{
		display: none;
	}
	header a{
		position: relative;
	    display: block !important;
	    font-size: 5vw;
	    margin: 5vh;
	}
	header a{
		position: relative;
	    display: block !important;
	    font-size: 5vw;
	    margin: 5vh;
	}
	/*header .flex-item.logo-item{
		width: 100%;
	}*/
	header .flex-item.logo-item a{
		margin: 0;
	}
	.hamburger{
		display:block !important;
	}
	/*xxx*/
	.e1,.e1.active{
		width: 20px;
		min-width: 20px;
	}
	header a{
	color: #fff;
}
header a.over,header a.touched,header a.active{
	color: #fff;
}
	header .apartados.bg2{
		background-color: #181818;
	}
	header .apartados.bg2 a{
		transform: scale(1.15);
		margin: 9vh;
		-webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
	}
}
.visible{
	display: block !important;
}
.userdata.visible{
	display: flex !important
}
.userdata{
	position: relative;
	display: flex;
	margin-left: 40px;
	align-items: center;
}
.userdata .btncircle{
	position: relative;
	display: inline-block;
	width: 70px;
	height: 70px;
	border-radius: 50px;
	margin: 10px;
	background-color: #01A88F;
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: 50%;
	border: 4px solid #fff;
}
.userdata .btncircle.big{
	background-size: 100%;
}
.userdata .btncircle.logout{
	background-image: url(../../img/svg/logout.svg); 
}
.userdata .btncircle.user{
	transform: scale(0);
	
	/*background-image: url(../../img/svg/user.svg); */
}
.userdata .btncircle.over,.userdata .btncircle.touched{
	background-color:#838383;
	transform: scale(.85);
	background-size: 40%;

	transform: scale(.80);
	background-size: 120%;
	background-position: center 0;
}
.userdata .btncircle.logout.over,.userdata .btncircle.logout.touched{
	background-size: 140%;
	background-position: 120% center;
}
.userdata .btncircle.big.over,.userdata .btncircle.big.touched{
	background-color:#838383;
	transform: scale(.8) !important; 
	background-size: 155%;
	background-position: 40% center;
	border: 4px solid #F8B133;
}
.usertxt{
	text-transform: capitalize;
}
@media screen and (max-width: 500px) {
	header .flex-item.logo-item{
		height: 60%;
	}
	header .flex-item.logo-item{
		width: 300px;
	    min-width: 0;
	    max-width: 300px;
	    left: 0;
	}
}
@media screen and (max-aspect-ratio: 1/1) and (orientation: portrait) {
  .userdata{
		position: fixed;
	    display: none;
	    margin-left: 20px;
	    z-index: 111;
	    /*bottom: 10px;*/
	    top: 90vh;
	    right: 10px;
	}
	.userdata.visible{
		display: inline-block;
	}
	.userdata .btncircle{
		width: 40px;
    	height: 40px;
	}
	h2{
		margin: 0;
	}
}


@media screen and (max-width: 650px) and (orientation: landscape){
	header .apartados.visible {
	    display: none !important;
	}
	header .menuvertical .apartados.visible {
	    display: block !important;
	}
	.userdata .btncircle{
		width: 40px;
		height: 40px;
    }
	header a{
		font-size: 10px;
	}
	header .flex-item.logo-item{
		max-height: 60%;
	}
	.menuvertical a{
		height: 70px;
		font-size: 12px;
		min-width: 170px;
		max-width: 170px;
	}
	.e1.active {
	    width: 170px;
	    min-width: 170px;
	}
}


/* HAMBURGUER */
/*! CSS Used from: https://jonsuh.com/hamburgers/css/screen.css */
*,:after,:before{box-sizing:inherit;}
.hamburger{position: fixed; z-index: 31;
    right: 0px;font:inherit;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent;display: none;}
.hamburger:hover{opacity:.7;}
.hamburger-box{position:relative;display:inline-block;width:40px;height:24px;}
.hamburger-inner{top:50%;display:block;margin-top:-2px;}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#838383;}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
.hamburger-inner:before{top:-10px;}
.hamburger-inner:after{bottom:-10px;}
.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms;}
.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease;}
.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);}


/*! CSS Used from: https://jonsuh.com/hamburgers/css/screen.css */
*,:after,:before{box-sizing:inherit;}

.hamburger.is-active:hover,.hamburger:hover{opacity:.7;}
.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:#838383;}
.hamburger-box{position:relative;display:inline-block;width:40px;height:24px;}
.hamburger-inner{top:50%;display:block;margin-top:-2px;}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:40px;height:4px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#838383;}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
.hamburger-inner:before{top:-10px;}
.hamburger-inner:after{bottom:-10px;}
.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:75ms;}
.hamburger--squeeze .hamburger-inner:before{transition:top 75ms ease .12s,opacity 75ms ease;}
.hamburger--squeeze .hamburger-inner:after{transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);}
.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg);}
.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 75ms ease,opacity 75ms ease .12s;opacity:0;}
.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 75ms ease,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg);}

@media screen and (max-width: 850px) and (orientation: portrait){

header .flex-item.logo-item a {
    margin: 0;
    margin-top: -38px;
    margin-left: -35px;
    max-width: 150px;
}
header .apartados.bg2 a {
    transform: scale(1.15);
    margin: 5vh;
    }
}