.cstitle {
    text-transform: uppercase;
    font-size: 3em;
    color: #ffffff;
}

.cssubtitle {
    margin-top: 10px;;
    font-weight: 200;
    text-transform: none;
    color: white;
}


/*   SUBTITLE  */
@media (max-width: 480px) {
    .cssubtitle {
        font-size:0em;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .cssubtitle {
        font-size:0.8em;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .cssubtitle {
        font-size:1em;
    }
}

@media (min-width: 980px) {
    .cssubtitle {
        font-size:1.2em;
    }
}


/*   TITLE  */
@media (max-width: 480px) {
    .cstitle {
        font-size: 1.4em;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .cstitle {
        font-size: 2em;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .cstitle {
        font-size: 2em;
    }
}

@media (min-width: 980px) {
    .cstitle {
        font-size: 3em;
    }
}



/*  POSITION  */
@media (max-width: 480px) {
    .titleposition {
        position: absolute;
        top: 60%;
        padding: 20px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .titleposition {
        position: absolute;
        top: 40%;
        padding: 20px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .titleposition {
        position: absolute;
        top: 55%;
        padding: 20px;
    }
}

@media (min-width: 980px) {
    .titleposition {
        position: absolute;
        top: 65%;
        padding: 20px;
    }
}