/* body {
	background-color: #F9F9F9;
} */

body,
input,
select,
textarea {
	color: #868686;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
	color: #000;
}

.box {
	background-color: #F9F9F9;
}

.box,
.box h1,
.box h2,
.box h3,
.box h4,
.box h5,
.box h6,
.box strong,
/* .box b {
	color: #1034BF;
} */

#sidebar {
	background-color: #F9F9F9;
}

#sidebar,
#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5,
#sidebar h6,
#sidebar strong,
#sidebar b {
	color: #000;
}

#sidebar #menu ul a,
#sidebar #menu ul span {
	color: #000;
}

.features article .icon:before {
	z-index: 2000;
}

.features article .icon:after {
	background-color: #F9F9F9;
}

#more {
	display: none;
}


/* Utility classes */
.u-margin--bottom-none {
	margin-bottom: 0;
}

.u-small {
	font-size: 90%;
}

.u-list-column-2 {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
}

.u-list-type-disc {
	list-style-type: disc;
}

.u-list-type-circle {
	list-style-type: circle;
}

.u-list-type-square {
	list-style-type: square;
}

.u-list-type-none {
	list-style-type: none;
}

ul.tick li:before {
	content: '\2713';
	display: inline-block;
	color: #FFD900;
	padding: 0 6px 0 0;
}

.u-block {
	display: inline-block;
	width: 70%;

}

.u-margin-10 {
	margin-top: 40px;
}

.wave {
	transform-origin: 70% 70%;
	animation-name: wave-animation;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	display: inline-block;
}


@keyframes wave-animation {
	0% {
		transform: rotate(0)
	}

	10% {
		transform: rotate(14deg)
	}

	20% {
		transform: rotate(-8deg)
	}

	30% {
		transform: rotate(14deg)
	}

	40% {
		transform: rotate(-4deg)
	}

	50% {
		transform: rotate(10deg)
	}

	60% {
		transform: rotate(0)
	}

	to {
		transform: rotate(0)
	}
}
.no-border {
    border: 0 !important;
}
.no-padding-top {
    padding-top: 0 !important;
}
.n-hidden--visually, html .n-hidden--visually {
    height: 0;
    left: -9999em;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0;
}
/* dotted arrow */
.arrow-border {
  position: relative;
  padding-left: 30px; /* space for arrow */    
  border-right: 0 solid #FE4300;
  word-wrap: break-word;
  padding: 5px;
}

.arrow-border::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  height: 80%;
  width: 2px;
  background-image: radial-gradient(circle, #FE4300 1px, transparent 1px);
  background-size: 2px 8px;
}

.arrow-border::after {
  content: "";
  position: absolute;
  left: 4px;

  /* center vertically */
  top: 50%;
  /* transform: translateY(-50%); */
  transform: translateY(-50%) rotate(180deg);
  /* down arrow */
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 15px solid #FE4300;
  animation: arrow-bounce 1.5s infinite;
}
@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(-50%) rotate(180deg) translateY(0);
  }
  50% {
    transform: translateY(-50%) rotate(180deg) translateY(-8px);
  }
}
.skill-box {
	border: 1px solid #ccc;
	margin: 0 1em 1em;
	padding: .5em;
	text-align: center;
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	word-break: break-word;
}
.n-hidden {
	display: none;
}
.n-no-padding {
	padding: 0;
}
.base-color {
	background-color: #FE4300;
	color: #fff;	
}

/* Container */
.floating-box {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 300px;
  /* border: 2px solid #222; */
  overflow: hidden;
  /* background: #f4f6f8; */
}

/* Floating text */
.float-item {
  position: absolute;
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 14px;
  /* background: rgba(0, 0, 0, 0.08); */
  border-radius: 6px;
  max-width: 120px;

  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* bounce */
}

.floating-box:hover .float-item {
  animation-play-state: paused;
}

.float-item:nth-child(1)  { animation: m1 6s infinite alternate; }
.float-item:nth-child(2)  { animation: m2 7s infinite alternate; }
.float-item:nth-child(3)  { animation: m3 8s infinite alternate; }
.float-item:nth-child(4)  { animation: m4 9s infinite alternate; }
.float-item:nth-child(5)  { animation: m5 10s infinite alternate; }

.float-item:nth-child(6)  { animation: m6 6.5s infinite alternate; }
.float-item:nth-child(7)  { animation: m7 7.5s infinite alternate; }
.float-item:nth-child(8)  { animation: m8 8.5s infinite alternate; }
.float-item:nth-child(9)  { animation: m9 9.5s infinite alternate; }
.float-item:nth-child(10) { animation: m10 6s infinite alternate; }

.float-item:nth-child(11) { animation: m11 7s infinite alternate; }
.float-item:nth-child(12) { animation: m12 8s infinite alternate; }
.float-item:nth-child(13) { animation: m13 9s infinite alternate; }
.float-item:nth-child(14) { animation: m14 10s infinite alternate; }
.float-item:nth-child(15) { animation: m15 6.5s infinite alternate; }

.float-item:nth-child(16) { animation: m16 7.5s infinite alternate; }
.float-item:nth-child(17) { animation: m17 8.5s infinite alternate; }
.float-item:nth-child(18) { animation: m18 9.5s infinite alternate; }
.float-item:nth-child(19) { animation: m19 6s infinite alternate; }
.float-item:nth-child(20) { animation: m20 7s infinite alternate; }

@keyframes m1  { from { left: 0; top: 0; } to { left: calc(100% - 120px); top: calc(100% - 32px); } }
@keyframes m2  { from { left: 20%; top: 10%; } to { left: 60%; top: 70%; } }
@keyframes m3  { from { left: 70%; top: 0; } to { left: 10%; top: 60%; } }
@keyframes m4  { from { left: 50%; top: 80%; } to { left: 5%; top: 10%; } }
@keyframes m5  { from { left: 10%; top: 30%; } to { left: 75%; top: 5%; } }

@keyframes m6  { from { left: 80%; top: 20%; } to { left: 10%; top: 80%; } }
@keyframes m7  { from { left: 40%; top: 0; } to { left: 60%; top: 70%; } }
@keyframes m8  { from { left: 0; top: 60%; } to { left: 70%; top: 20%; } }
@keyframes m9  { from { left: 90%; top: 10%; } to { left: 30%; top: 80%; } }
@keyframes m10 { from { left: 30%; top: 30%; } to { left: 80%; top: 60%; } }

@keyframes m11 { from { left: 10%; top: 90%; } to { left: 60%; top: 10%; } }
@keyframes m12 { from { left: 60%; top: 50%; } to { left: 20%; top: 0; } }
@keyframes m13 { from { left: 90%; top: 90%; } to { left: 40%; top: 10%; } }
@keyframes m14 { from { left: 50%; top: 20%; } to { left: 5%; top: 70%; } }
@keyframes m15 { from { left: 0; top: 40%; } to { left: 80%; top: 10%; } }

@keyframes m16 { from { left: 20%; top: 0; } to { left: 60%; top: 80%; } }
@keyframes m17 { from { left: 80%; top: 60%; } to { left: 10%; top: 10%; } }
@keyframes m18 { from { left: 40%; top: 90%; } to { left: 70%; top: 10%; } }
@keyframes m19 { from { left: 90%; top: 40%; } to { left: 30%; top: 0; } }
@keyframes m20 { from { left: 5%; top: 70%; } to { left: 75%; top: 20%; } }


/* physics version */
/* #floatingBox {
  position: relative;
  width: 600px;
  height: 300px;
  border: 2px solid #222;
  overflow: hidden;
  background: #f4f6f8;
}

.float-item {
  position: absolute;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  user-select: none;
  pointer-events: none;
} */