* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  /*display: flex;*/
  overflow: hidden;

background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(137,65,152,0.3477766106442577) 90%, rgba(137,65,152,0.45) 100%);
}

.cont {overflow: scroll;height: 100vh;}
/*
.container{
 width: 100%;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(137,65,152,0.3477766106442577) 90%, rgba(137,65,152,0.45) 100%);
  height: 100vh;


}*/

.btn-container {
  width: 100%;
  /*height: 100%;*/
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  padding: 15px;
}

.container {
  width: 100%;
  /*height: 100%;*/
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);
  padding: 15px;
  color:#FFF;
}

.logo{
	width:325px;
}

#record .icon.icon--right svg {
	margin-bottom: 12px;
    margin-top: -3px;
	margin-left: 2px;
}

#record .icon.icon--left svg {
	margin-bottom: 200px;
    margin-top: -3px;
	margin-left: 2px;
}
#instagram .icon.icon--right svg{
	margin-left: 32px;
    margin-top: 2px;
}
#instagram .icon.icon--left svg{
	margin-left: 32px;
    margin-top: 2px;
}
#viber .icon.icon--right svg{
    margin-left: 46px;
    margin-top: 2px;
}
#viber .icon.icon--left svg{
    margin-left: 46px;
    margin-top: 2px;
}

#phone .icon.icon--right svg{
    margin-left: -3px;
    margin-top: 2px;
}
#phone .icon.icon--left svg{
    margin-left: -3px;
    margin-top: 2px;
}
#phone1 .icon.icon--right svg{
    margin-left: 14px;
    margin-top: 2px;
}
#phone1 .icon.icon--left svg{
    margin-left: 14px;
    margin-top: 2px;
}

#email .icon.icon--right svg{
    margin-left: 39px;
    margin-top: 2px;
}
#email .icon.icon--left svg{
    margin-left: 39px;
    margin-top: 2px;
}

#facebook .icon.icon--right svg{
    margin-left: 31px;
    margin-top: 2px;
}

#facebook .icon.icon--left svg{
    margin-left: 31px;
    margin-top: 2px;
}

#address .icon.icon--right svg{
    margin-left: -39px;
    margin-top: 2px;
}
#address .icon.icon--left svg{
    margin-left: -39px;
    margin-top: 2px;
}

.btn-container:nth-child(1) {
  --btn-bg: #b65bc7ba;
 /* --bg: #ca2cf2;*/
}
.btn-container:nth-child(2) {
  --btn-bg: #b65bc7ba;
 /* --bg: #ca2cf2;*/
}
.btn-container:nth-child(3) {
  --btn-bg: #b65bc7ba;
  /*--bg: #fc6100;*/
}

.btn-container:nth-child(4) {
  --btn-bg: #b65bc7ba;
  /*--bg: #f4573f;*/
}

.btn-container:nth-child(5) {
  --btn-bg: #b65bc7ba;
  /*--bg: #f4573f;*/
}

.btn-container:nth-child(6) {
  --btn-bg: #b65bc7ba;
  /*--bg: #f4573f;*/
}
.btn-container:nth-child(7) {
  --btn-bg: #b65bc7ba;
 
  /*--bg: #f4573f;*/
}
.btn-container:nth-child(8) {
  --btn-bg: #b65bc7ba;
  font-size: 12px;
   display:none;
  /*--bg: #f4573f;*/
}
.btn-container:nth-child(9) {
  --btn-bg: #b65bc7ba;
  font-size: 12px;
  /*--bg: #f4573f;*/
}
.btn-container:nth-child(10) {
  --btn-bg: #b65bc7ba;
  font-size: 12px;
  /*--bg: #f4573f;*/
}
button {
  --width: 280px;
  --height: 45px;
  border: 0;
  position: relative;
  min-width: var(--width);
  min-height: var(--height);
  border-radius: var(--height);
  color: #fff;
 /* font-family: "Montserrat";*/
  font-weight: bold;
  /*background: rgba(0, 0, 0, 0.3);*/
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1rem;
  background:#ba69cf94;
}
button .text, button .icon-container {
  position: relative;
  z-index: 2;
 
}
a{text-decoration:none;}
button .icon-container {
  --icon-size: 25px;
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-left: 15px;
  transition: transform 500ms ease;
}
button .icon-container .icon {
  position: absolute;
  left: 10px;
  top: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform 500ms ease, opacity 250ms ease;
}
button .icon-container .icon--left {
  transform: translateX(-200%);
  opacity: 0;
}
button .icon-container .icon svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}
button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-bg);
  border-radius: var(--height);
  z-index: 1;
  transition: transform 500ms ease;
}
button:hover::after {
  transform: translateX(78%);
}
button:hover .icon-container {
  transform: translateX(125%);
}
button:hover .icon-container .icon--left {
  transform: translateX(0);
  opacity: 1;
}
button:hover .icon-container .icon--right {
  transform: translateX(200%);
  opacity: 0;
}