/* BEGIN - SPECIFIC RULES */
html, body {
    background-color: #000;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

.loader-overall-wrapper,
.bg-image-holder {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.loader-overall-wrapper {
    z-index: 4;
    background-color: #170a59;
}

.bg-image-holder {
    z-index: 2;
    background: #f48d9e url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/constellation.jpg');
    background-size: cover;
}

.spinner {
    width: 40px;
    height: 40px;
    position: relative;
    top: calc((100% - 40px) / 2);
    left: calc((100% - 40px) / 2);
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #b0a7d6;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    -moz-animation: sk-bounce 2.0s infinite ease-in-out;
    -ms-animation: sk-bounce 2.0s infinite ease-in-out;
    -o-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce-2 {
    -webkit-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
    -ms-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container-overall {
    position: relative;
    z-index: 3;
}

.content-wrapper {
    background: #8377b7;
    background: #423898;
    background: #f48d9e;
    background: #170a59;
    height: 80%;
    position: relative;
    top: 10%;
    box-shadow: 12px 17px 56px rgba(0, 0, 0, .5);
    box-shadow: 25px 35px 50px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.importance-1 {
    font-size: 16px;
}

.importance-3 {
    font-size: 20px;
}

.importance-6 {
    font-size: 30px;
}

.importance-10 {
    font-size: 65px;
}

.line-2,
.line-3 {
    font-family: 'Quicksand', sans-serif;
}

.line-2 {
    text-transform: uppercase;
    margin: 0 auto 30px;
}

.line-3 {
    margin: 20px auto;
}

.line-4 {
    margin: 10px auto 80px;
}

.line-5 {
    margin: 0 20px 20px;
}

.line-6 {
    margin-top: 10px;
}

.social-item {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 40px;
    background-repeat: no-repeat;
    background-size: contain;
}

.social-item:last-child {
    margin-right: 0;
}

.social-item.facebook {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-fb.png');
}

.social-item.linkedin {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-linkedin.png');
    width: 22px;
    height: 22px;
}

.social-item.instagram {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-instagram.png');
    width: 18x;
    height: 18px;
}

.social-item.pinterest {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-pinterest.png');
}

.social-item.mail {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-mail.png');
}

.interest-item-wrapper {
    display: inline-block;
    margin-right: 25px;
    margin-bottom: 15px;
    position: relative;
}

.interest-item-wrapper:last-child {
    margin-right: 0;
}

.interest-item-wrapper.move-up {
    -webkit-animation: move-up 1.5s 1 ease-in-out;
    -moz-animation: move-up 1.5s 1 ease-in-out;
    -ms-animation: move-up 1.5s 1 ease-in-out;
    -o-animation: move-up 1.5s 1 ease-in-out;
    animation: move-up 1.5s 1 ease-in-out;
    
    -webkit-animation-direction: alternate-reverse;
    -moz-animation-direction: alternate-reverse;
    -ms-animation-direction: alternate-reverse;
    -o-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

.interest-item-wrapper.development.move-up {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -ms-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.interest-item-wrapper.vr.move-up {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

.interest-item-wrapper.animation.move-up {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.interest-item-wrapper .interest-item-icon,
.interest-item-wrapper .interest-item-text {
    margin: 0 auto;
}

.interest-item-wrapper .interest-item-text {
    padding-top: 10px;
    font-weight: 500;
}

.interest-item-wrapper .interest-item-icon {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
}

.interest-item-wrapper .interest-item-icon.icon-design {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-design.png');
}

.interest-item-wrapper .interest-item-icon.icon-development {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-development.png');
    width: 60px;
    height: 60px;
    position: relative;
    /*top: 10px;*/
}

.interest-item-wrapper .interest-item-icon.icon-animation {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-animation.png');
    position: relative;
    /*top: 5px;*/
}

.interest-item-wrapper .interest-item-icon.icon-vr {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-vr.png');
}

.interest-item-wrapper.development .interest-item-text {
    position: relative;
    top: -10px;
    top: -15px;
}

.interest-item-wrapper.design .interest-item-text {
    position: relative;
    top: -3px;
}

.socials-wrapper-vertical {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.socials-wrapper-vertical .social-item {
    display: block;
    width: 12px;
    height: 12px;
}

.socials-wrapper-vertical .social-item {
    margin-bottom: 15px;
    margin-right: 0;
}

.socials-wrapper-vertical .social-item:last-child {
    margin-bottom: 0;
}

.centered-circle {
    width: 450px;
    height: 450px;
    position: absolute;
    top: calc((100% - 450px) / 2);
    left: calc((100% - 450px) / 2);
    border-radius: 50%;
}

.centered-circle.scale-up {
    -webkit-animation: scale-up 1.0s 1 ease-in-out;
    -moz-animation: scale-up 1.0s 1 ease-in-out;
    -ms-animation: scale-up 1.0s 1 ease-in-out;
    -o-animation: scale-up 1.0s 1 ease-in-out;
    animation: scale-up 1.0s 1 ease-in-out;
}

/* END - SPECIFIC RULES */

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

/* BEGIN - HELPER RULES */
.hidden-element {
    display: none;
}

.img-refactoring {
    display: block;
    max-height: 100%;
    width: auto;
}

.canvas-positioning {
    position: relative;
    width: 100%;
    height: 100%;
}

.table-element {
    width: 100%;
    height: 100%;
    display: table;
}

.vertical-aligned-element {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.no-border-radius {
    border-radius: 0;
}

.full-height {
    height: 100%;
}

.full-width {
    width: 100%;
}

.txt-uppercase {
    text-transform: uppercase;
}

.t-centered {
    text-align: center;
}
/* END - HELPER RULES */

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

/* BEGIN - THEME RULES */
.color-white {
    color: #fff;
}

.bg-white {
    background-color: #fff;
}

.color-pink {
    color: #f48d9e;
}

.bg-pink {
    background-color: #f48d9e;
}

.color-lilla {
    color: #b0a7d6;
}

.bg-lilla {
    background-color: #b0a7d6;
}

.color-dark-brown {
    color: #a2776b;
}

.bg-dark-brown {
    background-color: #a2776b;
}

.color-pinky-red {
    color: #ec475c;
}

.bg-pinky-red {
    background-color: #ec475c;
}

.color-red {
    color: #e60b23;
}

.bg-red {
    background-color: #e60b23;
}
/* END - THEME RULES */

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

/* BEGIN - THEME RED */
.centered-circle.theme-red {
    background-color: #fff;
}

.container-overall.theme-red .content-wrapper {
    background: #fff;
    color: #e60b23;
}

.container-overall.theme-red .interest-item-text {
    color: #e60b23;
}

.container-overall.theme-red .interest-item-wrapper .interest-item-icon.icon-design {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-design.png');
}

.container-overall.theme-red .interest-item-wrapper .interest-item-icon.icon-development {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-development.png');
}

.container-overall.theme-red .interest-item-wrapper .interest-item-icon.icon-vr {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-vr.png');
}

.container-overall.theme-red .interest-item-wrapper .interest-item-icon.icon-animation {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-animation.png')
}

.container-overall.theme-red .social-item.mail { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-mail.png')
}

.container-overall.theme-red .social-item.facebook { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-fb.png')
}

.container-overall.theme-red .social-item.linkedin { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-linkedin.png')
}

.container-overall.theme-red .social-item.instagram { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-instagram.png')
}

.container-overall.theme-red .social-item.pinterest { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-red/icon-pinterest.png')
}

.container-overall.theme-red .line-3 {
    color: #000; 
}
/* END - THEME RED */

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

/* BEGIN - THEME NIGHT-OUT */
.centered-circle.theme-night-out {
    background-color: #000;
}

.container-overall.theme-night-out .content-wrapper {
    background: #000;
    color: #a2776b;
}

.container-overall.theme-night-out .interest-item-text {
    color: #a2776b;
}

.container-overall.theme-night-out .interest-item-wrapper .interest-item-icon.icon-design {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-design.png')
}

.container-overall.theme-night-out .interest-item-wrapper .interest-item-icon.icon-development {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-development.png')
}

.container-overall.theme-night-out .interest-item-wrapper .interest-item-icon.icon-vr {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-vr.png')
}

.container-overall.theme-night-out .interest-item-wrapper .interest-item-icon.icon-animation {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-animation.png')
}

.container-overall.theme-night-out .social-item.mail { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-mail.png')
}

.container-overall.theme-night-out .social-item.facebook { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-fb.png')
}

.container-overall.theme-night-out .social-item.linkedin { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-linkedin.png')
}

.container-overall.theme-night-out .social-item.instagram { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-instagram.png')
}

.container-overall.theme-night-out .social-item.pinterest { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-night-out/icon-pinterest.png')
}

.container-overall.theme-night-out .line-3 {
    color: #ffd200; 
}
/* END - THEME NIGHT-OUT */

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

/* BEGIN - THEME PURPLE-RAIN */
.centered-circle.theme-purple-rain {
    background-color: #170a59;
}

.container-overall.theme-purple-rain .content-wrapper {
    background: #170a59;
    color: #b0a7d6;
}

.container-overall.theme-purple-rain .interest-item-text {
    color: #b0a7d6;
}

.container-overall.theme-purple-rain .interest-item-wrapper .interest-item-icon.icon-design {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-design.png')
}

.container-overall.theme-purple-rain .interest-item-wrapper .interest-item-icon.icon-development {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-development.png')
}

.container-overall.theme-purple-rain .interest-item-wrapper .interest-item-icon.icon-vr {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-vr.png')
}

.container-overall.theme-purple-rain .interest-item-wrapper .interest-item-icon.icon-animation {
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-animation.png')
}

.container-overall.theme-purple-rain .social-item.mail { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-mail.png')
}

.container-overall.theme-purple-rain .social-item.facebook { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-fb.png')
}

.container-overall.theme-purple-rain .social-item.linkedin { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-linkedin.png')
}

.container-overall.theme-purple-rain .social-item.instagram { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-instagram.png')
}

.container-overall.theme-purple-rain .social-item.pinterest { 
    background-image: url('http://www.roxpopescu.com/assets/themes/theme-purple-rain/icon-pinterest.png')
}

.container-overall.theme-purple-rain .line-3 {
    color: #ec475c; 
}
/* END - THEME PURPLE-RAIN */

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

/* BEGIN - KEYFRAMES */
@-webkit-keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0);
    }
    50% {
        -webkit-transform: scale(1.0);
    }
}

@-moz-keyframes sk-bounce {
    0%, 100% {
        -moz-transform: scale(0.0);
    }
    50% {
        -moz-transform: scale(1.0);
    }
}

@-ms-keyframes sk-bounce {
    0%, 100% {
        -ms-transform: scale(0.0);
    }
    50% {
        -ms-transform: scale(1.0);
    }
}

@-o-keyframes sk-bounce {
    0%, 100% {
        -o-transform: scale(0.0);
    }
    50% {
        -o-transform: scale(1.0);
    }
}

@keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0);
        -moz-transform: scale(0.0);
        -ms-transform: scale(0.0);
        -o-transform: scale(0.0);
        transform: scale(0.0);
    }
    50% {
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
        transform: scale(1.0);
    }
}

@-webkit-keyframes scale-up {
    0% {
        -webkit-transform: scale(0.0);
    }
    100% {
        -webkit-transform: scale(3.0);
    }
}

@-moz-keyframes scale-up {
    0% {
        -moz-transform: scale(0.0);
    }
    100% {
        -moz-transform: scale(3.0);
    }
}

@-ms-keyframes scale-up {
    0% {
        -ms-transform: scale(0.0);
    }
    100% {
        -ms-transform: scale(3.0);
    }
}

@-o-keyframes scale-up {
    0% {
        -o-transform: scale(0.0);
    }
    100% {
        -o-transform: scale(3.0);
    }
}

@keyframes scale-up {
    0% {
        -webkit-transform: scale(0.0);
        -moz-transform: scale(0.0);
        -ms-transform: scale(0.0);
        -o-transform: scale(0.0);
        transform: scale(0.0);
    }
    100% {
        -webkit-transform: scale(3.0);
        -moz-transform: scale(3.0);
        -ms-transform: scale(3.0);
        -o-transform: scale(3.0);
        transform: scale(3.0);
    }
}

@-webkit-keyframes move-up {
    0% {
        top: 0;
    }
    100% {
        top: -10px;
    }
}

@-moz-keyframes move-up {
    0% {
        top: 0;
    }
    100% {
        top: -10px;
    }
}

@-ms-keyframes move-up {
    0% {
        top: 0;
    }
    100% {
        top: -10px;
    }
}

@-o-keyframes move-up {
    0% {
        top: 0;
    }
    100% {
        top: -10px;
    }
}

@keyframes move-up {
    0% {
        top: 0;
    }
    100% {
        top: -10px;
    }
}
/* END - KEYFRAMES */

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

/* BEGIN - MEDIA QUERIES */
@media only screen and (max-width: 992px) {
    .line-2 {
        margin: 0 auto;
    }
    
    .line-3 {
        margin: 0 auto 50px;
    }
}

@media only screen and (max-width: 768px) {
    .importance-10 {
        font-size: 50px;
    }
    
    .importance-6 {
        font-size: 25px;
    }
}

@media only screen and (max-width: 575px) {
    .importance-10 {
        font-size: 40px;
    }
    
    .line-2 {
        margin-top: 10px;
    }
    
    .line-3 {
        margin-bottom: 25px;
    }
    
    .line-4 {
        margin-bottom: 15px;
    }
    
    .line-5 {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 315px) {
    .line-2,
    .line-5 {
        display: none;
    }
    
    .importance-6 {
        font-size: 22px;
    }
    
    .importance-3 {
        font-size: 14px;
    }
    
    .interest-item-wrapper .interest-item-icon,
    .interest-item-wrapper .interest-item-icon.icon-development {
        width: 40px;
        height: 40px;
    }
    
    .line-6 {
        margin-top: 40px;
    }
    
    .social-item,
    .social-item.linkedin,
    .social-item.instagram {
        width: 12px;
        height: 12px;
    }
}

@media only screen and (max-width: 992px) and (max-height: 667px) {
    .line-4 {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 575px) and (max-height: 667px) {
    .line-3 {
        margin-bottom: 15px;
    }
    
    .line-4 {
        margin-bottom: 5px;
    }
    
    .interest-item-wrapper {
        margin-bottom: 5px;
    }
    
    .interest-item-wrapper .interest-item-icon {
        width: 35px;
        height: 35px;
    }
    
    .interest-item-wrapper .interest-item-icon.icon-development {
        width: 50px;
        height: 50px;
    }
    
    .interest-item-wrapper .interest-item-text {
        font-size: 16px;
    }
}

@media only screen and (max-height: 655px) {
    .importance-1 {
        font-size: 12px;
    }
}

@media only screen and (max-height: 610px) {
    .line-5 {
        display: none;
    }   
}

@media only screen and (max-height: 585px) {
     .line-6 {
        display: none;
    }
    
    .socials-wrapper-vertical {
        display: block;
    }
}

@media only screen and (max-height: 576px) {
    .line-3 {
        margin-bottom: 15px;
    }
    
    .interest-item-wrapper {
        margin-bottom: 0;
    }
    
    .interest-item-wrapper .interest-item-icon {
        width: 35px;
        height: 35px;
    }
    
    .interest-item-wrapper .interest-item-icon.icon-development {
        width: 50px;
        height: 50px;
    }
    
    .interest-item-wrapper .interest-item-text {
        font-size: 16px;
    }
}

/* END - MEDIA QUERIES */

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