body, html {
    height: 100%;
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    font-family: 'Lato', sans-serif !important;
    font-size: 17px !important;
    font-weight: lighter;
    background-color: #f2f2f2;
    color: #666;
}

main {
    flex: 1 0 auto;
}
h1{
  font-family: 'Kanit', sans-serif !important;
  font-size: 45px !important;
  letter-spacing: 3px;
  text-transform: uppercase;
}
h2{
  font-family: 'Kanit', sans-serif !important;
  font-size: 43px !important;
  line-height: 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h4{
  font-family: 'Kanit', sans-serif !important;
  font-size: 38px !important;
  line-height: 42px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h5{
  font-size: 20px !important;
  font-weight: 850 !important;
}
nav{
  height: 100px!important;
  line-height: 100px!important;
  font-family: 'Kanit', sans-serif !important;
  font-size: 28px !important;
  line-height: 42px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: rgba(14, 18, 18,0.85)!important;
}
nav a {
  color: #e0e0e0!important;
}
nav ul .nav-center{
  float: none !important;
}
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #364b4d !important;
  -webkit-box-shadow: 0 1px 0 0 #364b4d !important;
          box-shadow: 0 1px 0 0 #364b4d !important;
}
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #364b4d !important;
}
.navbar-fixed{
  height: 0px !important;
}
.title-dark{
  color: #313131 !important;
}
.title-light{
  color: #b4bdc4 !important;
}
.logo{
  width: 400px;
  height: auto;
}
.logo-small{
  width: 200px;
  height: auto;
}

/*LANDINGPAGE TENTACLES*/
#container{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #364b4d; /* For browsers that do not support gradients #364b4d, */
  background-image: radial-gradient(#364b4d, #1a2626, #111919);
}
/*
CSS Reset
http://meyerweb.com/eric/tools/css/reset/
*/
.intro {
  top: 40%;
  text-align: center;
  min-width: 300px;
  width: 50%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.center-div {
  width:100%;
}

.btn{
  background-color: #a0c0c1 !important;
  color: white !important;
}
.caption {
  position: absolute;
  width: 100%;
  top: 35%;
  text-align: center;
}

/* ABOUT */
.about-container{
  width: 90%;
  margin: 0 auto;
  max-width: 1280px;
  padding-bottom: 0px;
}
/*image for about page, will change*/
.about-image {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    height: 40%;
}
.about-left{
  height: 40%;
  padding-bottom: 0px;
  text-align: center;
}

/*
.teal-container{
  height: 100%;
  padding-top: 20px;
}*/
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

.timecontainer {
   width: 80%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;

}

.timecontainer:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 95%;
   background: #CCD1D9;
   z-index: 1;
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #364b4d;
   margin-top: 10px;
   z-index: 2;
}

.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666;
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500;
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content li {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}
.ausbildung h3{
  font-size: 25px;
  font-weight: 500;
}
.ausbildung{
/*  min-height: 320px;
  min-width: 350px;*/
  padding: 10px;
  height: 300px;
  width: 95%;
  margin: auto;
}
.ausbildung-list{
  padding-top: 10px;
  padding-left: 10px;
}
.small-align{
  margin-left: 50px;
}
.testing{
  width: 95%;
  margin: auto;
  height: 300px;
}

@media screen and (max-width: 1200px) {
  .testing{
    height: 100%;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .ausbildung{
    height: 100%;
  }
}
@media screen and (max-width: 988px) {
  body {
    font-size: 16px !important;
    font-weight: 80;

  }
  .small-align{
      z-index: 11;
      bottom: 50px;
      position: relative;
      text-align: center;
      margin:auto;
  }
  .overout {
  text-decoration:none;
  position: relative;
  z-index: 10;
  bottom: 65px;
  right: -16px;
 }
}

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

  .testing{
    height: 100%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
   .projects{
     padding: none;
   }
   .project-hover{
     transition: all 0.3s ease;
   }
   .project-hover:hover{
     transform: scale(1.3);
   }
}
@media screen and (max-width: 500px) {
  h2{
    font-family: 'Kanit', sans-serif !important;
    font-size: 35px !important;
    line-height: 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .testing{
    height: 100%;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }

}

/*SERVICES PAGE*/
/*check if needed*/

.card.services{
  min-height: 230px !important;
}
.center-services{
  /*padding: 70px 0;*/
  text-align: center;
}
.services-text{
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: #888;
}
.service.card-title{
  margin-bottom: 22px !important;
}/*
.skillsection {
    height: 100%;
}*/
.parallax-container2 {
  position: relative;
  overflow: hidden;
  height: 400px!important;
  filter: brightness(80%);

}
.parallax-narrow {
  position: relative;
  overflow: hidden;
  height: 200px!important;
  filter: brightness(30%);
}
.parallax-container .header-parallax{
  height: 300px!important;
}
/*cards for services*/
.service-hover{
  transition: all 0.2s ease;
}
.service-hover:hover{
  transform: scale(1.05);
}
.inner-div {
     height: 100%;
     width: 100%;
     background-size: cover;
     background-position: center;
     transition: all 0.2s ease;
}
.inner-div:hover {
     transform: scale(1.1);
}
.card.small {
    max-height: 200px;
    max-width: 200px;
}

i.skills {
    background-color: none;
    text-align: center;
    margin-top: 25px;
    width: 100%;
    height: 150px;
}
.skills{
  color:  #8da7a8;
  transition: color 0.2s ease;
}
.skills:hover{
  color: #354c4d;
}
.card.small .card-image {
  max-height: 100%;
  overflow: visible !important;
}
.card-action{
  width: 100%;
}
.card-action a {
  display: block;
}
/*PROJECT PAGE*/
.project-container {
  margin: 0 auto;
  max-width: 1280px;
  width: 99%;
}
.project-hover{
  transition: all 0.3s ease;
}
.project-hover:hover{
  transform: scale(1.02);
}
@media only screen and (min-width: 601px) {
  .project-container {
    width: 99%;
  }
}

@media only screen and (min-width: 993px) {
  .project-container {
    width: 99%;
  }
}
@media only screen and (min-width: 200px) {
  .project-container {
    width: 99%;
  }
}
.card.large {
    min-height: 200px;
    max-height: 350px;
}
.card.large .card-image {
  height: 100%;
}
.projects{
  padding: 50px;
}
.project-content{
  padding-top: 20px;
}
.project-title{
  padding-bottom: 30px;
}
.card .card-action {
    border-top: 1px solid rgba(160, 160, 160, 0.2);
    position: relative;
    padding: 16px 24px;
}
.tech-title {
    padding: 50px;
}
/*FOOTER*/

.custom-teal {
  background-color: #364b4d !important;
}
.custom-teal-text {
 color: #8da7a8 !important;
}
.custom-teal-light{
  color:  #6c8384;
}
.custom-teal-light-new{
  color:  #a0c0c1;
}
.custom-light-grey{
  color: #e0e0e0;
}
.custom-light-grey-new{
  color: #bcbcbc;
}
.form {
    padding: 50px;
}
.socials{
  color:  #a0c0c1;
}
.socials:hover{
  color: #e0e0e0;
}
.landing-socials{
  color: transparent;
     -webkit-text-stroke-width: 1px;
     -webkit-text-stroke-color: #e0e0e0;
   }
.landing-socials:hover{
  color: #e0e0e0;
}
i .socials {
 margin: 50px;
}
/*FOOTER SECTION*/
.page-footer{
  background-color: #364b4d !important;
}
.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline>li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}