@charset "UTF-8";
:root {
	--primary-color: #edbf34;
	--secondary-color: #e7d9bb;
}
body, html { height:100%; min-height:100vh; background:white; font-family: 'Gotham', sans-serif;}
html { background:white; }

.hide { display: none; }
a:link, a:visited { color:inherit; }
img { max-width: 100%; }

#login {
	padding-bottom: 100px;
}
.home-image {
	background: url(../images/background.jpg?id=1) center center;
	background-size: cover;
	height:390px;
	overflow-y: hidden;
}
.background2 {
	background: url(../images/background2.jpg) top right no-repeat;
	/* background-size: cover; */
}
h2 {
	font-size:24px; 
	color:black;
	margin-top:40px;
	margin-bottom:50px;
	line-height:40px;
	text-transform: uppercase;
	font-weight: 600;
}
h3 {
	font-size:18px;	
	font-weight: 600;
}
table, th, td {
	font-size:15px;
}
th, td {
	background: white;
}
.page-certificate table {
	width:100%;
	border: none;
	border-collapse: separate; 
	border-spacing: 0 20px;
}
.page-certificate table tr {
	margin-bottom: 20px;
}
.page-certificate table tr td.caption { 
	font-weight: 500;
	border: 2px solid #878585;
	border-right: none;
	background: #d9d9d9;
}
.page-certificate table tr td.value {
	border: 2px solid #878585;
	-webkit-box-shadow: inset 0px 5px 8px 0px rgba(2,3,2,0.2);
	-moz-box-shadow: inset 0px 5px 8px 0px rgba(2,3,2,0.2);
	box-shadow: inset 0px 5px 8px 0px rgba(2,3,2,0.2);
}
.button {
	background: var(--primary-color);
	border:1px solid var(--primary-color);
	border-radius: 1px;
	color:black !important;
	display:inline-block;
	font-size:20px;
	font-weight:500;
	padding:10px 40px;
	width: 100%;
}
.button2 {
	background: var(--primary-color);
	border:1px solid var(--primary-color);
	border-radius: 1px;
	color:black !important;
	display:inline-block;
	font-size:20px;
	font-weight: 400;
	padding:10px 20px;
	margin-top:10px;
	margin-bottom:10px;
}   
.button:hover, .button2:hover {
	background:black;
	color: var(--primary-color) !important;
	border: 1px solid black;
	text-decoration: none;
}

input[type='text'] {
	padding:		15px;
	background:  	#d0eafb;
	border:			1px solid #1d1d1d;
	box-shadow: 	inset -1px 1px 8px -1px rgba(84, 113, 135, 0.3);
	width: 			100%;
}
.details {
	font-size:15px;
	font-weight: 500;
}
.details a {
	color: #5c8acf;
}
/* HEADER */ 
.header-container {
	background: white;
	color:blackwhite;
	padding-top:0px;
	border-bottom: 16px solid var(--primary-color);
}
.header-container img {
	max-width: 100%;
}
.header .logo a:hover {
	text-decoration:	none;
}
.header .logo:hover { text-decoration:none; }
.header .logo .logo-container,
.header .languages-container 
{
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
.header .languages-container {
	padding-bottom: 20px;
	align-items: end;
	flex-direction: row;
}
.transitions {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* Mobile overlay */ 
.mobileoverlay .close:hover {
	color:black;
}
.logo { padding-top: 20px; padding-bottom:20px; }

/* FOOTER */ 
.footer-container {
	position: fixed;
	bottom: 0px;
	left: 0;
	right: 0;
	margin-top: 30px;
	z-index: 999;
	padding: 20px;
	background:	black; 
	color:white; 
	font-size:17px;
	font-weight:300;
}
.footer-container span {
	font-size:11px;
}
::-webkit-input-placeholder { color:grey; font-size:15px; top:-20px; }
:-ms-input-placeholder { color:grey; font-size:15px; top:-20px; }
::-moz-placeholder { color:grey; opacity:1; font-size:15px; top:-20px; }
:-moz-placeholder { color:grey; opacity:1; font-size:15px; top:-20px; }

@media (min-width:768px) {
	.set-size {
		padding-left:		8%;
		padding-right:	8%;
	}
}

@media (max-width: 767px) {
	.page-certificate h2 {
		font-size: 18px;
		line-height: 22px;
	}
	.home-image {
		height:100px;
	}
	.button {
		padding: 7px 30px;
		font-size: 20px;
	}
	.container { min-width:auto; }

	.footer-container {
		font-size:13px;
		background-position: bottom;
		position:relative;
		height: auto;
		padding-top:0;
		margin-top:20px;
	}
	body::before {
		background-position: bottom center;
		background-size: cover;
	}
	.header .languages-container {
		flex-wrap: wrap;
		justify-content: center;
	}
	#login {
		padding-bottom: 20px;
	}
}
@media (orientation:landscape) and (max-height:420px) {
	.header {
		margin-bottom:10px;
	}
}
@media (max-height: 880px) {
	.page- .footer-container { position: relative; }
}