@import url("https://fonts.googleapis.com/css?family=Eczar:800|Unlock|Work+Sans:200");
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100i");
/*bg color*/
.effect1 {
    background-color: #C1605C;
}

.effect2 {
    background-color: #AB5772;
}

.effect3 {
    background-color: #88557E;
}

.effect4 {
    background-color: #61547C;
}

.effect5 {
    background-color: #40506E;
}

.effect6 {
    background-color: #AB5772;
}

/*!*General stuff---------------------*!*/
/*body, body * {*/
/*    margin: 0;*/
/*    color: #fff;*/
/*}*/

/*.wrap {*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*!*}*!*/
/*.wrap div {*/
/*    width: 100vw;*/
/*    height: 8.33vh;*/
/*    float: left;*/
/*    position: relative;*/
/*    text-align: center;*/
/*}*/
.wrap div.effect1, .wrap div.effect2 {
    font-family: 'Unlock', cursive;
}
.wrap div.effect3, .wrap div.effect4 {
    font-family: 'Eczar', serif;
}
.wrap div.effect5 {
    font-family: 'Work Sans', sans-serif;
}
.wrap div.effect6 {
    font-family: 'Alegreya Sans SC', sans-serif;
}

/*Animation text---------------------*/
/* {effect1} */
.text1 {
    position: relative;
    display: block;
    height: 100%;
}
.text1 span {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

/* {effect2} */
.text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* {effect3} */
.text3 {
    position: absolute;
    top: 30%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 0;
    overflow: hidden;
}
.text3 span {
    display: inline-block;
    color: #8b0000;
}

/* {effect4} */
.effect4 {
    overflow: hidden;
}
.effect4 .text4 {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.effect4 .text4 span {
    display: inline-block;
}

/* {effect5} */
.text5 {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    letter-spacing: 0.5em;
}
.text5 span {
    display: inline-block;
}

/* {effect6} */
.text6 {
    position: absolute;
    top: 30%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    width: auto;
    height: 2em;
}
.text6 span {
    display: inline-block;
}
.text6 span.line {
    width: 100%;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
}
.text6 span.text, .text6 span.icon {
    padding: 10px 5px;
    color: #fff;
}