/*

RRRRRRRRRRRRRRRRR         WWWWWWWW                           WWWWWWWW     DDDDDDDDDDDDD
R::::::::::::::::R        W::::::W                           W::::::W     D::::::::::::DDD
R::::::RRRRRR:::::R       W::::::W                           W::::::W     D:::::::::::::::DD
RR:::::R     R:::::R      W::::::W                           W::::::W     DDD:::::DDDDD:::::D
 R:::::R     R:::::R       W:::::W           WWWWW           W:::::W        D:::::D    D:::::D
 R:::::R     R:::::R        W:::::W         W:::::W         W:::::W         D:::::D     D:::::D
 R:::::RRRRRR:::::R          W:::::W       W:::::::W       W:::::W          D:::::D     D:::::D
 R:::::::::::::RR             W:::::W     W:::::::::W     W:::::W           D:::::D     D:::::D
 R::::RRRRRR:::::R             W:::::W   W:::::W:::::W   W:::::W            D:::::D     D:::::D
 R:::::R     R:::::R            W:::::W W:::::W W:::::W W:::::W             D:::::D     D:::::D
 R:::::R     R:::::R             W:::::W:::::W   W:::::W:::::W              D:::::D     D:::::D
 R:::::R     R:::::R              W:::::::::W     W:::::::::W               D:::::D    D:::::D
RR:::::R     R:::::R              W:::::::W       W:::::::W              DDD:::::DDDDD:::::D
R::::::R     R:::::R               W:::::W         W:::::W               D:::::::::::::::DD
R::::::R     R:::::R                W:::W           W:::W                D::::::::::::DDD
RRRRRRRR     RRRRRRR                 WWW             WWW                 DDDDDDDDDDDDD

*/

.navbar__toggler {display: none;}


/* height: 900px */
@media screen and (max-width: 1440px) {
	.five-cols a {
		height: 25vh;
	}
}


/* height: 768px, 600px */
@media screen and (max-width: 1199px) {
	.container {
		max-width: 90vw;
	}
}

@media screen and (max-width: 1023px) {
	body {
		width: 100%;
		overflow-x: hidden;
	}

	.col-3,
	.col-4,
	.col-5,
	.col-7,
	.col-6 {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}

	img.fluid {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		height: auto;
	}

	.thumb {
		width: 100%;
	}

	.thumb img {
		width: 100%;
	}

	.thumb::before {
		display: none;
	}

	.navbar-nav {
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top;
		transition: all .2s;
		position: absolute;
		top:100%;
		left: 0;
		width: 100%;
		background: rgba(0,0,0,.9);
	}

	.navbar-nav.show {
		opacity: 1;
		transform: scaleY(1);
	}

	.navbar-nav li {
		display: block;
		width: 100%;
		margin: 0;
	}

	.navbar-nav a {
		padding: 10px 15px;
		margin: 0;
		display: block;
		width: calc(100% - 30px);
		border-bottom: 1px solid rgba(255,255,255,.2);
	}

	.navbar__toggler {
		display: block;
		background: rgba(0,0,0,.5);
		border: 1px solid white;
		outline: none;
		padding: 4px;
	}

	.navbar__toggler span {
		display: block;
		margin: 3px;
		width: 30px;
		height: 3px;
		border-radius: 1.5px;
		background: #fff;
	}

	.five-cols {
		justify-content: center
	}

	.five-cols a {
		max-width: calc(100% * 1/3);
		width: calc(100% * 1/3);
		flex-basis: calc(100% * 1/3);
		height: 35vh;
	}

	.five-cols a img {
		width: auto;
		height: auto;
		min-height: 100%
	}
}

@media screen and (max-width: 800px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 640px) {
	.five-cols a {
		max-width: calc(100% * 1/2);
		width: calc(100% * 1/2);
		flex-basis: calc(100% * 1/2);
		height: 30vh;
	}
}

@media screen and (max-width: 600px) {}

@media screen and (max-width: 480px) {
	header h1 {
		font-size: 50px;
	}
}

@media screen and (max-width: 435px) {}

@media screen and (max-width: 425px) {
	header h1 {
		font-size: 45px;
	}
}

@media screen and (max-width: 414px) {}

@media screen and (max-width: 375px) {
	header h1 {
		font-size: 35px;
	}

	.langs {
		flex-direction: column;
	}

	.langs li {
		margin: 0;
	}
}

@media screen and (max-width: 360px) {
	.footer_bottom .row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.madeby {margin-top: 15px;}
}

@media screen and (max-width: 320px) {
	header h1 {
		font-size: 28px;
	}
}


