/* typo */
html {
background-color: white;
/*
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) ;
}
@media screen and (min-width: 1208px) {
html { /*cap fonts size on large display*/
font-size: 21px;
}
}
body,html{max-width: 100%;width: 100%;}
body{
font-family: Roboto, 'IBM Plex Sans', sans-serif;
overflow: hidden;
overflow-y: auto;
/* then default to regular stack*/
}
/*img positionging*/
.fill {
object-fit: fill;
/**
* This is the default behaviour.
* The image is forced to fill the whole box,
* the aspect ratio is ignored.
**/
}
.contain {
object-fit: contain;
/**
* The whole image will be displayed in the box
* and scaled down or expanded if necessary.
* The aspect ratio is maintained.
**/
}
.cover {
object-fit: cover;
/**
* The whole image is scaled down or expanded till
* it fills the box completely, the aspect ratio is
* maintained. This normally results in only part of
* the image being visible.
**/
}
.none {
object-fit: none;
/**
* The image keeps it's original size.
* This may result in not filling the box
* completely or sticking out of it.
**/
}
.scale-down {
object-fit: scale-down;
/**
* The result of 'none' and 'contain' is compared
* and the smaller concrete object is displayed.
**/
}
.has-pointer{
cursor: pointer;
}
img, amp-img, .img{
max-width: 100%;
}
amp-img {
background-color: #eee;
}
a{text-decoration: none; color:#333; cursor: pointer;}
h1,h2,h3,h4,h5,h6{
/* font-family: Roboto, 'Poppins', sans-serif;*/
font-weight: bold;
line-height: 1em;
color:#000;
}
h1.giant, .titleFont{
font-family: 'Poppins', Roboto, sans-serif;
font-weight:bold;
}
article h1, article h2, article h3, article h4, article h5, article h6{
margin-bottom:0.2em;
margin-top:0.7em;
font-weight: normal;
}
.bold, article h1.bold, article h2.bold, article h3.bold, article h4.bold, article h5.bold, article h6.bold{
font-weight: bold;
}
h1{
font-size: 2rem;
}
h1.giant-heading{
margin-top:0.7em;
font-size: 2.2rem;
line-height: 1.1em;
border-bottom: 1px solid #333;
margin-bottom:1.4rem;
font-weight: bold;
}
article h1.has-kicker{
margin-top: 0.1rem;
}
h2{
font-size: 1.8rem;
}
h3{
font-size: 1.5rem;
opacity:0.7;
}
h4{
font-size: 1.3rem;
}
h5{
font-size: 1.15rem;
}
h6{
font-size: 1rem;
}
h6{
font-size: 0.8rem;
}
h6.small{
font-size: 0.6rem;
}
p{
margin-bottom: 0.7rem;
font-size: 0.9rem;
}
p.lead{
font-size: 1.2rem;
opacity: 0.5;
margin-bottom: 1.2rem;
}
p.black{
opacity: 1;
color: #000;
}
p.small{
font-size: 0.6rem;
opacity: 0.8;
}
/* the general small caps headings */
p.sub,p.presub, p.kicker, p.byline, p.label{
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.6rem;
font-weight: bold;
opacity: 0.5;
}
p.kicker{opacity:1;}
p.byline{
opacity: 0.3;
}
p.presub{
line-height: 1em;
margin-bottom: 0;
}
p.sub{
line-height: 1em;
margin-top: 0;
}
p.kicker{
font-size: 0.7rem;
display: inline;
box-shadow: inset 0 0px 0 red, inset 0 -5px 0 #002fff45; /*gree */
/* light grey*/
padding: 0;
margin-bottom:-0.5rem;
color: rgba(0,0,0,0.75); //override link colors
}
p.kicker a{
color: inherit;
}
.outline {
color: black;
-webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
blockquote{
font-size:0.7em;
white-space: pre-line;
border-left: 10px #0a0a0a0f solid;
padding-left: 20px;
font-style: italic;
}
amp-accordion section[expanded] .show-more {
display: none;
}
amp-accordion section:not([expanded]) .show-less {
display: none;
}
.tabs ul, .tabs a{ /* override
border-bottom-color: rgba(0,0,0,0.1);
*/
border-bottom-color: rgba(0,0,0,0);
border-bottom-width: 5px;
}
/* bulma override*/
.tabs li a {
font-weight: bold;
color:#ccc;
padding: 6px 2px;
margin-right: 17px;
}
.tabs li.is-active a {
font-weight: bold;
color:black;
border-bottom-color: #3273dc;
}
hr{
border-top: 1px solid #ccc;
}
a.logo{
display: block;
}
.airport-logo h1{
font-size:80px;
letter-spacing: 2px;
}
.airport-logo h1::before{ /* color stroke*/
position: absolute;
top: 0.57em;
display: block;
height: 16px;
background: #fffa00;
width: 180px;
content: '';
left: 0px;
z-index:-1
}
.airport-logo h2{
font-size:16px;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
.appswe-logo{
margin-bottom: 30px;
}
.appswe-logo h1{
font-size:60px;
letter-spacing: 2px;
font-family: 'pink_blueregular';
color:#000;
font-weight: normal;
}
.appswe-logo h1::before{ /* color stroke*/
position: absolute;
top: 0.57em;
display: block;
height: 16px;
background: #fffa00;
width: 190px;
content: '';
left: 0px;
z-index:-1
}
.appswe-logo h2{
font-size:20px;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
}
/* ==== */
.lowcost-logo{
margin-bottom: 30px;
}
.lowcost-logo h1{
font-size:60px;
letter-spacing: 2px;
font-family: 'pink_blueregular';
color:#000;
font-weight: normal;
}
.lowcost-logo h1::before{ /* color stroke*/
position: absolute;
top: 0.57em;
display: block;
height: 16px;
background: #fffa00;
width: 190px;
content: '';
left: 0px;
z-index:-1
}
.lowcost-logo h2{
font-size:16px;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
/* multi-level list */
.list-multi{
font-size: 0.8rem;
/*
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;*/
-webkit-column-width: 150px; /* Chrome, Safari, Opera */
-moz-column-width: 150px; /* Firefox */
column-width: 9rem;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
.list-multi ul{
margin-bottom:20px;
}
.list-multi ul{
}
.list-multi li ul li{
list-style-type: square;
list-style-position: outside;
padding: 0;
}
.list-multi p.label{
color:#000;
opacity:0.7;
font-size: inherit;
font-size: 0.7rem;
margin-bottom: 0.05rem;
}
.list-multi .grp{
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
}
.shadow {box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);}
.shadow-md {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),
0 2px 4px 0 rgba(0,0,0,0.08);}
.shadow-lg {box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
0 5px 15px 0 rgba(0,0,0,0.08);}
.shadow-inner {box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);}
.shadow-outline {box-shadow: 0 0 0 3px rgba(52,144,220,0.5);}
.shadow-none {box-shadow: none;}
.ok{}