@charset "utf-8";

/* 
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) and (max-width: 2000px) {
    
}

@media (max-width: 1200px) {
    .header-text-directory {
        top: 38px;
        left: 0px;
        font-size: .8rem;
    }
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {

}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {

}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

@media (max-width: 800px) {
    .header-text-directory {
        top: 38px;
        left: 0px;
        font-size: .7rem;
    }

    .content-text-directory {
        bottom: 0px;
        font-size: .95rem;
        opacity: 1;
    }
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
    
}

@media (max-width: 767px) {
    .content-title {
        margin-top: 0rem;
        margin-bottom: 2.8rem;
    }
}

@media (max-width: 575px) {
    #cnt-section-welcome-header-text > h1 {
        font-size: 2.25rem;
    }
    
    #cnt-section-welcome-header-text > h3 {
        font-size: 1.50rem;
    }

    .welcome-title, .content-title {
        font-size: 2rem;
    }

    .content-welcome-text {
        font-size: 1.3rem;
    }

    .welcome-title, .content-title {
        font-size: 1.75rem;
        letter-spacing: .325rem;
    }

    .content-text {
        font-size: 1.25rem;
        letter-spacing: 0.03rem;
    }

    .phase-info-content, .phase-info-content-2 {
        font-size: .98rem;
    }

    .phase-info-title {
        font-size: 1.35rem;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
*/
@media (min-width: 321px) and (max-width: 480px) {

}

@media (max-width: 480px) {
    .content-title {
        margin-top: 0rem;
        margin-bottom: 2rem;
    }
}