/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}
/* playfair-display-700 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/playfair-display-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/playfair-display-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/playfair-display-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/playfair-display-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/playfair-display-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/playfair-display-v30-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v28-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* source-code-pro-regular - latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-code-pro-v22-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-code-pro-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-code-pro-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-code-pro-v22-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-500 - latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/source-code-pro-v22-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-code-pro-v22-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-code-pro-v22-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-code-pro-v22-latin-500.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-700 - latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-code-pro-v22-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-code-pro-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-code-pro-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-code-pro-v22-latin-700.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-italic - latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-code-pro-v22-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-code-pro-v22-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-code-pro-v22-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-code-pro-v22-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-code-pro-v22-latin-italic.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-BlackItalic.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-BlackItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-BlackItalic.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-BlackItalic.woff') format('woff'),
      url('../fonts/MetaSerifPro-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-Medium.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-Medium.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-Medium.woff') format('woff'),
      url('../fonts/MetaSerifPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-LightItalic.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-LightItalic.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-LightItalic.woff') format('woff'),
      url('../fonts/MetaSerifPro-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'MetaSerifPro-Book';
  src: url('../fonts/MetaSerifPro-Book.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-Book.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-Book.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-Book.woff') format('woff'),
      url('../fonts/MetaSerifPro-Book.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-Black.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-Black.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-Black.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-Black.woff') format('woff'),
      url('../fonts/MetaSerifPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-Light.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-Light.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-Light.woff') format('woff'),
      url('../fonts/MetaSerifPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-ExtraboldItalic.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-ExtraboldItalic.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-ExtraboldItalic.woff') format('woff'),
      url('../fonts/MetaSerifPro-ExtraboldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-BoldItalic.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-BoldItalic.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-BoldItalic.woff') format('woff'),
      url('../fonts/MetaSerifPro-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-Extrabold.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-Extrabold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-Extrabold.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-Extrabold.woff') format('woff'),
      url('../fonts/MetaSerifPro-Extrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'MetaSerifPro-BookItalic';
  src: url('../fonts/MetaSerifPro-BookItalic.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-BookItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-BookItalic.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-BookItalic.woff') format('woff'),
      url('../fonts/MetaSerifPro-BookItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-MediumItalic.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-MediumItalic.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-MediumItalic.woff') format('woff'),
      url('../fonts/MetaSerifPro-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'MetaSerifPro';
  src: url('../fonts/MetaSerifPro-Bold.eot');
  src: local(''),
      url('../fonts/MetaSerifPro-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/MetaSerifPro-Bold.woff2') format('woff2'),
      url('../fonts/MetaSerifPro-Bold.woff') format('woff'),
      url('../fonts/MetaSerifPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Nimbus Sans L';
  src: url('../fonts/NimbusSanL-Reg.eot');
  src: local(''),
      url('../fonts/NimbusSanL-Reg.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NimbusSanL-Reg.woff2') format('woff2'),
      url('../fonts/NimbusSanL-Reg.woff') format('woff'),
      url('../fonts/NimbusSanL-Reg.ttf') format('truetype'),
      url('../fonts/NimbusSanL-Reg.svg#NimbusSanL-Reg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nimbus Sans L';
  src: url('../fonts/NimbusSanL-Bol.eot');
  src: local(''),
      url('../fonts/NimbusSanL-Bol.eot?#iefix') format('embedded-opentype'),
      url('../fonts/NimbusSanL-Bol.woff2') format('woff2'),
      url('../fonts/NimbusSanL-Bol.woff') format('woff'),
      url('../fonts/NimbusSanL-Bol.ttf') format('truetype'),
      url('../fonts/NimbusSanL-Bol.svg#NimbusSanL-Bol') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}







/**
 * Fullscreen Header
 */
#showcase{
  background-image: url('./pic/bg-header.jpg');
  background-size:cover;
  background-position:center;
  height:100vh;
  display:flex;
  flex-direction:column; /*alinhamento vertical */
  justify-content:center;
  align-items:center;
  padding:0 20px;
}
/**
 * Fullscreen Header end
 */
html {
  box-sizing: border-box;
  font-family: "MetaSerifPro";
  color: #555;
  font-size: 16px;
}
@media (min-width: 6.25em) {
  html {
    font-size: 17px;
  }

  
}
@media (min-width: 12.5em) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 18.75em) {
  html {
    font-size: 19px;
  }
}
@media (min-width: 25em) {
  html {
    font-size: 20px;
  }
}
@media (min-width: 31.25em) {
  html {
    font-size: 21px;
  }
}
@media (min-width: 37.5em) {
  html {
    font-size: 22px;
  }
}
@media (min-width: 43.75em) {
  html {
    font-size: 23px;
  }
}
@media (min-width: 50em) {
  html {
    font-size: 24px;
  }
}
@media (min-width: 56.25em) {
  html {
    font-size: 25px;
  }
}
@media (min-width: 62.5em) {
  html {
    font-size: 26px;
  }
}
@media (min-width: 68.75em) {
  html {
    font-size: 27px;
  }
}
@media (min-width: 75em) {
  html {
    font-size: 28px;
  }
}
@media (min-width: 81.25em) {
  html {
    font-size: 29px;
  }
}
@media (min-width: 87.5em) {
  html {
    font-size: 30px;
  }
}
@media (min-width: 93.75em) {
  html {
    font-size: 31px;
  }
}
@media (min-width: 100em) {
  html {
    font-size: 32px;
  }
}
@media (min-width: 106.25em) {
  html {
    font-size: 33px;
  }
}
@media (min-width: 112.5em) {
  html {
    font-size: 34px;
  }
}
@media (min-width: 118.75em) {
  html {
    font-size: 35px;
  }
}
@media (min-width: 125em) {
  html {
    font-size: 36px;
  }
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/**
 * The fixed Side 
 */
.side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 50px;
  border-right: 1px dashed rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.5);
  font-family: "Nimbus Sans L", normal;
  text-transform: uppercase;
  letter-spacing: 0.0875rem;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.05, 0.69, 0.14, 1);
}
.side:hover {
  color: rgba(0, 0, 0, 0.5);
}
.side .side__inner {
  position: relative;
  height: 100%;
  white-space: nowrap;
}
.side a {
  color: inherit;
  word-spacing: 0;
  transition: all 0.3s cubic-bezier(0.05, 0.69, 0.14, 1);
}
.side .top,
.side .bottom {
  position: absolute;
  left: 0;
  transform: rotate(-90deg) perspective(1px);
  transform-origin: 50px 50px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  word-spacing: 0.5rem;
}
.side .top {
  top: 40px;
  text-align: right;
  color: black;
}
.side .bottom {
  top: auto;
  bottom: 75px;
}
.side .bottom:hover a {
  color: rgba(0, 0, 0, 0.2);
}
.side .bottom:hover a:hover {
  color: rgba(0, 0, 0, 0.8);
}

/**
 * The first navigation
 */
.anchornav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.anchornav li {
  display: block;
}
.anchornav li::after {
  content: "";
  width: 1.3rem;
  display: block;
  height: 2px;
  background: black;
}
.anchornav li:last-child::after {
  display: none;
}
.anchornav a {
  display: block;
  padding: 1em 0;
  font-family: "Nimbus Sans L", normal;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.4px;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.05, 0.69, 0.14, 1);
}
.anchornav a span {
  display: inline;
  padding: 0.5em 0 0;
  opacity: 0.3;
  letter-spacing: normal;
  font-family: "MetaSerifPro";
  text-transform: none;
}
.anchornav a:hover {
  color: #de5f5f;
}
.anchornav a:hover span {
  opacity: 1;
  color: #181818;
}

/**
 * The different sections
 */
.fr {

  
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

.section {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  min-height: 60vh;
  width: 100%;
  align-content: center;
  padding: 20vh 50px 20vh 75px;
}
.section svg {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
}
.section svg.bottom {
  bottom: 0;
  top: auto;
  fill: grey;
}
.section .section__inner {
  height: 100%;
  
  margin: auto auto auto 0;
}
.section.section--hello {
  
  color: #181818;
  height: 100%;
}
.section.section--intro {
  background: linear-gradient(-45deg, #a852ee, #f70f68, #a0d523, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  color: white;
}
.section.section--about {
  background:  white;
  color: rgb(0, 0, 0);
  
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.section.section--about svg {
  fill: #ffffff;
}
.section.section--clients {
  background-color: #343436;
  color: white;
}
.section.section--clients svg {
  fill: #343436;
}
.section.section--portfolio {
  background-color: #ffffff;
  color: #000000;
}
.section.section--portfolio svg {
  top: -20px;
  fill: orange;
}
.section.section--portfolio svg.bottom {
  top: auto;
  bottom: -50px;
}
.section.section--portfolio1 {
  background-color: #000000;
  color: white;
}
.section.section--portfolio1 svg {
  top: -50px;
  fill: #000000;
}
.section.section--pepperhill svg {
  top: -50px;
  fill: #202d9a;
}

.section.section--portfolio2 {
  background-color: #000000;
  color: white;
}

.section.section--portfolio3 {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
}

.section.section--portfolio4 {
  background: linear-gradient(-45deg, #a852ee, #f70f68, #a0d523, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  color: white;
}



.section.section--contact svg {
  fill: white;
}

/**
 * Typo
 */
h1, .h1, h2, .h2, h3, .h3, h4, .h5 {
  font-family: "Nimbus Sans L";
  font-weight: Bold;
  margin: 0 0 1em;
  line-height: 1;
  letter-spacing: -1px;
}
@media (min-width: 30rem) {
  h1, .h1, h2, .h2, h3, .h3, h4, .h5 {
    letter-spacing: -2px;
  }
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h5 a {
  color: inherit;
}
h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h5 a:hover {
  border-bottom: 0.1875rem solid;
}
h1 span, .h1 span, h2 span, .h2 span, h3 span, .h3 span, h4 span, .h5 span {
  color: #000000;
}

h1, .h1 {
  font-size: 1.2rem;
}
@media (min-width: 30rem) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: 1.2rem;
}
@media (min-width: 30rem) {
  h2, .h2 {
    font-size: 2.5rem;
  }
}

.pre {
  display: inline-block;
  font-size: 12px;
  margin: 0;
  opacity: 0.8;
  letter-spacing: 1.4px;
  word-spacing: 0.2rem;
  text-transform: uppercase;
  margin-bottom: 1em;
  color: inherit;
}
.pre span {
  font-size: 0.9em;
  margin-right: 0.4em;
  opacity: 0.5;
}
.pre:hover {
  opacity: 1;
}

p {
  font-size: 0.75rem;
  line-height: 1.4;
}
@media (min-width: 30rem) {
  p {
    font-size: 0.875rem;
  }
}
p a {
  font-weight: bold;
  color: inherit;
}
p a:hover {
  border-bottom: 0.1875rem solid;
}

.lead {
  display: block;
  font-size: 0.875rem;
  margin: 0;
}
@media (min-width: 30rem) {
  .lead {
    font-size: 1rem;
  }
}

.portfolio {
  font-size: 0.75rem;
}
.portfolio.block {
  display: inline-block;
  width: 100%;
}
@media (min-width: 30rem) {
  .portfolio.block {
    width: 30%;
  }
}
.portfolio .link {
  display: block;
  margin: 2em 0 0 0;
  color: #555;
  letter-spacing: 2px;
  font-size: 12px;
}
.portfolio p {
  font-size: inherit;
  color: #343436;
  opacity: 0.7;
}

#parent {
  height: 40px;
  white-space: nowrap;
  overflow: hidden; 
  font-family: 'Source Code Pro', monospace;  
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
  position: relative;
}

/* Animation */
#parent {
  animation: animated-text 2s steps(30,end) 1s 1 normal both
}

#border {
   animation: animated-cursor 600ms steps(30,end) infinite;
}



.pagination {
  display: flex;
  position: absolute;
  left: calc(50% - 420px);
  top: calc(100%);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}
.pagination__button {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0 5px;
  cursor: pointer;
}
.pagination__button:before, .pagination__button:after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  box-shadow: 0 1px 0 #0B0D14;
}
.pagination__button:before {
  height: 2px;
  background-color: #6A3836;
}
.pagination__button:after {
  height: 3px;
  background-color: #DC4540;
  opacity: 0;
  transition: 0.5s opacity;
}

.pagination__item--active .pagination__button:after {
  opacity: 1;
}

@media screen and (max-width: 860px) {
  .ms--numbers {
    left: calc(50% - 120px);
  }

  .ms--titles {
    left: calc(50% - 200px);
    top: calc(50% - 135px);
    text-align: center;
  }

  .ms--links {
    left: calc(50% - 60px);
    top: calc(50% + 80px);
  }

  .pagination {
    left: 50%;
    top: calc(100% - 50px);
    transform: translateX(-50%);
  }


}
@media screen and (max-width: 600px) {
  .ms--images {
    overflow: visible;
  }


  
}
@media screen and (max-width: 400px) {
  .ms--titles .ms-slide {
    transform: scale(0.8);
  }

  
}
*, *:before, *:after {
  box-sizing: border-box;
}



a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.header {
  display: flex;
  align-items: center;
  padding: 30px;
}

.header__logo {
  font-size: 1.3em;
  font-weight: 900;
  letter-spacing: -1px;
}
.header__logo span {
  display: inline-block;
  transform: translateY(4px) rotate(180deg);
  pointer-events: none;
}

.header__menu {
  margin-left: auto;
}

.header__menu__list, .footer__menu__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu__link {
  margin-left: 50px;
}

.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px;
}

.footer__menu__link {
  margin-left: 50px;
  color: rgba(255, 255, 255, 0.5);
}

.sliders-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

@media screen and (max-width: 860px) {
  .header__menu, .footer {
    display: none;
  }

}

/* Button */

.btn{
  transition: all .3s ease-out;
}
.btn:hover circle{
 fill: #FFD138;
}
.btn:hover{
 transform: scale(1.1);
}

/* Footer */
footer{
  width: 100%;
  height: auto;
  margin: 0;
  padding-bottom: 100px;
  
}

.containerFooter{
  width: 800px;
  height: auto;
  
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  display: inline-grid;
	grid-template-columns: 40% 60%;
  grid-template-rows: auto 1px auto;
}

.contactGrid{
  grid-column-start: 1;
	grid-column-end: 2;
  
  padding-bottom: 40px;
  
}
.arrowGrid{
  grid-column-start: 2;
  grid-column-end: 3;
  
  
  padding-bottom: 100px;
}
.stroke{
  grid-column-start: 1;
	grid-column-end: 3;
  
  background-color: #BCC2D1;
}
.socialList{
  grid-column-start: 1;
	grid-column-end: 2;
  
  padding-top: 20px;
}
.signature{
  grid-column-start: 2;
	grid-column-end: 3;
  
  text-align: right;
  padding-top: 40px;
}

.contactGrid p{
  margin-bottom: 30px;
}
.contactLink:before{
  width: 80px;
}
.contactLink:hover:after{
  width: 80px;
}

.arrowTop{
  width: 60px;
  transition: all .3s ease-out;
  float: right;
  margin-right: 50%;
  
}
.arrowTop:hover{
  transform: scale(1.1);
}

/* Footer End*/


/* cookie*/

.cookie-notice {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 0.7rem 0;
  background-color: #000000;
  color: white;
  z-index: 1000;
}
.cookie-notice .cookie-notice-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.cookie-notice p {
  flex-grow: 1;
  margin-left: 5%;
  font-size: 15px;
}
.cookie-notice .cookie-notice-dismiss {
  display: inline-flex;
  padding: 10px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-notice .cookie-notice-dismiss svg {
  display: block;
  width: 20px;
  height: 20px;
}
.cookie-notice .cookie-notice-dismiss path {
  stroke-width: 3px;
  stroke: white;
}
.cookie-notice .cookie-notice-dismiss:hover path {
  stroke: rgba(255, 255, 255, 0.75);
}

/* Experiment mit Tag*/
/*
.tag{
  list-style:none;
  display:inline-block;
  background-color:#eeeeee;
  border-radius:50px;
  padding:50px 100px;
  
  
  color:#1a1a1a;
 
  margin:3px 1px 3px 1px;
  line-height:27px;
  text-transform:uppercase;
}
*/

/* Back on Top*/
.center-wrap {
position: absolute;
width: 100%;
display: block;
overflow: hidden;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}

/* #Progress
================================================== */

.progress-wrap {
	position: fixed;
	right: 50px;
	bottom: 50px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	content: url('./pic/arrow-up.png');
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--grey);
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
  content: url('./pic/arrow-down.png');
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	-webkit-background-clip: text;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}
body.light .progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(0,0,0,0.2);
}
body.light .progress-wrap::after {
	color: var(--black-blue);
}
body.light .progress-wrap svg.progress-circle path {
	stroke: var(--black-blue);
}


.circle {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -5px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--black-blue-light-3);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	animation: border-transform 10s linear infinite alternate forwards;
}
.circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}