/*
    DJANGO aa_site styles
*/
@charset "utf-8";

html, body {
    height: 100%;
}

    body
    {
        font-family: "Avenir", Helvetica, Verdana, Arial, sans-serif;
        width: 100%;
        max-width: 100%;
        font-size: 10px;
        line-height: 12px;
        color: #FFDC00;
        background: #053786;
        text-align: justify;
    }
    h1
    {
        font-size: 42px;
        line-height: 46px;
        color: #FFDC00;
        text-align:	center;
        margin: 24px 0 16px;
        font-weight: normal;
    }
    h2
    {
        font-size: 24px;
        line-height: 28px;
        color: #4AC4CB;
        text-align: center;
        margin: 20px 0 20px;
        font-weight: normal;
    }
    h3
    {
        font-size: 16px;
        line-height: 18px;
        color: #FFFF96;
        text-align: center;
        margin: 16px 20px 2px 20px;
        font-weight: normal;
    }
    h4
    {
        font-size: 18px;
        line-height: 20px;
        color: #999999;
        text-align:	center;
        margin: 4px 0 8px;
        font-weight: normal;
    }
    img.logo
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    p
    {
        font-size: 12px;
        line-height: 12px;
        color: #393939;
        text-align:	justify;
        margin: 4px 20px 6px 20px;
        font-weight: normal;
    }
	.videoscontainer {
		display: flex;
		flex-direction: row;
		flex-grow: 1;
	}
	.videos {
		display: flex;
		justify-content: center;
		flex-direction:column;
		flex-grow: 1;
		margin:30px 40px 30px;
	}
	.button {
		display: block;
		width: 33.33%;
	}
	.caption {
		display: block;
		width: 100%;
	    text-align:center;
		text-color:#FFDC00;
        font-size: 16px;
		margin:30px 10px 30px;
		font-weight: bold;
	}
    a, a:link, a:visited, a:active, a:hover
    {
        color: #4AC4CB;
        text-decoration: none;
        word-break: break-word;
    }
    a:active, a:hover
    {
        text-decoration: underline;
        font-weight: bold;
        color: #4AC4CB;
    }

/* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto; padding:0;}
    .ExternalClass {width:100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
    #backgroundTable {margin:0; padding:0; width:100%; line-height: 100% !important;}

/* Some sensible defaults for images
Bring inline: Yes.
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}*/

/* Outlook 07, 10 Padding issue fix
Bring inline: No.*/
    table td {border-collapse: collapse;}

/* Fix spacing around Outlook 07, 10 tables
Bring inline: Yes */
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

/* Mobile */
    @media only screen and (max-device-width: 480px)
    {
        /* Part one of controlling phone number linking for mobile. */
        a[href^="tel"], a[href^="sms"]
        {
            text-decoration: none;
            color: blue; /* or whatever your want */
            pointer-events: none;
            cursor: default;
        }
        .mobile_link a[href^="tel"], .mobile_link a[href^="sms"]
        {
            text-decoration: none;
            color: orange;
            pointer-events: auto;
            cursor: default;
        }
    }

/* Not all email clients will obey these, but the important ones will */
    @media only screen and (max-width: 480px)
    {
        .card
        {
            padding: 1rem 0.75rem !important;
        }
        .link_option
        {
            font-size: 14px;
        }
        hr
        {
            margin: 2rem -0.75rem !important;
            padding-right: 1.5rem !important;
        }
    }

/* More Specific Targeting */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
    {
        /* You guessed it, ipad (tablets, smaller screens, etc) */
        /* repeating for the ipad */
        a[href^="tel"], a[href^="sms"]
        {
            text-decoration: none;
            color: blue; /* or whatever your want */
            pointer-events: none;
            cursor: default;
        }

        .mobile_link a[href^="tel"], .mobile_link a[href^="sms"]
        {
            text-decoration: none;
            color: orange !important;
            pointer-events: auto;
            cursor: default;
        }
    }

/* iPhone Retina */
    @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px)
    {
        /* Must include !important on each style to override inline styles */
        #footer p
        {
            font-size: 9px;
        }
    }

/* Android targeting */
    @media only screen and (-webkit-device-pixel-ratio:.75)
    {
        /* Put CSS for low density (ldpi) Android layouts in here */
        img
        {
            max-width: 100%;
            height: auto;
        }
    }
    @media only screen and (-webkit-device-pixel-ratio:1)
    {
        /* Put CSS for medium density (mdpi) Android layouts in here */
        img
        {
            max-width: 100%;
            height: auto;
        }
    }
    @media only screen and (-webkit-device-pixel-ratio:1.5)
    {
        /* Put CSS for high density (hdpi) Android layouts in here */
        img
        {
            max-width: 100%;
            height: auto;
        }
    }
/* Galaxy Nexus */
@media only screen and (min-device-width : 720px) and (max-device-width : 1280px)
    {
        img
        {
            max-width: 100%;
            height: auto;
        }
        body
        {
            font-size: 16px;
        }
    }
/* end Android targeting */