html, body{
padding:0;
margin:0;
color: red;
}
html{
height:100%;
}
body{
min-height:100%;
//overflow:hidden;
}
.backg{
background:url(/img/fon_pattern.jpg) 0 0 no-repeat;
background-size:cover;
}
#cont{
width:900px;
max-width:100%;
height:100%;
margin:0px auto;
}
#vl{
height:calc(50% - 37px);
max-height:50%;
width:2px;
background-color:#a5886a;
margin:0px auto;
position:relative;
z-index:100;
}
#krug_cover{
margin:0px auto;
width:74px;
height:75px;
overflow:hidden;
border-radius:50%;
background-color:#fff;
position:relative;
z-index:100;
}
#krug{
margin:0px auto;
width:70px;
height:70px;
border:2px solid #a5886a;
border-radius:50%;
position:relative;
transform-origin:50% 50%;
}
#krug span{
position:absolute;
bottom:-15px;
left:10px;
width:50px;
height:50px;
background-color:#fff;
border-radius:25px;
z-index:100;
}
#krug .href{
position:absolute;
width:60px;
height:60px;
border-radius:50%;
background-color:#a5886a;
left:5px;
top:5px;
z-index:1000;
cursor:pointer;
}
#krug .href:hover{
background-color:#6ed7ff;
}
#explosion{
opacity:0.5;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:url(/img/explosion.png) center center no-repeat;
}



/*
 Анимация
*/

.rotate180{
transition: transform 1s;
transform: rotate(180deg);
}
#spiderman{
display:block;
position:absolute;
left:calc(50% - 175px);
bottom:100%;
}
#tom{
display:block;
position:absolute;
right:30px;
top:-295px;
}
#gorodfooter{
width:100%;
height:274px;
background:url(/img/gorodfooter.png) bottom center repeat-x;
position:absolute;
left:0;
bottom:-275px;
}
#mujik{
display:block;
position:absolute;
right:100px;
bottom:-575px;
}
#raketa1{
display:block;
position:absolute;
left:100%;
top:180px;
}
#boom1{
display:none;
position:absolute;
left:0;
top:0;
}
#treshina1{
display:none;
position:absolute;
left:30px;
top:40px;
}
#zelya{
display:block;
position:absolute;
left:60px;
top:100%;
}
#vanna{
display:block;
position:absolute;
left:-600px;
bottom:60px;
}
#kot1{
display:block;
position:absolute;
left:120px;
bottom:-326px;
}
#lenin{
display:block;
position:absolute;
left:45%;
bottom:-398px;
}
#kastrulya{
position:absolute;
left:-161px;
bottom:190px;
width:161px;
height:155px;
}
#kastrulya .gif{
position:absolute;
top:0;
left:22px;
width:124px;
display:block;
}
#kastrulya .png{
position:absolute;
top:93px;
left:0;
width:161px;
}
#comments{
display:none;
position:absolute;
left:calc(45% - 190px);
bottom:415px;
text-decoration:none;
background-color:#fff;
}

#formacomma{
margin:30px 0;
}

#formacomma input[type=text]{
width:300px;
height:30px;
border:1px solid #eee;
border-radius:5px;
display:block;
margin-bottom:15px;
padding:0 10px
}

#formacomma input[type=submit]{

height:30px;
display:block;
margin-bottom:15px;
}

#formacomma textarea{
width:400px;
height:100px;
border:1px solid #eee;
border-radius:5px;
display:block;
margin-bottom:15px;
padding:0 10px
}


.comment{
margin:25px 0;
padding:20px;
background-color:#fafafa;
border:1px solid #f7f7f7;
font-family:Arial;
}

.comment .name{
font-weight:bold;
color:#555;
margin-bottom:10px;
}

.comment .date{
font-size:12px;
color:#999;
margin-bottom: 15px;
}
.comment .text{
color:#333;
}
#smilepole{
display:none !important;
}
.smiles{
margin:15px 0;
}

.smiles img{
height:40px;
display:inline-block;
margin-right:10px;
border:1px solid #fafafa;
cursor:pointer;
}

.smiles img:hover{
border:1px solid #6fd7ff;
}
.center{
text-align:center;
}
.center img{
display:block;
max-width:100%;
margin:15px auto;
}
@media screen and (max-width:1400px){
#spiderman{
width:100px;
}
#tom{
width:300px;
}
#mujik{
width:500px;
}
#raketa1{
width:250px;
}
#zelya{
width:150px;
}
#vanna{
width:450px;
}
#kot1{
width:300px;
}
}


.shadow_animation{
background-image: linear-gradient(#ba42ff 35%,#00e1ff);
    border-radius: 60px;
    box-shadow: 0 -5px 20px 5px #ba42ff,0 5px 20px -5px #00e1ff;
    height: 120px;
    text-align: center;
    width: 120px
}