/*
 * Colors
 *
 * red:  	#ea554c / 234, 85, 76
 * green:   #197c7c / 25, 124, 124
 *
 */

body, html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
    font-family: 'lotagrotesque', sans-serif !important;
    color: #000;
}


/*
 * Common Tags
 */
h1 {
    font-size: 2rem;
	line-height: 2.5rem;
    font-weight: 600;
    color: #000;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

h3 {
	font-size: 1.375rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

h4 {
	font-size: 1.25rem;
	font-weight: 300;
	text-transform: uppercase;
}

@media (min-width: 768px) {
    h2 {
        font-size: 2.5rem;
    }
	h3 {
		font-size: 1.375rem;
	}
}

@media (min-width: 992px) {
	h3 {
		font-size: 1.75rem;
	}
}


a {
    color: #ea554c;
    text-decoration: none;
    transition: all 0.2s ease-in-out;    
}

a:hover,
a:active {
    color: #ea554c;
    text-decoration: none;
}

.text-green {
    color: #197c7c;
}

.text-red {
	color: #ea554c;
}

.text-upper {
    text-transform: uppercase;
}

.text-white {
	color: #fff;
}

.text-large {
	font-size: 1.75rem !important;
	line-height: 2rem !important;
}

.text-big {
	font-size: 1.25rem !important;
	line-height: 1.5rem !important;
}

@media (min-width: 992px) {
	.text-large {
		font-size: 2.5rem !important;
		line-height: 2.5rem !important;
	}
	
	.text-big {
		font-size: 1.75rem !important;
		line-height: 2rem !important;
	}
}

.bg-red {
    background: #ea554c;
}

.bg-green {
	background: #197c7c;
}


/*
 * Container
 */
.container-fluid {
	max-width: 1400px;
}

.container {
	max-width: 992px;
}

.container-red {
	height: 400px;
	background-image: url(../img/container-red.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.container-red img {
	max-height: 80px;
}

.container-red h1 {
	text-transform: uppercase;
	font-size: 2.5rem !important;
	line-height: 3rem !important;
	font-weight: 400 !important;
	color: #fff;
}

@media (min-width: 992px) {
	.container-red {
		height: 600px;
	}
	.container-red h1 {
		font-size: 4rem !important;
		line-height: 4rem !important;
	}
}

.container-purple {
	height: 180px;
	background-image: url(../img/container-purple.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}

.container-purple .bi {
	font-size: 3rem !important;
}

.container-grey {
	background-color: #f2f2f2;
}

.container-grey .box {
	background-color: #fff;
	border-radius: .5rem;
	position: relative;
}

.container-grey .box .img-audio {
	position: absolute;
	top: -2rem;
	right: 2rem;
}

.container-grey .box-red {
	background-color: rgba(234, 85, 76, .8);
	color: #fff;
	border-radius: .5rem;
}

.container-grey .box-green {
	background-color: rgba(25, 124, 124, .8);
	color: #fff;
	border-radius: .5rem;
}


/* Lists */
ul.check {
	list-style-type: none;
	padding-left: 0;
	margin-left: .5rem;
}

ul.check li {
	padding: .25rem 0 .25rem 1.75rem;
	position: relative;
}

ul.check li::before {
	font-family: "bootstrap-icons";
	font-size: 1.125rem !important;
	content: "\F26c";
	color: #ea554c;
	position: absolute;
	left: 0;
	top: 0;
}

.container-grey .box-red ul.check li::before,
.container-grey .box-green ul.check li::before {
	color: #fff;
}

/*
 * Buttons
 */
.btn-primary {
	background-color: #ea554c;
	color: #fff;
	font-size: 1.125rem !important;
	border-color: #ea554c;
	text-transform: uppercase;
	padding: .5rem 2rem;
}
 
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: #ea554c;
	border-color: #ea554c;
	opacity: .8;
}

/*
 * Footer
 */
.container-footer {
    padding: 3rem 0 6rem 0;
    background: #505050;
    color: #fff;
    font-size: .875rem;
    line-height: 1.5rem;
}

footer a {
    color: #fff;
}