.animated05s {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

.animated1s {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0.25s;
}

.animated2s {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: 1s;
}

/* Button 1b */
#menu_container ul li:after {
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
}

#menu_container ul li:hover,
#menu_container ul li:active {
    color: #0e83cd;
}

#menu_container ul li:hover:after,
#menu_container ul li:active:after {
    height: 100%;
    animation-duration: 1s;
    animation-fill-mode: both;
}



#menu_container ul li[data-entrance="up"]:hover:after,
#menu_container ul li[data-entrance="up"]:active:after,
#menu_container ul li[data-entrance="down"]:hover:after,
#menu_container ul li[data-entrance="down"]:active:after,
#menu_container ul li[data-entrance="right"]:hover:after,
#menu_container ul li[data-entrance="right"]:active:after,
#menu_container ul li[data-entrance="left"]:hover:after,
#menu_container ul li[data-entrance="left"]:active:after,
#menu_container ul li[data-entrance="up-leave"]:hover:after,
#menu_container ul li[data-entrance="up-leave"]:active:after,
#menu_container ul li[data-entrance="down-leave"]:hover:after,
#menu_container ul li[data-entrance="down-leave"]:active:after,
#menu_container ul li[data-entrance="right-leave"]:hover:after,
#menu_container ul li[data-entrance="right-leave"]:active:after,
#menu_container ul li[data-entrance="left-leave"]:hover:after,
#menu_container ul li[data-entrance="left-leave"]:active:after {
    animation-duration: 1s !important;
    animation-fill-mode: both !important;
}



#menu_container ul li[data-entrance="up"]:hover:after,
#menu_container ul li[data-entrance="up"]:active:after {
    -webkit-animation: menuEntranceUp;
    -o-animation: menuEntranceUp;
    animation: menuEntranceUp;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="up-leave"]:after,
#menu_container ul li[data-entrance="up-leave"]:after {
    -webkit-animation: menuExitUp;
    -o-animation: menuExitUp;
    animation: menuExitUp;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="down"]:hover:after,
#menu_container ul li[data-entrance="down"]:active:after {
    -webkit-animation: menuEntranceDown;
    -o-animation: menuEntranceDown;
    animation: menuEntranceDown;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="down-leave"]:after,
#menu_container ul li[data-entrance="down-leave"]:after {
    -webkit-animation: menuExitDown;
    -o-animation: menuExitDown;
    animation: menuExitDown;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="right"]:hover:after,
#menu_container ul li[data-entrance="right"]:active:after {
    -webkit-animation: menuEntranceRight;
    -o-animation: menuEntranceRight;
    animation: menuEntranceRight;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="right-leave"]:after,
#menu_container ul li[data-entrance="right-leave"]:after {
    -webkit-animation: menuExitRight;
    -o-animation: menuExitRight;
    animation: menuExitRight;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="left"]:hover:after,
#menu_container ul li[data-entrance="left"]:active:after {
    -webkit-animation: menuEntranceLeft;
    -o-animation: menuEntranceLeft;
    animation: menuEntranceLeft;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}

#menu_container ul li[data-entrance="left-leave"]:after,
#menu_container ul li[data-entrance="left-leave"]:after {
    -webkit-animation: menuExitLeft;
    -o-animation: menuExitLeft;
    animation: menuExitLeft;
    animation-duration: 0.44s;
    animation-fill-mode: both;
}


@keyframes menuEntranceDown {
    0% {
        transform: translateY(100%);
        opacity:0;
    }

    50% {
        transform: translateY(100%);
        opacity:1;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes menuExitDown {
    0% {
        transform: translateY(0%);
        opacity:1;
    }

    50% {
        transform: translateY(100%);
        opacity:1;
    }

    99% {
        transform: translateY(100%);
        opacity:1;
    }


    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes menuEntranceUp {
    0% {
        transform: translateY(-100%);
        opacity:0;
    }

    50% {
        transform: translateY(-100%);
        opacity:1;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes menuExitUp {
    0% {
        transform: translateY(0%);
        opacity:1;
    }

    50% {
        transform: translateY(-100%);
        opacity:1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}


@keyframes menuEntranceLeft {
    0% {
        transform: translateX(-110%);
        opacity:0;
    }

    50% {
        transform: translateX(-100%);
        opacity:1;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes menuExitLeft {
    0% {
        transform: translateX(0%);
        opacity:1;
    }

    50% {
        transform: translateX(-100%);
        opacity:1;
    }


    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes menuEntranceRight {
    0% {
        transform: translateX(100%);
        opacity:0;
    }

    50% {
        transform: translateX(100%);
        opacity:1;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes menuExitRight {
    0% {
        transform: translateX(0%);
        opacity:1;
    }

    50% {
        transform: translateX(100%);
        opacity:1;
    }


    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}






/*MENU ANIMATIONS*/
/*========================*/

#main_nav.open {
    -webkit-transform: translateX(-10%);
    -moz-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    -o-transform: translateX(-10%);
    transform: translateX(-10%);
}

#main_nav.open #menu_collapsed {
    /*max-width: 10%;*/
    max-width: 0%;
    opacity: 0;
}

#main_container.menu_open {
    -webkit-transform: translateX(24.7%);
    -moz-transform: translateX(24.7%);
    -ms-transform: translateX(24.7%);
    -o-transform: translateX(24.7%);
    transform: translateX(24.7%);
}












/* PAGES
============================================================================= */
/*.page-home 		{ background:#00D0BC; color:#00907c; }
!*.page-projects 	{ background:#E59400; color:#a55400; }*!
.page-projects 	{
    !*background:#E59400; color:#a55400; *!
    !* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#89f7fe+0,66a6ff+100 *!
    background: rgb(137,247,254); !* Old browsers *!
    background: -moz-linear-gradient(45deg, rgba(137,247,254,1) 0%, rgba(102,166,255,1) 100%); !* FF3.6-15 *!
    background: -webkit-linear-gradient(45deg, rgba(137,247,254,1) 0%,rgba(102,166,255,1) 100%); !* Chrome10-25,Safari5.1-6 *!
    background: linear-gradient(45deg, rgba(137,247,254,1) 0%,rgba(102,166,255,1) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89f7fe', endColorstr='#66a6ff',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!
}
.page-code 	{ background:#E59400; color:#a55400; }
.page-contact 	{ background: #e59400; color: #a55400; }*/

/* ANIMATIONS
============================================================================= */

.page.ng-leave 	{ z-index:9999; }
.page.ng-enter 	{ z-index:8888; }

/* page specific animations ------------------------ */



/*!* home -------------------------- *!*/
/*.page-home.ng-leave         {*/
/*-webkit-animation: slideOutRight .5s both ease-in;*/
/*-moz-animation: slideOutRight .5s both ease-in;*/
/*animation: slideOutRight .5s both ease-in;*/
/*}*/
/*.page-home.ng-enter 		{*/
/*-webkit-animation:slideInLeft 0.5s both ease-in;*/
/*-moz-animation:slideInLeft 0.5s both ease-in;*/
/*animation:slideInLeft 0.5s both ease-in;*/
/*}*/

/*!* projects ------------------------ *!*/
/*.page-projects.ng-leave        {*/
/*-webkit-animation: slideOutRight .5s both ease-in;*/
/*-moz-animation: slideOutRight .5s both ease-in;*/
/*animation: slideOutRight .5s both ease-in;*/
/*}*/
/*.page-projects.ng-enter 		{*/
/*-webkit-animation:slideInLeft 0.5s both ease-in;*/
/*-moz-animation:slideInLeft 0.5s both ease-in;*/
/*animation:slideInLeft 0.5s both ease-in;*/
/*}*/

/*!* code ------------------------ *!*/
/*.page-code.ng-leave        {*/
/*-webkit-animation: slideOutRight .5s both ease-in;*/
/*-moz-animation: slideOutRight .5s both ease-in;*/
/*animation: slideOutRight .5s both ease-in;*/
/*}*/
/*.page-code.ng-enter 		{*/
/*-webkit-animation:slideInLeft 0.5s both ease-in;*/
/*-moz-animation:slideInLeft 0.5s both ease-in;*/
/*animation:slideInLeft 0.5s both ease-in;*/
/*-webkit-animation-delay: 0.8s;*/
/*-moz-animation-delay: 0.8s;*/
/*-o-animation-delay: 0.8s;*/
/*animation-delay: 0.8s;*/
/*}*/


.page-home.ng-leave, .page-projects.ng-leave,.page-code.ng-leave, .page-contact.ng-leave      {
    -webkit-animation: zoomOut .5s both ease-in;
    -moz-animation: zoomOut .5s both ease-in;
    animation: zoomOut .5s both ease-in;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}



/* pagesALL ---------------------- */

/*.page-home.ng-leave, .page-projects.ng-leave,.page-code.ng-leave, .page-contact.ng-leave      {*/
/*-webkit-animation: slideOutRight .5s both ease-in;*/
/*-moz-animation: slideOutRight .5s both ease-in;*/
/*animation: slideOutRight .5s both ease-in;*/
/*}*/


.page-home.ng-enter, .page-projects.ng-enter,.page-code.ng-enter, .page-contact.ng-enter 	{
-webkit-animation: zoomIn 0.3s both ease-in;
-moz-animation: zoomIn 0.3s both ease-in;
animation: zoomIn 0.3s both ease-in;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay:0.8s;
animation-delay: 0.8s;
    z-index: -10;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    /*-webkit-animation-timing-function: ease-in;*/
    /*-moz-animation-timing-function: ease-in;*/
    /*-o-animation-timing-function: ease-in;*/
    /*animation-timing-function: ease-in;*/
}








/*PAGE zoomOut Animation*/
@keyframes zoomOut {
    from {
        opacity: 1;
        z-index: -100;
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
        z-index: 20;
    }

    to {
        opacity: 0;
        z-index: 20;
    }
}

.zoomOut {
    animation-name: zoomOut;
}




/*PAGE zoomOut Animation*/
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
        z-index: 1000;
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}





/* rotate and fall */
@-webkit-keyframes rotateFall {
    0% { -webkit-transform: rotateZ(0deg); }
    20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
    40% { -webkit-transform: rotateZ(17deg); }
    60% { -webkit-transform: rotateZ(16deg); }
    100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
    0% { -moz-transform: rotateZ(0deg); }
    20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
    40% { -moz-transform: rotateZ(17deg); }
    60% { -moz-transform: rotateZ(16deg); }
    100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
    0% { transform: rotateZ(0deg); }
    20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40% { transform: rotateZ(17deg); }
    60% { transform: rotateZ(16deg); }
    100% { transform: translateY(100%) rotateZ(17deg); }
}

/* scale up */
@keyframes scaleUp {
    from 		{ opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
    from 		{ opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
    from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the left */
@keyframes slideInLeft {
    from 	{ transform:translateX(150%); }
    to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInLeft {
    from 	{ -moz-transform:translateX(150%); }
    to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInLeft {
    from 	{ -webkit-transform:translateX(150%); }
    to 		{ -webkit-transform: translateX(0); }
}

/* slide in from the right */
@keyframes slideInRight {
    from 	{ transform:translateX(-350%); }
    to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from 	{ -moz-transform:translateX(-350%); }
    to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from 	{ -webkit-transform:translateX(-350%); }
    to 		{ -webkit-transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from 	{ transform:translateY(100%); }
    to 		{ transform: translateY(0); }
}
@-moz-keyframes slideInUp {
    from 	{ -moz-transform:translateY(100%); }
    to 		{ -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
    from 	{ -webkit-transform:translateY(100%); }
    to 		{ -webkit-transform: translateY(0); }
}


/* slide out to left */
@keyframes slideOutLeft {
    to 		{ transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
    to 		{ -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
    to 		{ -webkit-transform: translateX(-100%); }
}

/* slide out to right */
@keyframes slideOutRight {
    to 		{ transform: translateX(100%); }
}
@-moz-keyframes slideOutLeft {
    to 		{ -moz-transform: translateX(100%); }
}
@-webkit-keyframes slideOutLeft {
    to 		{ -webkit-transform: translateX(100%); }
}

/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
    to { -webkit-transform: translateX(100%); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
    to { -moz-transform: translateX(100%); opacity: 0; }
}
@keyframes rotateOutNewspaper {
    to { transform: translateX(100%); opacity: 0; }
}















/* Home CSS
============================================================================= */


#_Path_14 {
    transform: scale(0.1,0.1);
    transform-origin: 50% 50%;
    transition: all 0.33s linear;
}

.cls-13,.cls-14, .cls-15, .cls-16, .cls-17, #boy{
    transform: scaleX(0) scaleY(0);
    transform-origin: center center;
}

#envelope_right {
    transform-origin: center center;
    /*transform: rotate(-34deg);*/
    /*opacity: 0;*/
    transition: all 0.33s ease-in-out;
}

#envelope_left {
    transform-origin: center center;
    /*transform: rotate(34deg);*/
     /*opacity: 0; */
    transition: all 0.33s ease-in-out;
}

.blue_book {
    transform-origin: center center;
    transition: all 0.15s ease-in;
    transform: rotate(0deg);
    opacity: 0;
}

.blue_book:hover {
    transform-origin: center center;
    transform: rotate(20deg);
    transition: all 0.15s ease-out;
}

#books path {
    transform-origin: center center;
}





/*////// CUSTOM ANIMATIONS ////// */

.anime {
    -webkit-animation-duration: 0.33s;
    animation-duration: 0.33s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anime66 {
    -webkit-animation-duration: 0.66s;
    animation-duration: 0.66s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anime-d {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.33s;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}





@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scaleX(0) scaleY(0);
        transform: scaleX(0) scaleY(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1) scaleY(1);
        transform: scaleX(1) scaleY(1);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scaleX(0) scaleY(0);
        transform: scaleX(0) scaleY(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1) scaleY(1);
        transform: scaleX(1) scaleY(1);
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}



@-webkit-keyframes zoomIn2 {
    from {
        opacity: 0;
        -webkit-transform: scaleX(0) scaleY(0);
        transform: scaleX(0) scaleY(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1) scaleY(1);
        transform: scaleX(1) scaleY(1);
    }
}

@keyframes zoomIn2 {
    from {
        opacity: 0;
        -webkit-transform: scaleX(0) scaleY(0);
        transform: scaleX(0) scaleY(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1) scaleY(1);
        transform: scaleX(1) scaleY(1);
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn2;
    animation-name: zoomIn2;
}





@media all and (max-width: 1400px) {
    #main_nav.open {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
        width: 50%;
    }

    #main_nav.open {
    }
}