@import url('../font/font.css');

body {
    background: url(../img/background.png);
    font-family: 'MisoRegular';
}

.devider-top{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    min-height: 5px;
    background: #348CD6;
}

.devider-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    min-height: 15px;
    border-top: 5px solid #E44D26;
    background: #222222;
}

.container{
  -webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    -moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    -ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    -o-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
    animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}

.smart-landing-wrap{
  margin-top: 5px;
  font-family: 'MisoBold';
}

.wrap-left, .wrap-right{
  overflow: hidden;
}

.wrap-left{
    color: #E44D26;
}

.wrap-right{
    color: #348CD6;
}

.smart-landing-wrap span{
  opacity: 0;
}
.wrap-left .rw-mid, .wrap-right .rw-mid{
  opacity: 1;
}

.wrap-left h1 span{
  display: block;
  text-align: right;
  line-height: 60px;
}
.wrap-right h1 span{
  display: block;
  line-height: 60px;
  text-align: left;
}
.rw-top{
  font-size: .7em;
} 
.rw-mid{
  font-size: 4em;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px;
} 
.rw-bottom{
  font-size: .7em;
} 

/* left animation */
.wrap-left .rw-top{
  -webkit-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    -moz-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    -ms-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    -o-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
    animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}

.wrap-left .rw-mid{
  -webkit-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    -moz-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    -ms-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    -o-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
    animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}

.wrap-left .rw-bottom{
  -webkit-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    -moz-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    -ms-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    -o-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
    animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
}

/* right animation */
.wrap-right .rw-top{
  -webkit-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
    -moz-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
    -ms-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
    -o-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
    animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
}
.wrap-right .rw-mid{
  -webkit-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
    -moz-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
    -ms-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
    -o-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
    animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
}
.wrap-right .rw-bottom{
  -webkit-animation: slideRight 0.5s ease-in 2.8s backwards, fadeOut 1s linear 4.6s backwards;
    -moz-animation: slideRight 0.5s ease-in 2.8s backwards, fadeOut 1s linear 4.6s backwards;
    -ms-animation: slideRight 0.5s ease-in 2.8s backwards, fadeOut 1s linear 4.6s backwards;
    -o-animation: slideRight 0.5s ease-in 2.8s backwards, fadeOut 1s linear 4.6s backwards;
    animation: slideRight 0.5s ease-in 2.8s backwards, fadeOut 1s linear 4.6s backwards;
}

.wrap-full .full-left{
    padding-bottom: 3em;
  text-align: right;
  line-height: 10px;
}


.wrap-full a{
    margin-left: 20px;
    -webkit-animation: zoomIn 0.7s ease-in-out 6s backwards;
    -moz-animation: zoomIn 0.7s ease-in-out 6s backwards;
    -ms-animation: zoomIn 0.7s ease-in-out 6s backwards;
    -o-animation: zoomIn 0.7s ease-in-out 6s backwards;
    animation: zoomIn 0.7s ease-in-out 6s backwards;
}

.appear{
    -webkit-animation: fadeIn 1s linear 5.6s backwards;
    -moz-animation: fadeIn 1s linear 5.6s backwards;
    -ms-animation: fadeIn 1s linear 5.6s backwards;
    -o-animation: fadeIn 1s linear 5.6s backwards;
    animation: fadeIn 1s linear 5.6s backwards;
}


/* image hover style*/
.thumb-container{
    margin-top: 40px;
}
.smart-thumb {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
    background: #348CD6;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.smart-thumb *{
    text-align: center;
    color: #eee;
    margin: auto;
}

.smart-thumb h2{
    padding-top: 20px;
}

.smart-thumb p{
    margin: auto 15px auto 15px;
    border-top: 1px dotted #eee;
}

.smart-thumb a:hover{
    text-decoration: none;
}

.smart-thumb:hover{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #E44D26;

    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1);
    opacity: 1;
    
}

.smart-thumb:hover > *{
    color: #eee;
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .smart-landing-wrap span{
      opacity: 1;
    }
    .wrap-left h1 span{
      display: block;
      text-align: right;
      line-height: 60px;
    }
    .wrap-right h1 span{
      display: block;
      line-height: 60px;
      text-align: left;
    }
    .rw-top{
      font-size: .5em;
    } 
    .rw-mid{
        font-size: 2em;
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 15px;
    } 
    .rw-bottom{
        font-size: .5em;
    }
    /* left animation */
    .wrap-left .rw-top{
        -webkit-animation: slideLeft 0.5s ease-in 0.6s backwards;
        -moz-animation: slideLeft 0.5s ease-in 0.6s backwards;
        -ms-animation: slideLeft 0.5s ease-in 0.6s backwards;
        -o-animation: slideLeft 0.5s ease-in 0.6s backwards;
        animation: slideLeft 0.5s ease-in 0.6s backwards;
    }

    .wrap-left .rw-mid{
        -webkit-animation: slideLeft 0.5s ease-in 1s backwards;
        -moz-animation: slideLeft 0.5s ease-in 1s backwards;
        -ms-animation: slideLeft 0.5s ease-in 1s backwards;
        -o-animation: slideLeft 0.5s ease-in 1s backwards;
        animation: slideLeft 0.5s ease-in 1s backwards;
    }

    .wrap-left .rw-bottom{
        -webkit-animation: slideLeft 0.5s ease-in 1.4s backwards;
        -moz-animation: slideLeft 0.5s ease-in 1.4s backwards;
        -ms-animation: slideLeft 0.5s ease-in 1.4s backwards;
        -o-animation: slideLeft 0.5s ease-in 1.4s backwards;
        animation: slideLeft 0.5s ease-in 1.4s backwards;
    }

    /* right animation */
    .wrap-right .rw-top{
            -webkit-animation: slideRight 0.5s ease-in 2s backwards;
        -moz-animation: slideRight 0.5s ease-in 2s backwards;
        -ms-animation: slideRight 0.5s ease-in 2s backwards;
        -o-animation: slideRight 0.5s ease-in 2s backwards;
        animation: slideRight 0.5s ease-in 2s backwards;
    }
    .wrap-right .rw-mid{
        -webkit-animation: slideRight 0.5s ease-in 2.4s backwards;
        -moz-animation: slideRight 0.5s ease-in 2.4s backwards;
        -ms-animation: slideRight 0.5s ease-in 2.4s backwards;
        -o-animation: slideRight 0.5s ease-in 2.4s backwards;
        animation: slideRight 0.5s ease-in 2.4s backwards;
    }
    .wrap-right .rw-bottom{
        -webkit-animation: slideRight 0.5s ease-in 2.8s backwards;
        -moz-animation: slideRight 0.5s ease-in 2.8s backwards;
        -ms-animation: slideRight 0.5s ease-in 2.8s backwards;
        -o-animation: slideRight 0.5s ease-in 2.8s backwards;
        animation: slideRight 0.5s ease-in 2.8s backwards;
    }

    /* image hover style*/
    .thumb-container{
        margin-top: 40px;
    }
    .smart-thumb {
        margin: auto;
        width: 90%;
        height: 160px;
        border-radius: 2%;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        cursor: default;
        background: #348CD6;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .smart-thumb *{
        text-align: center;
        color: #eee;
        margin: auto;
    }

    .smart-thumb h2{
        padding-top: 30px;
    }

    .smart-thumb p{
        margin: auto 15px auto 15px;
        border-top: 1px dotted #eee;
    }

    .smart-thumb a:hover{
        text-decoration: none;
    }

    .smart-thumb:hover{
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        background: #E44D26;

        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1);
        opacity: 1;
        
    }

    .smart-thumb:hover > *{
        color: #eee;
    }

}

/* Landscape phones and down */
@media (max-width: 480px) {
    

}

/* animation */
@-webkit-keyframes appear{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-moz-keyframes appear{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


/* animation */
@keyframes open{
    0%{
        transform: scale(1,0);
    }
    100%{
        transform: scale(1,1);
    }
}
@keyframes squeeze{
    0%{
        height: 400px;
    }
    100%{
        height: 120px;
    }
}
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes slideLeft{
    0%{
        transform: translateX(120%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes slideRight{
    0%{
        transform: translateX(-120%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes moveUp{
    0%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(-50px);
    }

}
@keyframes zoomIn{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}


/* Safari and Chrome */
@-webkit-keyframes open{
    0%{
        -webkit-transform: scale(1,0);
    }
    100%{
        -webkit-transform: scale(1,1);
    }
}
@-webkit-keyframes squeeze{
    0%{
        height: 400px;
    }
    100%{
        height: 120px;
    }
}
@-webkit-keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes slideLeft{
    0%{
        -webkit-transform: translateX(120%);
    }
    100%{
        -webkit-transform: translateX(0%);
    }
}
@-webkit-keyframes slideRight{
    0%{
        -webkit-transform: translateX(-120%);
    }
    100%{
        -webkit-transform: translateX(0%);
    }
}
@-webkit-keyframes moveUp{
    0%{
        -webkit-transform: translateY(0px);
    }
    100%{
        -webkit-transform: translateY(-50px);
    }

}
@-webkit-keyframes zoomIn{
    0%{
        -webkit-transform: scale(0);
    }
    100%{
        -webkit-transform: scale(1);
    }
}
/* Firefox */
@-moz-keyframes open{
    0%{
        -moz-transform: scale(1,0);
    }
    100%{
        -moz-transform: scale(1,1);
    }
}
@-moz-keyframes squeeze{
    0%{
        height: 400px;
    }
    100%{
        height: 120px;
    }
}
@-moz-keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-moz-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-moz-keyframes slideLeft{
    0%{
        -moz-transform: translateX(120%);
    }
    100%{
        -moz-transform: translateX(0%);
    }
}
@-moz-keyframes slideRight{
    0%{
        -moz-transform: translateX(-120%);
    }
    100%{
        -moz-transform: translateX(0%);
    }
}
@-moz-keyframes moveUp{
    0%{
        -moz-transform: translateY(0px);
    }
    100%{
        -moz-transform: translateY(-50px);
    }

}
@-moz-keyframes zoomIn{
    0%{
        -moz-transform: scale(0);
    }
    100%{
        -moz-transform: scale(1);
    }
}

/* opera */
@-o-keyframes open{
    0%{
        -o-transform: scale(1,0);
    }
    100%{
        -o-transform: scale(1,1);
    }
}
@-o-keyframes squeeze{
    0%{
        height: 400px;
    }
    100%{
        height: 120px;
    }
}
@-o-keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-o-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@-o-keyframes slideLeft{
    0%{
        -o-transform: translateX(120%);
    }
    100%{
        -o-transform: translateX(0%);
    }
}
@-o-keyframes slideRight{
    0%{
        -o-transform: translateX(-120%);
    }
    100%{
        -o-transform: translateX(0%);
    }
}
@-o-keyframes moveUp{
    0%{
        -o-transform: translateY(0px);
    }
    100%{
        -o-transform: translateY(-50px);
    }

}
@-o-keyframes zoomIn{
    0%{
        -o-transform: scale(0);
    }
    100%{
        -o-transform: scale(1);
    }
}