/***** FONTS, VARIABLES *****/
@media only screen and (min-width: 1200px)
{
	:root
	{
		/* VALUES */
		--primary-color: #FE019A;

		--header-padding-top-bottom: 12px;
		--header-height: 105px;
		--header-background-color: black;
		--header-logo-color: white;
		--header-opt-color: white;
		--default-transition-time: 0.15s;

		--body-background-color: #101010;

		--footer-padding-top-bottom: 20px;
		--footer-height: 175px;
	}
}

@media only screen and (max-width: 1199px)
{
	:root
	{
		/* VALUES */
		--primary-color: #FE019A;

		--header-padding-top-bottom: 12px;
		--header-height: 15vh;
		--header-background-color: black;
		--header-logo-color: white;
		--header-opt-color: white;
		--default-transition-time: 0.15s;

		--body-background-color: #101010;

		--footer-padding-top-bottom: 70px;
		--footer-padding-left-right: 45px;
		--footer-height: 175px;
	}
}

@font-face
{
	font-family: 'FuturaBold';
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/FuturaBold.ttf');
}

@font-face
{
	font-family: 'FuturaBook';
	font-style: normal;
	src: url('../fonts/FuturaBook.ttf');
}

@font-face
{
	font-family: 'FuturaBookItalic';
	font-style: normal;
	src: url('../fonts/FuturaBookItalic.ttf');
}


/*** LOADING STYLES ***/
.circular-loader
{
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    width: 20px;
    height: 20px;
    margin: auto;
}

.loader-path
{
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -10;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes rotate
{
    100%
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate
{
    100%
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash
{
    0%
    {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50%
    {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100%
    {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes dash
{
    0%
    {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50%
    {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100%
    {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@-webkit-keyframes color
{
    0%
    {
        stroke: #8b8b8b;
    }
    40%
    {
        stroke: #8b8b8b;
    }
    66%
    {
        stroke: #8b8b8b;
    }
    80%, 90%
    {
        stroke: #8b8b8b;
    }
}

@keyframes color
{
    0%
    {
        stroke: #8b8b8b;
    }
    40%
    {
        stroke: #8b8b8b;
    }
    66%
    {
        stroke: #8b8b8b;
    }
    80%, 90%
    {
        stroke: #8b8b8b;
    }
}

@media only screen and (min-width: 1200px)
{
/*** HEADER ***/
	header.desktop
	{
		height: var(--header-height);
		background-color: var(--header-background-color);
		padding-top: var(--header-padding-top-bottom);
		padding-bottom: var(--header-padding-top-bottom);
		font-family: "FuturaBold";
		position: relative;
	}
	header.mobile
	{
		display: none;
	}
	#logo
	{
		height: 75%;
	    position: absolute;
	    top: 47%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    fill: var(--header-logo-color);
	}
	#main_menu
	{
		display: inline-block;
	    position: absolute;
	    top: 50%;
	    left: 40px;
	    transform: translateY(-50%);
	}
	#main_menu a
	{
		display: inline-block;
		margin-right: 25px;
		color: var(--header-opt-color);
		font-size: 16pt;
		letter-spacing: 2px;
		transition: color var(--default-transition-time);
	}
	#main_menu a:hover, #main_menu a.selected
	{
		color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#main_menu a::after
	{
		content: '';
		display: block;
		width: 0%;
		height: 3px;
		background-color: var(--header-opt-color);
		transition: all var(--default-transition-time);
	}
	#main_menu a:hover::after, #main_menu a.selected::after
	{
		width: 100%;
		background-color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#social_media
	{
	    position: absolute;
	    top: 50%;
		right: 40px;
	    transform: translateY(-50%);
	}
	#social_media a
	{
		width: 20px;
		height: 20px;
		margin-left: 15px;
		display: inline-block;
		fill: var(--header-opt-color);
		transition: fill var(--default-transition-time);
	}
	#social_media a:hover
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}

/*** FOOTER ***/
	footer.desktop
	{
		min-height: var(--footer-height);
		padding-top: var(--footer-padding-top-bottom);
		padding-bottom: var(--footer-padding-top-bottom);
		background-color: black;
		font-family: "FuturaBook";
		font-size: 16px;
		color: white;
	}
	footer.mobile
	{
		display: none;
	}
	.footer_column
	{
		vertical-align: text-top;
		display: inline-block;
		width: calc(50% - 55px);
		margin-left: 25px;
		margin-right: 25px;
	}
	#language_select
	{
		display: block;
		margin-bottom: 20px;
	}
	#language_select .language_selector
	{
		color: white;
		cursor: pointer;
		display: inline-block;
	}
	#language_select .language_selector:hover, #language_select .language_selector.selected
	{
		color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#language_select .language_selector::after
	{
		content: '';
		display: block;
		width: 0%;
		height: 1px;
		background-color: var(--header-opt-color);
		transition: all var(--default-transition-time);
	}
	#language_select .language_selector:hover::after, #language_select .language_selector.selected::after
	{
		width: 100%;
		background-color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#contact_us a svg
	{
		fill: white;
		transition: all var(--default-transition-time);
	}
	#contact_us a:hover svg
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#contact_us a text
	{
		vertical-align: middle;
		color: white;
		transition: color var(--default-transition-time);
	}
	#contact_us a:hover text
	{
		color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#mail_icon
	{
		width: 22px;
		vertical-align: middle;
		fill: white;
		margin-right: 4px;
	}
	#newsletter_info_body
	{
		display: block;
	}
	#newsletter_form
	{
		margin-top: 15px;
	}
	#newsletter_form input
	{
		width: calc(75% - 4px);
		vertical-align: middle;
		height: 30px;
		background-color: transparent;
		border: 2px solid var(--primary-color);
		padding: 5px;
		font-family: "FuturaBook";
		color: white;
	}
	#newsletter_form input::placeholder
	{
		font-family: "FuturaBookItalic";
		color: #8b8b8b;
	}
	.newsletter_btn
	{
		width: calc(24%);
		vertical-align: middle;
		height: 30px;
		background-color: var(--body-background-color);
		border: none;
		padding: 5px;
		color: white;
		font-family: "FuturaBook";
	}
	.newsletter_btn text
	{
		vertical-align: middle;
	}
	.newsletter_btn svg
	{
		vertical-align: middle;
		width: 16px;
		fill: white;
	}
	#newsletter_return_btn
	{
		margin-top: 8px;
	}
	#rights
	{
		color: #8b8b8b;
		font-size: 14px;
		margin-top: 30px;
		margin-left: 25px;
		margin-right: 25px;
		text-align: center;
	}
}

@media only screen and (max-width: 1199px)
{
/*** HEADER ***/
	header.desktop
	{
		display: none;
	}
	header.mobile
	{
		height: var(--header-height);
		background-color: var(--header-background-color);
		padding-top: var(--header-padding-top-bottom);
		padding-bottom: var(--header-padding-top-bottom);
		font-family: "FuturaBold";
		position: relative;
		z-index: 2;
	}
	#logo
	{
		height: 75%;
	    position: absolute;
	    left: 5%;
	    top: 50%;
	    transform: translateY(-50%);
	    fill: var(--header-logo-color);
	}
	#burger
	{
		cursor: pointer;
		height: 30%;
	    position: absolute;
	    right: 5%;
	    top: 50%;
	    transform: translateY(-50%);
	    fill: var(--header-logo-color);
	}
	#burger img
	{
		height: 100%;
	}
	#main_menu
	{
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		top: calc(var(--header-height) + 24px);
	    position: fixed;
	    width: 45%;
	    background-color: var(--header-background-color);
	    border-bottom: 2px solid white;
	    border-left: 2px solid white;
	    z-index: 1;
		transition: all var(--default-transition-time);
	}
	#main_menu.opened
	{
		right: 2px;
	}
	#main_menu.closed
	{
		right: calc(-45% - 2px);
	}
	#main_menu a.burger
	{
		color: var(--header-opt-color);
		text-align: center;
		display: block;
		font-size: max(3vh, 3vw);
		padding-top: 15px;
		padding-bottom: 15px;
		margin-right: 0px;
	}
	#main_menu a.burger:last-child
	{
		margin-bottom: 50px;
	}
	#main_menu a.burger:hover, #main_menu a.burger.selected
	{
		color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#social_media
	{
		width: 100%;
		margin-top: auto;
		padding-top: 20px;
		padding-bottom: 20px;
		border-top: 1px solid white;
		text-align: center;
	}
	#social_media a
	{
		width: 4vw;
		vertical-align: middle;
		display: inline-block;
		fill: var(--header-opt-color);
		transition: fill var(--default-transition-time);
	}
	#social_media a:not(:first-child)
	{
		margin-left: 6%;
	}
	#social_media a:hover
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}

/*** FOOTER ***/
	footer.desktop
	{
		display: none;
	}
	footer.mobile
	{
		min-height: var(--footer-height);
		padding-left: var(--footer-padding-left-right);
		padding-right: var(--footer-padding-left-right);
		padding-top: var(--footer-padding-top-bottom);
		padding-bottom: var(--footer-padding-top-bottom);
		background-color: black;
		font-family: "FuturaBook";
		font-size: max(2.5vh, 2.5vw);
		color: white;
	}
	.footer_row
	{
		vertical-align: text-top;
		display: block;
		width: 100%;
		margin-left: 25px;
		margin-right: 25px;
	}
	.footer_row:first-child
	{
		margin-bottom: 50px;
	}
	.footer_row > div
	{
		vertical-align: text-top;
		display: inline-block;
		width: calc(50% - 60px);
	}
	#language_select .language_selector
	{
		color: white;
		cursor: pointer;
		display: inline-block;
	}
	#language_select .language_selector:hover, #language_select .language_selector.selected
	{
		color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#language_select .language_selector::after
	{
		content: '';
		display: block;
		width: 0%;
		height: 1px;
		background-color: var(--header-opt-color);
		transition: all var(--default-transition-time);
	}
	#language_select .language_selector:hover::after, #language_select .language_selector.selected::after
	{
		width: 100%;
		background-color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#contact_us a svg
	{
		width: max(2vh, 2vw);
		fill: white;
		transition: all var(--default-transition-time);
	}
	#contact_us a:hover svg
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#contact_us a text
	{
		vertical-align: middle;
		color: white;
		transition: color var(--default-transition-time);
	}
	#contact_us a:hover text
	{
		color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#mail_icon
	{
		width: 22px;
		vertical-align: middle;
		fill: white;
		margin-right: 4px;
	}
	#newsletter_info_body
	{
		display: block;
		font-size: max(1.5vh, 1.5vw);
	}
	#newsletter_form
	{
		width: 75% !important;
		margin-top: 15px;
	}
	#newsletter_form input
	{
		width: 60%;
		vertical-align: middle;
		height: max(35px, 7vh);
		background-color: transparent;
		border: 2px solid var(--primary-color);
		padding: 5px;
		font-family: "FuturaBook";
		font-size: max(2vh, 2vw);
		color: white;
	}
	#newsletter_form input::placeholder
	{
		font-family: "FuturaBookItalic";
		color: #8b8b8b;
	}
	.newsletter_btn
	{
		min-width: 80px;
		width: 35%;
		vertical-align: middle;
		height: max(40px, 8vh);
		background-color: var(--body-background-color);
		border: none;
		padding: 5px;
		color: white;
		font-family: "FuturaBook";
		font-size: max(2vh, 2vw);
	}
	.newsletter_btn text
	{
		vertical-align: middle;
	}
	.newsletter_btn svg
	{
		vertical-align: middle;
		width: max(2vh, 2vw);
		fill: white;
	}
	#newsletter_return_btn
	{
		margin-top: 8px;
	}
	#rights
	{
		color: #8b8b8b;
		font-size: max(1vh, 1vw);
		margin-top: 60px;
		margin-left: 25px;
		margin-right: 25px;
		text-align: center;
	}
}

/*** GENERAL ***/
body
{
	background-color: var(--body-background-color);
	color: white;
	margin: 0;
	height: 100%;
}

a
{
	text-decoration: none;
}

input:focus, button:focus
{
    outline: none;
}

.hidden
{
	display: none !important;
}

@media only screen and (min-width: 1200px)
{
	#main
	{
		min-height: calc(100% - var(--header-height) - var(--footer-height)
			- var(--header-padding-top-bottom) * 2 - var(--footer-padding-top-bottom) * 2);
		text-align: center;
	}
	.title1
	{
		font-family: "FuturaBold";
		font-size: 16pt;
		letter-spacing: 2px;
		color: white;
		margin-bottom: 5px;
	}
}

@media only screen and (max-width: 1199px)
{
	#main
	{
		min-height: calc(100% - var(--header-height) - var(--footer-height)
			- var(--header-padding-top-bottom) * 2 - var(--footer-padding-top-bottom) * 2);
		text-align: center;
		padding-top: max(7vh, 7vw);
		padding-bottom: max(7vh, 7vw);
		padding-left: max(4vh, 4vw);
		padding-right: max(4vh, 4vw);
	}
	.title1
	{
		font-family: "FuturaBold";
		font-size: max(3vh, 3vw);
		letter-spacing: 2px;
		color: white;
		margin-bottom: 5px;
	}
}