@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,900);
@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

.banners .text-layer.opensans { font-family: 'Open Sans', sans-serif; }
.banners .text-layer.lato { font-family: 'Lato', sans-serif; }
.banners .text-layer.josefin { font-family: 'Josefin Slab', serif; }
.banners .text-layer.raleway { font-family: 'Raleway', sans-serif; }
.banners .text-layer.lobster { font-family: 'Lobster', cursive; }
.banners .text-layer.abril { font-family: 'Abril Fatface', cursive; }
.banners .text-layer.monsterrat { font-family: 'Montserrat', sans-serif; }
.banners .text-layer.fjalla { font-family: 'Fjalla One', sans-serif; }
.banners .text-layer.sigmar { font-family: 'Sigmar One', cursive; }
.banners .text-layer.pacifico { font-family: 'Pacifico', cursive; }

.banners .text-layer {
    padding: 10px;
    z-index: 200;
    position: relative;
    /*margin-top: -25%;*/
    width: 40%;
}

.banners .text-layer.center {
    float: left;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: -25%;
}

.banners .text-layer.top-center {
    float: left;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: -45%;
}

.banners .text-layer.bottom-center {
    float: left;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: -10%;
}

.banners .text-layer.center.large {
    margin-top: -25%;
}

.banners .text-layer.left {
    float: left;
    margin-left: 2%;
    margin-top: -25%;
}

.banners .text-layer.left.large {
    float: left;
    margin-left: 2%;
    margin-top: -28%;
}


.banners .text-layer.top-left {
    float: left;
    margin-left: 2%;
    margin-top: -45%;
}

.banners .text-layer.bottom-left {
    float: left;
    margin-left: 2%;
    margin-top: -10%;
}

.banners .text-layer.right {
    float: right;
    margin-right: 2%;
    margin-top: -25%;
}

.banners .text-layer.top-right {
    float: right;
    margin-right: 2%;
    margin-top: -45%;
}

.banners .text-layer.bottom-right {
    float: right;
    margin-right: 2%;
    margin-top: -10%;
}

.banners .text-layer.right.large {
    margin-top: -28%;
}

.banners .text-layer.txt_center {
    text-align: center;
}

.banners .text-layer.txt_left {
    text-align: left;
}

.banners .text-layer.txt_right {
    text-align: right;
}

.banners .text-layer a, .banners .text-layer a:hover {
    text-decoration: none!important;
    text-transform: none;
}

@media (min-width: 1600px) {
    .banners .text-layer.small {
        font-size: 32px;
    }

    .banners .text-layer.medium {
        font-size: 42px;
    }

    .banners .text-layer.large {
        font-size: 50px;
    }
}

@media (min-width: 1224px) and (max-width: 1599px) {
    .banners .text-layer.small {
        font-size: 20px;
    }

    .banners .text-layer.medium {
        font-size: 28px;
    }

    .banners .text-layer.large {
        font-size: 35px;
    }
}

@media (min-width: 481px) and (max-width: 1223px) {
    .banners .text-layer.small {
        font-size: 16px;
    }

    .banners .text-layer.medium {
        font-size: 20px;
    }

    .banners .text-layer.large {
        font-size: 28px;
    }
}

@media screen and (max-width: 480px) {
    .banners .text-layer.right, .banners .text-layer.left, .banners .text-layer.center {
        margin-top: -30%;
    }
}