@font-face {
    font-family: "RobotoCondensed";
    src: url("./RobotoCondensed-Regular.ttf"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "RobotoCondensed";
    src: url("./RobotoCondensed-Bold.ttf"); /* Modern Browsers */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "RobotoCondensed";
    src: url("./RobotoCondensed-Italic.ttf"); /* Modern Browsers */
    font-weight: normal;
    font-style: italic;
}


body {
	background: none;
}

nav.head-nav {
	height: 24px;
	text-align: right;
	margin-top: 4px;
}

nav.head-nav a, nav.head-nav a:hover {
	color: #00358f;
	padding: 0;
	font-family: Roboto, Arial, Sans-serif;
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
}

nav.head-nav a:hover {
	color: #aa501e;
	text-decoration: none;
}

nav.head-nav a.sign-in {
	font-size: 16px;
	line-height: 26px;
	margin-left: 0;
	/*border-left: 1px solid #00358f;*/
	padding: 0 10px 0 15px;
}

nav.head-nav a.sign-in span {
	display: inline-block;
	height: 24px;
	width: 24px;
	background-color: #007dca;
	color: #ffffff;
	text-align: center;
	margin: 0 0 0 6px;
}

nav.head-nav .social-media-icon {
	margin: 0 5px;
	padding: 0;
}

nav.head-nav .social-media-icon:last-of-type {
	margin-right: 10px;
}

nav.head-nav .social-media-icon img {
	height: 20px;
}

.header-main.admin_header {
	height: auto;
	padding-bottom: 0px;
	margin-bottom: 20px;
	margin-top: 10px;
	background: none;
	position: relative;
}

.header-main h1 {
	position: static;
	left: unset;
	top: unset;
}

.header-main a.logo {
	display: inline-block;
	width: 328px;
	height: auto;
	max-width:100%;
}

.header-main a.logo img {
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.header-main .addition {
	display: block;
	float: right;
	max-width: none;
	padding: 0;
	margin: 50px 40px 0px 20px;
	/*color: #1d1d1b;*/
	color: #00358f;
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-weight: bold;
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
	text-align: right;	
}

nav.top-nav {
	display: none;
	background-color: #fff;
}

nav a, nav a:visited, nav a:hover {
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-size: 22px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #00358f;
}

nav a.bottom-item {
	display:none;
}

span.header-more {
	display: inline-block;
	height: 20px;
	width: 20px;
	background-image: url("../images/arrow-right-blue.png");
	background-size: 4px 9px;
	background-position: center bottom 3px;
	background-repeat: no-repeat;
	margin-left: 0px;
}

a.header-link:hover span.header-more {
	background-image: url("../images/arrow-right-blue.png");
}

article.block {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: top;
    background-color: #eff6fb;
    /*color: #00358f;*/
    color: #000000;
    font-family: Roboto, Arial, Sans-serif;
    font-weight: normal;
}

article.block .content {
	padding: 0 40px 20px 40px;
}

main h1 {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 20px 0 20px 40px;
	width: auto;
	background-color: unset;
	color: #00358f;
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-weight: bold;
	font-size: 22px;
	text-transform: uppercase;
}

main h2 {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 0;
	width: auto;
	background-color: unset;
	color: #00358f;
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-weight: bold;
	font-size: 22px;
	line-height: 30px;
	text-transform: uppercase;
}

a, a:visited {
	color: #aa501e;
	text-decoration: none;
}

a:hover {
	color: #aa501e;
	text-decoration: underline;
}

a.pdf,div.content a[href$=".pdf"] {
	background: url("../images/icons/pdf32.png") no-repeat left top;
	background-size:16px 16px;
	padding-left:20px;
}

.tiles li {
	display: inline-block;
	justify-content: space-around;
	align-content: stretch;
	text-align: center;
	box-sizing: border-box;
	padding: 0;
	color: #ffffff;
	font-size: 22px;
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-weight: bold;
	text-decoration: none;
	background-color: #00358f;
	border-radius: 5px;
}

.tiles li:hover {
	background-color: #0040ac;
}

.tiles a {
	display: grid;
	align-content: center;
	text-align: center;
	box-sizing: border-box;
	padding: 0 20px;
	color: #ffffff;
	font-size: 22px;
	line-height:26px;
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-weight: normal;
	text-decoration: none;
	background-color: #00358f;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.tiles a:hover {
	text-decoration: none;
	background-color: #0040ac;
	color: #ffffff;
	/*color: #f7bd7b;*/
}

button {
	border-radius: 5px;
}

hr {
	margin: 1rem 0;
	color: inherit;
	background-color: #007dca;
	border: 0;
	opacity: 1;
}

ul.lista {
	padding-left: 1rem;
}

ul.lista li {
	font-size: 18px;
	line-height: 22px;
}


.content iframe[src*="youtube"] {
	width:100%;
	max-width:600px;
	height: 50vw;
	max-height: 336px;
	margin-bottom:20px;
}


nav.bottom-nav {
	height: auto;
	min-height: 80px;
	margin: 0;
	padding: 40px 0 10px 0;
	background-color: #fff;
	display: block;
	position: initial;
	width: 100%;
	font-family: Roboto, Arial, Sans-serif;
	font-weight: normal;
	color: #1d1d1b;
	text-align:right;
}

nav.bottom-nav a {
	display: inline-block;
	font-family: Roboto, Arial, Sans-serif;
	font-weight: bold;
	color: #1d1d1b !important;
	margin: 0px 0px 0px 0px !important;
	padding: 0px 15px 0px 10px;
	font-size: 16px !important;
	line-height: 16px;
	border-right:1px solid #1d1d1b;
}

nav.bottom-nav a:hover {
	margin: 0px 0px 0px 0px !important;
	padding: 0px 15px 0px 10px;
	color:#aa501e !important;
}

nav.bottom-nav a:last-of-type {
	margin: 0px 0px 0px 0px !important;
	padding: 0px 0px 3px 10px;
	border-right: none;
}

footer {
	background-color: #fff;
	margin: 0;
	padding: 20px 40px;
	font-family: RobotoCondensed, Roboto, Arial, Sans-serif;
	font-weight: normal;
	color: #1d1d1b;
	border-top:1px solid #1d1d1b;
	position:relative;
}

footer a, footer a:visited {
	/*color: #aa501e;*/
	color: #1d1d1b;
	text-decoration: none;
}

footer a:hover {
	color: #aa501e;
	text-decoration: none;
}

footer .logo-bw {
	display: block;
	width: 90px;
	height: 60px;
	position: absolute;
	left: 0;
	top: 28px;
}

footer .logo-bw img {
	display: block;
	position:absolute;
	left:0;
	top:0;
	margin: 0;
	height: 59px;
	width:auto;
}

footer p {
	margin: 0;
}

footer ul {
	margin: 0;
	display: inline-block;
	vertical-align: top;
}



@media all and (min-width: 0px) {

	nav.head-nav {
		height: 24px;
		margin-right: 6px;
	}

	nav.head-nav a.sign-in {
		font-size: 16px;
		padding: 0 10px 0 15px;
	}
	
	nav.head-nav a.sign-in span {
		height: 24px;
		width: 24px;
		font-size: 18px;
		line-height: 26px;
	}
	
	div.center-block {
		padding: 0;
	}

	.header-main {
		height: 160px;
	}

	.header-main a.logo img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.header-main .addition {
		float: none;
		margin: 10px 60px 0px 20px;
		padding:0;
		font-size: 18px;
		line-height: 24px;
		text-align: left;
	}
	
	.hamburger {
		background-color: #00358f;
		/*margin-top: -25px;*/
		top: 135px;
	}
	
	.hamburger:active, .hamburger:hover {
		background-color: #fac07c;
	}
	
	nav.top-nav {
		background-color: #fff2e3;
	}
	
	nav.top-nav a, nav.top-nav a:visited, nav.top-nav a:hover {
		display: block;
		margin: 10px 0 10px 20px;
		font-size: 22px;
		line-height: 22px;
		color: #00358f;
	}
	
	nav.top-nav a:hover {
		text-decoration: underline;
	}
	
	nav.top-nav a::before {
		display: none;
	}
	
	article.block .content {
		padding: 0 20px 20px 20px;
	}
	
	main h1 {
		padding: 20px 0 20px 20px;
	}
	
	main h2 {
		font-size: 22px;
		line-height: 30px;
	}
	
	p, p ol li, p ul li, ul li, ol li {
		font-size: 16px;
		line-height: 22px;
	}
	
	.tiles li {
		display: grid;
		width: 230px;
		height: 210px;
		margin: 20px auto;
	}
	
	nav.bottom-nav {
		padding: 40px 20px 10px 7px;
	}
	
	footer {
		padding: 20px 10px 20px 0;
	}
	
	footer .logo-bw {
		display:none;
	}

}


@media all and (min-width: 540px) {
	
	nav.head-nav a.sign-in {
		padding: 0 10px 0 15px;
	}

	.header-main {
		height: 150px;
	}
	
	.hamburger {
		top: 110px;
	}
	
	.tiles li {
		display: inline-block;
		width: 230px;
		height: 230px;
		width: 42vw;
		height: 41vw;
		margin: 0 20px 20px 0;
	}
	
}


@media all and (min-width: 640px) {

	.header-main .addition {
		float: right;
		margin: 14px 32px 0px 20px;
		padding:0;
		font-size: 18px;
		line-height: 24px;
		text-align: right;
		max-width: 240px;
	}
	
	.tiles li {
		width: 179px;
		height: 180px;
		width: 27vw;
		height: 26vw;
		margin-right: 20px;
		margin-left: 0;
		margin-top: 0px;
		margin-bottom: 20px;
	}
	
	.tiles a {
		font-size: 18px;
		line-height: 20px;
	}
	
	li.tile:nth-of-type(2n) {
		margin-right: 20px;
	}
	
	.tiles li:nth-of-type(2n) {
		margin-right: 20px;
	}
	
	li.tile:nth-of-type(3n) {
		margin-right: 0px;
	}
	
	.tiles li:nth-of-type(3n) {
		margin-right: 0;
	}
}


@media all and (min-width: 670px) {

	.header-main .addition {
		margin: 14px 32px 0px 20px;
		padding: 0;
		font-size: 20px;
		line-height: 24px;
		max-width: 270px;
	}
	
	.tiles li {
		margin-right: 20px;
		margin-bottom: 20px;
		margin-left: 0;
		margin-top: 0;
	}
	
	.tiles a {
		font-size: 20px;
		line-height: 24px;
	}
}


@media all and (min-width: 860px) {

	nav.head-nav {
		margin-right: 25px;
	}

	.header-main .addition {
		margin: 13px 24px 0px 20px;
		font-size: 22px;
		line-height: 28px;
		max-width: none;
		max-width: calc(100% - 374px);
	}
	
	.hamburger {
		right: 25px;
		/*margin-top: -40px;*/
	}
	
	div.center-block {
		padding: 0;
	}

	article.block .content {
		padding: 0 20px 20px 20px;
	}
	
	main h2 {
		font-size: 22px;
		line-height: 30px;
	}
	
	p, p ol li, p ul li, ul li, ol li {
		font-size: 16px;
		line-height: 22px;
	}
	
	footer {
		padding: 20px 10px 20px 0;
	}
}


@media all and (min-width: 880px) {

	.tiles li {
		width: 230px;
		height: 230px;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	
	li.tile:nth-of-type(2n) {
		margin-right: 20px;
	}

}


@media all and (min-width: 1000px) {

	nav.head-nav {
		height: 24px;
		margin-right: 30px;
	}
	
	nav.head-nav a.sign-in {
		font-size: 16px;
	}
	
	nav.head-nav a.sign-in span {
		height: 24px;
		width: 24px;
		font-size: 18px;
		line-height: 26px;
		max-width: calc(100% - 420px);
	}
	
	body {
		background: none;
	}

	.header-main .addition {
		padding: 0;
		/*margin: 50px 40px 0px 20px;
		font-size: 28px;
		line-height: 34px;*/
		margin: 55px 40px 0px 20px;
		font-size: 22px;
	}
	
	div.center-block {
		width: 974px;
	}

	.header-main {
		height: 112px;
	}

	.header-main a.logo {
		margin-left: 20px;
	}

	nav.top-nav {
		height: auto;
		margin: 0;
		padding: 0;
		background-color: #fff;
		display: block;
		position: initial;
		width: 100%;
		/*border-bottom: solid 1px #00358f;*/
	}

	nav.top-nav a, nav.top-nav a:visited {
		display: inline-block;
		color: #00358f;
		margin: 5px 30px 0px 40px;
		padding: 0 0 12px 0;
		font-size: 22px;
	}
	
	nav.top-nav a:hover {
		display: inline-block;
		color: #00358f;
		margin: 5px 30px 0px 40px;
		border-bottom: 4px solid #acdbd2;
		padding: 0px 0px 8px 0px;
		font-size: 22px;
		text-decoration: none;
	}

	nav.top-nav::after {
		display: block;
		content: "";
		height: 220px;
		width: auto;
		background-image: url("../images/banner2-skk.png");
		background-repeat: no-repeat;
		background-position: top left 40px;
		background-size: 93.4%;
		margin:0;
		padding:0;
		border-top: solid 1px #00358f;
	}
	
	nav.top-nav::after {
		height: 174px;
		background-size: 92%;
	}
	
	article.block .content {
		padding: 0 40px 20px 40px;
	}
	
	main h1 {
		padding: 20px 0 20px 40px;
	}
	
	.tiles li {
		width: 200px;
		height: 200px;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	li.tile:nth-of-type(2n) {
		margin-right: 20px;
	}
	
	li.tile:nth-of-type(3n) {
		margin-right: 20px;
	}
	
	li.tile:nth-of-type(4n) {
		margin-right: 0px;
	}
	
	nav a.bottom-item {
		display:none;
	}
	
	nav.bottom-nav {
		padding: 40px 0px 10px 0px;
	}
	
    nav.bottom-nav a {
		display: inline-block;
		font-family: Roboto, Arial, Sans-serif;
		font-weight: bold;
		color: #1d1d1b !important;
		margin: 0px 0px 0px 0px !important;
		padding: 0px 15px 0px 10px;
		font-size: 16px !important;
		line-height: 16px;
	}
	
	nav.bottom-nav a:hover {
		margin: 0px 0px 0px 0px !important;
		padding: 0px 15px 0px 10px;
		color:#aa501e !important;
	}
	
	nav.bottom-nav a:last-of-type {
		margin: 0px 0px 0px 0px !important;
		padding: 0px 0px 3px 10px;
		border-right: none;
	}

	footer {
		padding: 25px 40px 25px 90px;
	}
	
	footer .logo-bw {
		display:block;
	}
	
	footer ul {
		margin-left:20px;
	}

}


@media all and (min-width: 1200px) {

	div.center-block {
		width: 1176px;
	}
	
	nav.top-nav::after {
		height: 214px;
		background-size: 93%;
	}
	
	.tiles li {
		width: 200px;
		height: 200px;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	
	.tiles li:nth-of-type(2n) {
		margin-right: 20px;
	}
	
	.tiles li:nth-of-type(3n) {
		margin-right: 20px;
	}
	
	.tiles li:nth-of-type(4n) {
		margin-right: 20px;
	}
	
	.tiles li:nth-of-type(5n) {
		margin-right: 0px;
	}
	
}


@media all and (min-width: 1360px) {

	body {
		background: none;
	}
	
	div.center-block {
		width: 1336px;
	}
	
	nav.top-nav::after {
		height: 244px;
		background-size: 94%;
	}
	
	.tiles li {
		width: 230px;
		height: 200px;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	
	.tiles a {
		font-size: 22px;
		line-height: 26px;
	}

}