/* RES phone */


@media only screen and (max-width: 760px)
{


    /* font sizes */

    H1
    {
    font-size: 23px !important ;
    }

    H2
    {
    font-size: 15px ;
    }

    H3
    {
    font-size: 21px ;
    }

    H4
    {
    font-size: 15px ;
    }

    H5, H15
    {
    font-size: 20px ;
    }

    H6, H16
    {
    font-size: 15px ;
    }

    H7
    {
    font-size: 17px ;
    }

    H8
    {
    font-size: 13px ;
    }


    H10
    {
    margin-bottom: 24px ;
    font-size:  9px ;
    letter-spacing: 1px ;
    }

    BODY
    {
    font-size: 15px ;
    }

    .tbl
    {
    font-size: 14px;
    }

    SECTION.quote blockquote
    {
    font-size: 18px ;
    }

    SECTION.quote blockquote I
    {
    font-size: 15px ;
    }


    A.cnt U 
    {
    font-size: 16px ;
    }

    H9
    {
    font-size: 15px ;
    }

    FOOTER
    {
    font-size: 15px ;
    }









    /* FRAME + CONTAINER */

    SECTION > DIV,
    FOOTER > DIV,
    HEADER > DIV > DIV
    {
    margin-left: 10% ;
    margin-right: 10% ;
    }

    SECTION > DIV
    {
    display: block ; 
    width: 80% ;
    }

    SECTION.c1 > DIV
    {
    display: block ; 
    }

    SECTION.c1 > DIV,
    FOOTER > DIV
    {
    width: 80% ;
    }

    SECTION.colour.c1 > DIV > DIV
    {
    column-count: 1 ;
    }













    /* vertical */

    SECTION, FOOTER
    {
    padding-top: 32px ;
    padding-bottom: 32px ;
    }

    P, UL, OL, .mt, A.cta, SECTION NAV, SECTION.colour > DIV > DIV, SECTION.photo > DIV > DIV, SECTION.colour.c1 > DIV > DIV
    {
    margin-top: 24px ;
    }

    SECTION.link NAV
    {
    margin-top: 32px ;
    }

    SECTION > DIV:nth-of-type(2)
    {
    margin-top: 48px ;
    }





    



    /* HEADER */

    BODY
    {
    padding-top: 60px ;
    }

    .bmk 
    {
    top: -60px ;
    }

    HEADER
    {
    top: -60px ;

    transition-property: top ;
    transition-duration: 400ms ;
    transition-timing-function: ease-in-out ;
    }

    header.scroll
    {
        top: 0px ;
    }

    HEADER > DIV
    {
    height: 60px ;
    }

    HEADER > DIV > DIV:nth-of-type(1) 
    {
    width: 80% ;
    }

    HEADER > DIV > DIV:nth-of-type(2) 
    {
    width: 80% ;
    }

    MAIN SECTION.intro
    {
    margin-top: -60px ;
    }


    /* logo */

    #logo
    {
    margin-top: 6px ;
    opacity: 1 ;
    }

    #logo > div
    {
    width: 98px ;
    height: 40px ;
    }

  
  
    /* header  - customer + partner logo */

    HEADER FIGURE
    {
    margin-top: 5px ;
    }

    HEADER FIGURE.cpl
    {
    margin-left: 40px ;
    width: 98px ;
    height: 50px ;
    }

    HEADER FIGURE.cpl::before
    {
    top: 21px ;
    left: -25px ;
    height: 12px ;
    width: 12px ;  
    }

  
  
  


    /* H navigatie */

    HEADER NAV
    {
    display: none
    }






















    
    /* SECTION TYPES */



    /* INTRO */

    SECTION.intro-img
    {
    padding-top: 38px ;
    padding-bottom: 0px ;
    }

    SECTION.intro-img > DIV
    {
    display: block ;
    width: 80% ;
    margin-left: 10% ;
    margin-right: 0px ;
    }

    .logo-intro
    {
    width: 98px ;
    height: 40px ;
    }

    SECTION.intro-img > DIV > DIV,
    SECTION.intro-sml > DIV:nth-of-type(2)
    {
    margin-top: 15px ;
    display: table ;
    }

    .logo-intro,
    .logo-intro.ils,
    .logo-intro.cpx
    {
    display: inline-block ;
    }

    .logo-intro.ils
    {
    padding-top: 5px ;
    padding-bottom: 19px ;
    }

    .logo-intro.cpx,
    SECTION.intro-sml .logo-intro.cpx
    {
    padding-top: 0px ;
    width: 44px ;
    height: 64px ;
    background-size: 14px auto ;
    background-position: 50% 48%;
    }

    .logo-intro.cpl,
    SECTION.intro-sml .logo-intro.cpl
    {
    display: table-cell ;
    text-align: left ;
    vertical-align: middle ;
    height: 64px ;
    }

    SECTION.intro-img FIGURE
    {
    display: block ;
    position: relative ;
    margin-top: 20px ;
    width: 100% ;
    height: 200px ;
    }

    SECTION.intro-img FIGURE SPAN
    {
    width: 43% ;
    }

    SECTION.intro-sml > DIV:nth-of-type(1)
    {
    width: 80% ;
    }

    SECTION.intro-sml > DIV:nth-of-type(2)
    {
    text-align: left ;
    width: auto ;
    }








    
    /* SEC COLOUR */

    SECTION.colour FIGURE
    {
    display: block ;
    position: inherit ;
    width: 80% ;
    margin-top: 10% ;
    margin-left: 10% ;
    height: 25vh ;
    }

    SECTION.colour > div:nth-of-type(2) H10
    {
    display: none ;
    }


    /*mirror */

    SECTION.colour.mirror > DIV 
    {
    margin-left: 10% ;
    }









    /* SEC PHOTO */

    SECTION.photo
    {
    min-height: 25vh ;
    }

    SECTION.photo > DIV
    {
    background-color: rgba(255,255,255,0.88) ;   /* white */
    width: 70% ;
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 0px ;
    }


    /*mirror */

    SECTION.photo.mirror > DIV
    {
    padding-left: 10%;
    padding-right: 10%;
    }


    /* half */

    SECTION.photo.half
    {
    padding-bottom: 0px ;
    }

    SECTION.photo.half FIGURE
    {
    display: block ;
    position: relative ;
    width: 100%;
    height: 30vh;
    }

    SECTION.photo.half > DIV
    {
    margin-left: 10% ;
    padding-top: 5% ;
    padding-left: 6% ;
    padding-right: 6% ;
    padding-bottom: 10% ;
    width: 68% ;
    border-top-right-radius: 20px ;
    border-bottom-right-radius: 0px ;
    border-top-left-radius: 20px ;
    border-bottom-left-radius: 0px ;
    }

    /* half mirror */

    SECTION.photo.half.mirror > DIV
    {
    width: 68% ;
    }








    /* VIDEO IMAGE */
    
    FIGURE.vid::before,
    FIGURE.vid:hover::before,
    SECTION.vid::before,
    SECTION.vid:hover::before
    {
    background-color: rgba(0,0,0,0) ;
    opacity: 1 ;
    }

    FIGURE.vid::before,
    SECTION.vid::before
    {
    background-size: 52px auto ;
    }

    FIGURE.vid::after,
    SECTION.vid::after
    {
    background-size: 26px auto ;
    background-position: 51.1% 50% ;
    }









    /* SEC ATTENTION */

    SECTION.attention H3, 
    SECTION.attention H5 
    {
    top: -14px ;
    }

    SECTION.attention P,
    SECTION.attention UL
    {
    margin-top: 36px ;
    margin-left: 24px ;
    margin-right: 24px ;
    margin-bottom: 24px ;
    }

    SECTION.attention.att-nh SPAN P,
    SECTION.attention.att-nh SPAN UL
    {
    margin-top: 26px ;
    }














    /* SEC TRILOGY */

    SECTION.trilogy
    {
    }

    SECTION.trilogy > DIV
    {
    display: block ;
    }

    SECTION.trilogy > DIV > DIV,
    SECTION.trilogy.trilogy-c2 > DIV > DIV
    {
    display: block ;
    width: 100% ;
    padding-left: 0px ;
    padding-right: 0px ;
    border-left: 0px none rgba(0,0,0,0) ;
    border-top: 1px solid #ffffff ;
    margin-top: 24px ;
    padding-top: 24px ;
    }

    SECTION.trilogy.white > DIV > DIV,
    SECTION.trilogy.lightgrey > DIV > DIV
    {
    border-left: 0px none rgba(0,0,0,0) ;
    border-top: 1px solid #202024 ;   /* darkgrey */
    }

    SECTION.trilogy > DIV > DIV:nth-of-type(1)
    {
    margin-top: 0px ;
    padding-top: 0px ;
    border-top: 0px none rgba(0,0,0,0) ;
    }

    SECTION.trilogy LI
    {
    padding-left: 16px ; 
    }

    SECTION.trilogy UL LI::before
    {
    font-size: 16px ;
    }


















    /* SEC QUOTE */

    SECTION.quote-dark
    {
    background-size: 300% auto ;
    }

    SECTION.quote-dark blockquote 
    {
    width: 70%;
    margin-right: 5% ;
    }

    SECTION.quote blockquote::before,
    SECTION.quote blockquote::after
    {
    font-size: 40px ;
    }

    SECTION.quote-dark blockquote::before
    {
    top: -12px ;
    left: -50px ;
    }

    SECTION.quote-light blockquote::before
    {
    top: -27px ;
    }

    SECTION.quote-light blockquote::after
    {
    bottom: -27px ;
    }

    SECTION.quote-light blockquote::before,
    SECTION.quote-light blockquote::after
    {
    left: 38% ;
    width: 24% ;
    }

    SECTION.quote-dark blockquote
    {
    width: 80% ;
    margin-left: 20% ;
    }

    SECTION.quote-light blockquote
    {
    width: 100% ;
    padding-top: 30px ;
    padding-bottom: 30px ;
    }














    /* SEC GRAPHIC */

    SECTION.graphic IMG
    {
    width: 80% ;
    }









    /* SEC CTAS */

    SECTION.ctas 
    {
    padding-top: 24px ;
    padding-bottom: 24px ;
    }

    SECTION.ctas > DIV > DIV:nth-of-type(1)
    {
    width: 40px ;
    min-width: initial ;
    }

    SECTION.ctas > DIV > DIV:nth-of-type(2)
    {
    font-size: 16px ;
    line-height: 18px ;
    }

    SECTION.ctas FIGURE 
    {
    top: -36% ;
    }

    SECTION.ctas > DIV > DIV:nth-of-type(2) B
    {
    margin-top: 8px ;
    }








    /* SEC TABLE */

    SECTION.table
    {
    }

    .tbl
    {
    display: block ;
    width: 100% ;
    margin-left: 0px ;
    margin-right: 0px ;
    min-width: initial ;
    }

    .tbl > DIV
    {
    display: block ;
    }

    .tbl > DIV > DIV
    {
    display: block ;
    padding-top: 8px ;
    padding-left: 10px ;
    padding-right: 10px ;
    padding-bottom: 8px ;
    }

    .tbl > DIV > DIV:last-of-type
    {
    padding-right: 10px ;
    }

    .tbl > DIV > DIV::after
    {
    display: none ;
    }

    .tbl.tbl-hr1 > DIV:nth-of-type(1),
    .tbl.tbl-hr2 > DIV:nth-of-type(1)
    {
    display: none ;
    }

    .tbl > DIV > DIV > SPAN
    {
    display: block ;
    margin-bottom: 2px ; 
    opacity: 0.66 ;
    font-size: 13px ;
    font-weight: 400 ;
    font-style: italic ;
    }

    .tbl.ac1 > DIV > DIV:nth-of-type(1),
    .tbl.ac2 > DIV > DIV:nth-of-type(2),
    .tbl.ac3 > DIV > DIV:nth-of-type(3),
    .tbl.ac4 > DIV > DIV:nth-of-type(4),
    .tbl.ac5 > DIV > DIV:nth-of-type(5),
    .tbl.ar1 > DIV > DIV:nth-of-type(1),
    .tbl.ar2 > DIV > DIV:nth-of-type(2),
    .tbl.ar3 > DIV > DIV:nth-of-type(3),
    .tbl.ar4 > DIV > DIV:nth-of-type(4),
    .tbl.ar5 > DIV > DIV:nth-of-type(5)
    {
    text-align: left ;
    }














    /* SEC LOGOS */

    SECTION.logos
    {
    padding-top: 28px;
    padding-bottom: 28px;
    }

    SECTION.logos FIGURE
    {
    width: 28% ;
    padding-top: 28% ;
    margin-left: 4px ;
    margin-right: 4px ;
    margin-top: 4px ;
    margin-bottom: 4px ;
    }

    SECTION.logos-casc FIGURE
    {
    margin-left: 4px ;
    margin-right: 4px ;
    }

    SECTION.logos-casc FIGURE:nth-of-type(even)
    {
    margin-top: 4px ;
    margin-bottom: 4px ;
    }













    


    /* SEC TIMELINE */

    SECTION.timeline
    {
    }

    SECTION.timeline FIGURE
    {
    margin-left: 0px ;
    margin-right: 0px ;
    }

    SECTION.timeline FIGURE::before
    {
    left: 0px ;
    width: 100% ;
    }

    SECTION.timeline FIGURE DIV
    {
    width: 50px ;
    }

    SECTION.timeline FIGURE DIV I
    {
    font-size: 28px ;
    }

    SECTION.timeline FIGURE DIV SPAN
    {
    height: 50px ;
    top: 50px ;
    font-size: 11px ;
    }

    SECTION.timeline FIGURE DIV:nth-of-type(even) SPAN
    {
    bottom: 50px ;
    }
























    /* CALL TO ACTION */

    A.cta, 
    A.cta:link, 
    A.cta:active, 
    A.cta:visited, 
    A.cta:hover 
    {
    padding-top: 9px;
    padding-left: 12px ;
    padding-right: 13px ;
    padding-bottom: 7px;
    }









    


    /* SUB PAGES OVERVIEW */
    
    .overview 
    {
    margin-top: 60px  ;
    }

    .overview NAV 
    {
    margin-top: 32px  ;
    }

    .overview NAV A 
    {
    width: 100% ;
    margin-right: 0px ;
    margin-bottom: 16px ;
    min-width: initial ;
    min-height: initial ;
    }

    .overview NAV A DIV:nth-of-type(1) 
    {
    width: 26% ;
    }

    .overview NAV A DIV:nth-of-type(2)
    {
    padding-top: 12px ;
    padding-left: 16px ;
    padding-right: 16px ;
    padding-bottom: 14px ;
    }

    .overview NAV A SPAN,
    .overview NAV A I
    {
    font-size: 13px ;
    }

    /* filters */


    .filter 
    {
    margin-top: 32px ;
    padding-bottom: 32px ;
    }

    .filter B
    {
    font-size: 14px ;
    }
    
    .filter INPUT + LABEL
    {
    padding-top: 6px ;
    padding-left: 5px ;
    padding-right: 5px  ;
    padding-bottom: 4px ;
    font-size: 13px ;
    }

    .filter INPUT + LABEL I
    {
    top: -8px ;
    width: 14px ;
    line-height: 13px ;
    font-size: 9px ;
    }






















    /* CONTENT CARD */

    A.cnt, 
    A.cnt:link, 
    A.cnt:active, 
    A.cnt:visited, 
    A.cnt:hover 
    {
    display: block;
    margin-right: 0px  ;
    margin-bottom: 16px ;
    width: auto ;
    }

    A.cnt FIGURE 
    {
    padding-top: 40%;
    }
    
    A.cnt DIV, A.cnt U 
    {
    padding: 16px;
    }

    A.cnt U::after
    {
    top: 16px ;
    right: 16px ;
    width: 30px ;
    font-size: 20px ;
    }









    /* FOOTER */

    FOOTER > DIV > DIV
    {
    display: block ;
    margin-right: 0px ;
    padding-bottom: 32px ;
    }









    /* OVERLAY */


    ASIDE .close 
    {
    color: #ffffff ;
    }








    /* ASIDE video */
    
    ASIDE#video > DIV 
    {
    width: 92vw;
    border: 1px solid #ffffff ;
    }

    ASIDE#video .close 
    {
    top: -60px ;
    right: 0px ;
    }









/* ASIDE asset */

ASIDE#asset
{
}

ASIDE#asset > DIV
{
margin-top: 12vh ;
width: 90vw ;
border-radius: 10px ;
border-top-right-radius: 0px ;
}

ASIDE#asset > DIV > DIV
{
}

ASIDE#asset > DIV > DIV > DIV
{
max-height: 78vh ;
max-height: calc(88vh - 70px) ;
}

ASIDE#asset ARTICLE 
{
position: relative ;
display: block ;
top: 0px ;
left: 0px ;
height: auto ;
width: 100% ;
}

ASIDE#asset ARTICLE > FIGURE,
ASIDE#asset ARTICLE > DIV
{
display: block ;
}

ASIDE#asset ARTICLE > FIGURE
{
display: none ;
}

ASIDE#asset ARTICLE > DIV
{
padding-left: 0px ;
padding-top: 0px ;
padding-bottom: 0px ;
}

ASIDE#asset ARTICLE SPAN
{
display: block;
padding-bottom: 12px ;
}

ASIDE#asset ARTICLE SPAN > I,
ASIDE#asset ARTICLE SPAN > B
{
display: block ;
}

ASIDE#asset ARTICLE SPAN > I
{
min-width: initial ;
font-size: 8px ;
}

ASIDE#asset ARTICLE SPAN > B
{
margin-top: 4px ;
}
















  
  
  
  
    /* CHAT */
    
    #hubspot-messages-iframe-container.widget-align-right,
    #hubspot-messages-iframe-container.widget-align-left
    {
    display: none !important ;
    }




} /* closing phone general */