/* Color schemes */

.content--myOverlay {
	--color-text: #fbd54a;
	--color-bg: rgba(83,216,232,0.8);
	--color-link: #4d4f5f;
	--color-link-hover: #bfb5b5;
	--color-info: #fff;
	--color-main-bg: rgba(83,216,232,0.8);
	--path-fill-one: rgba(90,189,199,0.8);
	--path-fill-two: rgba(104, 164, 138, 0.85);
	--path-fill-three: rgba(44, 171, 182, 0.85);
	--path-fill-four: rgba(44, 146, 171, 0.85);
	--color-title: #fff;
	--color-menu: #000000;
	--color-menu-hover: #fff;
	--button-bg: #fff;
	--button-circle: #FFF;
	--button-line: #be1622;
}



/* HAMBURGER */


.hamburger {
	width: 64px;
	height: 64px;
	display: block;
	position: relative;
	cursor: pointer;
	position: absolute;
	top: 2.25em;
	right: 2.25em;
	z-index: 110;
	border-radius: 50%;
	background-color: var(--button-bg);
	pointer-events: auto;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body.impulse .hamburger {
	position: relative;
	top: 0.8em;
}

.hamburger::after {
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	border: 4px solid var(--button-circle);
	border-radius: 50%;
	-webkit-animation-duration: 4.2s;
	animation-duration: 4.2s;
	-webkit-animation-name: intervalHamburgerBorder;
	animation-name: intervalHamburgerBorder;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.hamburger-lines {
	width: 28px;
	height: 3px;
	overflow: hidden;
	position: absolute;
	z-index: 10;
}

.hamburger-lines-in {
	width: 84px;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
}

.hamburger-lines-in::before,
.hamburger-lines-in::after {
	width: 28px;
	height: 3px;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	background-color: var(--button-line);
}

.hamburger-lines-in::before {
	left: -56px;
}

.hamburger-lines-in::after {
	left: 0;
}

.line-01,
.line-02,
.line-03,
.line-cross01,
.line-cross02 {
	left: 18px;
}

.line-01 {
	top: 24.6px;
}

.line-02,
.line-cross01,
.line-cross02 {
	top: 32px;
}

.line-03 {
	top: 40px;
}

.line-cross01 {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.line-cross02 {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.hamburger-lines {
	-webkit-transition-duration: 1.6s;
	transition-duration: 1.6s;
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger-lines-in {
	-webkit-transition-duration: 1.6s;
	transition-duration: 1.6s;
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger-lines-in::before,
.hamburger-lines-in::after {
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

.lines-in-cross01,
.lines-in-cross02 {
	-webkit-transform: translateX(-33.3%);
	transform: translateX(-33.3%);
}

.lines-in-01 {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.lines-in-02 {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.lines-in-02::before,
.lines-in-02::after {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.lines-in-03 {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.lines-in-03::before,
.lines-in-03::after {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.lines-in-cross01 {
	-webkit-transition-delay: 0.0s;
	transition-delay: 0.0s;
}

.lines-in-cross02 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.lines-in-cross02::before,
.lines-in-cross02::after {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.hamburger.is-opened-navi .lines-in-01,
.hamburger.is-opened-navi .lines-in-02,
.hamburger.is-opened-navi .lines-in-03 {
	-webkit-transform: translateX(33.3%);
	transform: translateX(33.3%);
}

.hamburger.is-opened-navi .lines-in-cross01,
.hamburger.is-opened-navi .lines-in-cross02 {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.hamburger.is-opened-navi .lines-in-01 {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.hamburger.is-opened-navi .lines-in-02 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.hamburger.is-opened-navi .lines-in-03 {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.hamburger.is-opened-navi .lines-in-cross01 {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.hamburger.is-opened-navi .lines-in-cross02 {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.hamburger:hover .hamburger-lines-in::before,
.hamburger:hover .hamburger-lines-in::after {
	-webkit-transform: translateX(200%);
	transform: translateX(200%);
}

.hamburger:hover .lines-in-01::before,
.hamburger:hover .lines-in-01::after,
.hamburger:hover .lines-in-02::before,
.hamburger:hover .lines-in-02::after,
.hamburger:hover .lines-in-03::before,
.hamburger:hover .lines-in-03::after {
	-webkit-transition-duration: 2s;
	transition-duration: 2s;
}

.hamburger:hover .lines-in-cross01::before,
.hamburger:hover .lines-in-cross01::after,
.hamburger:hover .lines-in-cross02::before,
.hamburger:hover .lines-in-cross02::after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}

.hamburger.is-opened-navi:hover .lines-in-cross01::before,
.hamburger.is-opened-navi:hover .lines-in-cross01::after,
.hamburger.is-opened-navi:hover .lines-in-cross02::before,
.hamburger.is-opened-navi:hover .lines-in-cross02::after {
	-webkit-transition-duration: 2s;
	transition-duration: 2s;
}

.hamburger.is-opened-navi:hover .lines-in-01::before,
.hamburger.is-opened-navi:hover .lines-in-01::after,
.hamburger.is-opened-navi:hover .lines-in-02::before,
.hamburger.is-opened-navi:hover .lines-in-02::after,
.hamburger.is-opened-navi:hover .lines-in-03::before,
.hamburger.is-opened-navi:hover .lines-in-03::after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}



/* MENU */

.global-menu {
width: 100vw;
height: 90vh;
display: flex;
justify-content: center !important;
align-items: center;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 100;
text-align: center;
}

ul.global-menu__wrap > li > a {
color: #fff;
text-transform: uppercase;
font-weight: 400;
font-size: 15px;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}




.overlay-navi-item {
	opacity: 0;
}

.overlay-navi-item a:hover, 
.overlay-navi-item a:focus { color: var(--color-link-hover); }


.overlay-navi-item--demo-2:nth-child(odd) {
	transform: translateY(-100%) rotate(10deg);
}

.overlay-navi-item--demo-2:nth-child(even) {
	transform: translateY(-100%) rotate(-10deg);
}

.item-myOverlay {
	transition: transform 0.1s, opacity 0.1s;
	transform: translateY(100%);
	transition-timing-function: ease-out;
}

.overlay-navi-item:hover {
	color: var(--color-menu-hover);
}

.overlay-navi-item.is-opened {
	opacity: 1;
	transform: translateY(0) rotate(0);
	pointer-events: auto;
	transition-timing-function: ease;
}

.overlay-navi-item:nth-of-type(1) {
	transition-delay: 0s;
}

.overlay-navi-item.is-opened:nth-of-type(1) {
	transition-delay: 0.85s;
}

.overlay-navi-item:nth-of-type(2) {
	transition-delay: 0.05s;
}

.overlay-navi-item.is-opened:nth-of-type(2) {
	transition-delay: 0.8s;
}

.overlay-navi-item:nth-of-type(3) {
	transition-delay: 0.1s;
}

.overlay-navi-item.is-opened:nth-of-type(3) {
	transition-delay: 0.75s;
}

.overlay-navi-item:nth-of-type(4) {
	transition-delay: 0.15s;
}

.overlay-navi-item.is-opened:nth-of-type(4) {
	transition-delay: 0.7s;
}


/* demo 3 */
.item-myOverlay.is-opened {
	transition-duration: 0.3s;
}

.item-myOverlay:nth-of-type(1) {
	transition-delay: 0s;
}

.item-myOverlay.is-opened:nth-of-type(1) {
	transition-delay: 0.65s;
}

.item-myOverlay:nth-of-type(2) {
	transition-delay: 0s;
}

.item-myOverlay.is-opened:nth-of-type(2) {
	transition-delay: 0.7s;
}

.item-myOverlay:nth-of-type(3) {
	transition-delay: 0s;
}

.item-myOverlay.is-opened:nth-of-type(3) {
	transition-delay: 0.75s;
}

.item-myOverlay:nth-of-type(4) {
	transition-delay: 0s;
}

.item-myOverlay.is-opened:nth-of-type(4) {
	transition-delay: 0.8s;
}
.item-myOverlay:nth-of-type(5) {
	transition-delay: 0s;
}

.item-myOverlay.is-opened:nth-of-type(5) {
	transition-delay: 0.85s;
}




/* SHAPES */



.shape-overlays {
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
}

.shape-overlays.is-opened {
	pointer-events: auto;
}

.shape-overlays__path:nth-of-type(1) {
	fill: rgb(137, 208, 214);
}

.shape-overlays__path { opacity:0.85; }

@-webkit-keyframes intervalHamburgerBorder {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
}

@keyframes intervalHamburgerBorder {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
}


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

.line-01,
.line-02,
.line-03,
.line-cross01,
.line-cross02 {
	left: 20px;
}


ul.global-menu__wrap {
position: relative;
width: 100vw;
height: 90vh;
list-style: none;
list-style-position: inside;
display: block;
top:15%;
margin: 0 auto;
padding: 0 8%;
text-align:center;
padding-left: 8% !important;
}

ul.global-menu__wrap > li {
display:inline-block;
margin:10px auto;
width:80%;
border: 2px solid #fff;
border-radius: 3px;
background-color: #207287;
padding: 20px;
}



}


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



}


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

ul.global-menu__wrap {
position: relative;
width: 100vw;
height: 90vh;
list-style: none;
list-style-position: inside;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 4%;
padding-left: 4% !important;
top:0%;
}

ul.global-menu__wrap > li {
display:block;
min-width:17%;
height:130px;
border: 2px solid #fff;
border-radius: 3px;
background-color: #207287;
margin:5px;
padding: 10px;
}
ul.global-menu__wrap > li > a { font-size: 13px; }
}


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


ul.global-menu__wrap {
position: relative;
width: 100vw;
height: 90vh;
list-style: none;
list-style-position: inside;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 6%;
padding-left: 6% !important;
top:0%;
}

ul.global-menu__wrap > li {
display:block;
margin:10px;
width:17%;
height:140px;
border: 2px solid #fff;
border-radius: 3px;
background-color: #207287;
padding: 20px;
}
ul.global-menu__wrap > li > a { font-size: 15px; }

}




@media only screen and (min-width : 1200px) {
ul.global-menu__wrap > li { height:158px; }
ul.global-menu__wrap > li > a { font-size: 17px;line-height:25px; }


}



@media screen and (max-width: 55em) {
	.hamburger {
		position: fixed;
		top: 0.5em;
		right: 0.5em;
		transform: scale(0.75);
	}
}