.btn-clrsilver {
 border-color: #b4ccce #b3c0c8 #9eb9c2;
 color: #527881;
 text-shadow: 0 1px #e3f1f1;
 background: #cde5ef;
 background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
 background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
 background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
 background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
 -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
 box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}


.btn-clrblue {
 border-color: #b4ccce #b3c0c8 #9eb9c2;
 color: #527881;
 text-shadow: 0 1px #e3f1f1;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);

 background: #0090d2;
 background-image: -webkit-linear-gradient(top, #0090d2, #0d7796);
 background-image: -moz-linear-gradient(top, #0090d2, #0d7796);
 background-image: -ms-linear-gradient(top, #0090d2, #0d7796);
 background-image: -o-linear-gradient(top, #0090d2, #0d7796);
 background-image: linear-gradient(top, #0090d2, #0d7796);
}

.btn-clrgray {
 color: #597490;
 text-decoration: none;
 text-shadow: 0 1px rgba(255, 255, 255, 0.8);
 background: #d8e6f4;
 background-clip: padding-box;
 border: 1px solid;
 border-color: #b2bcc8 #acb6c0 #97abba;
 border-radius: 3px;
 background-image: -webkit-linear-gradient(top, #f1f6ff, #d3dde7 70%, #bfcddc);
 background-image: -moz-linear-gradient(top, #f1f6ff, #d3dde7 70%, #bfcddc);
 background-image: -o-linear-gradient(top, #f1f6ff, #d3dde7 70%, #bfcddc);
 background-image: linear-gradient(to bottom, #f1f6ff, #d3dde7 70%, #bfcddc);
 -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.06);
 box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.06);
}

.btn-clrgray:hover {
 color: #f6fdff;
 text-shadow: 0 1px rgba(0, 0, 0, 0.4); 
 background: #99abb9;
 border-color: #718190;
 background-image: -webkit-linear-gradient(top, #99abb9, #7e93a8);
 background-image: -moz-linear-gradient(top, #99abb9, #7e93a8);
 background-image: -o-linear-gradient(top, #99abb9, #7e93a8);
 background-image: linear-gradient(to bottom, #99abb9, #7e93a8);
 -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(255, 255, 255, 0.3);
 box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(255, 255, 255, 0.3);
}

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

Анимация для стрелок в arraw icon

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



.open .left-bar:after {
  transform-origin: center center;
  transform: rotate(-70deg);
}
.open .right-bar:after {
  transform-origin: center center;
  transform: rotate(70deg);
}


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

Arrow icon button - Анимированная кнопка в виде стрелки вниз, при нажатии меняет направление наверх

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

.arrow-icon {
 display: inline-block;
 background-color: transparent;
 border: none !important;
 height: 3rem;
 width: 4rem;
 padding: 1rem;
 position: relative;
 cursor: pointer;
 border-radius: 4px;
}

.arrow-icon:focus {
 outline: -webkit-focus-ring-color auto 5px;
}

.arrow-icon .left-bar {
 position: absolute;
 background-color: transparent;
 top: 20px;
 left: 6px;
 width: 30px;
 height: 8px;
 display: block;
 transform: rotate(35deg);
 float: right;
 border-radius: 2px;
}

.arrow-icon .left-bar:after {
 content: "";
 background-color: #458bff;
 width: 30px;
 height: 8px;
 display: block;
 float: right;
 border-radius: 6px 10px 10px 6px;
 transition: all 1.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
 z-index: -1;
}

.arrow-icon .right-bar {
 position: absolute;
 background-color: transparent;
 top: 20px;
 left: 24px;
 width: 30px;
 height: 8px;
 display: block;
 transform: rotate(-35deg);
 float: right;
 border-radius: 2px;
}

.arrow-icon .right-bar:after {
 content: "";
 background-color: #458bff;
 width: 30px;
 height: 8px;
 display: block;
 float: right;
 border-radius: 10px 6px 6px 10px;
 transition: all 1.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
 z-index: -1;
}








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

Link with arrow icon - Анимированная кнопка в виде стрелки вниз, при нажатии меняет направление наверх

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

.link-arrow-icon {
 display: inherit;
 background-color: transparent;
 border: none !important;
 position: relative;
 cursor: pointer;
 border-radius: 4px;
 padding-right: 4rem;
 color: #0a58ca;
}

.link-arrow-icon:hover {
 color: #0d6efd;
}

.link-arrow-icon:focus {
 outline: -webkit-focus-ring-color auto 5px;
}

.link-arrow-icon span:first-child{
 margin-right: 2rem;
 display: inline;
}


.link-arrow-icon .left-bar {
 display: inline-block;
 position: absolute;
 background-color: transparent;
 top: 1rem;/*20px;*/
 right: 1rem;
 width: 1.5rem;/*30px*/
 height: 0.3rem;
 display: block;
 transform: rotate(35deg);
 float: right;
 border-radius: 2px;
}

.link-arrow-icon .left-bar:after {
 content: "";
 background-color: #0a58ca;
 width: 1.5rem;
 height: 0.3rem;
 display: block;
 float: right;
 border-radius: 6px 10px 10px 6px;
 transition: all 1.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
 z-index: -1;
}

.link-arrow-icon .right-bar {
 position: absolute;
 background-color: transparent;
 top: 1rem;
 right: 0;
 width: 1.5rem;
 height: 0.3rem;
 display: block;
 transform: rotate(-35deg);
 float: right;
 border-radius: 2px;
}

.link-arrow-icon .right-bar:after {
 content: "";
 background-color: #0a58ca;
 width: 1.5rem;
 height: 0.3rem;
 display: block;
 float: right;
 border-radius: 10px 6px 6px 10px;
 transition: all 1.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
 z-index: -1;
}