/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    /*font-size: 1.6rem;*/
    /*font-family: "Open Sans", sans-serif;*/
    /*color: #4089a6;*/
    color: #dedede;
    /*background-color: #ffffff;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*body.white*/

a {
    color: #283040;
    text-decoration: none;
}

h1 {
    color: #ffffff;
    margin-bottom: 1em;
    font-size: 2.2rem;
}
@media only screen and (min-width: 768px) {
    h1 {
        font-size: 4.4rem;
        font-weight: 300;
    }
}

/* -------------------------------- 

Patterns - reusable parts of our design

-------------------------------- */
.cd-btn {
    display: inline-block;
    padding: 1.4em 1.6em;
    margin-bottom: 2em;
    border-radius: 50em;
    background-color: #283040;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.no-touch .cd-btn:hover {
    background-color: #323c50;
}
.cd-about .cd-btn {
    background-color: #4089a6;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
body::after, body::before {
    /* these are the 2 half blocks which cover the content once the animation is triggered */
    z-index: 3;
    content: '';
    height: 50vh;
    width: 100%;
    position: fixed;
    left: 0;
    /*background-color: #ffffff;*/
    /*z-index: 1;*/
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    -moz-transition: -moz-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;
}
body::before {
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
body::after {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

body.white-theme::after, body.white-theme::before {
    background-color: #ffffff;
}
body.black-theme::after, body.black-theme::before {
    background-color: #000000;
}
body.page-is-changing::after, body.page-is-changing::before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}

main {
    height: 100vh;
    padding: 10px;
    text-align: center;
}
main .cd-main-content {
    position: relative;
    height: calc(100vh - 20px);
}
main .cd-main-content > div {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
main .cd-main-content::after, main .cd-main-content::before {
    /* these are the 2 gradient overlay at the top and bottom of the .cd-main-content - to indicate that you can scroll */
    content: '';
    position: absolute;
    left: 0;
    height: 50px;
    width: 100%;
}
main .cd-main-content::before {
    top: 0;
}
main .cd-main-content::after {
    bottom: 0;
}
main .cd-main-content.cd-index {
    /* .cd-main-content basic style - index page */
    background-color: #4089a6;
    /* vertically center its content */
    display: table;
    width: 100%;
}
main .cd-main-content.cd-index > div {
    /* vertically center the content inside the .cd-index */
    display: table-cell;
    vertical-align: middle;
}
main .cd-main-content.cd-index::after {
    background-color: rgba(64, 137, 166, 0);
    background-image: -webkit-linear-gradient(bottom, #4089a6, rgba(64, 137, 166, 0));
    background-image: linear-gradient(to top,#4089a6, rgba(64, 137, 166, 0));
}
main .cd-main-content.cd-index::before {
    background-color: rgba(64, 137, 166, 0);
    background-image: -webkit-linear-gradient(top, #4089a6, rgba(64, 137, 166, 0));
    background-image: linear-gradient(to bottom,#4089a6, rgba(64, 137, 166, 0));
}
main .cd-main-content.cd-about {
    /* .cd-main-content basic style - about page */
    background-color: #283040;
}
main .cd-main-content.cd-about > div {
    padding-top: 50px;
}
main .cd-main-content.cd-about::after {
    background-color: rgba(40, 48, 64, 0);
    background-image: -webkit-linear-gradient(bottom, #283040, rgba(40, 48, 64, 0));
    background-image: linear-gradient(to top,#283040, rgba(40, 48, 64, 0));
}
main .cd-main-content.cd-about::before {
    background-color: rgba(40, 48, 64, 0);
    background-image: -webkit-linear-gradient(top, #283040, rgba(40, 48, 64, 0));
    background-image: linear-gradient(to bottom,#283040, rgba(40, 48, 64, 0));
}
main p {
    width: 90%;
    max-width: 768px;
    margin: 3em auto;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #535966;
    text-align: left;
}
@media only screen and (min-width: 768px) {
    main {
        padding: 20px;
    }
    main .cd-main-content {
        height: calc(100vh - 40px);
    }
    main.cd-index > div {
        padding-top: 200px;
    }
    main.cd-index > div {
        padding-top: 50px;
    }
    main p {
        font-size: 1.8rem;
        line-height: 2;
    }
}

.cd-cover-layer {
    /* layer that covers the content when the animation is triggered */
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    opacity: 0;
    visibility: hidden;
    background-color: #dedede;
    /*background-color: #4089a6;*/
    -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
    -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
    transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
}
.cd-about .cd-cover-layer {
    background-color: #283040;
}
.page-is-changing .cd-cover-layer {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}
@media only screen and (min-width: 768px) {
    .cd-cover-layer {
        height: calc(100% - 40px);
        width: calc(100% - 40px);
    }
}

.cd-loading-bar {
    /* this is the loding bar - visible while switching from one page to the following one */
    position: fixed;
    z-index: 3;
    left: 50%;
    top: 50%;
    height: 7px;
    width: 90%;
    background-color: #fe4486;
    /*background-color: #dedede;*/
    /*background-color: #4089a6;*/
    visibility: hidden;
    -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
    -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
    transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.cd-about .cd-loading-bar {
    background-color: #283040;
}
.cd-about .cd-loading-bar::before {
    background-color: #4089a6;
}
.cd-loading-bar::before {
    /* this is the progress bar inside the loading bar */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #283040;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
.page-is-changing .cd-loading-bar {
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
    -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
    transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}
.page-is-changing .cd-loading-bar::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
    -moz-transition: -moz-transform 0.8s 0.8s ease-in;
    transition: transform 0.8s 0.8s ease-in;
}
@media only screen and (min-width: 768px) {
    .cd-loading-bar {
        width: calc(100% - 40px);
    }
}


.added-list-right li,.right-main-list .media-object{
    transition: transform 1s;
}
.added-list-right li:hover{    
    transform: translate(3px, 2px);
    zoom: 1.03;
}

.white-theme .added-list-right li:hover .media-object{
    box-shadow: 0px -4px 3px #fdfdfd, -3px -4px 1px grey;
}

.black-theme .added-list-right li:hover .media-object{
    box-shadow: 0px -4px 3px #000000, -3px -4px 1px grey;
}

.added-list-right .right-main-list li {
    margin: 3px 3px 13px 3px;
}