.bron{

}

#bronhref {margin-top:50px;}

.bron .nomer {
	display: grid;
	grid-template-columns: repeat(10,1fr);
	background:#b7b7b7;
	grid-gap: 1px;
	border: 1px solid #b7b7b7;
}

.bron .nomer > div {
	
	background: #fff;
}

.nomer-photo, .nomer-data {
	    padding: 2%;
}

.nomer-name, .nomer-cena, .nomer-meta, .dopuslugi-nomer, .nomer-podtv {
	padding:7%;
}
.nomer-photo {
	    grid-column: 1/span 5;
	    grid-row: 1/span 5;
}

.nomer-data {
	    display: grid;
	grid-column: 1/span 5;
	    grid-row: 6/span 3;
	    grid-gap: 10px;
	    background: #fff;
	        grid-template-columns: repeat(3,1fr);
}


.nomer-data .plusminus {
	position: relative;
}

.nomer-data .plusminus input {
	width: 45px;
	font-size: 40px;
    text-align: center;
    background: rgba(0, 0, 0, 0);
    border: 0;
    color: #c5a46d;

}

.nomer-data .plusminus .minus {

right: calc(50% - 30px);
    top: 50%;
background: url(../img/down.png) no-repeat 50%;
}


.nomer-data .plusminus .plus {
right: calc(50% - 30px);
top: calc(50% - 10px);
background: url(../img/up.png) no-repeat 50%;
}

.nomer-data .plusminus .minus, .nomer-data .plusminus .plus {
	position: absolute;
	cursor:pointer;
	width: 9px;
height: 10px;
}
.nomer-data > div:nth-child(1){
	grid-column: 1/ span 1;
	grid-row:1/span 2;
}
.nomer-data > div:nth-child(2){
	grid-column: 2/ span 1;
	grid-row:1/span 2;
}

.nomer-data > div:nth-child(3){
	grid-column: 3/ span 1;
	grid-row:1/span 1;
}

.nomer-data > div:nth-child(4){
	grid-column: 3/ span 1;
	grid-row:2/span 1;
}


.nomer-data > div {
	background: #222222;
	color:#c5a46d;
	text-align: center;
	padding:15px;
}

.nomer-data i {
	display: block;
	color:#fff;
	padding: 10px 0 15px 0;
}

.nomer-data .in {
	font-family: 'Montserrat-Medium';
	font-size: 55px;
}

.nomer-data .title {
	font-family: 'Montserrat-Light';
	font-size: 13px;
}

.nomer-data button {
	background: #c5a46d;
	text-transform: uppercase;
	color:#fff;
	border:none;
	padding: 5px 13px;
	font-family: 'Montserrat-Medium';
}

.nomer-name {
	grid-column: 6/span 3;
	grid-row: 1/span 2;
	    font-family: 'Athelas-Regular';
	    font-size: 25px;
	    text-transform: uppercase;
}

.nomer-cena {
	grid-column: 9/span 2;
	grid-row: 1/span 2;
	color:#c5a46d;
	font-size: 25px;
	font-family: 'Montserrat-Medium';
	text-align: center;
}
.nomer-cena span {
font-size: 15px;
color:#777777;
font-family: 'Montserrat-Light';
display: block;

}

.nomer-meta {
	grid-column: 6/span 5;
grid-row: 3/span 2;
}

.dopuslugi-nomer {
grid-column: 6/span 5;
	grid-row: 5/span 2;

	color:#222222;
	 font-family: 'Montserrat-Regular';
}

.dopuslugi-nomer input {
	margin: 8px 0;
}

.dopuslugi-nomer span {
	color:#777777;
	font-family: 'Montserrat-Light';
	font-size:15px;
}

.nomer-podtv {
	grid-column: 6/span 5;
	grid-row: 7/span 2;
}


/*       -------------------------------- */


#pol {
	display: grid;

       grid-gap: 1vw 3vw;
   
}
.pol-guest {
	grid-template-columns: repeat(2,1fr);
}

#pol label{
	 color:#777777;
    font-family: 'Montserrat-Light';
       margin-bottom: 10px;
    display: block;
}
#pol #zapros {
	grid-column: 1/ span 3;
	grid-row:3/span 1;


}

#pol input, #pol textarea {
	width: 100%;
	border:1px solid #c8c8c8;
}

#pol input {
	height: 30px;
}


h3.inputdata {
	font-size: 35px;
font-family: 'Athelas-Regular';
color:#222222;
}

.podzkazka {
	    grid-column: 2/span 1;
	float:right;
	padding: 5%;
	border: 1px solid #d8d8d8;
	

}

.dopkfor {
	margin-top: 80px;
	margin-bottom: 50px;
}

.usloviya, .sposoboplaty, .podzkazka {
	font-family: 'Montserrat-Light';
	font-size:15px;
	color:#777777;
	line-height: 26px;
}

.sposoboplaty  {

}

.sposoboplaty span, .podzkazka span  {
color:#222222;

}

.podzkazka span {
	display: block;
	margin-bottom: 15px;
}

.podzkazka button {

		background: #c5a46d;
	text-transform: uppercase;
	color:#fff;
	border:none;
	padding: 5px 13px;
	font-family: 'Montserrat-Medium';
	display: block;
	margin-top: 15px;
}



/* ------------------------ */


#proverka {
	display: grid;
	background: #d8d8d8;
	grid-gap: 1px;
	border: 1px solid #d8d8d8;
	    grid-template-columns: 1fr 1fr;
}

#proverka > div {
	padding: 5%;
	background: #fff;
}
.vashidannye {
	grid-column: 1/ span 1;
	grid-row:1/ span 1;
}

.vashidannye-data {
	grid-column: 1/ span 1;
	grid-row:2/ span 6;
}

.vashidannye-data #proverka-zapros {
	grid-row:4/ span 1;
	grid-column: 1/ span 2;
}

.detalb-bron {
grid-column: 2/ span 1;
grid-row:1/ span 1;
}

.detalb-bron-data {
	grid-column: 2/ span 1;
grid-row:2/ span 3;
}

#plat-inf {
grid-column: 2/ span 1;
grid-row:5/ span 1;
}

#plat-inf-data {
grid-column: 2/ span 1;
grid-row:6/ span 2;
}


.vashidannye, .detalb-bron, #plat-inf {
	font-family: 'Athelas-Regular';
	color: #222222;
	font-size: 25px;
}

.vashidannye-data, .detalb-bron-data, #plat-inf-data {
		font-family: 'Montserrat-Light';
	font-size:15px;
	color:#777777;
	line-height: 26px;
}

.vashidannye-data span, .detalb-bron-data span, #plat-inf-data span {
	display: block;
color:#222222;
}



.otkaz {
	    font-family: 'Montserrat-Medium';
    font-size: 13px;
    color: #fff;
    background: #222222;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    float:left;
}


.ok {
	    font-family: 'Montserrat-Medium';
    font-size: 13px;
    color: #fff;
    background: #c5a46d;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    float:right;
}



#step > div {
	cursor: pointer;
}







/* Custom labels: the container */
.checkcontainer {
    display: block;
    position: relative;
    padding-left: 43px;
    margin-bottom: 12px;

    font-size: 17px;
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 0;    z-index: 99999999999999999;}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Create a custom radio button */
.radiobtn{
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius: 50%;
  border:1px solid #c9aa77
}





/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobtn:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked ~ .radiobtn:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.checkcontainer .radiobtn:after {
top: 1px;
    left: 1px;
    width: 23px;
    height: 23px;
  border-radius: 50%;
 background: url(../img/galo.png) no-repeat 50%;
}