@import url("menu.css");
@import url("fontello.css");

@font-face {
    font-family: 'Gilroy-ExtraBold';
    src: url('font/Gilroy-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Light';
    src: url('font/Gilroy-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
         font-size: 1em;
         margin-top: 0px;
         padding-top: 0px;
}


body
{
         background-image: url(../img/header.jpg);
         background-repeat: no-repeat;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
         background-attachment: fixed;

         font-family: 'Open Sans';
         font-size: 1em;
         font-weight: normal;

         line-height: 1.5em;
         margin-bottom: 3em;
         margin-top: 0px;

}

h1
{
    font-family: 'Gilroy-ExtraBold';
    font-size: 2em;
/*    text-align: center; */
}

h2
{
    border-top: 1px dashed #bfbfbf;
    font-family: 'Gilroy-ExtraBold';
    font-size: 1.5em;
    margin-top: 2em;
    padding-top: 2em;
}

h3
{
    font-family: 'Gilroy-ExtraBold';
    font-size: 1.2em;
}

h4
{
    font-family: 'Gilroy-ExtraBold';
    font-size: 1.1em;
}

h4.vita-ueb
{
         margin: 0.25em 0em;
}

hr
{
         margin: 3em 0em;
}

iframe
{
         border: none;
         overflow-y: auto;
/*          scroll-behavior: [ auto | smooth ]; */
}

img.logo
{
         max-width: 300px;
         height: auto;
}

input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], input[type=date], input[type=time], textarea
{
         border: 1px solid #bfbfbf;
         font-family: 'Open Sans';
         margin-bottom: 0.5em;
         padding: 0.5em;
         width: 90%;
}

#abstract
{
         background-color: #027976;
         color: white;
         padding: 2.5em;
         padding-bottom: 1em;
         box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
}

#content-layer-inner
{
/*         border: 1px dotted red; */
         margin-top: 3em;
}

#content-layer-inner img
{
         overflow: hidden;
         width: 100%;
}

#fade-hg {
         background: black;
         display: none;
         height: 100%;
         left: 0;
         opacity: 0.85;
         position: fixed;
         top: 0;
         width: 100%;
         z-index: 50;
}

#footer
{
         background-color: rgba(255,255,255,0.5);
         margin: 0 auto;
         margin-top: 0.5em;
         padding: 1em 2em;

         width: 95%;
         max-width: 900px;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

#footer a:link, #footer a:visited
{
         color: black;
         display: inline-block;
         font-size: 0.9em;
         padding: 0em 2em;
         text-decoration: none;
         text-transform: uppercase;
}


#footer a:link:hover, #footer a:visited:hover
{
         text-decoration: underline;
}

#header
{
         background-color: white;
         line-height: 1.7em;
/*         margin-bottom: 3em; */
         margin: 0 auto;
         margin-top: 1em;
         padding: 4em;
         padding-top: 9em;

         width: 95%;
         max-width: 900px;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.slider
{
         display: block;
         float: left;
         height: 18em;
         padding: 1em;
         margin-top: 0em;
         overflow: hidden;
         padding-top: 2em;
         position: relative;
         text-align: center;
         width: 50%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.slider img
{
         display: block;
         height: 15em;
  margin-left: auto;
  margin-right: auto;
         position: relative;
         width: auto;
}

.block-re
{
         display: block;
         float: left;
         height: 18em;
         margin-top: 0em;
         padding: 1em;
         width: 50%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

/*
#header img
{
         width: 80%;
         height: auto;
}
*/

#close
{
         position: absolute;
         top: 1em;
/*         border: 1px dotted green; */
         right: 1em;
         height: 1.5em;
         width: 1.5em;
         z-index: 10;
}

#close img
{
         height: 1.5em;
         width: 1.5em;
}

#container
{
/*         background-color: red; */
         margin: 0 auto;
         width: 96%;
         max-width: 960px;

         margin-top: 5em;
}

#layer_content   /* für alle überlagernden Inhalte */
{
         -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
         -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
         box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
         opacity:    1;
         background: white;
         display: none;
         width:      90%;
         max-width:  480px;
         height:     90%;
         max-height: 640px;
         z-index:    81;
/*         top:        0;
         left:       0;
*/
         padding: 2em;
         padding-right: 1em;
         position:   fixed;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);

         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

#layer_content
{
         min-height: 400px;
}

#layer_content_closebtn {
         opacity: 1.0;
         position: fixed;
         right: 0.5em;
         top: 0.5em;
         z-index: 99;
}

#layer_content_closebtn a:link, #layer_content_closebtn a:visited {
         display: block;
         height: 1.5em;
         width: 1.5em;
}

#layer_content_closebtn img {
         height: 100%;
         width: 100%;
}

#main
{
         background-color: white;
         margin: 0 auto;
         padding: 4em;
         padding-top: 1em;

         width: 95%;
         max-width: 900px;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

#portfolio-menu
{
}

#portfolio-menu a:link, #portfolio-menu a:visited
{
         display: inline-block;
         font-family: 'Gilroy-Light';
         font-size: 1em;
         margin-right: 1.5em;
}

a:link, a:visited
{
         color: #027976;
         text-decoration: none;
}

a:link:hover, a:visited:hover
{
         text-decoration: underline;
}

a.button:link, a.button:visited, input[type=button], input[type=submit], input[type=reset]
{
         border: 1px solid black;
         background-color: white;
    color: black;
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
    padding: 1em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    min-width: 10em;
}

a.button:hover {
         background-color: black;
         color: white;
    -webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}

.abstract-sub
{
         font-size: 0.9em;
         line-height: 1.5em;
         padding-left: 7em;
         padding-right: 4em;
}

.abstract-sub img
{
         margin-top: 1.5em;
         max-width: 18em;
         width: 60%;
}

.alert
{
        padding: 8px 35px 8px 14px;
        margin-bottom: 18px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        background-color: #fcf8e3;
        border: 1px solid #fbeed5;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        color: #c09853;
}

.alert-error
{
        background-color: #f2dede;
        border-color: #eed3d7;
        color: #b94a48;
}

.alert-info
{
        background-color: #d9edf7;
        border-color: #bce8f1;
        color: #3a87ad;
}

.alert-success
{
        background-color: #dff0d8;
        border-color: #d6e9c6;
        color: #468847;
}

.box-ein-drittel, .box-zwei-drittel
{
         float: left;
         font-size: 1em;
         padding-right: 2.5em;

         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.box-ein-drittel
{
         width: 33%;
}

.box-zwei-drittel
{
         width: 66%;
}

.box-ein-drittel ul, .box-zwei-drittel ul
{
    padding-left: 1.5em;
}

.header-inner
{
         background-color: transparent;
}

.header-inner.scroll
{
         background-color: rgba(255,255,255,0.8);
}

.iframe_full
{
         height: 100%;
         overflow: hidden;
         width: 100%;
}
.img-circular
{
         background-image: url('../img/portrait.jpg');
         background-size: cover;
         display: block;
         float: right;
         margin-top: -2em;
         width: 200px;
         height: 200px;
         border-radius: 100px;
         -webkit-border-radius: 100px;
         -moz-border-radius: 100px;
}

.ref
{
         border: 1px dotted #8f8f8f;
         display: inline-block;
/*         float: left; */
         margin-bottom: 1em;
         margin-right: 1em;
         position: relative;
         width: 21%;

        opacity: 1;
        animation-name: fadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 0.8s;

}

         @keyframes fadeInOpacity {
                 0% {
                         opacity: 0;
                 }
                 100% {
                         opacity: 1;
                 }
         }

.ref-inner
{
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 80% auto;
         padding-top: 50%;
}

.ref-inner img
{
         opacity: 0.4;
}

.ref-inner img:hover
{
         opacity: 0.85;
         -webkit-transition: all 0.25s linear;
         -moz-transition: all 0.25s linear;
         -o-transition: all 0.25s linear;
         transition: all 0.25s linear;
}

.skills-head
{
         font-size: 0.85em;
}

.skills-bar, .skills-bar-off
{
         margin-bottom: 0.85em;
         margin-top: 0.25em;
}

.skills-bar
{
         border: 2px solid #027976;
}

.skills-bar-off
{
         border: 2px solid #dfdfdf;
         float: right;
}

.status
{
         padding: 8px 35px 8px 14px;
         margin-bottom: 3em;
         margin-top: 2em;
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
         border: 1px solid #fbeed5;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;
         background-color: #d9edf7;
         border-color: #bce8f1;
         color: #3a87ad;
}


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

         h2
         {
             margin-top: 1em;
             padding-top: 1em;
         }

         #container
         {
                  margin-top: 3em;
         }

         img.logo
         {
                  max-width: 200px;
         }

         .ref
         {
              min-width: 40%;
         }

.slider
{
         float: none;
         height: 18em;
         text-align: center;
         width: 100%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.block-re
{
         display: block;
         float: none;
         height: auto;
         margin-top: 0em;
         padding: 1em;
         width: 100%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
}

}