@font-face {
	font-family: 'Century Gothic';
	src: url('../fonts/Century Gothic/CenturyGothic.eot');
	src: url('../fonts/Century Gothic/CenturyGothic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/Century Gothic/CenturyGothic.woff2') format('woff2'),
		 url('../fonts/Century Gothic/CenturyGothic.woff') format('woff'),
		 url('../fonts/Century Gothic/CenturyGothic.ttf') format('truetype'),
		 url('../fonts/Century Gothic/CenturyGothic.svg#CenturyGothic') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/*************/
/* VARIABLES */
/*************/

:root {
  --primary: #0b6b67;
  --primary-rgb: 11, 107, 103;
  --green: #4CAF50;
  --green-rgb: 76, 175, 80;
  --red: #f44336;
  --red-rgb: 244, 67, 54;
  --blue: #008CBA;
  --blue-rgb: 0, 140, 186;
  --yellow: #ff9933;
  --yellow-rgb: 255, 153, 51;
  --grey: #555;
  --grey-rgb: 85, 85, 85;
  --softgrey: #d9d9d9;
  --softgrey-rgb: 217, 217, 217;
  --black: #000;
  --black-rgb: 0, 0, 0;
}

/***********/
/* General */
/***********/

.primary {
	color: var(--primary);
}
.green {
	color: var(--green);
}
.red {
	color: var(--red);
}
.blue {
	color: var(--blue);
}
.grey {
	color: var(--grey);
}
.softgrey {
	color: var(--softgrey);
}
.black {
	color: var(--black);
}

* {
	font-family: "Century Gothic";
}

body {
	margin: 0;
	font-size: 12px;
}

.cursor-pointer {
	cursor: pointer;
}

.w-full {
	width: 100%;
}

 /* Añade '...' cuando el texto no cabe en el contenedor */
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*************/
/* Alignment */
/*************/

.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

/**************/
/* Responsive */
/**************/

.flex {
	display: flex;
	flex-flow: row wrap;
}
/* - Flex:; horizontal alignment */
.flex-h-left {
	justify-content: flex-start;
}
.flex-h-center {
	justify-content: center;
}
.flex-h-right {
	justify-content: flex-end;
}
.flex-h-space-around {
	justify-content: space-around;
}
.flex-h-space-between {
	justify-content: space-between;
}
/* - Flex: vertical alignment */
.flex-v-top {
	align-items: flex-start;
}
.flex-v-center {
	align-items: center;
}
.flex-v-bottom {
	align-items: flex-end;
}
.flex-v-baseline {
	align-items: baseline;
}

.container {
	max-width: calc(580px - 40px);
	padding: 20px;
	margin: auto;
	box-sizing: border-box;
}

@media(min-width: 760px) {
	.container {
		max-width: calc(760px - 40px);
	}
}
@media(min-width: 1000px) {
	.container {
		max-width: calc(1000px - 40px);
	}
}
@media(min-width: 1200px) {
	.container {
		max-width: calc(1200px - 40px);
	}
}

/*
	SISTEMA POR COLUMNAS 

	Puedes elegir entre dividir el contenido en 2, 3 o 4 columnas.
	La siguientes clases indican el total de columnas:
		.cols-2 es la clase para cada columna de un total de 2 columnas
		.cols-3 es la clase para cada columna de un total de 3 columnas

	Debe haber un elemento padre que contenga la clase .cols (hace lo mismo que la clase .flex)
*/
.cols {
	display: flex;
	flex-flow: row wrap;
	/*justify-content: center;*/
}
.cols-2 {
	box-sizing: border-box;
	width: calc(100% / 2);
	padding: 20px;
}
.cols-2_bk {
	width: calc(100% / 2);
	padding: 20px;
}
.cols-3 {
	box-sizing: border-box;
	width: calc(100% / 3);
	padding: 20px;
}

.cols-4 {
	box-sizing: border-box;
	width: calc(100% / 4);
	padding: 20px;
}

@media(max-width: 1200px) {
	.cols-4 {
		width: calc(100% / 3);
	}
}
@media(max-width: 1000px) {
	.cols-3 {
		width: calc(100% / 2);
	}
	.cols-4 {
		width: calc(100% / 2);
	}
}
@media(max-width: 760px) {
	.cols-2 {
		width: 100%;
	}
	.cols-3 {
		width: 100%;
	}
	.cols-4 {
		width: 100%;
	}
}

/*********/
/* Icons */
/*********/

.icons {
	max-width: 20px;
	max-height: 20px;
}