/*
* Resume template
* Created by : Ahmed Essa
* website : www.ahmedessa.net
*/


/* Table of Content
==================================================
	- Google fonts & font family -
	- typography -
	- General -
    - Preloader -
	- Header -
    - home section -
    - About section -
    - experience section -
    - projects section -
    - Contact section -
    - Responsive media queries -
*/


/* Google fonts & font family
==================================================*/

/* HEADER FONTS*/
@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Playfair+Display:400,400i,700,700i,900,900i';
@import 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap';
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');


/* GUTE:
    font-family: 'Share Tech', sans-serif;
        font-family: 'Orbitron', sans-serif;     --> Bester f�r Header bis jetzt

/* BODY FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');

/* typography
==================================================*/


h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 80px;
    line-height: 70px;
}

h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 30px;
}

h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 26px;
}

h4 {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    position: relative;
    color: #ccff15;
    margin-left: 40px;
    font-weight: 700;
    font-size: 18px;
}

h4:before {
    position: absolute;
    width: 30px;
    left: -40px;
    content: "";
    display: block;
    height: 2px;
    background: #ccff15;
    top: 9px;
}


body {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    line-height: 24px;
}

p {
    letter-spacing: 2px;
}


#home-header {
    margin-top: 1%;
    color: white;
    text-align: center;
    font-weight: 900;
    font-size: 100px;
 /*   color: #ccff15;*/
}


/*TRANSPARENT OVERLAY*/

/*.class:after {
    Content: ��;
    Position fixed + top/... 0 Background: rgba(0,0,0,0.5)

        font-family: 'Cutive Mono', monospace;


*/



/* navbar */
.navbar-inverse {
    background-image: url(../img/bg/nav_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: #ccff15;
    font-family: 'Electrolize', sans-serif;
}
    /* Title */
    .navbar-inverse .navbar-brand {
        color: #ccff15;
    }

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #ccff15;
}
    /* Link */
.navbar-inverse .navbar-nav > li > a {
    color: white;
}

.navbar-inverse .navbar-nav > li > .active {
    color: #ccff15;
    text-decoration: underline #ccff15;
}

.navbar-inverse .navbar-nav > li > .active > a {
    color: #ccff15;
    text-decoration: underline #ccff15;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ccff15;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: greenyellow;
    background-color: #ccff15;
}

    /* Mobile version */
.navbar-inverse .navbar-toggle {
    border-color: #DDD;
}

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background-color: #DDD;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #CCC;
    }

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
            color: #333;
        }
}

.img-home:active {
    background-image: url("(../img/home_yellow.png");
}


/* General
==================================================*/



.size-50 {
    font-size: 50px;
    line-height: 50px
}

.h-50 {
    height: 50px;
}

.img-circle {
    border-radius: 50%;
}

.align-center {
    text-align: center;
}

.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-bar .w3-button{white-space:normal}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}

.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
/* preloader
==================================================*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 10000
}

#status,
.preloader {
    top: 50%;
    left: 50%;
    position: absolute
}

#status {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    margin: -50px 0 0 -50px
}

.preloader {
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px
}

    .preloader:before {
        content: "";
        display: block;
        position: absolute;
        left: -1px;
        top: -1px;
        height: 100%;
        width: 100%;
        -webkit-animation: rotation 1s linear infinite;
        animation: rotation 1s linear infinite;
        border: 2px solid #ccff15;
        border-top: 2px solid transparent;
        border-radius: 100%
    }

.preloader>.icon {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 25px;
    width: 10.6px;
    margin-top: -12.5px;
    margin-left: -5.3px;
    -webkit-animation: wink 1s ease-in-out infinite alternate;
    animation: wink 1s ease-in-out infinite alternate
}

@media only screen and (min-width:768px) {
    .preloader {
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px
    }
    .preloader:before {
        left: -2px;
        top: -2px;
        border-width: 2px
    }
    .preloader>.icon {
        height: 37.5px;
        width: 15.9px;
        margin-top: -18.75px;
        margin-left: -7.95px
    }
}

@media only screen and (min-width:1200px) {
    .preloader {
        height: 60px;
        width: 60px;
        margin-top: -30px;
        margin-left: -30px
    }
    .preloader>.icon {
        height: 50px;
        width: 21.2px;
        margin-top: -25px;
        margin-left: -10.6px
    }
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes wink {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes wink {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}



/* Header
==================================================*/

#logo {
    width: 70px;
    height:auto;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

a:focus {
    color: #444;
    text-decoration: none;
}

a:hover {
    color: #FFDE99;
    text-decoration: none;
}

a.active {
    color: #FBFF8A;
}



/* home section
==================================================*/

#home {
    padding: 100px 0;
    background: #f3f3f3;
    background-image: url("../img/bg/home_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 62vh;
}


#container h1 {
      background: url("../img/bg/header_bg.png111");
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center center;
  /*text-fill-color: transparent;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent;
    -moz-background-clip: text;*/
}


/*#home {
    position: relative;
    z-index: 1;
}


.home-img {
    content: "";
    position: absolute;
    z-index: -1;
    top: 27px;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../img/bg/home_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
}


.table-cell {
    display: table-cell;

}

.disply-table {
    display: table;
    height: 50vh;
}*/


/* about section
==================================================*/

#about {
    padding: 100px 0;
    background: #f3f3f3;
    background-image: url("../img/bg/bg_light.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    #about h2 {
        color: #071E6F;
    }

.about-img-div img {
    margin: 0 auto;
    border: 15px solid rgba(6,30,85,1);
    /*padding-top: 35px;
    padding-right: 50px;
    padding-bottom: 150px;
    padding-left: 0px;*/
    background: rgb(6,30,85);
    background: linear-gradient(90deg, rgba(6,30,85,1) 0%, rgba(7,30,180,1) 100%);
}



/* experience section
==================================================*/

#experience {
    padding: 100px 0;
    background: #f3f3f3;
    background-image: url(../img/bg/bg_dark.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.experience-row {
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.timeline-event-copy h3 {
    text-transform: capitalize;
    letter-spacing: 2px;
    color: white;
    font-weight: bold
}


.experience-row p {
    color: #888;
    margin-top: 20px;
}

.experience-row .date {
    color: #ccff15;
}

.timeline {
    padding-left: 0;
    list-style: none;
    position: relative;
}

    .timeline:before {
        background-color: white;
        content: '';
        margin-left: -1px;
        position: absolute;
        top: 0;
        left: 2em;
        width: 2px;
        height: 100%;
    }

.timeline-event {
    position: relative;
}

    .timeline-event:hover .timeline-event-icon {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background-color: #e0ff15;
    }

    .timeline-event:hover .timeline-event-thumbnail {
        box-shadow: inset 40em 0 0 0 #e0ff15;
    }

.timeline-event-copy {
    padding: 2em;
    position: relative;
    top: -1.875em;
    left: 4em;
    width: 100%;
}

    .timeline-event-copy h4 {
        margin-bottom: 1.2em;
        color: #ccff15;
    }

.timeline-event-copy strong {
    font-weight: 700;
}

.timeline-event-copy p:not(.timeline-event-thumbnail) {
    padding-bottom: 1.2em;
}

.timeline-event-icon {
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #001e22;
    outline: 10px solid #f3f3f3;
    display: block;
    margin: 0.5em 0.5em 0.5em -0.5em;
    position: absolute;
    top: 0;
    left: 2em;
    width: 1em;
    height: 1em;
}

.timeline-event-thumbnail {
    -moz-transition: box-shadow 0.5s ease-in 0.1s;
    -o-transition: box-shadow 0.5s ease-in 0.1s;
    -webkit-transition: box-shadow 0.5s ease-in;
    -webkit-transition-delay: 0.1s;
    -webkit-transition: box-shadow 0.5s ease-in 0.1s;
    transition: box-shadow 0.5s ease-in 0.1s;
    color: white;
    font-size: 12px;
    font-weight: bold;
    background-color: white;
    box-shadow: inset 0 0 0 0em gray;
    display: inline-block;
    margin-bottom: 1.2em;
    padding: 0.25em 1em 0.2em 1em;
}


/* projects section
==================================================*/

#projects {
    padding: 100px 0;
    background-image: url("../img/bg/bg_light.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.portfolio .categories-grid span {
    font-size: 30px;
    margin-bottom: 30px;
    display: inline-block;
}

.portfolio .categories-grid .categories ul li {
    list-style: none;
    margin: 20px 0;
}

.portfolio .categories-grid .categories ul li a {
    display: inline-block;
    color: #60606e;
    padding: 0 10px;
    margin: 0 14px;
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;
}

.portfolio .categories-grid .categories ul li a:hover,
.portfolio .categories-grid .categories ul li a:focus {
    text-decoration: none;
}

    .portfolio .categories-grid .categories ul li a.active {
        background-color: #071E6F;
        padding: 0px 20px;
        color: white;
        text-decoration: none;
    }

.portfolio_filter {
    padding-left: 0;
}
/*#DC6460*/
.portfolio_img_border {
    border: 5px solid #071E6F;
    background-image: linear-gradient(rgba(240, 240, 240, 0.1), rgba(200, 200, 200, 0.8));
    background-position: center;
    background-repeat: no-repeat;
}

.portfolio_item {
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 30px;
}

    .portfolio_item .portfolio_item_hover {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background: rgb(7,30,111);
        background: linear-gradient(180deg, rgba(7,30,111,1) 0%, rgba(0,42,162,1) 100%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        opacity: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        color: #333;
    }

.portfolio_item .portfolio_item_hover .item_info {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 100%;
    font-weight: bold;
}

.portfolio_item .portfolio_item_hover .item_info span {
    display: block;
    color: #fff;
    font-size: 18px;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition: all .3s ease-in-out .3s;
    transition: all .3s ease-in-out .3s;
    opacity: 0;
}

    .portfolio_item .portfolio_item_hover .item_info em {
        font-style: normal;
        display: inline-block;
        background-color: #071E6F;
        padding: 5px 20px;
        color: #fff;
        margin-top: 10px;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        -webkit-transition: all .3s ease-in-out .3s;
        transition: all .3s ease-in-out .3s;
        opacity: 0;
        font-size: 10px;
        letter-spacing: 2px;
    }

.portfolio_item:hover .portfolio_item_hover {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.portfolio_item:hover .item_info em,
.portfolio_item:hover .item_info span {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.portfolio .categories-grid .categories ul li {
    float: left;
}

.portfolio .categories-grid .categories ul li a {
    padding: 0 10px;
    -webkit-transition: all .2s ease-in-out .2s;
    transition: all .2s ease-in-out .2s;
}

.portfolio_filter {
    padding-left: 0;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}


.portfolio-padding {
    padding: 50px 0;
}

.portfolio-inner {
    padding-bottom: 0 !important;
    padding-top: 55px;
}

.modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
    border: none;
}

.popup-modal {
    background: #fff;
}

.close-popup-modal {
    float: right;
    margin: 20px;
    font-size: 22px;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
    position: fixed;
    z-index: 100000;
    right: 14px;
}

.close-popup-modal {
    opacity: 1;
}

.impressumModal-on .close-popup-modal {
    opacity: 1;
}

.modal-content h2 {
    font-size: 40px;
    line-height: 50px;
}

.iframe-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56%;
    position: relative;
}

    .iframe-container iframe {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

/*.iframe-container{
    position: relative;
    width: 90%;
    padding-bottom: 56%;
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 45vh;
    width: 100%;
}*/

/* order-form
==================================================*/

#opening-hours {
    padding: 100px 0;

}

/* contact
==================================================*/

#contact {
    padding: 100px 0;
    background-image: url(../img/bg/bg_dark.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

#contact h3 {
    color: #ccff15;
}

#contact-form input,
#contact-form textarea {
    height: 50px;
    margin-bottom: 10px;
    border-radius: 0;
}

#contact-form label {
    display: block;
    margin-bottom: .2em;
    font-size: 13px;
    line-height: 13px;
    font-size: 1.3rem;
    line-height: 1.3rem;
    color: #000;
}

#contact-form label.error {
    margin-top: 10px;
    margin-bottom: 1em;
    font-size: 12px;
    line-height: 12px;
    font-size: 1.2rem;
    line-height: 1.2rem;
    color: #D33E43;
    margin-left: 10px
}

#contact-form input[type="text"].error,
#contact-form input[type="password"].error,
#contact-form input[type="date"].error,
#contact-form input[type="datetime"].error,
#contact-form input[type="datetime-local"].error,
#contact-form input[type="month"].error,
#contact-form input[type="week"].error,
#contact-form input[type="email"].error,
#contact-form input[type="number"].error,
#contact-form input[type="search"].error,
#contact-form input[type="tel"].error,
#contact-form input[type="time"].error,
#contact-form input[type="url"].error,
#contact-form textarea.error {
    border-color: #D33E43
}

textarea {
    resize: none;
}

fieldset {
    border: 0px;
    margin: 0;
    padding: 0
}

.required {
    color: #e9266d
}

#success,
#error {
    display: none
}

#success p,
#error p {
    display: block;
}

#success p {
    color: #425BB5;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border: 2px solid #425BB5;
    margin-top: 10px;
}

#error p {
    color: #D33E43;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border: 2px solid #D33E43;
    margin-top: 10px;
}

#submit {
    background-color: #DC6460;
    color: #fff;
    padding: 10px 40px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    width: 100%;
}

.social {
    padding-left: 0;
    list-style: none;
    margin-top: 20px;
}

.social li {
    float: left;
}

.social li a {
    color: #333;
    font-size: 35px;
    margin-right: 15px;
    transition: all .3s;
    -webkit-transition: all .3s;
}

.social li a:hover {
    color: #DC6460;
}

/* Links */

#links {
    padding: 10px;
    background-image: url(../img/bg/footer_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-color: #ccff15;
}

.links{
		margin-bottom: 10px;

}

.links div a {
    color: #fff;
    transition: all .3s;
    -webkit-transition: all .3s;	
	
}

    .links div a:hover {
        color: #ccff15;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

.link {
    color: #DC6460;
	font-size: 20px;
    transition: all .3s;
    -webkit-transition: all .3s;
}


/* Cookie Hint */
#cookiehint a {color:#000; text-decoration:none;}

#cookiehint a:hover {text-decoration:underline;}

#cookiehint div {padding:10px; padding-right:40px;}

#cookiehint { 
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #d6e0eb; 
   background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
   background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#d6e0eb', endColorstr='#f2f6f9',GradientType=0 ); 
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;
}

#cookiehintCloser {
    background-color: #425BB5;
    padding: 0px 20px;
    color: white;
    text-decoration: none;
	margin-left: 5px;
}

#cookiehintCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}


/* Responsive media queries
==================================================*/

@media (max-width: 991px) {
    .portfolio .categories-grid .categories ul li a {
        padding: 0 2px;
    }
}

@media (max-width: 768px) {
    .timeline-event-copy {
        width: 90%;
        left: 2em;
    }

    #home-header {
        margin-top: 0;
        font-size: 80px;
    }
}

@media (max-width: 500px) {

    #home-header {
        margin-top: 0;
        font-size: 60px;
    }


    .size-50 {
        font-size: 40px;
        line-height: 40px
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 16px;
    }

    body {
        font-size: 14px;
        line-height: 18px;
    }

    #home,
    .disply-table {
    }
    .about-border {
        width: 265px;
    }
    .portfolio .categories-grid .categories ul li {
        list-style: none;
        margin: 10px 0;
    }
}

@media (max-width: 420px) {
    nav li {
        margin: 6px;
    }
    nav li a {
        font-size: 10px;
    }
}