:root {
    --main-highlight-color: rgba(100, 60, 40, 1.0);
    --main-highlight-color-alpha: rgba(125, 180, 220);
    --main-bg-color: rgba(190, 140, 110, 0.0);
    --main-headline-color:rgb(190, 240, 110);
    --pro-color:rgb(100, 60, 40);
    --link-color:rgb(100, 60, 40);

}

body {
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 25px;
  margin: 0 auto;
  padding: 0;
  color: black;
}

h1 {
  font-size: 60px;
  text-align: center;
  padding: 0;
  margin: 0;
  /*margin-top: 30px;*/
  line-height: 30px;
  /*color: white;*/
  color: var(--main-highlight-color);
}
h2 {
  font-size: 40px;
  text-align: center;
  padding: 0px;
  margin: 20px;
  /*margin-top: 30px;*/
  line-height: 40px;
  /* color: white; */
  color: var(--main-highlight-color);
}
h3 {
  color: var(--main-highlight-color);
}

h4 {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  padding: 0;
  margin: 0;
  /* margin-top: 40px; */
  color: var(--main-highlight-color);
}

article.pro h4 {
  color: var(--pro-color);
}

section {
  padding: 0px;
  margin: auto;
  margin-left: auto;
  margin-right: auto;
}
section#static_bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../imgs/sun.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -10;
}
section#head {
  /*background-color: red;*/
  height: 800px;

}
section#head h1{
  position: relative;
  padding: 0;
  margin: 0;
  font-size: 5em;
  top: 130px;
}
section#head p{
  position: relative;
  padding: 0;
  margin: 0;
  font-size: 1em;
  top: 180px;
  /*color: rgb(150,50,50);*/
}


  section#head p.screenshots{
    top: 290px;
  }

section#content{
  background-color: var(--main-bg-color);
  /* background-color: rgba(40, 60, 80, 0.9); */
  /* background-color: white; */

}

section#footer {
  position: fixed;
  background-color: var(--pro-color);
  width: 100%;
  bottom: 0px;
}
section#footer p {padding: 0px; margin: 10px; font-size: 12px;}

section#content footer {
  position: absolute;
  margin: auto;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--main-highlight-color-alpha);

  margin-bottom: 40px;
}

section footer article {
  float: left;
  /*background-color: red;*/
  /* height: 250px; */
  padding: 0px;
  margin: 0px;
  color: white;

}


section footer article p {
  padding: 50px;
  padding-top: 0px;
  text-align: center;
}
article {
  /*position: relative;*/
  /*float: left;*/
  /*max-width: 400px;*/
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  padding-left: 35px;
  padding-right: 35px;
  /*border-bottom: rgb(30, 30, 30) 2px;
  border-bottom-style: dashed;*/
}

article#hello h3 {
  background-color: white;
  color: var(--main-highlight-color);
  border-color: var(--main-highlight-color);
}

article.imprint h3 {
  color: white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

span{
  background-color: white;
  font-weight: bold;
  padding: 2px;
  font-size: 13px;
  color: var(--main-highlight-color);
}

article.pro span {
  color: var(--pro-color);
}

p {
  font-size: 14px;
}

p.price {
  font-size: 16px;
  /* line-height: 9px; */
}

p.description {
  font-size: 11px;
  line-height: 11px;
}


.floatLeft {float: left;}
.center {text-align: center;}
.right {text-align: right;}
.white {color: white;}
.highlightColor {color: var(--main-highlight-color)}
.italic {font-style: italic;}


.row1 {width: 100%;}
.row4 {width: 33%;}
.row6 {width: 50%;}
/* .row8 {width: 50%;} */
.row12 {width: 10%;}

.line {
  border-bottom: solid var(--main-highlight-color) 3px;
  width: 150px;
  margin: auto;
}
.default-margin {
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}

.border {
  /*border-top: dashed rgb(150, 50, 50) 1px;
  border-bottom: dashed rgb(150, 50, 50) 2px;*/
  /*border-left: solid rgb(150, 50, 50) 2px;*/
  /*border-right: solid rgb(150, 50, 50) 2px;*/
  border: solid var(--main-highlight-color) 5px;
  /* padding: 10px; */
  /* background-color: rgba(255, 255, 255, 0.3); */

}

section.why h2 {
  color: var(--pro-color);
}
section.why article.border {
  border-color: var(--pro-color);
}

section.pros h2 {
  color: var(--pro-color);
}
section.pros article.border {
  border-color: var(--pro-color);
}

.borderLight {
  border: solid var(--main-highlight-color) 2px;
  padding: 10px;
}




img {
  display: block;
  /*text-align: center;*/
  margin-left: auto;
  margin-right: auto;
}

p.screenshots {
  width: auto;
  margin-top: 100px;
  height: 300px;
  background-image: url(../imgs/detective_1.png);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  transform:scaleX(-1);
}

a.contact {color: var(--main-highlight-color); text-decoration: none; font-weight: bold;}
a.contact:active {color: var(--main-highlight-color); font-weight: bold;}
a.contact:hover {color: var(--main-highlight-color); font-weight: bold;}
a.contact:visited {color: var(--main-highlight-color); font-weight: bold;}

a {color: var(--link-color); text-decoration: underline;}
a:active {var(--link-color)}
a:hover {var(--link-color);}
a:visited {var(--link-color)}

section#footer a {color: white; text-decoration: none;;}
section#footer a:active {color: white;}
section#footer a:hover {color: white; text-decoration: none; font-weight: normal;}
section#footer a:visited {color: white;}


section.why article {
  margin-top: 15px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}

article.pro {
  margin-top: 15px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}

section.pros {
  background-color: var(--main-bg-color);
}

article.product {
  margin-top: 15px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.4);
}

section.products {
  background-color: var(--main-bg-color);
}

section.why article.pic {
  background-color: transparent;
}

section.why article.ad {
  background-color: transparent;
}

section.why article.ad p {
  /* width: 30%; */
}




@media screen and (max-width: 768px){

  section#head {
    /*background-color: red;*/
    height: 750px;
  }
  section#head h1 {
    font-size: 2.5em;
    top: 70px;
  }
  section#head p{
    font-size: 1.0em;
    line-height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    top: 90px;
  }

  section#head p.screenshots{
    top: 190px;
  }

  .row1{width:100%;}
  .row4{width:100%;}
  .row6 {width:100%;}

  section#content h3 {
    text-align: center;
    padding: 15px;
  }


  section footer article p, section footer article p.right  {
    text-align: center;
  }

  article {
    /*position: relative;*/
    /*float: left;*/
    /*max-width: 400px;*/
    width: 80%;
  }

}