html{height: 100%;}

body {
    margin-bottom: 55px;
    transition-property: background-size;
    transition-timing-function: ease-in-out;
    transition-duration: 0s;
}

.mm-block a {
    text-decoration: none!important;
}

.full-screen-height {
    height: 100vh;
}

::-webkit-scrollbar {
    -webkit-appearance: visible;
}

.scale {
    transition-property: all !important;
    transition-timing-function: ease-in-out;
    transition-duration: 2s !important;
}

h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

h2,
h3,
h4,
h5,
h6 {
    margin-top: 20px;
    margin-bottom: 5px;
}

p {
    font-size: 1.8vmin;
}

h1 {
    font-size: 2.8vw;
}

h2 {
    font-size: 2.2vw;
}

h3 {
    font-size: 1.8vw;
}

h4 {
    font-size: 1.5vw;
}

h5 {
    font-size: 1.3vw;
}

h6 {
    font-size: 1.0vw;
}

.main-container.container {
    padding-bottom: 58px;
}

.main-container ul {
    padding-left: 20px;
}

.box-content p.title {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: none !important;
}

.pace .pace-progress {
    height: 0px;
    background: #2299dd;
}

.layout-builder .row {
    overflow: visible;
}

.foto {
    margin-right: auto;
    margin-left: auto;
}

.contextual button,
.contextual ul {
    z-index: 10000;
}

#views-bootstrap-pagina-s-in-linker-blok-block-1 h2 a {
    color: #7A7474;
    font-size: 13px;
}

#views-bootstrap-pagina-s-in-linker-blok-block-1 h2 a:hover {
    color: #ED464E;
}


/* Tijdelijk full width omdat Fluid niet pakt   */

.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
    max-width: 100%;
}

.container,
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    padding-right: 0px;
    padding-left: 0px;
}

.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
    padding: 0px;
}

.col-sm-9 {
    flex: 0 0 100%;
    max-width: 100%;
    margin: auto;
    padding: 0px;
}


/*Modal*/

.popuptekst {
    max-height: 70vh;
    overflow-y: auto;
}


/*Zorgt dat de page niet omhoog scrollt*/


/*Tabs linkerzijde pagina*/

.list-group-item {
    background-color: transparent;
    padding: 0px;
    border: 0px;
}


/* Editie menu balk */


/*.editiebottomblok*/

.editiebottomblok .svg-inline--fa {
    font-size: 45px;
    line-height: 40px;
    color: red;
    padding: 10px;
}

.editiebottomblok a:hover {
    text-decoration: none;
}


/* Ruimte boven footer fix (evert) */

.footer {
    width: 100%;
    position: fixed;
    z-index: 40;
    bottom: -5px;
    padding: 5px !important;
}


/* Editie menu */

.er-push-wrap {
    background-color: white;
    height: 100vh !important;
}

.er-push-menu {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 3000;
}

.er-push-content {
    height: calc(100vh - 225px);
    position: relative;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 2000;
    margin-top: 225px;
}

#cbp-spmenu-s1 .tab-content {
    overflow-x: hidden;
}

#cbp-spmenu-s1 .closeclass {
    float: right;
    padding: 20px;
}

.cbp-spmenu .nav {
    border-bottom: 2px solid black;
    padding-bottom: 25px;
    padding-left: 10px;
    margin-bottom: 18px;
    line-height: 40px;
}

.cbp-spmenu .nav-tabs li a {
    border: solid 2px black;
    border-radius: 10px;
    padding: 5px 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-decoration: none;
    color: black;
}

.linkertabs ul li a.active,
.cbp-spmenu .nav .cbp-spmenu .nav-tabs li a:hover {
    border: solid 2px red;
    border-radius: 10px;
    padding: 5px 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-decoration: none;
    color: black;
}

.linkertabs li,
.linkertabs li a {
    font-size: 1rem;
}

.nav-tabs {
    border: none;
}

.closeclass,
.closeclass2 {
    cursor: pointer;
}

.tab-content {
    max-height: 100vh;
    overflow-y: auto;
}

.tab-content .row {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.tab-pane {
    height: 100% !important;
}

#editielijst ul li {
    display: inline-block;
}

#editielijst ul li:hover,
#editielijst ul li a:hover {
    text-decoration: none;
    color: green;
}

.region-sidebar-first1 h2,
.region-sidebar-first1 h2 a,
.region-sidebar-first1 h2 a:hover {
    margin-bottom: 20px;
    color: red;
    width: auto;
    text-decoration: none;
    font-size: 22px;
}

.region-sidebar-first1 li h2 {
    color: black;
}

.region-sidebar-first1 li h2:hover,
.region-sidebar-first1 li .current h2 {
    color: red;
}

#block-views-block-linkerblok-pagina-s-new-block-1 {
    display: block;
    float: left;
    height: 100%;
}

#block-views-block-linkerblok-pagina-s-new-block-1 h2 {
    position: relative;
    left: 44px;
}

#block-menublockinoverlayblock h2 {
    position: relative;
    left: 22px;
}

#block-views-block-linkerblok-pagina-s-new-block-1 .col-titel h2 {
    position: relative;
    left: 0px;
}

#block-menublockinoverlayblock .row-pages.animated.fadeInUp {
    padding: 4px 0px;
}

.overlay-page-menu-spacerdiv {
    height: 6rem;
    width: 100%;    
    display: block;
    float: left;
    position: relative;
}

#block-views-block-kiosk-homepage-new-block-2 {
    padding: 0px 0px 20px 20px;
}

.kiosk-informatie {
    float: left;
}

.kiosk-tekst {
    width: 100vw;
}

.kiosk-informatie p {
    padding: 20px;
}

#block-menublockinoverlayblock .col-titel h2 {
    position: relative;
    left: 0px;
    margin-top: 0;
    margin-bottom: 10px;
}

#block-menublockinoverlayblock .view-content {
    padding-bottom: 3rem;
}

.region-sidebar-first2 .views-field-title h3 {
    margin-top: 12px;
    margin-bottom: 12px;
    font-weight: normal !important;
    font-size: 16px !important;
    color: black;
}

.region-sidebar-first2 .views-field-title a:hover {
    text-decoration: none;
}

.region-sidebar-first2 .view-edities {
    position: relative;
    left: 44px;
    display: block;
    width: 90%;
    top: 21px;
}

#menu2 #block-searchform {
    width: 90%;
    margin: auto;
    padding: 2%;
}

#menu2 .btn-primary,
#menu4 #block-webform .btn-primary {
    color: #fff;
    background-color: red;
    border-color: red;
    text-align: center;
}

#menu4 #block-webform .btn-primary {
    padding-left: 15px;
}

.editiegrid {
    width: 29%;
    margin-right: 4%;
    float: left;
    min-height: 225px;
}

.editiegrid img {
    width: 100%;
    height: auto;
}

.region-sidebar-first3 #block-ajaxsearchblock h2 {
    font-size: 22px;
}

.region-sidebar-first3 div#ajax-search-box {
    position: relative;
    left: 44px;
    padding-top: 10px;
    height: 70px;
}

.region-sidebar-first3 div#ajax-search-box>div {
    display: inline-block;
    position: relative;
    padding-top: 10px;
    width: 80%;
}

.region-sidebar-first3 input#ajax-search-input {
    max-width: 100%;
    width: 100%;
}

.region-sidebar-first3 .view-empty {
    padding-left: 44px;
}

.region-sidebar-first4 h2,
.region-sidebar-first3 h2,
#block-views-block-edities-block-1 h2,
#editielijst .view-header h2 {
    position: relative;
    margin-bottom: 22px;
    font-size: 22px;
}

.region-sidebar-first3 h2,
.region-sidebar-first4 h2 {
    padding-left: 22px;
}

.region-sidebar-first2 h2 {
    margin-bottom: 24px;
}

.region-sidebar-first5 {
    padding-left: 44px;
    padding-top: 16px;
}

.region-sidebar-first5 h2 {
    width: auto;
    margin-left: -22px;
    margin-top: -15px;
    font-size: 22px;
}

#block-prevnextpager {
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%);
    bottom: 17px;
    font-weight: bold;
    letter-spacing: -1px;
    width: 10%;
    min-width: 120px;
}

.grey-pager {
    color: #b9b9b9;
}

#block-prevnextpager a {
    font-size: 23px;
    position: relative;
    top: 2px;
    padding: 3px;
}

.social-sharing-buttons p,
a {
    color: black;
}


/* Niet gebruikt? */

.view-linkerblok-pagina-s span a {
    color: black;
    font-size: 20px;
    text-decoration: none;
    top: -10px;
    position: relative;
}

.col-img img {
    max-width: 250px;
    height: auto;
    width: 100%;
}

.col-nr {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.col-titel {
    max-width: 50vw;
    width: 300px !important;
}

.col-img,
.col-nr,
.col-titel {
    float: left;
}

.row-pages {
    width: 100%;
    margin-bottom: 20px;
    display: block;
    float: left;
    left: 20px;
    position: relative;
}

.pagalllinks {
    width: 100%;
}

.sub1,
.sub1:hover {
    margin-top: -30px;
    text-decoration: none;
    color: black;
}

.col-nr .nummer {
    border: red solid 2px;    
    padding: 3px 0px;
    border-radius: 10px;
    line-height: 20px;
    vertical-align: middle;
    font-weight: bold;
    color: black;
    width: 3em;
    text-align: center;
}

.tab-content .row .col-nr {
    text-align: center;
}

.col-nr .nummer {
    color: black;
}

.current .row-pages .nummer,
.row-pages:hover .nummer {
    color: white;
}

div#avaiable-pages li.search-item {
    background-color: transparent;
}

.menulogo.onder {
    margin-bottom: 3px;
    margin-right: 3px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    float: right;
    display: block;
}

.menulogo.boven {
    background-repeat: no-repeat;
    background-size: auto 80px;
    width: 95%;
    height: 140px;
    background-position: 20px 20px;
}

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

.social-sharing-buttons {
    left: 20px;
    position: relative;
}

#showLeftPush {
    left: 110px;
    position: relative;
}

#menu4 #block-webform {
    width: 90%;
    left: 44px;
    position: relative;
    top: 17px;
}

#block-views-block-editie-inhoud-block-1 {
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 120px;
}


/* Dashboard   */

.view-header h1 {
    text-align: center;
}

.view-alle-edities-tabellijst- table,
.view-alle-pagina-s table {
    width: 80%;
    margin: auto;
}

.view-alle-edities-tabellijst- .odd,
.view-alle-pagina-s .odd {
    background: #f2f2f2;
}

.view-alle-edities-tabellijst- table th,
.view-alle-pagina-s table th {
    padding: 15px 10px;
    background: #6102FF;
    color: white;
}

.view-alle-edities-tabellijst- table th a,
.view-alle-pagina-s table th a {
    color: white;
}

.view-alle-edities-tabellijst- table td,
.view-alle-pagina-s table td {
    padding: 15px 10px;
}

#block-logomagzmaker {
    position: absolute;
    left: 0px;
    width: 200px;
    z-index: 1000;
}

#block-mainnavigation {
    position: absolute;
    left: 0px;
    width: 100%;
}


/* hover effecten */


/* mega menu */

.tb-megamenu {
    background: #f2f2f2 !important;
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 6px;
    z-index: 1;
}

.responsive-menu-toggle-icon::before,
.responsive-menu-toggle-icon::after,
.responsive-menu-toggle-icon span.icon {
    background: #6102FF !important;
}

.anonymous .region-header {
    display: none;
}

.tb-megamenu .nav>li>a,
.tb-megamenu .nav>li>span.tb-megamenu-no-link {
    padding: 9px;
    font-size: 14px;
    color: #333;
}

#block-mmbootstrap-local-tasks {
    position: absolute !important;
}

#block-mmbootstrap-local-tasks .tabs {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 503;
    text-shadow: 1px 1px black;
    background: #f2f2f2;
}

#block-mmbootstrap-local-tasks .tabs-primary {
    margin: 0;
}

#block-mmbootstrap-local-tasks .nav-link.active,
#block-mmbootstrap-local-tasks .nav-item:hover {
    background: lightblue;
}

#block-mmbootstrap-local-tasks .nav-tabs .nav-link {
    border: 0px solid transparent;
}

.node-page-edit-form {
    background: white;
    width: 80%;
    margin: auto;
    padding: 20px;
    opacity: 0.9;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border: none;
}

#block-mmbootstrap-local-tasks .tabs li a {
    color: white;
}

#node-page-replicate-form {
    background: white;
    padding: 10px;
    width: 80%;
    margin: auto;
    margin-top: auto;
    margin-top: 60px;
}


.block-image-2 {
    display: none!important;
}

.image-block-wrap:hover .block-image-1 {
    display: none!important;
}

.image-block-wrap:hover .block-image-2 {
    display: block!important;
}

/* Code bg   */

#bgcode {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0px;
    min-width: 100%;
    left: 0;
}

#bgcode2 {
    position: fixed;
    top: 200px;
    right: 200px;
    float: right;
}

#bgcode h1 {
    position: relative;
    z-index: 1;
    display: block;
}

.textblock_over {
    color: white;
    padding: 40px;
}

.textblock_over a {
    background-color: white;
}


.mm-text-block .media-library-item__name,
.mm-text-block .media-library-item__attributes {
    display: none;
}

drupal-media .field__item img {
    width: 100%!;
    height: auto!important;
}

.mm-text-block .field__item img {
    width: 100%;
    height: auto!important;
}

.mm-text-block .field__item .media-ckeditor img {
    width: 220px!important;
    height: auto!important;
    padding-top: 6px;
}


.mm-text-block .field__item article.align-left .field--type-image {
    margin-right: 16px;
    margin-bottom: 16px;
}

.mm-text-block .field__item article.align-right .field--type-image {
    margin-left: 16px;
    margin-bottom: 16px;
}




/* added for when caption is on */
.mm-text-block .field__item figure.align-left {
    margin-right: 16px;
    margin-bottom: 16px;
}

.mm-text-block .field__item figure.align-right {
    margin-left: 16px;
    margin-bottom: 16px;
}




#showBottom {
    position: fixed;
    right: 15px;
    top: 15px;
    padding: 5px;
    z-index: 10000000000;
}

#showBottom:hover {
    background: white;
}

#showBottom.active {
    background: lime;
}

#botmenu {
    width: 100%;
}


/* Documentation   */

#views-bootstrap-documentatie-mmpro-page-1 .views-field-nothing {
    border: #2b92d4 solid 1px;
    padding: 10px;
    height: 98%;
    padding-bottom: 30px !important;
}

#views-bootstrap-documentatie-mmpro-page-1 .fontawesome-icon {
    font-size: 40px !important;
    text-align: center;
    color: #2b92d4;
    padding: 5px !important
}

#views-bootstrap-documentatie-mmpro-page-1 .views-field-title {
    font-size: 40px;
    text-align: center;
    color: #2b92d4;
    height: 50px;
}

#views-bootstrap-documentatie-mmpro-page-1 .field-content {
    width: 100%;
    display: block;
    text-align: center;
}

.page-node-type-documentatie h1 {
    font-size: 40px;
    text-align: center;
    color: #2b92d4 !important;
    font-family: roboto, arial, tahoma !important;
    padding: 25px;
}

.page-node-type-documentatie article {
    background: #f2f2f2;
    padding: 40px;
}

.page-node-type-documentatie .fontawesome-icon {
    font-size: 70px !important;
    text-align: right;
    color: #2b92d4;
    float: right;
}

.page-node-type-documentatie img {
    max-width: 80%;
}

H3.animation-title {
    font-weight: bold;
}

.toolbar-icon-toolbar-menu-docenvb {
    background: lime;
}

.toolbar-icon-toolbar-menu-docenvb {
    animation: blinker 2s linear infinite;
    background: lime;
}

@keyframes blinker {
    50% {
        opacity: 0.5;
    }
}


/*Editie */

.group_border_1 {
    border: solid 1px #2b92d4;
    padding: 10px;
    margin: 15px;
    background: #f2f2f2;
}

#node-editie-edit-form label {
    color: #2b92d4;
    font-weight: bold;
}

.page-node-type-editie .accordion-item {
    background: #2b92d4;
    color: white;
    padding: 10px;
}

.page-node-type-editie .accordion-item a {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.page-node-type-editie .vertical-tabs,
.page-node-type-page .vertical-tabs {
    display: none;
}

.block-superfishmain h2 {
    font-size: 10px;
}

#superfish-main {
    background: orange;
}

.sf-depth-2 {
    background: orange;
}

#edit-field-h1-font-size-wrapper,
#edit-field-h2-font-size-wrapper,
#edit-field-h3-font-size-wrapper,
#edit-field-h4-font-size-wrapper,
#edit-field-h5-font-size-wrapper,
#edit-field-h6-font-size-wrapper {
    width: 20%;
}


/*Pagina's linkerblok hamburger en kruis */

a.menu-btn {
    font-size: 30px;
    text-align: center;
    display: block;
}

.menuonder_control {
    width: 250px;
}

.logomenu {
    float: left;
}

.menuonder_control_A {
    float: left;
    width: 50px;
    height: 50px;
}

.menuonder_control_B {
    float: left;
    width: 50px;
    height: 50px;
}

.menuonder_control_C {
    float: left;
    width: 50px;
    height: 50px;
}

.menuonder_control_D {
    float: left;
    width: 50px;
    height: 50px;
}

.menuonder_control2 {
    width: 100px;
    float: right;
}

.menuonder_control_2A,
.menuonder_control_2B {
    display: inline-block;
    float: left;
    width: 50px;
    text-align: center;
}

a.close_but {
    float: right;
    padding: 20px;
}


/*Pagina's linkerblok Quicktabs */

.pushy-content .nav-tabs {
    border-bottom: 2px solid;
    padding-bottom: 30px;
    margin-bottom: 30px;
    margin-top: 40px !important;
}

.pushy-content .nav-tabs>li.active>a,
.pushy-content .nav-tabs>li.active>a:hover,
.pushy-content .nav-tabs>li.active>a:focus {
    color: #424242;
    cursor: default;
    background-color: #fff;
    border: 0px;
    border: 3px solid #EC464D;
    border-radius: 10px;
    padding: 5px 10px;
}

.pushy-content .nav>li>a {
    position: relative;
    display: block;
    border: 3px solid #fff;
    border-radius: 10px;
    padding: 5px 10px;
    margin-right: 20px;
}

.pushy-content .nav-tabs a {
    color: #424242;
}

.pushy-content .nav>li>a:hover,
.pushy-content .nav>li>a:focus {
    text-decoration: none;
    color: #424242;
    border: 3px solid #EC464D;
    border-radius: 10px;
    padding: 5px 10px;
    background-color: transparent;
}


/*Pagina's linkerblok 3 kolommen */

.view-pagina-s-in-linker-blok .view-header h2,
.view-id-edities .view-header h2 {
    font-size: 18px !important;
    margin-bottom: 30px;
}

.paglink_total {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    padding-bottom: 20px;
}

.paglink_total:hover .paglink_kol3 h2 a {
    color: #EC464D !important;
}

.paglink_total:hover .paglink_kol2 .pagelink_content {
    background: #EC464D;
    color: white;
}

.paglink_kol1 {
    width: 33%;
    float: left;
}

.paglink_kol2 {
    width: 17%;
    float: left;
}

.paglink_kol2 .pagelink_content {
    color: #424242;
    border: 3px solid #EC464D;
    border-radius: 10px;
    padding: 5px 10px;
    display: inline-block;
    margin: 0px 30%;
    float: none;
    width: 40%;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    font-weight: bold;
}

.paglink_kol3 {
    width: 50%;
    float: left;
}

.paglink_kol3 .pagelink_content {
    color: #000;
}

.paglink_kol3 .pagelink_content h2 {
    margin: 0px;
}

.paglink_kol3 .pagelink_content h2 a {
    color: #424242;
    text-decoration: none;
    vertical-align: middle;
    line-height: 20px;
    font-weight: bold;
    font-size: 14px;
    padding-left: 20px;
}

.hideclass {
    display: none;
}


/* buttons */

a:hover {
    text-decoration: none;
}

.button-nobackground {
    background: none;
}

.icon1 {
    display: inline-block;
}

.icon2 {
    display: inline-block;
}


/*Bootstrap aanpassing, padding tussen de elementen verwijderd*/


/*bootstrap cols even hoog*/

.row [class*="volhoog"] {
    margin-bottom: -99999px !important;
    padding-bottom: 99999px !important;
}

.row [class*="nietvolhoog"] {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.row {
    overflow: hidden;
}

.col-xl,
.col-xl-auto,
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-lg,
.col-lg-auto,
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-md,
.col-md-auto,
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-sm,
.col-sm-auto,
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col,
.col-auto,
.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
    position: relative;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-content {
    padding: 0px;
}

.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
    padding: 0px;
}

.row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

section {
    background-size: 100%;
}


/*horizontale pagina*/

.slide_hor {
    width: 100vw;
    height: 100vh;
}

.wrapper_hor {
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}

.outer-wrapper_hor {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


/* kiosk */

.kioskitem.kioskitem {
    width: 90%;
    padding: 5%;
}

.kioskitem img {
    width: 100%;
    height: auto;
}

.kioskitem h3 a {
    color: black;
    font-size: 20px;
}

.views-field-field-menu-logo-boven {
    border-bottom: 1px solid black;
    padding: 20px;
    background: white;
    position: fixed;
    width: 100%;
    z-index: 1;
}

.page-node-type-kiosk_informatie {
    overflow-y: scroll;
}

.view-display-id-attachment_2 {
    padding-top: 2rem;
    padding-left: 20px;
}

.view-display-id-attachment_2 p {
    font-size: 18px;
    color: #777777;
}

h2.kiosktitel {
    font-size: 22px;
}

.page-node-type-kiosk_informatie .view-edities .attachment-before {
    top: 120px;
    position: relative;
    margin-bottom: 120px;
}

.page-node-type-kiosk_informatie .editiegrid-2 img {
    display: block;
    width: 90%;
    margin: auto;
}

.page-node-type-kiosk_informatie h3 {
    font-size: 18px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    width: 90%;
    margin: auto;
}

ul.quicktabs-tabs {
    position: fixed;
    right: 0px;
    top: 25px;
    padding: 20px;
    z-index: 2;
}

.editie_bodytxt {
    padding: 20px;
}

.view-kiosk-logo .views-field-body {
    padding: 20px;
}

.page-node-114 h2 {
    padding: 50px;
    text-align: center;
}

.page-node-114 .editiebottomblok {
    display: none;
}

#bgvid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    visibility: visible;
}

.layout-builder__section[aria-label="background video"] {
    visibility: hidden;
    height: 1px;
    margin-bottom: 0px;
}

.editiebottomblok .menu_buttons {
    float: left;
    font-size: 30px;
    margin-top: 2px;
}


/*tijdelijk : Titel boven masonry image */

.demo p {
    text-align: center;
    font-family: Merriweather;
    font-size: 14px;
    margin-bottom: 4px;
}

.hidden-load {
    opacity: 0;
}

.hidden-load.animated {
    opacity: 1;
}


/* vertical center video/image 

.er-vertical-middle {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
*/


/* slick slider right arrow hack */

.slick-prev:before,
.slick-next:before,
.slick-prev:after,
.slick-next:after {
    font-size: 50px;
}

.slick-dots li button:before,
.slick-dots li button:after {
    font-size: 15px;
    margin-left: 5px;
    margin-right: 5px;
}

.slick-next {
    right: 50px;
    z-index: 100;
    text-shadow: 2px 2px 4px #000000;
}

.slick-prev {
    left: 25px;
    z-index: 101;
    text-shadow: 2px 2px 4px #000000;
}

.mm-block p.slick-slider-text {
    margin-top: 5px;
    text-align: center;
    font-size: 1.4vmin;
    font-style: italic;
}

ul.slick-dots {
    padding-left: 0px;
}

.slick-dots {
    margin-left: -5.5px;
}

.lightbox-image {
    max-width: 96vw;
}

.er-video {
    opacity: 0;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-in;
}

video,
iframe {
    max-width: 100%!important;
}

.slick-slide-container {
    display: none;
}

#block-views-block-kioskstart-block-1 .view-content {
    padding: 20px;
    width: 50%;
    float: left;
    margin-top: 20px;
}

#block-views-block-kiosk-homepage-new-block-1>div>div>div.view-content {
    padding: 20px;
    width: 50%;
    float: left;
    margin-top: 20px;
    margin-bottom: 2rem;
}

#block-views-block-kiosk-homepage-new-block-1 .attachment.attachment-after {
    padding: 20px;
    width: 50%;
    float: right;
    margin-top: 20px;
}

.page-node-118 .region-content {}

.view-kioskstart {
    position: relative;
    top: 150px;
    width: 100%;
    display: contents;
    float: left;
}

.kioskbeschrijving {
    width: 89%;
}

.kiosktitel {
    padding-top: 10px;
    padding-bottom: 10px;
}

.kioskklein {
    padding-right: 10px;
    padding-left: 10px;
}

.kioskklein img,
.kioskgroot img {
    width: 100%;
    height: auto;
}

.kiosktitel2 {
    padding-left: 0px;
    display: block;
    float: left;
    width: 100%;
    font-size: 18px;
    padding: 10px;
}

.kiosktitel2 a {
    color: black;
}

.kiosktitel3 {
    display: block;
    float: left;
    width: 100%;
    font-size: 18px;
    padding: 2px 10px 30px 0px;
}

.kiosktitel3 a {
    color: black;
}

#kioskheader {
    padding: 20px;
    border-bottom: solid 1px;
}

.kioskmenu {
    float: right;
}

.kioskmenu li a {
    border: solid 2px black;
    border-radius: 10px;
    padding: 5px 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-decoration: none;
    color: black;
}

.delay1 {
    animation-delay: 100ms;
}

.delay2 {
    animation-delay: 200ms;
}

.delay3 {
    animation-delay: 300ms;
}

.delay4 {
    animation-delay: 400ms;
}

.delay5 {
    animation-delay: 500ms;
}

.delay6 {
    animation-delay: 600ms;
}

.delay7 {
    animation-delay: 700ms;
}

.delay8 {
    animation-delay: 800ms;
}

.delay9 {
    animation-delay: 900ms;
}

.delay10 {
    animation-delay: 1000ms;
}

.delay11 {
    animation-delay: 1100ms;
}

.delay12 {
    animation-delay: 1200ms;
}

.delay13 {
    animation-delay: 1300ms;
}

.delay14 {
    animation-delay: 1400ms;
}

.delay15 {
    animation-delay: 1500ms;
}

.delay16 {
    animation-delay: 1600ms;
}

.delay17 {
    animation-delay: 1700ms;
}

.delay18 {
    animation-delay: 1800ms;
}

.delay19 {
    animation-delay: 1900ms;
}

.delay20 {
    animation-delay: 2000ms;
}

.extlink {
    text-decoration: none!important;
}

.extlink i,
.extlink svg {
    display: none;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

/* ===== Scrollbar CSS ===== */


/* Firefox */

* {
    scrollbar-width: auto;
    scrollbar-color: #cccccc #ffffff;
}


/* Chrome, Edge, and Safari */

*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 10px;
    border: 3px solid #ffffff;
}


/* Uitschakelen tabs in overlay */


/* END Uitschakelen tabs in overlay */

#block-views-block-linkerblok-pagina-s-new-block-1-2 h2 {
    left: 39px;
    position: relative;
}

#block-views-block-linkerblok-pagina-s-new-block-1-2 .col-titel h2 {
    left: 0px;
    position: relative;
}

.contextual-region {
    position: inherit!important;
}

#block-preview {
    display: block;
    position: fixed !important;
    top: 4.1rem;
    right: 18rem;
    z-index: 500;
}

#previewButton {
    background-color: #6300ff !important;
    color: white !important;
    font-size: 13px;
    padding: 8px 2rem 8px 2rem;
    border-radius: 32px !important;
    border-style: none;
}


#showhideURL {
    background-color: black;
    padding: 8px;
}

#showhideURL li {
    color: white;
    font-size: 14px;
}


/* hamburger menu

https://codepen.io/alvarotrigo/pen/MWEJEWG

(via https://alvarotrigo.com/blog/hamburger-menu-css/)
*/

.top-nav {
    /*display: flex;
    flex-direction: row;*/
    align-items: center;
    justify-content: space-between;
    background-color: #00BAF0;
    /*background: linear-gradient(to left, #f46b45, #eea849);*/
    background: linear-gradient(to right, #6300FF, #0068FF);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #FFF;
    height: 50px;
    padding: 1em;
}

.menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.main-container .top-nav ul {
    padding-left: 0px;
}

.top-nav ul.menu {
    margin-left: 0;
    /*    padding: 0;
    list-style: none outside;
    text-align: left;*/
}

.menu>li {
    margin: 0;
    /* 1rem */
    overflow: hidden;
}

.menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu-toggle {
    display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
}

.menu-button::before {
    content: '';
    margin-top: -8px;
}

.menu-button::after {
    content: '';
    margin-top: 8px;
}

#menu-toggle:checked+.menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#menu-toggle:checked+.menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked+.menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}

@media (max-width: 1300px) {
    .menu-button-container {
        display: flex;
    }
    .menu {
        position: absolute;
        top: 0;
        margin-top: 50px;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    #menu-toggle~.menu>li {
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked~.menu>li {
        border: 1px solid #333;
        height: auto;
        padding: 0.5em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .menu>li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0.5em 0;
        width: 100%;
        color: white;
        /*background-color: #6300ff;*/
        background: linear-gradient(to right, #6300FF, #0068FF);
        /*
        background-image: -webkit-gradient(linear, left bottom, right top, from(#38438b), color-stop(#944b94), color-stop(#d75a88), color-stop(#ff7e71), color-stop(#ffb25f), to(#ffeb68));
        background-image: -webkit-linear-gradient(left bottom, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);
        background-image: -o-linear-gradient(left bottom, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);
        background-image: linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);*/
    }
    .menu>li:not(:last-child) {
        border-bottom: 0px solid #444;
    }
}

strong{
    font-weight: bold !important;
}

.media-library-widget-modal {
    width: 75vw!important;
    max-width: 75vw!important;
}

input[value="Update widget"] {
    display: none;
}

.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
    position: relative;
}


.main-container .mm-block button.slick-arrow{
 font-size:0!important;
}

.main-container .mm-block .slick-dots li button {
 font-size:0!important;
}




.ajax-progress.ajax-progress-fullscreen {
    /*background-color: rgba(0,0,0,.6);*/
    /*background-color: rgba(255,20,147,.6);*/
    background-color: rgba(38, 7, 99,.6);
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300000;
      top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


/* zoeken autocomplete in overlay */

.search-api-autocomplete-search {
    z-index: 300000;
}


/*
.view-id-search_view_2.view-display-id-block_1 {
    padding: 0px 8px;
}
*/


input#edit-submit-search-view-2 {
    padding-left: 20px;
}




#block-views-block-node-block-search-view-block-1 {
    padding-left: 44px;
}

#block-views-block-search-view-2-block-1{
    padding-left: 44px;
}

#block-views-block-search-view-2-block-1 h2{
	padding-left: 0px;
}

#block-views-block-search-view-2-block-1 input[type=submit]{
    padding-left: 20px;
    line-height: 37px;
}

.views-field.views-field-search-api-excerpt {
    padding-bottom: 20px;
}

.page-node-type-error_page {
    padding-top: 6rem;
    overflow: hidden;
}

.page-node-type-error_page .field--type-image {
    margin-top: 4rem;
    margin-bottom: 10rem;
    margin-left: auto;
    margin-right: auto;
}

.page-node-type-error_page h1 {        
    font-size: 32px;
    color: #0591e8;
    margin-bottom: 4rem;
}

.page-node-type-error_page a {
    font-size: 16px;
    color: #555555;
    font-weight: 400;
}

.page-node-type-error_page a:hover {
    font-weight: 500;
}

.page-node-type-error_page img {    
    width: 200px!important;
    height: auto!important;    
}


/**
 * @file
 * Contains minimal layout styling for the media library.
 */

 .media-library-wrapper {
    display: flex;
}

.media-library-menu {
    flex-basis: 20%;
    flex-shrink: 0;
}

.media-library-content {
    flex-grow: 1;
}

.media-library-views-form {
    display: flex;
    flex-wrap: wrap;
}

.media-library-views-form .media-library-item {
    justify-content: space-between;
    max-width: 23%;
    margin: 1%;
}


/**
 * @file media-library.css

 * Styling for Media Library.
 */

.media-library-wrapper {
    display: flex;
    margin: -1em;
}

.media.media--view-mode-media-library {
    display: block;
}

/**
   * @todo Reuse or build on vertical tabs styling for the media library menu.
   *   https://www.drupal.org/project/drupal/issues/3023767
   */

.media-library-menu {
    display: block;
    width: 600px;
    max-width: 20%;
    margin: 0;
    /* LTR */
    padding: 0;
    border-bottom: 1px solid #ccc;
    background-color: #e6e5e1;
    line-height: 1;
}

[dir="rtl"] .media-library-menu {
    margin: 0;
}


/**
   * @todo Use a class instead of the li element.
   *   https://www.drupal.org/project/drupal/issues/3029227
   */

.media-library-menu li {
    display: block;
    padding: 0;
    list-style: none;
}

.media-library-menu__link {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 15px;
    text-decoration: none;
    border-bottom: 1px solid #b3b2ad;
    background-color: #f2f2f0;
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
}

.media-library-menu__link:active,
.media-library-menu__link:hover,
.media-library-menu__link:focus {
    background: #fcfcfa;
    text-shadow: none;
}

.media-library-menu__link:focus,
.media-library-menu__link:active {
    outline: none;
}

.media-library-menu__link.active {
    z-index: 1;
    margin-right: -1px;
    /* LTR */
    color: #000;
    border-right: 1px solid #fcfcfa;
    /* LTR */
    border-bottom: 1px solid #b3b2ad;
    background-color: #fff;
    box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
}

[dir="rtl"] .media-library-menu__link.active {
    margin-right: 0;
    margin-left: -1px;
    border-right: 0;
    border-left: 1px solid #fcfcfa;
}

.media-library-content {
    width: 100%;
    padding: 1em;
    border-left: 1px solid #b3b2ad;
    /* LTR */
    outline: none;
}

[dir="rtl"] .media-library-content {
    border-right: 1px solid #b3b2ad;
    border-left: 0;
}


/* Generic media add form styles. */

.media-library-add-form--without-input .form-item {
    margin: 0 0 1em;
}


/**
   * Remove outline from added media list.
   *
   * The added media list receives focus after adding new media, but since it is
   * not an interactive element, it does not need an outline.
   */

.media-library-add-form__added-media {
    margin: 0;
    padding: 0;
    outline: none;
}

.media-library-add-form__input-wrapper {
    padding: 16px;
    border: 1px solid #bfbfbf;
    border-radius: 2px;
    background: #fcfcfa;
}


/* Style the media add upload form. */

.media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
    margin-bottom: 0;
}

.media-library-add-form .file-upload-help {
    margin: 8px 0 0;
}


/* Style the media add oEmbed form. */

.media-library-add-form--oembed .media-library-add-form__input-wrapper {
    display: flex;
}

@media screen and (max-width: 37.5em) {
    .media-library-add-form--oembed .media-library-add-form__input-wrapper {
        display: block;
    }
}

.media-library-add-form--oembed.media-library-add-form--without-input .form-item-url {
    margin-bottom: 0;
}

.media-library-add-form-oembed-url {
    width: 100%;
}


/**
   * @todo Remove .button when styles are moved to the seven theme in
   *   https://www.drupal.org/project/drupal/issues/2980769
   */

.button.media-library-add-form-oembed-submit {
    align-self: center;
}


/* Media add form selection styles. */

.media-library-add-form__selected-media {
    margin-top: 1em;
}


/* Change to padding to account for the negative margin for flex grid. */

.media-library-add-form__selected-media .details-wrapper {
    padding: 0 10px 1em 10px;
}

.media-library-add-form__selected-media .media-library-item .field--name-thumbnail img {
    height: 100px;
}

.media-library-item span {
    display: block;
}


/* Generic media library view styles. */

.media-library-select-all {
    flex-basis: 100%;
    width: 25%;
    margin: 10px 8px;
}

.media-library-select-all input {
    margin-right: 10px;
}

[dir="rtl"] .media-library-select-all input {
    margin-left: 10px;
}

.media-library-views-form,
.media-library-selection,
.media-library-add-form__selected-media .details-wrapper,
.media-library-views-form__bulk_form,
.media-library-view .form--inline {
    display: flex;
    flex-wrap: wrap;
}

.media-library-views-form>.form-actions {
    flex-basis: 100%;
}

.media-library-views-form #edit-header {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.media-library-views-form__header {
    flex-basis: 100%;
}

.media-library-views-form__header .form-item {
    margin-right: 8px;
}

.media-library-views-form__rows {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin: 0 -8px;
}

.media-library-view .form-actions {
    align-self: flex-end;
    margin: 0.75em 0;
}

@media screen and (max-width: 600px) {
    .media-library-view .form-actions {
        flex-basis: 100%;
    }
}

.media-library-view .media-library-view--form-actions {
    clear: left;
    align-self: flex-end;
    margin: 0.75em 0;
}


/**
   * Override the table display of the visually hidden labels.
   *
   * The width, height and overflow properties in the styles for the
   * .visually-hidden class do not work correctly if the element has a table
   * display.
   */

.media-library-item label {
    display: inline-block;
}


/* Media library widget view styles. */

.media-library-wrapper .media-library-view {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.media-library-wrapper .view-header {
    align-self: flex-end;
    margin: 1em 0;
    text-align: right;
    /* LTR */
}

[dir="rtl"] .media-library-wrapper .view-header {
    text-align: left;
}

.media-library-wrapper .media-library-view .view-content {
    flex: 0 0 100%;
}

.media-library-wrapper .views-display-link {
    margin: 0;
    padding-left: 22px;
    /* LTR */
    color: #333;
    font-size: 15px;
    line-height: 16px;
}

[dir="rtl"] .media-library-wrapper .views-display-link {
    padding-right: 22px;
    padding-left: 0;
}

.media-library-wrapper .views-display-link.is-active {
    font-weight: bold;
}

.media-library-wrapper .views-display-link-widget {
    margin-right: 15px;
    background: url(../../../../misc/icons/333333/grid.svg) left 0 no-repeat;
    /* LTR */
}

[dir="rtl"] .media-library-wrapper .views-display-link-widget {
    background-position: right 0;
}

.media-library-wrapper .views-display-link-widget_table {
    background: url(../../../../misc/icons/333333/table.svg) left 0 no-repeat;
    /* LTR */
}

[dir="rtl"] .media-library-wrapper .views-display-link-widget_table {
    background-position: right 0;
}


/**
   * Style the media library grid items.
   */

.media-library-item {
    position: relative;
}


/**
  * The media library item container receives screen reader focus when items are
  * removed. Since it is not an interactive element, it does not need an
  * outline.
  */

.media-library-item--grid {
    justify-content: center;
    box-sizing: border-box;
    width: 50%;
    padding: 14px;
    vertical-align: top;
    outline: none;
    background: #fff;
}

.media-library-item--grid:before {
    position: absolute;
    top: 7px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    content: "";
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    pointer-events: none;
    border: 1px solid #dbdbdb;
}


/* Media library widget weight field styles. */

.media-library-item--grid .form-item {
    margin: 0.75em;
}


/* The selected items in the add form should be shown a bit smaller. */

.media-library-add-form__selected-media .media-library-item--small {
    width: 33.3%;
}

.media-library-widget-modal .ui-dialog-buttonpane {
    align-items: center;
}

.media-library-widget-modal .ui-dialog-buttonpane .form-actions {
    flex: 1;
}


/**
   * By default, the dialog is too narrow to be usable.
   * @see Drupal.ckeditor.openDialog()
   */

.ui-dialog--narrow.media-library-widget-modal {
    max-width: 75%;
}

@media screen and (min-width: 45em) {
    .media-library-item--grid {
        width: 25%;
    }
    /* Change the width for the modal and widget since there is less space. */
    .media-library-widget-modal .media-library-item--grid,
    .media-library-selection .media-library-item--grid {
        width: 50%;
    }
    /* The selected items in the add form should be shown a bit smaller. */
    .media-library-add-form__selected-media .media-library-item--small {
        width: 25%;
    }
}

@media screen and (min-width: 60em) {
    .media-library-item--grid {
        width: 25%;
    }
    /* Change the width for the modal and widget since there is less space. */
    .media-library-widget-modal .media-library-item--grid,
    .media-library-selection .media-library-item--grid {
        width: 33.3%;
    }
    /* The selected items in the add form should be shown a bit smaller. */
    .media-library-add-form__selected-media .media-library-item--small {
        width: 16.6%;
    }
}

@media screen and (min-width: 77em) {
    .media-library-item--grid {
        width: 25%;
    }
    /* Change the width for the modal and widget since there is less space. */
    .media-library-widget-modal .media-library-item--grid,
    .media-library-selection .media-library-item--grid {
        width: 25%;
    }
    /* The selected items in the add form should be shown a bit smaller. */
    .media-library-add-form__selected-media .media-library-item--small {
        width: 16.6%;
    }
}

.media-library-item--grid .field--name-thumbnail {
    overflow: hidden;
    text-align: center;
    background-color: #ebebeb;
}

.media-library-item--grid .field--name-thumbnail img {
    height: 180px;
    object-fit: contain;
    object-position: center center;
}

.media-library-item--grid.is-hover:before,
.media-library-item--grid.checked:before,
.media-library-item--grid.is-focus:before {
    top: 5px;
    border-width: 3px;
    border-color: #40b6ff;
    border-radius: 3px;
}

.media-library-item--grid.checked:before {
    border-color: #0076c0;
}

.media-library-item__click-to-select-checkbox {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    /* LTR */
    display: block;
}

[dir="rtl"] .media-library-item__click-to-select-checkbox {
    right: 16px;
    left: auto;
}

.media-library-item__click-to-select-checkbox input {
    width: 20px;
    height: 20px;
}

.media-library-item__click-to-select-checkbox .form-item {
    margin: 0;
}

.media-library-item__click-to-select-trigger {
    overflow: hidden;
    height: 100%;
    cursor: pointer;
}


/* Media library item table styles. */

.media-library-item--table img {
    max-width: 100px;
    height: auto;
}


/* Media library entity view display styles. */

.media-library-item__preview {
    padding-bottom: 34px;
}

.field--widget-media-library-widget .media-library-item__preview {
    cursor: move;
}

.field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
    cursor: inherit;
}

.media-library-item__status {
    position: absolute;
    top: 40px;
    left: 5px;
    /* LTR */
    padding: 5px 10px;
    pointer-events: none;
    color: #e4e4e4;
    background: #666;
    font-size: 12px;
    font-style: italic;
}

[dir="rtl"] .media-library-item__status {
    right: 5px;
    left: auto;
}

.media-library-item__name {
    font-size: 12px;
}

.media-library-item__name {
    display: block;
    overflow: hidden;
    margin: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.media-library-item__attributes:hover .media-library-item__name,
.media-library-item--grid.is-focus .media-library-item__name,
.media-library-item--grid.checked .media-library-item__name {
    white-space: normal;
}

.media-library-item__type {
    color: #696969;
    font-size: 12px;
}

.media-library-item--disabled {
    pointer-events: none;
    opacity: 0.5;
}


/* Media library widget styles. */

.media-library-widget {
    position: relative;
}


/**
   * @todo Change to .media-library-open-button when styles are moved to the
   *   seven theme in https://www.drupal.org/project/drupal/issues/2980769
   */

.button.media-library-open-button {
    margin-bottom: 1em;
    margin-left: 0;
    /* LTR */
}

[dir="rtl"] .button.media-library-open-button {
    margin-right: 0;
    margin-left: 1em;
}

.media-library-widget__toggle-weight {
    position: absolute;
    top: 5px;
    right: 5px;
    /* LTR */
}

[dir="rtl"] .media-library-widget__toggle-weight {
    right: auto;
    left: 5px;
}


/* Add negative margin for flex grid. */

.media-library-selection {
    margin: 1em -8px;
}


/**
   * Media library widget edit and delete button styles.
   *
   * We have to override the .button styles since buttons make heavy use of
   * background and border property changes.
   */

.media-library-item__edit,
.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
    position: absolute;
    z-index: 1;
    top: 10px;
    overflow: hidden;
    width: 21px;
    height: 21px;
    margin: 5px;
    padding: 0;
    transition: 0.2s border-color;
    color: transparent;
    border: 2px solid #ccc;
    border-radius: 20px;
    background-size: 13px;
    text-shadow: none;
    font-size: 0;
}

.media-library-item__edit {
    right: 40px;
    /* LTR */
}

[dir="rtl"] .media-library-item__edit {
    right: auto;
    left: 40px;
}

.media-library-item__remove {
    right: 10px;
    /* LTR */
}

[dir="rtl"] .media-library-item__remove {
    right: auto;
    left: 10px;
}

.media-library-item__edit {
    background: url("../../../../misc/icons/787878/pencil.svg") #fff center no-repeat;
    background-size: 13px;
}

.media-library-item__remove,
.media-library-item__remove.button,
.media-library-item__remove.button:first-child,
.media-library-item__remove.button:disabled,
.media-library-item__remove.button:disabled:active,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
    background: url("../../../../misc/icons/787878/ex.svg") #fff center no-repeat;
    background-size: 13px;
}

.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove:hover,
.media-library-item__remove:focus,
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus,
.media-library-item__remove.button:disabled:active {
    border-color: #40b6ff;
}

#field_background_media_page-media-library-wrapper legend span,
.fieldset-legend {
    font-size: 16px;
    font-weight: 600;
    color: #0591e8;
}

.media-library-views-form .views-field-media-library-select-form > span {
    display: block;    
    background-color: #0591e8;
    overflow: hidden;
}

hr {
  margin-top: 0;
  margin-bottom: 0;
}

.media-ckeditor img{
	width: 220px;
	height: auto;
}


/* for media image with caption in ckeditor */
figure.caption-drupal-media article.media--type-image {
    width: 100% !important;
}

.cke_widget_element .media {
    min-width: auto;
    display: block;
}


/* plyr ios hack */
/*@supports (-webkit-touch-callout: none) {*/
  /* CSS specific to iOS devices */ 

/*  .plyr__poster{*/
    /* z-index: -1 !important; */
    /* display: none; */
/*	}*/
/*}*/