@import url('/fonts/PPHatton/style.css');
@import url('/fonts/TTCommons/style.css');

:root {
    --btn-bg: #1D7060;
    --btn-hover: #32C6A9;
    --title-color: #123131;
    --default-font:
    'TTCommons', Arial, sans-serif;
    --bold-font:
    'TTCommons Bold', Arial, sans-serif;
    --secondary-font:
    'PPHatton', Arial, sans-serif;
    --title-font:
    'PPHatton', Arial, sans-serif;
    --screen-bg-dark: #123131;
    --screen-bg-light: #F0EAE4;
}

body {
    background-color: var(--screen-bg-light);
    padding: 0;
    margin: 0;
    font-family: 'TTCommons', sans-serif;
    font-size: 18px;
}
header {
    background-color: #FFFFFF;
    padding: .75em 4em;
    width: 100%;
    box-sizing: border-box;
}
	.yd-header-logo img {
	    width: 150px;
	    display: block;
	}
#page-content {
    padding: 2em 25% 4em;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--screen-bg-light);
}
	a {
		color: var(--btn-bg);
	}
	h1 {
	    font-family: 'PPHatton', sans-serif;
	    color: var(--title-color);
	    margin: 0 0 .5em;
	    line-height: 1.1em;
	    font-size: 42px;
	}
#footer {
	background-color: var(--screen-bg-dark);
	padding: 2em;
	color: #cbcbcb;
	font-size: .85em;
	width: 100%;
	box-sizing: border-box;
}
	#yd-copyright {
	    margin: 0 auto .75em;
	    display: block;
	    text-align: center;
	}
	.yd-footer-links {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	    .yd-footer-links a {
	        color: #cbcbcb;
	        margin: 0 .75em;
	 }

.yd-button {
    display: inline-block;
    text-decoration: none;
    background-color: var(--btn-bg);
    color: #FFF;!;!i;!;
    padding: .75em 2em;
    border-radius: 100px;
    border: 0 none;
}
	.yd-button:hover {
	    background-color: var(--btn-hover);
	}

#yd-loading {
    display: none;
    margin: 0 auto;
}

@media screen and (max-width: 1170px) {
	header {
		padding: .75em 3em;
	}
		.yd-header-logo img {
		    width: 140px;
		}
	#page-content {
		padding: 2em 20% 3em;
	}
		h1 {
			font-size: 36px;
		}
}

@media screen and (max-width: 768px) {
	header {
		padding: .5em 1.5em;
	}
		.yd-header-logo img {
		    width: 140px;
		}
	#page-content {
		padding: 1.5em 1.25em 2em;
	}
		h1 {
			font-size: 32px;
		}
}

@media screen and (max-width: 468px) {
	header {
		padding: .5em 1em;
	}
		.yd-header-logo img {
		    width: 120px;
		}
	#page-content {
		padding: 1em 1em 1.5em;
	}
		h1 {
			font-size: 24px;
		}
}