@import url('style.css');
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: White;
    color: Black;
    text-align: center;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

a {
    text-decoration: none;
    color: Blue;
}

    a:hover {
        text-decoration: underline;
    }

    a:visited {
        color: Blue;
    }

img {
    vertical-align: bottom;
    border: 0;
}

    img.title {
        width: 60%;
        margin: 10px 20%;
    }

.publications{
    position:relative;
    float:left;
    width:100%;
}

a.publication {
    position: relative;
    float: left;
    width: 50%;
    height: 10vw;
}

    a.publication img {
        width: 60%;
        margin: 10% 20%
    }

hr {
    border: 0;
    height: 7px;
    background-color: #b73033;
    padding: 0;
    margin: 0;
}

.page {
    width: 80%;
    max-width:1600px;
    margin: 0 auto;
}

.page p, .page h3, .page li {
        text-align: left;
}

.page h3{padding-top:10px;}

.page .menu{
    position:relative;
    float:left;
    background-color:#2592b8;
    width:100%;
    text-align:center;
    z-index:20;
}

.page img.welcome-header{position:relative;float:left;margin-top:10px;width:100%;}
.page img.welcome-left{position:relative;float:left;width:52.3%;}
.page div.welcome-text{
    position:relative;
    float:left;
    width:45.7%;
    margin:1%;
    font-size:3.8vw;
    font-weight:bold;
    font-style:italic;
    text-align:center;
    color:#499cbb;
}

    p.schedule{font-size:1vw;}
    .page .month {
        position: relative;
        float: left;
        width:25%;
        font-size: 1vw;
        font-weight:bold;
        border-top:1px solid #499cbb;
    }
    .page .events {
        position: relative;
        float: left;
        width: 75%;
        font-size: 1vw;
        border-top: 1px solid #499cbb;
    }

    .page .snapshot {
        position: relative;
        float: left;
        width: 100%;
        color: #499cbb;
        font-size: 3.6vw;
        font-weight:bold;
    }

.page .snapshot .element {
    position: relative;
    float:left;
    width:48%;
    padding:1%;
}

.page .snapshot img {
    height: 1em;
}

.page .map{
    position:relative;
    float:left;
    width:100%;
    height:50vw;
    z-index:1;
    background-image: url('/images/worldmap.png');
    background-size:100% auto;
}

.page .map .overlay{
    position:absolute;
    top:0;
    left:0;
    background-image: url('/images/6.png');
    background-size:30%;
    background-repeat:no-repeat;
    width:25%;
    height:18%;
    z-index:10;
    font-size:1.5vw;
    transition: .4s ease-in-out;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
}

.page .map .overlay:hover, .page .map .overlay:active {
    width:40%;
    height:30%;
    font-size:2.5vw;
}

.page .map .overlay .region{
    position:absolute;
    display:block;
    top:15%;
    left:8.5%;
    text-align:left;
    font-weight:bold;
}

.page .map .overlay .region span.title{
    font-size:0.8em;
    font-weight:normal;
}

.page .map .overlay img{
    position:absolute;
    top:0;
    left:0;
    height:100%;
}

.page .map .overlay .region img{position:relative;width:1em;height:1em;}

.page .map .canada{
    top:20%;
    left:5%;
}

.page .map .canada:hover, .page .map .canada:active {
    top: 13%;
}

.page .map .usa{
    top:40%;
    left:10%;
}

.page .map .uk{
    top:20%;
    left:45%;
}

.page .map .uk:hover, .page .map .uk:active{
    top:8%;
}

.page .map .europe{
    top:35%;
    left:50%;
}

.page .map .europe:hover, .page .map .eurpe:active {
    top:38%;
    left:35%;
}

.page .map .asia{
    top:50%;
    left:75%;
}

.page .map .asia:hover, .page .map .asia:active{
    left:55%;
}

.page .map .australia{
    top:67%;
    left:71%;
}

.page .map .australia:hover, .page .map .australia:active{
    top:62%;
    left:60%;
}

.page .map .newzealand{
    top:83%;
    left:77%;
}

.page .map .newzealand:hover, .page .map .newzealand:active{
    top:75%;
    left:55%;
}

.page .stats{
    position:relative;
    float:right;
    font-size:0.8em;
    font-style:italic;
    text-align:left;
    padding-bottom:20px;
}

    .page .specs img.desktop {
        width: 70%;
        padding: 1%;
    }

    .page .specs img.mobile {
        width: 24%;
        padding: 1%;
    }
@media screen and (max-width:1920px) {
    .page {
        margin:0 2%;
        width: 96%;
    }

        p.schedule, .page .month, .page .events {
            font-size: 1.2vw;
        }
}

@media screen and (max-width:1600px) {
    p.schedule, .page .month, .page .events {
        font-size: 1.5vw;
    }
}

@media screen and (max-width:1000px) {
    img.title {
        width: 80%;
        margin: 5% 10%;
    }

    a.publication {
        width: 100%;
        height: initial;
    }

        a.publication img {
            width: 70%;
            margin: 5% 15%;
        }

    .page p, .page h3, .page li {
        margin: 1%;
    }

    .page {
        width: 100%;
        margin: 0;
    }

        p.schedule, .page .month, .page .events {
            font-size: 2vw;
        }

        .page .snapshot {
            font-size: 2em;
        }

        .page .map {
            height: 55vw;
        }

            .page .map .overlay {
                width: 20%;
                height: 15%;
                background-size: 40%;
                font-size: 1.5vw;
            }

                .page .map .overlay:hover, .page .map .overlay:active {
                    width: 40%;
                    height: 30%;
                    font-size: 3vw;
                }

                .page .map .overlay .region {
                    top: 25%;
                    left: 10%;
                }

            .page .map .canada:hover, .page .map .canada:active {
                top: 10%;
            }

            .page .map .uk {
                top: 15%;
            }

                .page .map .uk:hover, .page .map .uk:active {
                    top: 5%;
                }

            .page .map .asia:hover, .page .map .asia:active {
                top: 40%;
                left: 60%;
            }

            .page .map .australia:hover, .page .map .australia:active {
                top: 60%;
                left: 60%;
            }

            .page .map .newzealand {
                top: 83%;
                left: 76%;
            }

                .page .map .newzealand:hover, .page .map .newzealand:active {
                    top: 84%;
                    left: 60%;
                }

            .page .map .yandy {
                top: 25%;
                left: 30%;
            }

                .page .map .yandy:hover, .page .map .yandy:active {
                    top: 20%;
                    left: 25%;
                }
}

@media screen and (max-width:700px) {
    .page div.welcome-text-3 {
        width: 98%;
        margin: 1%;
    }

    .page .snapshot {
        font-size: 1.5em;
    }

    p.schedule, .page .month, .page .events {
        font-size: 3vw;
    }

    .page .month, .page .events{width:98%;margin:0 1%;text-align:left;}
    .page .events {border-top:none;}
    }

@media screen and (max-width:550px) {
    .page div.welcome-text-2 {
        width: 98%;
        margin: 1%;
    }

    .page div.welcome-text-3 {
        width: 98%;
        margin: 1%;
    }

    p.schedule, .page .month, .page .events {
        font-size: 3.4vw;
    }
}