/* Global variables */ 

/* Fonts */ 

@font-face {
    font-family: 'IBMPlexSans-Regular';
    font-weight: 400; 
    font-display: fallback;
    font-style: normal;
    src: url('../fonts/IBMPlexSans-Regular.woff') format('woff-variations'),
         url('../fonts/IBMPlexSans-Regular.woff2') format('woff2-variations');
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'IBMPlexSans-SemiBold';
    font-weight: 400; 
    font-display: fallback;
    font-style: normal;
    src: url('../fonts/IBMPlexSans-SemiBold.woff') format('woff-variations'),
         url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2-variations');
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-variant-ligatures: discretionary-ligatures;
    font-feature-settings: "dlig";
    -moz-font-feature-settings: "dlig";
    -ms-font-feature-settings: "dlig";
    -o-font-feature-settings: "dlig";
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* ========================================================================== */ 


/* Scale logic */ 

:root {
    /* default scale coefficient */ 
    --scale-coef: 1px;
}

/* Scale coeffieicent for screens big and small */ 
/* Formula: calc(min + (mix.px - min) * ((100vw - minvw.px) / (maxvw - minvw))); */ 

/* For screens from 320 to 480 */ 
@media only screen and (max-width: 480px) {
  :root {
    --scale-coef: calc(0.75px + (1 - 0.75) * ((100vw - 320px) / (480 - 320)));
  }
}

/* For screens from 1280 to 1600 */ 
@media only screen and (min-width: 1280px) {
  :root {
    --scale-coef: calc(1px + (1.25 - 1) * ((100vw - 1280px) / (1600 - 1280)));
  }
}

/* For screens from 1600 to 2000 */ 
@media only screen and (min-width: 1600px) {
  :root {
    --scale-coef: calc(1.25px + (1.5 - 1.25) * ((100vw - 1600px) / (2000 - 1600)));
  }
}

/* For screens from 2000 to 4000 and more */ 
@media only screen and (min-width: 2000px) {
  :root {
    --scale-coef: calc(1.5px + (2 - 1.5) * ((100vw - 2000px) / (4000 - 2000)));
  }
}

/* Linear scale according to scale coefficient */ 

:root {
    --space-lin-1:     calc(var(--scale-coef) * 1);
    --space-lin-8:     calc(var(--scale-coef) * 8);
    --space-lin-16:    calc(var(--scale-coef) * 16);
    --space-lin-24:    calc(var(--scale-coef) * 24);
    --space-lin-32:    calc(var(--scale-coef) * 32);
    --space-lin-48:    calc(var(--scale-coef) * 48);
    --space-lin-56:    calc(var(--scale-coef) * 56);
    --space-lin-64:    calc(var(--scale-coef) * 64);
    --space-lin-72:    calc(var(--scale-coef) * 72);
    --space-lin-96:    calc(var(--scale-coef) * 96);
    --space-lin-128:   calc(var(--scale-coef) * 128);
    --space-lin-160:   calc(var(--scale-coef) * 160);
    --space-lin-192:   calc(var(--scale-coef) * 192);
}   

/* Non-linear scale according to scale coefficient */ 
/* Try to make it like with fonts */ 

:root {
    --space-nonlin-56: var(--space-lin-56);
    --space-nonlin-64: var(--space-lin-64);
    --space-nonlin-72: var(--space-lin-72);
    --space-nonlin-96: var(--space-lin-96);
    --space-nonlin-128: var(--space-lin-128);
    --space-nonlin-160: var(--space-lin-160);
    --space-nonlin-192: var(--space-lin-192);
}  

@media only screen and (max-width: 960px) {
  :root {
    --space-nonlin-192: var(--space-lin-160);
    --space-nonlin-160: var(--space-lin-128);
    --space-nonlin-128: var(--space-lin-96);
    --space-nonlin-96: var(--space-lin-72);
    --space-nonlin-72: var(--space-lin-64);
    --space-nonlin-64: var(--space-lin-56);
    --space-nonlin-56: var(--space-lin-48);
  }
}

@media only screen and (max-width: 720px) {
  :root {
    --space-nonlin-192: var(--space-lin-128);
    --space-nonlin-160: var(--space-lin-96);
    --space-nonlin-128: var(--space-lin-72);
    --space-nonlin-96: var(--space-lin-64);
    --space-nonlin-72: var(--space-lin-56);
    --space-nonlin-64: var(--space-lin-48);
    --space-nonlin-56: var(--space-lin-32);
  }
}

/* ------------------------------------------------ */ 

/* Scaling font-size */ 

:root {
    /* default font-scale coefficient */ 
    --font-scale-coef: 1px;
}

/* For screens from 320 to 480 */ 
@media only screen and (max-width: 480px) {
  :root {
    --font-scale-coef: calc(0.75px + (1 - 0.75) * ((100vw - 320px) / (480 - 320)));
  }
}

/* For screens from 1280 to 1600 */ 
@media only screen and (min-width: 1280px) {
  :root {
    --font-scale-coef: calc(1px + (1.25 - 1) * ((100vw - 1280px) / (1600 - 1280)));
  }
}

/* For screens from 1600 to 2000 */ 
@media only screen and (min-width: 1600px) {
  :root {
    --font-scale-coef: calc(1.25px + (1.5 - 1.25) * ((100vw - 1600px) / (2000 - 1600)));
  }
}

/* For screens from 2000 to 4000 and more */ 
@media only screen and (min-width: 2000px) {
  :root {
    --font-scale-coef: calc(1.5px + (2 - 1.5) * ((100vw - 2000px) / (4000 - 2000)));
  }
}

/* Linear font scale according to scale coefficient */ 

:root {
    /* Scale for font size and line spacing */ 
    --font-size-unit:       calc(var(--font-scale-coef) * 16);
    --font-size-small:      calc(var(--font-scale-coef) * 14);
    --font-size-small-lh:   calc(var(--font-size-small) * 1.333);
    --font-size-lin-b:      calc(var(--font-scale-coef) * 16); 
    --font-size-lin-b-lh:   calc(var(--font-size-lin-b) * 1.5);
    --font-size-lin-m:      calc(var(--font-scale-coef) * 20.8); 
    --font-size-lin-m-lh:   calc(var(--font-size-lin-m) * 1.5);
    --font-size-lin-l:      calc(var(--font-scale-coef) * 24);
    --font-size-lin-l-lh:   calc(var(--font-size-lin-l) * 1.333);
    --font-size-lin-xl:     calc(var(--font-scale-coef) * 32);
    --font-size-lin-xl-lh:  calc(var(--font-size-lin-xl) * 1.25);
    --font-size-lin-xxl:    calc(var(--font-scale-coef) * 48);
    --font-size-lin-xxl-lh: calc(var(--font-size-lin-xxl) * 1.166);
}

/* Non-linear scale according big fonts */ 

:root {
    /* Defult is equal to linear size */ 
    --font-size-nonlin-xl: var(--font-size-lin-xl);
    --font-size-nonlin-xl-lh: var(--font-size-lin-xl-lh);
    --font-size-nonlin-xxl: var(--font-size-lin-xxl);
    --font-size-nonlin-xxl-lh: var(--font-size-lin-xxl-lh);
    
}

/* For screens from less than 960 */ 
@media only screen and (max-width: 960px) {
  :root {
    --font-size-nonlin-xl: var(--font-size-lin-l);
    --font-size-nonlin-xl-lh: var(--font-size-lin-l-lh);
    --font-size-nonlin-xxl: var(--font-size-lin-xl);
    --font-size-nonlin-xxl: var(--font-size-lin-xl-lh);
  }
}


/* ------------------------------------------------ */ 


/* Gloabl layout controls */
/* Most commonly used spacing */ 

:root {
    /* Global margins */ 
    --global-spacing-lr: 10vw; /* most screens spcing left and right*/ 
    --global-spacing-left: 10vw;
    --global-spacing-right: 10vw;
}

/* For mobile phones */ 
@media only screen and (max-width: 480px) {
    :root {
        /* Global */ 
        --global-spacing-lr: var(--space-lin-32);
        --global-spacing-left: var(--space-lin-32);
        --global-spacing-right: var(--space-lin-32);
    }
}

/* For landcape on small screens height less than 440 */ 
@media only screen and (max-height: 440px) {
    :root {
        /* Global */ 
        --global-spacing-lr: var(--space-lin-32);
        --global-spacing-left: var(--space-lin-32);
        --global-spacing-right: var(--space-lin-32);
    }
}

/* Style */ 
/* Colors */ 

:root {
    --black: #292929;
    --white: #FFFFFF;
    --blue: #009CAF;
    --dark-blue: #08879D;
    --warm-grey-light: #F7F6F2;
    --warm-grey: #EBEAE6;
    --dark-grey: #7A7A7A;
    --grey: #B7B7B7;
    --transperent-white: rgba(255,255,255,.25);
}

/* Fonts */ 

:root {
    --primary-font: 'IBMPlexSans-Regular';
    --secondary-font: 'IBMPlexSans-SemiBold';
}



/* ============================================================================ */ 


/* Typography classes */ 

/* Small font */ 

.primaryFontSmallGrey {
    font-family: var(--primary-font);
    font-size: var(--font-size-small);
    line-height: var(--font-size-small-lh);
    color: var(--grey);
    text-decoration: none; 
}

.primaryFontSmallWhite {
    font-family: var(--primary-font);
    font-size: var(--font-size-small);
    line-height: var(--font-size-small-lh);
    color: var(--white);
    text-decoration: none; 
}

/* Primary font */ 

.primaryFontBody {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--black);
    text-decoration: none; 
}

.primaryFontBodyGrey {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--grey);
    text-decoration: none; 
}

.primaryFontBodyWhite {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--white);
    text-decoration: none; 
}

.primaryFontBodyDarkGrey {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--dark-grey);
    text-decoration: none; 
}

.primaryFontM {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-m);
    line-height: var(--font-size-lin-m-lh);
    color: var(--black);
    text-decoration: none; 
}

.primaryFontMWhite {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-m);
    line-height: var(--font-size-lin-m-lh);
    color: var(--white);
    text-decoration: none; 
}


.primaryFontL {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-l);
    line-height: var(--font-size-lin-l-lh);
    color: var(--black);
    text-decoration: none; 
}


.primaryFontMDarkGrey {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-m);
    line-height: var(--font-size-lin-m-lh);
    color: var(--dark-grey);
    text-decoration: none; 
}

.primaryFontMGrey {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-m);
    line-height: var(--font-size-lin-m-lh);
    color: var(--grey);
    text-decoration: none; 
}

/* Seccondary Font */ 

.secondaryFontSmallWhite {
    font-family: var(--secondary-font);
    font-size: var(--font-size-small);
    line-height: var(--font-size-small-lh);
    color: var(--white);
    text-decoration: none; 
}

.secondaryFontBody {
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--black);
    text-decoration: none; 
}

.secondaryFontBodyGrey {
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--grey);
    text-decoration: none; 
}

.secondaryFontM {
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-m);
    line-height: var(--font-size-lin-m-lh);
    color: var(--black);
    text-decoration: none; 
}

.secondaryFontL {
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-l);
    line-height: var(--font-size-lin-l-lh);
    color: var(--black);
    text-decoration: none; 
}

.secondaryFontXL {
    font-family: var(--secondary-font);
    font-size: var(--font-size-nonlin-xl);
    line-height: var(--font-size-nonlin-xl-lh);
    color: var(--black);
    text-decoration: none; 
}

.secondaryFontXXL {
    font-family: var(--secondary-font);
    font-size: var(--font-size-nonlin-xxl);
    line-height: var(--font-size-nonlin-xxl-lh);
    color: var(--black);
    text-decoration: none; 
}



/* ============================================================================ */ 


/* Layout elements */ 

/* Wrappers */ 

.contentWrapper {
    width: 100vw;
    padding-left: var(--global-spacing-left);
    padding-right: var(--global-spacing-right);
    padding-top: var(--space-nonlin-128);
    padding-bottom: var(--space-nonlin-160);
}

.contentWrapper > :last-child {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/* Headings */ 

/* Heading H1-H2 */ 

.headingOne {
    width: 72%;
    margin-bottom: var(--space-nonlin-72);
}
/* This need if we have subheadings */ 
.headingOne * {
    margin-bottom: var(--space-lin-24);
}
/* if no have margins is 0 */ 
.headingOne > :last-child {
    margin-bottom: 0px;
}

.subheadingOne {
    /* in case need special style */ 
}

@media only screen and (max-width: 800) {
    .headingOne {
        width: 100%;
    }
}



/* H2 in this case it's same size as H1 but may differ sometimes */ 

.headingTwo {
    width: 72%;
    margin-bottom: var(--space-nonlin-72);
}
/* This need if we have subheadings */ 
.headingTwo * {
    margin-bottom: var(--space-lin-24);
}
/* if no have margins is 0 */ 
.headingTwo > :last-child {
    margin-bottom: 0px;
}

.subheadingTwo {
    /* in case need special style */ 
}

@media only screen and (max-width: 800px) {
    .headingTwo {
        width: 100%;
    }
}

/* Heading H3 */ 

.headingThree {
    margin-bottom: var(--space-lin-48);
}

/* H4 */

.headingFour {
    margin-bottom: var(--space-lin-16);
}

/* H5 */

.headingFive {
    margin-bottom: var(--space-lin-8);
}


/* Text blocks */ 

.specialQuote {
    width: 70%;
    padding: var(--space-lin-32);
    padding-left: calc(var(--space-lin-1) * 40);
    background-color: var(--warm-grey-light);
    border-left: solid 2px;
    border-color: var(--blue);
    margin: 0 auto;
    margin-bottom: var(--space-nonlin-72);
}

@media only screen and (max-width: 800px) {
    .specialQuote{
        width: 100%;
    }
}


/* Buttons */ 

.button {
    --button-height: var(--space-lin-48);
    display: table;
    height: var(--button-height);
    border: solid 1px;
    border-color: var(--blue);
    border-radius: calc(var(--button-height) / 2);
    padding-left: var(--space-lin-32);
    padding-right: var(--space-lin-32);
    padding-top: calc(var(--space-lin-1) * 11);
    padding-bottom: calc(var(--space-lin-1) * 13);
    /* Font  */
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--blue);
    text-decoration: none; 
    cursor: pointer;
} 

.button > .buttonText {
    width: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.button:hover {
    border-color: var(--blue);
    background-color: var(--blue);
    color: white;    
}

/* centered button */ 
.buttonWrapper > .button {
    margin: 0 auto;
    margin-top: var(--space-lin-48);
}


.buttonAccent {
    --button-height: var(--space-lin-48);
    display: table;
    height: var(--button-height);
    border: solid 1px;
    border-color: var(--blue);
    border-radius: calc(var(--button-height) / 2);
    background-color: var(--blue);
    padding-left: var(--space-lin-32);
    padding-right: var(--space-lin-32);
    padding-top: calc(var(--space-lin-1) * 11);
    padding-bottom: calc(var(--space-lin-1) * 13);
    /* Font  */
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--white);
    text-decoration: none; 
    cursor: pointer;
} 

.buttonAccent > .buttonText {
    width: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.buttonAccent:hover {
    border-color: var(--dark-blue);
    background-color: var(--dark-blue);
    color: white;    
}

.buttonWhiteGhost {
    --button-height: var(--space-lin-48);
    display: table;
    height: var(--button-height);
    border: solid 1px;
    border-color: var(--white);
    border-radius: calc(var(--button-height) / 2);
    background-color: transparent;
    padding-left: var(--space-lin-32);
    padding-right: var(--space-lin-32);
    padding-top: calc(var(--space-lin-1) * 11);
    padding-bottom: calc(var(--space-lin-1) * 13);
    /* Font  */
    font-family: var(--secondary-font);
    font-size: var(--font-size-lin-b);
    line-height: var(--font-size-lin-b-lh);
    color: var(--white);
    text-decoration: none; 
    cursor: pointer;
} 

.buttonWhiteGhost > .buttonText {
    width: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.buttonWhiteGhost:hover {
    border-color: var(--white);
    background-color: var(--white);
    color: var(--blue); 
}




/* centered button */ 
.buttonWrapper > .button {
    margin: 0 auto;
    margin-top: var(--space-lin-48);
}

/* centered button */ 
.buttonWrapper > .buttonAccent {
    margin: 0 auto;
    margin-top: var(--space-lin-48);
}


.inlineLink {
    font-family: var(--secondary-font);
    color: var(--blue);
    text-decoration: none; 
    border-bottom: solid 1px;
    border-color: var(--blue);
}

.inlineLink:hover {
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}











/* From placeholders */ 

::-webkit-input-placeholder { /* Edge */
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-1);
    line-height: var(--font-size-lin-1-lh);
    text-decoration: none; 
    color: var(--light-purple);
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-1);
    line-height: var(--font-size-lin-1-lh);
    text-decoration: none; 
    color: var(--light-purple);
}

::placeholder {
    font-family: var(--primary-font);
    font-size: var(--font-size-lin-1);
    line-height: var(--font-size-lin-1-lh);
    text-decoration: none; 
    color: var(--light-purple);
}