@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin,latin-ext');


body
{
	font-family: 'Source Sans Pro', sans-serif;
  	margin: 0;
  	padding: 0;
 	background: #333;
  	background-attachment: fixed;
  	background-size: cover;
  	color: #fff;
}

a
{
	text-decoration: none;
	color: inherit;
}

#video-background
{
  	position: fixed;
 	right: 0; 
 	bottom: 0;
  	min-width: 100%; 
  	min-height: 100%;
  	width: auto; 
  	height: auto;
  	z-index: -100;
}

ul li:nth-child(1) .button
{
	background-image: url('./source/images/ms_bg.jpg');
}

ul li:nth-child(2) .button
{
	background-image: url('./source/images/zs_bg.jpeg');
}

ul li:nth-child(3) .button
{
	background-image: url('./source/images/ss_bg.jpg');
}

ul li:nth-child(4) .button
{
	background-image: url('./source/images/in_bg.jpg');
}	

ul li:nth-child(5) .button
{
	background-image: url('./source/images/sp_bg.jpeg');
}	
ul li:nth-child(6) .button
{
	background-image: url('./source/images/druzina_bg.jpg');
}	


@media screen and (min-width:1000px)
{
	.container
	{
		width: 990px;
		margin: auto;
	}

	header
	{
		width: 100%;
		height: 230px;
		padding: 20px;
		float: left;
	}

	header .logo
	{
		width: 358px;
		height: 120px;
		margin: auto;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	header .logo:hover
	{
		transform: scale(1.1);
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	header .name
	{
		width: calc(100% - 143px);
		font-size: 45px;
		font-weight: bold;
		text-shadow: 0px 3px 3px #000;
		padding-top: 10px;
		margin:auto;
		text-align: center;
	}

	ul
	{
		width: 100%;
		margin: 0px;
		padding: 20px;
		float: left;
		list-style: none;
	}

	ul li
	{
		width: 486px;
		height: 220px;
		margin-bottom: 10px;
		border: 2px solid rgba(0, 0, 0, 0.97);
		background: rgba(0, 0, 0, 0.97);
		opacity: 0.90;
		border-radius: 5px;
		overflow: hidden;
		float: left;
	}

	/*
	ul li:nth-child(5)
	{
		width: calc(100% - 4px);
		height: 140px;
		margin-bottom: 10px;
		border: 2px solid rgba(0, 0, 0, 0.97);
		background: rgba(0, 0, 0, 0.97);
		opacity: 0.90;
		border-radius: 5px;
		overflow: hidden;
		float: left;
	}
	*/

	/*
	ul li:nth-child(5) .button-text
	{
		padding-top: 30px;
	}
	*/


	ul li:nth-child(odd)
	{
		margin-right: 10px;
	}

	ul li:hover .button-text, ul li:hover .sub-text
	{
		transform: translateX(10px);
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	ul li:hover .button
	{
		opacity: 0.7;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	ul li .button
	{
		width: 100%;
		height: 100%;
		background-position-x: center;
		background-position-y: center;
		background-size: cover;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	ul li .button-text
	{
		width: 100%;
		padding-top: 55px;
		text-align: center;
		text-shadow: 2px 0px 5px #000;
		font-size: 45px;
		font-weight: bold;
		float: left;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	ul li .sub-text
	{
		width: 100%;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		text-shadow: 2px 0px 5px #000;
		float: left;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
}


/*
	VERTICAL MOBILE CSS PART 
	MIN-WIDTH 320 , MAX-WIDTH 600
*/
@media screen and (min-width: 320px) and (max-width: 600px)
{
	.container
	{
		width: 100%;
		float: left;
	}

	header
	{
		width: 100%;
		padding: 10px;
		float: left;
	}

	header .logo
	{
	display: none;
	}

	header .logo:hover
	{
		transform: scale(1.1);
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	header .name
	{
		width: 100%;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
		text-shadow: 0px 3px 3px #000;
		float: left;
	}

	ul
	{
		width: calc(100%);
		margin: 0px;
		padding: 10px;
		float: left;
		list-style: none;
	}

	ul li
	{
		width: calc(100% - 4px);
		height: 150px;
		margin-bottom: 10px;
		border: 2px solid rgba(0, 0, 0, 0.97);
		background: rgba(0, 0, 0, 0.97);
		opacity: 0.90;
		border-radius: 5px;
		overflow: hidden;
		float: left;
	}

	/*
	ul li:nth-child(5)
	{
		width: calc(100% - 4px);
		height: 140px;
		margin-bottom: 10px;
		border: 2px solid rgba(0, 0, 0, 0.97);
		background: rgba(0, 0, 0, 0.97);
		opacity: 0.90;
		border-radius: 5px;
		overflow: hidden;
		float: left;
	}
	*/

	/*
	ul li:nth-child(5) .button-text
	{
		padding-top: 30px;
		font-size: 30px;
	}
	*/


	ul li:nth-child(odd)
	{
		margin-right: 10px;
	}

	ul li:hover .button-text, ul li:hover .sub-text
	{
		transform: translateX(10px);
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	ul li:hover .button
	{
		opacity: 0.7;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	ul li .button
	{
		width: 100%;
		height: 100%;
		background-position-x: center;
		background-position-y: center;
		background-size: cover;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	ul li .button-text
	{
		width: 100%;
		padding-top: 45px;
		text-align: center;
		text-shadow: 2px 0px 5px #000;
		font-size: 35px;
		font-weight: bold;
		float: left;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	ul li .sub-text
	{
		width: 100%;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		text-shadow: 2px 0px 5px #000;
		float: left;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
}


/*
	HORIZONTAL MOBILE CSS PART 
	MIN-WIDTH 600 , MAX-WIDTH 999
*/
@media screen and (min-width: 600px) and (max-width: 999px)
{
	.container
	{
		width: 100%;
		float: left;
	}

	header
	{
		width: 100%;
		padding: 10px;
		float: left;
	}

	header .logo
	{
	display: none;
	}

	header .logo:hover
	{
		transform: scale(1.1);
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	header .name
	{
		width: 100%;
		font-size: 37px;
		font-weight: bold;
		text-align: center;
		text-shadow: 0px 3px 3px #000;
		float: left;
	}

	ul
	{
		width: calc(100%);
		margin: 0px;
		padding: 10px;
		float: left;
		list-style: none;
	}

	ul li
	{
		width: calc(50% - 9px);
		height: 150px;
		margin-bottom: 10px;
		border: 2px solid rgba(0, 0, 0, 0.97);
		background: rgba(0, 0, 0, 0.97);
		opacity: 0.90;
		border-radius: 5px;
		overflow: hidden;
		float: left;
	}

	/*
	ul li:nth-child(5)
	{
		width: calc(100% - 4px);
		height: 140px;
		margin-bottom: 10px;
		border: 2px solid rgba(0, 0, 0, 0.97);
		background: rgba(0, 0, 0, 0.97);
		opacity: 0.90;
		border-radius: 5px;
		overflow: hidden;
		float: left;
	}
	*/
	
	/*
	ul li:nth-child(5) .button-text
	{
		padding-top: 30px;
	}
	*/


	ul li:nth-child(odd)
	{
		margin-right: 10px;
	}

	ul li:hover .button-text, ul li:hover .sub-text
	{
		transform: translateX(10px);
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	ul li:hover .button
	{
		opacity: 0.7;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	ul li .button
	{
		width: 100%;
		height: 100%;
		background-position-x: center;
		background-position-y: center;
		background-size: cover;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;	
	}

	ul li .button-text
	{
		width: 100%;
		padding-top: 45px;
		text-align: center;
		text-shadow: 2px 0px 5px #000;
		font-size: 35px;
		font-weight: bold;
		float: left;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	ul li .sub-text
	{
		width: 100%;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		text-shadow: 2px 0px 5px #000;
		float: left;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
}