/********************************************************************************
Fonts
********************************************************************************/

@font-face { font-family: peace-sans-web; src: url(../fonts/peace-sans-web.ttf); font-display: fallback; }
@font-face { font-family: texgyrecursor-regular; src: url(../fonts/texgyrecursor-regular.otf); font-display: fallback; }
@font-face { font-family: raleway-thin; src: url(../fonts/raleway-thin.ttf); font-display: fallback; }
		
/********************************************************************************
Variables
********************************************************************************/

.color-white { color: #FFFFFF; }
.color-black { color: #000000; }
.color-purple { color: #640064; }
.color-yellow { color: #F0D214; }
.bg-color-purple { background-color: #640064; }
.bg-color-yellow { background-color: #F0D214; }
.bg-color-pink { background-color: #89306B; }
.bg-color-red { background-color: #E50C60; }
.bg-color-green { background-color: #00CC72; }

.float-right { float: right; }
.center { text-align: center; }
.italic { font-style: italic; }
.rounded { -moz-border-radius: 5px;  -webkit-border-radius: 5px; border-radius: 5px; }
.shadow { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.23); }
.small { font-size: 12px; }

/********************************************************************************
Main
********************************************************************************/

* { font-family: 'texgyrecursor-regular', Courier, monospace; font-size: 18px; color: #3C013C; margin: 0; padding: 0; }

html, body { width: 100%; height: 100%; font-family: 'texgyrecursor-regular', Courier, monospace; }
button { outline: none; cursor: pointer; padding: 10px 20px; border: 0; color: white; transition: 0.6s; }

input, textarea { box-sizing: border-box; outline: none; border: 0; width: 100%; color: #640064; background: none; border-bottom: 1px solid #640064; margin-bottom: 20px; }
input {  border-bottom: 1px solid #640064; height: 30px; }
textarea { resize: none; border: 1px solid #640064; padding: 10px; height: 200px; }

div { -webkit-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; }
div.container { width: 1024px; margin: 0 auto; overflow: auto; }
div.bullet-purple span:before { content: url("../images/bullet-purple.gif"); }

hr { border: 0; border-top: 1px solid #F0D214; margin: 40px 0 20px 0; }

/********************************************************************************
INPUT placeholder
********************************************************************************/

div.input-div { position: relative; }
input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label { top: -10px; left: 0; font-size: 12px; opacity: 1; }
textarea:focus ~ .floating-label-text, textarea:not(:focus):valid ~ .floating-label-text { top: 10px; left: 10px; font-size: 12px; opacity: 1; }
.floating-label { color: #888888; position: absolute; pointer-events: none; left: 0; top: 0; transition: 0.2s ease all; }
.floating-label-text { color: #888888; position: absolute; pointer-events: none; left: 10px; top: 10px; transition: 0.2s ease all; }

/********************************************************************************
LINKS
********************************************************************************/

a { outline: none; }
a:hover { color: #89306B; }
a.link-white:link, a.link-white:visited, a.link-white:active { text-decoration: none; color: white; display: inline-block; font-size: 20px; }
.link-white::after { content: ''; display: block; width: 0; height: 2px; background: #FFFFFF; transition: width .3s; }
.link-white:hover::after { width: 100%; transition: width .3s; }

/********************************************************************************
NAVBAR
********************************************************************************/

#navbar { z-index: 2; display: none; position: fixed; top: 0; padding: 20px; height: 45px; width: 100%; }
#navbar .left { float: left; display: flex; align-items: flex-end; }
#navbar .left div:nth-child(2) { padding-left: 20px; color: white; }
#navbar .right { float: right; display: flex; align-items: flex-end; padding-right: 40px; }
#navbar .right div:first-child { padding-right: 20px; }
#navbar .right div:first-child .lang { position: relative; bottom: -7px; color: white; }

/********************************************************************************
MENU
********************************************************************************/

#menu-list { z-index: 1; position: absolute; display: none; width: 100%; height: calc(100% - 65px); top: 85px; cursor: pointer; }
#menu-list div { height: 25%; display: table; width: 100%; }
#menu-list div div { display: table-cell; vertical-align: middle; width: 100%; }
#menu-list div a { color: white; text-decoration: none; }
#menu-list div { transition: 1s; background: #AAAAAA; border-bottom: 1px solid white; border-left: 50px solid #f2da4d; box-sizing: border-box;}
#menu-list div:hover { background: #666666; border-left: 60px solid #640064; }
#menu-list div a:before { content: url("../images/bullet.gif"); }

#menu-list a 
{ 
	font-family: raleway-thin, "sans-serif"; font-weight: bold; display: inline-block; padding-left: 70px; position: relative; 
	letter-spacing: 5px; text-decoration: none; font-size: 30px; 
}

/********************************************************************************
HAMBURGER
********************************************************************************/

#hamburger 
{
	 width: 60px; height: 45px; position: relative; cursor: pointer;
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;
}

#hamburger span 
{
	display: block; position: absolute; height: 9px; width: 100%; background: #F0D214; border-radius: 5px; opacity: 1; left: 0;
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;
}

#hamburger span:nth-child(1) { top: 0px; }
#hamburger span:nth-child(2),#hamburger span:nth-child(3) { top: 18px; }
#hamburger span:nth-child(4) { top: 36px; }

#hamburger.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
#hamburger.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#hamburger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#hamburger.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }

/********************************************************************************
SECTION TITLE
********************************************************************************/

section { padding-bottom: 50px; } 
section h1 { font-family: raleway-thin, "sans-serif"; font-size: 60px; letter-spacing: 4px; padding: 68px 0 30px 0; color: #303030; }
section div.title-line { z-index: -1; position: absolute; background: #EDE6D7; width: 100%; height: 100px; left: 0; border-top: 10px solid #A29D93; }
section h1:before { content: url("../images/bullet.gif"); }

/********************************************************************************
FOOTER
********************************************************************************/

#footer { text-align: center; padding: 50px 0 30px 0; font-size: 15px; }
#footer img { margin: 0 6px 20px 6px; transition: 0.6s; }
#footer img:hover { background: #640064; transition: 0.6s; }
#footer span.vivid { padding: 0 50px 10px 50px; border-bottom: 1px solid white; }
div.fb-icon { padding-top: 20px; }
div.fb-icon a { text-decoration: none; }
div.fb-icon a:hover { text-decoration: none; }

/********************************************************************************
MEDIA
********************************************************************************/

@media (max-width: 1200px)
{ 
	div.container { width: 100%; margin: 0; padding: 0 20px; box-sizing: border-box; }
}

@media (max-width: 800px)
{ 
	#navbar #vivid { display: none; }
}

@media (max-width: 600px)
{ 
	#menu-list a { font-size: 24px;  padding-left: 60px; }
	section h1 { font-size: 40px; letter-spacing: 2px; padding: 60px 0 30px 0; }
	section div.title-line { height: 80px; }
	#navbar div.left img { height: 30px; width: auto; }
	#navbar { height: 30px; }
	#hamburger { width: 40px; height: 30px; }
	#hamburger span { height: 6px; border-radius: 6px; }
	#hamburger span:nth-child(2),#hamburger span:nth-child(3) { top: 12px; }
	#hamburger span:nth-child(4) { top: 24px; }
	#hamburger.open span:nth-child(1) { top: 12px; }
	#hamburger.open span:nth-child(4) { top: 12px; width: 0%; left: 50%; }	
}

@media (max-width: 500px)
{ 
	#menu-list a { font-size: 20px;  padding-left: 50px; }
	#menu-list div { border-left: 30px solid #f2da4d; }
	#menu-list div:hover { border-left: 40px solid #640064; }
}

@media (max-width: 400px)
{ 
	section h1 { font-size: 30px; padding: 70px 0 30px 0; }
	#menu-list a { font-size: 20px;  padding-left: 20px; }
	#footer span.vivid { padding: 0 40px 10px 40px; }
}

@media (max-width: 350px)
{ 
	#menu-list a { font-size: 18px; }
	#menu-list div { border-left: 15px solid #f2da4d; }
	#menu-list div:hover { border-left: 20px solid #640064; }

}

@media (max-width: 350px)
{ 
	section h1 { font-size: 28px; padding: 75px 0 30px 0; }
}