spoi-website/style_spoi.css

	* {
		margin: 0;
		padding: 0;
	}
	a, a:visited {
		color: rgb(0, 142, 214);
		font-weight: bold;
		transition: color .3s;
		text-decoration: none;
	}
	a:hover, a:focus {
		color: rgb(0, 142, 214);
		text-decoration: underline;
	}
	a.inverse-link, a.inverse-link:visited {
		color: white;
		font-weight: normal;
		text-decoration: underline;
		transition: color .3s;
	}
	a.inverse-link:hover, a.inverse-link:focus {
		color: #222;
	}
	a.title-link, a.title-link:visited {
		color: inherit;
		text-decoration: none;
	}
	a.title-link:hover, a.title-link:focus {
		color: inherit;
	}
	html {
		height: 100%;
	}
	body {
		font-family: 'Open Sans', Helvetica Neue, sans-serif;
		font-size: 1em;
		font-weight: 300;
		color: rgb(69, 69, 69);
		height: 100%;
	}

	/* general settings */

	header {
		position: fixed;
		top: 0;
		width: 100%;
		background: white;
		z-index: 3;
		box-shadow: 0 3px 6px rgba(180, 180, 180, 0.7);
	}
	.width_settings {
		max-width: 1300px;
		width: 95%;
		position: relative;
		margin: 0 auto;
	}
	section {
		width: 100%;
		padding-bottom: 50px;
		background: white;
	}
	.section_dark {
		background: rgb(244, 244, 244);
		border-bottom: 1px solid rgb(218, 223, 227);
		border-top: 1px solid rgb(218, 223, 227);
	}
	h1,
	h2,
	h3 {
		font-family: 'Open Sans', Helvetica Neue, sans-serif;
	}
	h1 {
		font-size: 1.8em;
	}
	h1 a {
		text-decoration: none;
		color: rgb(69, 69, 69);
		transition: color 0.5s;
	}
	.basic_link {
		color: rgb(0, 142, 214);
		transition: color .3s;
		text-decoration: none;
	}
	.basic_link:hover {
		color: rgb(0, 142, 214);
		text-decoration: underline;
	}
	h2 {
		font-size: 2.6em;
		text-align: center;
		font-weight: 600;
	}
	h3 {
		font-size: 2em;
		text-align: center;
		font-weight: 600;
		margin-top: 50px;
	}
	h4 {
		font-size: 1.4em;
		text-align: center;
		color: white;
		font-weight: 400;
		padding: 0 10px;
	}
	.colored_line {
		margin: 15px auto;
		width: 100px;
		height: 2px;
		background: rgb(0, 142, 214);
	}
	footer {
		background: white;
		margin: 0;
		padding: 20px 0;
	}
	footer p {
		color: rgb(69, 69, 69);
		text-align: center;
		padding: 3px 0;
		margin: 0;
		font-weight: 600;
		font-size: 0.9em;
	}

	/*header*/

	#page_title {
		display: inline-block;
		height: 70px;
		line-height: 70px;
		margin: 0 20px 0 0;
		white-space: nowrap;
		color: rgb(69, 69, 69);
	}
	#page_title em {
		color: rgb(0, 142, 214);
		font-style: normal;
		transition: color 0.5s;
	}
	#page_title a:hover {
		color: rgb(0, 142, 214);
	}
	#page_title a:hover em {
		color: rgb(69, 69, 69);
	}
	#page_title_small{
		display: none;
	}
	nav {
		display: inline-block;
		text-align: center;
		white-space: nowrap;
		margin: 0 20px;
	}
	nav ul li {
		display: inline-block;
		font-weight: 600;
		font-size: 0.95em;
		color: rgb(69, 69, 69);
		padding: 0 10px;
		transition: color 0.5s;
	}
	nav ul li:hover {
		color: rgb(0, 142, 214);
		cursor: pointer;
	}
	#languages {
		display: inline-block;
		vertical-align: middle;
		margin: 2px 0 0 0;
	}
	.flags{
		width: 24px;
		height: 24px;
		border: 0;
		transition: opacity 0.5s;
		outline: none;
		opacity: 0.5;		
	}
	.flags:hover{
		opacity: 1;
		cursor: pointer;	
	}
	#en {
		background: url("img/flags/uk/uk_24x24.png") no-repeat;
		opacity: 1;
	}
	#cz {
		background: url("img/flags/cz/cz_24x24.png") no-repeat;
	}
	#it {
		background: url("img/flags/it/it_24x24.png") no-repeat;
	}
	#gr {
		background: url("img/flags/gr/gr_24x24.png") no-repeat;
	}
	#lv {
		background: url("img/flags/lv/lv_24x24.png") no-repeat;
	}
	#sk {
		background: url("img/flags/sk/sk_24x24.png") no-repeat;
	}

	#menu_icon, #menu_mobile {
		display: none;
	}

	/*Banner*/

	#banner {
		margin: 70px auto 0 auto;
		background: url('img/background.jpg') no-repeat top center;
		height: 300px;
		padding-bottom: 0;
	}
	#banner_box {
		padding-top: 70px;
	}
	#headline {
		color: white;
	}
	#headline_text {
		width: 70%;
		font-size: 1.2em;
		font-weight: 400;
		margin: 20px auto 0 auto;
		text-align: center;
		color: white;
	}

	/*About*/

	.plain_text {
		width: 70%;
		text-align: center;
		margin: 0 auto 20px auto;
		line-height: 1.5;
	}
	.plain_text em {
		font-weight: 600;
		font-style: normal;
	}

	/*Why and Links*/

	.boxes {
		text-align: center;
	}
	.box_white {
		display: inline-block;
		vertical-align: top;
		margin: 10px;
		width: 30%;
		max-width: 350px;
	}
	.img_white_box {
		margin: 20px 0 10px 0;
	}
	.box_white_title {
		font-size: 1.6em;
		color: rgb(0, 142, 214);
	}
	.box_white_text {
		width: 80%;
		text-align: center;
		margin: 10px auto 0 auto;
		line-height: 1.5;
	}
	.box_white_text em {
		font-weight: 600;
		font-style: normal;
	}
	.box {
		display: inline-block;
		vertical-align: bottom;
		margin: 10px;
		width: 30%;
		max-width: 350px;
		padding-bottom: 30px;
		background: rgb(0, 142, 214);
		transition: background 0.5s;
	}
	.box:hover {
		background: rgb(69, 69, 69);
		cursor: pointer;
	}
	.box_with_links:hover {
		background: rgb(0, 142, 214);
		cursor: auto;
	}
	.img_box {
		margin: 30px 0 20px 0;
	}
	.box_text {
		width: 80%;
		text-align: center;
		margin: 10px auto 0 auto;
		color: white;
		line-height: 1.5;
	}
	.box_link {
		text-decoration: underline;
		transition: color .3s;
	}
	.box_link:hover {
		color: #222;
		cursor: pointer;
	}
	.file_info {
		font-size: 13px;
	}

	/*map*/

	#map {
		width: 100%;
		height: 500px;
		border: 5px solid rgb(200, 200, 200);
	}
	#map:hover {
		opacity: 1;
	}
	.headlines_button {
		display: block;
		margin: 20px auto;
		padding: 1em 2.5em;
		font-family: 'Open Sans', Helvetica Neue, sans-serif;
		font-size: 1.1em;
		border: 0;
		background: rgb(0, 142, 214);
		color: white;
		transition: background 0.5s, color 0.5s;
		outline: none;
	}
	.headlines_button:hover {
		cursor: pointer;
		background: rgb(69, 69, 69);
	}

	/*Contacts*/

	#contacts {
		padding: 10px;
		text-align: center;
	}
	.footer_contacts_icon {
		display: inline-block;
		text-align: center;
		border: 0;
		height: 30px;
		width: 30px;
		margin: 5px;
		cursor: pointer;
		outline: none;
		vertical-align: middle;
	}
	#sdi_footer_icon {
		background: url("img/contacts.png") no-repeat top left;
		transition: background 0.5s;
	}
	#sdi_footer_icon:hover {
		background: url("img/contacts.png") no-repeat bottom left;
	}
	#in_footer_icon {
		background: url("img/contacts.png") no-repeat top right;
		transition: background 0.5s;
	}
	#in_footer_icon:hover {
		background: url("img/contacts.png") no-repeat bottom right;
	}
	#person_footer_icon {
		background: url("img/persons.png") no-repeat top left;
		height: 35px;
		transition: background 0.5s;
	}
	#person_footer_icon:hover {
		background: url("img/persons.png") no-repeat bottom left;
	}
	.link, .link a {
		font-size: 0.7em;
		color: rgb(150, 150, 150);
	}
	#copyright, #contributors {
		font-family: Helvetica Neue, sans-serif;
	}

	@media screen and (max-width: 1300px) and (min-width: 750px) {
		/*header*/
		#page_title {
			display: block;
			margin: 0;
			position: relative;
			text-align: center;
			font-size: 1.7em;
			height: 50px;
			line-height: 60px;
		}
		nav {
			display: block;
			position: relative;
			margin: 10px 0;
			text-align: center;
		}
		#languages{
			display: block;
			position: relative;
			text-align: center;
			top: auto;
		}
		#banner {
			margin: 100px auto 0 auto;
		}
		h2 {
			font-size: 2.2em;
		}
		h3 {
			font-size: 1.8em;
			padding-top: 10px;
		}
		#headline_text {
			width: 80%;
		}
		.plain_text {
			width: 80%;
		}

		/*Why and Links*/
		.box_white {
			margin: 5px;
			width: 30%;
			max-width: 350px;
		}
		.box_white_text {
			width: 90%;
		}
		.box {
			margin: 5px;
			width: 30%;
			max-width: 350px;
		}
		.img_box {
			margin: 20px 0 10px 0;
		}
		.box_text {
			margin: 5px auto 0 auto;
			width: 85%;
		}
	}

	@media screen and (max-width: 749px) {
		/*header*/
		#page_title {
			display: inline-block;
			vertical-align: middle;
			height: 50px;
			line-height: 50px;
			text-align: left;
			font-size: 1.5em;
		}
		nav {
			display: none;
		}
		#languages{
			display: block;
			position: relative;
			top: 0;
			left: 0;
		}
		#menu_icon {
			display: inline-block;
			position: absolute;
			right: 0;
			top: 12px;
		}
		#menu_icon_button {
			width: 40px;
			height: 24px;
			background: url("img/menu.png") no-repeat top left;
			border: 0;
			transition: background 0.5s;
			outline: none;
		}
		#menu_icon_button:hover {
			background: url("img/menu.png") no-repeat top right;
			cursor: pointer;
		}
		#menu_mobile {
			display: none;
			border-top: 1px solid rgb(218, 223, 227);
			padding: 10px 0;
		}
		.menu_mobile_button {
			width: 100%;
			text-align: left;
			border: 0;
			background: white;
			font-weight: 400;
			color: rgb(69, 69, 69);
			transition: color 0.5s;
			padding: 7px 10px;
			font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
			font-size: 1em;
			outline: none;
		}
		.menu_mobile_button:hover {
			color: rgb(0, 142, 214);
			cursor: pointer;
		}
		h2 {
			font-size: 2em;
		}
		h3 {
			font-size: 1.6em;
			padding-top: 0;
		}
		#banner {
			margin: 70px auto 0 auto;
			background: black url('img/background.jpg') no-repeat top center;
			height: auto;
			padding-bottom: 20px;
		}
		#banner_box {
		padding-top: 30px;
		}
		#headline_text {
			width: 90%;
			font-size: 1em;
		}
		.plain_text {
			width: 90%;
		}

		/*Why and Links*/
		.box_white {
			display: block;
			margin: 10px auto;
			width: 90%;
			max-width: 400px;
		}
		.box_white_text {
			width: 90%;
		}
		.box {
			display: block;
			margin: 10px auto;
			width: 90%;
			max-width: 400px;
			padding-bottom: 30px;
		}
		.box_text {
			width: 90%;
		}
		#map {
			height: 300px;
		}
	}

	@media screen and (max-width: 400px) {
		#page_title {
			display: none;
		}
		#page_title_small {
			display: inline-block;
			vertical-align: middle;
			height: 50px;
			line-height: 50px;
			text-align: left;
			font-size: 1.2em;
		}
		#page_title_small a {
			color: rgb(0, 142, 214);
		}
	}