/* Top Elements */
* {
    margin: 0;
    padding: 0;
}

/* https://colorate.azurewebsites.net/Color/AA0000 */
body,
html {
    color: #000;
    margin: 0;
	background url(img/header.jpg) repeat-x fixed en was f7f7f7 */
    height: 100%;
    word-break: break-word;
    hyphens: auto;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.mainwrapper {
    width: 90%; /* was 80 */
    max-width: 1280px;
    min-height: 70%;
    margin: 0 auto 0 auto;
    background: transparent url(img/mainwrapper.jpg) repeat-y; /* mnainwrapper.gif voor kleur e8e8e8 */
    background-size: 100% 10px;
    position: relative;
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);
}

#leftbox {
    margin: 0 0 0 0;
    float: left;
    width: 25%; /* was 20 */
    min-height: 400px;
    background: #ffffff; /* was 31-01-2020 #e8e8e8*/
}

#leftbox .logo img {
    margin: 20px 0 30px 5%;
    max-width: 90%;
}

.contentinner a {
    border-bottom: 1px solid rgba(234, 10, 21, 0.47);
    color: #000000;
    /* font-weight: 600; */
}

/*
.contentinner a {
	text-decoration-color: #000000;
	text-decoration-thickness: .0rem;
	text-underline-offset: 1.5px;
}
*/

.contentinner a:hover {
    color: rgba (85, 36, 19, .2);
    font-style: italic;
}

.contentinner a:visited {
    border-bottom: 1px solid rgb(0, 170, 68);
}

.linkuitleg {
    font-size: 0.9rem;
    padding-left: 10px;
    
}

/* Main Blocks */
.mainbox {
    float: left;
    width: 75%;
}

.contentbox {
    padding-top: 1px;
}

/* 30 */
.contentbox,
.widetop,
.widebottom {
    width: 100%;
    clear: both;
    min-height: 100px;
}

.contentwide {
    float: left;
    width: 93%; /* was 90 */
}

.contentnarrow {
    float: left;
    width: 74.9%;
}

.sidebar {
    float: right;
    width: 25%;
    font-size: 0.92em;
}

.footer {
    width: 100%;
    margin: 0;
}

/* inenabstaende: */
.contentbox .contentinner {
    margin: 0 20px 20px 20px;
}

.sidebar .contentinner {
    margin: 0 5% 20px 5%;
}

.widetop .contentinner {}

.widebottom .contentinner {}

.footer {
    border-top: 1px solid #ddd;
}

.footer .contentinner {
    width: 62%;
    margin: 0 0 20px 20px;
    padding-top: 10px;
}


/* Tijdelijk */
.mainbox img {
/* 
    max-width:100%;
    height: auto !important; 
*/
}

.links {
    float: left;
    margin: 9px 10px 9px 0;
}

.rechts {
    float: right;
    margin: 9px 0 9px 10px;
}

.clearer {
    height: 5px;
    clear: both;
}

#gototopswitch {
    float: right;
    margin: 20px 10px 0 0;
}

#mobiletop {
    display: none;
    padding: 10px 0 10px 0;
    background: #fff;
    height: 60px;
}

#mobiletop a#menuswitch {
    display: block;
    float: right;
    max-width: 4%;
    margin: 0 0 0 0;
    padding: 10px 20px 0 0;
}

#mobiletop a#menuswitch img {
    max-width: 100%;
}

#mobiletop .mobilelogo img {
    float: left;
    max-width: 75%;
    margin-left: 5%;
    max-height: 100%;
}

#menucheck {
    width: 100%;
    height: 1px;
    display: block;
}

.sliderbox {
    height: 360px;
    color: #ddd;
    margin: 0 0 0 0;
}

.slider {
    overflow: hidden;
    height: 100%;
}

#static_headerbox {
    width: 100%;
    padding-bottom: 25%;
    background: url(img/header.jpg) no-repeat fixed top center;
}

.menubox {
    width: 100%;
    min-height: 400px;
}

/* menu */
#nav {
    width: 100%;
    margin-top: -1px;
}

/* all lists */
#nav ul {
    padding: 0;
    margin: 0;
    list-style-image: none;
    list-style-type: none;
    padding-bottom: 5px;
}

/* all list items */
#nav li {
    display: block;
    float: left;
    width: 100%;
    list-style-image: none;
    list-style-type: none;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 0;
    border-bottom: 1px solid #ccc;
}

/* Level 1 and more */
#nav a {
    display: block;
    text-decoration: none;
    padding: 6px 0 6px 20px;
    transition: 0.5s padding;
}

#nav li a.menu-current,
#nav li a.menu-parent {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
}

/*
#nav li li a.menu-current,
#nav li li a.menu-parent {
    background:none;
    font-weight:bold
}
*/

#nav a:hover ul li {
    z-index: 1000;
}

#nav a.menu-expand {
    background: url(img/haschild.png) no-repeat 2px 12px;
}

#nav a.menu-expand.isopened {
    background: url(img/isclicked.png) no-repeat 2px 12px;
}

#nav li ul {
    opacity: 0.9;
}

#nav li a {
    font-size: 1.2em;
}

#nav li li a {
    padding-left: 35px;
    font-size: 1.1em;
	color: #5C3C92;
}

#nav li li li a {
    padding-left: 43px;
    font-size: 1.1em;
}

#nav li li li li a {
    padding-left: 50px;
    font-size: 0.9em;
}

#XXnav a.isopened {
    padding-top: 12px;
}

#nav li ul {
    display: none;
}

#nav li.menu-current>ul,
#nav li.menu-parent>ul,
#nav li.isopened>ul {
    display: block ! important;
}

#nav li.menu-current li>ul,
#nav li.isopened li>ul {
    display: none;
}

/* Search Box */
#search_box {
    clear: both;
    padding: 5px 0 5px 18px;
    border-bottom: 1px solid #ccc;
}

#search_box .searchstring {
    color: #5c3c92;
    padding: 5px;
    border: 3px solid #5c3c92;
    background-color: #f7f7f7;
    width: 90%;
    font-size: 1rem;
}

#search_box .submitbutton {
    padding: 0 0 0 10px;
    vertical-align: middle;
}

/* Login Box */
#showlogin {
    display: block;
    float: left;
    position: relative;
    width: 30px;
    text-align: left;
    margin: 6px 6px 0 15px;
}

#login-box {
    position: absolute;
    width: 180px;
    left: 20px;
    top: 0;
    padding: 5px;
    font-size: 11px;
}

#login-box .loginsubmit {
    border: 0;
    margin: 10px 10px 0 0
}

#login-box .inputfield {
    width: 80px;
    border: 1px solid #c9e8f9;
    padding: 1px;
}

a.template_edit_link {
    display: block;
    clear: both;
    margin: 40px 0 0 12px;
    width: 16px;
    height: 16px;
    background: transparent url(img/edit.gif) no-repeat;
    text-decoration: none;
}

table.frm-field_table td {
    font-size: 0.9em;
    padding: 8px 2px;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

/* Extra cookie_permission */
#cookie_permission {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9950;
    width: 200px;
    padding: 10px;
    background: #555;
    text-align: center;
    font-size: 0.9em;
    line-height: 120%;
    border-radius: 0 0 0 25px;
    box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.2);
}

#cookie_permission p,
#cookie_permission a {
    color: #fff;
}

#cookie_permission a.cookieaccepted {
    color: #000;
    background: #eeb300;
    display: block;
    padding: 5px;
    border-radius: 15px;
    border: 1px solid #fff;
    font-weight: bold;
}

/* Extra Colorpicker */
#colorpickericon {
    display: block;
    width: 24px;
    height: 24px;
    background: url(img/colorpicker.png) no-repeat;
    z-index: 5000;
    position: absolute;
    top: 200px;
    right: 0;
    cursor: pointer;
}

#colorpicker {
    display: none;
    width: 90px;
    background: #ddd;
    position: absolute;
    top: 100px;
    right: 0;
    z-index: 5000;
    font-size: 12px;
    line-height: 100%;
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);
}

.pickerfield {
    width: 100%;
    height: 40px;
    float: left;
}

.pickerfield input[type="color"] {
    width: 100%;
    height: 20px;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.pickerfield input[type="text"] {
    width: 90%;
    height: 20px;
    padding: 1px 3%;
    border: 1px solid #999;
    cursor: text;
}

a.colpick-button {
    display: block;
    clear: both;
    width: 80%;
    margin: 10px auto;
    padding: 3px;
    background: rgba(255, 255, 255, 0.2);
    text-align: center;
    border: 1px solid #666;
    border-radius: 15px;
    cursor: pointer;
}

#colorpicker-info {
    display: none;
    position: absolute;
    width: 160px;
    padding: 10px;
    top: 0;
    left: -180px;
    background: #eee;
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);
}

/* Smaller Screens */
@media screen and (max-width: 1100px) {

    body,
    html {
        background-image: none;
        background-color: #e9e9e9;
    }

    .mainwrapper {
        background-image: none;
        background-color: #fff;
        width: 100%;
    }

    #mobiletop {
        display: block;
    }

    #leftbox {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 500;
        float: none;
        width: 220px;
        margin: 0 0 0 0;
        box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
        background: #FFFFFF; /* nieuw op 31-01-2020 */
    }

    #leftbox .menubox {
        height: auto;
        min-height: 200px;
        padding-bottom: 40px;
    }

    #leftbox .logo {
        display: none;
    }

    #leftbox.active {
        left: 0;
    }

    .mainbox {
        width: 100%;
    }

    .sliderbox {
        height: auto;
    }

    .sliderbox .flexslider {
        margin: 0 0 0 0;
    }

    .sliderbox .flex-direction-nav {
        display: none;
    }

    #menucheck {
        display: none;
    }

    /* Korrekturen */
    table {
        max-width: 98% !important;
        width: 98% !important;
    }

    td.frm-field_title {
        white-space: normal;
    }
}

/* Smaller Screens */
@media screen and (max-width: 540px) {
    .mainwrapper {
        background-image: none;
    }

    .mainbox,
    .contentbox,
    .widetop,
    .widebottom,
    .sidebar,
    .contentnarrow,
    .contentwide {
        float: none;
        width: 99%;
    }

    table.responsivetable td {
        display: block;
        width: 99% ! important;
        height: auto;
    }

    /* iinenabstaende: */
    .contentbox .contentinner {
        margin: 0 2% 20px 2%;
    }

    .widetop .contentinner {}

    .widebottom .contentinner {}

    .footer .contentinner {
        width: 90%;
    }
}

/* Niet op smartphones */
@media (max-width: 550px) {
    .no-phone {
        display: none;
    }
}

/* Niet op tablets */
@media (min-width: 449px) and (max-width:949px) {
    .no-tablet {
        display: none;
    }
}

.cta a {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    background: #ffffff;
    color: #FFFFFF !important;
    border-radius: 1.56em;
    font-size: 0.9em;
    padding: 0.15em 0.7em 0.15em 0.7em; /* 2 en 8 px */
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    text-decoration: none;
    min-width: 190px;
}

.cta a:hover {
    color: #ffffff !important;
    background-color: #aa0000;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

.copyrightfooter {
    font-size: 12px;
    line-height: 0.9rem;
    color: #ffffff;
    padding-top: 5px;
    text-align: left;
    color: black;
    margin: 12px 0 12px 12px;
    text-align: center;
}

.extra {
    font-size: 13px;
}

.legendakleur a {
    color: #FFFFFF !important;
}

.logolinks {
    padding: 82px 5px 0 5px;
}

.grootlogo {
    padding: 1px 15px 0 15px;
}

.img:hover {
    color: #424242;
    -webkit-transition: all .6s ease-in;
    transition: all .6s ease-in;
    opacity: 1;
    transform: scale(1.50);
    -webkit-transform: scale(1.50);
}

div .label-class {
    background-color: #FFFFFF;
    color: lightgray;
    font-size: 13px;
    padding: 0 0 14px 0 !important;
    font-style: italic;
    float: left;
    margin: 0 10px 15px 0;
}

div .label-classrechts {
    background-color: #FFFFFF;
    color: lightgray;
    font-size: 13px;
    padding: 0 0 14px 0 !important;
    font-style: italic;
    float: right;
    margin: 0 0 15px 10px;
}

.youtube-player {
    position: relative;
    padding-bottom: 56.23%; /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    transition: .4s all;
}

.youtube-player img:hover {
    -webkit-filter: brightness(75%);
}

.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("//i.imgur.com/TxzC70f.png") no-repeat;
    cursor: pointer;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
}

.responsiveVideo {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    max-width: 100%;
}

.responsiveVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    border: none;
}

blockquote {
    padding: 0.7rem;
    display: block;
    margin-block-start: 0.4em !important;
    margin-block-end: 0.4em !important;
    margin-inline-start: 4px !important;
    margin-inline-end: 4px !important;
}

address {
    padding-left: 10px;
}

.menu-top {
    margin-top: 15px;
}

.toelichtingkaart p img:not([class^="pic"]) {
    margin: 1px 5px 1px 0;

}

.toelichtingkaart p {
    font-size: 13px;
    padding-left: 12px;
    color: gray;
    line-height: 15px;
}

/* Code voor de mobiele telefoon */
@media only screen and (min-width: 601px) {
    .hide-on-med-and-up {
        display: none !important;
    }
}

@media only screen and (max-width: 600px) {
    .show-on-med-and-up {
        display: none !important;
    }
	
	/*.contentinner a {letter-spacing: 1.1px;}*/
	strong {font-weight: 400 !important;
	color: #000000;}
	
	p {line-height: 1.4rem;}
}

/* Extra van mezelf */
sup {
    vertical-align: baseline;
    position: relative;
    /* bottom: 0.3em;
    color: #908888; 22 mei 2019 */
    font-size: 0.8rem;
}

sub {
    top: -0.3em;
    color: #908888;
}

sub a,
sup a {
    /* color: #908888 !important; */
    color: #AA0000;

}

.timeline-item {
    padding: 1.6em 0em 0.4em 2em;
    position: relative;
    /* color: rgba(0, 0, 0, 0.7); weg want centraal */
    border-left: 2px solid rgba(0, 0, 0, 0.3);
}

/*
.timeline-item p {
    font-size: 1rem; weg januari 2019
}
*/

.timeline-item::before {
    content: attr(date-is);
    position: absolute;
    left: 1.8em;
    font-weight: bold;
    top: 0.7em; /* was 1 */
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #AA0000;
}

.timeline-item::after {
    width: 10px;
    height: 10px;
    display: block;
    top: 1em;
    position: absolute;
    left: -7px;
    border-radius: 10px;
    content: '';
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: #AA0000;
}

.timeline-item:last-child {
    border-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0.3)), to(transparent)) 1 100%;
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%;
}

.time-line h4 {
    color: #AA0000;
}

.timeline-item h4 {
    padding-top: 10px;
}

a[href^="http://"],
a[href^="https://"] {
    color: #017F01;
    /* text-decoration: none; */
}

/* 
a visited [href^="http://"],
a visited [href^="https://"] {
    color: #4DA54D ;
    text-decoration: none;
    margin: 0;
}

a[href^="http://"]:not([href*="welkominnijmegen.nl"]):after,
a[href^="https://"]:not([href*="welkominnijmegen.nl"]):after {
    content: " (extern)";
    font-size: 10px;   
    vertical-align: top;
    color: darkgray;
} 

a visited[href*="//www.welkominnijmegen.nl/"] {
    color: #cc6666;
    text-decoration: none;
}

a[href*="//www.welkominnijmegen.nl/"] {
    color: #AA0000;
    text-decoration: none;
}


[href$=".pdf"]::after {
    content: " "url("../../../images/iconpdf.gif");
}*/

a[href$=".pdf"] {
    background: url(img/pdficon12.png) no-repeat;
    padding-left: 20px;
}

.legenda {
    margin: 35px 0 0 10px;
    line-height: 1.2;

}

.legenda2 {
    /* voor onder het welkom-logo */
    margin: 35px 0 0 10px;
    line-height: 1.2;
    padding: 70px 0 0 5px;
}

.wb-accordion {
    margin: 1.2em 0 1.2em 0;
}

.accordion-content {
    /*   background-color: #f7f7f7; */
    padding: 0 10px 0 10px;
}

/*
#leftmenu .lev1 {
   font-weight: 600;
}
*/

#leftmenu .lev2 {
    color: #000000;
    /* font-weight: 600; */
}

.circle {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    padding: 3px;
    border-style: solid;
    border-color: FFFFFF;
    font-size: 13px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    background: red;
}

/* Test */
.badge {
    background: radial-gradient(5px -9px, circle, white 8%, red 26px);
    background-color: red;
    border: 2px solid white;
    border-radius: 12px;
    /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px;
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
}

.google-maps {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

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

.meer {
    margin-left: 10px;
}

.nieuwefooter {
    border: 1px solid #aa0000;
    padding: 19px 20px 19px 20px;
    /* background-color: #aa0000; 31-01-2020 */
    /* background-color: #5c3c92; */
    background-color: #5c3c92;
    color: #FFFFFF;
}

.nieuwefooter p {
    font-size: 0.9rem;
    word-spacing: 4px;
    line-height: 1.3;
}

.nieuwefooter a {
    color: white !important;
    border-bottom: 1px dotted rgb(255, 255, 255, 0.99);
}

/* test op pagina kaarten - https://codepen.io/status201/pen/wKowKz - Gebruikt op kaarten, watertappunten */
.map-container {
    width: 100%;
    margin: 20px 0 30px 0;
}

.map-container iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative;
    /* IE needs a position other than static */
}

.map-container iframe.clicked {
    pointer-events: auto;
}

.kader {
    padding: 10px;
    min-height: 120px;
    vertical-align: middle;
    border-style: solid;
    border-color: grey;
    border-width: 1px;
    margin: 12px;
}

img.full-width {
    clear: both;
    display: block;
    margin: 0 0 10px 0;
}

div .caption {
    background: #f5f5f5;
    /* border: 1px solid #ddd; */
    padding: 0 0 0 12px;
    display: inline-block;
    height: auto;
    float: left;
    margin: 0 12px 0 0;

}

div .caption img {
    display: block;
    padding: 0;
    margin: 0;
}

div .caption span {
    display: block;
    font-size: 0.7rem;
    color: #666;
    /* margin-top: 3px; */
    /* padding: 0px 15px; */
}

div .captionleft {
    background: #f5f5f5;
    border: 1px solid #ddd;
    /* 	max-width:100%; */
    display: inline-block;
    height: auto;

}

div .captionleft img {
    display: block;
    padding: 0;
    margin: 0;
    /* max-width:100%; */

}

div .captionleft span {
    display: block;
    font-size: 0.8rem;
    color: #666;
    /* margin-top: 3px; */
    /* padding: 0px 15px; */
}

strong {
    font-weight: 600;
}

.paginagewijzigdopincontent {
    font-size: 0.8rem;
    color: #7f7b7b;
    font-style: italic;
}

.cta {
    background: #D72631;
    color: #FFFFFF !important;
    border-radius: 1.56em;
    /* border: solid #47395C 0.06em; */
    /* font-size: 1.13em; */
    padding: 0.13em 0.5em 0.13em 0.5em; /* 2 en 8 px */
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
}

/*
a.cta:hover {
    position: relative;
    top: -4px;
}
*/

a.cta:hover {
    color: #D72631 !important;
    background-color: #FFFFFF;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
}

/* space between the bar and your content */
#barwrap {
    margin-bottom: 50px;
}

.bar {
    text-align: center;
    background-color: #AA0000;
    /* padding: 20px 0 12px 0; 21-01-2020 */
    /* set it at will according to your message's length in small devices */
    max-height: 100px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    color: #ffffff;
    font-weight: bold;
    border-bottom: thick ridge rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 13px 0.5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 13px 0.5px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 3008;
}

.bar a {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

.breadcrumb {
    font-size: 0.8rem;
    color: #53680C;
    padding-left: 20px;
}

.fas,
.fab {
    font-size: 19px;
}

.fa-shoe-prints {
    font-size: 17px !important;
}

#tweet {
    width: 400px !important;
}

#tweet iframe {
    border: none !important;
    box-shadow: none !important;
}

/* Code voor de mobiele telefoon */
@media only screen and (min-width: 601px) {
    .hide-on-med-and-up {
        display: none !important;
    }
}

@media only screen and (max-width: 600px) {
    .show-on-med-and-up {
        display: none !important;
    }
}