
/*********** RESPONSIVE MEDIA QUERIES **********/

/* 300x250*/
@media screen and (width:300px) and (height:250px)
{
    /* default master size */

}



/* 336x280*/
/*@media screen and (width:336px) and (height:280px)*/
@media screen and (min-width:320px) and (min-height:270px) and (max-height:300px)
{
    .header-layout {position:absolute; left:0px; bottom:0px; width:100%; height:44px; background: #000000;}
    .footer-layout {position:absolute; left:0px; bottom:0px; width:100%; height:44px; background: #000000;}

    .main-copy {font-size:22px; line-height:25px;}

    .copy-align-top {top:20px; bottom:auto;}
    .copy-align-bottom {top:auto; bottom:66px;}

    .sub-copy-align {bottom:49px; top:auto;}

    .cta-container {position:absolute; left:0px; bottom:0px; width:100%; height:44px; text-align:left;}
    .cta-copy {font-size:13px; line-height:13px; padding: 0px 0px 0px 15px;}

    .logo-container {position:absolute; right:15px; bottom:14px; width:76px; height:100px;}
    .logo { position: absolute; width:100%; height:auto;}

    .logo-container {position:absolute; right:0px; bottom:5px; width:68px; height:30px;}
    .logo { position: absolute; width:auto; height:100%;}



}



/* 120x600*/
/*@media screen and (width:120px) and (height:600px)*/
@media screen and (max-width:140px) and (min-height:100px) /*and (max-height:800px)*/
{
    .header-layout {position:absolute; left:0px; top:0px; width:100%; height:32%; background: #000000;}
    .footer-layout {position:absolute; left:0px; bottom:0px; width:100%; height:32%; background: #000000;}

    #img_container {top:32%; height:36%;}
    #copy_container {height:32%; width:92%; margin:0px 4% 0px 4%;}

    .main-copy {font-size:20px; line-height:23px; color: #FFFFFF;}
    .small-copy {font-size:15px;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #000000;}
    .sub-copy-align {bottom:5px; top:auto;}

    .cta-container {position:absolute; left:0px; bottom:13%; width:100%; height:18%; text-align:center;}
    .cta-copy {font-size:14px; line-height:14px; padding: 0px 0px 0px 0px;}

    .logo-container {position:absolute; left:0px; bottom:4%; width:100%; height:14%;}
    .logo {width:98px; height:auto;}


    @media screen and (max-height:450px) and (min-width:90px)
    {
        .cta-container {position:absolute; left:0px; bottom:16%; width:100%; height:16%; text-align:center;}
        .logo-container {position:absolute; left:0px; bottom:2%; width:100%; height:14%;}
        .logo {width:auto; height:100%;}
    }

    @media screen and (max-width:100px) 
    {
        .logo {width:62%; height:auto;}
        .main-copy {font-size:16px; line-height:19px; color:#FFFFFF;}
        .cta-copy {font-size:10px; line-height:10px; padding: 0px 0px 0px 0px;}
    }

    @media screen and (max-height:400px)
    {
        .main-copy {font-size:14px; line-height:16px; color: #FFFFFF;}
        .cta-copy {font-size:12px; line-height:12px; padding: 0px 0px 0px 0px;}
    }

    @media screen and (max-height:300px)
    {
        .main-copy {font-size:12px; line-height:14px; color: #FFFFFF;}
        .cta-copy {font-size:11px; line-height:11px; padding: 0px 0px 0px 0px;}
    }

    @media screen and (max-height:200px)
    {
        .main-copy {font-size:10px; line-height:11px; color: #FFFFFF;}
        .cta-copy {font-size:9px; line-height:9px; padding: 0px 0px 0px 0px;}
    }

}


/* 160x600*/
/*@media screen and (width:160px) and (height:600px)*/
@media screen and (min-width:140px) and (max-width:260px) and (min-height:300px) /*and (max-height:800px)*/
{
    .header-layout {position:absolute; left:0px; top:0px; width:100%; height:32%; background: #000000;}
    .footer-layout {position:absolute; left:0px; bottom:0px; width:100%; height:32%; background: #000000;}

    #img_container {top:32%; height:36%;}
    #copy_container {height:32%; width:90%; margin:0px 5% 0px 5%;}

    .main-copy {font-size:21px; line-height:24px; color:#FFFFFF;}
    .small-copy {font-size:19px;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #FFFFFF;}
    .sub-copy-align {bottom:5px; top:auto;}

    .cta-container {position:absolute; left:0px; bottom:13%; width:100%; height:18%; text-align:center;}
    .cta-copy {font-size:17px; line-height:17px; padding: 0px 0px 0px 0px;}

    .logo-container {position:absolute; left:0px; bottom:4%; width:100%; height:14%;}
    .logo {width:100px; height:auto;}


    @media screen and (max-height:450px)
    {
        .cta-container {position:absolute; left:0px; bottom:16%; width:100%; height:16%; text-align:center;}
        .logo-container {position:absolute; left:0px; bottom:2%; width:100%; height:14%;}
        .logo {width:auto; height:100%;}
    }

}



/* 300x600*/
/*@media screen and (width:300px) and (height:600px)*/
@media screen and (min-width:260px) and (min-height:300px) /*and (max-height:800px)*/
{
    .header-layout {position:absolute; left:0px; top:0px; width:100%; height:23%; background: #000000;}
    .footer-layout {position:absolute; left:0px; bottom:0px; width:100%; height:23%; background: #000000;}

    #img_container {top:20%; height:60%;}
    #copy_container {height:23%; width:90%; margin:0px 5% 0px 5%;}

    .main-copy {font-size:26px; line-height:30px; color:#FFFFFF;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #FFFFFF;}
    .sub-copy-align {bottom:5px; top:auto;}

    .cta-container {position:absolute; left:0px; bottom:11%; width:100%; height:12%; text-align:center;}
    .cta-copy {font-size:19px; line-height:19px; padding: 0px 0px 0px 0px;}

    .logo-container {position:absolute; left:0px; bottom:2%; width:100%; height:10%;}
    .logo {width:auto; height:100%;}


    @media screen and (min-width:450px)
    {
        .cta-container {position:absolute; left:0px; bottom:0%; width:100%; height:23%; text-align:left;}
        .cta-copy {font-size:26px; line-height:26px; padding: 0px 0px 0px 15px;}

        .logo-container {position:absolute; left:auto; right:15px; bottom:4%; width:50%; height:12%;}
        .logo {width:auto; height:100%;}

        #img_logo {
            top: 100%;
            left: 100%;
            -webkit-transform: translate(-100%, -100%);
            -ms-transform: translate(-100%, -100%);
            transform: translate(-100%, -100%);
        }
    }

}


/* 970x250*/
/*@media screen and (width:970px) and (height:250px)*/
@media screen and (min-width:500px) and (min-height:150px) and (max-height:300px)
{
    .header-layout {position:absolute; left:0px; top:0px; width:30%; height:100%; background: #000000;}
    .footer-layout {position:absolute; left:auto; right:0px; top:0px; width:30%; height:100%; background: #000000;}

    #img_container {left:30%; width:40%;}
    #copy_container {height:100%; width:28%; left:0%; right:auto; margin:0px 1% 0px 1%;}

    .main-copy {font-size:27px; line-height:31px; color:#FFFFFF;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #FFFFFF;}
    .sub-copy-align {bottom:5px; top:auto;}

    .cta-container {position:absolute; left:auto; right:0%; top:8%; bottom:auto; height:37%; width:30%; text-align:center;}
    .cta-copy {font-size:28px; line-height:28px; padding: 0px 0px 0px 0px;}

    .logo-container {position:absolute; left:auto; right:0%; bottom:8%; top:auto; width:30%; height:47%;}
    .logo {width:auto; height:70%;}


    @media screen and (max-width:800px)
    {
        .main-copy {font-size:20px; line-height:23px; color:#FFFFFF;}
        .cta-copy {font-size:22px; line-height:22px; padding: 0px 0px 0px 0px;}
    }

    @media screen and (max-height:240px) and (max-width:650px)
    {
        .main-copy {font-size:16px; line-height:19px; color:#FFFFFF;}
        .cta-copy {font-size:20px; line-height:20px; padding: 0px 0px 0px 0px;}
    }

    @media screen and (min-width:1020px)
    {
        .logo {width:auto; height:70%;}
    }

}

/* 728x90 */
/*@media screen and (width:728px) and (height:90px)*/
@media screen and (min-width:500px) and (max-height:150px)
{ 
    .header-layout {position:absolute; left:0px; top:0px; width:28%; height:100%; background: #000000;}
    .footer-layout {position:absolute; left:auto; right:0px; top:0px; width:42%; height:100%; background: #000000;}

    #img_container {left:28%; width:30%;}
    #copy_container {height:100%; width:26%; left:0%; right:auto; margin:0px 1% 0px 1%;}

    .main-copy {font-size:15px; line-height:18px; color:#FFFFFF;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #FFFFFF;}
    .sub-copy-align {bottom:5px; top:auto;}

    .cta-container {position:absolute; left:auto; right:18%; top:0%; bottom:auto; height:100%; width:24%; text-align:center;}
    .cta-copy {font-size:16px; line-height:16px; padding: 0px 0px 0px 1px;}

    .logo-container {position:absolute; left:auto; right:4%; top:0%; bottom:auto; width:13%; height:100%;}
    .logo {width:100%; height:auto;}

    #img_logo {
        top: 50%;
        left: 100%;
        -webkit-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
        transform: translate(-100%, -50%);
    }

    @media screen and (min-width:900px)
    {
        .main-copy {font-size:20px; line-height:23px; color:#FFFFFF;}
        .cta-copy {font-size:22px; line-height:22px; padding: 0px 0px 0px 1px;}
        .logo {height:54%; width:auto;}

    }


    @media screen and (max-height:80px)
    {
        .main-copy {font-size:12px; line-height:15px; color: #FFFFFF;}

        .logo {height:65%; width:auto;}

        #img_logo {
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .cta-copy {font-size:14px; line-height:14px; padding: 0px 0px 0px 0px;}
    }
}



/* 320x100 */
/*@media screen and (width:320px) and (height:100px)*/
@media screen and (min-width:200px) and (max-width:500px) and (min-height:40px) and (max-height:120px)
{ 
    .header-layout {position:absolute; left:0px; top:0px; width:32%; height:100%; background: #000000;}
    .footer-layout {position:absolute; left:auto; right:0px; top:0px; width:32%; height:100%; background: #000000;}

    #img_container {left:32%; width:36%;}
    #copy_container {height:100%; width:30%; top:0%; left:0%; right:auto; margin:0px 1% 0px 1%;}

    .main-copy {font-size:12px; line-height:14px; color:#FFFFFF;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #FFFFFF; font-size:10px; line-height:12px;} 
    .sub-copy-align {bottom:5px; top:auto;}

    .cta-container {position:absolute; left:auto; right:0%; bottom:auto; top:8%; height:42%; width:32%; text-align:center;}
    .cta-copy {font-size:13px; line-height:13px; padding: 0px 0px 0px 1px;}

    .logo-container {position:absolute; left:auto; right:0%; top:auto; bottom:8%; width:32%; height:42%;}
    .logo {width:auto; height:90%;}

    #img_logo {
        top: 100%;
        left: 50%;
        -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    }

    @media screen and (max-width:280px)
    {
        .main-copy {font-size:9px; line-height:11px; color:#FFFFFF;}
        .cta-copy {font-size:9px; line-height:9px; padding: 0px 0px 0px 0px;}
    }
}



/* mobile sizes 300x50 and 320x50 */
/*@media screen and (width:300px) and (height:50px)*/
@media screen and (max-width:340px) and (max-height:60px)
{
    .header-layout {position:absolute; left:0px; bottom:0px; width:100%; height:100%; background: #000000;}
    .footer-layout {position:absolute; left:0px; bottom:0px; width:100%; height:100%; background: #000000;}

    #img_container {display:none;}
    #copy_container {height:100%; width:49%; top:0%; left:1%; text-align:center;}

    .main-copy {font-size:13px; line-height:15px; color:#FFFFFF;}

    .copy-align-top, .copy-align-bottom  {
        top:0px;
        bottom:auto;
        top: 50%;
        -webkit-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        transform: translate(0%, -50%);
    }

    .sub-copy {color: #FFFFFF; font-size:9px; line-height:10px;} 
    .sub-copy-align {bottom:3px; top:auto;}

    .cta-container {position:absolute; left:auto; right:20%; top:auto; bottom:0px;  width:30%; height:100%; text-align:center;}
    .cta-copy {font-size:13px; line-height:15px; padding: 0px 0px 0px 0px;}

    .logo-container {position:absolute; left:auto; right:2%; top:0%; bottom:auto; width:18%; height:100%;}
    .logo {width:90%; height:auto;}

    #img_logo {
        top: 50%;
        left: 100%;
        -webkit-transform: translate(-100%, -50%);
        -ms-transform: translate(-100%, -50%);
        transform: translate(-100%, -50%);
    }


    @media screen and (max-width:250px)
    {
        .main-copy {font-size:10px; line-height:11px;}
        .cta-copy {font-size:11px; line-height:11spx; padding: 0px 0px 0px 0px;}

    }


}




.scale-image {
    width:100%;
    height: 100%;
    object-fit: cover;
}

/*
@media (orientation:landscape){
    .scale-image {
        width:100%;
        height: auto;
    }
}


@media (orientation:portrait){
    .scale-image {
        height:100%;
        width: auto;
    }
}
*/


