@font-face 
{
    font-family: Comic Sans MS;
    src: local("Comic Sans MS"), url(../../../fonts/comic.ttf);
    src: local("Comic Sans MS"), url(../../../fonts/comicbd.ttf);
}

body
{
	background-color: #8be0f5;
	margin: 0px;
	background-image: url("../../../imgs/main-kisa4568-miku.png");	background-repeat:no-repeat;
	background-position: 100% 100%;
	background-attachment: fixed;
	background-size: 15%;
	min-width: 320px;
}

.zag
{
	display: block;
	margin: auto;
	width: 30px;
	height: 30px;
	margin-bottom: 30px;
}

.content
{
	width: auto;
	margin: 0px;
	padding: 10px;
	margin-right: 15%;
}

.content .subsectiontitle
{
	display: block;
	width: auto;
	margin: 0px;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	font-family: Arial;
	font-size: 20px;
	border-radius: 10px 10px 10px 10px;
	background-color: #00b6f1;
	color: #ffffff;
	font-weight: 600;
}

.content .subsectioncont
{
	display: block;
	width: auto;
	margin: 0px;
	margin-bottom: 20px;
	font-family: Arial;
	font-size: 14px;
	color: #000000;
	/*padding: 10px;
	padding-left: 20px;*/
	margin-top: 10px;
}

.titleimage
{
	width: auto;
	margin: 0px;
	padding: 10px;
	margin-right: 15%;
	margin-top: 40px;
	height: 500px;
	
	background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.titleimage img
{
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

@media only screen and (max-width: 1010px)
{
	.titleimage
	{
		height: 300px;
	}
}

@media only screen and (max-width: 600px)
{
	body
	{
		background-image: none;
	}
	
	.titleimage
	{
		margin-right: 0px;
		height: 200px;
		padding-top: 50px;
	}
	
	.content
	{
		margin: 0px;
	}
}

@media only screen and (max-width: 440px)
{
	.titleimage
	{
		height: 150px;
	}
}















/*-----------------------------------------------------------------------------------------------------------------------------
Новости

------------------------------------------------------------------------------------------------------------------------------*/
.counternews
{
	display: block;
	width: 1230px;
	margin: auto;
}

.newsmain
{
	float: left;
    height: 250px;
    margin: 0px;
    width: 410px;
}
.news 
{
    padding: 5px;
    padding-top: 20px;
    width: 400px;
    height: 225px;
    font-size: 14px;
    font-family: Arial;
    color: #000000;
    margin: 0px;
	
	transition-property: padding;
	transition-duration: 0.5s;
}

.news:hover
{
	padding-top: 5px;
	padding-bottom: 20px;
}

.news .contentname {
    background-color: #00b6f1;
    border: 3px solid #00b6f1;
    border-bottom: 1px solid #00b6f1;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    padding-bottom: 3px;
    padding-top: 5px;
    max-width: 364px;
    color: #ffffff;
    display: inline-block;
}

.news .contentname a
{
    color: #ffffff;
	text-decoration: none;
	display: block;
	width: auto;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

.news .contentname a .ramka
{
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 30px;
	/*background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
}

.news .contentmintext {
    padding: 10px;
    width: 374px;
    height: 150px;
    text-align: justify;
    font-size: 14px;
    font-family: Arial;
    background-color: #ffffff;
    border: 3px solid #00b6f1;
    border-radius: 0px 10px 10px 10px;
    color: #000000;
    margin: 0px;
    margin-top: 0px;
	overflow: hidden;
	position: relative;
}

.news .contentmintext .datecomment
{
	display: block;
	position: absolute;
	right: 0px;
	bottom: 0px;
	left: 120px;
	background-color: #ffffff;
	padding: 5px;
	padding-right: 10px;
	font-size: 12px;
	color: #aaaaaa;
	text-align: right;
}

.news .contentmintext p
{
	padding: 0px;
	padding-bottom: 3px;
	margin: 0px;
	text-indent: 20px;
}

.news .contentmintext p a
{
	color: #000000;
}

.news .contentmintext .picture {
    display: block;
    float: left;
    width: 100px;
    height: 150px;
    padding: 0px;
    padding-right: 10px;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.5s;
}


@media only screen and (max-width: 1467px)
{
	.counternews
	{
		width: 820px;
	}
}

@media only screen and (max-width: 983px)
{
	.counternews
	{
		width: 410px;
	}
}

@media only screen and (max-width: 494px)
{
	.newsmain
	{
		width: auto;
		height: auto;
		min-height: 250px;
		max-width: 410px;
		float: none;
		margin: auto;
	}
	.news 
	{
		width: auto;
		height: auto;
		min-height: 225px;
		max-width: 400px;
		float: none;
	}
	.news .contentname 
	{
		width: none;
		display: block;
		max-width: 400px;
	}

	.news .contentmintext 
	{
		padding: 10px;
		width: auto;
		height: auto;
		min-height: 150px;
		padding-bottom: 25px;
		border-radius: 0px 0px 10px 10px;
	}
	
	.news .contentmintext .datecomment
	{
		left: 0px;
	}
	
	.counternews
	{
		width: auto;
	}
}
/*-----------------------------------------------------------------------------------------------------------------------------

Новости
------------------------------------------------------------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------------------------------------------------------
Видео

------------------------------------------------------------------------------------------------------------------------------*/
.videosmain
{
	float: left;
    height: 250px;
    margin: 0px;
    width: 410px;
}
.videos 
{
    padding: 5px;
    padding-top: 20px;
    width: 400px;
    height: 245px;
    font-size: 14px;
    font-family: Arial;
    color: #000000;
    margin: 0px;
	
	transition-property: padding;
	transition-duration: 0.5s;
}

.videos:hover
{
	padding-top: 5px;
	padding-bottom: 20px;
}

.videos .contentname {
    background-color: #00b6f1;
    border: 3px solid #00b6f1;
    border-bottom: 1px solid #00b6f1;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    padding-bottom: 3px;
    padding-top: 5px;
    max-width: 364px;
    color: #ffffff;
    display: inline-block;
}

.videos .contentname a
{
    color: #ffffff;
	text-decoration: none;
	display: block;
	width: auto;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

.videos .contentname a .ramka
{
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 30px;
	/*background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
}

.videos .contentmintext {
    padding: 0px;
    width: auto;
    height: 194px;
    text-align: justify;
    font-size: 14px;
    font-family: Arial;
    background-color: #000000;
    border: 3px solid #00b6f1;
    border-radius: 0px 10px 10px 10px;
    color: #000000;
    margin: 0px;
    margin-top: 0px;
	overflow: hidden;
	position: relative;
}

.videos .contentmintext .play {
    color: #ffffff;
	text-decoration: none;
	display: block;
	position: absolute;
	right: 50%;
	bottom: 50%;
	/*background-color: rgb(0, 182, 241);*/
	background-image: url("../../../imgs/main-play.png");	background-repeat:no-repeat;
	background-position: 0% 0%;
	background-size: 100%;
	border-radius: 5px;
	width: 80px;
	height: 80px;
	-webkit-transform: translate(50%, 50%); 
	-moz-transform: translate(50%, 50%); 
	-o-transform: translate(50%, 50%);
	-ms-transform: translate(50%, 50%); 
	transform: translate(50%, 50%);
	opacity: 0.2;
	transition-property: opacity;
	transition-duration: 0.8s;
	cursor: pointer;
}

.videos:hover .contentmintext .play
{
	opacity: 1;
}

.videos .contentmintext .datecomment
{
	display: inlibe-block;
	position: absolute;
	right: 5px;
	bottom: 5px;
	background-color: rgb(0, 182, 241);
	border-radius: 5px;
	padding: 5px;
	padding-right: 10px;
	font-size: 12px;
	color: #ffffff;
	text-align: right;
	transition-property: background-color color;
	transition-duration: 0.5s;
}

.videos:hover .contentmintext .datecomment
{
	background-color: rgba(0, 0, 0, 0.4);
	color: rgba(255, 255, 255, 0.4);
}

.videos .contentmintext .picture {
    display: block;
    max-height: 100%;
	max-width: 100%;
    padding: 0px;
    padding-right: 10px;
	margin: auto;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.5s;
}

.countervideos
{
	display: block;
	width: 1230px;
	margin: auto;
}

@media only screen and (max-width: 1467px)
{
	.countervideos
	{
		width: 820px;
	}
}

@media only screen and (max-width: 983px)
{
	.countervideos
	{
		width: 410px;
	}
}

@media only screen and (max-width: 494px)
{
	.videosmain
	{
		width: auto;
		height: auto;
		min-height: 250px;
		max-width: 410px;
		float: none;
		margin: auto;
	}
	.videos 
	{
		width: auto;
		height: auto;
		min-height: 225px;
		max-width: 400px;
		float: none;
	}
	.videos .contentname 
	{
		width: none;
		display: block;
		max-width: 400px;
	}

	.videos .contentmintext 
	{
		width: auto;
		border-radius: 0px 0px 10px 10px;
	}
	
	.videos .contentmintext .picture
	{
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%); 
		-moz-transform: translate(-50%, -50%); 
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%); 
		transform: translate(-50%, -50%);
	}
	
	.countervideos
	{
		width: auto;
	}
	
}

/*-----------------------------------------------------------------------------------------------------------------------------

Видео
------------------------------------------------------------------------------------------------------------------------------*/





/*-----------------------------------------------------------------------------------------------------------------------------
Музыка

------------------------------------------------------------------------------------------------------------------------------*/
.musicsmain
{
	float: left;
    height: 250px;
    margin: 0px;
    width: 410px;
}
.musics 
{
    padding: 5px;
    padding-top: 20px;
    width: 400px;
    height: 245px;
    font-size: 14px;
    font-family: Arial;
    color: #000000;
    margin: 0px;
	
	transition-property: padding;
	transition-duration: 0.5s;
}

.musics:hover
{
	padding-top: 5px;
	padding-bottom: 20px;
}

.musics .contentname {
    background-color: #00b6f1;
    border: 3px solid #00b6f1;
    border-bottom: 1px solid #00b6f1;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    padding-bottom: 3px;
    padding-top: 5px;
    max-width: 364px;
    color: #ffffff;
    display: inline-block;
}

.musics .contentname a
{
    color: #ffffff;
	text-decoration: none;
	display: block;
	width: auto;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

.musics .contentname a .ramka
{
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 30px;
	/*background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
}

.musics .contentmintext {
	padding: 10px;
    width: 374px;
    height: 150px;
    text-align: justify;
    font-size: 14px;
    font-family: Arial;
    background-color: #ffffff;
    border: 3px solid #00b6f1;
    border-radius: 0px 10px 10px 10px;
    color: #000000;
    margin: 0px;
    margin-top: 0px;
	overflow: hidden;
	position: relative;
}

.musics .contentmintext .opis
{
	display: block;
	width: auto;
	height: auto;
	margin-left: 160px;
	margin-bottom: 14px;
}

.musics .contentmintext .opis .artist
{
	padding-top: 10px;
	padding-bottom: 15px;
	font-size: 16px;
}

.musics .contentmintext .opis .zenre
{
	padding-bottom: 15px;
}

.musics .contentmintext .opis .release
{
	padding-bottom: 15px;
	color: #aaaaaa;
}

.musics .contentmintext .datecomment
{
	display: block;
	position: absolute;
	right: 0px;
	bottom: 0px;
	left: 170px;
	/*background-color: #ffffff;*/
	padding: 5px;
	padding-right: 10px;
	font-size: 12px;
	color: #aaaaaa;
	text-align: right;
}

.musics .contentmintext .picture {
    display: block;
    float: left;
    width: 150px;
    height: 150px;
    padding: 0px;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 0.5s;
	border-radius: 3px;
}

.countermusics
{
	display: block;
	width: 1230px;
	margin: auto;
}

@media only screen and (max-width: 1467px)
{
	.countermusics
	{
		width: 820px;
	}
}

@media only screen and (max-width: 983px)
{
	.countermusics
	{
		width: 410px;
	}
}

@media only screen and (max-width: 494px)
{
	.musicsmain
	{
		width: auto;
		height: auto;
		min-height: 250px;
		max-width: 410px;
		float: none;
		margin: auto;
	}
	.musics 
	{
		width: auto;
		height: auto;
		min-height: 225px;
		max-width: 400px;
		float: none;
	}
	.musics .contentname 
	{
		width: none;
		display: block;
		max-width: 400px;
	}

	.musics .contentmintext 
	{
		width: auto;
		border-radius: 0px 0px 10px 10px;
		height: auto;
	}
	
	.countermusics
	{
		width: auto;
	}
}
/*-----------------------------------------------------------------------------------------------------------------------------

Музыка
------------------------------------------------------------------------------------------------------------------------------*/





/*-----------------------------------------------------------------------------------------------------------------------------
Фотографии

------------------------------------------------------------------------------------------------------------------------------*/


.counterphotos
{
	display: block;
	width: 1230px;
	margin: auto;
}

.imageblock-a
{
	width: 236px;
	height: 296px;
	display: block;
	margin: 0px;
	float: left;
}

.imageblock
{
	width: 206px;
	height: 246px;
	padding: 15px;
	margin: 0px;
	padding-top: 35px;
	transition-property: padding;
	transition-duration: 0.5s;
}

.imageblock .moveblock
{
	background-color: #ffffff;
	border-radius: 10px 0px 10px 10px;
	border: 3px solid #00b6f1;
	font-size: 14px;
	font-family: Arial;
	color: #000000;
	padding: 0px;
	width: 200px;
	height: 218px;
	overflow: hidden;
}

.imageblock:hover
{
	padding-top: 15px;
	padding-bottom: 35px;
}

.imageblock .moveblock .image
{
	display: block;
	text-decoration: none;
	width: 190px;
	height: 190px;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	position: relative;
	cursor: pointer;
}

.imageblock .moveblock .image img
{
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transition-property: opacity;
    transition-duration: 0.5s;
}

.imageblock .moveblock .bottompanel
{
	background-color: #00b6f1;
	display: block;
	width: auto;
	height: 12px;
	padding: 3px;
	
}

.imageblock .contentname {
    background-color: #00b6f1;
    border: 3px solid #00b6f1;
    border-bottom: 1px solid #00b6f1;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    padding-bottom: 1px;
    padding-top: 3px;
    max-width: 160px;
    color: #ffffff;
    display: inline-block;
	float: right;
}

.imageblock .contentname .date {
    color: #8be0f5;
    text-decoration: none;
    display: block;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
	font-size: 12px;
	font-family: Arial;
}

.imageblock .moveblock .comments
{
	font-size: 12px;
	padding-left: 10px;
	color: #8be0f5;
	float: left;
	
}

.imageblock .moveblock .likes
{
	font-size: 12px;
	padding-right: 10px;
	color: #8be0f5;
	float: right;
}

.imageblock .moveblock .likes .img
{
	width: 14px;
	height: 14px;
	margin: -1px;
	padding: 0px;
	display: block;
	float: right;
	margin-left: 5px;
	background-image: url("likes-w.png");
}

@media only screen and (max-width: 1400px)
{
	.counterphotos
	{
		width: 944px;
	}
}

@media only screen and (max-width: 1123px)
{
	.counterphotos
	{
		width: 708px;
	}
}

@media only screen and (max-width: 845px)
{
	.counterphotos
	{
		width: 472px;
	}
}

@media only screen and (max-width: 568px)
{
	.counterphotos
	{
		width: 236px;
	}
}



/*-----------------------------------------------------------------------------------------------------------------------------

Фотографии
------------------------------------------------------------------------------------------------------------------------------*/





/*-----------------------------------------------------------------------------------------------------------------------------
Текст

------------------------------------------------------------------------------------------------------------------------------*/
.counter-text
{
	display: block;
	width: auto;
	margin: 0px;
}

.counter-text .conttext
{
	padding: 10px;
    width: auto;
    min-height: 150px;
    text-align: justify;
    font-size: 14px;
    font-family: Arial;
    background-color: #ffffff;
    border: 3px solid #00b6f1;
    border-radius: 10px 10px 10px 10px;
    color: #000000;
    margin: 0px;
    margin-top: 0px;
}

/*-----------------------------------------------------------------------------------------------------------------------------

Текст
------------------------------------------------------------------------------------------------------------------------------*/