@font-face  {
	font-family: 'hkgrotesk';
	src: url('../font/HKGrotesk-Medium.eot');
	src: url('../font/HKGrotesk-Medium.woff');
	src: url('../font/HKGrotesk-Medium.woff2');
}

body {
  background: #faa24b;
  font-family: 'hkgrotesk';
}

h1::selection, h2::selection, h3::selection, i::selection, small::selection, p::selection {
    background: black;
    color: #faa24b;
}

/* Firefox */
h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, i::-moz-selection, small::-moz-selection, p::-moz-selection {
    background: black;
    color: #faa24b;
}

/* Chrome, Safari */
h1::-webkit-selection, h2::-webkit-selection, h3::-webkit-selection, i::-webkit-selection, small::-webkit-selection, p::-webkit-selection {
    background: black;
    color: #faa24b;
}

hr {
	width: 70%;
}

/* TOT */
@media (max-width: 575.98px) {
	.container {
		width: 100%;
		height: auto;
	}

	.xaitop {
		width: 78%;
	}

	.xaiend {
		width: 82%;
		margin-left: 8%;
	}

	.barra {
		width: 75%;
	}

	.bar1 {
		margin-left: 18%;
	}

	.bar2 {
		margin-right: 10%;
	}

	.bar3 {
		margin-left: 10%;
	}

	.bar4 {
		margin-right: 20%;
	}

	.bar5 {
		margin-left: 27%;
	}

	.bar6 {
		margin-right: 14%;
	}

	.bar7 {
		margin-left: 20%;
	}

	.bar8 {
		margin-right: 8%;
	}

	.bar9 {
		margin-left: 26%;
	}

	.bar10 {

	}
}


@media (min-width: 576px) and (max-width: 767.98px) {
	.container {
		width: 100%;
		height: auto;
	}

	.xaitop {
		width: 78%;
	}

	.xaiend {
		width: 82%;
		margin-left: 8%;
	}

	.barra {
		width: 75%;
	}

	.bar1 {
		margin-left: 18%;
	}

	.bar2 {
		margin-right: 10%;
	}

	.bar3 {
		margin-left: 10%;
	}

	.bar4 {
		margin-right: 20%;
	}

	.bar5 {
		margin-left: 27%;
	}

	.bar6 {
		margin-right: 14%;
	}

	.bar7 {
		margin-left: 20%;
	}

	.bar8 {
		margin-right: 8%;
	}

	.bar9 {
		margin-left: 26%;
	}

	.bar10 {

	}
}


@media (min-width: 768px) and (max-width: 991.98px) {
	.container {
		width: 100%;
		height: auto;
	}

	.xaitop {
		width: 78%;
	}

	.xaiend {
		width: 82%;
		margin-left: 8%;
	}

	.barra {
		width: 75%;
	}

	.bar1 {
		margin-left: 18%;
	}

	.bar2 {
		margin-right: 10%;
	}

	.bar3 {
		margin-left: 10%;
	}

	.bar4 {
		margin-right: 20%;
	}

	.bar5 {
		margin-left: 27%;
	}

	.bar6 {
		margin-right: 14%;
	}

	.bar7 {
		margin-left: 20%;
	}

	.bar8 {
		margin-right: 8%;
	}

	.bar9 {
		margin-left: 26%;
	}

	.bar10 {

	}
}


@media (min-width: 992px) and (max-width: 1199.98px) {
	.container {
		width: 70%;
		height: auto;
	}

	.xaitop {
		width: 58%;
	}

	.xaiend {
		width: 62%;
		margin-left: 8%;
	}

	.barra {
		width: 55%;
	}

	.bar1 {
		margin-left: 18%;
	}

	.bar2 {
		margin-right: 10%;
	}

	.bar3 {
		margin-left: 10%;
	}

	.bar4 {
		margin-right: 20%;
	}

	.bar5 {
		margin-left: 27%;
	}

	.bar6 {
		margin-right: 14%;
	}

	.bar7 {
		margin-left: 20%;
	}

	.bar8 {
		margin-right: 8%;
	}

	.bar9 {
		margin-left: 26%;
	}

	.bar10 {

	}
}


@media (min-width: 1200px) {
	.container {
		width: 70%;
		height: auto;
	}

	.xaitop {
		width: 58%;
	}

	.xaiend {
		width: 62%;
		margin-left: 8%;
	}

	.barra {
		width: 55%;
	}

	.bar1 {
		margin-left: 18%;
	}

	.bar2 {
		margin-right: 10%;
	}

	.bar3 {
		margin-left: 10%;
	}

	.bar4 {
		margin-right: 20%;
	}

	.bar5 {
		margin-left: 27%;
	}

	.bar6 {
		margin-right: 14%;
	}

	.bar7 {
		margin-left: 20%;
	}

	.bar8 {
		margin-right: 8%;
	}

	.bar9 {
		margin-left: 26%;
	}

	.bar10 {

	}
}


/* Menu */
.accordion {
	border: none;
}

.card {
	background: transparent;
	border: none;
	padding: 0;
	margin-top: -10px;
}

.card-header {
	background: transparent;
	border: none;
	padding: 0;
}

/* GRUPS */
small {
	font-size: 0.4em;
}

.arrow {
	color: black;
	font-size: 1.5em;
}

/* CONTACT */
.contact {
	background-color: black;
	border: 2px solid black;
	border-radius: 5px;
	color: #faa24b;
	padding: 5px 5px 5px 5px;
	transition: 0.5s;
}

.contact:hover {
	background-color: #faa24b;
	color: black;
}

.alex {
	color: white;
	transition: 0.5s;
}

.alex:hover {
	color: #faa24b;
}


.wifi {
	color: black;
	transition: 0.5s;
	border-bottom: 1px solid #faa24b;
}

.wifi:hover {
	color: black;
	border-bottom: 1px solid black;
}

/* Footer */
a {
	text-decoration: none;
	color: white;
}

a:hover {
	text-decoration: none;
	color: #faa24b;
}

footer {
	background-color: black;
	color: white;
}