@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');


*,
*::before,
*::after {
	box-sizing: border-box;  }

:root {
	font-size: 16px;

	--font-roboto: 'Roboto', sans-serif;

	--color-blue    : #227C9D;
	--color-gray    : #e9ecef;
	--color-offblack: #313639;
	--color-offwhite: #FEf9EF;
	--color-red     : #FE6D73;  }

html {
	scroll-behavior: smooth;  }

/* TAGS */
body, h1, h2, h3, p, ul {
	font-family: var(--font-roboto);
	margin: 0;  }

body {
	font-size  : 1.25rem;
	font-weight: normal;
	line-height: 1.25;  }

h1, h2, h3 {
	font-weight  : bold;
	line-height  : 1;  
	margin-bottom: 1rem;  }

h1 {
	font-size: 3rem;  }

ul li {
	margin-bottom: 1rem;  }

section {
	padding: 2rem 0;  }

a {
	background-color: var(--color-red);
	color           : var(--color-offwhite);
	padding         : 0.75rem;
	text-decoration : none;  }

button {
	background-color: var(--color-red);
	border          : none;
	color           : var(--color-offwhite);
	padding         : 0.75rem;
	text-decoration : none;  }

textarea:focus, input:focus {
	outline: none;  }

input[type=text] {
	background-color: var(--color-gray);
	border          : 0;
	border-radius   : 0.25rem;
	padding         : 0.75rem;
	font-size       : 1rem;  }

textarea {
	border          : 0;
	background-color: var(--color-gray);
	font-family     : var(--font-roboto);
	font-size       : 1rem;
	padding         : 0.75rem;
	resize          : none;  }

label {
	color      : var(--color-offblack);
	font-size  : 1rem;
	line-height: 2rem;  }


/* LAYOUT */
.container {
	margin-inline: auto;
	width        : min(90%, 80rem);  }

.container-narrow {
	width: 100%;  }

@media only screen and (min-width: 600px) { 
	.container-narrow {
		width: 75%;  }
}


/* DISPLAY */
.d-flex {
	display: flex;  }

.d-grid {
	display              : grid;
	gap                  : 1rem;
	grid-template-columns: repeat(2, 1fr);  }

@media only screen and (min-width: 600px) { 
	.d-grid {
		gap                  : 3rem;
		grid-template-columns: repeat(3, 1fr);  }
}

.d-split {
	display       : flex;
	flex-direction: column;
	flex-wrap     : wrap;  }

@media only screen and (min-width: 600px) { 
	.d-split {
		flex-direction: row;  }

	.d-split > *:nth-child(1) {
		flex-basis: 30%;  }

	.d-split > *:nth-child(2) {
		flex-basis: 65%;  }
}

.d-even {
	display       : flex;
	flex-direction: column;  }

.d-even > * {
		flex-basis: 100%;  }

@media only screen and (min-width: 600px) { 
	.d-even {
		flex-direction: row;  }	
}


/* FLEXBOX */
.flex-1 {
	flex: 1;  }

.flex-column {
	flex-direction: column;  }

.flex-wrap {
	flex-wrap: wrap;  }

.flex-basis-45 {
	flex-basis: 45%;  }

.justify-between {
	justify-content: space-between;  }

.justify-center {
	justify-content: center;  }

.align-center {
	align-items: center;  }


/* IMAGES */
.img-responsive {
	height   : auto;
	max-width: 100%;  }

.img-grid {
	aspect-ratio : 1;
	object-fit   : cover;  }

.img-rounded {
	border-radius: 50%;  }

/*.img-carrousel {
	background-image: url(../img/img_carrousel_1.jpg);
	background-size : cover;  }*/

@media only screen and (min-width: 600px) { 
	.img-carrousel {
		opacity: 60%;
		position: absolute;  }
}


/* PADDING */
.p-3 {
	padding: 3rem;  }

.p-1 {
	padding: 1rem;  }

.p-0 {
	padding: 0;  }

.pv-1 {
	padding: 1rem 0;  }

.pt-0 {
	padding-top: 0;  }

.pt-2 {
	padding-top: 2rem;  }

.pb-2 {
	padding-bottom: 2rem;  }


/* MARGIN */
.m-0 {
	margin: 0;  }

.mb-1 {
	margin-bottom: 1rem;  }

.mb-2 {
	margin-bottom: 2rem;  }

.mb-3 {
	margin-bottom: 3rem;  }

.mt-1 {
	margin-top: 1rem;  }

.ml-1 {
	margin-left: 1rem;  }

.ml-auto {
	margin-left: auto;  }


/* GAP */
.gap-1 {
	gap: 1rem;  }


/* BACKGROUND COLOR */
.bg-blue {
	background-color: var(--color-blue);  }

.bg-gray {
	background-color: var(--color-gray);  }

.bg-offwhite {
	background-color: var(--color-offwhite);  }

.bg-red {
	background-color: var(--color-red);  }


/* TEXT COLOR */
.txt-offblack {
	color: var(--color-offblack);  }

.txt-offwhite {
	color: var(--color-offwhite);  }

.txt-gray {
	color: var(--color-gray);  }	

.txt-red {
	color: var(--color-red);  }


/* TEXT */
.text-center {
	text-align: center;  }

.fw-bold {
	font-weight: bold;  }

.fw-normal {
	font-weight: normal;  }

.fw-light {
	font-weight: lighter;  }

.fs-1 {
	font-size: 1rem;  }

.fs-2 {
	font-size: 2rem;  }

.fs-3 {
	font-size: 3rem;  }

.lh-2 {
	line-height: 2rem;  }


/* SIZE */
.aspect-fullhd {
	aspect-ratio : 16/9;  }

.maxwdh-50 {
	max-width: 50%;  }


/* POSITION */
.p-relative {
	position: relative;  }


/* BORDER */
.bd-none {
	border: none;  }


/* FORM */
.form-ipt {
	display: flex;
	flex-direction: column;  }


/* UTILITIES */
.pointer {
	cursor: pointer;  }