@import url("fonts.css");
@import url("reset.css");




body{
	font-family:Arial,Tahoma,sans-serif;
	font-size:14px;
	
}



header{
	border-bottom:1px solid #bfbfbf;
	/* height:44px; */
	box-shadow:0 0 3px #dbdbdb
	
}

header a{
	text-decoration:none;
	
}

header .wrap .logo a{
	
	font-family:damion;
	font-size:248%;
	color:#dd5555;
}
header .wrap .logo{
	padding:0 4px ;
	
}

header .wrap #menu__right a{
	color:#8e8e8e;
	font-family:ArialMT;
	font-size:104%;
	
}

header .wrap #menu__right span{
	margin:0 5px ;
	
}

header .wrap #menu__right a:hover{
	
	color:#e06969;

	
}

header .wrap{
	margin:0 auto;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	max-width:1170px;
}




 header .wrap #menu__right #topmenu{
	
	margin-top: 2px;
}


@media screen and (max-width: 535px){
header .wrap{
	
	flex-direction:column;
	align-items: center;
}	
	
	header .wrap .logo{
	padding:4px ;
	
}
	
	
	
	
	
	
	
}


@media screen and (max-width: 1299px){
	
	header .wrap #menu__right {
	
	padding:0 10px;
	
}
}
	
	








header .wrap #menu__right #social{
	display:flex;
	/* justify-content:space-between; */
	margin:3px 0  3px 29px;
	
	
	}
	
@media(max-width:381px){	
header .wrap #menu__right #social{
	
	margin:3px 0  3px 0px;
	
}	
	
	
	header .wrap #menu__right{
		
		padding:0 ;
	}
	
}	
	
	
	
	header .wrap #menu__right #social a{
	width:15px;
	
	height:15px;	
	
	margin:0 7px;
		
	}
	
	
header .wrap #menu__right #social .twitter{	
	
	background:url("../images/s__twitter.png") no-repeat 3px 1px;
	
	
}

header .wrap #menu__right #social .twitter:hover{
	width:13px;
	background-position:-12px 1px;
	margin:0 8px;
}
	


header .wrap #menu__right #social .vimeo{	
	
		background:url("../images/s__vimeo.png") no-repeat 1px 0px;
	
}



header .wrap #menu__right #social .vimeo:hover{
	background-position:-14px -0px;
	width:13px;
	margin:0 8px;
}

header .wrap #menu__right #social .facebook{	
	
		background:url("../images/s__facebook.png") no-repeat 0px 0px;
		width:7px;
	height:15px;
	/* margin:-1px 5px; */
	margin:0px 7px 0px 12px;
}


header .wrap #menu__right #social .facebook:hover{
	background:url("../images/s__facebook.png") no-repeat -9px 0px;
	margin:0px 7px 0px 12px;
	
	
	
	width:7px;
	
	height:15px;
}




header .wrap #menu__right #social .instagram{	
	/* width:15px;
	height:15px; */
		background:url("../images/s__instagram.png") no-repeat 1px 0px;
		
	margin:0px 10px;
	width:13px;
	
	
}


header .wrap #menu__right #social .instagram:hover{
	
	background:url("../images/s__instagram.png") no-repeat -12px 0px;
	margin:0px 10px;
	width:13px;
}




header .wrap #menu__right #social .dribbble{	
	
		background:url("../images/s__dribbble.png") no-repeat 1px 1px;
		
	margin:-1px 8px;
	
}

header .wrap #menu__right #social .dribbble:hover{
	background:url("../images/s__dribbble.png") no-repeat -14px 1px;
	margin:-1px 8px;
	
	
}



header .wrap #menu__right #social .reddit{	

	/* width:15px;
	height:15px; */
		background:url("../images/s__reddit.png") no-repeat -1px 0px;
	background-size:235%;
	margin:-1px 8px;
}

header .wrap #menu__right #social .reddit:hover{	
background:url("../images/s__reddit.png") no-repeat -18px 0px;
	background-size:235%;
	margin:-1px 8px;




}








header .wrap #menu__right {
	display:flex;
	justify-content:space-between;
	
	
}

/* header .wrap #menu__right #topmenu{
	
	
	
	
} */







nav #content__menu{
	
	
	padding:20px 0 0 0;
	
	width:auto;
	margin:0 auto;
}


nav #content__menu .wrapp{
	
	
	display:flex;
	
	justify-content:space-between;
	margin:0 70px;
	border-bottom:1px solid #bfbfbf;
	padding-left: 7px;
}



@media (max-width:648px){
	nav #content__menu .wrapp{
	flex-wrap:wrap;
	}
	
	
	#search{
		
		
		margin-bottom: 11px;
	}
	
	
	


@media (max-width:481px){

nav #content__menu .wrapp{margin:0;}
}
}

nav #content__menu a{
	
	text-decoration:none;
	display:inline-block;
	color:#3f3f3f;
	font-weight:bold;
	font-family:ArialMT;
	font-size:104%;
	letter-spacing:0.2px;
}


nav #content__menu .menu__base{
	
	display:flex;
	flex-wrap:wrap;
	padding-top: 16px;
}

nav #content__menu .menu__base li{
	
	/* margin-right: 20px; */
	
}


nav #content__menu .menu__base  > li{
	
	padding-right: 20px;
	
	
	
}

nav #content__menu .menu__base  > li a{
	
	padding-bottom: 24px;
	
}

nav #content__menu .menu__base  > li a:hover{
	
	border-bottom:1px solid #dd5555 ;
	color:#dd5555;
	padding-bottom: 24px;
}


nav #content__menu .menu__base .menu__child{
	
	margin-right: 24px;
	position:relative;
	width:1px;
	/*http://htmlbook.ru/css/position*/
}

nav #content__menu .menu__base .menu__child > a{
	padding-right:12px;
	background-image:url("../images/all.png") ;
	background-position:22px 4px;
	background-repeat:no-repeat;
	padding-bottom: 25px;
	
	
}

nav #content__menu .menu__base .menu__child:hover ul {
	
	display:block;

	
	
	
}

nav #content__menu .menu__base .menu__child ul {
	width:199px;
	border:1px solid #3f3f3f;
	border-radius:2px;
	box-shadow:0px 1px 2px #3f3f3f;
	background-color:#fff;
	/* padding-left:20px; 
	padding-top:5px;
	padding-bottom:5px;*/
	top:33px;
	position:absolute;
	z-index:10;
	display:none;
	left: -6px;
}

/* nav #content__menu .menu__base .menu__child ul li:first-child a{
	
	font-weight:normal;
	display:inline-block;
	margin:20px 0 15px 20px;
	
	
} */

 nav #content__menu .menu__base .menu__child ul li a{
	
	font-weight:normal;
	display:block;
	/* margin:0px 0 13px 0px; */
	padding-left:20px;
	padding:15px 20px;
	/* padding-right:40px; */
	
}


nav #content__menu .menu__base .menu__child ul li a:hover{
	
	color:#fff;
	background-color:#dd5555;
	
	
/* 	font-weight:normal;
	display:block;
	margin:0px 0 13px 0px;
	padding-left:20px;
	
	padding-right:40px; */
	
}

nav #content__menu .menu__base .menu__child ul li{
	
	margin:0;
	
}


#search form{position:relative;}
 
 #search{
	 
	 
	 margin-top:5px;
	/*  margin-right:41px; */
 }
 
 
#search input[type="text"]{
	
	border:1px solid #cbcbcb;
	border-radius:3px;
	background-color:#f9f9f9;
	width:153px;
	height:30px;
	padding-left:11px;
	
	
}

#search input[type="image"]{
	position:absolute;
	left:145px;
	top:11px;
	/* width:1px; */
}



#basic__block{
	
	background-color:#e9e9e9;;
	
}




#basic__block h1{
	color:#535353;
	font-size:266%;
	font-family:rs;
	margin-top: 35px;
	text-align:center;
	
}







#basic__block > p{
	
	font-size:134%;
	font-family:rs;
	margin-top: 9px;
	color:#9d9d9d;
	text-align:center;
}

#basic__block > h1 span{
	
	font-weight:bold;
	color:#3f3f3f;
	
}

#gellery .element{
	
	width:263px;
	height:283px;
	background-color:#f9f9f9;
	border:1px solid #bfbfbf;
	box-shadow:1px 1px 3px #dadada;
	position:relative;
	
	margin:13px;
	
}
#gellery .element .top .social{
	background-color:#fcf7f6;
	opacity:0.9;
	width:114px;
	height:30px;
	display:none;
	position:absolute;
	top:10px;
	left:10px;
	border-radius:2px;
	
	
}
#gellery .element .top:hover .social{
	
	display:block;
	z-index:10;
}
  
#gellery .element .top{
	position:relative;
	/* width:264px;
	height:174px; */
}  
  
  
#gellery .element .top:hover:before {
	position:absolute;
	 background-color:rgba(0, 0, 0, 0.26);
	 content:" "; 
	 
	  width:100%;
		height:99%;
		/*display:inline-block;
		z-index:5;
		top:0;
		left:0;	  */
	
	/*background-color:#000;
	opacity:0.26;*/
} 



/* .element .top:hover .social{display:block;}
 */



#gellery .element .top .social p{
	
	margin: 7px 0 0 10px;
	
}

#gellery .element .top .social p span{
	
	margin:0 3px;
	display:inline-block;
	position:relative;
	bottom:3px;
}


#gellery .element .bottom{
	
	margin:15px 20px;
}

#gellery .element .bottom a{
	text-decoration:none;
	color:#555;
	font-size:113%;
	font-family:ArialMT;
	font-weight:bold;
	
}

#gellery .element .bottom a:hover {
	
	color:#dd5555;
	
}


#gellery .element .bottom p{
	
	margin-top:12px;
	
	
	}
	

#gellery .element .bottom .date{
	
	color:#c3c3c2;
	font-size:90%;
}

#gellery .element .bottom .intro{
	
	color:#848484;
	
}

#gellery{
	
	display:flex;
	justify-content:space-around;
	/* margin:13px 54px; */
	flex-wrap:wrap;
	margin: 13px auto;
max-width: 1200px;
}





#yin-yang {
  width: 96px;
  height: 48px;
  background: #eee;
  border-color: rgb(43, 85, 115);
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}

#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid rgb(43, 85, 115);
  border-radius: 100%;
  width: 12px;
  height: 12px;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgb(43, 85, 115);
  border: 18px solid #eee;
  border-radius:100%;
  width: 12px;
  height: 12px;
}

#basic__block #pagination ul{
	
	display:flex;
	justify-content:center;
	padding-top: 6px;
	
}
#basic__block #pagination ul li{
	
	
	
	
	margin:0 5px;
}

#basic__block #pagination ul li a{
	
	border-radius:50%;
	border:2px solid #cbcbcb;
	
	padding:7px 0;
	text-decoration:none;
	color:#848484;
	display:inline-block;
	width:31px;
	text-align:center;
	font-size:110%;
	
}





@media (max-width:400px){
	
	
	#basic__block #pagination ul li a{padding:5px 0;width: 24px;}
	
	
	
}

#basic__block #pagination ul li a:active{
	border:2px solid #de5f5f;
	
	
	
}
#basic__block #pagination ul li a:hover,#basic__block #pagination ul li a:active{
	color:#e29090;
	
	
}
#basic__block #pagination ul li span{
	
color:#848484;
	display:inline-block;
	
	padding:18px 2px;
	font-size:110%;
}

#basic__block .banner{
	
	
	 text-align:center;
	 margin:10px 0;
}

@media(max-width:792px){#basic__block .banner{padding: 0 10px;}}



#basic__block .banner a{
	display:inline-block;
	box-shadow:0px -1px 4px #dadada;
	padding:10px;
	background-color:#f9f9f9;
	border:1px solid #bfbfbf;
}

#basic__block .banner a img{
	
	max-width:100%;
}


#basic__block .shadow{
	
	margin-top:28px;
	border-bottom:1px solid #bfbfbf;
	box-shadow:0px -4px 4px #dadada;
}

#footer{
	
	background-color:#f9f9f9;
	padding:22px;
	
}

.f__shadow{
	
	box-shadow:0px -4px 4px #e9e9e9 ;
	border:1px solid #bfbfbf;
	
}


.footer__wrap{
	
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	
}

#footer .footer__wrap a{
	text-decoration:none;
}

#footer .footer__wrap .left a{
	font-family:damion;
	font-size:322%;
	color:#555;
	display:inline-block;
	padding:10px 0 10px 0;
	
}
#footer .footer__wrap .left{
	
	width:373px;
}
#footer .footer__wrap .left p{
	
	font-size:104%;
	color:#848484;
	font-family:ArialMT;
	margin-top: 14px;
	line-height:132%;
}
#footer .footer__wrap .center___friends, #footer .footer__wrap .center__social{
	
	padding:20px 0 0 0 ;
	
	
}	
	@media (max-width:1040px){
		
		#footer .footer__wrap .center___friends, #footer .footer__wrap .center__social{padding:20px 10px 0 10px;}
	
	
	}
	

#footer .footer__wrap .center___friends a, #footer .footer__wrap .center__social a{
	
	font-size:104%;
	color:#848484;
	font-family:ArialMT;
	line-height:183%;
	
}

 #footer .footer__wrap .center__social a{
	 /* display:inline-block; */
	/* padding-left:40px; */
	 
	 
 }
 
 
 
 
 
 
 #footer .footer__wrap .center__social .twitter{
	 background:url("../images/s__twitter.png")no-repeat 0px 0px;
	
	 
	
 }
 
 #footer .footer__wrap .center__social ul li:nth-child(1) a:hover > span {
		 background:url("../images/s__twitter.png")no-repeat -13px 0px;
	
}
 
 

 
 
 
  
 
 #footer .footer__wrap .center__social .vimeo{
	 background:url("../images/s__vimeo.png")no-repeat 0px 0px;
	 
 } 
 
 
 #footer .footer__wrap .center__social ul li:nth-child(2) a:hover > span {
		 background:url("../images/s__vimeo.png")no-repeat -15px 0px;
	
}
 
 
 
 
 
 
 
 #footer .footer__wrap .center__social .facebook{
	 background:url("../images/s__facebook.png")no-repeat 3px 0px;
	 margin-right: 10px;
	 width: 11px;
 }
 
 
 #footer .footer__wrap .center__social ul li:nth-child(3) a:hover > span {
	 background:url("../images/s__facebook.png")no-repeat -6px 0px;
	 margin-right: 10px;
	 width: 11px;
 }
 
 
 
 
 


 #footer .footer__wrap .center__social .instagram{
	 background:url("../images/s__instagram.png")no-repeat 0px -2px;
	
	 
 }
 
 
 #footer .footer__wrap .center__social ul li:nth-child(4) a:hover > span{
	 
	  background:url("../images/s__instagram.png")no-repeat -13px -2px;
	 
	 
 }
 
 
 
 
 
 #footer .footer__wrap .center__social .dribbble{
	 background:url("../images/s__dribbble.png")no-repeat 0px -1px;
	 
 }


#footer .footer__wrap .center__social ul li:nth-child(5) a:hover > span{
	 
	  background:url("../images/s__dribbble.png")no-repeat -13px -2px;
	 
	 
 }







 #footer .footer__wrap .center__social .reddit{
	

	background:url("../images/s__reddit.png")no-repeat 0px 0px;
	 
 }
 
 
 #footer .footer__wrap .center__social ul li:nth-child(6) a:hover > span{
	 
	  background:url("../images/s__reddit.png")no-repeat -13px -2px;
	 
	 
 }
 
 
 
 
 
 
 
 
 #footer .footer__wrap .center__social span{
	 
	  display:inline-block;
	  width: 13px;
		margin-right: 7px;
		height:10px;
 }
 

#footer .footer__wrap .center___friends a:hover,#footer .footer__wrap .center__social  a:hover{
	
	
	color:#dd5555;
	
}



#footer .footer__wrap .center___friends p,#footer .footer__wrap .center__social p{
	
	font-size:104%;
	color:#737373;
	font-family:ArialMT;
	font-weight:bold;
	margin-bottom:9px;
	
}

#footer .right img{
	
	max-width:100%;
}

@media (max-width:1032px){
	
	
	
	
	#footer .right{padding-top: 10px;}
	
	#footer .footer__wrap .left{width:100%;}
	
	
	}



#bottom__menu a{
	
	color: #8e8e8e;
font-family: ArialMT;
font-size: 104%;
font-weight:bold;
	    text-decoration: none;
}

#bottom__menu a:hover {

 color: #e06969;

}


#bottom__menu a span{
	margin: 0 5px;
	
}



.footer__bottom .footer__wrap{
	height:50px;
	align-items:center;
}


 .footer__bootom__left{
	 display:flex; 
	justify-content:space-around;
	flex-wrap:wrap;
	/* align-items:flex-center; */
	 
 }

.footer__bootom__left p,.footer__bottom__right p{
	margin-right:19px;
	font-family:ArialMT;
	color:#8e8e8e;
	font-size:100%;
}


.footer__bottom__right a{
	
	text-decoration:none;
	color:#e06969;
}

/* .footer__wrap p{  */
	/* margin-right:19px; */
	/* font-family:ArialMT; */
	/* color:#8e8e8e; */
	/* font-size:100%; */
/* } */
	
.footer__bottom .footer__wrap{
	
	justify-content:space-between;
	margin:0 80px;
	align-items:center;
}


@media(max-width:743px){
	
	.footer__bottom .footer__wrap{
		justify-content:space-around;
	margin:0 10px;
		
	}
	
}


@media(max-width:450px){
	
	.footer__bottom #bottom__menu{padding: 7px 0;}
	
}



@media(max-width:596px){
	
	
	
	.footer__bootom__left {margin-top: 10px;}
	
	}



























#parent{
	font-size:150%;
	color:white;
/* 	text-align:center;
 */
 
	
}


#wrap{background-color:#800;
display:flex;
height:700px;

flex-direction:column-reverse;

/* flex-direction:row-reverse; */

/* justify-content:flex-end; */

/* justify-content:center; */

/* display:inline-flex; */

/* justify-content:space-between; */


/* justify-content:space-around; */

/* align-items:stretch; */
/* align-items:flex-start; */
/* align-items:flex-end; */
align-items:center;
/* align-items:baseline; */
/* flex-wrap:wrap; */
/* flex-wrap:wrap-reverse; */
}

#wrap .b__1{
	/* align-self:stretch; */
	
	
	/* height:70px; */
	/* order:3; */
	/* display:block; */
	text-align:center;
	border:5px solid red;
}


#wrap .b__1 .item{
	background-color:#332;
	height:30px;
	width:100px;
	
}

#wrap .b__2{
	border:5px solid red;
	
	/* height:100px; */
	
	text-align:center;
	/* order:2; */
	/* flex-basis:30px; */
	/* flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;  */
	align-self:flex-end;
	
}


#wrap .b__2 .item{
	font-size:200%;
	height:116px;
	background-color:#439;
	width:500px;
}



#wrap .b__3{
	border:5px solid red;
	
	/* height:70px; */
	/* order:1; */
	text-align:center;
	/* align-self:flex-end; */
}

#wrap .b__3 .item{
	
	height:30px;
	background-color:#193;
	width:300px;
}