
#bulletmenu {
	display: block;
	position: fixed;
	top: 50%;
	right: 40px;
	z-index: 200;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	border: 0px solid #450;
	font-size: 17px;
	line-height: 15px;
}
#bulletmenu a {
	right: 20px;
	color: rgba(119,119,119,0.9);
}
#bulletmenu li .active {
	color: rgba(119,119,119,0.1);
}
.wrapperhomemenu {
	width: calc(100% - 100px);
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 260px auto 20px;
	margin: 0px 50px;
	padding: 0px;
	position: fixed;
	left: 0px;
	bottom: 115px;
	border: 0px solid #ee0000;
	z-index: 200;
	height: 33px;
}
.boxhomemenu {
	padding: 0px;
	margin: 0px;
	font-weight: 300;
	border: 0px solid #ee00ff;
	height: 33px;
}
.k1 {
	grid-row: 1;
	grid-column: 1;
}
.k1 img {
	height: 33px;
}
.k2 {
	grid-row: 1;
	grid-column: 2;
}
.k3 {
	grid-row: 1;
	grid-column: 3;
}
.mainmenu {
	border: 0px solid #40f;
	width: 596px;
	height: 24px;
	bottom: 0px;
	right: 24px;
	position: absolute;
}
.mainmenu li {
	
	font-family: 'Work Sans', sans-serif;
	display: inline-block;
	width: 180px;
	height: 24px;
	border-left: 1px solid #ccc;
	margin: 0px;
	padding: 0px 0px 0px 15px;
	font-size: 18px;
	line-height: 26px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.lang {
	width: 20px;
	bottom: 0px;
	right: 0px;
	position: absolute;
	height: 24px;
	border-left: 1px solid #ccc;
}
.lang li {
	display: block;
	height: 14px;
	font-size: 10px;
	line-height: 10px;
	
	padding: 0px 0px 0px 5px;
	text-transform: uppercase;
	font-weight: 400;
}
.lema1 {
	position: fixed;
	bottom: 55px;
	left: 50px;
	z-index: 300;
	border: 0px solid #777;
}

.lema1 h6 {
	/*font-family: 'Exo 2', sans-serif;*/
	margin: 12px 0px 0px;
	color: #aaa;
	font-size: 22px;
	line-height: 17px;
	font-weight: 100;
	letter-spacing: 2px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


.lema1 p {
	/*font-family: 'Exo 2', sans-serif;*/
	margin: 8px 0px 0px;
	color: #ccc;
	font-size: 16px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.lema3 {
	position: fixed;
	bottom: 55px;
	left: 50px;
	z-index: 300;
	border: 0px solid #777;
}
 .lema3 p {
	/*font-family: 'Exo 2', sans-serif;*/
	margin: 8px 0px 0px;
	color: #ddd;
	font-size: 19px;
	line-height: 17px;
	font-weight: 200;
	letter-spacing: 3px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}





/***********************ANIMACIONS*************************/

#section0 .lema1 {
	opacity: 0;
	transition: all 500ms ease-in;
	left: -200px;
}
body.fp-viewing-firstPage #section0 .lema1 {
	opacity: 1;
	transition: all 2000ms ease-out 500ms;
	left: 50px;
}

#section1 .lema3 {
	opacity: 0;
	transition: all 500ms ease-in;
	left: -250px;
}
body.fp-viewing-secondPage #section1 .lema3 {
	opacity: 1;
	transition: all 2000ms ease-out 500ms;
	left: 50px;
}
/******************************/
[data-aos="customAnimation"] {
	opacity: 1;
	color: #ccc;
	transition-property: transform, color;
}
[data-aos="customAnimation"].aos-animate {
	opacity: 1;
	color: #ddd;
}
/***/

[data-aos="langanimation"] {
	opacity: 1;
	color: #ccc;
	transition-property: transform, color;
}
[data-aos="langanimation"].aos-animate {
	opacity: 1;
	color: #ddd;
	font-weight: 400;
}
/***/

		
[data-aos="lema1anim"] {
	opacity: 0;
}
[data-aos="lema1anim"].aos-animate {
	opacity: 1;
}

/*********************************************************************************************************/

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	
#bulletmenu {
	display: none;
	position: fixed;
	top: 50%;
	right: 1em;
	z-index: 200;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	border: 0px solid #450;
	font-size: 3.5em;
	line-height: 2em;
}
#bulletmenu a {
	display: none;
	right: 2em;
	color: rgba(255,255,255,0.7);
}
#bulletmenu li .active {
	color: rgba(119,119,119,0.1);
}
	

.wrapperhomemenu {
	width: calc(100% - 12em);
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 100%;
	margin: 0px 3em;
	padding: 0px;
	position: fixed;
	left: 0px;
	top: 39%;
	border: 0px solid #ee0000;
	z-index: 1200;
	height: 58%;
}
.boxhomemenu {
	padding: 0px;
	margin: 0px;
	font-weight: 300;
	border: 0px solid #eeffff;
	height: auto;
}
.k1 {
	grid-row: 1;
	grid-column: 1;
	height: 6em;
	margin: 0px 0px 18em;
}
#logohome {
	background-image: url("logo_makiato_blanc.svg");
	background-position: center left;
	background-repeat: no-repeat;
	background-size: contain;
}
.k1 img {
	height: 6.5em;
}
.k2 {
	grid-row: 2;
	grid-column: 1;
	margin: 0px 0px 1em;
}
.k3 {
	grid-row: 3;
	grid-column: 1;
	position: absolute;
}
.mainmenu {
	border: 0px solid #4ff;
	width: auto;
	height: auto;
	bottom: 75px;
	right: 0px;
	position: relative;
	z-index: 1300;
}
.mainmenu li {
	display: block;
	width: auto;
	height: auto;
	border-left: 0px solid #777;
	margin: 0px;
	padding: 0px 0px 0em;
	font-size: 4.1em;
	line-height: 2em;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 3px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.lang {
	width: 20px;
	bottom: 60px;
	right: 0px;
	position: relative;
	height: 1em;
	border-left: 0px solid #777;
}
.lang li {
	display: table-cell;
	color: #777;
	height: 1em;
	font-size: 3em;
	line-height: 100%;
	padding: 0px 1.5em 0px 0px;
	
	text-transform: uppercase;
	font-weight: 400;
}


.lema1 {
	position: fixed;
	top: calc(39% + 8em);
	left: 3em;
	z-index: 300;
	border: 0px solid #ccc;
}
.lema2 {
	position: fixed;
	top: calc(49% + 8em);
	left: 3em;
	z-index: 300;
	border: 0px solid #eee;
}


.lema3 {
	position: fixed;
	top: calc(42% + 8em);
	left: 2.5em;
	z-index: 300;
	border: 0px solid #777;
}
	

.lema1 h6 {
	/*font-family: 'Exo 2', sans-serif;*/
	margin: 12px 0px 0px;
	color: #aaa;
	font-size: 4.5em;
	line-height: 100%;
	font-weight: 300;
	letter-spacing: 2px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.lema1 p, .lema2 p {
	/*font-family: 'Exo 2', sans-serif;*/
	margin: 0px;
	color: #ddd;
	font-size: 3.5em;
	line-height: 1.6em;
	font-weight: 500;
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}	
.lema3 p {
	/*font-family: 'Exo 2', sans-serif;*/
	margin: 0px;
	color: #ddd;
	font-size: 4em;
	line-height: 1.2em;
	font-weight: 300;
	letter-spacing: 3px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}	

	
	
	
/***********************ANIMACIONS*************************/
	
	#section0 .lema1 {
	opacity: 1;
	transition: all 500ms ease-in;
	left: 2.9em;
}
body.fp-viewing-firstPage #section0 .lema1 {
	opacity: 1;
	transition: all 1000ms ease-out 500ms;
	left: 2.9em;
}

#section1 .lema3 {
	opacity: 0;
	transition: all 500ms ease-in;
	left: -10em;
}
body.fp-viewing-secondPage #section1 .lema3 {
	opacity: 0;
	transition: all 1000ms ease-out 500ms;
	left: 2.9em;
}
/******************************/
[data-aos="customAnimation"] {
	opacity: 1;
	color: #ccc;
	transition-property: transform, color;
}
[data-aos="customAnimation"].aos-animate {
	opacity: 1;
	color: #ddd;
}
/***/

[data-aos="langanimation"] {
	opacity: 1;
	color: #ccc;
	transition-property: transform, color;
}
[data-aos="langanimation"].aos-animate {
	opacity: 1;
	color: #ddd;
	font-weight: 400;
}
/***/

		
[data-aos="lema1anim"] {
	opacity: 0;
}
[data-aos="lema1anim"].aos-animate {
	opacity: 1;
}
}
