@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:300,700';
.bg-overlay-primary:before {
    background-color:rgba(152, 109, 40, 0.6);
}
.el-form-item {
  margin-right: 10px;;
}
.custom {
    background-color: #A56627!important;
    color: #fff!important;
    border: 0!important;
    border-radius: 0!important;  
}
.custom:hover {
    color: white!important;
    background-color: #000!important;
    transition: all 0.3s linear!important;
}
.el-icon-info {
  color: red;
  font-size: 18px;
}
.size-17 {
  font-size: 17px;
}
.card-deck .card {
  margin-bottom: 15px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.h3-1 {
  color: #ea4335;
}
.h3-2 {
  color: #34a853;
}
.h3-3 {
  color: #4285f4;
}
.card-deck .card1
{
  border: 1px solid #ea4335;
  border-radius:20px!important;
}
.card-deck .card2
{
  border: 1px solid #fbbc05;
  border-radius:20px!important;
}
.card-deck .card3
{
  border: 1px solid #34a853;
  border-radius:20px!important;
}
.card-deck .card4
{
  border: 1px solid #4285f4;
  border-radius:20px!important;
}
.text-blue {
  color: #4285f4;
}
.card-deck .card:hover {
  z-index: 5;
    -webkit-box-shadow: 0 5px 83px 0 rgba(40, 40, 40, 0.12);
    box-shadow: 0 5px 83px 0 rgba(40, 40, 40, 0.12);
    cursor: default;
}
.goog-card {
  -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    border-radius: 20px;
    -webkit-box-shadow: 0 5px 83px 0 rgba(40, 40, 40, 0.12);
    box-shadow: 0 5px 83px 0 rgba(40, 40, 40, 0.12);
    cursor: default;
}
.card-deck .card:hover img {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  cursor: pointer;
  animation-name: bounce;
  -moz-animation-name: bounce;
}
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform:     translateY(-15px);
		transform:         translateY(-15px)
	}
}
.btn-warning:hover{
  color: #fff;
} 
.m_head{
  font-size: 20px;
    color: black;
    font-weight: 500;
    font-family: "Public Sans", sans-serif;
}


/* .button{
position: relative;
width: 70px;
height: 30px;
font-size: 10px;
background-color:#232231;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: width .5s; 
border-radius:.5s;
}
.button *{
position: absolute;
top: 50;
left: 50%;
transform: translate(-58, -58%);
transition: opacity .25s;
}
.icon{
opacity:0;
}
.button:focus{
width: 30рх;
background-color: #44c38a;
border-radius: 50%;
}
.button:focus .text{
opacity: 0;
}
.button:focus .icon{
opacity: 1;
transition-delay: .5s;
} */


.select {
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
  /* width: 330px;
  height: 100%; */
  /* border-bottom: 0px; */
  /* border-radius: 3px; */
  border: 2px solid #e7ebef;
    background-color: transparent;
    /* padding: 0 20px; */
    border-radius: 2px;
  font-size: 12px;
  /* box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, .5); */
}
.select > i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}
.select .title, .select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1em 1em;
  font-size: 15px;
  background: rgba(255, 255, 255, 1);
  border-top: 1px solid rgba(0, 0, 0, .05);
  cursor: pointer;
}
.select > input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}
.select > input:checked ~ i.toggle.icon-arrow-down {
  display: none;
}
.select > input:checked ~ i.toggle.icon-arrow-up {
  display: block;
}
.select > input:checked div.options label.option .title {
  display: none !important;
}
.select > input:not(:checked) {
  z-index: 4;
}
.select > input:not(:checked) ~ label.option > span.title {
  display: none;
}
.select > input:not(:checked) ~ i.toggle.icon-arrow-up {
  display: none;
}
.select > input:not(:checked) ~ i.toggle.icon-arrow-down {
  display: block;
}
.select > input:disabled {
  cursor: no-drop;
}
.select > label {
  margin-bottom: 0;
}
.select > span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}
.select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}
.select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background 0.3s ease-out;
}
.select label.option span.title i.icon1 {
  padding-right: 8px;
  color: #4267B2;
}
.select label.option span.title i.icon2 {
  padding-right: 8px;
  color:#c13584;
}
.select label.option span.title i.icon3 {
  padding-right: 8px;
  color: #34A853;
}
.select label.option span.title i.icon4 {
  padding-right: 8px;
  color: #EA4335;
}
.select label.option span.title i.icon5 {
  padding-right: 8px;
  color: #0e76a8;
}
.select label.option span.title i.icon6 {
  padding-right: 8px;
  color: #FBBC05;
}
.select label.option span.title:hover {
  color: #495057;
  font-weight: 400;
  background: rgba(255, 255, 255, .3);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, .1);
}
.select label.option input {
  display: none;
}
.select label.option input:checked ~ span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  font-size: 1rem;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: #495057;
  width: 100%;
  font-weight: 400;
  letter-spacing: 1px;
}