/* NAVBAR */
.custom-navbar {
	padding-top: 20px;
	padding-left: 27.5px;
	padding-right: 27.5px;
}
.custom-link {
	text-decoration: none;
	color: #003C67;
}
.custom-link-light {
	text-decoration: none;
	color: #0197F6;
}
.phone-li {
	margin-top: 4px;
}
.contacts {
	margin: 0;
}
/* MAIN */
.main-container {
	padding: 105px 30px;
}
.main-badge p span {
	color: #333333;
	background-color: #fefefe;
	padding: 11.5px 20px;
	border-radius: 500px;
}
.main-title {
	margin-top: 30px;
}
.main-title h1 {
	font-size: 68px;
}
.main-subtitle {
	margin-top: 20px;
}
.main-subtitle p {
	font-size: 24px;
}
.main-button {
	margin-top: 40px;
}
.main-image {
	background-image: url('../img/pic.jpg');
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
/* 20 percent*/
.percent-img {
	position: absolute;
    top:8%;
    left: 45%;
}
.m-t-20 {
	margin-top: 20px;
}
.custom-footer-button {
	padding-top: 20px;
}
.custom-footer-button p {
	margin-top: 15px;
	font-size: 14px;
	color:#333333;
}
.dark-blue {
	background-color: #003C67;
}
.text-white {
	color: #fefefe;
}
.border-circled {
	border-radius: 20px;
}
.regular {
	font-size: 24px;
}
.p-t-b-35 {
	padding-top: 36px;
	padding-bottom: 36px;
}
.button-view {
	background-color: #0197F6;
	color: #fefefe;
	border-radius: 4px;
	border: none;
	padding: 14.5px 30px;
	font-size: 14px;
	font-weight: 500;
}
/* CONTACTS */
.contacts {
	list-style-type: none;
	overflow: hidden;
	padding-top: 8px;
}
.contacts li {
	float: left;
}
.contacts li:first-child a {
	padding: 0 20px;
}
.contacts li a {
	padding: 0 7px;
}
.footer-info {
	font-size: 14px;
	color: #cecece;
}
/* Modal */
.modal-content {
	border-radius: 20px;
	border: none;
}
.modal-header {
	border-bottom: none;
	padding-bottom: 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
.modal-header, .modal-body {
	background-color: #0197F6;
}
.modal-body {
	padding-bottom: 40px;
}
.modal-body img {
	width: 100%;
	margin-left:-4%;
}
.custom-modal-footer {
	background-color: #DCF1FF;
	padding: 40px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

/* ADAPTEE */
@media screen and (max-width: 321px) {
	.icon-li:last-child {
		display:none;
	}
}
@media screen and (max-width: 767px) {
	.custom-navbar {
		padding: 10px 0;
	}
	.custom-navbar .contacts {
		padding-left: 0;
	}
	.logo {
		width: 104px;
	}
	.phone-li {
		font-size:12px;
	}
	.icon-li img {
		width: 26px;
	}
	.main-badge p {
		font-size: 14px;
	}
	.main-title h1 {
		font-size: 36px;
	}
	.main-subtitle p {
		font-size: 14px;
	}
	.main-container {
		padding: 34px 18px 21px 18px;
	}
	.main-button {
		margin-top:24px;
	}
	.main-button button {
		width: 100%;
	}
	.main-image {
		height: 350px;
		margin-top:8px;
	}
	.regular {
		font-size:16px;
	}
	.p-t-b-35 {
		padding-top: 7px;
		padding-bottom: 7px;
		margin-bottom: 5px;
	}
	.border-circled {
		border-radius: 12px;
	}
	.footer-info {
		margin-top: 10px;
	}
	.m-t-20 {
		margin-top: 8px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.main-badge p {
		font-size: 14px;
	}
	.main-title h1 {
		font-size: 36px;
	}
	.main-subtitle p {
		font-size: 14px;
	}
	.main-container {
		padding: 54px 18px 50px 18px;
	}
	.custom-navbar {
		padding: 10px 0;
	}
	.custom-navbar .contacts {
		padding-left: 0;
	}
	.border-circled {
		border-radius: 12px;
	}
	.regular {
		font-size:14px;
	}
	.p-t-b-35 {
		padding: 20px 5px;
	}
	.phone-li {
		font-size:14px;
	}
	.icon-li img {
		width: 32px;
	}
	.button-view {
		font-size: 12px;
		padding: 13px 25px;
	}
	.contacts {
		padding-left: 0;
		padding-top:6px;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.main-title h1 {
		font-size: 45px;
	}
	.main-subtitle p {
		font-size: 16px;
	}
	.main-badge p {
		font-size: 14px;
	}
	.main-container {
		padding: 90px 23px;
	}
	.regular {
		font-size: 16px;
	}
	.phone-li {
		font-size:16px;
	}
	.footer-info {
		margin-top: 30px;
	}
	.contacts {
		padding-left: 0;
	}
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
	.percent-img {
	    top:8%;
	    left: 44%;
	}
	.contacts {
		padding-top:12px;
	}
	.button-view {
		padding: 17px 19px;
	}
}
@media only screen and (min-width: 1400px) and (max-width: 1600px){
	.percent-img {
	    top: 6%;
	    left: 43.5%;
	}
}
@media only screen and (min-width: 1600px) {
	.percent-img {
	    top: 6%;
	    left: 45.5%;
	}
}