*:not(a){
  animation: 1s ease-out 0s 1 fadeIn;
}
@keyframes slideInFromTop{
  0%{
    opacity: 0;
    margin-bottom: -100%;;
  }
  100%{
    opacity: 1;
  }
}
@keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/******************************/
.nav-wrapper {
 width: 100%;
 position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 0;
 background-color: #fff;
 z-index:99;
}
.grad-bar {
 position: fixed;
 width: 100%;
 height: 5px;
 background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 background-size: 400% 400%;
 	-webkit-animation: gradbar 15s ease infinite;
	-moz-animation: gradbar 15s ease infinite;
	animation: gradbar 15s ease infinite;
}

/* NAVIGATION */
.navbar {
 position: fixed;
 top:5px;
 display: grid;
 grid-template-columns: 1fr 10fr;/*2개의 열을 생성합니다 첫 번째 열은 1비율을 차지하고 두 번째 열은 10비율*/
 align-items: center;
 width: 100%;
 height: 50px;
 overflow: hidden;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 20px -20px rgba(0,0,0,0.5);
}

.navbar img {
 height: 16px;
 width: auto;
 margin-left: 20px;
}
.navbar ul {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(10,auto);/*9,1fr 9개의 동일한 너비의 열을 생성*/
 justify-self: end;
}

.nav-item a {
 color: #000;
 font-size: 0.9rem;
 font-weight: 400;
 text-decoration: none;
 transition: color 0.3s ease-out;
 margin:0 5px;
}

.nav-item a:hover {
 color: #3498db;
}

/* SEARCH FUNCTION */
#search-icon {
 font-size: 0.9rem;
 margin-right:10px;
 transition: color 0.3s ease-out;
}

#search-icon:hover {
 color: #3498db;
 cursor: pointer;
}

.search {
 transform: translate(-40%);
 -webkit-transform: translate(-40%);
 transition: transform 0.7s ease-in-out;
 color: #3498db;
}

.no-search {
 width: 70%;
 transform: translate(0);
 transition: transform 0.7s ease-in-out;
}

.search-input {
 position: absolute;
 top: -6px;
 right: -165px;
 opacity: 0;
 width: 0px;
 z-index: -1;
 transition: opacity 0.6s ease;
}

.search-active {
 width: 165px;
 opacity: 1;
 z-index: 0;
}

.search-input {
 border: 0;
 border: 1px solid #ccc;
 border-radius: 5px; /* FOR SAFARI */
 outline: 0;
 padding: 5px;
}

/* MOBILE MENU & ANIMATION */
.menu-toggle .bar{
 width: 25px;
 height: 3px;
 background-color: #3f3f3f;
 margin: 5px auto;
 -webkit-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.menu-toggle {
 justify-self: end;
 margin-right: 25px;
 display: none;
}

.menu-toggle:hover{
 cursor: pointer;
}

#mobile-menu.is-active .bar:nth-child(2){
 opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1){
 -webkit-transform: translateY(8px) rotate(45deg);
 -ms-transform: translateY(8px) rotate(45deg);
 -o-transform: translateY(8px) rotate(45deg);
 transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3){
 -webkit-transform: translateY(-8px) rotate(-45deg);
 -ms-transform: translateY(-8px) rotate(-45deg);
 -o-transform: translateY(-8px) rotate(-45deg);
 transform: translateY(-8px) rotate(-45deg);
}

/* KEYFRAME ANIMATIONS */
@-webkit-keyframes gradbar {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes gradbar {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes gradbar {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/* Media Queries */
@media only screen and (max-width: 768px) { 
 .features {
 flex-direction: column;
 padding: 50px;
 }
 /* MOBILE NAVIGATION */
 .navbar ul {
 display: flex;
 flex-direction: column;
 position: fixed;
 justify-content: start;
 top: 55px;
background-color: rgba(255, 255, 255, 0.9);
 width: 100%;
 height: calc(100vh - 55px);
 transform: translate(-101%);
 text-align: right;
 overflow: hidden;
 }
 
 .navbar li {
 padding: 15px;
 margin-right: 10px;
 }
 .navbar li a::before{
/*content:'\f05b\00a0';*/
content:' ';
font-family:fontAwesome;
padding-top: 7px;
}
 .navbar li a::after{
content:'\00a0\f185';
font-family:fontAwesome;
padding-top: 7px;
}
 .navbar li:first-child {
 margin-top: 50px;
 }
 
 .navbar li a {
 font-size: 1rem;
 }
 
 .menu-toggle, .bar {
 display: block;
 cursor: pointer;
 }
 
 .mobile-nav {
 transform: translate(0%)!important;
}
 
 /* SECTIONS */
 .headline {
 height: 20vh;
 }
 
 .feature-container p {
 margin-bottom: 25px;
 }
 
 .feature-container {
 margin-top: 20px;
 }
 
 .feature-container:nth-child(2) {
 order: -1;
 }
 
 /* SEARCH DISABLED ON MOBILE */
 
 #search-icon {
 display: none;
 }
 
 .search-input {
 display: none;
 }
}
/**********/
.et-main{
margin:10px 30px 20px;
z-index:-1;
}

.aside{
position:fixed;
top:40%;
right:5px;
}
.aside i{
  color: #000;
}
.aside a{
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0 !important;
  padding-bottom: 1em;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.1)) 
          drop-shadow(3px 3px 3px rgba(0,0,0,.1));
  animation: slideInFromTop 5s ease-out 0s; 
}
.aside a:nth-child(1){
  animation: slideInFromTop 2s ease-out 0s;
}
.aside a:nth-child(2){
  animation: slideInFromTop 1s ease-out 0s;
}
.aside a:nth-child(3){
  animation: slideInFromTop .5s ease-out 0s;
}
.aside a:nth-child(4){
  animation: slideInFromTop .25s ease-out 0s;
}