/* Specific styles: */
/* Header: */
#header {
  padding: 10vh 10vw 0 10vw;
  background: linear-gradient(to bottom, rgba(34,34,51,1) 0%,rgba(34,34,51,1) 98%,rgba(34,34,51,0) 99%);
  color: #ddd;
  overflow: hidden;
}

#header a.button {
  background-color: #ec4e20;
  box-shadow: 3px 2px 5px #ec4e20aa;
  font-size: 19px;
}

#header a.button:active {
  box-shadow: 1px 1px 1px #ec4e20aa;
}

@media print {
  #header {
    padding: 10px;
  }

  #header .column-container {
    display: none;
  }
}

#main-menu {
  background-color: #222233;
  text-align: center;
  font-size: 14px;
  padding: 8px 0px;
  display: none;
  width:100%;
  position: fixed;
  top:0px;
}

@media print {
  #main-menu {
    visibility: hidden;
  }
}

#main-menu a {
  color: #ebebeb;
  padding: 0px 20px;
  font-weight: bold;
  text-decoration: none;
  transition: 1s linear;
}

#main-menu a:hover {
  opacity: 0.7;
}

#main-menu a.active {
  text-shadow: 1px 1px 3px #fff;
}

#personal-info {
  display:inline-block;
  padding: 0 2.5vw;
}

#personal-info img {
  display:inline-block;
  margin-right: 1vw;
}

#personal-info .main {
  display:inline-block;
}

#personal-info h1 {
  display: inline-block;
  margin-right: 1vw;
}

#personal-info h1 small {
  display:block;
}

#personal-info .details {
  padding-left: 2vw;
}

#personal-info h2 {
  margin-top: 48px;
  border-image:url(../images/design/header_border_bottom_inverted.png) 1 stretch;
}

#personal-info ul {
  margin-bottom: 6vh;
}

#personal-info ul li {
  font-size: 18px;
}

a.icon-link {
  padding-top: 120px;
  color: #ddd;
  height: 100%;
  display: inline-block;
  text-decoration: none;
}

a.icon-link .label {
  text-decoration: underline;
  font-weight: bold;
  font-size: 1.8vw;
  font-size:calc(12px + 1.2vw);
}

a.icon-link:hover .label {
  text-decoration: none;
}

a.icon-link .keywords {
  font-size: 16px;
  padding-top: 11px;
}

a.icon-link.web-development:hover {
  background: url(../images/icons/web.png) no-repeat top center, radial-gradient(ellipse at center, rgba(187,187,200,0.5) 1%,rgba(187,187,200,0) 60%), url(../images/design/arrow.svg) no-repeat center 110%;
}

a.icon-link.web-development {
  background: url(../images/icons/web.png) no-repeat top center, radial-gradient(ellipse at center 80px, rgba(187,187,200,0.5) 1%,rgba(187,187,200,0) 30%), url(../images/design/arrow.svg) no-repeat bottom center;
  padding-bottom: 80px;
  transition: 0.5s;
}

a.icon-link.app-development:hover {
  background: url(../images/icons/smartphone.svg) no-repeat top center, radial-gradient(ellipse at center, #86868f 1%,rgba(255,255,255,0) 60%), url(../images/design/arrow.svg) no-repeat center 110%;
}

a.icon-link.app-development {
  background: url(../images/icons/smartphone.svg) no-repeat top center, radial-gradient(ellipse at center 80px, #86868f 1%,rgba(255,255,255,0) 30%), url(../images/design/arrow.svg) no-repeat bottom center;
  padding-bottom: 80px;
  transition: 0.5s;
}

/*Skills:*/
#skills h3 {
    margin-top: 20px;
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: 0px 2px;
    height: 20px;
}

#skills li {
  margin-top: 0;
}

h3.popupable {
  cursor:pointer;
  color:#999999;
}

h3.popupable.over {
  color:#333333;
}

h3.popupable.open {
  color:#000000;
}

h3.programming {
  background-image:url(../images/icons/programming.png);
}

h3.applications {
  background-image:url(../images/icons/applications.png);
}

h3.operating-systems {
  background-image:url(../images/icons/operating_systems.png);
}

h3.languages {
  background-image:url(../images/icons/languages.png);
}


ul.skills {
  list-style-type:none;
}

.slideToogle_display_none {
  display:none;
}

ul.skills li {
  list-style-type:none;
  font-weight: bold;
  padding-top: 5px;
}

ul.skills li:before {
  content: unset;
}

ul.skills li ul li {
  font-weight:normal;
  padding-top: 0;
}

/* App development: */
#app-development {
  background: url(../images/icons/smartphone.png) no-repeat top;

  background-size: 56vh 95vh;
  margin-top: 5vh;
  padding-top: 7vh;
  padding-bottom: 17vh;
  padding-left:0;
  padding-right:0;

  text-align: center;
  overflow: hidden;
}

#app-development.non-edge {
  background-image:url(../images/icons/smartphone.svg);
}

#app-development iframe {
  display: inline-block;
  height: 75vh;
  width: 47vh;
  margin:0;
  padding:0;
}

/* Contact: */
#contact .greeting {
  font-weight: bold;
  margin: 20px 0px;
}

#contact input, #contact textarea {
  width: 100%;
  margin: 21px 0px;
}

#contact input[type="checkbox"] {
  width: auto;
  display: inline-block;
  box-shadow: 0;
}

#contact textarea {
  height: 35vh;
}

#message-sent, #message-send-error {
  display:none;
  font-weight: bold;
  margin: 20px 0;
}

#message-sent {
  color: #080;
}

#message-send-error {
  color: #c00;
}

@media print {
  #contact {
    display:none;
  }
}

.privacy-statement {
  cursor: not-allowed;
}

.privacy-statement.allowed {
  cursor: pointer;
}

/* Imprint: */
#imprint {
  padding: 20px 0px;
  font-size: 12px;
  line-height: 15px;
  background-color: #222233;
  color: #ddd;
}

#app-development h2,
#imprint h2 {
  display:none;
}