@charset "UTF-8";

.blog {
margin-left:150px;
width:900px;
}

.item-page h2{
color:#b1408f;
font-size: 20px;
text-align: center;
   margin-bottom:15px;
}

.readmore-link{
color:#329ef1;
  font-size: 14px;
  margin-bottom:15px;
font-weight:bold;
}

input:focus{
outline: none;
}

textarea:focus{
outline: none;
}

#toTop {
width: 80px;
border: 1px solid #ccc;
background: #f7f7f7;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
left: 10px;
cursor: pointer;
display: none;
color: #333;
font-family: verdana;
font-size: 11px;
}

.animation1 {
-webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 cursor:pointer;
 color:white;
 margin-left:23px;
 margin-right:23px;
   -webkit-box-shadow: #3c4149 0px 4px 20px -6px;
   -moz-box-shadow:#3c4149 0px 4px 20px -6px;
   box-shadow:#3c4149 0px 4px 20px -6px;
  opacity:1;
}

.animation1:hover {
opacity:0.7;}

.animation2 {
-webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 cursor:pointer;
 color:white;
  opacity:1;
}

.animation2:hover {
opacity:0.7;}

.anim_css {
  -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
}

@font-face{font-family:'GracefulMazurka';font-style:normal;font-weight:400;src:local('GracefulMazurka'),url(http://artprazdnik-vrn.ru/fonts/Graceful-Mazurka.woff) format('woff'),url(http://artprazdnik-vrn.ru/fonts/Graceful-Mazurka.ttf) format('truetype')}
@font-face{font-family:'Nautilus Pompilius';font-style:normal;font-weight:400;src:local('Nautilus Pompilius'),url(http://artprazdnik-vrn.ru/fonts/Nautilus-Pompilius.woff) format('woff'),url(http://artprazdnik-vrn.ru/fonts/Nautilus-Pompilius.ttf) format('truetype')}
@font-face{font-family:'gothic_new';font-style:normal;font-weight:400;src:local('gothic_new'),url(http://artprazdnik-vrn.ru/fonts/gothic.woff) format('woff'),url(http://artprazdnik-vrn.ru/fonts/gothic.ttf) format('truetype')}


/**********All styles popup**********/
.popup {
padding:5px 15px 15px;
position:fixed;
top:150px;
left:50%;
margin-left:-250px;
display:none;
overflow:hidden;
border:2px solid #77b9f5;
width:529px;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:20px;
z-index:100;
behavior: url(../images/PIE.htc);
height: 328px;
}
.popup h2 {
font:bold 18px/32px Arial, san-serif;
}
.popup a.close {
width:27px;
height:27px;
display:block;
text-indent:-9999px;
position:absolute;
top:8px;
right:8px;
background:url(../images/close.jpg) no-repeat;
}

#nybutton1{
 width: 249px;
 height: 271px;
    top: 214px;
    left: 602px;
 position:absolute;
 cursor:pointer;
}
#nybutton1:hover {
 background-image: url(../images/nybut2_01.jpg);
}
#nybutton2{
 width: 249px;
 height: 271px;
    top: 214px;
    left: 851px;
 position:absolute;
   cursor:pointer;
}
#nybutton2:hover {
 background-image: url(../images/nybut2_02.jpg);
}
#nybutton3{
    width: 249px;
    height: 279px;
    top: 485px;
    left: 602px;
 position:absolute;
   cursor:pointer;
}
#nybutton3:hover {
 background-image: url(../images/nybut2_03.jpg);
}
#nybutton4{
    width: 249px;
    height: 279px;
top: 485px;
    left: 851px;
 position:absolute;
   cursor:pointer;
}
#nybutton4:hover {
 background-image: url(../images/nybut2_04.jpg);
}

#logo{
 -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 width: 500px;
 height: 300px;
 background-image: url(../images/logotop.png);
 top:52px;
 left:367px;
 position:absolute;
}
#vipusk{
 -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 width: 223px;
 height: 130px;
 background-image: url(../images/znachek_vypusknye.png);
    top: 200px;
right: 0px;
 position:absolute;
}

#vipusk:hover {
   -moz-transform: rotate(-5deg); 
    -ms-transform: rotate(-5deg); 
    -webkit-transform: rotate(-5deg); 
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
#ng{
 -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 width: 255px;
 height: 224px;
 background-image: url(../images/znachek_ng.png);
top: 100px;
right: 0px;
 position:absolute;
}
#tesla{
 -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 width: 256px;
 height: 254px;
 background-image: url(../images/znachek_tesla.png);
top: 75px;
left: 0px;
 position:absolute;
}
#ng:hover {
   -moz-transform: rotate(-5deg); 
    -ms-transform: rotate(-5deg); 
    -webkit-transform: rotate(-5deg); 
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
#tesla:hover {
   -moz-transform: rotate(-5deg); 
    -ms-transform: rotate(-5deg); 
    -webkit-transform: rotate(-5deg); 
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
#logo:hover {
   -moz-transform: rotate(-5deg)  scale(1.05); 
    -ms-transform: rotate(-5deg) scale(1.05); 
    -webkit-transform: rotate(-5deg) scale(1.05); 
    -o-transform: rotate(-5deg) scale(1.05);
    transform: rotate(-5deg) scale(1.05);
}

/*БЛОК МЕНЮ*/

#mainnav li {
  list-style-type: none;
}
#mainnav a {
  height:40px;
  cursor:pointer;
  0display: inline-block;
  padding-left: 19px;
  padding-right: 18px;
  padding-top: 15px;
  float: left;
  color: #FFFFFF;
  font-family: arial;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  text-decoration:none;
}
#mainnav a:hover{
  background:#ff7bd8;
  color: #FFFFFF;
   -webkit-box-shadow: #3c4149 0px 4px 20px -6px;
   -moz-box-shadow:#3c4149 0px 4px 20px -6px;
   box-shadow:#3c4149 0px 4px 20px -6px;
}

#mainnav {
  height: 57px;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/*ОБЩИЙ БЛОК*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color:#505050;
  font-style: inherit;
  font-size: medium;
  font-family: arial, helvetica, sans-serif;;
  vertical-align: baseline;
}
body {
  color: black;

}
ol, ul {
  list-style: none;
}
table {
  border-collapse:collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
abbr,acronym {
  border:0;
}

/* Text styles */

#topmenu {
  max-width: 2000px;
  min-width: 1200px;
  height: 367px;
  background-image: url(../images/top.jpg);
  background-position: 50% 0%;
  position: relative;
}
div.dopuslugitext {
  max-width: 2000px;
  min-width: 1200px;
  height: 147px;
  background-image: url(../images/dop.jpg);
  background-position: 50% 0%;
}
#vipusk_back{
  max-width: 2000px;
  min-width: 1200px;
  height: 765px;
  background-image: url(../images/vipusk_all.jpg);
  background-position: 50% 0%;}

div.dopuslugi {
  max-width: 2000px;
  min-width: 1200px;
  height: 100%;
  background-image: url(../images/backdop.jpg);
  background-position: 50% 0%;}
div.centerpos {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  position: relative;}

/*БЛОК НИЖНИЙ*/
#bottom {
  max-width: 2000px;
  min-width: 1200px;
  height: 399px;
  background-image: url(../images/bottom.jpg);
  background-position: 50% 0%;
  position: relative;
}  
#bottom:before {
width: 100%;
  content: " ";
  margin-top: -11px;
  height: 12px;
  background-image: url(../images/bottomnakladka.png);
  background-position: 50% 0%;
  position: absolute;
}  
.anim1 {   -webkit-transition: all ease-out 0.5s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.5s;
 -ms-transition: all ease-out 0.5s;
 -o-transition: all ease-out 0.5s;
  transition: all ease-out 0.5s;}
#niz01 {
  top:10px;
  left:410px;
  position: absolute;
}
#niz01:hover {left:390px;top:5px;}
#niz02 {
  top:70px;
  left:345px;
  position: absolute;
}
#niz02:hover {left:365px;top:60px;}
#niz03 {
  top:145px;
  left:380px;
  display:block;
  position: absolute;
}
#niz03:hover {left:390px;top:140px;}
#niz04 {
  top:165px;
  left:245px;
  position: absolute;
}
#niz04:hover {left:240px;top:160px;}
#niz05 {
  top:155px;
  left:380px;
  position: absolute;
}
#niz05:hover {left:390px;top:150px;}
/*БЛОК ДЛЯ АНИМАЦИИ ПРОГРАММ*/
div.programmblock {
  width:1100px;
  height:500px;
  position:relative;
  color:#FFFFFF;
  font-family: arial;
  cursor:pointer;
}
div.leftperson{
 -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 left:40px;
 top:0px;
 position:absolute;
}
div.centerperson{
     -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 left:440px;
 top:0px;
 position:absolute;
}
div.rightperson{
     -webkit-transition: all ease-out 0.7s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.7s;
 -ms-transition: all ease-out 0.7s;
 -o-transition: all ease-out 0.7s;
 transition: all ease-out 0.7s;
 left:800px;
 top:0px;
 position:absolute;
}
div.leftperson:hover {
   -moz-transform: rotate(-5deg); 
    -ms-transform: rotate(-5deg); 
    -webkit-transform: rotate(-5deg); 
    -o-transform: rotate(-5deg); 
    transform: rotate(-5deg);
}
div.rightperson:hover {
   -moz-transform: rotate(5deg); 
    -ms-transform: rotate(5deg); 
    -webkit-transform: rotate(5deg); 
    -o-transform: rotate(5deg); 
    transform: rotate(5deg);
}
div.centerperson:hover {
   margin-top:-5px;
}
div.leftprtext{
 -webkit-transition: all ease-out 0.5s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.5s;
 -ms-transition: all ease-out 0.5s;
 -o-transition: all ease-out 0.5s;
 transition: all ease-out 0.5s;
 background-repeat: no-repeat;
 padding-top:25px;
 left:40px;
 top:420px;
 position:absolute;
 width:380px;
 height:59px;
 text-valign:center;
 text-align:center;
 background-image: url(../images/progtextleft.jpg);
 color:#FFFFFF;
 font-size: 18px;
 font-family: arial, helvetica, sans-serif;
}
div.rightprtext{
 -webkit-transition: all ease-out 0.5s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.5s;
 -ms-transition: all ease-out 0.5s;
 -o-transition: all ease-out 0.5s;
 transition: all ease-out 0.5s;
 background-repeat: no-repeat;
 padding-top:25px;
 left:800px;
 top:420px;
 position:absolute;
 width:380px;
 height:59px;
 text-valign:center;
 text-align:center;
 background-image: url(../images/progtextright.jpg);
   color:#FFFFFF;
 font-size: 18px;
 font-family: arial, helvetica, sans-serif;
}
div.centerprtext{
 -webkit-transition: all ease-out 0.5s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all ease-out 0.5s;
 -ms-transition: all ease-out 0.5s;
 -o-transition: all ease-out 0.5s;
 transition: all ease-out 0.5s;
 background-repeat: no-repeat;
 padding-top:25px;
 left:440px;
 top:420px;
 width:340px;
 height:59px;
 position:absolute;
 text-align:center;
 background-image: url(../images/progtextcenter.jpg);
 color:#FFFFFF;
 font-size: 18px;
 font-family: arial, helvetica, sans-serif;
}
div.leftprtext:hover{
 top:417px;
}
div.centerprtext:hover{
 top:417px;
}
div.rightprtext:hover{
 top:417px;
}

/* Animation styles */

.animation2 {
-webkit-transition: all linear 0.5s; /*Устанавливаем плавный переход при наведении курсора мыши*/
 -moz-transition: all linear 0.5s;
 -ms-transition: all linear 0.5s;
 -o-transition: all linear 0.5s;
 transition: all linear 0.5s;
 cursor:pointer;
}

.animation2:hover {
 margin-top:-3px;
}

/*phocaguestbook*/
#phocaguestbook {
  margin:  0;
  padding:0;width:99%;
}
#phocaguestbook a img {
  border:0px;
  padding:0;
  margin:0;
}
#phocaguestbook table tr td a img {
  border:0px;
}
#phocaguestbook .pgbinput {
  border:1px solid #cccccc;
}

#phocaguestbook .pgcontent {
  position:relative;
  padding-left:  5px;
  margin:      10px;
}

#phocaguestbook .pgcontentbottom {
  text-align:    right;
  padding-right:  10px;
}

#phocaguestbook .pgtitle {
  padding:  8px;
  margin:    2px;
}

#phocaguestbook .pgbox {
  margin:10px 0px;
}

#phocaguestbook .pgcenter {
  text-align:center;
  vertical-align:middle;
}
#phocaguestbook .pginline {
  margin:0 10px 0 10px;
  display:inline;
}

#phocaguestbook .pagination #pg-pagination  ul {
  margin: 10px auto;
  text-align: center;
}

/*panels*/
#phocaguestbook  #pg-open-guestbook  {
  background: transparent url(images/icon-message.png) 5px 50% no-repeat;
  padding: 5px;
  padding-left: 24px;
  cursor:pointer;
  text-decoration:underline;
}
#phocaguestbook #pg-guestbook {
  padding-top: 10px;
  padding-bottom: 10px;
}


#phocaguestbook #mce_editor_0_toolbar {
  position: static !important;
}

#phocaguestbook .error {
  background:#FFC2C2;
  border:1px solid #bf3030;
  color: #a60000;
  padding:10px;
  margin-top:5px;
  margin-bottom:5px;
}


/* Not conflict with beez*/
#phocaguestbook table,
#phocaguestbook table tr,
#phocaguestbook table td {
  border: none;
}
#phocaguestbook table tr td {
  padding:3px;
}

#phocaguestbook #pgbcontent_tbl,
#phocaguestbook #pgbcontent_tbl tr,
#phocaguestbook #pgbcontent_tbl tr td {
  padding: 0px;
}

#phocaguestbook #pgbcontent_tbl{
  border: 1px solid #cccccc;
}

#phocaguestbook #pgbcontent_tbl tr td.mceToolbar{
  border-bottom: 1px solid #cccccc;
}
#phocaguestbook #pgbcontent_tbl tr td.mceStatusbar{
  border-top: 1px solid #cccccc;
}

/* vipusk */

.vip_1 {
    position: absolute;
    top: 35px;
    left: 0;
    width: 1200px;
    text-align: center;
    font-size: 47px;
    font-family: Nautilus Pompilius;
    color: #009cf8;
    font-weight: normal;
}

.vip_2 {
    position: absolute;
    text-align: right;
    width: 760px;
    right: 180px;
    top: 170px;
}

.vip_3 {
    position: absolute;
    font-weight: bold;
    width: 415px;
    color: #0b72af;
    right: 190px;
    top: 250px;
    font-size: 20px;
    text-align: center;
}

.vip_4 {
    position: absolute;
    font-weight: bold;
    width: 433px;
    color: #0096ee;
    right: 181px;
    bottom: 129px;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
}


.vip_5 {
    position: absolute;
    text-align: right;
    top: 120px; 
    right: 180px;
}

.vip_5 li {
  display: inline-block;
  margin-left: 23px;
  color: #f13ebb;
  font-weight: bold;
}

.vip_but_1 {
    position: absolute;
    left: 585px;
    top: 318px;   
}

.vip_but_2 {
    position: absolute;
    left: 820px;
    top: 318px;
}

#artroom:hover {
    top: 35px;
}
#artroom {
    -webkit-transition: all ease-out 0.7s;
    -moz-transition: all ease-out 0.7s;
    -ms-transition: all ease-out 0.7s;
    -o-transition: all ease-out 0.7s;
    transition: all ease-out 0.7s;
    width: 395px;
    height: 297px;
    background-image: url(http://artprazdnik-vrn.ru/images/artroom.png);
    top: 40px;
    left: 0px;
    position: absolute;
}


/* Новый выпускные */
.vipusk_main {
    max-width: 2200px;
    min-width: 1200px;
    height: 1100px;
    background-image: url(../images/vipusk_main.jpg);
    background-position: 50% 0%;
    position: relative;
    margin-top: -10px;
}

.vip_txt1 {
    font-size: 48px;
    font-family: Nautilus Pompilius;
    color: #009fed;
    position: absolute;
    top: 57px;
    left: 364px;
    text-align: center;
    width: 500px;
    font-weight: normal;
}

.vip_txt2 {
  font-size: 35px;
    font-family: Nautilus Pompilius;
    color: #009fed;
    display: block;
    line-height: 30px;
}

.vip_txt3 {
    font-size: 18px;
    position: absolute;
    top: 188px;
    left: 221px;
    text-align: center;
    width: 800px;
    font-family: gothic_new;
}

.vip_txt3 strong {
    font-family: gothic_new;
    font-size: 18px;
}

.vip_txt4 {
    font-size: 18px;
    position: absolute;
    top: 717px;
    left: 221px;
    text-align: center;
    width: 800px;
    font-family: gothic_new;
}

.vip_txt4 strong {
    font-family: gothic_new;
    font-size: 18px;
}

.vip_txt5 {
}

.vip_txt5 span {
  font-family: Nautilus Pompilius;
  font-size: 39px;
  line-height: 50px;
  }

.vip_img1 {
    position: absolute;
    top: 420px;
    left: 100px;
    border: 0;
    -webkit-transition: all ease-out 0.7s;
    -moz-transition: all ease-out 0.7s;
    -ms-transition: all ease-out 0.7s;
    -o-transition: all ease-out 0.7s;
    transition: all ease-out 0.7s;
}

.vip_img2 {
    position: absolute;
    top: 421px;
    border: 0;
    -webkit-transition: all ease-out 0.7s;
    -moz-transition: all ease-out 0.7s;
    -ms-transition: all ease-out 0.7s;
    -o-transition: all ease-out 0.7s;
    transition: all ease-out 0.7s;
}


.vip_img3 {
    position: absolute;
    top: 420px;
    right: 100px;
    border: 0;
    -webkit-transition: all ease-out 0.7s;
    -moz-transition: all ease-out 0.7s;
    -ms-transition: all ease-out 0.7s;
    -o-transition: all ease-out 0.7s;
    transition: all ease-out 0.7s;
}

.shkola_a:hover .vip_img2{
   -moz-transform: scale(1.02); 
    -ms-transform: scale(1.02); 
    -webkit-transform: scale(1.02); 
    -o-transform: scale(1.02);
    transform: scale(1.02);
        opacity: 0.8;
}

.vip_img3 {
   -moz-transform: scale(1.02); 
    -ms-transform: scale(1.02); 
    -webkit-transform: scale(1.02); 
    -o-transform: scale(1.02);
    transform: scale(1.02);
        opacity: 0.8;
}


.vsrosliy:hover .vip_img3{
   -moz-transform: scale(1.02); 
    -ms-transform: scale(1.02); 
    -webkit-transform: scale(1.02); 
    -o-transform: scale(1.02);
    transform: scale(1.02);
        opacity: 0.8;
}

.sad_a:hover .vip_img1 {
   -moz-transform:   scale(1.02); 
    -ms-transform:  scale(1.02); 
    -webkit-transform:  scale(1.02); 
    -o-transform:  scale(1.02);
    transform:  scale(1.02);
    opacity: 0.8;
}

.vip_but1 {
    position: absolute;
    top: 855px;
    left: 100px;
    background: #ec78cd;
    width: 315px;
    height: 35px;
    border-radius: 40px;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-top: 15px;
    cursor: pointer;
    font-family: gothic_new;
}

.vip_but2 {
    position: absolute;
    top: 855px;
    left: 440px;
    background: #45abdc;
    width: 315px;
    height: 35px;
    border-radius: 40px;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-top: 15px;
    cursor: pointer;
    font-family: gothic_new;
}

.vip_but3 {
    position: absolute;
    top: 855px;
    right: 100px;
    background: #9561dc;
    width: 315px;
    height: 35px;
    border-radius: 40px;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-top: 15px;
    cursor: pointer;
    font-family: gothic_new;s
}

 

 /* 11 */
.btn-11 {
  border: none;

    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}