/* COMMON BREAK POINTS */
/* smaller than or equal to 768 px (smartphones) */
/* larger than 768 px (small devices, tablets) */
/* larger than 992 px (medium devices) */
/* larger than 1200px (large devices) */
/* large screens start at 1024 */


/* Reset box-sizing */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

/* Set `body` to `relative` to allow positioning of absolute elements. Remove default margin */
body {position: relative; margin:0; padding:0;}

/* Outer wrapper for main layouts */
.wrapper {padding: 0; margin: auto; overflow: hidden;}

/* Typography */

html {font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; font-size: 100%;}
body {margin: 0; font-family: 'Ubuntu', sans-serif; font-size: 16px; font-size: 1rem; font-weight: 100; line-height: 1.5; color: #212529;}
p {margin-top: 0; margin-bottom: 1rem; font-weight: 100;}

/* Medium devices (tablets, 992px and up) */
@media (min-width:992px) {html {font-size: 150%;};body {font-size: 24px; font-size: 1.5rem;}}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 1.5rem; font-family: inherit; font-weight: 500; color: inherit; line-height: 1.1; letter-spacing:-1px;}
h1, .h1 {font-size: 3rem;}
h2, .h2 {font-size: 2.5rem;}
h3, .h3 {font-size: 2rem;}
h4, .h4 {font-size: 1.75rem;}
h5, .h5 {font-size: 1.5rem;}
h6, .h6 {font-size: 1.25rem;}

.lead {font-size: 1.25rem; font-weight: 300;}
.japanese {writing-mode: vertical-rl;}

.display-1 {font-size: 4.2rem; font-weight: 300; line-height: 1.4;}
.display-2 {font-size: 3.85rem; font-weight: 300; line-height: 1.4;}
.display-3 {font-size: 3.15rem;  font-weight: 300; line-height: 1.4;}
.display-4 {font-size: 2.45rem; font-weight: 300; line-height: 1.4;}
.display-5 {font-size: 1.75rem; font-weight: 300; line-height: 1.4;}
.display-6 {font-size: 1.4rem; font-weight: 300; line-height: 1.4;}
.display-7 {font-size: 1.2rem; font-weight: 300; line-height: 1.4;}
@media (min-width:992px) {
.display-1 {font-size: 6rem;}
.display-2 {font-size: 5.5rem;}
.display-3 {font-size: 4.5rem;}
.display-4 {font-size: 3.5rem;}
.display-5 {font-size: 2.5rem;}
.display-6 {font-size: 2rem;}
.display-7 {font-size: 1.5rem;}
}

small, .small {font-size: 80%;}
b, strong, .strong {font-weight: 400;}

/* Icon sizes */
.icon-size-1 {font-size: 15vw; line-height: 1;}

/* General lay-out */
a {text-decoration: none; color: #c55118; background-color: transparent; -webkit-text-decoration-skip: objects;}
a:hover {color: #b4b30d;}
/* Because some smartphones turn numbers into phone number links */
.nummbers-white a {color: #fff;}
.nummbers-white a:active {color: #fff;}
.nummbers-white a:visited {color: #fff;}
.nummbers-dark a {color: #222;}
.nummbers-dark a:active {color: #222;}
.nummbers-dark a:visited {color: #222;}
.nummbers-duits a {color: #c55118;}
.nummbers-duits a:active {color: #c55118;}
.nummbers-duits a:visited {color: #c55118;}
.responsive {max-width: 100%; height: auto;}
.site-padding {padding-left: 1rem; padding-right: 1rem;}
.star-bg-5 {background-image: url(../media/star-bg-5.png); background-position: -15% 10%; background-repeat: no-repeat; background-size: 50vw;}
.star-bg-20 {background-image: url(../media/star-bg-20.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-60 {background-image: url(../media/star-bg-60.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-70 {background-image: url(../media/star-bg-70.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-80 {background-image: url(../media/star-bg-80.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-100 {background-image: url(../media/star-bg-100.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}


.star-bg-1-dark {background-image: url(../media/star-bg-1-dark.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-3-dark {background-image: url(../media/star-bg-3-dark.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-5-dark {background-image: url(../media/star-bg-5-dark.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}

.star-bg-5-ms {background-image: url(../media/star-bg-5-ms.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-10-ms {background-image: url(../media/star-bg-10-ms.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh; fill: #c55118;}
.star-bg-20-ms {background-image: url(../media/star-bg-20-ms.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}

.star-bg-5-js {background-image: url(../media/star-bg-5-js.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}
.star-bg-20-js {background-image: url(../media/star-bg-20-js.png); background-position: 0% 10%; background-repeat: no-repeat; background-size: 50vh;}

.bgh-size-20 {background-size: 20vh;}
.bgh-size-40 {background-size: 40vh;}
.bgh-size-120 {background-size: 120vh; background-position: 50% 0%;}

/* Display Blocks */
.hero {width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.logo {max-width: 80vw;}
/* Medium devices (tablets, 992px and up) */
@media (min-width:992px) {.logo {max-width: 850px;}}
.simple-grid {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.parallax {background-position: center; background-repeat: no-repeat; background-size: cover !important;}
@media (min-width:568px) {.parallax {}}
footer {padding: 1px;}
.media-container-row  {} /* use for item with text and photo on side */

.logo-container-row {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: space-between; -webkit-align-content: space-between; -ms-flex-line-pack: space-between; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.media-con-figure {width: 15%;}
.media-con-text {width:83%;}
@media (min-width:992px) {.media-con-figure {width:30%;}.media-con-text {width:65%;}}




/* Media boxes with unequal widths */
.media {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.media img {display: block;}
.media-body {width: 100%;}

@media (min-width:450px) {
.media-body {-webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%;}
.media-img {-webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%;}
.even {order: -1;}
}

.align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important;}

.align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important;}

.align-self-center { -ms-flex-item-align: center !important; align-self: center !important;}


/* Photogrid container with css grid - looks best at max-width: 1100px */
.photo-grid {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.photo-grid img {display: block; max-width: 100%; max-height: 50vh; margin: 12px auto;}

@media (min-width:992px) {
.photo-grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px;}
.item-ms-1 {grid-column: auto / span 2; grid-row: auto / span 2;}
.item-ms-5 {grid-column: 3 / span 1; grid-row: 2 / span 2;}
.item-js-1, .item-js-4, .item-pj-1 {grid-column: auto / span 1; grid-row: auto / span 2;}
.item-js-2, .item-js-3 {grid-column: auto / span 2; grid-row: auto / span 2;}
.item-pj-5 {grid-column: 2 / span 2; grid-row: 2 / span 2;}
.photo-grid img:last-child {justify-self: end; align-self: end;}
.photo-grid img {margin: 0;}
/*  .photo-grid img:hover {transform: scale(1.1);-webkit-transform: scale(1.1); -ms-transform: scale(1.1);cursor: pointer;} */
}

@supports not (display: grid) {
.photo-grid img {max-height: 21vh; margin-bottom: 5vh;}
}

/* Photogrid Container for 2 items in a row (2 columns). With flexbox — works with any max-width! Minus margins in box-container and img-box create gutter

Think of a way to have options with simple class names for 3 and 4 items in a row without repeating most code.

Plus separate the .text-box code so it can be used anywhere?

Study bootstrap css for best way.
 */

[class^="box-"], [class*="box-"] {background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; margin-bottom: 20px;} /* Sets up background image and makes inner .text-box possible */

[class^="box-"] img, [class*="box-"] img {display: block; width: 100%; height: auto;}

/* 414px is the width of an iPhone 8 Plus, so you get 2 columns when seen in landscape mode, 1 column in portrait. */
@media (min-width:450px) {
[class^="box-container-"], [class*="box-container-"] {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0vw;} /* margin: 0vw; is for columns without gutter */

.box-container-2 {margin: -2vw;} /* 2 columns */
.box-container-3 {margin: -2vw;} /* 3 columns */
.box-container-4 {margin: -1vw;} /* 4 columns */

.box-2 {flex: 0 0 calc(50% - 4vw); margin: 2vw;} /* 2 columns */
.box-2l {flex: 0 0 calc(50%);} /* 2 columns, no gutter */
.box-3 {flex: 0 0 calc(33.3333% - 4vw); margin: 2vw;} /* 3 columns */
.box-3l {flex: 0 0 calc(33.3333%);} /* 3 columns, no gutter */
.box-4 {flex: 0 0 calc(25% - 2vw); margin: 1vw;} /* 3 columns */
.box-4l {flex: 0 0 calc(25%);} /* 4 columns, no gutter */
}

.box-center {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content : center; justify-content: center;}

.parent:hover ~ .child {transform: scale(1.05);-webkit-transform: scale(1.05); -ms-transform: scale(1.05);}
.parent:hover ~ .child .btn-white-outline {color: #222; background-color: #fff; border-color: #fff;}
.parent:hover ~ .child .btn-black-outline {color: #fff; background-color: #222; border-color: #222;}

/* IMPORTANT !!!! : Separate flex behaviors! See https://getbootstrap.com/docs/4.0/utilities/flex/ */

/* End box-container */

.text-box {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content : center; justify-content: center; position: absolute; top: 0; bottom: 0; padding: 30px; left: 0px; right: 0px; transition: .5s ease; opacity: 0;} /* Overlay effect: transition: .5s ease; opacity: 0; | Source: https://www.w3schools.com/howto/howto_css_image_overlay.asp */

.box-2l:hover .text-box, .box-3l:hover .text-box {opacity: 1;} /* Overlay effect */

.dark-filter {background-color: rgba(0, 0, 0, 0.4);}
.duits-filter {background-color: rgba(197, 81, 24, 0.2);}
.ms-filter {background-color: rgba(180, 179, 13, 0.2);}
.white-filter {background-color: rgba(255, 255, 255, 0.55);}

.info-border-duits {border-bottom: 1px solid var(--color-duits);}
.info-border-ms {border-bottom: 1px solid var(--color-ms);}
.info-border-js {border-bottom: 1px solid var(--color-js);}
.info-border-pj {border-bottom: 1px solid var(--color-pj);}
.info-center {height: calc(100% - 1rem); 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; padding: 0.5rem;} /* Text must be within a block element like a div to avoid problems when using tags like small, strong, snap, etc! "-1rem" is used to delete padding of 0.5 rem is used */
.info-img {max-width: 60%;}

/* check the browser prefixes above and fix */

/* Video */

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000; /* "transparent" or mac background color: #393939 */
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}


/* Clients */
.clients img {margin: 0 5px;padding: 25px; width: 140px;}
@media (max-width:992px) {.clients img {width: 85px; padding: 12px;}}

/* Navigation */
.navbar {display: flex; justify-content: space-between;}

/* Width, height, margins, paddings, shadow */
/* Width of div */
.wide-800 {width:100%; max-width: 800px; margin: 0 auto;}
.wide-1100 {width:100%; max-width: 1100px; margin: 0 auto;}
.wide-1400 {width:100%; max-width: 1400px; margin: 0 auto;}
/* Other widths */
.wide-10 {width:10% !important;}
.wide-20 {width:20% !important;}
.wide-30 {width:30% !important;}
.wide-40 {width:40% !important;}
.wide-50 {width:50% !important;}
.wide-60 {width:60% !important;}
.wide-70 {width:70% !important;}
.wide-80 {width:80% !important;}
.wide-90 {width:90% !important;}
/* Screen height for divs */
.high-100 {min-height: 100vh;}
.high-95 {min-height: 95vh;}
.high-90 {min-height: 90vh;}
.high-85 {min-height: 85vh;}
.high-80 {min-height: 80vh;}
.high-75 {min-height: 75vh;}
.high-70 {min-height: 70vh;}
.high-65 {min-height: 65vh;}
.high-60 {min-height: 60vh;}
.high-55 {min-height: 55vh;}
.high-50 {min-height: 50vh;}
.high-45 {min-height: 45vh;}
.high-40 {min-height: 40vh;}
.margin-auto {margin-left: auto; margin-right: auto;}
/* Margin top = mt */
.mt-0 {margin-top: 0;}
.mt-1 {margin-top: 1rem;}
.mt-2 {margin-top: 2rem;}
.mt-3 {margin-top: 3rem;}
.mt-4 {margin-top: 4rem;}
.mt-5 {margin-top: 5rem;}
.mt-6 {margin-top: 6rem;}
.mt-7 {margin-top: 7rem;}
.mt-8 {margin-top: 8rem;}
.mt-9 {margin-top: 9rem;}
.mt-10 {margin-top: 10rem;}
/* Margin bottom = mb */
.mb-0 {margin-bottom: 0;}
.mb-1 {margin-bottom: 1rem;}
.mb-2 {margin-bottom: 2rem;}
.mb-3 {margin-bottom: 3rem;}
.mb-4 {margin-bottom: 4rem;}
.mb-5 {margin-bottom: 5rem;}
.mb-6 {margin-bottom: 6rem;}
.mb-7 {margin-bottom: 7rem;}
.mb-8 {margin-bottom: 8rem;}
.mb-9 {margin-bottom: 9rem;}
.mb-10 {margin-bottom: 10rem;}
/* Margin top bottom = mtb */
.mtb-0 {margin-top: 0; margin-bottom: 0;}
.mtb-1 {margin-top: 1rem; margin-bottom: 1rem;}
.mtb-2 {margin-top: 2rem; margin-bottom: 2rem;}
.mtb-3 {margin-top: 3rem; margin-bottom: 3rem;}
.mtb-4 {margin-top: 4rem; margin-bottom: 4rem;}
.mtb-5 {margin-top: 5rem; margin-bottom: 5rem;}
.mtb-6 {margin-top: 6rem; margin-bottom: 6rem;}
.mtb-7 {margin-top: 7rem; margin-bottom: 7rem;}
.mtb-8 {margin-top: 8rem; margin-bottom: 8rem;}
.mtb-9 {margin-top: 9rem; margin-bottom: 9rem;}
.mtb-10 {margin-top: 10; margin-bottom: 10rem;}
/* Margin right = mr */
.mr-0 {margin-right: 0rem;}
.mr-1 {margin-right: 1rem;}
.mr-2 {margin-right: 2rem;}
.mr-3 {margin-right: 3rem;}
.mr-4 {margin-right: 4rem;}
.mr-5 {margin-right: 5rem;}

/* Margin right = ml */
.ml-0 {margin-left: 0rem;}
.ml-1 {margin-left: 1rem;}
.ml-2 {margin-left: 2rem;}
.ml-3 {margin-left: 3rem;}
.ml-4 {margin-left: 4rem;}
.ml-5 {margin-left: 5rem;}

/* Padding = p */
.p-05 {padding: 0.5rem;}
.p-1 {padding: 1rem;}
.p-2 {padding: 2rem;}
.p-3 {padding: 3rem;}
.p-4 {padding: 4rem;}
.p-5 {padding: 5rem;}
/* Padding top = pt */
.pt-1 {padding-top: 1rem;}
.pt-2 {padding-top: 2rem;}
.pt-3 {padding-top: 3rem;}
.pt-4 {padding-top: 4rem;}
.pt-5 {padding-top: 5rem;}
.pt-6 {padding-top: 6rem;}
.pt-7 {padding-top: 7rem;}
.pt-8 {padding-top: 8rem;}
.pt-9 {padding-top: 9rem;}
.pt-10 {padding-top: 10rem;}
/* Padding bottom = pb */
.pb-1 {padding-bottom: 1rem;}
.pb-2 {padding-bottom: 2rem;}
.pb-3 {padding-bottom: 3rem;}
.pb-4 {padding-bottom: 4rem;}
.pb-5 {padding-bottom: 5rem;}
.pb-6 {padding-bottom: 6rem;}
.pb-7 {padding-bottom: 7rem;}
.pb-8 {padding-bottom: 8rem;}
.pb-9 {padding-bottom: 9rem;}
.pb-10 {padding-bottom: 10rem;}
/* Padding top bottom = ptb */
.ptb-1 {padding-top: 1rem; padding-bottom: 1rem;}
.ptb-2 {padding-top: 2rem; padding-bottom: 2rem;}
.ptb-3 {padding-top: 3rem; padding-bottom: 3rem;}
.ptb-4 {padding-top: 4rem; padding-bottom: 4rem;}
.ptb-5 {padding-top: 5rem; padding-bottom: 5rem;}
.ptb-6 {padding-top: 6rem; padding-bottom: 6rem;}
.ptb-7 {padding-top: 7rem; padding-bottom: 7rem;}
.ptb-8 {padding-top: 8rem; padding-bottom: 8rem;}
.ptb-9 {padding-top: 9rem; padding-bottom: 9rem;}
.ptb-10 {padding-top: 10rem; padding-bottom: 10rem;}
/* Padding left right = plr */
.plr-1 {padding-left: 1rem; padding-right: 1rem;}
.plr-2 {padding-left: 2rem; padding-right: 2rem;}
.plr-3 {padding-left: 3rem; padding-right: 3rem;}
.plr-4 {padding-left: 4rem; padding-right: 4rem;}
.plr-5 {padding-left: 5rem; padding-right: 5rem;}
/* Maximum width */
.maxw-250 {max-width: 250px;}
.maxw-300 {max-width: 300px;}
.maxw-450 {max-width: 450px;}
.maxw-650 {max-width: 650px;}

.zoom-1:hover {transform: scale(1.05);-webkit-transform: scale(1.05); -ms-transform: scale(1.05);}
.center-text {text-align: center;}
.shadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.text-shadow {text-shadow: 1px 1px 10px #666666;}
.rounded {border-radius: 0.25rem !important;}
.relative {position: relative;}
.absolute {position: absolute; width: 100%;}
.divider-dc {display:block; border:none; height:1px; background:black; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(var(--color-duits)), to(var(--color-1)));} /* with Duits color on cream background : use as class of span */
.divider-ms {display:block; border:none; height:1px; background:black; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(var(--color-ms)), to(var(--color-1)));} /* with MS color on cream background : use as class of span */
.l-spacing-1 {letter-spacing: 1px;}
.l-spacing-2 {letter-spacing: 2px;}
.l-spacing-3 {letter-spacing: 3px;}
.l-spacing-4 {letter-spacing: 4px;}
.l-spacing-5 {letter-spacing: 5px;}
.l-spacing-6 {letter-spacing: 6px;}
.l-spacing-7 {letter-spacing: 7px;}
.l-spacing-8 {letter-spacing: 8px;}
.l-spacing-9 {letter-spacing: 9px;}
.l-spacing-10 {letter-spacing: 10px;}

/* Transitions */
.btn, .icon, .photo-grid img, .zoom-1 {-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

/* .photo-grid img:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);} */

/* Buttons */
.btn {font-size: 0.75rem !important;font-weight: 400; border: 1px solid; font-style: normal; white-space: normal; padding: .25rem 1rem; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; word-break: break-word;}
.btn:before {font-size: 1.2rem;}
.btn-white-outline, .btn-white-outline:active {background: none;border-color: #fff !important; color: #fff;}
.btn-white-outline:hover, .btn-white-outline:focus, .zoom-1:hover .btn-white-outline {color: #222; background-color: #fff; border-color: #fff;}
.btn-black-outline, .btn-black-outline:active {background: none;border-color: #222;color: #222;}
.btn-black-outline:hover, .btn-black-outline:focus, .zoom-1:hover .btn-black-outline {color: #fff; background-color: #222; border-color: #222;}

/* Medium devices (tablets, 992px and up) */
@media (min-width:992px) {.btn {font-size: .65rem !important;font-weight: 500; solid;font-style: normal;letter-spacing: 1px;}}

.btn-medium {font-size: 1rem !important; padding: 0.5rem 2rem;}
.btn-large {font-size: 1.2rem !important; padding: 1rem 3rem;}

/* Icons */
.icon {font-size: 4rem;}
/* Medium devices (tablets, 992px and up) */
@media (min-width:992px) {.icon {font-size: 6rem;}}
.icon:hover {color: #c55118;transform: scale(1.2);-webkit-transform: scale(1.2); -ms-transform: scale(1.2);}

/* ROOTS TRIAL — Source: https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f
USAGE: var(--color-duits);
IMPORTANT: IE11 CANNOT USE VARIABLES !!!! */
:root {
  --white: #fff;
  --dark: #222;
  --color-1: #f9f8f3;
  --color-duits: #c55118;
  --color-ms: #b4b30d;
  --color-ms2: #bfc2b6;
  --color-js: #cd0067;
  --color-pj: #000;
  --color-blue: #95c0de;
}

/* Colors */

/* white */
.white {color: #fff;}
.white-bg {background-color: #fff;}
/* dark */
.dark {color: #222;}
.dark-bg {background-color: #222;}
/* cream */
.color-1 {color: #f9f8f3;}
.color-1-bg {background-color:#f9f8f3;}
/* DUITS brown */
.color-duits {color: #c55118;}
.color-duits-bg {background-color: #c55118;}
/* MeijiShowa green */
.color-ms {color: #b4b30d;}
.color-ms-bg {background-color: #b4b30d;}
/* MeijiShowa green 2 */
.color-ms2 {color: #bfc2b6;}
.color-ms2-bg {background-color: #bfc2b6;}
/* JAPANESE STREETS pink */
.color-js {color: #cd0067;}
.color-js-bg {background-color: #cd0067;}
/* PhotoJournalist Japan Correspondent black */
.color-pj {color: #000;}
.color-pj-bg {background-color: #000;}
.radial-ms2 {background:radial-gradient(ellipse, #f9f8f3 30%, #565f3c);}
.top-diagonal-dms {background: linear-gradient(20deg, var(--color-ms) 45%, var(--color-duits) 45%);}
.top-diagonal-d1 {background: linear-gradient(20deg, var(--color-1) 45%, var(--color-duits) 45%)}
.halfway-color-d1 {background: linear-gradient(var(--color-duits) 46%, var(--color-1) 40%)}
.curve-position {position: absolute; left:0; width: 110vw; top: 45%;}

/* Arrows */

i {border: solid; border-width: 0 1px 1px 0;display: inline-block;padding: 20px;}
.right {transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.left {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.up {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
.down {transform: rotate(45deg);-webkit-transform: rotate(45deg);}
i:hover {border-color: #222;}

/* Font Awesome width: 1.28571429em creates a fixed width for the icon, margin on both sides and text-align: center are used to make sure the icon is always fully centered in its box */
[class^="icon-"]:before, [class*="icon-"]:before {font-family: "Font Awesome 5 Free";  display: inline-block; speak: none; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 .2rem; vertical-align: middle; width: 1.28571429em; text-align: center;}

.icon-address:before {content: "\f2bb";}
.icon-angle-down:before {content: "\f107";}
.icon-angle-up:before {content: "\f106";}
.icon-chart:before {content: "\f1fe";}
.icon-cloud:before {content: "\f382";}
.icon-compass:before {content: "\f14e";}
.icon-disaster:before {content: "\f6f1";}
.icon-envelope:before {content: "\f0e0";}
.icon-eye:before {content: "\f06e";}
.icon-fist:before {content: "\f255";}
.icon-globe:before {content: "\f0ac";}
.icon-handshake:before {content: "\f2b5";}
.icon-history:before {content: "\f1da";}
.icon-home:before {content: "\f015";}
.icon-hourglass:before {content: "\f252";}
.icon-info:before {content: "\f05a";}
.icon-jet:before {content: "\f0fb";}
.icon-link:before {content: "\f35d";}
.icon-phone:before {content: "\f098";}

/* Font Awesome Brands */
[class^="icon-brand-"]:before, [class*="icon-brand-"]:before {font-family: "Font Awesome 5 Brands";}

.icon-brand-facebook:before {content: "\f39e";}
.icon-brand-instagram:before {content: "\f16d";}
.icon-brand-twitter:before {content: "\f099";}

.fas, .fab {border: 0;}

/* Responsive YouTube Videos */

.video-responsive{overflow:hidden;padding-bottom:56.25%;padding-top: 30px;position:relative;height:0;}
.video-responsive iframe{left:0;top:0;height:100%;width:100%;position:absolute;}


.embed-container {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;max-width: 100%;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}