@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600&family=Roboto:wght@300;400;500&display=swap');

/* General */
body {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #191919;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: #29abe2;
}

h2 {
	font-size: 2.25rem;
	color: #29abe2;
	margin-top: 1.5rem;
}

h3 {
	font-size: 1.75em;
	color: #006ba6;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

h4 {
	font-size: 1.25em;
}

h5 {
	font-size: 1rem;
	font-weight: 500;
	color: #29abe2;
	text-transform: uppercase;
}

p {
	margin-bottom: 1rem;
}

.small, small {
    font-size: 75%;
}

.large {
    font-size: 150%;
}

.orange {
	color: #f58546;
}

.grey {
	color: #6d6e71;
}

.white {
	color: #fff;
}

.blue {
	color: #006ba6;
}

a {
	font-weight: 400;
	text-decoration: underline;
	color: #006ba6;
}

a:hover, a:focus {
	text-decoration: none;
}

ul {
	margin-bottom: 0;
}

.list-group-item {
    padding: 0.75rem 1rem;
}

hr {
	margin-top: 2rem;
	margin-bottom: 2rem;
	background-color: #1f7db1;
}

/* Buttons */
.btn {
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	border: none;
}

.btn-primary {
    background-color: #f58546;
}

.btn-primary:hover,.btn-primary:focus {
    color: #fff;
    background-color: #006ba6;
}

.btn-secondary {
	background-color: #006ba6;
}

.btn-white {
    background-color: #fff;
	color: #006ba6;
}

.btn-white:hover,.navbar .btn-white:focus {
	background-color: #f58546;
	color: #fff;
}

.btn-radio {
	color: #fff;
    text-decoration: none;
    border-radius: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: #fff 2px solid;
}
	
.btn-check:checked+.btn-radio {
	border: #006ba6 2px solid;
}

/* Navigation */
.navbar {
	background-color: #006ba6;
}

.navbar {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.navbar li a {
	color: #fff;
}

.navbar .btn-white {
	border-radius: 25px;
	color: #006ba6;
}

.navbar  .btn-white:hover,.navbar .btn-white:focus {
	background-color: #f58546;
	color: #fff;
}

/* Form */
.form-blue {
	background-color: #29abe2;
	padding: 1rem;
	margin-bottom: 1rem;
}

.form-blue .form-control {
	background: #29abe2;
	border: none;
	border-bottom: #fff 1px solid;
	border-radius: 0;
	width: 100%;
	padding-left: 0;
	color: #fff;
}

.form-blue .form-select {
	background: #29abe2;
	border: none;
	border-bottom: #fff 1px solid;
	border-radius: 0;
	width: 100%;
	padding-left: 0;
	color: #fff;
	
	background: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 5px;
}

.form-blue .form-select * {
	background: #29abe2;
	color: #fff;
}

.form-blue .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #fff;
	opacity: 1; /* Firefox */
}

 .form-blue.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}

.form-blue .form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
 }
 
 .form-check-label {
	font-weight: 500;
	color: #006ba6;
}

/* Footer */
footer {
	border-top: #4c4849 1px solid;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: 2rem;
}

footer li {
	font-size: 0.75rem;
}

footer a {
	color: #6d6e71;
}

footer a:hover, footer a:focus {
	color: #6d6e71;
}
.modal-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 999;
    top: 0%;
    left: 0%;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
    width: 99%;
    height: 99%;
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
