@import "f_fontawesome512.css" screen;
@import "f_calibri.css" screen;
@import "f_saira.css" screen;

:root {

     /* header */
    --header-bgcolor: #ffffff;
    --header-height: calc(8vh);
    --header-height-menu: calc(7.5vh);
    --header-height: 3rem;
    --header-height-menu: 3rem;


    /* InfoCom Colors */
    --IC-blue: #00B0F0;
    --IC-bluegray: #4A6A88;
    --IC-bluegray2: #4A6A89;
    --IC-gray: #8B8B8B;
    --IC-navyblue: #1C48A0;
    --IC-spreports: #516a85;

    --IC-black0: #000000;
    --IC-black1: #212121;

    --IC-gray0: #595959;
    --IC-gray1: #BFBFBF;

    --IC-orange: #FFC000;
    --IC-yellowpastel: #FFECC0;
    --IC-yellowpastel2: #FDDE92;

    --IC-bluegreen-light: #96EEED;
    --IC-bluegreen-dark: #479DB1;

    /* other colors */

    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-white: #ffffff;

    /* 3 pillars */
    --color-3p1: var(--IC-blue);
    --color-3p1: var(--IC-navyblue);
    --color-3p1: var(--IC-bluegreen-dark);
    --color-3p2: var(--IC-orange);
    --color-3p3: var(--IC-gray1);


/* start temporary */

    --black0: #000000;
    --black1: #212121;

    --gray0: #212121; /* temporary */
    --gray1: #424242; /* temporary */
    --gray2: #616161; /* temporary */
    --gray3: #757575; /* temporary */
    --gray4: #9E9E9E; /* temporary */

/* end temporary */





     /* menu - normal */
    --parent-menu-text: var(--gray1);
    --menu-text: var(--gray1);
    --menu-text-bg: #ffffff;

    --menu-text-hover: #ffffff;
    --menu-text-hover-bg: var(--gray1);

    --parent-menu-arrow: var(--gray1);
    --menu-border-bottom: #efefef;


     /* menu - small */
    --menu-L1-bg: var(--gray1);
    --menu-L1-hover-bg: var(--gray2);
    --menu-L2-bg: var(--gray4);
    --menu-L2-hover-bg: var(--gray3);




    /*--- Fonts ---*/
    --icons: 'Font Awesome 5 Pro';
    --sai: 'Saira';
    --sailight: 'Saira Light';
    --saithin: 'Saira Thin';
    --callight: 'Calibri Light';

    --mol: 'Molde';
    --molbold: 'Molde Bold';
    --molcondensed: 'Molde Condensed';



    --parent-menu-font-size: 24px;
    --menu-font-size: 16px;

}

* {
    font-size: 1.25rem;
    font-weight: normal;
    font-family: 'Calibri Light', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}




/* standardize */





body {
  font-family: "'Calibri Light'", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.72222;
  color: var(--black0);
background: #fff;
}

a {
  color: var(--gray1);
  text-decoration: none;
  transition: .25s;
}

a:hover, a:focus {
  color: var(--gray1);
  text-decoration: none;
}

a:focus {
  outline: none;
}

ul{ list-style: none; }

img {
  max-width: 100%;
}

.img-rounded {
  border-radius: 3px;
}

.img-thumbnail {
  padding: 4px;
  line-height: 1.72222;
  background-color: #fff;
  border: 2px solid #bdc3c7;
  border-radius: 3px;
  transition: all .25s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.img-comment {
  font-size: 15px;
  line-height: 1.2;
  font-style: italic;
  margin: 24px 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.1;
  color: var(--black0);
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
  color: var(--black0);
}

h1,
h2,
h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

h4,
h5,
h6 {
  margin-top: 15px;
  margin-bottom: 15px;
}

h6 {
  font-weight: normal;
}

h1, .h1 {
  font-size: 61px;
}

h2, .h2 {
  font-size: 53px;
}

h3, .h3 {
  font-size: 40px;
}

h4, .h4 {
  font-size: 29px;
}

h5, .h5 {
  font-size: 28px;
}

h6, .h6 {
  font-size: 24px;
}

p {
  font-size: 18px;
  line-height: 1.72222;
  /* margin: 0 0 15px; */
  margin: 0rem;
  padding: 1rem 1rem 0rem 1rem;
}

.lead {
  margin-bottom: 30px;
  font-size: 28px;
  line-height: 1.46428571;
  font-weight: 300;
}


small,
.small {
  font-size: 83%;
  line-height: 2.067;
}



.lead {
  margin-bottom: 30px;
  font-size: 28px;
  line-height: 1.46428571;
  font-weight: 300;
}

blockquote {
  border-left: 3px solid #e7e9ec;
  padding: 0 0 0 16px;
  margin: 0 0 30px;
}

blockquote p {
  font-size: 20px;
  line-height: 1.55;
  font-weight: normal;
  margin-bottom: .4em;
}

blockquote small,
blockquote .small {
  font-size: 18px;
  line-height: 1.72222;
  font-style: italic;
  color: inherit;
}

blockquote small:before,
blockquote .small:before {
  content: "";
}

blockquote.pull-right {
  padding-right: 16px;
  padding-left: 0;
  border-right: 3px solid #e7e9ec;
  border-left: 0;
}

blockquote.pull-right small:after {
  content: "";
}


.img-comment {
  font-size: 15px;
  line-height: 1.2;
  font-style: italic;
  margin: 24px 0;
}


/* tile */


.tile {
  background-color: #f2f2f2;
  border-radius: 3px;
  padding: 14px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
}

.tile p {
  font-size: 15px;
  margin-bottom: 33px;
}

.tile-image {
  height: 100px;
  margin: 31px 0 27px;
  vertical-align: bottom;
z-index: 1;
}

.tile-image.big-illustration {
  height: 111px;
  margin-top: 20px;
  width: 112px;
}

.tile-title {
  font-size: 20px;
  margin: 0;
}


/* button */



.btn {
display: inline-block;
  border: none;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.4;
  border-radius: 3px;
  padding: 10px 15px;
  -webkit-font-smoothing: subpixel-antialiased;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
}



.btn [class^="fui-"] {
  margin: 0 1px;
  position: relative;
  line-height: 1;
  top: 1px;
}




.btn-primary {
    color: white;
    background-color: var(--parent-menu-text);
}


/* forms */





/* Small devices (mobile, 576px and up)*/
@media (max-width: 576px) {
.btn {
/*    font-size: 12px;*/
    width: 100%;
    padding: 10px 15px;
}
}

/* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {



}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.grecaptcha-badge {
z-index: 999;
}