@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/*@import url(https://fonts.googleapis.com/css?family=Bree+Serif);*/

body {
    /*font-size: 22px;*/
    /*line-height: 32px;*/
    margin: 0;
    padding: 0;
    word-wrap: break-word !important;
    font-family: 'Open Sans', sans-serif;
}



.toggle,
[id^=drop] {
    display: none;
}

nav {
    margin: 0;
    padding: 0;
    padding-top: 5px;
    background-color: #333;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 2;
}

@media screen and (max-device-width: 768px) and (orientation: landscape) {
    nav {
        position: relative;
    }
}

#logo {
    display: block;
    padding: 0 20px;
    float: left;
    font-size: 20px;
    /* line-height: 60px; */
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content: "";
    display: table;
    clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */

nav ul {
    float: right;
    padding: 0;
    margin: 10px;
    list-style: none;
    position: relative;
}

/* Positioning the navigation items inline */

nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    background-color: #333;
    height: auto;
    width: auto;
}

/* Styling the links */

nav a {
    display: block;
    padding: 14px 20px;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}


nav ul li ul li:hover {
    background-color: #333;
    color: #666;
}

/* Background color change on Hover */

nav a:hover {
    background-color: #333;
    color: #666;
}

.logo1:hover {
    opacity: 0.5;
    background-color: #333;
}


nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 40px;
}


nav ul li:hover > ul {
    display: inherit;
}

/* Fisrt Tier Dropdown */

nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/

nav ul ul ul li {
    position: relative;
    top: -60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left: 170px;

}

/*Dropdown Symbol*/

li > a:after {
    content: ' ▾';
    ;
}

li > a:only-child:after {
    content: '';
}

nav ul ul {
    margin: 5px 0 0 0;
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width: 700px) {
    #content {
        top: 0;
    }

    .grid {
        display: grid;
        grid-row-gap: 30px 30px;
    }

    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }
    .toggle + a,
    .menu {
        display: none;
    }
    .toggle {
        display: block;
        background-color: #333;
        padding: 10px 15px;
        color: #FFF;
        font-size: 17px;
        text-decoration: none;
        border: none;
    }

    .toggle:hover {
        background-color: #464242;
    }
    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
    }

    nav ul li {
        display: block;
        width: 100%;
    }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: #464242;
        color: #666;
    }

    nav ul li ul li .toggle,
    nav ul ul a,
    nav ul ul ul a {
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
    }

    /*1st dropdown*/
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #222;
    }


    /*2nd dropdown */
    nav ul li ul li ul li .toggle,
    nav ul ul ul a {
        background-color: #111;
    }

    nav ul ul {
        float: none;
        position: static;
        color: #fff;
    }

    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }

    /* Frist Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
        z-index: 1;
    }

    nav ul ul ul li {
        position: static;
    }

}





/*****************Content/Image CSS**************************/

.img1,
.img2,
.img3,
.img4,
.img6,
.img7,
.img8 {
    position: relative;
    opacity: 0.75;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
}

.img1 {
    background-image: url('../img/pexels-photo-97077.jpeg');
    min-height: 400px;
}

.img2 {
    background-image: url('../img/pexels-photo-160107.jpeg');
    min-height: 400px;

}

.img3 {
    background-image: url('../img/pexels-photo-265076.jpeg');
    min-height: 400px;

}

.img4 {
    background-image: url('../img/java_code.png');
    min-height: 400px;

}

.img6 {
    background-image: url('../img/network-cable-ethernet-computer-159304.jpeg');
    min-height: 400px;

}

.img7 {
    background-image: url('../img/pexels-photo-270632.jpeg');
    min-height: 400px;

}

.img8 {
    background-image: url('../img/pexels-photo-270348.jpeg');
    min-height: 400px;

}

.imgtext {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 27px;
    text-transform: uppercase;
}

.imgtext .border {
    background-color: black;
    color: #fff;
    padding: 20px;
    display: inline-block;
}

.section {
    text-align: center;
    padding: 50px 80px;
}

.a1 {
    text-decoration: none;
    color: white;
}


@media and screen (max-width:568px) {
    .img1,
    .img2,
    .img3,
    .img4,
    .img5,
    .img6,
    .img7,
    .img8 {
        background-attachment: scroll;
    }

}

/****************Projekte CSS*******************************/

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.box9,
.box10 {
    background-color: #fff;
    padding: 40px 30px;

}

.link {
    background-color: #333;
    padding: 10px;
    font-size: 1.5em;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;

}

.link:hover {
    opacity: 0.7;
}

.grid {
    text-align: center;
    background-color: #3d3d3d;
    padding-bottom: 10px;
}

.grid4 {
    text-align: center;
    background-color: #3d3d3d;
    padding-bottom: 10px;
}

.image {
    height: auto;
    width: 100%;
    margin-bottom: 10px;
}

.spacer {
    content: '';
    height: 20px;
    background-color: #3d3d3d;
}



@media (min-width: 700px) {
    .grid {
        display: grid;
        /*grid-template-columns: 1fr 1fr 1fr;*/
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        /*grid-template-areas: "box1 box2 box3" "box10 . .";*/
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }
    .grid4 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "box5" "box8";
    }
    .box1 {
        /* grid-area: box1; */
        height: auto;

    }
    .box2 {
        /* grid-area: box2; */
        height: auto;
    }
    .box3 {
        /* grid-area: box3; */
        height: auto;
    }
    .box4 {
        height: auto;

    }
    .box5 {
        grid-area: box5;
        height: auto;

    }
    .box6 {
        height: auto;
    }
    .box7 {
        height: auto;

    }
    .box8 {
        grid-area: box8;
        height: auto;

    }
    .box9 {
        height: auto;
    }
    .box10 {
        /* grid-area: box10; */
        height: auto;

    }

}

/******************Footer****************************/

#footer {
    width: 100%;
    height: auto;
    background-color: #333;

}

hr {
    padding: 0;
    width: 95%;
    color: #565656;
    border-width: 1px;
    border-style: solid;
}

a {
    text-decoration: none;
}


.fa-twitter,
.fa-github,
.fa-at {
    color: #c3c0c0;
}

.fa-twitter:hover {
    color: aqua;
}

.fa-github:hover {
    color: #fcfcfc;
}

.fa-at:hover {
    color: #e74f4f;
}

.social {
    display: block;
    padding-left: 50px;
    padding-bottom: 60px;
    grid-area: social;
}

.donation {
    display: block;
    padding-right: 50px;
    padding-left: 50px;
    grid-area: donation;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "social . donation";
}

.donation-btn {
    background-color: rgba( 11, 124, 177, 0);
    color: white;
    border: none;
    font-size: 22px;
}

.donation-btn:hover {
    color: #105CAE;
    border: solid #333 2px;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);

}

pre {
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow: scroll;
    text-align: left;
}