/* Use with image links */

.fade-out {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.fade-out:hover {
   opacity: 0.5;
}

/* Use with main navigation */
.fade-in {
   background-color: #fff;
   transition: background-color .25s ease-in-out;
   -moz-transition: background-color .25s ease-in-out;
   -webkit-transition: background-color .25s ease-in-out;
}
.fade-in:hover {
   background-color: #fff;
   color: #333;
}

/* Use with side navigation */
.shift-right {
   padding-left: 0;
   transition: padding-left .25s ease-in-out;
   -moz-transition: padding-left .25s ease-in-out;
   -webkit-transition: padding-left .25s ease-in-out;
}
.shift-right:hover {
   padding-left: 20px;
}

.popin {
    opacity: 0;
    -moz-transition: opacity 0.6s linear;
    -o-transition: opacity 0.6s linear;
    -webkit-transition: opacity 0.6s linear;
    transition: opacity 0.6s linear;
}
.popin.appear {
    opacity: 1;
}

/* Medium and up - min 640px */
@media screen and (min-width: 40em) {
}

/* Large and up - min 1024px */
@media screen and (min-width: 64em) {
}