.show_slidine,.slide_in { position: fixed; background: var(--awb-color1); z-index: 99999 } .show_slidine,a.butcontact_slide { cursor: pointer; text-transform: uppercase } .show_slidine { padding: 14px 30px; right: -109px; top: 50%; color: #fff; border-radius: 20px 20px 0 0; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-family: var(--body_typography-font-family); font-size: 15px; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; box-shadow: 0 0 10px #fff } .show_slidine:hover { background: #000 } .show_slidine.hidebtn { opacity: 0; -webkit-transform: translateX(100%) rotate(-90deg); -ms-transform: translateX(100%) rotate(-90deg); transform: translateX(100%) rotate(-90deg) } .infos_site { margin-top: 25px } p.p_slidein,span.content-info,span.content-info a { color: #fff } span.content-info a:hover { color: var(--awb-color7); text-decoration: underline } p.p_slidein { margin-top: 7px } .infosclient,.mobilebut { display: none } .flex-info,a.butcontact_slide { display: -webkit-box; display: -ms-flexbox } .slide_in { width: 400px; top: 35%; right: 0; padding: 30px; -webkit-box-shadow: 0 0 15px #0000005c; box-shadow: 0 0 15px #0000005c; border-radius: 0px; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); opacity: 0; -webkit-transition: .7s ease-in-out; -o-transition: .7s ease-in-out; transition: .7s ease-in-out; border: 8px solid #fff } .slide_in.showme { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1 } .titleslide { text-transform: uppercase; font-size: 31px; color: #fff; font-weight: 500 } hr.sep_slide { width: 25%; height: 2px; background-color: var(--awb-color7); border: none; margin-left: 0 } .icon-info,a.butcontact_slide { background: #fff; color: var(--awb-color1) } .flex-info { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px } .flex-info:nth-child(3) { display: flex ; align-items: flex-start; } .icon-info { display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 30px; width: 30px; font-size: 17px; border-radius: 10px; padding: 5px 0; margin-right: 15px } .head_slidine { position: absolute; top: 12px; right: 15px; color: #fff; border: 2px solid; padding: 3px 9px; border-radius: 50%; font-size: 15px; cursor: pointer; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; display: flex; align-items: center; justify-content: center; height: 30px; width: 30px } .head_slidine:hover { color: var(--awb-color2) } a.butcontact_slide { padding: 12px 10px 14px; position: relative; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 6px; text-align: center; font-family: var(--body_typography-font-family); font-weight: 700; font-size: 16px; border: 2px solid #fff; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; margin-top: 30px } a.butcontact_slide:hover { background: 0 0; color: #fff } @media screen and (max-width: 1500px) { .show_slidine { padding:16px 25px } } @media screen and (max-width: 800px) { .show_slidine { background:var(--awb-color1); padding: 10px 25px } } @media screen and (max-width: 600px) { .mobilebut { display:block; font-size: 20px; -webkit-transform: unset; -ms-transform: unset; transform: unset; border-radius: 50%; padding: 5px; right: 0; left: 15px; bottom: 20px; top: unset; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center } .desktopbut { display: none } .slide_in { width: calc(98% - 70px); top: unset; bottom: 0; right: unset; left: 0; padding: 15px; border-radius: 10px 10px 0 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) } .show_slidine.hidebtn { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%) } .slide_in.showme { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1 } } @media screen and (max-width: 400px) { .head_slidine { position:absolute; top: 5px; right: 5px } } @media screen and (max-width: 330px) { .slide_in { width:88%; margin-inline:auto;right: 0 } }