@charset "utf-8";
/* CSS Document */


/* ----------------------------------------------------------------------------- *
 *                                    Icons                                      *
 * ----------------------------------------------------------------------------- */

i.fa-solid {
	color: var(--primary);
	margin-bottom: 15px;
}

i.fa-regular {
	color: var(--primary);
	margin-bottom: 15px;
}

.content-icon i.fa {
	font-size: 25px;
	color: var(--primary);
	margin: 0 auto;
	width: 45px;
	height: 45px;
	padding: 7px;
	padding-top: 8px;
	margin-top: 10px;
	border-radius: 50%;
	border: 1px solid var(--primary);
}

/* ----------------------------------------------------------------------------- *
 *                              Scroll TOP Button                                *
 * ----------------------------------------------------------------------------- */

#Top {
	font-size: 20px;
	padding-left: 15px;
	padding-top: 10px;
	margin: 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid var(--primary);
	background-color: var(--background);
	color: var(--primary);
	z-index:1000;
	display: none;
  	position: fixed;
  	bottom: 20px;
  	right: 20px;
	cursor: pointer;
}

#Top:hover {
  	opacity: 0.8;
}

#Top i.fa:hover, #Top i.far:hover, #Top i.fas:hover, #Top i.fab:hover {
	opacity: 0.8;
}

.scroll-up {
	position: absolute;
	z-index:1000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 50px;
	width: 50px;
}

.button-up {
  position: relative;
  padding: 0;
  margin: 0 auto;
  background: transparent;
  height: 50px;
  width: 50px;
  border-radius: 50%;
	
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.button-up:hover {
  -webkit-transform: translate3d(0, -10px, 0);
          transform: translate3d(0, -10px, 0);
}

.button-up::after {
  content: "";
  position: absolute;
  left: 17px;
  z-index: 11;
  display: block;
  width: 15px;
  height: 15px;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
}
.button-up::after {
  top: 20px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/* ----------------------------------------------------------------------------- *
 *                                   Arrows                                      *
 * ----------------------------------------------------------------------------- */

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left{
  display: block;
  margin: 30px auto;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
}
.arrow-right,
.long-arrow-right{
 -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
	margin-right: 10px;
}

.arrow-left,
.long-arrow-left{
 -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
	margin-left: 10px;
}
.long-arrow-right::after,
.long-arrow-left::after{
  content: "";
  display: block;
  width: 2px;
  height: 45px;
  background-color: var(--container);
  -webkit-transform: rotate(-45deg) translate(15px, 4px);
          transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

.triangle-left,
.triangle-right,
.triangle-top,
.triangle-bottom{
  width: 0;
  height: 0;
  margin: 30px auto;
}
.triangle-left,
.triangle-right{
  border-top:
    18px solid transparent;
  border-bottom:
    18px solid transparent; 
}
.triangle-top,
.triangle-bottom{
  border-left:
    18px solid transparent;
  border-right:
    18px solid transparent;
}
.triangle-right{
  border-left:
    30px solid var(--background);
}
.triangle-left{
  border-right:
    30px solid var(--background);
}
.triangle-top{
  border-bottom:
    30px solid var(--background);
}
.triangle-bottom{
  border-top:
    30px solid var(--background);
}