:root {
    --green: #73AF0E;
    --blue: #001F46;
}

.blue {
    color: var(--blue); /*#001F46;*/
}

.close_button {
    /*
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    */
    width: 100px;
    border: none;
    color: white;
    background: var(--blue);
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.close_button:hover {
    /*
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    */
    
    background: var(--green);
}

.footer-pipe {
    display: inline-block;
}

.footer-container {
    width:100%; 
    display:flex; 
    flex-flow: row wrap; 
    align-items: center; 
    justify-content: space-evenly;
}

.gibson-book {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 300;
    font-style: normal;
}

.gibson-light {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 200;
    font-style: normal;
}

.gibson-medium {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 500;
    font-style: normal;
}

.green {
    color: var(--green); /*#73AF0E;*/
}

.list-title {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--green);
    font-size: 22px;
}

.list-title:hover {
    color: var(--blue);
}

.list-item-hover {
    color: var(--blue);
}

.list-text {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 200;
    font-style: normal;
    color: var(--blue);
    font-size: 18px;
}

.logo {
    height:84px;
}

.map-area:hover circle{
    cursor: pointer;
    fill: var(--blue);
}

.map-over circle {
    fill: var(--blue);
}

.map-container {
    flex-basis: 60%;
    flex-grow: 1;    
    width: 60%;
    min-width: 375px;
    /*height:650px;*/
    overflow: hidden;
    /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625)*/
    padding-bottom: 52%;
    position: relative;
}

.map-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}



.map-footer {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 52px;
    color: var(--blue);
    margin-top: -60px;
}

.map-footer-pipe {
    font-size: 36px;
}

.map-footer-tail {
    font-size: 26.26px;
}

.popup_content {
    margin: 10px;
    padding: 20px;
    max-width: 1280px;
    width: 95%;
    
   /* width: calc(vw*0.95);*/
    border: 1px solid #444;
    background: black;
    border-radius: 5px;
}

.view-button {
    background: url(../svg/button.svg) no-repeat; 
    font-family: canada-type-gibson, sans-serif;
    padding-left: 22px;
    font-weight: 400;
    text-align: left;
    font-style: normal;
    font-size: 26.26px;
    color: white;
    width: 250px;
    height: 40px;
    border: none;
    cursor: pointer;
}

h1 {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 200;
    font-style: normal;
    color: var(--green);
    font-size: 83.75px; 
    margin: 0;
}

ol {
    list-style: none;
    counter-reset: li;
    margin-left: 0px;
    padding-inline-start: 24px;
}

ol li {
    counter-increment: li;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--green);
    font-size: 22px;
    cursor: pointer;
}

ol li::before {
    content: "." counter(li) ;
    display: inline-block; 
    width: 1em;
    margin-left: -1.5em;
    margin-right: 0.5em; 
    text-align: right; 
    direction: rtl;
    color: var(--blue);
    font-family: canada-type-gibson, sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 22px;
}

ol li:hover {
   color: #001F46;
}


p {
    font-family: canada-type-gibson, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    color: var(--blue);
}

p.footer {
    margin: 4px 10px;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 500;
    font-style: normal;
}


#outer-container {
    max-width: 1200px;
    margin: 0 auto;
}


@media (min-aspect-ratio: 16/9) {
  .popup_content {
        /*width: 96%;*/
        width: calc(100vh*1.6);
    } 
}
@media only screen and (max-width : 1000px){
    .map-footer {
        font-family: canada-type-gibson, sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 52px;
        color: var(--blue);
        margin-top: 0px;
        margin-bottom:0px;
    }
    ol {
        margin-left: 6px;
    }
}

@media only screen and (max-width: 480px ){ /*(min-device-width : 375px) and (max-device-width : 736px){*/ 
        
    
    .close_button {
        /*
        position: absolute;
        right: 4px;
        top: 4px;
        width: 30px;
        height: 30px;
        */
        border: none;
        color: white;
        background: var(--blue);
        border-radius: 5px;
        cursor: pointer;
    }
    
    .logo {
        height:70px;
    }  
    
    .popup_content {
        margin: 4px;
        padding: 40px 5px 10px 5px;
        width: 90%;
       /* width: calc(vw*0.95);*/
        border: 1px solid #444;
        background: black;
        border-radius: 5px;
    }    
    
    h1 {        
        font-size: 54px; 
        font-size: 12vw;
        margin: 10px;
    }
    
    ol {
        margin-left: 1px;
        padding-inline-start: 12px;
    }
    
    .footer-container {
        width:100%; 
        display:flex; 
        flex-direction: column; 
        align-items: flex-start; 
        justify-content: space-evenly;
    }
    
    .footer-pipe {
        display: none;
    }
    
    .map-area:hover circle{
        fill: #3499CC;
    }
    
    .map-container {
        /*min-width: 375px;*/
        /*width: 100%;*/
        padding-bottom: 86%;
    }  
    
    .map-footer {    
        font-size: 31.2px;
        color: var(--blue);
        margin-top: 0px;
    }

    .map-footer-pipe {
        font-size: 21.6px;
    }

    .map-footer-tail {
        font-size: 15.75px;
    }
    
}