@charset "utf-8";

:root{

    /* ----------- SOE -------- */

    --radius:8px;
    --transparent: transparent;


    --color-black:              #000000;
    --color-white:              #ffffff;

    --color-brand:              #ff9d00;   
    --color-brand-hover:        #ffbe57;
    --color-brand-active:       #ffac27;
    --color-brand-subtle:       green;
    --color-brand-contrast:     pink;

    --color-heading-primary:    #002560;
    --color-heading-secondary:  #e67f00;
    --color-heading-accent:     var(--color-brand);

    --color-text-primary:       #000000;
    --color-text-secondary:     purple;
    --color-text-muted:         gray;
    --color-text-disabled:      yellow;       
    --color-text-inverse:       #FFFFFF;
    --color-text-link:          var(--color-brand);
    --color-text-link-hover:    var(--color-brand-hover);

    --color-link:              var(--color-brand);
    --color-link-hover:         var(---color-brand-hover);

    --button-primary-bg:        var(--color-brand);
    --button-primary-bg-hover:  var(--color-brand-hover);
    --button-primary-bg-active: var(--color-brand-active);
    --button-primary-text:      #000000;

    --color-shadow:             #0000003d;
    --color-shadow-hover:       #00000024;

    --color-gray-lines:         #e5e5e5;
    --color-gray-active:        #E6E6E6;

    --color-bg-page:            #c9d3db;

    --color-bg-surface:         #FFFFFF;
    --color-surface-hover:      #FFFFFF;
    --color-surface-active:     #FFFFFF;

    --color-bg-card:            #FFFFFF;
    --color-card-hover:         #FFFFFF;
    --color-card-active:        #FFFFFF;



    /* ------- Menu ------- */

    --color-menu-level-1-text:          var(--color-text-primary);
    --color-menu-level-1-text-hover:    var(--color-brand);
    --color-menu-level-1-bg:          #ffffff;
    --color-menu-level-1-bg-hover:    #000000;

    --color-menu-level-2-text:          #000000;
    --color-menu-level-2-text-hover:    var(--color-brand);
    --color-menu-level-2-bg:            #d4d4d4;
    --color-menu-level-2-bg-hover:    #000000;

    --color-menu-level-2-desktop-text-hover:    #ffffff;


    --color-menu-level-3-text:          #000000;
    --color-menu-level-3-text-hover:    #000000;
    --color-menu-level-3-bg:            #bbbbbb;
    --color-menu-level-3-bg-hover:    #000000;

    --color-menu-level-3-desktop-text:  #000000;
    --color-menu-level-3-desktop-text-hover: #000000;

    --color-menu-level-1-lines:     #e5e5e5;
    --color-menu-level-2-lines:     #c1c1c1;
    --color-menu-level-3-lines:     #c1c1c1;



    /* ------------ footer ------------  */

    --footer-color-heading:            #ff9d00;
    --footer-color-bg:                  #101b2d;
    --footer-color-text:                #d5d5d5;

    --footer-button-primary-bg:            transparent;
    --footer-button-primary-bg-hover:      #ffffff14;
    --footer-button-primary-bg-active:     #dddddd14;
    --footer-button-primary-text:          #a5b3c8;
    --footer-button-primary-text-hover:     #ffffff;
    



}



html body {
  background-color: var(--color-bg-page);
}

h1,h2,h3,h4 {
  font-family: "canada-type-gibson", sans-serif;
  font-weight: 600;
  font-style: italic;
  color: var(--color-heading-primary);
}

h1 { font-size: 33px; line-height: 40px; }
h2 { font-size: 22px; line-height: 28px; color: var(--color-heading-secondary); }
h3 { font-size: 30px; line-height: 36px; }

/* Powermail */
.btn-group {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

button.btn-default.btn-primary {
  background-color: var(--button-primary-bg);
}

button.btn-default:hover {
  background-color: var(--button-primary-bg-hover);
}

button.btn-default {
  background-color: var(--button-primary);
  border: 0;
  padding: 10px;
  color: var(--button-primary-text);
  flex-grow: 1;
  margin: 0;
}

div legend.powermail_legend {
  display: block;
  color: var(--color-heading-primary);
  float: left;
  width: 100%;
  margin: 30px 0 20px 0;
  font-family: "canada-type-gibson", sans-serif;
  font-size: 28px;
  line-height: 33px;
  font-weight: 700;
}

#c13950 .video-wrapper,
#c21505 .video-wrapper {
  width: 100%;
  padding-bottom: 50%;
}

#c13950:lang(fr) .video-wrapper,
#c21505:lang(fr) .video-wrapper {
  width: 100.1%;
  padding-bottom: 56.4%;
}

.powermail_tab_navigation a.btn,
.powermail_tab_navigation a.btn.btn-primary {
  background-color: var(--button-primary-bg);
  padding: 8px 35px 13px 35px;
  color: var(--button-primary-text);
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  margin: 10px 10px 10px 0px;
  float: left;
}

.powermail_tab_navigation a.btn:hover,
.powermail_tab_navigation a.btn.btn-primary:hover {
  background-color: var(--button-primary-bg-hover);
}

.powermail_tab_navigation a.btn {
  background-color: var(--button-primary-bg);
}

/*
.powermail_fieldwrap.powermail_fieldwrap_type_file.powermail_fieldwrap_kindlyuploadaheadshotphotoforyouridentificationjpg {
  float: left;
  display: block;
  background-color: var(--button-primary);
  width: 100%;
  box-sizing: border-box;
  border-radius: 2px;
}
*/

legend {
  font-weight: 700;
}

a {
  color: var(--color-heading-primary);
}

/* Butto color */
a.btn-red,
a.download,
input.btn-red {
  background-color: var(--button-primary-bg);
  border: 0px solid var(--button-primary-bg);
  color: var(--button-primary-text);
}

a.btn-red:hover,
a.download:hover,
input.btn-red:hover {
  background-color: var(--button-primary-bg-hover);
}

#c13946 a.btn-red {
  display: block;
  float: left;
  width: 100%;
}

#footer a.btn-red.read-more-btn {
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg);
}

#footer a.btn-red.read-more-btn:hover {
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg-hover);
}

#footer h1 {
  font-style: normal;
}

#SOE-Logo img {
  display: none;
}

#content img {
  border-radius: 7px;
}

.video-wrapper {
  border-radius: 7px;
  overflow: hidden;
}

#footer {
  background-color: var(--footer-color-bg);
  background-blend-mode: luminosity;
}

#footer a:hover {
  color: var(--button-primary-text);
}

#right .content p.red-text {
  padding: 20px;
  box-sizing: border-box;
  color: var(--color-success);
}

#right .content h2 {
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
  color: var(--color-heading-primary);
}

a.footer-facebook   { background-image: url(../sysimages/social_soe.png); }
a.footer-youtube    { background-image: url(../sysimages/social_soe.png); }
a.footer-instagram  { background-image: url(../sysimages/social_soe.png); }

#menu li.home a     { background-image: url(../sysimages/social_soe.png); }
#menu li.search a   { background-image: url(../sysimages/social_soe.png); }



/* --------- NOT FINISHED ----------*/


#menu > ul > li.hassub > a:after { background: url(../sysimages/arrow_soe.png) no-repeat 0 0 / cover; }
#menu > ul > li > ul > li.hassub > a:after { background: url(../sysimages/arrow_soe.png) no-repeat 0 0 / cover; }

.no-touch #menu > ul > li > ul > li.hassub:hover > a:after,
#menu > ul > li > ul > li.hassub.hover > a:after{ background: url(../sysimages/arrow_soe.png) no-repeat 0 0 / cover; }

.no-touch #menu > ul > li > ul > li > ul > li:hover > a:after,
#menu > ul > li > ul > li > ul > li.hover > a:after{  background: url(../sysimages/arrow_soe.png) no-repeat 0 0px / cover;}

#menu > ul > li > ul > li > ul > li > a:after { background: url(../sysimages/arrow_soe.png) no-repeat 0 0 / cover; }











@media (min-width: 550px) {
  #SOE-Logo img {
    display: block;
    float: left;
    margin-top: 30px;
    width: 50%;
    margin-left: calc(50% / 2);
  }
}




@media (min-width: 720px) {

  h1 {
    font-size: 39px;
    line-height: 45px;
  }

  h2 {
    font-size: 20px;
    line-height: 25px;
  }

  h3 {
    font-size: 37px;
    line-height: 44px;
  }

  #SOE-Logo img {
    width: 50%;
    margin-left: calc(50% / 2);
  }


.no-touch #menu > ul > li > ul > li:hover > a,
#menu > ul > li > ul > li.hover > a {
    color: black;
}







}




@media (min-width: 1140px) {
  h1 {
    font-size: 46px;
    line-height: 51px;
  }

  #c13946 a.btn-red {
    width: 50%;
  }
}