/* ----------------------------------------
   Reset
   ---------------------------------------- */

* {margin:0;padding:0;border:0;}
*,:before,:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html,body {height:100%;}

html {-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}

* {font-weight:inherit;font-style:normal;}
a {color:inherit;text-decoration:none;cursor:pointer;}
a:active,a:hover,a:focus {outline:none;}
a[x-apple-data-detectors] {background:none!important;border:none!important;color: inherit!important;text-decoration:none!important;}

input,select {vertical-align:middle;}
img {display:block;width:100%;height:auto;}
audio,canvas,progress,video {display:inline-block;vertical-align:baseline;}

/*article,main,aside,figure,footer,header,hgroup,nav,section {display:block;}
header:after,nav:after,footer:after,ul:after,ol:after,.container:after,.row:after {content:"";display:table;clear:both;}*/

/* ----------------------------------------
	 Fonts in use
   ---------------------------------------- */

@font-face {
          font-family: 'Cera Pro';
          src: url('/fonts/CeraPro-Regular.woff') format('woff');
          font-weight: 400;
          font-style: normal;
   }
     
   @font-face {
          font-family: 'Cera Pro';
          src: url('/fonts/CeraPro-Italic.woff') format('woff');
          font-weight: 400;
          font-style: italic;
   }
   
   @font-face {
       font-family: 'Cera Pro';
       src: url('/fonts/CeraPro-Bold.woff') format('woff');
       font-weight: 600;
       font-style: normal;
   }
   
   @font-face {
       font-family: 'Cera Pro';
       src: url('/fonts/CeraPro-BoldItalic.woff') format('woff');
       font-weight: 600;
       font-style: italic;
   }
   
/* ----------------------------------------
	 Font Styles
   ---------------------------------------- */

body {
	font-family: 'Cera Pro', sans-serif;
	font-weight:400;
	letter-spacing: 0.015em;
	line-height:var(--line-height);
	color:rgb(var(--black),0.95);
  
	/* font-size */
	font-size:20px;
	/* line-height */
	--line-height:1.6;
	/* font-ratio */
	--font-ratio:1.3;
	/* h-sizes */
	--h6:1rem;
	--h5:calc(var(--h6) * var(--font-ratio));
	--h4:calc(var(--h5) * var(--font-ratio));
	--h3:calc(var(--h4) * var(--font-ratio));
	--h2:calc(var(--h3) * var(--font-ratio));
	--h1:calc(var(--h2) * var(--font-ratio));
}

.small,small {font-size:16px;}
h6,.h6 {font-size:var(--h6);}
h5,.h5 {font-size:var(--h5);line-height:1.4;}
h4,.h4 {font-size:var(--h4);line-height:1.3;}
h3,.h3 {font-size:var(--h3);line-height:1.2;}
h2,.h2 {font-size:var(--h2);line-height:1.2;}
h1,.h1 {font-size:var(--h1);line-height:1.2;}

.h1-tiny {font-size:var(--h4);line-height:1.3;}

p:not(:last-child),ul,ol,h1,h2,h3,h4,h5,h6 {
  margin-bottom:calc(1rem * var(--line-height))
}

strong,.strong,b {font-weight:600;}

em,.italic,i {font-style:italic;}

.lh-small {
  line-height:1;
}

@media (min-width:1000px) {
  
  br.hyphen {
    display:none
  }
  
}

@media(max-width:600px) {

  body {
	  font-size:18px;
	  --font-ratio:1.2;
  }
  
}

/* ----------------------------------------
	 Columns
   ---------------------------------------- */
   
[class^="col"] {
  xbackground:#ccc;
}

.pagewrap  {
  height:100%;
}

.container {
  //--myviewport:1400px;	
  //width:var(--myviewport);
  max-width:90%;
  margin:auto;
  display:grid;
  --gap:40px;
  column-gap:var(--gap);
  row-gap:20px;
  
  /* Check:
  --contentWidth: 90%;
  padding: 80px calc((100vw - var(--contentWidth)) / 2);
  */
}

.container.fluid,
.container .container {
  width:100%;
  //max-width:100%;
}

@media (min-width:1000px) {
  
  .container {
	grid-template-columns:repeat(12,1fr);
	row-gap:40px;
  }
  
  .container.fluid {
	  //grid-template-columns:calc(((100vw - var(--myviewport)) / 2) - var(--gap)) repeat(12,1fr) calc(((100vw - var(--myviewport)) / 2) - var(--gap));
    //max-width:95%;
  }
  
  .grid-2 {grid-template-columns:repeat(2,1fr)}
  .grid-3 {grid-template-columns:repeat(3,1fr)}
  .grid-4 {grid-template-columns:repeat(4,1fr)}
  
  .col-1 {grid-column:auto / span 1}
  .col-2 {grid-column:auto / span 2}
  .col-3 {grid-column:auto / span 3}
  .col-4 {grid-column:auto / span 4}
  .col-5 {grid-column:auto / span 5}
  .col-6 {grid-column:auto / span 6}
  .col-7 {grid-column:auto / span 7}
  .col-8 {grid-column:auto / span 8}
  .col-9 {grid-column:auto / span 9}
  .col-10 {grid-column:auto / span 10}
  .col-11 {grid-column:auto / span 11}
  .col,.col-12 {grid-column:auto / span 12}
  
  .start-1 {grid-column-start:1}
  .start-2 {grid-column-start:2}
  .start-3 {grid-column-start:3}
  .start-4 {grid-column-start:4}
  .start-5 {grid-column-start:5}
  .start-6 {grid-column-start:6}
  .start-7 {grid-column-start:7}
  .start-8 {grid-column-start:8}
  .start-9 {grid-column-start:9}
  .start-10 {grid-column-start:10}
  .start-11 {grid-column-start:11}
  .start-12 {grid-column-start:12}
  
  .gap-0 {--gap:0}
  .gap-l {--gap:80px}
  
}

@media(max-width:1700px) {
  
  body {
    zoom:90%;
  }
  
}

@media(max-width:1200px) {
  
  .portfolio .col-2,
  .portfolio .col-3,
  .portfolio .col-4,
  .portfolio .col-5 {
    grid-column:auto / span 6;
    align-self:center;
    padding:20px 0;
  }
  
  .portfolio .col-2 {
    justify-self:center;
  }
  
  .portfolio .small-img img {
    max-height:450px;
  }
  
  .portfolio [class^="col"]:nth-child(2n) {
    text-align:right;
  }

} 

@media print {
  
  body,.container {
	width:100%;
  }
}

/* ----------------------------------------
 Color
 ---------------------------------------- */

:root {
  --black:15,23,42;
  --main-color:#ffdf28;
  --shadow: 0 10px 25px 0 rgb(var(--black),0.1);
}

.black {color:rgb(var(--black),1.0)}
.gray {color:rgb(var(--black),0.5)}
.white {color:white}

/* ----------------------------------------
	 Navigation
   ---------------------------------------- */
   
nav ul {
  display:flex;
  justify-content:flex-end;
}

nav li {
  padding-left:20px;
}

.mobile nav,
.screen .bt-menu {
	display:none;
}

.screen nav {
	display:block;
}

.bt-menu {
	background:url("./../images/bt-menu.svg")no-repeat;
}

.bt-menu.active {
	background:url("./../images/bt-close.svg")no-repeat;
}

.bt-menu,.bt-menu.active {
	padding:25px;
	background-size:100% auto;
	cursor:pointer;
	position:absolute;
	top:50px;
	right:15px;
}

/* ----------------------------------------
	 Styles
   ---------------------------------------- */
.screen header {
  padding:80px 0 40px 0;
}

.mobile header {
  padding:40px 0 20px 0;
}

.screen section {
  padding:80px 0;
}

.mobile section {
  padding:20px 0;
}

.logo {
  display:block;
  width:130px;
}

.mobile .logo {
  margin:0 auto;
}

.black-box,
.white-box {
  min-height:45vw;
  min-width:45vw;
  padding:80px;
  display:grid;
  grid-template-columns:100%;
  place-content:center;
}

.white-box {
  //min-height:45vw;
}

.black-box {
  text-align:center;
}

.black-box h4 {
  //color:yellow;
}

.bx-wrapper {
  padding-top:50px;
}

.bx-pager {
  display:flex;
  justify-content:center;
}

.bx-pager-link {
  display:inline-block;
  font-size:0;
  color:transparent;
  width:50px;
  border-top:5px solid #838a9c;
  padding-top:10px;
  margin:30px 12px;
  cursor:pointer;
}

.bx-pager-link.active {
  border-top:5px solid yellow;
  cursor:auto;
}

.bx-pager-link:not(.active):hover {
  border-top:5px solid rgba(131, 138, 156, 0.801);
  opacity:1;
}

.mobile .black-box {
  //min-height:100vw;
}

.mobile h1:not(.h4),
.mobile .h1 {
  font-size: calc(34px + 6 * ((100vw - 320px) / 680));
}

.mobile h1 {
  //text-align:left;
}

.mobile .black-box {
  padding:60px 20px;
  margin:0 -20px;
}

.mobile .white-box {
  padding:20px 0 40px 0;
}

.black-box {
  background:rgb(var(--black),0.95);
  color:white;
}
/*
.portfolio span {
  display:inline-block;
  background:#1b2335;
  color:white;
  padding:2px 6px;
  margin:3px 0;
  font-size:0.8em;
}

.portfolio a:hover span {
  color:yellow;
}
*/
.portfolio p {
  color:white;
  font-size:0.8em;
}

.portfolio span {
    background:#1b2335;
    padding:6px;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    line-height:34px;
}

.portfolio a:hover {
  color:yellow;
}

.browser {
  background:rgb(var(--black),0.15) url(./../images/browser-top-medium-2.svg) no-repeat left top;
  background-size:auto 25px;
  padding:25px 0 15px 0;
  margin-bottom:20px;
  border:1px solid #D8DBDC;
  border-radius:10px;

}

.browser img {
  border-top:1px solid #D8DBDC;
}

.mobile .browser::before {
  left:100px;
  right:10px;
}

footer .container {
  padding:40px 0;
  align-items:center;
}

footer .logo {
  width:110px;
  height:auto;
}

.screen footer ul {
  display:flex;
  justify-content:space-between;
  font-size:16px;
}

.mobile footer ul {
  text-align:center;
}

.cookie {
  width:80px;
  height:auto;
  margin:0 auto;
}

.underline {
  border-bottom:3px solid rgb(var(--black),0.95);
}

.link {
  border-bottom:1px solid rgb(var(--black),0.95);
}

.link-at:hover span {
  color:yellow;
}

/* ----------------------------------------
	 Helpers
   ---------------------------------------- */
   
@media (min-width:1000px) {
  .checksize {display:none;}
}

/* image */

.auto-resize img,
img.auto-resize {
	display:block;
	object-fit:cover;
	width:100%;
	height:100%;
}

/* grid */

.grid {
  display:grid;
}

.flex {
  display:flex;
  direction:row;
  flex-wrap:wrap;
}

.align-top {
  align-items:start;
  align-self:start;
  /*flex*/
  align-items:flex-start;
  align-self:flex-start;
}

.align-right {
  justify-items:end;
  justify-self:end;
  /*flex*/
  justify-content:flex-end;
}

.align-bottom {
  align-items:end;
  align-self:end;
  /*flex*/
  align-items:flex-end;
  align-self:flex-end;
}

.align-left {
  justify-items:start;
  justify-self:start;
  /*flex*/
  justify-content:flex-start;
  
}

.align-center {
  justify-items:center;
  justify-self:center;
  /*flex*/
  justify-content:center;
}

.align-middle {
  align-items:center;
  align-self:center;
}

.content-middle {
  display:grid;
  place-content:center;
}

.content-bottom {
  display:grid;
  place-content:end;
}

.content-stretch {
  display:grid;
  place-content:stretch;
}

.content-stretch > :last-child {
  align-self:end;
}

.stretch-x {
  justify-items:stretch;
  justify-self:stretch;
  /*flex*/
  justify-content:space-between;
}

.stretch-y {
  align-items:stretch;
  align-self:stretch;  
}

/* Font Helpers */

.text-center {text-align:center;}

.text-left {text-align:left;}

.text-right {text-align:right;}

.text-justify {
	text-align:justify;
	text-align-last:end;
}

.uppercase {text-transform:uppercase;}

.lowercase {text-transform:lowercase;}

mark {background:#ffff00;}

.strike {text-decoration:line-through;}

::selection {background:#ffff00;}

sup,sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub { 
  top: 0.4em; 
}

q,.quotes,blockquote {
	quotes:"\201E" "\201C";
}

/* list styles */

main ul {
  list-style:none;
  padding:0;
  margin:0;
}

main li {
  padding-left:20px;
  padding-bottom:5px;
  position:relative;
  min-width:100%;
}

main li::before {
  content:'';
  padding:0.16em;
  margin-top:0.5em;
  background:black;
  border:1px solid black;
  border-radius:50%;
  position:absolute;
  z-index:999;
  left:0;
}

main li li {
	padding-top:5px;
	padding-bottom:0px;
}

main li li::before {
  background:none;
  border:1px solid black;
}

.lined {
	border-bottom:1px dotted black;
}

.lined > ul {
	margin-top:5px;
	margin-bottom:-5px;
}

.lined > li {
	padding-top:10px;
	padding-bottom:10px;
	border-top:1px dotted black;
}

header ul,
nav ul,
footer ul,
.no-list,
.no-list *,
.no-list li::before {
	list-style:none;
	margin:0;
	padding:0;
}

/* lang */

html[lang="en"] q,html[lang="en"] .quotes,html[lang="en"] blockquote {
	quotes:"\201C" "\201D";
}

html[lang="en"] #de,html[lang="de"] #en {
	display:none;
}

/* float: */

.float-left {float:left;}

.float-right {float:right;}

.float-none {clear:both;}

.clear:after {
	content:"";
	display:table;
	clear:both;
}

/* position */

.relative {position:relative;}

.absolute {position:absolute;}

.fixed {position:fixed;}


/* display: */

.hidden {display:none;}

.inline {display:inline;}

.block {display:block;}

.inline-block {display:inline-block;}

/* margin: / padding: */
.ma-0 > * {margin:0}
.ma-0,.ma-0 > *,.mr-0,.mx-0 {margin-right:0;}
.ma-0,.ml-0,.mx-0 {margin-left:0;}
.ma-0,.mt-0,.my-0 {margin-top:0;}
.ma-0,.mb-0,.my-0 {margin-bottom:0;}

.ma-10,.mr-10,.mx-10 {margin-right:10px;}
.ma-10,.ml-10,.mx-10 {margin-left:10px;}
.ma-10,.mt-10,.my-10 {margin-top:10px;}
.ma-10,.mb-10,.my-10 {margin-bottom:10px;}

.ma-20,.mr-20,.mx-20 {margin-right:20px;}
.ma-20,.ml-20,.mx-20 {margin-left:20px;}
.ma-20,.mt-20,.my-20 {margin-top:20px;}
.ma-20,.mb-20,.my-20 {margin-bottom:20px;}

.pa-0 > * {padding:0}
.pa-0,.pa-0 > *,.pr-0,.px-0 {padding-right:0;}
.pa-0,.pl-0,.px-0 {padding-left:0;}
.pa-0,.pt-0,.py-0 {padding-top:0;}
.pa-0,.pb-0,.py-0 {padding-bottom:0;}

.pa-10,.pr-10,.px-10 {padding-right:10px;}
.pa-10,.pl-10,.px-10 {padding-left:10px;}
.pa-10,.pt-10,.py-10 {padding-top:10px;}
.pa-10,.pb-10,.py-10 {padding-bottom:10px;}

.pa-20,.pr-20,.px-20 {padding-right:20px;}
.pa-20,.pl-20,.px-20 {padding-left:20px;}
.pa-20,.pt-20,.py-20 {padding-top:20px;}
.pa-20,.pb-20,.py-20 {padding-bottom:20px;}

/* border */

.bt-1,.bl-1,.bb-1,.br-1 {border:1px dotted #bbb;}
.bt-0,.bl-1,.bb-1,.br-1 {border-top:0;}
.br-0,.bt-1,.bl-1,.bb-1 {border-right:0;}
.bb-0,.bt-1,.bl-1,.br-1 {border-bottom:0;}
.bl-0,.bt-1,.bb-1,.br-1 {border-left:0;}

.ba-0,.border-0 {border:0;}

hr {
	display:block;
	height:0;
	border:0;
	margin:1.6rem 0;
	border-top:1px solid #ddd;
}