/* ====== colors:

    blue #3bb4e6
    light blue #d6e5f6
    dark blue: #1d2b4d
    grey: #e6eff9
    red #aa486b
    dark grey: #3a4053

    ====== */
/* variables */

:root {
  --rstBlue: #005aa3;
  --rstLightBlue: #d6e5f6;
  --rstBrightBlue: #3bb4e6;
  --rstDarkBlue: #1d2b4d;
  --rstGrey: #e6eff9;
  --rstDarkGrey: #3a4053;
  --rstRed: #aa486b;
  --rstGreen: #aab46b;

}


/* - reset --- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section{display:block;}a img{border:none;}
* { box-sizing: border-box; }


html,body  {   height:100%; width:100%;color:var(--rstDarkGrey);   }
body {    margin:0; padding:0;font-family: 'Noto Sans TC', sans-serif; font-size:16px; }


/* ==== numbered list ======= */

ol.numberedList > li {counter-increment: root;list-style-type:decimal; margin-bottom:20px; font-weight:bold; }
ol.numberedList > li > ol {  counter-reset: subsection; list-style-type: none;  }
ol.numberedList > li > ol > li { counter-increment: subsection; margin-bottom:10px;list-style-type:inherit; font-weight:normal; }
ol.numberedList > li > ol > li:before { content: counter(root) "." counter(subsection) " "; }

.textlist { margin-bottom:30px; font-size:100%; }


/* ==== industry logos ======= */

.industryLogos { display:flex; align-items:center; justify-content:center; width:100%; max-width:600px; padding:20px;  }
.industryLogos img { width:20%; height:auto; padding:10px; }


/* ===== type =========== */

h1 { font-size:36px;  font-weight:300; margin:0 0 30px 0; text-align:left; }
h2 { color:var(--rstBlue); font-weight: 300; font-size: 24px; margin: 0 0 20px 0;  }
h2:first-child { margin-bottom:40px; }
h3 { color: var(--rstDarkGrey); font-weight: 300; font-size: 22px; margin: 0 0 20px 0;  }
p  { font-size:100%; margin-bottom: 10px; line-height:140%; font-weight:300; color:var(--rstDarkGrey); }
.eight ul { padding-left:20px;}
.eight li { list-style-type:disc; margin-bottom:5px; color:var(--rstDarkGrey); }

p:last-of-type { margin-bottom: 20px; }
a   {  color:var(--rstDarkGrey); }

strong { font-weight: 700;}

.intro { text-align: center;}
.intro h2 { max-width: 740px; margin:0 auto 30px auto;}
.intro p { max-width: 740px; margin: 0 auto 10px auto; }
.page-contact .intro { text-align:left; }

@media screen and (max-width:500px) {
h1 { font-size:30px;  }
h2 {  font-size: 24px; line-height:130%; }
}

/* ===== slider =========== */
.slideshow    { margin:0; padding:0; height:100%; width:100%; position:fixed; top:0; left:0; z-index:1; background-color:#000;}
.slide    { height:100%; width:100%; background-size:cover; background-position:center;   }
.slide-1    { background-image:url(../images/heros/adobestock-1019942205.jpg); }
.slide-2    { background-image:url(../images/heros/adobestock-862520508.jpg); }
.slide-3    { background-image:url(../images/heros/adobestock-1613910764.jpg); }

.slide { display: none }
.slide.first { display: block; }

.slideImports h2 { color: var(--rstRed);  }
.slideExports h2 { color: var(--rstGreen); }
.slideEcommerce h2 { color: var(--rstBlue); }

/* ======== CHARTS (ANIMATED) ==================== */

/* - chart cargo -- */
.chart { width: 262px; }

     .circlecontainer { -webkit-transition:all 1s ease; transition: all 1s ease; opacity:0;  }
    .cycle-slide-active .circlecontainer {   opacity:1; top:200px; }

    .circle1 {-webkit-transition-delay: 1s; transition-delay: 1s; }
    .circle2 {  -webkit-transition-delay: 1.2s;  transition-delay: 1.2s; }
    .circle3 {  -webkit-transition-delay: 1.4s;  transition-delay: 1.4s;  }
    .circle4 {  -webkit-transition-delay: 1.6s;  transition-delay: 1.6s;  }
    .circle5 {  -webkit-transition-delay: 1.8s;  transition-delay: 1.8s;  }
    .circle6 {  -webkit-transition-delay: 2s;  transition-delay: 2s;  }
    .circle7 {  -webkit-transition-delay: 2.2s;  transition-delay: 2.2s;  }

    .line { -webkit-transition:all 1s ease; transition: all 1s ease; opacity:0; fill: none;stroke-miterlimit: 10;}
    .cycle-slide-active .line { opacity:1;  }

    .radar { -webkit-animation: none; animation: none; opacity:0;}
    .cycle-slide-active .radar { opacity: 0;  -webkit-animation: throb;  animation: throb;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}

    @-webkit-keyframes throb {  0 { opacity: 0 } 50% { opacity: 0.7 } 100% { opacity: 0 }}
    @keyframes throb {  0 { opacity: 0 } 50% { opacity: 0.7 } 100% { opacity: 0 }}

/* - chart cargo -- */
    .chart-cargo .circle { fill: var(--rstRed); }
    .chart-cargo .line { -webkit-transition-delay: 2s; transition-delay: 2s;stroke: var(--rstRed);}
    .chart-cargo .cycle-slide-active .radar { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

 /* - chart scm -- */
    .chart-scm .circle { fill: #rstBlue; }
    .chart-scm .line { stroke: #rstBlue; -webkit-transition-delay: 3s; transition-delay: 3s;  }
    .chart-scm .cycle-slide-active .radar { -webkit-animation-delay: 3s; animation-delay: 3s; }

/* - chart logistics -- */
    .chart-logistics .circle { fill: var(--rstGreen); }
    .chart-logistics .line { stroke: var(--rstGreen); -webkit-transition-delay: 3s; transition-delay: 3s;  }
    .chart-logistics .cycle-slide-active .radar { -webkit-animation-delay: 3s; animation-delay: 3s; }

/* ====== hero ===== */

.heading    { position: relative;  display: flex; height: 100%; flex-direction: column; justify-content:flex-end; z-index:50;  -webkit-transition:all .5s;transition:all .5s;padding:40px;   box-sizing:border-box;}
.heading.animate    {    top:40%; opacity:0; -webkit-transition:all 2s;transition:all 2s;  }
.heading h1            {   font-weight: 300; color:#fff;text-shadow: 0 0 12px #000; font-size:50px; line-height:120%; text-align:left; margin:0 0 10px 0; }
.heading h2            {   font-weight: 700;   font-size:50px; line-height:120%;  margin: 0; text-align:left; color:#fff;}
.heading p {  font-size: 20px; color: #fff;max-width:500px; margin-bottom: 20px; }
.heading h3 { font-size:32px; color:#fff; }
/* ====== hero ===== */

.grad { width:100%; position:absolute; bottom:0; left:0; height:35%; z-index: 1;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
.gradTop { width:100%; position:absolute; top:0; left:0; height:100px; z-index: 1;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}
/* =========== Grid =============== */

.row { width:100%; clear:both; padding: 20px 0; }
.columns { display: flex; flex-wrap: wrap;}
.col {    display: block;     margin: 1% 0 1% 4%; position:relative; }
.col:first-of-type { margin-left: 0; }

.twelve {    width: 100%;  }
.eleven {     width: 91.3333333333%; }
.ten     {     width: 82.6666666667%;}
.nine     {     width: 74.0%; }
.eight    {     width: 65.3333333333%;}
.seven     {      width: 56.6666666667%;}
.six     {      width: 48.0%; }
.five     {      width: 39.3333333333%; }
.four     {     width: 30.6666666667%; }
.three     {     width: 22.0%; }
.two     {    width: 13.3333333333%; }
.one     {    width: 4.66666666667%; }

.narrowcol { max-width:800px; margin:0 auto; }

@media screen and (max-width:500px) {
.columns { flex-direction:column; }
.col {    margin: 0;  }

.twelve,
.eleven,
.ten,
.nine ,
.eight,
.seven ,
.six ,
.five ,
.four,
.three,
.two,
.one  {    width: 100%;  }

.row {  }
.template-3 .row { padding:20px 0 0; }    
}

/* ====== section ===== */

section { width: 100%; padding: 40px 20px; max-width: 1200px; margin: 0 auto; overflow: hidden; }
section p.intro { color: #333; font-weight: 300; font-size: 23px; line-height: 140%; text-align: center; max-width: 650px; margin:0 auto;  }


@media screen and (max-width:500px) {
section { padding: 20px }
}
.cards { padding:0 40px 40px 40px;display: grid;grid-template-columns: repeat(4, 1fr); gap: 20px;  }
.cards div { position:relative;display: flex; flex-direction: column; border-radius: 10px; padding:50px 20px 20px 20px;  background: #ccc; margin-top:60px;  }
.cards h2,
.cards h3,
.cards p {color:#fff;text-align: center; font-size: 15px; }
.cards a { margin-top:auto; color:#000; }

.cards div.panelimports {background: var(--rstGreen); }
.cards div.panele-commerce-imports  { background: var(--rstRed);}
.cards div.panelexports { background: var(--rstBlue);}
.cards div.panelhaulage { background: var(--rstDarkGrey);}
.cards div.paneladditional-services { background: var(--rstGreen);}

.cards h2 { font-size:24px; margin-bottom: 20px; }
.cards h3 { font-size:18px;margin-bottom: 20px; }

.cards img { width:100%; height:200px; object-fit:cover; }


.btn { background:#fff; color: #333; text-align:center; font-weight:700; display: inline-block; margin-top: 20px; text-decoration: none; border: none; font-size: 16px; padding: 8px 20px; border-radius: 40px; cursor:pointer; }
.panelimports .btn { color: var(--rstGreen); }
.panele-commerce-imports .btn { color:  var(--rstRed); }
.panelexports .btn { color: var(--rstBlue); }
.panelhaulage .btn { color: var(--rstDarkGrey); }
.paneladditional-services .btn { color: var(--rstGreen);}
.btn:hover { opacity:0.7; }
.heading .btn { color:var(--rstDarkBlue); }


.cards div:before { content:""; width: 80px; background-color:inherit; background-size:60%; background-position:center; background-repeat:no-repeat; height:80px;border-radius: 100%; position: absolute; left:calc(50% - 40px); top:-40px;  }

.cardsServicespage  { grid-template-columns: repeat(3, 1fr);  }


.ResourcesCards { }

.ResourcesCards li { display:flex; align-items:flex-end; justify-content:space-between;  width:100%; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.2); color:var(--rstDarkGrey); padding:20px; border-radius:10px; margin-bottom:20px; }
.ResourcesCards li p {  margin:0;}

 .ResourcesCards a { background:var(--rstBlue); color:#fff; margin:0; white-space:nowrap;}

@media screen and (max-width:768px) {
    .cards div { width:48%; }
    
}
@media screen and (max-width:768px) {
    .cards { display:flex;flex-direction:column; padding:20px; }
    .cards div { width:100%; border-radius:5px; margin-bottom:0; }

}

/* ==== faqs ====== */

.faq { background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.1); margin-top:20px; border-radius:10px; padding:20px; }
.faq + h2 { padding-top:60px; }
.faq p { margin:0; }

/* ====== testimonial ===== */

.testimonial { overflow: visible; border-radius: 10px; border-bottom-right-radius: 0; position:relative;background: var(--rstGrey); color: var(--rstDarkBlue); font-size: 24px; line-height: 140%; text-align: left; font-weight:300; font-style: italic; max-width: 800px; margin: 0 auto; }
.testimonial:after { display: block; content: ""; position: absolute; right:0; bottom:-40px;
width: 0; height: 0; border-style: solid; border-width: 0 40px 40px 0; border-color: transparent var(--rstGrey) transparent }

.testimonial div {display: flex!important; padding: 40px;  }
.smallprint { margin-top:20px;font-size: 15px; color: var(--rstBlue);text-align: left; display: block; max-width: 100%; }

.testimonial blockquote { display: block;margin: 20px 0 0 0; font-size:24px; line-height:120%; }
.testimonial img {object-fit:cover; display:block; border-radius:100%; margin:0 20px 0 0; height:150px; width:150px; }
.testimonial p { margin-bottom: 0; }

  @media screen and (max-width:500px) {
  .testimonial div { flex-direction:column; align-items:center; }
  .testimonial div img { margin:0; }
.testimonial blockquote { font-size:18px; text-align:center; }
 .testimonial p {text-align:center;  }
 }

/* ====== header ===== */

header        {   box-shadow: 0 0 0 rgba(0,0,0,0);height:107px; width:100%; z-index:100; position:fixed;  -webkit-transition:all .5s;transition:all .5s; }
.logo        {   width:320px; height:76px; position:absolute; left:40px; top:40px;-webkit-transition:all .5s;transition:all .5s;     background-size:contain;      }
.logo img { width: 100%; height: auto; object-fit: contain; }
.logoText img { top:-60px;transition: top 0.3s ease; width:200px; height:auto; position: absolute; left:120px; }
.scrolled .logoText img { top:20px; }

.burger { display:none; }

@media screen and (max-width:768px) {
.logo img { width: 80%; }
.logo  {   width:280px;   }

.logoText img { left:80px;width:170px; }
.burger {cursor:pointer; display:block;width:33px; height:30px;  background:none; position:relative;border-top:3px solid #fff; border-bottom:3px solid #fff;position:absolute; right:20px; top:30px; z-index:400; }
.burger:after { content:""; width:100%; height:3px; background:#fff; position:absolute; top:45%;}
.scrolled .logoText img { top:26px; }

.scrolled .burger { border-color:var(--rstDarkBlue);}
.scrolled .burger:after { background:var(--rstDarkBlue); }

    
}


header nav  {    position:absolute; right:40px; top:35px;-webkit-transition:all .5s;transition:all .5s;}
    nav li { display: inline-block; padding: 0; position:relative; }
    nav li a { text-decoration:none; font-size:18px; padding:10px;  }
    nav > ul > li > a {color:#fff;}
    nav li a:hover,
    .scrolled nav li.active > a,
    nav li.active > a { color: var(--rstBrightBlue); }
nav li.featured a { background: var(--rstGreen); }
.scrolled nav li.featured a { color:#fff; ; }

nav li.featured a:hover,
.scrolled nav li.featured a:hover { color: #fff; background:#333; }

nav li.btnCargo a{margin-right: 10px; background:#A62F2C;}
nav li.btnSCM a{margin-right: 10px;background:#67873b;}
nav li.btnLogistics a{margin-right: 10px;background:#3bc7db;}

/* === dropdown ===== */

@media screen and (min-width:768px) {
nav ul ul { transition:opacity 0.3s ease; pointer-events:none; text-align:right;  opacity:0; position:absolute; right:-10px; top:30px; width:auto; background:#fff; box-shadow:0 20px 10px rgba(0,0,0,0.2); padding:12px; border-radius:5px; }

nav ul ul li { display: block;  }
nav ul ul li a { font-size:16px;  white-space:nowrap;padding:10px 6px; display:block;  }
nav ul li:hover ul {pointer-events:all; opacity:1;  }
}


.scrolled nav ul > ul > li.active > a { color: var(--rstBlue); }
    
    
/* --- small header on scroll --- */
.scrolled header {  height:90px; background:#fff; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
.scrolled .logo {    background-image:url(../images/logo-group.svg);  top:14px;  -webkit-transition:all .5s; transition:all .5s; width:230px; height:55px; background-size:contain;    }
.scrolled nav li a { color: var(--rstDarkBlue); }
.scrolled nav li a:hover {color:var(--rstBlue); }

@media screen and (max-width:500px) {
    .scrolled .logo {   width:220px; top:20px;     }
}

/* ====== header ===== */



/* ===== side buttons ===== */

.sideBtns { position:fixed; right:-10px; top:33%;white-space: nowrap; margin-right: -90px;  display:flex;  align-items: center; z-index:100;transform:translateY(-50%) rotate(90deg); }
.sideBtns a { transition:all 0.2s ease; top:0;padding-top:20px; position:relative;background:var(--rstBlue); color:#fff; display:inline-block; border-radius:0 0 10px 10px ; padding:30px 24px 12px 24px; text-decoration:none; margin-right:10px;  }
.sideBtns a:hover {  top:10px; }

/* ==== pageHero ==== */

.pageHero { display:flex; align-items:center; color:#fff; text-shadow:0 0 10px rgba(0,0,0,1); justify-content:center;padding:90px 40px 90px;  }
.pageHero img { position:absolute; width:100%; object-fit:cover; z-index:-1;}
.pageHero,
.pageHero img { height:500px; }
.pageHero h2 { color:#fff; font-size:60px;padding-top:60px; display:flex; align-items:center; }
.pageHero h2 img { width:70px; height:70px; object-fit:contain; position:relative; margin-right:10px;  }

/* ====== content ===== */

main { padding:90px 40px 40px 40px ; }

.box { border:1px solid #ccc; margin:40px 0 ; padding:20px 20px 10px 20px;  border-radius:5px; }

.callout { display:flex; align-items:center; justify-content:space-between; padding:20px; border-radius:5px; margin-top:30px; }
.callout a {margin:0; }
.callout p { color:#fff; }
.calloutFlex { padding-left:20px;display:flex; flex-wrap:wrap; flex-direction:column; align-items:flex-end; justify-content:flex-end; }
@media screen and (min-width:501px) {
    .calloutFlex a:first-child {margin-bottom:6px; }
}
.calloutFlex .btn { display:block; }

.callout h3, .callout p { margin:0; padding:0;color:#fff;}

@media screen and (max-width:500px) {
main { padding:40px 20px 0 ; }
.callout { flex-direction:column; margin-bottom:20px; }

.calloutFlex { display:flex; flex-direction:column; justify-content:center; text-align:center; }
.calloutFlex p { display:flex; }
.calloutFlex p a { margin: 0 4px; }

.template-5 .callout h3, .callout p { margin:0 0 20px 0; }
.pageHero, .pageHero img { height:300px; }
.pageHero { padding:0; }
.pageHero h2 { font-size:32px;padding-top:90px;  }
.pageHero h2 img { width:40px; height:40px; }

}

.template-3 main,
.template-4 main,
.template-5 main{ max-width:1300px; margin:0 auto; }

.template-3 h3,
.template-4 h3,
.template-5 h3 { }

.page-imports main h2 { color:var(--rstGreen);}
.page-imports .pageHero { border-bottom:10px solid var(--rstGreen); }

.page-e-commerce-imports main h2 { color:var(--rstRed);}
.page-e-commerce-imports .pageHero { border-bottom:10px solid var(--rstRed); }

.page-exports main h2 { color:var(--rstBlue);}
.page-exports .pageHero { border-bottom:10px solid var(--rstBlue); }

.page-haulage main h2 { color:var(--rstDarkGrey);}
.page-haulage .pageHero { border-bottom:10px solid var(--rstDarkGrey); }

.page-additional-services main h2 { color:var(--rstGreen);}
.page-additional-services .pageHero { border-bottom:10px solid var(--rstGreen); }



.sideBarLinks li { position:relative;display:block; margin-bottom:7px; width:100%; }
.sideBarLinks li a { display:block; background:#ccc; padding:12px 20px; border-radius:30px; text-decoration:none; }
.sideBarLinks li a:hover { background:#ddd; }
.sideBarLinks li img { position:absolute; right:20px; top:10px; width:30px; height:30px; object-fit:contain; }
.sideBarLinks li.active a { opacity:0.4; pointer-events:none; }

.page-imports .sideBarLinks li a,
.page-imports .callout{ background: var(--rstGreen); color:#fff;}
.page-e-commerce-imports .sideBarLinks li a,
.page-e-commerce-imports .callout{ background: var(--rstRed); color:#fff;}
.page-exports .sideBarLinks li a,
.page-exports .callout{ background: var(--rstBlue); color:#fff;}
.page-haulage .sideBarLinks li a,
.page-haulage .callout{ background: var(--rstDarkGrey); color:#fff;}
.page-additional-services .sideBarLinks li a,
.page-additional-services .callout{ background: var(--rstGreen); color:#fff;}


.page-imports .sideBarLinks li a:hover,
.page-e-commerce-imports .sideBarLinks li a:hover,
.page-exports .sideBarLinks li a:hover,
.page-haulage .sideBarLinks li a:hover,
.page-additional-services .sideBarLinks li a:hover { opacity:0.9; }

.wrapper    {    background:#fff; width:100%; overflow:hidden;z-index:50; position:relative; top:100%; text-align:center; }
.tel        {    color:#fff; font-size: 40px; font-weight: 300; bottom:40px; right:40px; z-index:50;  position:fixed; }

.arrow        {   position: fixed; bottom:40px; left:calc(50% - 28px); width:56px; z-index: 10; height:41px; background: url(../images/arrow.png) no-repeat 10px 10px; margin:0 auto; text-indent:-9999px; display:block;opacity:1;
            -webkit-animation: pulsate 1s ease-out; -webkit-animation-iteration-count: infinite;
            -moz-animation: pulsate 1s ease-out; -moz-animation-iteration-count: infinite;
            animation: pulsate 1s ease-out; animation-iteration-count: infinite;  }


@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1, 1); opacity: 0.0;}
}


/* ====== footer ===== */


footer        { z-index:50; position:relative; width:100%; background: var(--rstDarkBlue);text-align:center; }
.page-home footer { top:100%; z-index:50; }

footer h2 { margin-bottom:30px; color: var(--rstBlue);  }
footer p { color: #fff; font-size: 16px; }
footer a { color:#fff; }
footer nav li a { font-size: 16px;  font-weight:300;}
footer nav  { padding: 10px 0; }

@media screen and (max-width:500px) {
    
   footer h2 { font-size:0; } 
   footer h2 a { display:block;font-size:20px; line-height:150%;  }
   
}
/* == SocMed ======= */

.socMed { margin-bottom: 20px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.socMed li { list-style: none;  font-size: 30px; }
.socMed li a { padding:0 10px; }
.socMed li a:hover { opacity:0.5;}

/* ====== modal window ====== */

#lean_overlay { position: fixed; z-index:300; top: 0px; left: 0px; height:100%; width:100%; background: #3bc7db;display: none; }
#login { width: 600px; display:none; z-index:400;   }
#tracking { width: 600px; display:none; z-index:400;   }
form            {    text-align:center; }
.modal_close    {    display:block; font-family:"FontAwesome"; font-size:25px; font-weight:700; color:#fff;  width:40px; height:40px; position:absolute; right:20px; top:20px; text-decoration:none; border-radius:30px;background:#000; text-align:center; line-height:35px; }
.clearboth    {    clear:both; display:block; }
form input[type="text"]    {    height:40px; width:200px; border:none; padding:0 5px; font-size:18px; margin:0 10px 10px 0; font-style:italic;  }
#tracking input[type="text"]    {    height:50px; width:400px; margin:0 auto; display:block;  }
.modal_close:hover { opacity:0.5; }


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

.chart { margin:0 auto; }

 header nav { width:60%; background:var(--rstDarkBlue); height:100%; position:fixed; left:100%; top:0; z-index:200; }
header nav ul { display:flex; flex-direction:column; padding:20px; }
header nav ul li { padding:10px; }
.menuOpen header nav { left:40%; }
.menuOpen header nav li a { color:#fff; }
    .tel
    { display:none; }
    .arrow { bottom:10px; }
    .grad {  }
    .logo { width:calc(100% - 40px); left:20px; top:20px;}
    .heading { left:0; margin:0; bottom:50px; padding:10px; }
    .heading h1 { font-size:42px; text-align: center; }
    .heading p { font-size:16px; display:block; text-align:center; }
    .heading h2 { font-size:24px;text-align: center; }
    .heading h3 { font-size:32px;text-align: center; }

  nav ul ul { display:none; }
}