body {
    
    font-family: 'Roboto', sans-serif;
  	/* background-image: url(https://gif-kartinki.ru/fony/fon_18.jpg);  */
    background-image: url(/img/fon_18.jpg); 
    background-repeat: no-repeat;
    background-size: cover;
  
}

.adverText {

	font-size: 25px;
	font-weight: 9000;
	color: white;
	font-weight: 900;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);;
	}
		
.sidebar {

  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* background-color: rgb(41, 40, 40); */
   padding: 0px;
  transition: all 0.5s;
  text-align: center;
  background-color: rgb(255, 255, 255);
  }

.logoPekar {

	display: block;
	width: 150px;
	height: 150px;
	display: block;
	align-items: center;
	margin: 0 auto;
	padding-bottom: 20px;
	padding-top: 20px;
	cursor: pointer;
	border-radius: 50%;
	
}

.sidebarText {

	font-size: 30px;
	font-family: Roboto;
	font-weight: 900;
	text-align: center;
	padding-top: 20px;
}

.marginTop {
	margin-top: 20px;
}

.buttonSidebarBlack {
	display: inline-block;
	color: #fff;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	width: 180px;
	text-align:center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 10px #eee;
    border-radius: 10px;
    background-image: linear-gradient(to right, #000000 0%, #202020 51%, #626363 100%);
}

.btn-new {
	display: inline-block;
	background: #ff6e40;
	color: #fff;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	width: 180px;
	text-align: center;
    transition: 0.5s;
	background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    background-image: linear-gradient(to right, #000000 0%, #420000 51%, #000000 100%);
}

.btn-new:hover {
     background-position: right center;
}


a.buttonPekProm {

	display: inline-block;
	background: #ff6e40;
	color: #fff;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	width: 180px;
	 text-align:center;
   }
   
a.buttonPekMain {
	
	display: inline-block;
	background: #255587;
	color: #fff;
	margin-top: 20px;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	height: 15px;
	width: 180px; 
	text-align:center;
 }

 a.buttonMainPage {
	
	display: inline-block;
	background: #0069d9;
	color: #fff;
	margin-bottom: 20px;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	height: 15px;
	width: 180px; 
	text-align:center;
	cursor: pointer;
 }
 
a.buttonPekLocal {
	
	display: inline-block;
	background: #da2d2d;
	color: #fff;
	margin-top: 20px;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	height: 15px;
	width: 180px; 
	text-align:center;
 }

 a.buttonProdecert {
	
	display: inline-block;
	background: #f85d62;
	color: #fff;
	margin-top: 20px;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	height: 15px;
	width: 180px; 
	text-align:center;
 }

 a.buttonVozvrat {

	display: inline-block;
	background: #00af0c;
	color: #fff;
	margin-top: 20px;
	padding: 16px;
	border-radius: 3px;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 16px;
	line-height: 1;
	font-weight: 900;
	height: 15px;
	width: 180px; 
	text-align:center;
	cursor: pointer;
   }
 
.content {

  margin-left: 0px; /* ширина сайдбара */
  padding: 73px;
}

.main-content {

	margin-left: 200px;
	padding: 20px;
		}

.strong {

		font-size: 20px;
		}

.buttonMain {
	font-size: 13px;
	font-weight: 900;
	padding: 10px;
	/* background-color: #007bff; */
	color: #fff;
	border: none;
	/* border-radius: 5px; */
	cursor: pointer;
	width: 200px;
	height: 50px;
	text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 10px #eee;
    border-radius: 10px;
    background-image: linear-gradient(to right, #000000 0%, #420000 51%, #000000 100%);

	}

	.buttonMain:hover {
     background-position: right center;
}

	.buttonDouble {
	font-size: 13px;
	font-weight: 900;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	width: 100px;
	height: 50px;
	margin-right: 5px;
	}


	.buttonDoubleBank {
	font-size: 13px;
	font-weight: 900;
	padding: 0px;
	padding-top: 2px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	width: 100px;
	height: 50px;
	margin-right: 5px;
	}

	.buttonPrivat {
		margin: 0 auto;
		height: 35px;
	}

/* button:hover {
  background-color: #0069d9;
} */
	/* buttonMain:active {
  background-color: #0056b3;
  transform: translateY(2px);
  } */
  
@keyframes button-color {

  0% {
    background-color: #0069d9; 
  }
  50% {
    background-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.9);
}
  100% {
    background-color: #007bff; 
  }
}

@keyframes button-fall {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: translateY(10px) rotate(2deg);
    }

    100% {
        transform: translateY(1000px) rotate(25deg);
        opacity: 0;
    }
}


.button-clicked {
    animation: button-color 1s;
}


.button-fall-animation {
    animation: button-fall 1.2s cubic-bezier(.17,.67,.4,1.4) forwards;
}

.flex-container {

	display: flex;
	align-items: center;
	justify-content: center;
	
			
}

.flex-item {

	background-color: #ffffff;
	padding: 20px;
	margin: 0 10px;
	height: 150px;
	width: 250px;
	margin-bottom: 15px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	align-items: center;
	text-align: center;
			 
}

.adver {
	background-image: url(/img/fon_18_2.jpg);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* background-color: #ffffff; */
	padding: 20px;
	margin: 0 10px;
	height: 150px;
	width: 250px;
	margin-bottom: 15px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	background-repeat: no-repeat;
	background-size: cover;

	filter: grayscale(100%);
	transition: filter 0.3s ease, transform 0.3s ease;
}

.adver:hover {
	filter: grayscale(0%);
}



.adver:hover {
	filter: grayscale(0%);
	transform: scale(1.03);
}

.flex-bottom {

margin-bottom: 90px;

}

.shablon-vozvrat {
	margin: 0 auto;
	background-color: white;
	height: 807px;
	width: 908px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.shablon-img {
	display: block;
	align-items: center;
	width: 350px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	margin: 10px;

}

.text-vozvrat {
	font-size: 25px;
	color: black;
	font-weight: 900;
	text-align: center;

}


/* 
transition: all 0.3s ease; */

/* .flex-item:hover,
.adver:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
} */

/* .buttonPekProm:hover,
.buttonPekMain:hover,
.buttonMainPage:hover,
.buttonPekLocal:hover,
.buttonProdecert:hover,
.buttonVozvrat:hover,
.buttonMain:hover,
.buttonDouble:hover,
.buttonDoubleBank:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.buttonPekProm,
.buttonPekMain,
.buttonMainPage,
.buttonPekLocal,
.buttonProdecert,
.buttonVozvrat,
.buttonMain,
.buttonDouble,
.buttonDoubleBank {

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
} */

/* #myButtonPay {

    transition: transform 0.1s ease-out;

    will-change: transform;
} */

/* КОНЕЦ */

.split-clone {
    position: fixed;
    z-index: 9999;
}