:root {
    --wb-blue: #2196f3;
    --wb-blue-dark: #06589b;
}
/*https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_theme_blue*/
.w3-theme-l5 {color:#000 !important; background-color:#f2f9fe !important}
.w3-theme-l4 {color:#000 !important; background-color:#d2eafd !important}
.w3-theme-l3 {color:#000 !important; background-color:#a6d4fa !important}
.w3-theme-l2 {color:#000 !important; background-color:#79bff8 !important}
.w3-theme-l1 {color:#fff !important; background-color:#4daaf6 !important}
.w3-theme-d1 {color:#fff !important; background-color:#0c87eb !important}
.w3-theme-d2 {color:#fff !important; background-color:#0b78d1 !important}
.w3-theme-d3 {color:#fff !important; background-color:#0a69b7 !important}
.w3-theme-d4 {color:#fff !important; background-color:#085a9d !important}
.w3-theme-d5 {color:#fff !important; background-color:#074b83 !important}

.w3-theme-light {color:#000 !important; background-color:#f2f9fe !important}
.w3-theme-dark {color:#fff !important; background-color:#074b83 !important}
.w3-theme-action {color:#fff !important; background-color:#074b83 !important}

.w3-theme {color:#fff !important; background-color:#2196f3 !important}
.w3-text-theme {color:#2196f3 !important}
.w3-border-theme {border-color:#2196f3 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#2196f3 !important}
.w3-hover-text-theme:hover {color:#2196f3 !important}
.w3-hover-border-theme:hover {border-color:#2196f3 !important}
*{margin:0; padding:0}
@font-face {
    font-family: "futura";
    src: url("../fonts/futuralight.ttf");
}
@font-face {
        font-family: "gothicb";
    src: url("../fonts/GOTHIC.TTF");
}
body {
    margin: 0;
    font-family: "futura";
    /* background: linear-gradient(to right, #5B9ACF, #B8D3EA); */
    background: linear-gradient(to right, #ADD6F8, #E6F0F9);
    width:100%;
    min-width: 360px;
}
.clearfix::after {overflow: auto;}
.hide {display: none}
img {max-width:100%; height:auto!important;}

a {color:#06589b; font-weight:bold; text-decoration:none;}
a:hover {color: var(--wb-blue)}

h1 { font-size: 2.5em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.27em; }
h4 { font-size: 1.12em; }
h5 { font-size: 1.0em; }
h6 { font-size: 1.0em; }
h1, h2, h3 {color: #032b4f}

/*Startpage*/
.w3-card-4 a {text-decoration: none;color: #fff}
.w3-card-4 a:hover {color: #bee7fb}
.w3-card-4 h2 {font-size: 2.5em;}
.w3-card-4 h2, .w3-card-4 footer {color: #bee7fb!important;  }

.box ul, .box ol { margin: 20px 0 20px 30px; /*list-style-type: square;*/}

/* ul anker links */
ul.docunav {
  list-style: none;
  padding: 0;
}
    .docunav li {
      padding-left: 1.3em;
    }
    .docunav li:before {
      content:"\f0ab"; /* FontAwesome Unicode */
      font-family: FontAwesome;
      display: inline-block;
      margin-left: -1.3em; /* same as padding-left set on li */
      width: 1.3em; /* same as padding-left set on li */
    }
    .docunav li:hover::before {
        color: #2196f3;
    }
    .docunav a {color: #06589b; /*font-weight: bold;*/ text-decoration: none}
    .docunav a:hover {color: #2196f3;}

/* #############
         GRID
################ */
h1 {text-align: center;background: rgba(255,255,255,.5);border-radius: 10px;padding: 10px;}
p    { font-size: 1.22em; }
p .ext_link:after {
    content: "f08e";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: none;
    padding-left: 3px;
}

.container{
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    min-height:500px;
}
.row {
    /*background: #fff;*/
}
.row:before,
.row:after {
    content:"";
    display: table ;
    clear:both;
}

.col-1{ width: 33.33%; float: left; min-height: 1px;} /* padding: 10px;}*/
.col-2{ width: 66.66%; float: left; min-height: 1px;}    /* padding: 10px;}*/
.col-3{ width: 100%; float: left; min-height: 1px;}    /* padding: 10px; }*/

.box { padding: 0px 0px;}

/* Startseite */
#pid1 #menu-extern {position: relative;}
#pid1 .addon_slider_main {height: 430px; margin: 0; overflow: hidden}
#pid1 .addon_box_content h2 + br, #pid1 .addon_box_content h2 + br + br {display: none}
#pid1 .addon_box_content .votes + br, #pid1 .addon_box_content .votes + br {display: none}

#pid1 .votes {padding: 10px; font-size: 15px}
#pid1 .votes img {width: 16px; vertical-align: top;}

#pid1 a.details {font-size: 20px; }

/*Seite Browse*/
#pid3 .cat.sidebar {width: 25%}
    @media all and (max-width: 900px) {
        #pid3 h1 {font-size: 1.5em}
        #pid3 .cat.sidebar {width: 100%!important;}
        #pid3 .cat.sidebar > div {width: 31%; display: inline-table; margin: 5px;}
        #pid3 .cat.sidebar h2 {font-size: 1.1rem}
        #pid3 .cat.sidebar hr {display: none}
        #pid3 .search_wrapper {margin-left: 0%;}
        #pid3 div.details {width: 100%!important;}
        #pid3 div.addon_search {float: none; position: initial;}
        #pid3 div.addon_box_framer {width: auto; margin: 0; float: none;}
        #pid3 table.addons.detail a.download {width: 300px}
    }
    @media all and (max-width: 650px) {
        #pid3 .cat.sidebar > div {width: 45%; display: inline-table; margin: 5px;}
        #pid3 table.addons.detail tr:first-child > td:first-child, #pid3 table.addons.view tr:first-child > td:first-child {display: none} /* erstes td mit image ausblenden*/
    }

/* #pid2 .col-1 .box { */
    /* width: 250px; */
    /* margin: 0 auto !important; */
/* } */


/* #############
     Sticky nav
################    */

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #B6D2E8;
    /*padding: 50px;*/
    font-size: 20px;
    z-index: 4;
    width: 100%; /* sticky for <= IE11    */
}
/* #############
     parallax
################    */
.parallax {
    /* The image used */
    /* background-image: url("../img/parallax.jpg"); */
    background-image: url("../img/EN_parallax.jpg");
    /* Set a specific height */
    max-height:    40vw;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30vw;
}
.parallax h1 {font-family: "gothicb";color:#fff;text-align: center;text-shadow: 0px 0px 2px #000;font-size: 4em;padding: 15vw 0;background:rgba(0,0,0,.3)}




/* ############
     NAV
############ */
header{position:relative;width:100%;background:#333;}
.logo{position:relative;z-index:123;padding:10px;/*font:18px verdana;*/color:#6DDB07;float:left;min-width: 200px;width:15%}
.logo img{width:226px;} /*100%*/
.logo a {font-weight: normal}
.lang{position:relative;z-index:123;float:right;/*max-width:140px;*/padding:15px;}
.lang a {text-decoration: none;}
.lang img {border: 1px solid #5b9acf!important;border-radius: 20%;}
/* nav .search{position:relative;z-index:123;float:right;max-width:45px;padding: 10px 0 0 0;margin: 0px 50px 0 0px;} */
nav{position:relative;margin:0 auto;}
nav.w3-blue {background-color: #2196F3 !important;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;white-space: nowrap}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#114978;} /* BACKGROUND MENU */
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:25px;font-size:1.1vw;letter-spacing:1px;text-decoration:none;/*color:#b2cfe8;*/font-weight:700;font-weight: bold; text-decoration: none;color: #fff;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active > a{color:#fff}
/* MENU HOVER    */
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#06589b;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:50%;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:45%;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:50%;height:0}

#cssmenu ul ul{position:absolute;left:-9999px; width: auto;min-width: 100%; z-index:1}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#2196F3/*114978*/; background: #116FBA; transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:40px}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;/*width:170px;*/font-size:16px;text-decoration:none;color:#fff;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff;background:#06589b}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{/*background:#06589b    5B9ACF*/;}

#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

/* font-awesome external icon */
#cssmenu > ul > li a i {vertical-align: middle;}
/* first menu item Templates*/
/* #cssmenu > ul > li:first-child {margin-right: 1vw;} */
/* #cssmenu > ul > li:first-child a {font-size: 1.2vw;} */
/* #cssmenu > ul > li:first-child a i {display:none;} */

    /* TOP menu with external links*/
    #header-1 ul.menu-extern {display:none!important;margin-left: 0!important; }
    #menu-extern,#menu-extern ul,#menu-extern ul li,#menu-extern ul li a/*,#menu-extern #head-mobile*/{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    #menu-extern:after,#menu-extern > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
    /* #menu-extern #head-mobile{display:none} */
    #menu-extern{font-family:sans-serif;/*background: #06589be6;*/ background: rgba(6,88,155,.9); position: absolute; width: 100%;} /* BACKGROUND MENU */
    #menu-extern > ul > li{float:left}
    #menu-extern > ul > li > a{padding:20px;font-size:1.1vw;letter-spacing:1px;text-decoration:none;color:#b2cfe8;font-weight:700;}
    #menu-extern > ul > li:hover > a,#menu-extern ul li.active a{color:#fff}
    /* MENU HOVER    */
    #menu-extern > ul > li:hover,#menu-extern ul li.active:hover,#menu-extern ul li.active,#menu-extern ul li.has-sub.active:hover{background:#2196F3!important/*5B9ACF*/;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
    #menu-extern > ul > li.has-sub > a{padding-right:30px}
    #menu-extern > ul > li.has-sub > a:after{position:absolute;top:50%;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
    #menu-extern > ul > li.has-sub > a:before{position:absolute;top:46%;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
    #menu-extern > ul > li.has-sub:hover > a:before{top:50%;height:0}
    #menu-extern ul ul{position:absolute;left:-9999px}
    #menu-extern ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#114978;transition:all .25s ease}
    #menu-extern ul ul li:hover{}
    #menu-extern li:hover > ul{left:auto}
    #menu-extern li:hover > ul > li{height:40px}
    #menu-extern ul ul ul{margin-left:100%;top:0}
    #menu-extern ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:16px;text-decoration:none;color:#ddd;font-weight:400;}
    #menu-extern ul ul li:last-child > a,#menu-extern ul ul li.last-item > a{border-bottom:0}
    #menu-extern ul ul li:hover > a,#menu-extern ul ul li a:hover{color:#fff}
    #menu-extern ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
    #menu-extern ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
    #menu-extern ul ul > li.has-sub:hover > a:before{top:17px;height:0}
    #menu-extern ul ul li.has-sub:hover,#menu-extern ul li.has-sub ul li.has-sub ul li:hover{background:#5B9ACF;}
    #menu-extern ul ul ul li.active a{border-left:1px solid #333}
    #menu-extern > ul > li.has-sub > ul > li.active > a,#menu-extern > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
    .menu-extern a.current {color:#fff!important; background:#2196F3!important;/*5B9ACF*/ transition:background .3s ease;}

    /* font-awesome external icon */
    /* #menu-extern > ul > li a i {vertical-align: middle;} */
    /* first menu item Templates*/
    /* #menu-extern > ul > li:first-child {margin-right: 1vw;} */
    /* #menu-extern > ul > li:first-child a {font-size: 1.2vw;} */
    /* #menu-extern > ul > li:first-child a i {display:none;} */
/* ##################################
            Search Field
################################## */
#wrap .search {
    width: 100%;
    position: relative;
    display: flex;
}

#wrap .searchTerm {
    width: 100%;
    font-size: 16px;
    border: 3px solid #5c9bcf;
    border-right: none;
    padding: 7px;
    height: 25px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #444;
    background: rgba(255,255,255,.7);
}

#wrap .searchTerm:focus{
    color: #00B4CC;
    background: #fff;
}

#wrap .searchButton {
    width: 50px;
    height: 45px;
    border: 1px solid #5c9bcf;
    background: #5c9bcf;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
    padding-top: 10px;
}
#wrap .search-icon {}

/*Resize the wrap to see the search bar change!*/
#wrap{
    width: 25%;
    position: absolute;
    top: 15px;
    right: 30px;
    /* transform: translate(-50%, 280%); */
}

    /*Resize the wrap to see the search bar change!*/
    #wrap2 {
        width: 25%;
        position: absolute;
        top: 7px;
        right: 30px;
        /* transform: translate(-50%, 280%); */
        opacity: .5;
        transition: all 0.3s;
    }
    #wrap2:hover { opacity: 1;}

    #wrap2 .search {
        width: 100%;
        position: relative;
        display: flex;
    }

    #wrap2 .searchTerm {
        width: 100%;
        font-size: 16px;
        border: 0;
        padding: 7px;
        /* height: 25px; */
        outline: none;
        color: #b2cfe8;
        background: transparent;
        border-bottom: 1px solid #b2cfe8;
    }


    #wrap2 .searchTerm:focus{
        color: #b2cfe8;
        /* background: #fff; */
    }

    #wrap2 .searchButton {
        width: 50px;
        height: 40px;
        border: 0;
        background: transparent;
        text-align: center;
        color: #b2cfe8;
        cursor: pointer;
        font-size: 20px;
        /* padding-top: 5px; */
        border-bottom: 1px solid #b2cfe8;
    }


/* ##################################
            PAGES
################################## */

/*browse addons*/
#votes img, .votes img {margin: 0}
.cat h2.title {font-size: 1.5rem} /*sidebar navi*/


/* ##################################
            PRE / CODE
################################## */
pre {
    background: #f4f4f4; /*war auskommentiert*/
    border: 1px solid #ccc; /*#ddd*/
    border-left: 6px solid #ccc; /*#f36d33*/
    color: #444; /*FFF*/
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 10px 20px;
    display: block;
    word-wrap: break-word;
}
/*Test hgs für code und blockqute*/
/* .code { */
        /* font-family: 'Courier New', Courier, monospace; */
        /* margin: 0; */
        /* margin: 8px 5px 8px 5px; */
        /* padding: 0.6em; */
        /* color: #990000; */
        /* background: #FFFFE6; */
        /* font-size: 95%; */
        /* line-height: 1.4em; */
        /* border: 2px solid #EEEEEE; */
        /* overflow: auto; */
/* ) */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    format the quick-links on startpage
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#quicklinks { margin: 25px 0 0 0; padding: 0; width: 220px; /*background-color: rgba(255, 255, 255, 0.1);*/ }
#quicklinks ul { list-style: none inside; padding: 0; margin: 0; }
#quicklinks li { margin: 0; /*border-bottom: solid rgba(0, 0, 255, 0.4) 1px;*/ }
#quicklinks a { position: relative; overflow: hidden; display: block; margin: 10px 0 8px 0; height: 60px; }
#quicklinks a img { position: absolute; left: 0px; top: 0px; height: 120px; width: 220px; }
#quicklinks a:hover img { left: 0px; top: -60px; }

/*##################################
            BLOCKQUOTE
##################################*/
blockquote {
    /*background: #f9f9f9;*/

    background: url("../img/info.png") no-repeat #EFEFEF;
    background-position-x: 0%;
    background-position-y: 0%;
    background-position: 10px 5px;
    border: 1px solid #ccc;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 10px 10px 10px 55px;
    /*quotes: "201C""201D""2018""2019";*/
}
/* blockquote:before { */
    /* color: #ccc; */
    /* content: open-quote; */
    /* font-size: 4em; */
    /* line-height: 0.1em; */
    /* margin-right: 0.25em; */
    /* vertical-align: -0.4em; */
/* } */
blockquote p {
    display: inline;
}
/* #############################
        FOOTER
######################### */
#footer {
    background:#06589b; /*114978 */
    color: #ddd;
    padding: 20px 40px 40px 40px;
}
#footer p {
    color: white;
    font-size: 14px;
}
#footer    a {
    color: rgba(255, 255, 255, 0.5);
}
#footer    a:hover, #footer a:active, #footer a:focus {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Back to top */
#back-top { position: fixed; bottom: 2em; margin: 0 0.0% 0 70.5%; }
#back-top a { width :6em; display :block; text-align :center; text-transform :uppercase; text-decoration :none; color :#BBBBBB; -webkit-transition :1s; -moz-transition :1s; transition :1s; }
#back-top a:hover { color :#000000; }
/* arrow icon (span tag) */
#back-top span { width: 5em; height: 5em; display: block; margin-bottom: 1.0em; background: #4B85BF url(../img/up-arrow.png) no-repeat center center; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover span { background: #06589b url(../img/up-arrow.png) no-repeat center center; azimuth: opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; }



#navi2 { /*float: left; padding-left: 20px; padding-top: 10px;*/ }
#navi2 ul { /*float: left;*/ list-style: none; }
#navi2 li { float: left; padding-right: 14px; padding-left: 14px; border-right: 1px solid #336699; }
#navi2 li:first-child    {/* padding-left: 0px*/; }
#navi2 li:last-child { border-right: none; }
#navi2 a { color: #b2cfe8; font-size: 1.1em; }
#navi2 a:hover { color: #fff; }
#navi2 .menu-current a { color: #fff; }



/* ####################
         OUTLINE
         ############### */
.left {
    text-align:left;
    float:left;
}
.right {
    float:right;
    text-align:right;
}
.center {
    text-align:center;
}

/* ####################
 BUTTON
 #################### */
 .btn {
    z-index: 1;
    position: relative;
    font-size: inherit;
    font-family: inherit;
    color: white;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: hsl(236, 32%, 26%);
    line-height: 1; /*1.42857;*/
    display: inline-block;
}

.btn::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #114978;
    transform-origin: center bottom;
    transform: scaleY(0);
    transition: transform 0.25s ease-in-out;
}

.btn:hover {
    cursor: pointer;
}

.btn:hover::before {
    transform-origin: center top;
    transform: scaleY(1);
}
/* ##################################
        mobile Search Field
################################## */
/* https://codepen.io/choogoor/pen/NGJVMb */
    .search-button { /* icon in nav */
        position: absolute;
        right: 44px;
        top: 30px;
        z-index: 9999;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

    .sButton {
        position: absolute;
        top: 0;
        right: 0px;
        width: 100px;
        height: 100%;
        background: #0775c2;
        border: 0;
        color: #b2cfe8;
        cursor: pointer;
        font-size: 20px;
    }
    .sButton:hover {cursor:pointer}

    .search-toggle {
        position: relative;
        display: block;
        height: 15px;
        width: 15px;
    }
    .search-toggle::before, .search-toggle::after {
        content: '';
        position: absolute;
        display: block;
        transition: all 0.1s;
    }
    .search-toggle::before {
        border: 2px solid #ddd;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        left: -2px;
        top: -2px;
    }
    .search-toggle::after {
        height: 2px;
        width: 10px;
        background: #ddd;
        top: 15px;
        left:10px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .search-toggle.active::before {
        width: 0;
        border-width: 1px;
        border-radius: 0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        top: -3pxpx;
        left: 6px;
        height: 20px;
    }
    .search-toggle.active::after {
        width: 22px;
        left: -4px;
        top: 8px;
    }

    .search-input:focus {
        outline: none;
    }

    #header-1 {
        /* border-bottom: 2px solid #0097bf; */
    }
    #header-1 .search-box {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 0;
        background-color: #0775c2;
        -webkit-transform: translateY(100%);
                transform: translateY(100%);

               transition: all 0.3s;
    }
    #header-1 .search-box .search-input {
        width: 90%;
        height: 100%;
        padding: 0 1em;
        border: 0;
        background-color: transparent;
        opacity: 0;
        color: #fff!important;
        font-size: 16px;
    }
    #header-1 .search-box .search-input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
    #header-1.show .search-box {
        max-height: 50px;
    }
    #header-1.show .search-box .search-input {
        opacity: 1;
    }

    @media screen and (max-width:1040px){
        nav .search-button {display:inline-block; }
    }

/* Search page */
form[name="searchpage"] tr:first-child input {width: 95%!important;padding: 5px!important;}
form[name="searchpage"] tr:first-child td:nth-child(2) input {width: 100%;padding: 4px!important;} /* searchbutton */

/*addon search*/
.srcinput {padding: 7px!important;}


/* #################### MEDIA QUERYS ############### */
@media all and (max-width:450px){
        footer ul li {float:none!important; display:block!important; border-right: 0!important; padding: 10px;}
        .logo img {width:140px;}
}

@media all and (max-width: 768px) {
    #pid1 .num1 {display: none}
    #pid1 .addon_slider_main {padding: 0}
    #pid1 .addon_slider_main figure {margin: 1em}
    #pid1 .votes {padding: 5px; font-size: 10px;}
    #pid1 .votes img {width: 14px;}
    #pid1 .addons-left {display: none}
    #pid1 table.addons {float:none!important; width: 100%!important;}
    #pid1 a.details {font-size: 16px;}
}

@media all and (max-width:900px){
    .col-1{ width: 100%; }
    .col-2{ width: 100%; }
    .col-3{ width: 100%; }

        .w3-card-4 h2 {font-size: 22px}

        footer .col-1, footer .col-2, footer .col-3 {text-align:center}
        footer ul li {float:none!important; display:inline}
}

@media all and (min-width:900px){
        footer .col-1{width: 50%}
        footer .col-1:nth-child(2) {display:none}
}

@media screen and (max-width:1040px){
/* #############
     parallax
################    */
        .parallax {
        /* The image used */
        /* background-image: url("../img/parallax.jpg"); */
        /* Set a specific height */
        /* max-height:    40vw;    */
        /* Create the parallax scrolling effect */
        /* background-attachment: fixed; */
        /* background-position: top center; */
        /* background-repeat: no-repeat; */
        /*background-size: cover;*/
        }
        .parallax h1 {color:#fff;text-align: center;font-size: 7vw;/*padding: 40px 0;*/}



        nav#menu-extern, #wrap {display:none}
        .logo{position:absolute;top:0;left: 0;width:100%;height:46px;/*text-align:center;*/padding:10px;float:none}
        /* .logo img {width:140px;}*/    /*20%}*/
        .logo2{display:none}
        .lang{position:relative;z-index:123;float:right;right: 80px;margin:0px 0px 0px 0px;}
        nav{width:100%;}
        /* nav .search {display:inline-block; } */
        #cssmenu{width:100%}
        #cssmenu ul{width:100%;display:none;/*margin-top: 20px;*/}
        #cssmenu ul li{width:100%;border-top:1px solid #444}
        #cssmenu ul li:hover{background:#363636;}
        #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
        #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0; font-size: 20px!important; }
        #cssmenu > ul > li{float:none}
        #cssmenu ul ul li a{padding-left:25px}
        #cssmenu ul ul li{background:#333!important;}
        #cssmenu ul ul li:hover{background:#363636!important}
        #cssmenu ul ul ul li a{padding-left:35px}
        #cssmenu ul ul li a{color:#ddd;background:none}
        #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
        #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
        #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
        #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700;height: 60px;}
        .button{width:55px;height:60px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
        .button:after{position:absolute;top:30px;right:20px;display:block;height:8px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
        .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:24px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
        .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:30px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
        .button.menu-opened:before{top:30px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
        #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:70px;width:66px;cursor:pointer}/*    Positie + */
        #cssmenu .submenu-button.submenu-opened{background:#262626}
        #cssmenu ul ul .submenu-button{height:42px;width:66px}
        #cssmenu .submenu-button:after{position:absolute;top:49%;right:45%;width:8px;height:2px;display:block;background:#ddd;content:''}
        #cssmenu ul ul .submenu-button:after{top:23px;right:30px}
        #cssmenu .submenu-button.submenu-opened:after{background:#fff}
        #cssmenu .submenu-button:before{position:absolute;top:45%;right:50%;display:block;width:2px;height:8px;background:#ddd;content:''}
        #cssmenu ul ul .submenu-button:before{top:20px;right:33px}
        #cssmenu .submenu-button.submenu-opened:before{display:none}
        #cssmenu ul ul ul li.active a{border-left:none}
        #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
        #header-1 ul.open + ul.menu-extern {display:block!important;}
        #pid1 .details.hide {display: inline-block} /*button in text "browse addons"*/
}

@media screen and (min-width:1040px){
        #cssmenu ul {display:block!important; }
        form.search-box {display:none}
}


@media screen and (min-width:1200px){
        /* #cssmenu > ul > li:first-child { */
                /* margin-right: 9vw; */
        /* } */
}