header h1{
  color:#ffffff;
}

header {
  background-image: url(./images/tmb/hero.jpg);
}

.images{
width: 100%;
margin-top:32px;
text-align:center;
}

.images img{
  width: 100%;
}

.infoicons{
  width: 60%;
  margin:auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-evenly;
  text-align: center;
}

.infoicons img{
  max-width:100px;
  margin-bottom: 4px;
}

.infoicons-name{
  margin-bottom:32px;
}

.features{
  width: 80%;
  margin:auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-evenly;
}

.feature{
  width:140px;
  height:140px;
  display:flex;
  align-items:center;
  margin-bottom:32px;
  background-color:#222830;
  justify-content:center;
  border-radius:50%;
}

.feature h4{
  color:#ffffff;
  padding-left:4px;
  padding-right:4px;
}

.sketches{
  width:100%;
  display:flex;
  flex-direction:column;
  margin-bottom:40px;
}

.sketch{
  display:flex;
  align-items:center;
  vertical-align:middle;
  justify-content:space-evenly;
  margin:8px 0;
}

.sketch img{
  width:49%;
}

.colors{
  width: 100%;
  text-align:left;
}

.color-lines{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-bottom:24px;
}

.color{
  width:35px;
  height:35px;
  margin:4px;
  border-radius:50%;
}

.yellow{
  background-color:#FBBE01;
}
.blue{
  background-color:#0076BE;
}
.lightblue{
  background-color:#0098E1;
}
.darkblue{
  background-color:#014783;
}
.green{
  background-color:#36A53E;
}
.purple{
  background-color:#A75E9F;
}
.red{
  background-color:#D82E35;
}
.orange{
  background-color:#F18E00;
}
.gray{
  background-color:#9B9C9E;
}
.teal{
  background-color:#009281;
}
.lightpurple{
  background-color:#7787BA;
}
.brown{
  background-color:#B3651A;
}
.lightgreen{
  background-color:#94BF17;
}
.darkgreen{
  background-color:#016648;
}
.pink{
  background-color:#E278A8;
}
.olive{
  background-color:#B4CD55;
}
.lilac{
  background-color:#BBB5D5;
}

.color-app{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.appcolor{
  width:75px;
  height:75px;
  margin-top:8px;
  margin-right:8px;
}

.appblue{
  background-color:#222830;
}

.appwhite{
  background-color:#fefefe;
  border: 1px solid #141414;
}

.appblack{
  background-color:#141414;
}

.art{
  margin-bottom:24px;
}

.icons{
  width: 100%;
  margin:auto;
  display: flex;
  flex-direction: column;
}

.icons-line{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:space-around;
}

.icons img{
  max-width:100px;
  margin-bottom: 16px;
}

.ready{
  margin:auto;
  width:100%;
  text-align:center;
  margin-bottom: 40px;
}

.ready img{
  width:auto;
  max-height:400px;
  margin:auto;
  margin-bottom: 48px;
}

.animation{
  margin:auto;
  width:100%;
  text-align:center;
}

.animation img{
  width:auto;
  max-height:500px;
  margin:auto;
  margin-bottom:48px;
}

.screens{
  margin: auto;
  width: 90%;
  margin-bottom:40px;
}

.screens-name {
    max-width: 100%;
}

.screens-images{
  margin: auto;
  width: 90%;
}

.screens img{
  width: 100%;
  height:100%;
}

.nextImg img{
  margin-left: -100px;
}

@media (min-width: 490px) {
  .images img{
    max-height:100vh;
    width:100px;
  }
  
  .subpart-images img{ 
    max-width:100%;
  }
  
  .infoicons{
    width: 100%;
  }
  
  .features{
    width: 100%;
  }
  
  .icons-line{
    justify-content:space-evenly;
  }
  
  .ready img{
    max-height:600px;
  }
  
  .animation img{
    max-height:600px;
  }
  
  .screens-images{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content:center;
  }

  .screens img{
    max-width: 278px;
    height:100%;
    margin-bottom: 48px;
  }

  .nextImg img{
    margin-left: -250px;
  }
}

@media (min-width: 1440px) {
  .images{
    margin-top:0px;
  }
  
  .icons-line{
    justify-content:space-around;
  }
  
  .screens img{
    max-width: 378px;
  }
  
  .ready img{
    max-height:900px;
  }
  
  .screens-images{
    max-width:60%;
  }
  
  .nextImg img{
    margin-left: -350px;
  }
}