.btn1{
    color: #fff;
    background: linear-gradient(135deg, #9aa3a3, #2f444c);
    font-family: ArtinBold;
    font-size: 22px;
    font-weight: 700;
    /*text-transform: lowercase;*/
    padding: 10px 20px !important;
    border: none;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.btn1:hover{
    color: #fff;
    border: none;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    animation: rotate 0.7s ease-in-out both;
}
.btn1:before,
.btn1:after{
    content: '';
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0;
    transform: translate(100%, -25%) translate3d(0, 0, 0);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: all 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.btn1:hover:before,
.btn1:hover:after{
    opacity: 0.15;
}
.btn1:hover:before{ transform: translate3d(50%, 0, 0) scale(0.9); }
.btn1:hover:after{ transform: translate(50%, 0) scale(1.1); }
@keyframes rotate{
    0%{ transform: rotate(0deg); }
    25%{ transform: rotate(3deg); }
    50%{ transform: rotate(-3deg); }
    75%{ transform: rotate(1deg); }
    100%{ transform: rotate(0deg); }
}

@media only screen and (max-width: 767px){
    .btn1{ margin-bottom: 20px; }
}

.bgwhite{
    background-color: white !important;
}
.w50{
    width: 50%;
}
.textright{
    text-align: right !important;
}
.textleft{
    text-align: left !important;
}
@media only screen and (max-width: 1200px){
    .fontsize12{ font-size: 11px !important; }
}
@media only screen and (min-width: 1019px){
    .positionnone{ position: absolute !important; }
}
@media only screen and (max-width: 1000px){
    .fontsize12{ font-size: 14px !important; }
    .positionnone{ position: unset !important; }
}