@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin-ext);

html,body{
	color: black;
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	background: url(img/welcome.jpg) no-repeat white;
	background-size: cover;
}
img{
	border: 0px;
}

ul{
	list-style: square;
}

a{
	text-decoration: none;
	color: black;
	opacity: 1;
}

a:hover{
	text-decoration: none;
	opacity: 1;
	color: #8D0B0E;
}


#ramka{
		 width: 660px;
	   height: 400px;
	   margin-left: auto;
	   margin-right: auto;
	   padding-top: 100px;
	   overflow: hidden;
	   
}

#ramka img{
	width: 175px;
	transition: transform 0.3s;
	
}

#ramka img:hover { 
    transform: scale(1.08);
    
   }



#box {
	float: left; 
	text-align: center; 
	margin-left: 5px;
	margin-right: 5px;
	width: 200px;
}

#box a{
	font-size: 20px;
}

#logo{
	text-align: left;
	width: 100%;
	margin-bottom: 20px;
}

#logo img{
	width: 250px;
}

#footer{
	width: 90%;
	font-size: 14px;
	color: black;
	text-align: center;
	font-weight: 300;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
}

#footer a{
	font-size: 14px;
	text-decoration: bold;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  html,body{
  	color: black;
  	font-family: Open Sans, sans-serif;
  	margin: 0;
  	padding: 0;
  	height: 100%;
  	width: auto;
  	background: url(img/bg3.jpg) repeat white;
  	background-size: none;
  }
  
  
#ramka{
		 width: 100%;
	   min-height: 800px;
	   margin-left: auto;
	   margin-right: auto;
	   padding-top: 20px;
	   overflow: hidden;
	   text-align: center;
	   
}

#ramka img{
	width: 100%;
}

#box {
	float: none; 
	text-align: center; 
	padding: 0px; 
	display: inline;
	width: 100%;
	font-size: 25px;
}

#box img{
	max-width: 125px;
	width: 100%;
	
}

#box a{
	font-size: 30px;
}


#logo {
	text-align: center;
}

#logo img{
	width: 70%;
	max-width: 500px;
}

#footer{
	width: 100%;
	font-size: 14px;
	color: white;
	text-align: center;
	font-weight: 300;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 10px;
	background-color: #3B3B3A;
}

#footer a{
	color: white;
}