@charset "UTF-8";
/**
 * Foundation for Sites by ZURB
 * Version 6.4.2
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */

/* 
Black              : black    [contrast ratio:]
Black              : #0a0a0a  [contrast ratio:19.63:1]


White              : white    [contrast ratio:]
                     #ffffff  [contrast ratio:01.01:1]
                     #fefefe  [contrast ratio:01.00:1]


Dark blue          : #2c3840  [contrast ratio:11.92:1]
                     #1468a0  [contrast ratio:01.44:1]  (primary: tab title->a->hover)

Shadow blue marine : #0c3d5d  [contrast ratio:11.31:1]  (primary : hollow/clear button border)
Shadow blue        : #126195  [contrast ratio:06.57:1]  (primary)
                     #14679e  [contrast ratio:06.01:1]
                     #1468a0  [contrast ratio:05.92:1]
Blue               : #1779ba  [contrast ratio:04.65:1]  (primary)
		     #1779ba  [contrast ratio:01.83:1]  (primary: tab title->a->focus)
                     #1673b1  [contrast ratio:01.69:1]  (primary: tab element)
Light/Sky blue     : #d7ecfa  [contrast ratio:01.21:1]  (primary: callout)


Shadow dark gray   : #3b3b3b  [contrast ratio:11.11:1]  (secondary: hollow/clear button border)
                     #5e5e5e  [contrast ratio:06.43:1]  (secondary)
Dark gray          : #c0c0c0  [contrast ratio:04.72:1]  (fieldset border)
                     #767676  [contrast ratio:04.50:1]  (secondary)
                     #8a8a8a  [contrast ratio:03.42:1]
Light gray         : #f9f9f9  [contrast ratio:08.11:1]	(table: body)
                     #f1f1f1  [contrast ratio:07.61:1]	(table: body)
                     #f3f3f3  [contrast ratio:07.74:1]	(table: body)
		     #ececec  [contrast ratio:07.27:1]  (table: footer)
                     #cacaca  [contrast ratio:01.63:1]
                     #e6e6e6  [contrast ratio:01.24:1]
		     #eaeaea  [contrast ratio:01.19:1]  (secondary: callout)


Shadow dark green  : #157539  [contrast ratio:05.73:1]  (success: hollow/clear button border)
Shadow light green : #22bb5b  [contrast ratio:02.50:1]  (success)
Light green        : #3adb76  [contrast ratio:01.80:1]  (success)
                     #e1faea  [contrast ratio:01.09:1]  (success: callout)


Light yellow       : #fff3d9  [contrast ratio:01.09:1]  (warning: callout)
					 
Shadow dark orange : #805700  [contrast ratio:06.35:1]  (warning: hollow/clear button border) -> Can use like Brown
Shadow orange      : #cc8b00  [contrast ratio:02.87:1]  (warning)
Orange             : #ffae00  [contrast ratio:01.84:1]  (warning)


Shadow dark red    : #67251a  [contrast ratio:11.22:1]  (alert: hollow/clear button border)
Shadow red         : #a53b2a  [contrast ratio:06.39:1]  (alert)
Red                : #cc4b37  [contrast ratio:04.50:1]  (alert/error/invalid element)
Light red          : #f7e4e1  [contrast ratio:01.21:1]  (alert: callout)


Pink               : #f9ecea  [contrast ratio:01.14:1]  (alert background when invalid input)
*/


/* Document */
body {
    color: #2c3840;
}

.font-normal {
  font-weight: normal; 
}
.font-bold {
  font-weight: bold; 
}
.font-italic {
  font-style: italic !important; 
}
.font-wide {
  letter-spacing: 0.25rem; 
}
.font-primary {
    color: #1779ba
}
.font-secondary {
    color: #767676
}
.font-success {
    color: #3adb76
}
.font-warning {
    color: #ffae00
}
.font-alert {
    color: #cc4b37
}

.font-app {
    /*font-family: TwCenMT;*/
    color: #2c3840;
}
.font-app .font-app-i {
    color: #1779ba;
}
@media print, screen and (min-width: 40em) {
    span  .font-app,
    p  .font-app,
    dd  .font-app {
        font-size: 1.1rem;
    }
    h1  .font-app {
        font-size: 3.3rem;
    }
    h2  .font-app {
        font-size: 2.8rem;
    }
    h3  .font-app {
        font-size: 2.1rem;
    }
    h4  .font-app {
        font-size: 1.8rem;
    }
    h5 .font-app {
        font-size: 1.4rem;
    }
    h6  .font-app {
        font-size: 1.1em;
    }
}

.width-25 {
  width: 25% !important; 
}
.width-40 {
  width: 40% !important; 
}
.width-50 {
  width: 50% !important; 
}
.width-60 {
  width: 60% !important; 
}
.width-75 {
  width: 75% !important; 
}
.width-100 {
  width: 100% !important; 
}

.height-25 {
  height: 25% !important; 
}
.height-50 {
  height: 50% !important; 
}
.height-75 {
  height: 75% !important; 
}
.height-100 {
  height: 100% !important; 
}

dd {
  margin-bottom: 1rem;
  font-size: inherit;
  line-height: 1.6;
  text-rendering: optimizeLegibility; 
}

hr {
    margin: 0;
}
.hr-full {
    max-width: 100%
}

.br-small {
    line-height: 25px
}
.br-medium {
    line-height: 50px
}
.br-large {
    line-height: 75px
}
.br-x-large {
    line-height: 100px
}
.br-xx-large {
    line-height: 125px
}
.br-auto {
    line-height: 75%
}

.panel:hover, .panel:focus {
    box-shadow: 0 2px 5px 0 #2c3840;
}

.section-zebra-gray {
    background-color: #f1f1f1;
}


.invisible {
    width: 0;
    display: none;
}


/* Top bar */
.title-bar {
    background-color: #2c3840;
}
.title-bar-grid {
    color: #2c3840;
    padding-bottom: 0.25rem;
    background-color: transparent;
    border-bottom: 1px solid #cacaca;
    margin-bottom:0.25rem
}


/* Stat bar */
.stat-bar {
    background-color: #eaeaea;

}
.stat {
    color: #2c3840;
}


/* Menu */
.submenu {
    list-style: none;
}

.menu-glyph {
    color: #ffffff;
    padding: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.menu-glyph-grid {
    color: #2c3840;
    vertical-align: middle;
    padding: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.menu-glyph:hover, .menu-glyph:focus,
.menu-glyph-grid:hover, .menu-glyph-grid:focus {
    color: #8a8a8a;
}
.menu-glyph-grid.button {
    color: #fefefe;
    background-color: #2c3840;
    margin: 0;
}


/* Off canvas */
.off-canvas .title-bar {
    height: 53px;
}

.close-button {
  color: #8a8a8a; 
}
.close-button:hover, .close-button:focus {
    color: #ffffff;
}


/* Header, Nav, Main and Sticky Footer */
.my-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.my-top-bar, .my-header, .my-nav, .my-footer {
    flex-shrink: 0;
}
.my-main {
    overflow: hidden;
    flex: 1 0 auto; /* Use 1 0 auto instead of just 1 for backwards compatibility with other browsers */
}

/* Card */
.card-divider {
    background: #2c3840;
    color: #fefefe;
}

/* Card profile */
.card-profile-stats {
  border: 1px solid #cacaca;
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  background: #fefefe;
}
.card-profile-stats .card-profile-stats-intro {
  text-align: center;
}
.card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-pic {
  border-radius: 50%;
  margin: 0 0 1.25rem;
}
.card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-content p:last-child {
  margin: 0;
}
.card-profile-stats .card-profile-stats-container {
  text-align: center;
}
.card-profile-stats .card-profile-stats-container .card-profile-stats-statistic {
  margin: 0 0 1.25rem;
}
.card-profile-stats .card-profile-stats-container .card-profile-stats-statistic p:last-child {
  margin: 0;
}
.card-profile-stats .card-profile-stats-more .card-profile-stats-more-link {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  color: #0a0a0a;
  padding: 0.5rem;
  cursor: pointer;
}
.card-profile-stats .card-profile-stats-more .card-profile-stats-more-content {
  display: none;
}
@media print, screen and (min-width: 64em) {
  .card-profile-stats .card-profile-stats-intro {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    text-align: left;
  }
  .card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-pic {
    margin: 0 1.25rem 0 0;
    max-width: 250px;
  }
  .card-profile-stats .card-profile-stats-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
}

/* Accordion card */
.accordion > .card, .card > .accordion-title {
    border: none;
}


/* Standard glyph */
.standard-glyph, .success-glyph, .alert-glyph {
    color: #8a8a8a;
    font-size: 24px
}
.standard-glyph:hover, .standard-glyph:focus {
    color: #2c3840;
}
.success-glyph:hover, .success-glyph:focus {
    color: #3adb76;
}
.alert-glyph:hover, .alert-glyph:focus {
    color: #cc4b37;
}

/* Objectif glyph */
.objectif-glyph {
    color: #8a8a8a;
    font-size: 120px
}
.objectif-glyph:hover, .objectif-glyph:focus {
    color: #2c3840;
}


/* Callout */
.callout.black {
    background-color: #0a0a0a;
    color: #f9f9f9; }
.callout.secondary-light {
    background-color: #f9f9f9;
    color: #0a0a0a; }
form > .callout {
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Orbit */
.orbit-top-backround {
   border-style: none; 
   margin: 0;
   background-position: top center;
   background-image: url('../img/home-top-orbit-earth-green.png');
   background-repeat: no-repeat;
}
@media print, screen and (max-width: 63.9375em) {
    .orbit-top-backround {
        height: 250px;
    }
    .orbit-middle-callout {
        margin-top: 40px;
        opacity: 0.9;
    }
}
@media print, screen and (min-width: 64em) {
    .orbit-top-backround {
        height: 430px;
    }
    .orbit-middle-callout {
        margin-top: 120px;
    }
}
.orbit-top-callout {
    color: white; 
    background-color: #2c3840; 
    opacity: 0.8; 
}
.orbit-middle-callout {
    vertical-align: middle;
}
@media print, screen and (max-width: 46em) {
    .orbit-top-callout {
        margin: -30px -40px 0 -40px;
    }
    .orbit-middle-callout {
        margin: 0 -40px 0 -40px;
        opacity: 0.6;
    }
}
.orbit-top-callout > h2 {
    margin-bottom: 0;
}
.orbit-top-callout > h6 {
    margin-top: -5px;
}


/* Quick View */
.quick-view {
    border: 1px solid #f1f1f1;
}
.quick-view-title {
    padding: 0.5rem 1rem 0 1rem;
    color: #fefefe;
    background-color: #2c3840;
    border-bottom: 1px solid #2c3840;
}
.quick-view-content {
    padding: 1rem;
}


/* Tabs */
.tabs {
    margin-bottom: 20px;
}
.tabs-panel {
    padding: 0;
}
.tabs-content {
    padding: 0;
    border: none;
}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
  background: #2c3840;
  color: #fefefe; 
}
.tabs-title > ul {
    border: none;
    padding: 0;
    margin: 0;
}
.tabs-title > ul > li > a {
    padding-left: 40px;
}
.tabs-title > ul > li > ul > li a {
    padding-left: 55px;
}

.tabs-base {
    margin-bottom: 0;
}
.tabs-title-base > a:focus, .tabs-title-base > a[aria-selected='true'] {
    background: #e6e6e6;
    color: #1779ba; 
}

.tabs-oldschool {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #e6e6e6;
}
.tabs-title-oldschool {
    background: #e6e6e6;
    color: #1779ba;
    margin-bottom: -1px;
}
.tabs-title-oldschool > a:focus, .tabs-title-oldschool > a[aria-selected='true'] {
    background: #fefefe;
    color: #1779ba; 
    margin-bottom: -1px;
    border: 1px solid #e6e6e6;
    border-bottom: 1px solid #fefefe;
}


/* Table */
@media print, screen and (max-width: 40em) {
  table, .quick-view {
    font-size: 70%; }
}
@media print, screen and (min-width: 40em) {
  table, .quick-view {
    font-size: 80%; }
}

table thead {
    border: 1px solid #2c3840;
    background: #2c3840;
    color: #fefefe;
}


/* Footer */
.footer-nav {
    color: #ffffff;
    align-items: center;
    background-color: #2c3840;
    justify-content: center;
    padding: 20px 20px 0 20px;
}

.footer-copyright {
    color: #cacaca;
    font-size: 1rem;
    padding-top: 1rem
}


/* Glyph */
.step {
    display: inline-block;
    line-height: 1;
    width: 10%;
}

.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
.size-120 { font-size: 120px }

.torso {
  background-image: url('../img/torso.svg');
}