/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes slideDown{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes scaleIn{

from{

opacity:0;

transform:scale(.95);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}

@keyframes shimmer{

0%{

background-position:-450px 0;

}

100%{

background-position:450px 0;

}

}

/* ==========================================================
   PAGE
========================================================== */

.page-enter{

animation:fadeIn .35s ease;

}

.fade-up{

animation:slideUp .45s ease;

}

.fade-down{

animation:slideDown .35s ease;

}

.scale-in{

animation:scaleIn .25s ease;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn{

transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease,
color .18s ease;

}

.btn:hover{

transform:translateY(-2px);

}

.btn:active{

transform:translateY(0);

}

/* ==========================================================
   CARDS
========================================================== */

.card,
.project-card,
.project-item,
.update-row,
.overview-card,
.settings-card,
.profile-card,
.featured-release,
.timeline-content{

transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease;

}

.card:hover,
.project-card:hover,
.project-item:hover,
.update-row:hover,
.overview-card:hover,
.featured-release:hover,
.timeline-content:hover{

transform:translateY(-4px);

}

/* ==========================================================
   INPUTS
========================================================== */

.input,
.textarea,
select{

transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;

}

/* ==========================================================
   LINKS
========================================================== */

a{

transition:
color .18s ease,
opacity .18s ease;

}

a:hover{

opacity:.85;

}

/* ==========================================================
   ICON BUTTONS
========================================================== */

.icon-btn,
.toolbar-btn,
.modal-close{

transition:
background .18s ease,
transform .18s ease;

}

.icon-btn:hover,
.toolbar-btn:hover,
.modal-close:hover{

transform:scale(1.05);

}

/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar-nav a{

transition:
background .18s ease,
padding-left .18s ease,
color .18s ease;

}

.sidebar-nav a:hover{

padding-left:20px;

}

/* ==========================================================
   DROPDOWNS
========================================================== */

.dropdown-menu{

animation:scaleIn .18s ease;

}

/* ==========================================================
   MODAL
========================================================== */

.modal{

animation:scaleIn .2s ease;

}

/* ==========================================================
   TOAST
========================================================== */

.toast{

animation:slideDown .25s ease;

}

/* ==========================================================
   LOADER
========================================================== */

.skeleton{

background:linear-gradient(
90deg,
#ececec 25%,
#f6f6f6 50%,
#ececec 75%
);

background-size:400px 100%;

animation:shimmer 1.3s infinite linear;

}