/*---RESET--------------------------------------------https://cssminifier.com/*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}/*http://www.w3schools.com/tags/tag_q.asp*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* https://css-tricks.com/snippets/css/clear-fix/
   From: css-tricks
   Force Element To Self-Clear its Children
*/
section:after, .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}/*http://www.w3schools.com/cssref/sel_after.asp*/
div.clearfix-now {clear: both;}

/*---BASIC--------------------------------------------------------------------*/
html {
    font-size: 62.5%;
    height: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;/*JS window.location.hash = id//add #hash to URL*/
}
/***** font *****/
body {
    font-family: arial, serif;
    background-color: #59a0c5;
    padding: 10px 5px;
    min-height: calc(100% - 20px);
    font-size: 14px; font-size: 1.4rem;
}
h1, h2, h3 {
    font-family: 'Libre Baskerville', arial, serif;
}
h2, h3, .color-red {
    color: #800000;
}
.color-gray {
    color: #808080;
}
h2 {
    font-size: 22px; font-size: 2.2rem;
    line-height: 24px; line-height: 2.4rem;
}
h2 small {
    font-size: 12px; font-size: 1.2rem;
    vertical-align: bottom;
}
h3 {
    font-size: 17px; font-size: 1.7rem;
    line-height: 18px; line-height: 1.8rem;
    padding-bottom: 14px;
}
h3 small {
    font-size: 11px; font-size: 1.1rem;
    vertical-align: bottom;
}
p, ul, form {/*also see photos.css for figcaption & read-more.css for .read-more-button*/
    letter-spacing: .6px; letter-spacing: 0.06rem;
    word-spacing: 1px; word-spacing: 0.1rem;
    line-height: 22px; line-height: 2.2rem;
    padding-bottom: 10px;
}
h2, h3, b {
    font-weight: 700;/*700 bold*/
}
i {
    font-style: italic;
}

/***** #wrapper *****/
#wrapper {
    background-color: #dfd7d5;
    background-image: url(../01img/i00-01-tile-orange.jpg);
    max-width: 960px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 12px 4px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 12px 4px rgba(0,0,0,0.5); box-shadow: 0 0 12px 4px rgba(0,0,0,0.5);/*https://www.cssmatic.com/box-shadow*/
    -webkit-border-radius: 10px; border-radius: 10px;/*rounded corners*/
}
header {
    -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;/*rounded corners*/
}
footer {
    -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;/*rounded corners*/
}
/*header, nav, footer*/
header, nav, footer,
header a, nav a, footer a {
    color: #fff;
}
header a, nav a {
    text-decoration: none;
}

/***** header *****/
header {
    background: linear-gradient(#3e5866, #7baac2);
    padding: 2px 0 4px 0;
}
header a {
    display: block;
    position: relative;
}
header img:nth-child(1) {
    width: 60px;
    height: 76.8px;
    position: absolute;
    top: 18px;
    left: 23px;
}
header img:nth-child(2) {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 19px;
    right: 19px;
}
header h1 {
    padding: 18px 100px 0 100px;
    text-shadow: 1px 2px 3px #000000;
    font-size: 26px;
}
header h1 small {
    font-size: 21px;
}
header p {
    text-shadow: 1px 2px 3px #000000;
    color: #ccc;
    margin-top: -4px;
    padding: 2px 100px 10px 100px;
    letter-spacing: -.6px;
}

/***** nav *****/
nav {
    background: #8dc5e2;
    padding-bottom: 10px;
}
nav ol {
    background: #8CB2C7;
    z-index: 900;
}

/*nav 1*/
nav > ol > li {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;/*= column sizes*/
}
nav span,
nav a {
    padding: 8px;
    line-height: 15px; line-height: 1.5rem;
    /*text-align: center;add-centerNav*/
}
nav span {
    display: none;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}
/*ol*/
nav > ol > li > ol {
    display: table-row;
}
/*li*/
nav > ol > li > ol > li {
    display: table-cell;
    position: relative;
}
nav > ol > li > ol > li:hover,
nav > ol > li > ol > li.containing-selected {
    background: linear-gradient(#8CB2C7 88%, #6B94AC 88%);
}
/*a*/
nav > ol > li > ol > li > a.arrow-more {
    background: url(../01img/i00-01-link-arrow-down.svg) no-repeat center bottom;
}
nav > ol > li > ol > li > a:hover,
nav > ol > li > ol > li > a.selected {
    background-color: #6B94AC;
}
nav > ol > li > ol > li > a {
    height: 100%;
    text-align: center;
    display: flex;/*center text in case of vertical overflow*/
    justify-content: center;/*align horizontal*/
    align-items: center;/*align vertical*/
    font-size: 15px;
}

/*nav 2*/
/*ol*/
nav > ol > li > ol > li > ol {
    background: #6B94AC;
    display: none;
    position: absolute;
    min-width: 100%;
    width: 150px;/*remove-centerNav*/
}
nav > ol > li > ol > li:hover > ol {
    display: block;
}
/*li*/
nav > ol > li > ol > li > ol > li {
    position: relative;
}
nav > ol > li > ol > li > ol > li:hover,
nav > ol > li > ol > li > ol > li.containing-selected {
    background: linear-gradient(90deg, #6B94AC 97%, #4A7791 97%);
}
/*a*/
nav > ol > li > ol > li > ol > li a.arrow-more {
    background: url(../01img/i00-01-link-arrow-right.svg) no-repeat right center;
}/*nav 2 & 3...*/
nav > ol > li > ol > li > ol > li > a:hover,
nav > ol > li > ol > li > ol > li > a.selected {
    background-color: #4A7791;
}
/*nav > ol > li > ol > li:nth-last-child(4) ol,
nav > ol > li > ol > li:nth-last-child(2) ol {
    width: 50px; text-align: center;
}*/
nav > ol > li > ol > li > ol > li > a {
    display: block;
}

/*nav 3*/
/*ol*/
nav > ol > li > ol > li > ol > li > ol {
    background: #4A7791;
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 150px;
    width: 150px;/*add-centerNav*/
}
nav > ol > li > ol > li > ol > li:hover > ol {
    display: block;
}
/*li*/
nav > ol > li > ol > li > ol > li > ol > li {
    position: relative;
}
nav > ol > li > ol > li > ol > li > ol > li:hover,
nav > ol > li > ol > li > ol > li > ol > li.containing-selected {
    background: linear-gradient(90deg, #4A7791 97%, #285975 97%);
}
/*a*/
nav > ol > li > ol > li > ol > li > ol > li > a:hover,
nav > ol > li > ol > li > ol > li > ol > li > a.selected {
    background-color: #285975;
}
nav > ol > li > ol > li > ol > li > ol > li > a {
    display: block;
    /*white-space: nowrap;remove-centerNav*/
}

/*nav 4*/
/*ol*/
nav > ol > li > ol > li > ol > li > ol > li > ol {
    background: #285975;
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 150px;
}
nav > ol > li > ol > li > ol > li > ol > li:hover > ol{
    display: block;
}
/*a*/
nav > ol > li > ol > li > ol > li > ol > li > ol > li > a:hover,
nav > ol > li > ol > li > ol > li > ol > li > ol > li > a.selected {
    background-color: #073C5A;
}
nav > ol > li > ol > li > ol > li > ol > li > ol > li > a {
    display: block;
    white-space: nowrap;
}

/***** main *****/
/*h2 section*/
main > section {
    padding: 0 30px;
}

/*main a*/
main a:link {
    color: #1266C4;
}
main a:visited {
    color: #5D15B6;
}
main a:link:hover,
main a:link:active {
    color: #1266C4;
    background-color: rgba(129, 190, 255, 0.5);
}
main a:visited:hover,
main a:visited:active {
    color: #5D15B6;
    background-color: rgba(199, 157, 255, 0.5);
}
/*for IE*/
@supports not (-webkit-mask: url(../01img/i00-01-link-download.svg)) {
    main a span,
    footer a span {
        display: inline-block;
        width: 2px;
        padding-right: 12px;
    }
    .link-download {
        background: url(../01img/i00-01-link-download.svg) no-repeat right center;
    }
    .link-back-top {
        background: url(../01img/i00-01-link-back-to-top.svg) no-repeat right center;
    }
    .link-external {
        background: url(../01img/i00-01-link-external.svg) no-repeat right center;
    }
    .link-internal {
        background: url(../01img/i00-01-link-internal.svg) no-repeat right center;
    }
    .link-on-page {
        background: url(../01img/i00-01-link-on-page.svg) no-repeat right center;
    }
}
/*for Chrome*/
@supports (-webkit-mask: url(../01img/i00-01-link-download.svg)) {
    main a span,
    footer a span {
        display: inline-block;
        width: 15px;
        background-color: currentColor;
    }
    .link-download {
        -webkit-mask: url(../01img/i00-01-link-download.svg) no-repeat right center;
    }
    .link-back-top {
        -webkit-mask: url(../01img/i00-01-link-back-to-top.svg) no-repeat right center;
    }
    .link-external {
        -webkit-mask: url(../01img/i00-01-link-external.svg) no-repeat right center;
    }
    .link-internal {
        -webkit-mask: url(../01img/i00-01-link-internal.svg) no-repeat right center;
    }
    .link-on-page {
        -webkit-mask: url(../01img/i00-01-link-on-page.svg) no-repeat right center;
    }
}
a[href="index.php?p1=404"] {
    cursor: not-allowed;
    text-shadow: 1px 2px 3px #ff0000;
}

/*.pageBanner*/
main .pageBanner,
main .pageBannerWithImg {
    margin: 0 -30px;
    padding-bottom: 18px;
    padding-bottom: 40px;
}
main .pageBannerWithImg {
    min-height: 230px;
}
main .pageBannerWithImg img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -230px;
}
main .pageBanner div,
main .pageBannerWithImg div {
    position: relative;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 40%);
    padding: 25px 30px 15px 30px;
}
main .pageBanner h2,
main .pageBannerWithImg h2 {
    padding-bottom: 10px;
}
/*h3 section*/
main > section section {
    padding-bottom: 30px;
}

/*img*/
main img {
    max-width: 100%;
    height: auto;
}
main img[src$=".jpg"] {
    background: #c3bab8;
}
/*top*/
main img.img-top {
    padding-bottom: 30px;
}
/*center*/
main img.img-center {
    display: block;
    margin: 0 auto;
}
/*float-left*/
main img.img-float-left {
    float: left;
    width: 130px;
    height: auto;
    margin: 0 14px 14px 0;
    -webkit-border-radius: 7px; border-radius: 7px;/*rounded corners*/
}
/*float-right*/
main img.img-float-right {
    float: right;
    width: 130px;
    height: auto;
    margin: 0 0 14px 14px;
    -webkit-border-radius: 7px; border-radius: 7px;/*rounded corners*/
}

/*ul*/
main ul.i, main ul.z, main ul.c, main ul.d, main ul.a {padding-left: 30px;}
main ul.z {list-style-type: lower-alpha;}
main ul.c {list-style-type: disc;}
main ul.d {list-style-type: decimal;}
main ul.a {background-image: radial-gradient(circle, #966 1px, rgba(255,255,255,0) 1.5px);
           background-position: left;
           background-size: 5px 6.5px;
           background-repeat: repeat-y;
           margin-bottom: 10px;
           padding-bottom: 0;
           font-size: 11px; font-size: 1.1rem;}
main .wrap {overflow-wrap: anywhere;}

/*side-div*/
main div.div-float-left,
main div.div-float-right {
    margin-bottom: 10px;
    -webkit-border-radius: 20px; border-radius: 20px;/*rounded corners*/
}
main div.div-float-left {float: left;
                         width: 425px;
                         padding-top: 20px;}
main div.div-float-right {background: rgba(255, 255, 255, 0.28);
                          float: right;
                          width: 405px;
                          padding: 20px;}
main div.div-float-right.text-center,
main div.div-float-right h3.text-center {text-align: center;}
main div.div-float-right h3.background-red {background: #966;
                                            margin: -20px -20px 20px -20px;
                                            -webkit-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;/*rounded corners*/
                                            padding: 5px 0 4px 0;
                                            color: #fff;
                                            text-align: center;}

/*.home-side-links*/
.home-side-links li > span {padding: 3px 10px;
                            -webkit-border-radius: 10px; border-radius: 10px;/*rounded corners*/}
.home-side-links ul > li > span {background-color: rgb(62, 88, 102);}
.home-side-links ul > li > ul > li > span {background-color: rgb(142, 198, 227);}
.home-side-links ul > li > ul > li > ul > li > span {background: rgba(142, 198, 227, .5);}
#wrapper .home-side-links li > span a {color: #fff;
                                       text-decoration: none;}

/***** footer *****/
footer {background: linear-gradient(#8ec6e3, #3e5866);
        padding: 20px 0 5px 0;}
footer div {padding: 0 20px;}
footer div:nth-child(1) {float: left;}
footer div:nth-child(2) {float: right;
                         text-align: right;}
footer > a {position: fixed;
            right: 0;
            bottom: 160px;
            background-color: rgba(98, 147, 173, .9);
            width: 40px;
            height: 35px;
            padding-top: 5px;
            text-align: center;
            text-decoration: none;
            display: none;}
footer > a:hover {background-color: #174E6C;}

/*---PAGE-SPECIFIC------------------------------------------------------------*/
/***** slideshow *****/
.slideshow {min-height: 35px;
            overflow: hidden;
            position: relative;/*absolute will be relative to this*/
            user-select: none;
            margin: 0 -30px 0 -30px;}
.slideshow h2 {display: none;}

/*slider*/
.slideshow .slider {height: 100%;
                    white-space: nowrap;}

/*slides*/
.slideshow .slider > li {display: inline-block;
                         height: 100%;
                         width: 100%;}
.slideshow .slider > li h3 {background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
                            width: 250px;
                            position: absolute;
                            top: 0;
                            padding: 10px 0 10px 25px;}
.slideshow .slider > li h3 a {color: #fff;
                              text-decoration: none;}
.slideshow .slider > li img {width: 100%;
                             height: auto;}

/*bullets*/
.slideshow .bullets {width: 100%;
                     position: absolute;
                     bottom: 0;
                     text-align: center;}
.slideshow .bullets span {display: inline-block;
                          background-color: rgba(255, 255, 255, 0.9);
                          width: 7px;
                          height: 7px;
                          border-radius: 50%;
                          margin: 12px 3px;
                          cursor: pointer;}
.slideshow .bullets .selected {background-color: #37708e;}
.slideshow .bullets span:hover {background-color: #174E6C;}

/*arrows*/
.slideshow .arrows {position: absolute;
                    top: 50%;
                    width: 100%;
                    height: 0;
                    display: none;}
.slideshow:hover .arrows {display: block;}
.slideshow .arrows span {background-color: rgba(98, 147, 173, .9);
                         width: 30px;
                         height: 60px;
                         position: absolute;
                         top: -30px;
                         text-align: center;
                         line-height: 60px;
                         cursor: pointer;
                         color: #fff;
                         font-weight: 900;}
.slideshow .arrows span:nth-child(1) {border-radius: 0 50% 50% 0;}
.slideshow .arrows span:nth-child(2) {right: 0;
                                      border-radius: 50% 0 0 50%;}
.slideshow .arrows span:hover {background-color: #174E6C;}

/*message*/
.slideshow .message {position: absolute;
                     top: 0;
                     right: 20px;
                     color: rgba(255, 255, 255, 0.9);
                     display: none;}

/***** photos *****/
/*thumbs*/
main section figure {float: left;
                     width: 210px;
                     height: 192px;
                     text-align: center;
                     margin: 6px;}
main section .background {padding-top: 5px;
                          height: 130px;/*height of img*/}

main section figure img {display: inline-block;
                         max-height: 130px;
                         max-width: 200px;
                         vertical-align: middle;
                         cursor: pointer;}
main section figure span {display: inline-block;
                          height: 130px;
                          vertical-align: middle;}
main section figcaption {letter-spacing: .6px;
                         word-spacing: 1px;
                         line-height: 22px;
                         padding: 6px;
                         max-height: 40px;
                         min-height: 36px;/*for the background: -webkit-linear-gradient %*/
                         overflow: hidden;
                         position: relative;
                         background: -webkit-linear-gradient(#000 53%, rgba(0, 0, 0, .1) 85%);/*Gradient Text: https://css-tricks.com/snippets/css/gradient-text/*/
                         -webkit-background-clip: text;
                         -webkit-text-fill-color: transparent;}

main section figure:hover .background {background: linear-gradient(#174E6C, rgba(255, 255, 255, .8));}
main section figure:hover figcaption {-webkit-text-fill-color: #000;
                                      max-height: 800px;
                                      background: rgba(255, 255, 255, .8);}

/*carousel - everything inside the .carousel is generated in the 03-photos.js file*/
.body {overflow: hidden;}
.hidden {display: none;}
.carousel {background-color: #000;
           width: 100%;
           height: 100%;
           position: fixed;
           top: 0;
           right: 0;
           z-index: 900;
           text-align: center;
           color: #ccc;}
.carousel p {position: fixed;
             top: 0;
             left: 0;
             padding: 16px 40px;}/*1/1*/
.carousel .img {width: 100%;
                height: calc(100% - 100px);
                margin-top: 50px;}/*img*/
.carousel h3 {padding: 18px 60px;}/*h3*/
.carousel .exit, .carousel .next, .carousel .prev {cursor: pointer;
                                                   user-select: none;
                                                   position: fixed;}
.carousel .exit {width: 100%;
                 height: 20%;}
.carousel .next, .carousel .prev {width: 50%;
                                  height: 80%;}
.carousel div span {font-size: 52px;
                    position: fixed;
                    width: 50px;
                    height: 50px;}/*X > <*/
.carousel .exit, .carousel .exit span {top: 0;
                                       right: 0;}/*X*/
.carousel .next, .carousel .next span {bottom: 0;
                                       right: 0;}/*>*/
.carousel .prev, .carousel .prev span {bottom: 0;
                                       left: 0;}/*<*/
.carousel .exit:hover span {background-color: #620000;}
.carousel .next:hover span, .carousel .prev:hover span {background-color: #002740;}

/*form*/
form.photos {background-color: #8ec6e3;
             padding: 10px;}
form.photos input:focus {outline: none;}
form.photos input {width: 250px;
                   margin: 0 14px;
                   text-align: center;}
form.photos input[type="file"] {background-color: #fff;
                                padding: 20px 6px;/*submit button*/
                                border: 5px dashed #555;
                                border-radius: 10px;/*rounded corners*/
                                cursor: pointer;/*arrow to hand on hover*/}

/***** map *****/
/*map-home & map-missions*/
.map {position: relative;
      max-width: 480px;
      margin-bottom: 30px;}
.map img {display: block;}
.map span {position: absolute;
           text-align: center;}
.map .diocese {font-size: 13px;
               color: #966;
               top: 08.75%; left: 06.04%;}
.map .water,
.map .province,
.map .disc,
.map .city {font-size: 8px;}
.map .water {color: #377fd6;}
.map .water.beaufort-sea             {top: 50.83%; left: 04.58%;}
.map .water.hudson-bay               {top: 89.58%; left: 63.75%;}
.map .water.labrador-sea             {top: 60.42%; left: 88.54%;}
.map .water.davis-strait             {top: 47.92%; left: 84.17%;}
.map .water.baffin-bay               {top: 40.00%; left: 61.25%;}
.map .province {color: #000000;}
.map .province.nunavut               {top: 58.75%; left: 33.33%;}
.map .province.british-columbia      {top: 95.42%; left: 01.67%;}
.map .province.alberta               {top: 97.08%; left: 15.42%;}
.map .province.saskatchewan          {top: 97.08%; left: 27.50%;}
.map .province.manitoba              {top: 97.08%; left: 44.58%;}
.map .province.quebec                {top: 91.67%; left: 87.08%;}
.map .province.northwest-territories {top: 76.25%; left: 10.42%;}
.map .province.greenland             {top: 20.00%; left: 58.75%;}
.map .disc,
.map .city {color: #000;
            padding: 2px 4px;
            -webkit-border-radius: 10px; border-radius: 10px;/*rounded corners*/
            margin: -2px 0 0 -2px;}
.map .disc b,
.map .city b {background: #6d6c6c;
              display: inline-block;
              width: 4px;
              height: 4px;
              -webkit-border-radius: 2px; border-radius: 2px;/*rounded corners*/}
.map .disc.yellowknife               {top: 84.17%; left: 19.79%;}
.map .disc.sanikiluaq                {top: 89.79%; left: 79.17%;}
.map .disc.bathurst-inlet            {top: 72.50%; left: 31.67%;}
.map .disc.kuqluktuk                 {top: 69.17%; left: 23.33%;}
.map .disc.umingmaktok               {top: 70.42%; left: 32.08%;}
.map .disc.cambridge-bay             {top: 64.58%; left: 35.00%;}
.map .disc.nanisivik                 {top: 49.58%; left: 52.08%;}
.map .disc.resolute                  {top: 47.92%; left: 41.25%;}
.map .disc.nuuk                      {top: 44.58%; left: 93.33%;}
.map .disc.eureka                    {top: 31.25%; left: 41.67%;}
.map .disc.alert                     {top: 20.83%; left: 46.67%;}
.map .city.arctic-bay                {top: 51.25%; left: 51.67%;}
.map .city.arviat                    {top: 86.04%; left: 51.67%;}
.map .city.baker-lake                {top: 77.08%; left: 48.13%;}
.map .city.cape-dorset               {top: 68.13%; left: 70.00%;}
.map .city.chesterfield-inlet        {top: 79.17%; left: 54.58%;}
.map .city.churchill                 {top: 93.13%; left: 54.17%;}
.map .city.clyde-river               {top: 48.96%; left: 66.67%;}
.map .city.coral-harbour             {top: 72.92%; left: 62.29%;}
.map .city.gjoa-haven                {top: 66.25%; left: 44.17%;}
.map .city.grise-fiord               {top: 39.79%; left: 47.50%;}
.map .city.igloolik                  {top: 59.38%; left: 57.29%;}
.map .city.iqaluit                   {top: 63.33%; left: 78.96%;}
.map .city.kimmirut                  {top: 66.46%; left: 78.96%;}
.map .city.kugaaruk                  {top: 64.17%; left: 51.25%;}
.map .city.naujaat                   {top: 67.71%; left: 56.67%;}
.map .city.pangnirtung               {top: 55.00%; left: 77.71%;}
.map .city.pond-inlet                {top: 47.92%; left: 57.08%;}
.map .city.qikiqtarjuaq              {top: 51.67%; left: 76.04%;}
.map .city.rankin-inlet              {top: 81.25%; left: 53.13%;}
.map .city.sanerajak                 {top: 61.25%; left: 58.33%;}
.map .city.taloyoak                  {top: 62.50%; left: 46.67%;}
.map .city.whale-cove                {top: 83.13%; left: 52.92%;}

/*map-home*/
.map-home {margin: 0 auto;}
.map-home a {background-color: unset !important;}

/*map-missions*/
.map-missions {float: left;}
.map-missions .map {margin-right: -30px;}
.map-missions img {background-color: #8ec6e3;}
.map-missions .city {cursor: pointer;}
.map-missions .city b,
.map-missions .city:hover {background-color: rgba(255, 224, 0, .8);}
.map-missions .city:hover b {background: #fff;}

/*city-form, city-list*/
.city-form {padding-left: 30px;}
.city-form select {outline: none;}
.city-form label {margin-right: 10px;
                  cursor: pointer;
                  user-select: none;}
.city-list {padding-left: 15px;}
.city-list > p {padding-left: 10px;}
.city-list li > span {background-color: rgba(255, 255, 255, .5);
                      -webkit-border-radius: 30px; border-radius: 30px;/*rounded corners*/
                      padding: 3px 10px;
                      cursor: pointer;
                      user-select: none;}
.city-list li > span:hover {background-color: rgba(255, 224, 0, .8)}
.city-list .more-info {max-height: 0;
                       overflow: hidden;
                       -webkit-transition-property: max-height;/*Safari*/
                       -webkit-transition-duration: .5s;/*Safari*/
                       transition-property: max-height;
                       transition-duration: .5s;}
.city-list .more-info div {padding: 7px 0 0 10px;}
.city-list .more-info p span {font-size: 19px; font-size: 1.9rem;}
.city-list .more-info table {width: 100%;
                             margin-bottom: 20px;}
.city-list .more-info table th {width: 42%;
                                padding-right: 10px;
                                text-align: right;}
.city-list .more-info table th.br {padding-top: 10px;}

/***** read-more *****/
main .read-more-text {/*max-height by JS, "height:" not work with css transitions*/
                      overflow: hidden;
                      -webkit-transition-property: max-height;/*Safari*/
                      -webkit-transition-duration: 2s;/*Safari*/
                      transition-property: max-height;
                      transition-duration: 2s;}
main .read-more-separator {height: 36px;}/*makes sure button isn't covering text on expand*/
main .read-more-button {text-align: center;
                        height: 0;
                        background: linear-gradient(0.25turn, rgba(98, 147, 173, 0), rgba(98, 147, 173, .9), rgba(98, 147, 173, 0));
                        padding-bottom: 4px;
                        cursor: pointer;}
main .read-more-button:hover {background: linear-gradient(0.25turn, rgba(55, 112, 142, 0), rgba(55, 112, 142, .9), rgba(55, 112, 142, 0));}
main .read-more-button span {display: block;
                             background: radial-gradient(farthest-corner at center 100%, rgba(98, 147, 173, .9) 23%, rgba(98, 147, 173, 0) 70%);/*desktop & mobile*/
                             height: 50px;
                             width: 33%;
                             margin: 0 auto;
                             -webkit-border-radius: 50% 50% 0 0; border-radius: 50% 50% 0 0;/*rounded corners*/
                             line-height: 74px;
                             position: relative;
                             top: -46px;/*50pxHeight - 4pxPadding*/
                             color: #fff;
                             user-select: none;}
main .read-more-button:hover span {background: radial-gradient(farthest-corner at center 100%, #37708e 23%, rgba(18, 102, 196, 0) 70%);}/*desktop & mobile*/

/*---MOBILE & PRINTING--------------------------------------------------------*/
@media screen and (max-width: 985px)/*If browser window smaller than*/
{
    /*nav*/
    #wrapper nav * {display: block;
                    position: static;
                    min-width: auto;
                    width: auto;}
    #wrapper nav a {text-align: center;}
    #wrapper nav > ol > li > ol {display: none;}
    #wrapper nav > ol > li:hover > ol {display: block;}
    #wrapper nav a.arrow-more {background: url(../01img/i00-01-link-arrow-down.svg) no-repeat center bottom;}
    #wrapper nav > ol > li > ol > li > a:hover,
    #wrapper nav > ol > li > ol > li > a.selected {background-color: #6B94AC;}
    #wrapper nav > ol > li > ol > li > ol > li > a:hover,
    #wrapper nav > ol > li > ol > li > ol > li > a.selected {background-color: #4A7791;}
    #wrapper nav > ol > li > ol > li > ol > li:hover,
    #wrapper nav > ol > li > ol > li > ol > li.containing-selected {background: linear-gradient(#6B94AC 88%, #4A7791 88%);}
    #wrapper nav > ol > li > ol > li > ol > li > ol > li > a:hover,
    #wrapper nav > ol > li > ol > li > ol > li > ol > li > a.selected {background-color: #285975}
    #wrapper nav > ol > li > ol > li > ol > li > ol > li:hover,
    #wrapper nav > ol > li > ol > li > ol > li > ol > li.containing-selected {background: linear-gradient(#4A7791 88%, #285975 88%);}
    #wrapper nav > ol > li > ol > li > ol > li > ol > li > ol > li > a:hover,
    #wrapper nav > ol > li > ol > li > ol > li > ol > li > ol > li > a.selected {background-color: #073C5A;}
    main .pageBanner,
    main .pageBannerWithImg {min-height: auto;
                             margin: 0 -14px 18px -14px;}
    main .pageBanner img,
    main .pageBannerWithImg img {margin-bottom: 0;}
    main > section {padding: 0 14px;}/*h2*/
    /*.slideshow*/
    .slideshow {margin: 0 -14px 18px -14px !important;}
    /*side-div*/
    main div.div-float-left,
    main div.div-float-right {float: none;
                              width: auto;}
    /*.map*/
    .city-form {height: auto !important;
                padding-bottom: 14px !important;}
    .city-list {margin-left: -30px !important;
                padding-left: 0 !important;}
    .city-list > p {padding-left: 20px;}
    .map-missions {float: none !important;}
    .map-missions .map {margin-left: auto !important;
                        margin-right: auto !important;}
}
@media screen and (max-width: 440px)/*If browser window smaller than*/
{
    /***** header *****/
    header img:nth-child(2) {top: 104px;
                             left: 18px;}
}