﻿/*New SVG stuff*/

/* Vertically centered text with SVG */
.svgpagetitlecontainer {
    width: 100%;
    height: 56px;
    /*background: #f06;*/
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    overflow: hidden;
    /*resize: both;  just for this demo */
    /*color: white;*/
}

    .svgpagetitlecontainer svg {
        width: 100%;
        height: 100%;
        /*pointer-events: none;  so that you can resize the element */
        font-family: aardvarkboldregular;
        font-size: calc(2em + (26 - 14) * (100vw - 320px) / (1920 - 320)); /*min font size + (max font size - min font size)*((100vw - min screen size)/(max screen size - min screen size)))*/
        /*font-size: calc(28px + (26 - 14) * (100vw - 320px) / (1920 - 320));*/ /*min font size + (max font size - min font size)*((100vw - min screen size)/(max screen size - min screen size)))*/
        /*font-size: 2.5vw;*/
        /*font-weight: bold;*/
        stroke: #ffffff;
        stroke-width: 1;
    }

    .svgpagetitlecontainer text {
        text-anchor: middle;
        /*pointer-events: auto; /Cancel the svg’s pointer-events */
        fill: #82499E;
    }

    .svgpagetitlecontainer.tall-title{
        height: 90px;
    }
    @media (max-width:576px){
    .svgpagetitlecontainer.tall-title{
        height: 60px;
        }
    }
    @media (max-width:320px){
        .svgpagetitlecontainer.tall-title{
            height: 45px;
            }
        }
    .svg-site-title-container {
        width: 89%;
        height: 1px;
        /* background: #f06; */
        text-shadow: 0 1px 2px rgba(0,0,0,.5);
        overflow: visible;
        /*resize: both;  just for this demo */
        /*color: white;*/
    }
    
        .svg-site-title-container svg {
            /* background: red; */
            width: 100%;
            height: 80px;
            /*pointer-events: none;  so that you can resize the element */
            font-family: aardvarkboldregular;
            font-size: 6vw;
            /*font-size: calc(4.5em + (26 - 14) * (100vw - 320px) / (1920 - 320));*/ /*min font size + (max font size - min font size)*((100vw - min screen size)/(max screen size - min screen size)))*/
            /*font-size: calc(28px + (26 - 14) * (100vw - 320px) / (1920 - 320));*/ /*min font size + (max font size - min font size)*((100vw - min screen size)/(max screen size - min screen size)))*/
            /*font-size: 2.5vw;*/
            /*font-weight: bold;*/
            stroke: #ffffff;
            stroke-width: 1;
        }
    
        .svg-site-title-container text {
            text-anchor: middle;
            /*pointer-events: auto; /Cancel the svg’s pointer-events */
            fill: #82499E;
        }

        @media (min-width:1200px) {
            .svg-site-title-container svg {
                font-size: 5.2rem;
            }
        }        

@media (min-width:1200px) {
    .svgpagetitlecontainer svg {
        font-size: 2.5rem;
    }
}

@media (max-width:576px) {
    .svgpagetitlecontainer svg {
        font-size: 1.5rem;
    }
}

@media (max-width:425px) {
    .svgpagetitlecontainer svg {
        font-size: 1.4rem;
    }
}

@media (max-width:375px) {
    .svgpagetitlecontainer svg {
        font-size: 1.2rem;
    }
}

@media (max-width:320px) {
    .svgpagetitlecontainer svg {
        font-size: 1.1rem;
    }
}


/* End New SVG Stuff */

/* Old SVG Stuff */
@font-face {
    font-family: 'aardvarkboldregular';
    src: url('../Fonts/aardvarkbold-webfont.woff2') format('woff2');
    src: url('../fonts/aardvarkbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

svg.site-title {
    font-family: aardvarkboldregular;
    font-size: 48px;
    /*font-weight: bold;*/
    fill: #82499E;
    stroke: #ffffff;
    stroke-width: 1;
}

svg.site-subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18.8px;
    font-weight: bold;
}

tspan.site-subtitle-alt-color {
    fill: #82499E;
}

svg.page-title, tspan.page-title {
    font-family: aardvarkboldregular;
    font-size: 44px;
    /*font-weight: bold;*/
    fill: #82499E;
    stroke: #ffffff;
    stroke-width: 1;
}

tspan.page-title-subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    fill: #000000;
}

.svg-container {
    box-sizing: content-box;
    display: block;
    height: 0;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.svg-responsive {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.svg-a-ie {
    display: none;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10-11 specific styles */
    div.svg-a-nonie {
        display: none;
    }

    div.svg-a-ie {
        display: block;
    }
}
