/*src:url('../fonts/codropsicons/codropsicons.eot');*/
/*src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');*/

/*NORMALIZE*/

/*COMPONENTS*/
.component2 {
    position: absolute;
    width: 1300px;
    left: 50%;
    margin-left: -650px;
    top: 0px;
    text-align: center;
}

.grid {
    max-width: 1300px;
    text-align: center;
    display: inline-block;
    padding: 0;
    list-style: none;
    position: relative;
    top: -30px;
}

    .grid li {
        position: relative;
        float: left;
        font-family: 'Roboto';
        font-size: 5em;
        /*font-size: 12em;*/
        /*font-size: 50px;*/
        /*line-height: 1.5;*/
        /*height:auto;*/
        /*max-height: 290px;*/
        text-align: center;
        margin: auto;
        padding: 10px;
        /* Fallback */
        /*width: -webkit-calc(100% / 6);
	width: calc(100% / 6);*/
    }

        /* Common styles for the letters */
        .grid li span {
            display: inline-block;
            /*font-weight: 900;*/
            height: 50px;
            font-weight: 800;
            /*line-height: 1;*/
            position: relative;
            color: hsla(0, 0%, 0%, 0.6);
            -webkit-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 550px;
            -ms-perspective: 550px;
            perspective: 550px;
            z-index: 1;
            margin: auto;
        }

            .grid li span:before,
            .grid li span:after {
                position: absolute;
                content: attr(data-letter);
                line-height: inherit;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                -webkit-transition: all .3s;
                transition: all .3s;
            }

            .grid li span:before {
                text-shadow: none;
                color: hsla(0, 0%, 0%, 0.12);
            }

/* Colors */

/*.ot-letter-left { background: #e74d3c; }*/
.ot-letter-left {
    background: black;
}

    .ot-letter-left span {
        text-shadow: 1px 4px 6px white, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px white;
    }
        /*.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }*/
        /*.ot-letter-left span:after { color: #CECECE; }*/
        .ot-letter-left span:after {
            color: black;
        }
    /*.ot-letter-left span:after { color: #e74d3c; }*/
    /*.ot-letter-left:hover span:after { color: #ea6253; }*/
    /*.ot-letter-right:hover span:after { color: #DBDDDB; }*/
    .ot-letter-left:hover span:after {
        color: white;
    }

/*.ot-letter-right { background: #ea6657; }*/
.ot-letter-right {
    background: white;
}

    .ot-letter-right span {
        text-shadow: 1px 4px 6px #494949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #494949;
    }
        /*.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }*/
        .ot-letter-right span:after {
            color: white
        }
    /*.ot-letter-right span:after { color: #ea6657; }*/
    /*.ot-letter-right:hover span:after { color: #ed7a6e; }*/
    .ot-letter-right:hover span:after {
        color: #DBDDDB;
    }

/*.ot-letter-top { background: #ee7f72; }*/
.ot-letter-top {
    background: white;
}

    .ot-letter-top span {
        text-shadow: 1px 4px 6px #494949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #494949;
    }
        /*.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }*/
        /*.ot-letter-top span:after { color: #ee7f72; }*/
        .ot-letter-top span:after {
            color: white
        }
    /*.ot-letter-top:hover span:after { color: #f09389; }*/
    .ot-letter-top:hover span:after {
        color: #DBDDDB;
    }


/*.ot-letter-bottom { background: #e95949; }*/
.ot-letter-bottom {
    background: white;
}

    .ot-letter-bottom span {
        text-shadow: 1px 4px 6px #494949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #494949;
    }
        /*.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }*/
        /*.ot-letter-bottom span:after { color: #e95949; }*/
        .ot-letter-bottom span:after {
            color: white
        }
    /*.ot-letter-bottom:hover span:after { color: #eb6e60; }*/
    .ot-letter-bottom:hover span:after {
        color: #DBDDDB;
    }


/* Left */
.ot-letter-left span:before,
.ot-letter-left span:after {
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

.ot-letter-left span:before {
    -webkit-transform: scale(1.08,1) skew(0deg,1deg);
    -ms-transform: scale(1.08,1) skew(0deg,1deg);
    transform: scale(1.08,1) skew(0deg,1deg);
}

.ot-letter-left span:after {
    text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
    -webkit-transform: rotateY(-15deg);
    -ms-transform: rotateY(-15deg);
    transform: rotateY(-15deg);
}

.ot-letter-left:hover span:before {
    -webkit-transform: scale(0.85,1) skew(0deg,20deg);
    -ms-transform: scale(0.85,1) skew(0deg,20deg);
    transform: scale(0.85,1) skew(0deg,20deg);
}

.ot-letter-left:hover span:after {
    -webkit-transform: rotateY(-40deg);
    -ms-transform: rotateY(-40deg);
    transform: rotateY(-40deg);
}

/* Right */
.ot-letter-right span:before,
.ot-letter-right span:after {
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

.ot-letter-right span:before {
    -webkit-transform: scale(0.85,1) skew(0deg,1deg);
    -ms-transform: scale(0.85,1) skew(0deg,1deg);
    transform: scale(0.85,1) skew(0deg,1deg);
}

.ot-letter-right span:after {
    text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
    -webkit-transform: rotateY(15deg);
    -ms-transform: rotateY(15deg);
    transform: rotateY(15deg);
}

.ot-letter-right:hover span:before {
    -webkit-transform: scale(0.85,1) skew(0deg,-20deg);
    -ms-transform: scale(0.85,1) skew(0deg,-20deg);
    transform: scale(0.85,1) skew(0deg,-20deg);
}

.ot-letter-right:hover span:after {
    -webkit-transform: rotateY(40deg);
    -ms-transform: rotateY(40deg);
    transform: rotateY(40deg);
}

/* Up */
.ot-letter-top span:before,
.ot-letter-top span:after {
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.ot-letter-top span:before {
    -webkit-transform: scale(1,0.95) skew(-4deg,0deg);
    -ms-transform: scale(1,0.95) skew(-4deg,0deg);
    transform: scale(1,0.95) skew(-4deg,0deg);
}

.ot-letter-top span:after {
    text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
    -webkit-transform: rotateX(-15deg);
    -ms-transform: rotateX(-15deg);
    transform: rotateX(-15deg);
}

.ot-letter-top:hover span:before {
    -webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
    -ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
    transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}

.ot-letter-top:hover span:after {
    -webkit-transform: translateY(-0.035em) rotateX(-40deg);
    -ms-transform: translateY(-0.035em) rotateX(-40deg);
    transform: translateY(-0.035em) rotateX(-40deg);
}

/* Down */
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.ot-letter-bottom span:before {
    -webkit-transform: scale(1,1.05) skew(4deg,0deg);
    -ms-transform: scale(1,1.05) skew(4deg,0deg);
    transform: scale(1,1.05) skew(4deg,0deg);
}

.ot-letter-bottom span:after {
    text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
    -webkit-transform: rotateX(15deg);
    -ms-transform: rotateX(15deg);
    transform: rotateX(15deg);
}

.ot-letter-bottom:hover span:before {
    -webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
    -ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
    transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}

.ot-letter-bottom:hover span:after {
    -webkit-transform: translateY(0.045em) rotateX(40deg);
    -ms-transform: translateY(0.045em) rotateX(40deg);
    transform: translateY(0.045em) rotateX(40deg);
}