@import url('fonts/fonts.css');
@import url('reset.css');

body {
    background: #EE6633;
    /* ffdd00 */
    font-family: 'MisoRegular','Open Sans','Comfortaa', sans-serif;
    padding-top: 130px;
    padding-bottom: 20px;
}

.clr{
	clear: both;
}

.boxed {
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    padding-left: 20px;
}

h2.boxed {
    font-size: 20px;
    position: relative;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    padding: 5px 20px;
}

p.boxed {
   
    font-size: 16px;
    font-weight: 300;
    color: #003D6B;
}

/* 
.light-box {
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
    -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
    padding: 20px 0;
}

.light-box:hover,
.light-box:focus {
    -webkit-box-shadow: 0px 3px 0px 0px #3dc9b3;
    -moz-box-shadow: 0px 3px 0px 0px #3dc9b3;
    box-shadow: 0px 3px 0px 0px #3dc9b3;
}

.box-hover {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}

.box-hover:hover,
.box-hover:focus {
    transform: translate(0, -15px);
    -webkit-transform: translate(0, -15px);
    -ms-transform: translate(0, -15px);
}
*/


/* ==========================================================================
Team
========================================================================== */

.team img {
    margin-bottom: 40px;
}

ul.social-buttons {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.social-buttons li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

ul.social-buttons li:last-child {
    margin-right: 0;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #262c37;
    display: inline-block;
    color: #FFF;
    font-size: 17px;
    line-height: 40px;
    text-align: center;
}

.social-btn:hover,
.social-btn:focus {
    background: #EE6633;
}

.social {
    margin-top: 25px;
}

/* STARTUP ANIMATION */
.sp-container {
    width: 800px;
    height: 400px;
    position: relative;
    margin: 160px auto 0px auto;
}

.sp-content {
    width: 100%;
    height: 420px;
    position: relative;
    -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;
    animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}

.sp-content:after {
    content: '';
    width: 4px;
    background: #003D6B;
    height: 100%;
    position: absolute;
    left: 50%;
}

.sp-container h2 {
    color: #003D6B;
    /* 003D6B */
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9);
}

.sp-wrap {
    width: 400px;
    padding: 0px 25px;
    height: 100%;
    text-align: right;
    font-size: 70px;
    /* 70 */
    line-height: 80px;
    /* 80 */
    float: left;
    position: relative;
    background: #EE6633;
    /* ffdd00 */
    overflow: hidden;
}

.sp-wrap span {
    display: block;
    background: #EE6633;
    /* ffdd00 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.sp-wrap span.sp-mid {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.sp-container .sp-right h2 {
    color: #fff;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.9);
}

.sp-wrap span.sp-mid {
    font-family: 'MisoBold';
    text-transform: uppercase;
    font-size: 140px;
    line-height: 160px;
    position: relative;
}

.sp-left span.sp-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;
    animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards;
}

.sp-left span.sp-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;
    animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards;
}

.sp-left span.sp-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;
    animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards;
}

.sp-right span {
    text-align: left;
}

.sp-right span.sp-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;
    animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards;
}

.sp-right span.sp-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;
    animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards;
}

.sp-right span.sp-bottom {
    -webkit-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
    -moz-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
    -ms-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
    animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards;
}

.sp-wrap i {
    position: absolute;
    background: #EE6633;
    /* ffdd00 */
    width: 60px;
}

.sp-wrap i:first-child {
    color: #003D6B;
}

.sp-wrap i:last-child {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-animation: fadeOut 1s linear 6s backwards;
    -moz-animation: fadeOut 1s linear 6s backwards;
    -ms-animation: fadeOut 1s linear 6s backwards;
    animation: fadeOut 1s linear 6s backwards;
}

.sp-full {
    position: absolute;
    font-size: 67px;
    top: 142px;
    width: 700px;
    left: 145px;
    -webkit-animation: fadeIn 1s linear 6.6s backwards;
    -moz-animation: fadeIn 1s linear 6.6s backwards;
    -ms-animation: fadeIn 1s linear 6.6s backwards;
    animation: fadeIn 1s linear 6.6s backwards;
}

.sp-full a {
    background: #003D6B;
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 8px;
    padding: 10px 40px;
    display: inline-block;
    font-size: 42px;
    margin-top: 40px;
    -webkit-animation: zoomIn 0.7s ease-in-out 7s backwards;
    -moz-animation: zoomIn 0.7s ease-in-out 7s backwards;
    -ms-animation: zoomIn 0.7s ease-in-out 7s backwards;
    animation: zoomIn 0.7s ease-in-out 7s backwards;
}

.sp-full h2 {
    width: 400px;
    padding: 0px 50px 0px 0px;
    float: left;
    text-align: right;
}

.sp-full a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
}


/**/

@-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(-170px);
    }
}

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


/**/

@-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(-170px);
    }
}

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


/**/

@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(-170px);
    }
}

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