body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #000;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6{
	color: #000;
}

.result{
	color: #fff;
    background-color: #4d158c;
	
	padding: 20px;
	border-radius: 3%;
}

.alert h4{
	color: #fff;
    text-align: center;
    padding: 20px;
}

.direction {
    width: 100%;
}

.direction img{
	height: 25px;
}

.btn-info {
	color: #fff;
    background-color: #4d158c;
    border-color: #4d158c;
}

.btn-info:hover{
	background-color: rgba(255,102,0,0.5);
    border-color: rgba(255,102,0,0.5);
}

.custom-control-input:checked ~ .custom-control-label::before{
    color: #fff;
    border-color: #4d158c;
    background-color: #4d158c;
}

.calculator-form {
    width: 75%;
    border: 4px solid #4d158c;
    padding: 30px 50px 30px 50px;
    border-radius: 3%;
}

.block-margin{
	margin-bottom: 20px;
}

.custom-control-label{
	padding-top: 3px;
}

/* xl-устройства (больше или равно 1200px) */
@media (min-width: 1200px) {
	.direction {
		width: 100%;
		margin: 0px 0 0px 0;
	}
	
	#gapButton{
		display: block;
	}
	
}

/* lg-устройства (больше или равно 992px) */
@media (min-width: 992px) and (max-width: 1200px){
	.direction {
		width: 100%;
		margin: 0px 0 0px 0;
	}
	#gapButton{
		display: block;
	}

}

/* md-устройства (больше или равно 768px) */
@media (min-width: 768px) and (max-width: 992px){
	.calculator-form {
		width: 100%;
		border: 4px solid #4d158c;
		padding: 20px;
		border-radius: 3%;
	}
	
	.direction {
		width: 100%;
		margin: 17px 0 17px 0;
	}
	
	#gapButton{
		display: none;
	}
	
	.btn{
		width: 100%;
	}
}

/* sm-устройства (больше или равно 576px) */
@media (min-width: 576px) and (max-width: 768px) {
	.calculator-form {
		width: 100%;
		border: 4px solid #4d158c;
		padding: 20px;
		border-radius: 3%;
	}
	
	.direction {
		width: 100%;
		margin: 17px 0 17px 0;
	}
	
	#gapButton{
		display: none;
	}
	
	.col-margin{
		margin-bottom: 20px;
	}
	
	.btn{
		width: 100%;
	}
}

/* extra-sm-устройства (меньше 576px) */
@media (max-width: 576px) {
	.calculator-form {
		width: 100%;
		border: 4px solid #4d158c;
		padding: 20px;
		border-radius: 3%;
	}
	   
	.direction {
		width: 100%;
		margin: 17px 0 17px 0;
	}
	
	#gapButton{
		display: none;
	}
	
	.col-margin{
		margin-bottom: 20px;
	}
	
	.btn{
		width: 100%;
	}