@import "../css/reset.css";
@import "../css/fonts.css";
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block}mark,rp,rt,ruby,summary,time{display:inline}
/* Global properties ======================================================== */
html {width:100%}
body {font-family:Calibri, sans-serif; text-align:justify; font-size:16px; line-height:21px; color:#767676; min-width:990px; background:#ffffff; -webkit-text-size-adjust: none;}
strong {font-size:24px;line-height:30px;}
b {font-size:18px;}
em {font-weight:bold;}
/**************Global Structure*****************/
.wrapper{width:100%; overflow:hidden; position:relative;}
.extra-wrap{overflow:hidden; display:block;}
/* #Base 960 Grid
================================================== */
  .container_12{position: relative; width: 960px; margin: 0 auto; padding: 0;}
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12  {float: left; display: inline; margin-left: 10px; margin-right: 10px;}
  /* Nested Column Classes */
  .container_12 .alpha    {margin-left: 0 !important;}
  .container_12 .omega    {margin-right: 0 !important; margin-bottom:0 !important}
  /* Base Grid */
  .container_12 .grid_1   {width: 60px; }
  .container_12 .grid_2   {width: 140px;}
  .container_12 .grid_3   {width: 220px;}
  .container_12 .grid_4   {width: 300px;}
  .container_12 .grid_5   {width: 380px;}
  .container_12 .grid_6   {width: 460px;}
  .container_12 .grid_7   {width: 540px;}
  .container_12 .grid_8   {width: 620px;}
  .container_12 .grid_9   {width: 700px;}
  .container_12 .grid_10    {width: 780px;}
  .container_12 .grid_11    {width: 860px;}
  .container_12 .grid_12    {width: 940px;}
  /* Prefix Extra Space >> 12 Columns */
  .container_12 .prefix_1   {padding-left:80px;}
  .container_12 .prefix_2   {padding-left:160px;}
  .container_12 .prefix_3   {padding-left:240px;}
  .container_12 .prefix_4   {padding-left:320px;}
  .container_12 .prefix_5   {padding-left:400px;}
  .container_12 .prefix_6   {padding-left:480px;}
  .container_12 .prefix_7   {padding-left:560px;}
  .container_12 .prefix_8   {padding-left:640px;}
  .container_12 .prefix_9   {padding-left:720px;}
  .container_12 .prefix_10  {padding-left:800px;}
  .container_12 .prefix_11  {padding-left:880px;}
  /* Suffix Extra Space >> 12 Columns */
  .container_12 .suffix_1   {padding-right:80px;}
  .container_12 .suffix_2   {padding-right:160px;}
  .container_12 .suffix_3   {padding-right:240px;}
  .container_12 .suffix_4   {padding-right:320px;}
  .container_12 .suffix_5   {padding-right:400px;}
  .container_12 .suffix_6   {padding-right:480px;}
  .container_12 .suffix_7   {padding-right:560px;}
  .container_12 .suffix_8   {padding-right:640px;}
  .container_12 .suffix_9   {padding-right:720px;}
  .container_12 .suffix_10  {padding-right:800px;}
  .container_12 .suffix_11  {padding-right:880px;}
  /*twin columns*/
  .dgrid_2{float:left; width:140px;}
  .dgrid_3{float:left; width:220px;}
  .dgrid_4{float:left; width:300px;}
    .dgrid_2:first-child, .dgrid_3:first-child, .dgrid_4:first-child{margin-right:20px;}
  /*triple columns*/
  .tgrid_2{float:left; width:140px; margin-right:20px;}
  .tgrid_3{float:left; width:220px; margin-right:20px;}
  .tgrid_2.last-col, .tgrid_3.last-col{margin-right:0px;}
/*********************************fonts*************************************/
.reg {text-transform:uppercase}
.f_left {float:left}
.f_right {float:right}
.align_right {text-align:right}
.align_center {text-align:center}
.it{font-style:italic}
.let{letter-spacing:-1px}
/*********************************CLASSES**********************************/
.m_bottom_zero{ margin-bottom:0 !important;}
.m_left_zero{ margin-left:0 !important;}
.p_bottom_zero{ padding-bottom:0 !important;}
.p_left_zero{ padding-left:0 !important;}
.titulo {font-weight:bold;font-size:16px;}
.clear {clear:both;width:100%;line-height:0;font-size:0;}
.wrapper {width:100%;overflow:hidden}
.extra_wrapper{ overflow:hidden;}
.container{width:100%}
.extra_last, .last{ margin:0 !important; padding:0 !important;}
.extra_last{ border:none !important; background:none !important;}
.bg_none{ background:none !important;}
.right{float:right;}
.text-right{text-align:right;}
.azul {color:#5d7793; }
.divisa {border-right:solid 1px #ccc; padding-right:20px;}
.moldura {background:#fff; float: left;margin-right: 17px;margin-bottom: 17px;width: 220px;height: 150px; border:solid 1px #ccc;}
.moldura span {width: 100%;height: 100%;display: block;}
div.moldura .depoimento {display: none; background: #5d7793; padding: 3px 5px; color: #fff; width: 210px; height:144px; font-size: 13px; line-height: 12px;}
.contato{font-size:16px;}
.contato span{font-size:20px;}
.contato a {color:#767676;}
.divisa {border-top: solid 1px #5d7793; margin: 20px 10px;}
.border-gradient { position: relative; }
.border-gradient:before, .border-gradient:after { content: ""; position: absolute; bottom: 0px;}
.border-gradient::before{ left:50%; margin-left: -300px; height: 1px; width: 300px; background-image: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(#ccc)); background-image: -webkit-linear-gradient(right, #ccc,transparent); background-image: -moz-linear-gradient(right, #ccc, transparent); background-image: -o-linear-gradient(right, #ccc, transparent);}
.border-gradient::after{left: 50%; height: 1px; width: 300px; background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#ccc), to(transparent)); background-image: -webkit-linear-gradient(left,#ccc,transparent); background-image: -moz-linear-gradient(left,#ccc, transparent); background-image: -o-linear-gradient(left,#ccc, transparent);}
.bg-destaque {background: #3d4f63; border-top: dashed #fff 1px; border-bottom: dashed #fff 1px;}
.bg-destaque h2 {font-size: 38px; color: #88a8ca; letter-spacing: 1px; font-family: 'PompDOT', cursive;
}
.bg-destaque p {color: #fff;}
.bg-destaque li {color: #fff; }
.bg-destaque i { font-size: 20px; }
.bg-destaque .button { background: #88a8ca; }
.bg-destaque .button em { background: #cc0000; }
//.bg-destaque .right {font-size:18px; padding: 0px 20px;}
.leia-mais {border-top: 1px solid #ccc; padding-top: 10px; text-align: right;}
.centraliza {text-align: center;}
/*==================================== Links ======================================================== */
a {color:#5d7793;outline:none; text-decoration:none; cursor:pointer;}
a:hover{ color:#767676; text-decoration:none;}
.button{display:inline-block; padding:20px 30px; margin: 28px 0 5px; font-size: 24px; line-height: 19px; color:#fff; text-transform: uppercase; ;box-shadow: 0 1px 4px rgba(0,0,0,0.75);position: relative;background: #5d7792; border-radius:40px}
.button:hover{color:#fff;}
.button em{width: 100%;height: 0;display: block;background: #88a8ca;position: absolute;left: 0;top: 50%;}
.button:hover em{height: 100%;top: 0;}
.button span{display: inline-block;position: relative;z-index: 10;}
/*********************************Displays*************************************/
.block{ display:block;}
.inline-block{ display:inline-block;}
/*********************************header*************************************/
header {position: relative;padding: 15px 0 0;}
header h1{width: 280px;float: left;}
header h1 a {display:block;width:400px;height:120px;background:url(../interface/logo.png) center left no-repeat; text-decoration:none; text-indent:-9999px;}
.social{ overflow:hidden;float: right;padding: 15px 0 0;}
.area-restrita{width:120px;text-align:right;background: url(../images/area_restrita.png) no-repeat left bottom; overflow:hidden;float: right;padding: 30px 0 0;font-size: 18px;}
.area-restrita a{color: #5d7793;}
.social a{ display:block; float:left;width:28px;height:28px; overflow:hidden; margin-left:8px;}
.social a:first-child{margin: 0 0 0 0;}
.social a:hover img{ margin-top:-28px;}
header .top_block{padding-bottom: 13px; float: left; clear: both;}
.atendimento{display: flex; padding-bottom: 13px; float: right;}
.redes-socias-top{margin-top:18px}
.redes-socias-top >span{width:30px;height:30px; text-align: center;float:right ;border:1px solid #000;border-radius:50%;margin-right:10px;padding:1px;background: #5d7792;}
.redes-socias-top>  span > svg{margin-top:3px;width:25px;height:25px; color:#FFF}
.atendimento-box { width: 337px; display: inline-block;}
.aloweb {display: none; float: right;}

.redes-socias-footer > a > span{margin-right:10px;width:30px;height:30px; text-align: center;float:right ;border:1px solid #000;border-radius:50%;padding:1px;background: #FFF;}
.redes-socias-footer > a > span > svg{margin-top:3px;width:25px;height:25px; color:#5d7792}

.area_restrita {display: block; float: right;}
.area_restrita form input[type='submit'] { background: #5d7792; color: #ffffff; border-radius: 3px; padding: 7px; border: none; font-size: 12px; text-transform: capitalize;float: right;margin-top: 10px; width: 165px;}
.area_restrita form input[type='text'],input[type='password'] { width: 150px!important; color: #aaa; border-radius: 3px; padding: 7px; border: solid 1px #5d7792; font-size: 12px; text-transform: capitalize; }
/*********************************content*************************************/
#content {clear: both;}
.cont_pad .content_inner{padding: 30px 0px !important;}
.content_inner{padding: 35px 0 76px; 
/*-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;*/
}
#slider .grid_12 {overflow:hidden}
.orbit-slide{position: relative;}
.orbit-slide > figcaption{position: absolute;bottom: -35px;left:10px ;color:#FFF}
.banner-botton{display:flex !important;width:100%;height:50px;background: #5d7792; color: #ffffff;font-size:30px; font-weight: 600;}
.banner-botton-item{padding:15px;width:50%;}
.banner-botton-item-span{margin-left:40px}
.banner-botton-item-cicle{width:25px;height:25px;background: #3d4f63;border-radius: 50%; float: right;margin-right:15px}
.banner-botton-item-cicle.is-active,.banner-botton-item-cicle:hover{border:1px solid #FFF;}
#orcamento {width:375px;height:500px;padding:30px;background: url(../images/bg-orcamento.png) no-repeat center center}
/*===============================>> Paragraphs <<=============================*/
p {margin-bottom:21px}
.p2{ margin-bottom:20px;}
.p3{ margin-bottom:14px;}
.p4{ margin-bottom:26px;}
/*===============================>> Table <<=============================*/
table {width:100%;}
th {background: #5d7793; border: solid 1px #fff; color: #fff; padding: 10px; width: 30%;}
td { color: #5d7793; padding: 10px !important;}
table .vidro {border-bottom: solid 7px #b2d32a }table .plastico {border-bottom: solid 7px #e62b0c }table .metal {border-bottom: solid 7px #ffeb08 }table .papel {border-bottom: solid 7px #1e58d3 }
table.funcionario td { color:#ccc; }
table.funcionario a {font-size: 20px; text-transform:uppercase;}
/*================================>> LISTS <<========================================*/
.list1{}
.list1 li{ background:url(../images/link_marker.png) 0 8px no-repeat; margin-bottom: 9px; padding-left:14px;}
.list1 a{font-weight: bold;}
.list1 a:hover{color: #ccc;}
.list1 a span{color: #ccc;font-weight: normal;}
.list2{}
.list2 li{ background:url(../images/link_marker.png) 0 8px no-repeat; margin-bottom: 25px; padding-left:14px;}
.list2 a:hover{color: #ccc;}
ul.servicos li {background: url(../images/lista-orcamento.png) no-repeat left bottom; padding: 10px 25px;font-size: 25px;text-transform: capitalize;font-weight: lighter;}
ul.servicos li a{width:100%;}
/*================================>> H <<========================================*/
h2,h3,h4{ font-weight:normal;font-family: 'PompDOT', cursive;
}
h2{font-family: 'PompDOT', cursive; font-size: 48px; letter-spacing: -3px; line-height: 48px; color:#5d7793; margin-bottom: 24px;}
h3{font-family:'Bauhaus'; font-size: 28px; letter-spacing: -1px; line-height: 28px; color:#5d7793; margin-bottom: 24px;}h4{font-size: 35px; line-height: 30px; color:#385a7e; margin: 24px 0;}
h4 a{color: #fff;}
h4 a:hover{text-decoration: none;}
/*================================>> hovers <<========================================*/
.sf-menu>li>a, .sf-menu>li>a em, .sf-menu>li>a strong, .img_wrap1 em, .button em, .list1 a, .sf-menu a, .list2 a, .news a, .testimonials blockquote a{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
/*================================>> menu <<========================================*/
#main_page nav{margin-bottom: 7px;}
nav{ position:relative;z-index: 99; margin: 0px 0 21px; float: left; width:100%}
 
 .sf-menu{
     display: flex;
     justify-content:space-between;

}

.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:100%}
.sf-menu li {float:left;position:relative;border-left:solid 1px #ffffff;background:#5d7792;}
.sf-menu li.last {border-right:none; padding: 0px 1px;}
.sf-menu>li>a{display:block;position:relative; padding: 15px 41px;}
.sf-menu>li.last>a{padding: 15px 44px !important;}
.sf-menu>li>a:before{width: 2px;height: 100%;display: block;position: absolute;right: 0;top: 0;}
.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{background:#87a8c9}
.sf-menu>li>a strong{display: block;position: absolute;top: -3px;left: 0px;height: 3px;width: 100%;}
.sf-menu>li>a em{display: block;position: absolute;width: 0;height: 0;left: 50%;top: 50%;}
.sf-menu>li>a>span{position: relative;z-index: 10;}
.sf-menu a{font-size: 18px; text-transform: capitalize; line-height: 19px; color:#FFFFFF;}
.sf-menu a:hover{color: #FFFFFF;}
.sf-menu>li:hover>ul {display:block;}
/*================================>> 2 Level <<========================================*/
.sf-menu li ul, .sf-menu li.sfHover>ul{ left:-1px;top:37px;width: 100%;padding:12px 0 12px; z-index:99;}
.sf-menu li ul li{position:relative;border:solid 1px #ffffff;background:#5d7792;text-align:center;}
.sf-menu li ul li a{display: block;padding: 15px 0px;}
.sf-menu li li a:hover, .sf-menu li.sfHover li.sfHover>a{background: #87a8c9;}
//.sf-menu .last{background: none;}
/*********************************page_1*************************************/
.ext_list>li, .ext_box{ overflow:hidden;}
.ext_list>li>figure, .ext_box>figure{ float:left;}
.ext_list>li>div, .ext_box>div{overflow:hidden;}
.offers{margin-bottom: 67px;}
.offer{min-height: 250px;padding: 26px 24px 1px 25px;position: relative;margin-bottom: 45px;}
.offer:after{display: block;width: 100%;position: absolute;bottom: -45px;left: 0;height: 45px;content: "";}
.offer .title{font-size: 30px; line-height: 35px; color: #fff;text-shadow: 0 1px 1px rgba(0,0,0,0.35);background: url('../images/offer_title.png') 0 bottom repeat-x;padding-bottom: 16px;margin-bottom: 15px;}
.offer p{margin-bottom: 19px;}
.offer1{background: url('../images/offer1.jpg') repeat-x #353535;color: #b1b1b1;}
.offer2{background: url('../images/offer2.jpg') repeat-x #1e5d56;color: #c2d5d3;}
.offer3{background: url('../images/offer3.jpg') repeat-x #608227;color: #dcebc3;}
.offer4{background: url('../images/offer4.jpg') repeat-x #c04415;color: #f9d3c5;}
.offer1:after{background: url('../images/offer1_aft.png') right 0 no-repeat;}
.offer2:after{background: url('../images/offer2_aft.png') right 0 no-repeat;}
.offer3:after{background: url('../images/offer3_aft.png') right 0 no-repeat;}
.offer4:after{background: url('../images/offer4_aft.png') right 0 no-repeat;}
.link1{font-weight: bold;color: #fff;display: inline-block;padding-left: 14px;background: url('../images/link_marker.png') 1px 8px no-repeat;}
.link1:hover{color: #c1bbbb;}
.img_wrap1{display: inline-block;background: url('../images/img_wrap1.png') repeat-x;padding: 5px;box-shadow: 0 1px 4px rgba(0,0,0,0.75), inset 0 0 0 1px #333436;position: relative;margin-bottom: 5px;}
.img_wrap1 img{z-index: 10;position: relative;}
.img_wrap1 em{background: #608227;display: block;position: absolute;left: 0;top: 0;width: 0;height: 0;}
.img_wrap1:hover em{width: 100%;height: 100%;}
.white, .news a:hover, .testimonials blockquote a:hover{color: #5d7792;}
a.white:hover{color: #608227;}
.advantage{border-bottom: 1px solid #353434;padding-bottom:45px;margin-bottom: 42px;}
.advantage>div{padding: 4px 0 0px;}
.advantage>figure{margin: 0 20px 0 0;}
/*********************************page_2*************************************/
.events_box, .facts{border-bottom: 1px solid #353434;padding-bottom: 50px;margin-bottom: 42px;}
.programs{border-bottom: 1px solid #353434;padding-bottom: 44px;margin-bottom: 42px;}
.points{}
.points>div{}
.points>figure{margin: 7px 20px 0 0;}
/*********************************page_3*************************************/
.events>li{margin-bottom: 17px;}
.events>li>div{padding-top: 4px;}
.events>li>figure{margin: 0 21px 0 0;}
.events time{font-weight: bold;color: #fff;}
.news{padding-right: 20px;}
.news>li{margin-bottom: 25px;}
.news>li>div{}
.news>li>figure{margin: 2px 21px 0 0;}
.news>li>figure time{width: 59px;height: 63px;display: block;text-align: center;background: url('../images/time.png') no-repeat;font-size: 32px;line-height: 39px;font-weight: bold;color: #4e4e4e;padding: 12px 0 0;text-shadow: 1px 1px 1px #fefdfd;letter-spacing: -2px;}
.news>li>figure time span{display: block;font-size: 13px;font-weight: normal;letter-spacing: 0;margin-top: -21px;}
.testimonials{border-bottom: 1px solid #353434;padding-bottom: 44px;margin-bottom: 42px;}
.testimonials>li{margin-bottom: 31px;}
.testimonials>li>div{}
.testimonials blockquote{position: relative;border: 1px solid #3e3e3e;border-bottom: none;padding: 20px 20px 24px 20px;font-style: italic;margin-bottom: 30px;}
.testimonials blockquote:after{width: 100%;height: 23px;display: block;background: url('../images/blockqoute_after.png') no-repeat;position: absolute;left: -1px;bottom: -21px;content: "";}
.testimonials .author{padding-left: 20px;}
.courses, .development{border-bottom: 1px solid #353434;padding-bottom: 45px;margin-bottom: 42px;}
/*********************************page_5*************************************/
.info{}
.info>div{padding-top: 4px;}
.info>figure{margin: 0 20px 0 0;}
/* Contact form */
#contact-form {padding:0px 0 0 0;margin-top: -2px;}
#contact-form .success {width:246px;  padding:10px;}
#contact-form textarea, #contact-form input {margin:0;font-size:13px; border:none; color:#838383; padding:14px 9px 11px;outline:none; position:relative; font-family:Trebuchet MS1, Trebuchet MS, sans-serif;text-shadow: 1px 1px 0 #121212;background:#2e2d2d;box-shadow: inset 2px 2px #181717;width:282px;}
#contact-form textarea {overflow:auto; height:185px;resize:none; float:left; margin: 0 0 0 0;}  
#contact-form label {display:block; min-height:51px; overflow:hidden;}  
#contact-form label.message { display:block; padding-bottom:0; }
#contact-form .button {margin-right:8px;}
#contact-form .error, #contact-form .empty, #contact-form .success {display:none;}  
#contact-form .error, #contact-form .empty {text-align:left; color:red; font-size:11px; clear:both;}
#contact-form .buttons2 {overflow:hidden;position:relative; clear:both; padding-top:33px;}
#contact-form .buttons2 a {
  cursor:pointer;
  margin-top:0;
  text-align:center;
}
#contact-form span{ display:block; margin: 0px 0 0 5px;}
.map_wrapper{overflow:hidden;display:inline-block;margin-bottom:26px;}
#map_canvas {
   width:370px;
   height:350px;
}
.adress{margin-bottom: 21px;}
.adress span{ display:inline-block; width:79px;}
.adress dt{}
.demo{color: #fff;}
.demo:hover{ text-decoration:underline;}
/****************************footer************************/
footer {position: relative;padding:35px 0 19px; background:#3d4f63;color: #fff;font-size: 14px;text-transform: capitalize;}
footer:before{background: url('../images/footer_bef.png') 0 0 repeat-x;display: block;height: 1px;width: 100%;position: absolute;top: 0;left: 0;content: "";}
footer a {color:#fff; font-size: 18px;}
footer a:hover {color:#fff; font-size: 18px;}
footer .right {/*background: url(../interface/mail.png) no-repeat left center;*/ margin-right:40px}
footer p {margin: 7px 0 20px;}
footer .facebook {float: right}
.goog-inline-block{position:relative;display:-moz-inline-box;display:inline-block}
* html .goog-inline-block{display:inline}
*:first-child+html .goog-inline-block{display:inline}
.post-share-buttons{display:inline-block;margin-top:2em;margin-left:305px;vertical-align:middle;text-align:center;}
.share-button{width:20px;height:20px;background:url(../interface/share_buttons_20_2.png) no-repeat left !important;overflow:hidden;margin-left:-1px;position:relative}
.share-button-link-text {display: block;text-indent: -9999px;}
.sb-twitter{background-position:-40px 0 !important}
a:hover.sb-twitter{background-position:-40px -20px !important}
a:active.sb-twitter{background-position:-40px -40px !important}
.sb-facebook{background-position:-60px 0 !important}
a:hover.sb-facebook{background-position:-60px -20px !important}
a:active.sb-facebook{background-position:-60px -40px !important}
.share-button2{width:20px;height:20px;background:url(../interface/share_linkedin.png) no-repeat left !important;overflow:hidden;margin-left:-1px;position:relative}
.sb-linkedin{background-position:-60px 0 !important}
a:hover.sb-linkedin{background-position:-60px -20px !important}
a:active.sb-linkedin{background-position:-60px -40px !important}

.sessao-motivos{padding:15px;}
.sessao-motivos-item{
  width:50%;
  padding:15px;
  list-style: disc;
}
.connect-section{
  position: relative;
}
.connect-section>a>.icon-ani,
.connect-section>a{
    width: 26px;
    height: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .5s;
    overflow: hidden;
}

.connect-section>a>.icon-ani:nth-child(1){
    left: -50%;
    opacity: 0;
}
.connect-section:hover{
}
.connect-section>a:hover>.icon-ani:nth-child(1){
    left: 50%;
    opacity: 1;
}
.connect-section>a:hover>.icon-ani:nth-child(2){
    left: 150%;
    opacity: 0;
}



        .btn {
            display: inline-block;
            position: relative;
            box-shadow: 0 5px 15px -5px #00000070;
            overflow: hidden;
        }

        .btn span {
            font-size: 20px;
            font-weight: 600;
            transition: 0.2s linear;
        }
        .btn:hover span {
            transform: scale(1.2);
        }

        .btn::before {
            content: "";
            position: absolute;
            width: 120%;
            height: 120%;
            background: rgba(0, 0, 0, 0.6);
            transform: rotate(45deg);
            left: -110%;
            top: 90%;
            
        }

        .btn:hover::before {
            animation: aaa 0.7s 1;
            top: -10%;
            left: -10%;
            z-index: 1;
        }
        
    

        @keyframes aaa {
            0% {
                left: -110%;
                top: 90%;
            }

            50% {
                left: 10%;
                top: -30%;
            }

            100% {
                left: -10%;
                top: -10%;
            }
        }