/*=========================================*/
/* Theme Name: FM-Logistic Transport       */
/* Theme URI:                              */
/* Description:                            */
/* Author: FSG@Creart                      */
/* Author URI: http://creart-design.ru/    */
/* License: Commercical                    */
/*-----------------------------------------*/
/* Main stylesheet                         */
/*=========================================*/

/* ---------------------------- RESET ---------------------------- */
section.common.transportal *
{
   border:none;
   margin:0;
   padding:0;
   box-sizing:border-box;
   background:none transparent;
}

section.common.transportal table
{
   border-collapse:collapse;
}

/* ----------------------------- Host site overrides ----------------------------- */
header
{
   /*opacity:0.5;*/   /*DEBUG.*/
}

body>.main-app>.main-wrapper>.content>.main
{
   --flex-gap-s:1em;
   --flex-gap  :2em;
   --flex-gap-l:3em;

   --inner-padding-h:3em;
   --inner-padding-v:8em;     /*Section's common vert padding.*/
   --inner-padding-v-s:3em;   /*Section's small vert padding.*/
   --inner-padding:var(--inner-padding-v) var(--inner-padding-h);

   --block-padding-v:2.5em;
   --block-padding-h:2.5em;
   --block-radius:1.25em;

   --p-half-margin:0.6em;
   --p-one-margin:1.2em;
   --p-two-margin:3em;

   --font-size-base:17px;
   --font-size-h-pri:3em;
   --font-size-h-sec:2.5em;
   --font-size-h-ter:1.6em;
   --font-size-h-msc:var(--font-size-base);
   --font-size-l:1.3em;    /*Non-header enlarged font.*/
   --font-size-m:1.125em;  /*Non-header less enlarged font.*/

   --light-blue:#D8E9F4;
   --text-blue:#164194;
   --blue:#193E94;
   --navy:#1C1370;
   --red:#E10000;
   --tp-green:#00A06E;
   --cold-grey:#515D68;
   --light-grey:#E9EDEF;
   --dark-white:#F9F9FA;
   --underline-color-white:#FFFFFF80;
   --underline-dashed-color-white:#FFFFFFB5;
   --underline-color-black:#00000080;
   --underline-dashed-color-black:#000000B5;
}

@media (max-width:800px)
{
   body>.main-app>.main-wrapper>.content>.main
   {
     --inner-padding-h:1.5em;
     --inner-padding-v:6em;
   }

   section.common.transportal
   {
     --font-size-h-pri:2.3em;
     --font-size-h-sec:2em;
     --font-size-h-ter:1.5em;
     --font-size-l:1.2em;
     --font-size-m:1.12em;
   }
}
@media (max-width:540px)
{
   body>.main-app>.main-wrapper>.content>.main
   {
      --flex-gap:1.5em;
      --flex-gap-l:2em;
   }

   section.common.transportal
   {
     --font-size-h-pri:1.4em;
     --font-size-h-sec:1.3em;
     --font-size-h-ter:1.1em;
     --font-size-l:1.1em;
     --font-size-m:1.05em;
   }
}
@media(max-height:900px)
{
   body>.main-app>.main-wrapper>.content>.main
   {
      --flex-gap:1.5em;
      --flex-gap-l:2em;
   }
}

section.common.transportal
{
   font-size:var(--font-size-base);
   color:#FFFFFF;
   background:none var(--blue);
}

@media (max-width:1280px)
{
   section.common.transportal
   {
      background-position:80% top,0 0;
      background-size:auto 190vh, auto;
   }
}

section.common.transportal *
{
   font-size:var(--font-size-base);
   font-weight:600;
   line-height:1.2;
}

/* flex misc */
section.common.transportal .block-core--columns.grid,
section.common.transportal .block-core--column.grid
{
   display:block;  /*Don't apply grid to wrapping elements.*/
}

/* ----------------------------- General layout ----------------------------- */
body:not(.sticky-menu)
{
   --content-top:calc(var(--admin-bar-height) + var(--headbar-height));
}
body.sticky-menu
{
   --content-top:var(--admin-bar-height);
}
body
{
   --section-vert-margin:6rem;
   --content-height:calc(100vh - var(--content-top));
   --header-supposed-height:85px;   /*Height of the .nav-mobile.*/
   --section-vert-margin-top:calc(var(--header-supposed-height) + var(--section-vert-margin));
   --inner-height:calc(var(--content-height) - var(--section-vert-margin-top) - var(--section-vert-margin));
}
@media(min-width:1024px)   /*When .nav-mobile is shown instead of .nav-desktop.*/
{
   body
   {
      --header-supposed-height:98px; /*Height of the .nav-desktop.*/
   }
}

@media(min-width:1100px) and (min-height:750px)
{
   /*Main container:*/
   body>.main-app>.main-wrapper
   {
      position:fixed;
      top:var(--content-top);
      width:100vw;
      height:var(--content-height);          /*For large enough screens a restrictive rule is used.*/
   }

   body>.main-app>.main-wrapper>.content,
   body>.main-app>.main-wrapper>.content>.main
   {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
   }

   /*Sections:*/
   section.common.transportal
   {
      position:absolute;
      width:100vw;
      padding-top:var(--section-vert-margin-top);
   }
   section.common.transportal
   {
      height:var(--content-height);          /*For large enough screens a restrictive rule is used.*/
   }
   section.common.transportal:is(.plain,.blanc):not(.hidden)+section.common.transportal:is(.plain,.blanc)       {padding-top:var(--section-vert-margin-top);}
   section.common.transportal:is(.plain,.blanc):has(+section.common.transportal:is(.plain,.blanc):not(.hidden)) {padding-bottom:var(--section-vert-margin);}
   section.common.transportal.grey:not(.hidden)+section.common.transportal.grey         {padding-top:var(--section-vert-margin-top);}
   section.common.transportal.grey:has(+section.common.transportal.grey:not(.hidden))   {padding-bottom:var(--section-vert-margin);}
   section.common.transportal.blue:not(.hidden)+section.common.transportal.blue         {padding-top:var(--section-vert-margin-top);}
   section.common.transportal.blue:has(+section.common.transportal.blue:not(.hidden))   {padding-bottom:var(--section-vert-margin);}
   section.common.transportal.green:not(.hidden)+section.common.transportal.green       {padding-top:var(--section-vert-margin-top);}
   section.common.transportal.green:has(+section.common.transportal.green:not(.hidden)) {padding-bottom:var(--section-vert-margin);}
   
   /*Footer:*/
   body>.main-app>footer
   {
     position:fixed;
     left:0;
     top:100vh;
     width:100vw;
     height:var(--content-height);
     background:#FFFFFF;
     z-index:1;
   }
   
   /*Sliding animation:*/
   body
   {
      --sliding-duration:1.2s;
      --sliding-function:ease-in-out;
   }
   body>.main-app>.main-wrapper
   {
      transition:height var(--sliding-duration) var(--sliding-function);
   }
   section.common.transportal,
   body>.main-app>footer
   {
      transition:top var(--sliding-duration) var(--sliding-function);
   }
   section.common.transportal:has(~ section.common.transportal.sel),
   body.scrolled-after-last section.common.transportal.sel
   {
      top:calc(0px - var(--content-height));
   }
   section.common.transportal.sel
   {
      top:0px;
   }
   section.common.transportal.sel ~ section.common.transportal
   {
      top:var(--content-height);
   }
   body.scrolled-after-last>.main-app>footer
   {
     top:calc(var(--content-top) + var(--header-supposed-height));
   }
   
   /*Section content constraints:*/
   section.common.transportal>.container,
   section.common.transportal>.container>.inner
   {
      max-height:100%;
   }
}

section.common.transportal
{
   overflow-x:hidden;
}

section.common.transportal
{
   min-height:var(--content-height);         /*For any size of media, the general rule is recommendative rather than restrictive.*/
}

/* ----------------------------- Content ----------------------------- */
/* --- UI --- */
section.common.transportal a
{
   color:#FFFFFF;
   text-decoration:none solid var(--underline-color-white);
}
section.common.transportal a[href^='tel:'],
section.common.transportal a[href^='mailto:']
{
   text-decoration:none dashed var(--underline-dashed-color-white);
}
section.common.transportal a:hover,
section.common.transportal a[href^='tel:']:hover,
section.common.transportal a[href^='mailto:']:hover
{
   text-decoration-line:underline;
}

section.common.transportal .chunk.text a
{
   color:#000000;
   text-decoration-color:#00000085;
}
section.common.transportal .chunk.text a[href^='tel:'],
section.common.transportal .chunk.text a[href^='mailto:']
{
   text-decoration-color:#00000090;
}

/* inputs */
section.common.transportal select,
section.common.transportal textarea,
section.common.transportal input
{
   vertical-align:baseline;
   margin:0;
   padding:0.6em 1em 0.5em 1em;
   font-size:1rem;
   line-height:1.21875;
   border:2px solid var(--text-blue);
   border-radius:0.625em;
   background:#FFFFFF;
   box-shadow:inset 1px 1px 3px #00000010;
}
section.common.transportal select:disabled,
section.common.transportal textarea:disabled,
section.common.transportal input:disabled,
section.common.transportal select.disabled,
section.common.transportal textarea.disabled,
section.common.transportal input.disabled,
section.common.transportal .button.disabled
{
   opacity:0.45;
}

section.common.transportal input[type='text'],
section.common.transportal textarea
{
   min-width:2em; /*to avoid zero-sized inputs*/
   width:100%; /*limit maximum to available width*/
   max-width:100%;  /*limit width, defined by wrapper param "len"*/
}
section.common.transportal select
{
   max-width:100%; /*limit maximum to available width*/
}

section.common.transportal input[type='number']
{
   padding-right:0;
   min-width:3em; /*to avoid zero-sized inputs*/
}

section.common.transportal input[type='file']
{
   padding-top:0;
   padding-left:0;
   padding-bottom:0;
}

section.common.transportal :is(.button,input[type='button'],input[type='submit'])
{
   margin:0;
   padding:0.8em 2em 0.7em 2em;
   font-size:1em;
   line-height:1.21875;
   font-weight:bold;
   color:var(--text-blue);
   text-align:center;
   border-radius:0.625em;
   border:2px solid #FFFFFF;
   background:none #FFFFFF;
}
section.common.transportal .button,
section.common.transportal a.button
{
   display:inline-block;
   vertical-align:bottom;
   text-decoration:none;
}
section.common.transportal :is(.button,input[type='button'],input[type='submit']).alt
{
   color:#FFFFFF;
   border-color:var(--red);
   background-color:var(--red);
}
section.common.transportal :is(.button,input[type='button'],input[type='submit']).alt:hover
{
   border-color:var(--tp-green);
   background-color:var(--tp-green);
}
section.common.transportal :is(.button,input[type='button'],input[type='submit']).transp
{
   color:#FFFFFF;
   background-color:transparent;
}
section.common.transportal :is(.button,input[type='button'],input[type='submit']).default
{
   font-weight:bold;
}
section.common.transportal :is(.button,input[type='button'],input[type='submit']):active
{
   box-shadow:none;
   transform:translateY(1px);
}

/* checkboxes */
section.common.transportal label.checkbox,
section.common.transportal label.radio
{
   display:inline-block;
   position:relative;
   vertical-align:baseline/*bottom*/;
   margin:0.1em 0.25em;
   padding:0 0 0 2em;
}
section.common.transportal label.checkbox:before,
section.common.transportal label.radio:before
{
   content:'';
   display:inline-block;
   position:absolute;
   top:0;
   left:0;
   height:1.75em;
   width:1.75em;
   background:none 0 0/200% 200% no-repeat transparent;

}
section.common.transportal label.checkbox.checked:before,
section.common.transportal label.radio.checked:before
{
   background-position-y:100%;
}
section.common.transportal label.checkbox.focused:before,
section.common.transportal label.radio.focused:before
{
   background-position-x:100%;
}
section.common.transportal label.checkbox:before {background-image:url('../images/transportal/checkbox.svg');}
section.common.transportal label.radio:before   {background-image:url('../images/transportal/radio.svg');}

section.common.transportal label.checkbox>input[type='checkbox'],
section.common.transportal label.radio>input[type='radio']
{
   display:none;
}

/* messages */
section.common.transportal div.message
{
   padding:0.4em 0.6em 0.3em 0.6em;
   border-radius:0.625em;
   border:1px solid #1E1E1E;
}
section.common.transportal .message.success
{
   color:#00AE10;
}
section.common.transportal div.message.success
{
   border:1px solid #00AE10;
}
section.common.transportal .message.error
{
   color:#D50017;
}
section.common.transportal div.message.error
{
   border:1px solid #D50017;
}
section.common.transportal .message.warning
{
   color:#DB5C00;
}
section.common.transportal div.message.warning
{
   border:1px solid #FC6A00;
}
section.common.transportal .message:empty,
section.common.transportal div.message:empty
{
   display:none;
}

section.common.transportal div.message>p
{
   margin-bottom:0.5em;
}
section.common.transportal div.message>p:last-of-type
{
   margin-bottom:0;
}

/* Spoilers Common */
section.common.transportal details
{
   --details-padding-h:0.7em;
}
section.common.transportal details:not(.alt)
{
   padding:0 var(--details-padding-h);
}
section.common.transportal details[open]:not(.alt)
{
   padding-bottom:var(--p-one-margin);
}

section.common.transportal details>summary
{
   outline:none;
}
section.common.transportal details:not(.alt)>summary
{
   display:block;
   margin:0 calc(0px - var(--details-padding-h));
   padding:0.8em 3.5em 0.8em var(--details-padding-h);
   font-size:var(--font-size-l);
   font-weight:bold;
   border:2px solid #FFFFFF;
   border-radius:2em;
   background:url('../images/transportal/summary_closed.svg') calc(100% - var(--details-padding-h)) center/auto 1.8em no-repeat transparent;
}
section.common.transportal details[open]:not(.alt)>summary
{
   margin-bottom:1em;
   background-image:url('../images/transportal/summary_opened.svg');
}

section.common.transportal details *
{
   --p-half-margin:0.3em;
   --p-one-margin:0.6em;
}
section.common.transportal details :not(summary):last-child
{
   margin-bottom:0;
}

/* Spoiler (legacy) */
section.common.transportal .spoiler>.button,
section.common.transportal .chunk.text .spoiler>.button
{
   padding:1em 0;
   font-weight:bold;
   cursor:pointer;
   /* Fix from push-button */
   display:flex;
   color:#000000;
   border:none;
   background:none transparent;
   box-shadow:none;
}
section.common.transportal .spoiler>.button:after
{
   content:'';
   display:block;
   margin-left:1em;
   width:1.5em;
   height:1.5em;
   background:url('../images/transportal/spoiler.svg') 0 100%/auto 200% no-repeat transparent;
}
section.common.transportal .spoiler.unfolded>.button:after
{
   background-position:0 0;
}

section.common.transportal .spoiler>.content
{
   padding:0.8em 0 1.8em 0;
}
section.common.transportal .spoiler:not(.unfolded)>.content
{
   display:none;
}

/* --- Text --- */
/* Headers */
section.common.transportal :is(.block-core--heading>h1,.h1),
section.common.transportal :is(.block-core--heading>h2,.h2),
section.common.transportal :is(.block-core--heading>h3,.h3),
section.common.transportal :is(.block-core--heading>h4,.h4),
section.common.transportal .block-core--heading>h5,
section.common.transportal .block-core--heading>h6
{
   margin-bottom:0.75em;
}
section.common.transportal :is(.block-core--heading>h1,.h1)
{
   font-weight:900;
   font-size:var(--font-size-h-pri);
   text-transform:uppercase;
}
section.common.transportal :is(.block-core--heading>h2,.h2)
{
   font-weight:bold;
   font-size:var(--font-size-h-sec);
}
section.common.transportal :is(.block-core--heading>h3,.h3),
section.common.transportal :is(.block-core--heading>h4,.h4)
{
   font-weight:bold;
   font-size:var(--font-size-h-ter);
}
section.common.transportal .block-core--heading>h5,
section.common.transportal .block-core--heading>h6
{
   font-weight:bold;
   font-size:var(--font-size-h-msc);
}
section.common.transportal .block-core--heading>:is(h1,h2,h3,h4,h5,h6), section.common.transportal :is(.h1,.h2,.h3,.h4,.h5,.h6).hi,
section.common.transportal .block-core--heading>:is(h1,h2,h3,h4,h5,h6), section.common.transportal :is(.h1,.h2,.h3,.h4,.h5,.h6)>.hi
{
   color:#63B9E9;
}
section.common.transportal :is(.h1,.h2,.h3,.h4,.h5,.h6)
{
   display:block;
}

/* Paragraphs */
section.common.transportal .block-core--paragraph>p,
section.common.transportal :is(p,.p,.pl1)
{
   margin-bottom:var(--p-one-margin);
}
section.common.transportal :is(p.p2,.p2,.pl2),
section.common.transportal .block-core--paragraph>:is(p.p2,.p2,.pl2),
section.common.transportal .block-core--list>:is(ol.p2,ul.p2,ol.pl2,ul.pl2)
{
   margin-bottom:var(--p-two-margin);
}
section.common.transportal :is(.p,.p2):not(.flex,.grid)
{
   display:block;
}

/* Lists */
section.common.transportal :is(ol,ul),
section.common.transportal .block-core--list>:is(ol,ul)
{
   margin-bottom:var(--p-one-margin);
   padding-left:2em;
}
section.common.transportal .block-core--list.grid.s>ul,
section.common.transportal .block-core--list>ul.grid.s
{
   padding:0;
}

section.common.transportal li,
section.common.transportal .block-core--list li
{
   margin-bottom:var(--p-half-margin);
   line-height:1;
}
section.common.transportal ul>li,
section.common.transportal .block-core--list ul>li
{
   padding-left:0;
   list-style-image:url('../images/transportal/li.svg');
   background:none transparent;
}
section.common.transportal ul>li.alt,
section.common.transportal .block-core--list ul>li.alt
{
   list-style-image:url('../images/transportal/li_alt.svg');
}
section.common.transportal li:last-of-type,
section.common.transportal .block-core--list li:last-of-type
{
   margin-bottom:0;
}

/* Media */
section.common.transportal .block-core--video
{
  grid-area:v;
  position:relative;
}

section.common.transportal .block-core--video>figure
{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

section.common.transportal .block-core--video>figure>video
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/* ----------------------------- Particular sections ----------------------------- */
/* --- Intro --- */
section.common.transportal#intro
{
   padding-bottom:1em;  /*Maximize content area as much as possible.*/
   background:url('../images/transportal/bg.svg') center top/cover no-repeat var(--blue);
}

section.common.transportal#intro>.container
{
   overflow-x:visible;
}

section.common.transportal#intro>.container>.inner
{
   grid:'hh hh hh hh ii' min-content
        'tt tt tt .  ii' min-content
        'bd bb .  .  ii' min-content
        '.  .  .  .  ii' 1fr
        'sc sc sc sc sc' 2fr/fit-content(18em) fit-content(18em) 1fr 1fr 2fr;
   align-items:center;
}

section.common.transportal#intro>.container>.inner>.block-core--heading
{
   grid-area:hh;
   margin-bottom:0;
}
section.common.transportal#intro>.container>.inner>.block-core--heading>h1
{
   margin-bottom:0;
   color:#FFFFFF;
}

section.common.transportal#intro>.container>.inner>.text
{
   grid-area:tt;
}

section.common.transportal#intro>.container>.inner>.button.default
{
   grid-area:bd;
}

section.common.transportal#intro>.container>.inner>.button:not(.default)
{
   grid-area:bb;
}

section.common.transportal#intro>.container>.inner>.image
{
   grid-area:ii;
   align-self:flex-end;
}

section.common.transportal#intro>.container>.inner>.image>img
{
   --max-w:30em;
   --left-overlap:0.2;
   --right-overlap:0.18;

   height:100%;
   width:min(100%*(1 + var(--left-overlap) + var(--right-overlap)),var(--max-w));
   margin-left :calc(0px - min(100%*var(--left-overlap ),var(--max-w)*var(--left-overlap )));
   margin-right:calc(0px - min(100%*var(--right-overlap),var(--max-w)*var(--right-overlap)));
   object-fit:contain;
   object-position:right bottom;
}

section.common.transportal#intro>.container>.inner>.scroller
{
   grid-area:sc;
   align-self:flex-end;
}

section.common.transportal#intro>.container>.inner>.scroller>.area
{
   position:static;
   width:100vw;
   margin:0 calc(0px - var(--side-field));
}

/* Stats */
section.common.transportal#intro>.container>.inner>.scroller>.area>.content>.item
{
   flex:0 0 17em;
}

section.common.transportal#intro>.container>.inner>.scroller>.area>.content>.item>.header>.header
{
   margin-bottom:0.25em;
   font-weight:bold;
   font-size:var(--font-size-h-ter);
   color:#FFFFFF;
}

@media (min-height:760px)
{
   section.common.transportal#intro>.container>.inner>.scroller
   {
      margin-top:4vh;
   }
}
@media (max-width:1120px)
{
   section.common.transportal#intro>.container>.inner
   {
      grid:'hh hh hh' min-content
           'tt tt ii' 2fr
           'bd bb ii' 1fr
           '.  .  ii' 3fr
           'sc sc sc' min-content/fit-content(18em) fit-content(18em) 1fr;
   }

   section.common.transportal#intro>.container>.inner>.image>img
   {
     --max-w:20em;
   }
}
@media (max-width:900px)
{
   section.common.transportal#intro>.container>.inner
   {
      grid:'hh hh' min-content
           'tt tt' min-content
           'bd ii' auto
           'bb ii' auto
           '.  ii' 1fr
           'sc sc' min-content/fit-content(18em) 1fr;
   }

   section.common.transportal#intro>.container>.inner>.image>img
   {
/*      --left-overlap:0px; */
   }
}
@media (max-width:540px)
{
   section.common.transportal#intro>.container>.inner
   {
      grid:'hh'
           'tt'
           'bd'
           'bb'
           'ii'
           'sc'/1fr;
   }

   section.common.transportal#intro>.container>.inner>.image>img
   {
     --max-w:15em;
   }
}

/* --- Seriously --- */
section.common.transportal.seriously
{
   min-height:100vh;
   background:none center/cover no-repeat var(--cold-grey);
}

section.common.transportal.seriously>*
{
   text-align:center;
}

section.common.transportal.seriously .preheader
{
   margin-bottom:0;
   font-size:var(--font-size-m);
   font-weight:600;
   text-transform:uppercase;
}

section.common.transportal.seriously .wp-block-heading>h2
{
   margin-bottom:0;
   color:#FFFFFF;
}

section.common.transportal.seriously .text
{
   max-width:35em;
   font-size:var(--font-size-l);
   line-height:1;
}

section.common.transportal.seriously .text p
{
   font-size:var(--font-size-l);
}
section.common.transportal.seriously .text .block-core--paragraph:last-child>p
{
   margin-bottom:0;
}

section.common.transportal.seriously img
{
   width:min(20.6em,100%);
}

/* --- Partnership --- */
section.common.transportal#partnership :is(h2,h3,h4)
{
   text-transform:uppercase;
   color:#FFFFFF;
}

/* -- Introduction -- */
section.common.transportal#partnership .wp-block-columns.introduction
{
   grid:'m . w'/5fr 1fr minmax(20em,3fr);
   height:min(26em,var(--inner-height));  /*This height is fine-tuned to the spoilers content.*/
}

/* - Main - */
section.common.transportal#partnership .wp-block-columns.introduction>.main
{
   grid-area:m;
}

section.common.transportal#partnership .wp-block-columns.introduction>.main>.main>.text
{
   margin-bottom:var(--p-one-margin);
}
section.common.transportal#partnership .wp-block-columns.introduction>.main>.main>.text>.text
{
   font-size:var(--font-size-l);
   font-weight:600;
}

/* - Warranties - */
section.common.transportal#partnership .wp-block-columns.introduction>.warranties
{
   grid-area:w;
}

/* Spoilers */
section.common.transportal#partnership .wp-block-columns.introduction>.warranties details
{
   margin-bottom:var(--p-half-margin);
}

section.common.transportal#partnership .wp-block-columns.introduction>.warranties details[open]
{
   margin-bottom:var(--p-one-margin);
}

section.common.transportal#partnership .wp-block-columns.introduction>.warranties details>summary
{
   display:block; /*Hides browser's arrows.*/
   padding:0.25em 0 0.25em 2em;
   font-weight:600;
   background:url('../images/transportal/summary_alt_closed.svg') left center/auto 1.25em no-repeat transparent;
}
section.common.transportal#partnership .wp-block-columns.introduction>.warranties details[open]>summary
{
   margin:1em 0;
   padding:0.7em 0 0.7em 3.5em;
   color:var(--text-blue);
   border-radius:1.2em;
   background:url('../images/transportal/summary_alt_opened.svg') 1.25em center/auto 1.6em no-repeat #FFFFFF;
}
section.common.transportal#partnership .wp-block-columns.introduction>.warranties details>summary::-webkit-details-marker
{
   display:none; /*Safary fix.*/
}
section.common.transportal#partnership .wp-block-columns.introduction>.warranties details :is(p,li)
{
   font-weight:600;
}

@media(max-width:950px)
{
   section.common.transportal#partnership .wp-block-columns.introduction
   {
     grid:'m' 'w'/1fr;
   }

   section.common.transportal#partnership .wp-block-columns.introduction>.main>.main>.text
   {
     margin-bottom:var(--p-one-margin);
   }
}

/* -- Terms -- */
section.common.transportal#partnership .terms
{
   grid:'hh hh' min-content 'i1 i2' 1fr/1fr 1fr;
}

section.common.transportal#partnership .terms>h3 {grid-area:hh;}
section.common.transportal#partnership .terms>.col:nth-of-type(1){grid-area:i1;}
section.common.transportal#partnership .terms>.col:nth-of-type(2){grid-area:i2;}

section.common.transportal#partnership .terms>.col
{
   overflow:clip;
   padding:var(--block-padding-v) var(--block-padding-h);
   color:var(--cold-grey);
   border-radius:var(--block-radius);
   background:none var(--light-blue);
   box-shadow:0px 4px 15px 0px #00000040;
}

section.common.transportal#partnership .terms>.col>:last-child
{
   margin-bottom:0;
}

section.common.transportal#partnership .terms>.col h5
{
   color:var(--tp-green);
   text-transform:uppercase;
}
section.common.transportal#partnership .terms>.col.alt h5
{
   color:var(--red);
}

section.common.transportal#partnership .terms>.col ul
{
   padding-left:1em;
}

section.common.transportal#partnership .terms>.col ul>li
{
   margin:0;
   position:relative;
   padding-top:1em;
   padding-left:0.8em;
   list-style-image:url('../images/transportal/li_circle_green.svg');
}
section.common.transportal#partnership .terms>.col.alt ul>li
{
   list-style-image:url('../images/transportal/li_circle_red.svg');
}

section.common.transportal#partnership .terms>.col ul>li::before
{
   content:'';
   display:block;
   position:absolute;
   top:0;
   left:-0.75em;
   bottom:0;
   border-left:1px dashed var(--tp-green);
}
section.common.transportal#partnership .terms>.col ul>li:last-child::before
{
   bottom:calc(100% - 1.5em);
}
section.common.transportal#partnership .terms>.col.alt ul>li::before
{
   border-color:var(--red);
}

@media(max-width:888px)
{
   section.common.transportal#partnership .terms
   {
      grid:'hh' min-content 'i1' 1fr 'i2' 1fr/1fr;
   }
}

/* --- How it works --- */
section.common.transportal#how_it_works
{
   background:none var(--navy);
}

section.common.transportal#how_it_works>.container>.inner
{
  display:grid;
  grid-template:'h' auto 'v' 1fr/1fr;
  height:100%;
}

section.common.transportal#how_it_works h2
{
   text-align:center;
   text-transform:uppercase;
}

section.common.transportal#how_it_works .block-core--heading
{
  grid-area:h;
}

section.common.transportal#how_it_works .block-core--video
{
  grid-area:v;
}

section.common.transportal#how_it_works .block-core--video>figure>video
{
  border-top:2px solid var(--text-blue);
}

/* - Features - */
section.common.transportal.features
{
   background:none center/cover no-repeat var(--cold-grey);
}

section.common.transportal.features>.container>.inner .flip-card
{
   grid-template-columns:repeat(auto-fit,minmax(23em,1fr));
   grid-auto-rows:10em;
}

@media(max-width:1100px)
{
   section.common.transportal.features>.container>.inner .flip-card
   {
      grid-template-columns:repeat(auto-fit,minmax(18em,1fr));
   }
}

section.common.transportal.features>.container>.inner .flip-card>.item
{
   position:relative;
}

section.common.transportal.features>.container>.inner .flip-card>.item>:is(.face,.back)
{
   --feature-anim-duration:.25s;
   --feature-anim-tfunc:ease-in-out;
   --feature-persp:888px;

   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   overflow:clip;
   padding:var(--block-padding-v) var(--block-padding-h);
   color:var(--cold-grey);
   text-align:center;
   border-radius:var(--block-radius);
   background:none var(--light-blue);
}
section.common.transportal.features>.container>.inner .flip-card>.item>.face
{
}
section.common.transportal.features>.container>.inner .flip-card>.item>.back
{
}
section.common.transportal.features>.container>.inner .flip-card>.item:hover>.face
{
   animation:var(--feature-anim-duration) var(--feature-anim-tfunc) both flip_face_fwd;
}
section.common.transportal.features>.container>.inner .flip-card>.item:not(:hover)>.face
{
   animation:var(--feature-anim-duration) var(--feature-anim-tfunc) both flip_face_rev;
}
section.common.transportal.features>.container>.inner .flip-card>.item:hover>.back
{
   animation:var(--feature-anim-duration) var(--feature-anim-tfunc) both flip_back_fwd;
}
section.common.transportal.features>.container>.inner .flip-card>.item:not(:hover)>.back
{
   animation:var(--feature-anim-duration) var(--feature-anim-tfunc) both flip_back_rev;
}

@keyframes flip_face_fwd
{
   from {transform:perspective(var(--feature-persp)) rotateX( 0deg);}
   50%  {transform:perspective(var(--feature-persp)) rotateX(90deg);}
   to   {transform:perspective(var(--feature-persp)) rotateX(90deg);}
}
@keyframes flip_face_rev
{
   from {transform:perspective(var(--feature-persp)) rotateX(90deg);}
   50%  {transform:perspective(var(--feature-persp)) rotateX(90deg);}
   to   {transform:perspective(var(--feature-persp)) rotateX( 0deg);}
}
@keyframes flip_back_fwd
{
   from {transform:perspective(var(--feature-persp)) rotateX(-90deg);}
   50%  {transform:perspective(var(--feature-persp)) rotateX(-90deg);}
   to   {transform:perspective(var(--feature-persp)) rotateX( 0deg);}
}
@keyframes flip_back_rev
{
   from {transform:perspective(var(--feature-persp)) rotateX( 0deg);}
   50%  {transform:perspective(var(--feature-persp)) rotateX(-90deg);}
   to   {transform:perspective(var(--feature-persp)) rotateX(-90deg);}
}

section.common.transportal.features>.container>.inner .flip-card>.item>:is(.face,.back) :is(p,.p,ul,ol,li):last-child
{
   margin-bottom:0;
}

/* --- Portal --- */
section.common.transportal#portal
{
   background:none center/cover no-repeat var(--cold-grey);
}

section.common.transportal#portal .main_cols>.block-core--column
{
   padding:var(--block-padding-v) var(--block-padding-h);
   border-radius:var(--block-radius);
   background:none #FFFFFF;
   box-shadow:0px 4px 4px 0px #00000040;
   color:#000000;
}
section.common.transportal#portal .main_cols .block-core--column.col_l
{
   flex:2 1 32em;
}
section.common.transportal#portal .main_cols .block-core--column.col_s
{
   flex:1 1 24em;
}

section.common.transportal#portal .main_cols .block-core--column .block-core--heading>:is(h1,h2,h3,h4,h5,h6)
{
   font-size:2.6rem;
   color:var(--blue);
}

section.common.transportal#portal .main_cols .block-core--column .block-core--image
{
   align-self:center;
}

section.common.transportal#portal .main_cols .block-core--column .block-core--image img
{
   width:100%;
   max-height:calc(100vh - var(--block-padding-v)*2 - var(--section-vert-margin)*2 - 20em);
   object-fit:contain;
   object-position:center;
}

section.common.transportal#portal .main_cols .block-core--column .buttons
{
   align-self:stretch;
}

section.common.transportal#portal .main_cols .block-core--column .buttons>a.button:only-child
{
   justify-self:center;
}

section.common.transportal#portal a.button
{
   padding:0.5em 0.6em 0.5em 3em;
   font-weight:700;
   color:#000000;
   border-radius:1em;
   border:3px solid var(--green);
   background:none 0.5em center/auto 1.6em no-repeat #FFFFFF;
   box-shadow:0px 4px 4px 0px #00000040;
}


section.common.transportal#portal .block-core--list ul>li
{
   list-style-image:var(--li-marker-green);
   font-weight:normal;
}

/* --- Privileges --- */
section.common.transportal#privileges .block
{
   padding:var(--block-padding-v) var(--block-padding-h);
   color:var(--cold-grey);
   border-radius:var(--block-radius);
   background:none var(--dark-white);
}

section.common.transportal#privileges .block>.block-core--heading>h2
{
   flex:1 1 100%;
   margin-top:-0.5em; /*Fixes top space caused by smaller font of the h2>mark.*/
   text-align:center;
   text-transform:uppercase;
   color:#000000;
}
section.common.transportal#privileges h2>mark
{
   font-size:max(var(--font-size-h-msc),46%);
   color:var(--red);
}

section.common.transportal#privileges .block>.items>.item
{
   flex:0 1 21em;
   padding:var(--block-padding-v) var(--block-padding-h);
   color:var(--cold-grey);
   border-radius:var(--block-radius);
   background:none var(--light-grey);
}

section.common.transportal#privileges .block>.items>.item>.image
{
   position:relative;
   flex:0 0 3.625em;
   max-height:3.625em;
}
section.common.transportal#privileges .block>.items>.item>.image>img
{
   max-height:3.625em;
   object-fit:contain;
   object-position:center;
}

section.common.transportal#privileges .block>.items>.item>.header
{
   display:none; /*Not used.*/
}

section.common.transportal#privileges .block>.items>.item>.text
{
   flex:1 1 8em;
}
section.common.transportal#privileges .block>.items>.item>.text,
section.common.transportal#privileges .block>.items>.item>.text *
{
   font-weight:600;
   color:var(--cold-grey);
}

section.common.transportal#privileges .block-core--heading>.sub_header
{
   font-size:var(--font-size-h-ter);
   text-align:center;
   color:#FFFFFF;
}

/* --- Contract --- */
section.common.transportal#contract>.container>.inner
{
/*   padding:var(--inner-padding-v-s) var(--inner-padding-h); */
}

section.common.transportal#contract h2
{
   text-align:center;
   color:#FFFFFF;
}

section.common.transportal#contract .stages
{
   background:url('../images/transportal/contract_bg_h.svg') right top/auto repeat-x transparent;
}

section.common.transportal#contract .stages>.item
{
   flex:0 0 10.6em;
   height:10.6em;
   overflow:clip;
   padding:1.3em;
   border:2px solid #FFFFFF;
   border-radius:50%;
   background:none var(--blue);
}

section.common.transportal#contract .stages>.item>img
{
   flex:0 0 3.625em;
   max-width:4.6875em;
   object-fit:contain;
   object-position:center;
}

section.common.transportal#contract .stages>.item>.header
{
   display:none; /*Not used.*/
}

section.common.transportal#contract .stages>.item>.text
{
   font-size:var(--font-size-m);
   font-weight:bold;
   text-align:center;
}

@media (max-width:470px)
{
   section.common.transportal#contract .stages
   {
     flex-flow:column;
     align-items:center;
     background:url('../images/transportal/contract_bg_v.svg') center top/auto repeat-y transparent;
   }

   section.common.transportal#contract .stages>.item
   {
     width:10.6em;
   }
}

/* --- FAQ --- */
section.common.transportal.faq h2
{
   text-align:center;
   color:#FFFFFF;
}

section.common.transportal.faq .list
{
   width:min(50em,100%);
}

/* --- Contacts  --- */
section.common.transportal#contacts
{
   background:none var(--dark-white);
}

section.common.transportal#contacts>.container>.inner
{
/*   padding:var(--inner-padding-v-s) var(--inner-padding-h); */
}

section.common.transportal#contacts>.container>.inner *
{
   color:#000000;
}

section.common.transportal#contacts h2
{
   text-align:center;
   text-transform:uppercase;
}
section.common.transportal#contacts a
{
   text-decoration-color:var(--underline-color-black);
}
section.common.transportal#contacts a[href^='tel:'],
section.common.transportal#contacts a[href^='mailto:']
{
   text-decoration-color:var(--underline-dashed-color-black);
}

section.common.transportal#contacts .contact_data
{
   grid-template-columns:9fr 1fr 6fr 1fr 9fr;
}

section.common.transportal#contacts .contact_data>*>*>.block-core--paragraph:last-child>p
{
   margin-bottom:0;
}

section.common.transportal#contacts .contact_data>*>*>.block-core--paragraph>p>a
{
   font-size:var(--font-size-m);
   font-weight:600;
}

section.common.transportal#contacts .contact_data>*>*
{
   align-items:center;
}

section.common.transportal#contacts .contact_data>.email>.email
{
   display:flex;
   flex-flow:column;
   align-items:flex-start;
}

section.common.transportal#contacts .contact_data>.phone>.phone
{
   display:flex;
   flex-flow:column;
   align-items:center;
   white-space:nowrap;
}

section.common.transportal#contacts .contact_data>.spacer
{
   background:none #000000;
   justify-self:center;
   align-self:stretch;
   width:2px;
}

@media(max-width:888px)
{
   section.common.transportal#contacts .contact_data
   {
     grid-template-columns:1fr;
   }

   section.common.transportal#contacts .contact_data>:is(.email,.phone)
   {
     align-items:center;
   }

   section.common.transportal#contacts .contact_data>.address
   {
     text-align:center;
   }

   section.common.transportal#contacts .contact_data>.spacer
   {
     width:3em;
     height:2px;
   }
}

/* Feedback */
section.common.transportal#contacts .feedback label:not(.checkbox)
{
   margin-bottom:0.75em;
}

section.common.transportal#contacts .feedback label:not(.checkbox)>span
{
   margin-bottom:0.75em;
   font-weight:bold;
}

section.common.transportal#contacts .feedback .message
{
   margin-top:1.75em;
}

section.common.transportal#contacts .feedback .submit
{
   margin-top:0.75em;
}

section.common.transportal#contacts .feedback .submit>.agreement
{
   flex:1 1 10em;
}