@charset "UTF-8";

:root {
  --website-nav-fg-hover-color: red;
  --website-nav-fg-normal-color: #fff;
  --website-fg-color: #333333;
  --photo-header-color : #fff;
  --photo-underline-01-color: #fff;
  --photo-underline-02-color: #333333;
  --photo-underline-03-color: #f65400;
  --start-rechteck-bg-color: #333333;
  --start-timebox-bg-color: #fff;
  --start-timebox-icon-color: #eceddd;
  --start-timebox-icon-end-color:#333333;
  --reason-card-bg-color: #eceddd;
  --reason-card-header-color: #e97f4a;
  --contact-bg-color: #333333;
  --contact-fg-color: #fff;
}

@media only screen and (min-width: 0.01em) and (max-width: 35.99em) {

  body {
  font-family: "FontAwesome", Verdana, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--website-fg-color);
  background-image: url(../images/website05_01.jpg);
  background-image: -webkit-image-set(url(../images/website05_01.jpg) 1x,
                                      url(../images/website05_02.jpg) 2x,
                                      url(../images/website05_03.jpg) 3x,
                                      url(../images/website05_04.jpg) 4x);
  background-repeat: no-repeat;
  background-position: top center;
} 

  #contact {
  margin-top: 3em;
  height: 50em;
  width: 100%;
  max-width:120em;
  margin: 0 auto;
  background-color: var(--contact-bg-color); 
}

a.contactli:link, a.contactli:visited {
  font-size: 0.90em;
  color: var(--website-nav-fg-normal-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.contactli:hover, a.contactli:active {
  font-size: 0.90em;
  color: var(--website-nav-fg-hover-color);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.60em;
  text-decoration: underline;
  display: inline-block;
  background-color: transparent;
}

.photo-container {
  margin-top: 16em;
  margin-right: 2vw;
  margin-left: min(2em, 10%);
  height: 3em;
}

.photo-headline {
  font-weight: bold;
  color: var(--photo-header-color);
}

.photo-underline-01{
  color: var(--photo-underline-01-color);
}

.photo-underline-02{
  color: var(--photo-underline-02-color);
}

.photo-underline-03{
  color: var(--photo-underline-03-color);
}

.start-container {
  margin-top: 12em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.start-container-line{
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  line-height: 4em;
  text-align: center;
}

.start-line-style {
  line-height: 1.5em;
}

.start-timeline {
  margin-top: 4em;
  width: 28em;
}

.start-timeline-box {
  width: 28em;
  background: var(--start-timebox-bg-color);
  margin-bottom: 1.25em;
  position: relative;
  display: flex;
  border-radius: 0.5em;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.start-timeline-box-icon-01 {
  border-radius: 0.5em 0 0 0.5em;
  background: var(--start-timebox-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4em;
}

.start-timeline-box-icon-02 {
  border-radius: 0em 0.5em 0.5em 0em;
  background: var(--start-timebox-icon-end-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}

.start-timeline-box-content {
  padding: 1.25em;
}

.start-timeline-box-title {
  margin-top: 1em;
  font-size: 1.1rem;
  line-height: 1.4;
}

.start-timeline-box-text {
  margin-top:1em;
  width: 24em;
}

.row-reason-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.reason-headline {
  margin-top: 6em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.reason-card01 {
  margin-top: 2em;
  width: 30em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;

}

.reason-card02 {
  margin-top: 2em;
  width: 30em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;
  
}

.reason-card-line{
  font-size: 1.4em;
  text-align: center;
  color: var(--reason-card-header-color);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
}

.reason-card-text-style {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
}

.row-offer-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.offer-headline {
  margin-top: 5em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.offer-line-style {
  line-height: 1.5em;
}

.offer-card-01{
  margin-top: 2em;
  margin-bottom: 8em;
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-02{
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-header {
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 1em;
}

.offer-end-line {
  margin-top: 8em;
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 4em;
  text-align: center;
}

.contact-contact-container{
  margin-top: 4em;
  width: 20em;
  text-align: center;
}

.contact-contact-container-text {
  color: var(--contact-fg-color);
}

.contact-contact-container-text-first{
  margin-top: 2em;
   text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-secound{
  text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
   text-align: center;
  line-height: 0.6em;
  display: inline;
}

.contact-end-header {
  margin-top: 2em;
  color: var(--contact-fg-color);
}

}

@media only screen and (min-width: 36.00em) and (max-width: 47.99em) {

  body {
  font-family: "FontAwesome", Verdana, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--website-fg-color);
  background-image: url(../images/website05_01.jpg);
  background-image: -webkit-image-set(url(../images/website05_01.jpg) 1x,
                                      url(../images/website05_02.jpg) 2x,
                                      url(../images/website05_03.jpg) 3x,
                                      url(../images/website05_04.jpg) 4x);
  background-repeat: no-repeat;
  background-position: top center;
} 

  #contact {
  margin-top: 3em;
  height: 50em;
  width: 100%;
  max-width:120em;
  margin: 0 auto;
  background-color: var(--contact-bg-color); 
}

a.contactli:link, a.contactli:visited {
  font-size: 0.90em;
  color: var(--website-nav-fg-normal-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.contactli:hover, a.contactli:active {
  font-size: 0.90em;
  color: var(--website-nav-fg-hover-color);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.60em;
  text-decoration: underline;
  display: inline-block;
  background-color: transparent;
}

.photo-container {
  margin-top: 16em;
  margin-right: 2vw;
  margin-left: min(2em, 10%);
  height: 3em;
}

.photo-headline {
  font-weight: bold;
  color: var(--photo-header-color);
}

.photo-underline-01{
  color: var(--photo-underline-01-color);
}

.photo-underline-02{
  color: var(--photo-underline-02-color);
}

.photo-underline-03{
  color: var(--photo-underline-03-color);
}

.start-container {
  margin-top: 12em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.start-container-line{
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  line-height: 4em;
  text-align: center;
}

.start-line-style {
  line-height: 1.5em;
}

.start-timeline {
  margin-top: 4em;
  width: 28em;
}

.start-timeline-box {
  width: 28em;
  background: var(--start-timebox-bg-color);
  margin-bottom: 1.25em;
  position: relative;
  display: flex;
  border-radius: 0.5em;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.start-timeline-box-icon-01 {
  border-radius: 0.5em 0 0 0.5em;
  background: var(--start-timebox-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4em;
}

.start-timeline-box-icon-02 {
  border-radius: 0em 0.5em 0.5em 0em;
  background: var(--start-timebox-icon-end-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}

.start-timeline-box-content {
  padding: 1.25em;
}

.start-timeline-box-title {
  margin-top: 1em;
  font-size: 1.1rem;
  line-height: 1.4;
}

.start-timeline-box-text {
  margin-top:1em;
  width: 24em;
}

.row-reason-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.reason-headline {
  margin-top: 6em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.reason-card01 {
  margin-top: 2em;
  width: 30em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;

}

.reason-card02 {
  margin-top: 2em;
  width: 30em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;
  
}

.reason-card-line{
  font-size: 1.4em;
  text-align: center;
  color: var(--reason-card-header-color);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
}

.reason-card-text-style {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
}

.row-offer-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.offer-headline {
  margin-top: 5em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.offer-line-style {
  line-height: 1.5em;
}

.offer-card-01{
  margin-top: 2em;
  margin-bottom: 8em;
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-02{
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-header {
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 1em;
}

.offer-end-line {
  margin-top: 8em;
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 4em;
  text-align: center;
}

.contact-contact-container{
  margin-top: 4em;
  width: 20em;
  text-align: center;
}

.contact-contact-container-text {
  color: var(--contact-fg-color);
}

.contact-contact-container-text-first{
  margin-top: 2em;
   text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-secound{
  text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
   text-align: center;
  line-height: 0.6em;
  display: inline;
}

.contact-end-header {
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
  color: var(--contact-fg-color);
}

}


@media only screen and (min-width: 48.00em) and (max-width: 61.99em) {

  body {
  font-family: "FontAwesome", Verdana, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--website-fg-color);
  background-image: url(../images/website04_01.jpg);
  background-image: -webkit-image-set(url(../images/website04_01.jpg) 1x,
                                      url(../images/website04_02.jpg) 2x,
                                      url(../images/website04_03.jpg) 3x,
                                      url(../images/website04_04.jpg) 4x);
  background-repeat: no-repeat;
  background-position: top center;
} 

  #contact {
  margin-top: 3em;
  height: 50em;
  width: 100%;
  max-width:120em;
  margin: 0 auto;
  background-color: var(--contact-bg-color); 
}

a.contactli:link, a.contactli:visited {
  font-size: 0.90em;
  color: var(--website-nav-fg-normal-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.contactli:hover, a.contactli:active {
  font-size: 0.90em;
  color: var(--website-nav-fg-hover-color);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.60em;
  text-decoration: underline;
  display: inline-block;
  background-color: transparent;
}

.photo-container {
  margin-top: 23em;
  margin-right: 5vw;
  margin-left: min(3em, 10%);
  height: 3em;
}

.photo-headline {
  font-weight: bold;
  color: var(--photo-header-color);
}

.photo-underline-01{
  color: var(--photo-underline-01-color);
}

.photo-underline-02{
  color: var(--photo-underline-02-color);
}

.photo-underline-03{
  color: var(--photo-underline-03-color);
}

.start-container {
  margin-top: 14em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.start-container-line{
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  line-height: 4em;
  text-align: center;
}

.start-line-style {
  line-height: 1.5em;
}

.start-timeline {
  margin-top: 6em;
  width: 40em;
}

.start-timeline-box {
  width: 40em;
  background: var(--start-timebox-bg-color);
  margin-bottom: 1.25em;
  position: relative;
  display: flex;
  border-radius: 0.5em;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.start-timeline-box-icon-01 {
  border-radius: 0.5em 0 0 0.5em;
  background: var(--start-timebox-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6em;
}

.start-timeline-box-icon-02 {
  border-radius: 0em 0.5em 0.5em 0em;
  background: var(--start-timebox-icon-end-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}

.start-timeline-box-content {
  padding: 1.25em;
}

.start-timeline-box-title {
  margin-top: 1em;
  font-size: 1.1rem;
  line-height: 1.4;
}

.start-timeline-box-text {
  margin-top:1em;
  width: 34em;
}

.row-reason-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.reason-headline {
  margin-top: 6em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.reason-card01 {
  margin-top: 2em;
  width: 40em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;

}

.reason-card02 {
  margin-top: 2em;
  width: 40em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;
  
}

.reason-card-line{
  font-size: 1.4em;
  text-align: center;
  color: var(--reason-card-header-color);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
}

.reason-card-text-style {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
}

.row-offer-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.offer-headline {
  margin-top: 5em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.offer-line-style {
  line-height: 1.5em;
}

.offer-card-01{
  margin-top: 2em;
   height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-02{
  margin-top: 2em;
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-header {
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 1em;
}

.offer-end-line {
  margin-top: 8em;
  margin-left: 2em;
  margin-right: 2em;
  margin-bottom: 4em;
  text-align: center;
}

.contact-contact-container{
  margin-top: 4em;
  width: 20em;
  text-align: center;
}

.contact-contact-container-text {
  color: var(--contact-fg-color);
}

.contact-contact-container-text-first{
  margin-top: 2em;
   text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-secound{
  text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
   text-align: center;
  line-height: 0.6em;
  display: inline;
}

.contact-end-header {
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
  color: var(--contact-fg-color);
}

}


@media only screen and (min-width: 62.00em) and (max-width: 74.99em) {

  body {
  font-family: "FontAwesome", Verdana, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--website-fg-color);
  background-image: url(../images/website03_01.jpg);
  background-image: -webkit-image-set(url(../images/website03_01.jpg) 1x,
                                      url(../images/website03_02.jpg) 2x,
                                      url(../images/website03_03.jpg) 3x,
                                      url(../images/website03_04.jpg) 4x);
  background-repeat: no-repeat;
  background-position: top center;
} 

  #contact {
  margin-top: 3em;
  height: 22em;
  width: 100%;
  max-width:120em;
  margin: 0 auto;
  background-color: var(--contact-bg-color); 
}

a.contactli:link, a.contactli:visited {
  font-size: 0.90em;
  color: var(--website-nav-fg-normal-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.contactli:hover, a.contactli:active {
  font-size: 0.90em;
  color: var(--website-nav-fg-hover-color);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.60em;
  text-decoration: underline;
  display: inline-block;
  background-color: transparent;
}

.photo-container {
  margin-top: 30em;
  margin-right: 16vw;
  margin-left: min(5em, 10%);
  height: 3em;
}

.photo-headline {
  font-weight: bold;
  color: var(--photo-header-color);
}

.photo-underline-01{
  color: var(--photo-underline-01-color);
}

.photo-underline-02{
  color: var(--photo-underline-02-color);
}

.photo-underline-03{
  color: var(--photo-underline-03-color);
}

.start-container {
  margin-top: 15em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.start-container-line{
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  line-height: 4em;
  text-align: center;
}

.start-line-style {
  line-height: 1.5em;
}

.start-timeline {
  margin-top: 6em;
  width: 50em;
}

.start-timeline-box {
  width: 50em;
  background: var(--start-timebox-bg-color);
  margin-bottom: 1.25em;
  position: relative;
  display: flex;
  border-radius: 0.5em;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.start-timeline-box-icon-01 {
  border-radius: 0.5em 0 0 0.5em;
  background: var(--start-timebox-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8em;
}

.start-timeline-box-icon-02 {
  border-radius: 0em 0.5em 0.5em 0em;
  background: var(--start-timebox-icon-end-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}

.start-timeline-box-content {
  padding: 1.25em;
}

.start-timeline-box-title {
  margin-top: 1em;
  font-size: 1.1rem;
  line-height: 1.4;
}

.start-timeline-box-text {
  margin-top:1em;
  width: 42em;
}

.row-reason-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.reason-headline {
  margin-top: 8em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.reason-card01 {
  margin-top: 2em;
  width: 49em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;

}

.reason-card02 {
  margin-top: 2em;
  width: 49em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;
  
}

.reason-card-line{
  font-size: 1.4em;
  text-align: center;
  color: var(--reason-card-header-color);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
}

.reason-card-text-style {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
}

.row-offer-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.offer-headline {
  margin-top: 6em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.offer-line-style {
  line-height: 1.5em;
}

.offer-card-01{
  margin-top: 2em;
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-02{
  margin-top: 2em;
  height: 20em;
  width: 20em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-header {
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 1em;
}

.offer-end-line {
  margin-top: 8em;
  margin-bottom: 4em;
}

.contact-contact-container{
  margin-top: 4em;
  width: 20em;
  text-align: center;
}

.contact-contact-container-text {
  color: var(--contact-fg-color);
}

.contact-contact-container-text-first{
  margin-top: 2em;
   text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-secound{
  text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
   text-align: center;
  line-height: 0.6em;
  display: inline;
}

.contact-end-header {
  margin-top: 2em;
  color: var(--contact-fg-color);
}

}

@media only screen and (min-width: 75.00em) and (max-width: 87.49em) {

  body {
  font-family: "FontAwesome", Verdana, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--website-fg-color);
  background-image: url(../images/website02_01.jpg);
  background-image: -webkit-image-set(url(../images/website02_01.jpg) 1x,
                                      url(../images/website02_02.jpg) 2x,
                                      url(../images/website02_03.jpg) 3x,
                                      url(../images/website02_04.jpg) 4x);
  background-repeat: no-repeat;
  background-position: top center;
} 

  #contact {
  margin-top: 3em;
  height: 22em;
  width: 100%;
  max-width:120em;
  margin: 0 auto;
  background-color: var(--contact-bg-color); 
}

a.contactli:link, a.contactli:visited {
  font-size: 0.90em;
  color: var(--website-nav-fg-normal-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.contactli:hover, a.contactli:active {
  font-size: 0.90em;
  color: var(--website-nav-fg-hover-color);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.60em;
  text-decoration: underline;
  display: inline-block;
  background-color: transparent;
}

.photo-container {
  margin-top: 33em;
  margin-right: 25vw;
  margin-left: min(7.5em, 10%);
  height: 3em;
}

.photo-headline {
  font-weight: bold;
  color: var(--photo-header-color);
}

.photo-underline-01{
  color: var(--photo-underline-01-color);
}

.photo-underline-02{
  color: var(--photo-underline-02-color);
}

.photo-underline-03{
  color: var(--photo-underline-03-color);
}

.start-container {
  margin-top: 20em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.start-container-line{
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  line-height: 4em;
  text-align: center;
}

.start-line-style {
  line-height: 1.5em;
}

.start-timeline {
  margin-top: 6em;
  width: 60em;
}

.start-timeline-box {
  width: 60em;
  background: var(--start-timebox-bg-color);
  margin-bottom: 1.25em;
  position: relative;
  display: flex;
  border-radius: 0.5em;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.start-timeline-box-icon-01 {
  border-radius: 0.5em 0 0 0.5em;
  background: var(--start-timebox-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8em;
}

.start-timeline-box-icon-02 {
  border-radius: 0em 0.5em 0.5em 0em;
  background: var(--start-timebox-icon-end-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}

.start-timeline-box-content {
  padding: 1.25em;
}

.start-timeline-box-title {
  margin-top: 1em;
  font-size: 1.1rem;
  line-height: 1.4;
}

.start-timeline-box-text {
  margin-top:1em;
  width: 52em;
}

.row-reason-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.reason-headline {
  margin-top: 8em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.reason-card01 {
  margin-top: 3em;
  width: 25em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;

}

.reason-card02 {
  margin-top: 2em;
  width: 25em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;
  
}

.reason-card-line{
  font-size: 1.4em;
  text-align: center;
  color: var(--reason-card-header-color);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
}

.reason-card-text-style {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
}

.row-offer-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.offer-headline {
  margin-top: 6em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.offer-line-style {
  line-height: 1.5em;
}

.offer-card-01{
  margin-top: 3em;
  margin-left: 10em;
  height: 20em;
  width: 30em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-02{
  margin-top: 3em;
  margin-right: 10em;
  height: 20em;
  width: 30em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-header {
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 1em;
}

.offer-end-line {
  margin-top: 8em;
  margin-bottom: 4em;
}

.contact-contact-container{
  margin-top: 4em;
  width: 20em;
  text-align: center;
}

.contact-contact-container-text {
  color: var(--contact-fg-color);
}

.contact-contact-container-text-first{
  margin-top: 2em;
   text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-secound{
  text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
   text-align: center;
  line-height: 0.6em;
  display: inline;
}

.contact-end-header {
  margin-top: 2em;
  color: var(--contact-fg-color);
}

}

@media only screen and (min-width: 87.50em) {

  body {
  font-family: "FontAwesome", Verdana, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  max-width:100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--website-fg-color);
  background-image: url(../images/website01_01.jpg);
  background-image: -webkit-image-set(url(../images/website01_01.jpg) 1x,
                                      url(../images/website01_02.jpg) 2x,
                                      url(../images/website01_03.jpg) 3x,
                                      url(../images/website01_04.jpg) 4x);
  background-repeat: no-repeat;
  background-position: top center;
} 

  #contact {
  margin-top: 3em;
  height: 22em;
  width: 100%;
  max-width:120em;
  margin: 0 auto;
  background-color: var(--contact-bg-color); 
}

a.contactli:link, a.contactli:visited {
  font-size: 0.90em;
  color: var(--website-nav-fg-normal-color);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.contactli:hover, a.contactli:active {
  font-size: 0.90em;
  color: var(--website-nav-fg-hover-color);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.60em;
  text-decoration: underline;
  display: inline-block;
  background-color: transparent;
}

.photo-container {
  margin-top: 45em;
  margin-right: 33vw;
  margin-left: min(12em, 10%);
  height: 3em;
}

.photo-headline {
  font-weight: bold;
  color: var(--photo-header-color);
}

.photo-underline-01{
  color: var(--photo-underline-01-color);
}

.photo-underline-02{
  color: var(--photo-underline-02-color);
}

.photo-underline-03{
  color: var(--photo-underline-03-color);
}

.start-container {
  margin-top: 27em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.start-container-line{
  margin-top: 2em;
  margin-left: 2em;
  margin-right: 2em;
  line-height: 4em;
  text-align: center;
}

.start-line-style {
  line-height: 1.5em;
}

.start-timeline {
  margin-top: 6em;
  width: 80em;
}

.start-timeline-box {
  width: 80em;
  background: var(--start-timebox-bg-color);
  margin-bottom: 1.25em;
  position: relative;
  display: flex;
  border-radius: 0.5em;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.start-timeline-box-icon-01 {
  border-radius: 0.5em 0 0 0.5em;
  background: var(--start-timebox-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8em;
}

.start-timeline-box-icon-02 {
  border-radius: 0em 0.5em 0.5em 0em;
  background: var(--start-timebox-icon-end-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
}

.start-timeline-box-content {
  padding: 1.25em;
}

.start-timeline-box-title {
  margin-top: 1em;
  font-size: 1.1rem;
  line-height: 1.4;
}

.start-timeline-box-text {
  margin-top:1em;
  width: 72em;
}

.row-reason-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.reason-headline {
  margin-top: 8em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.reason-card01 {
  margin-top: 3em;
  width: 30em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;

}

.reason-card02 {
  margin-top: 2em;
  width: 30em;
  position: relative;
  background-color: var(--reason-card-bg-color);
  border-radius: 25px;
  
}

.reason-card-line{
  font-size: 1.4em;
  text-align: center;
  color: var(--reason-card-header-color);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
}

.reason-card-text-style {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 1em;
}

.row-offer-size {
  width: 100%;
  max-width: 120em;
  margin: 0 auto;
}

.offer-headline {
  margin-top: 6em;
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
}

.offer-line-style {
  line-height: 1.5em;
}

.offer-card-01{
  margin-top: 3em;
  margin-left: 15em;
  height: 20em;
  width: 30em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-02{
  margin-top: 3em;
  margin-right: 15em;
  height: 20em;
  width: 30em;
  border-radius: 25px;
  box-shadow: 0 1.875em 3.75em -0.75em rgba(50, 50, 93, 0.25), 0 1.125em 2.25em -1.125em rgba(0, 0, 0, 0.3), 0 -0.75em 2.25em -0.5em rgba(0, 0, 0, 0.025);
}

.offer-card-header {
  margin-top: 2em;
  margin-bottom: 1em;
  margin-left: 1em;
}

.offer-end-line {
  margin-top: 8em;
  margin-bottom: 4em;
}

.contact-contact-container{
  margin-top: 4em;
  width: 20em;
  text-align: center;
}

.contact-contact-container-text {
  color: var(--contact-fg-color);
}

.contact-contact-container-text-first{
  margin-top: 2em;
   text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-secound{
  text-align: center;
  line-height: 0.6em;
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
  color: var(--contact-fg-color);
}

.contact-contact-container-text-three{
   text-align: center;
  line-height: 0.6em;
  display: inline;
}

.contact-end-header {
  margin-top: 2em;
  color: var(--contact-fg-color);
}

}


