/*
        Theme Name: DakuDaman
    Theme URI: https://www.dakudaman.nl
    Description: Thema gemaakt voor Dakudaman.nl.
    Version: 1.0
    Author: Peter/Decius
*/

@font-face {
    font-family: electroHarmonix;
    src: url(font/electroharmonix.woff);
}

body,html{
    background:#000;
    color:#fff;
    width:100%;
    height:100%;
    overflow:hidden;
} 

a{
    color:inherit;
    text-decoration:none;
}

#menu_opened_overlay{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:2;
    background: rgba(0,0,0,0.75);
    opacity:0;
    transition:opacity 0.5s;
    pointer-events: none;

}#menu_opened_overlay.opened{
    opacity:1;
}

#main-loading{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:5000;
    background:#262626;
    transition:opacity 1s;
}
#main-loading #pulsing-logo{
    background-image: url(img/main_load/logo.png);
    /*    background-size:200px;*/
    height:200px;
    width:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-100px;
    cursor: pointer;
    opacity:0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}#main-loading span{
    height:250px;
    width:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-75px;
    text-align:center;
    line-height: 450px;
    font-family: electroHarmonix;
    font-weight:300;
    font-size:30px;
    cursor: pointer;
    transition:opacity 0.5s;
}
#main-loading #pulsing-logo.pulsing{
    /*    -webkit-animation: heartbeat 1.2s infinite;
        animation: heartbeat 1.2s infinite;*/
    opacity:1;
}
/* HEARTBEAT ANIMATION BY Mi1o */
@-webkit-keyframes heartbeat {
    0% { -webkit-transform: scale(1); }
    8% { -webkit-transform: scale(0.95);  }
    17% { -webkit-transform: scale(1.05); }
    25% { -webkit-transform: scale(0.95); }
    87.5% { -webkit-transform: scale(0.95); }
    100%  { -webkit-transform: scale(1); }
}
@keyframes heartbeat {
    0% { transform: scale(1); }
    8% { transform: scale(0.95);  }
    17% { transform: scale(1.05); }
    25% { transform: scale(0.95); }
    87.5% { transform: scale(0.95); }
    100%  { transform: scale(1); }
}

.box {
    -webkit-animation: rotation 2s infinite; 
    -webkit-animation-iteration-count: 1; 
    animation: rotation 2s infinite; 
    animation-iteration-count: 1; 
    opacity:0;
}

@-webkit-keyframes rotation {
    0%{
        opacity:1;
    }
    40%{
        -webkit-transform: rotate(-20deg) scale(1.2);
        opacity:1;
    }
    90%{
        opacity:0;
    }
    100%{
        -webkit-transform: rotate(1800deg) scale(0);
        opacity:0;
    }
}
@keyframes rotation {
    0%{
        opacity:1;
    }
    40%{
        transform: rotate(-20deg) scale(1.2);
        opacity:1;
    }
    90%{
        opacity:0;
    }
    100%{
        transform: rotate(1800deg) scale(0);
        opacity:0;
    }
}
/* MAIN MENU */
ul.main-menu{
    font-family: electroHarmonix;
    position:fixed;
    bottom:0;
    padding:0;
    left:0;
    transition:bottom 0.6s, transform 0.6s;
    transform: translateY(0%);
    margin:0;
    z-index:3;
}
ul.main-menu.opening{
    bottom:50%;
    transform: translateY(50%);
}
ul.main-menu li{
    margin-top:10px;
    left:-100%;
    box-sizing:border-box;
    position:relative;
}

ul.main-menu li a{
    background:#fff;
    padding: 25px;
    display:block;
    width:220px;
    color:#000;
    text-decoration:none;
}
ul.main-menu li a.main-link-opening{
    transition: margin 0.25s;
}
ul.main-menu li a.main-link-opening.menu-item-margin:hover{
    margin-left:15px !important;
}

.flicker-menu{
    animation: flicker-menu 0.2s infinite;
    animation-iteration-count: 4; 
}
@keyframes flicker-menu{
    0%{
        background:#fff;
    }
    49%{
        background:#fff;
    }
    50%{
        background:#18A699;
    }
    100%{
        background:#18A699;
    }

}

ul.main-menu li.current-menu-item a{
    background:#18A699;
}ul.main-menu li.current-menu-item a:after{
    content:'';
    height:100%;
    width:50px;
    position:absolute;
    right:0;
    top:0;
}
/*burger in menu item */
ul.main-menu li a .fa-bars{
    width:0;
    max-height:0;
    transition:max-height 0.25s,width 0.25s;
    overflow:hidden;
}
ul.main-menu li a.main-link-opening .fa-bars,
ul.main-menu.busy li.current-menu-item a .fa-bars,
ul.main-menu.opened li.current-menu-item a .fa-bars
{
    width:0 !important;
    max-height:0 !important;
}
ul.main-menu li.current-menu-item a .fa-bars{
    width:12px;
    max-height:12px;
}
ul.main-menu li a{

}
#topbar{
    height:200px;
}
#content{
    position: fixed;
    width: calc(95% - 250px);
    top: 5%;
    bottom: 5%;
    right: 5%;
    z-index:1;
    overflow:hidden;
}#content-inner{
    position:absolute;
    top:100px;
    bottom:0;
    left:0;
    right:0;
    -webkit-overflow-scrolling: touch;
    overflow-y:auto;
    margin-right:-20px;
}

/*stapel*/
.tp-grid{
    padding:0;
    margin-top:50px;
}
.tp-grid li {

    box-sizing: border-box;
}
.stapel-list li{
    padding:0;
}
.button{
    font-family: electroHarmonix;
    background:#fff;
    padding: 10px;
    display:inline-block;
    color:#000;
}
.slide_top_anim {
    overflow-y: hidden;
    max-height: 50px;
    height: 50px;
    transition-property: all,padding;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    box-sizing: content-box;
}
.slide_top_anim.closed {
    max-height: 0;
    padding:0;
}

.topbar-back-button{
    height:50px; 
    line-height:25px;
    display:inline-block;
    cursor:pointer;
}
.simplebar-scrollbar {
    background: white;
    opacity:1;
}
.desktop{
    visibility:visible;
    opacity:1;
}
.mobile{
    visibility:hidden;
    opacity:0;
    display:none;
}

#aapl-spining-logo{
    background-image: url(img/main_load/logo-60.png);
    height:60px;
    width:60px;
    background-size:60px;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}
@-webkit-keyframes spin{
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin{
    100% { -moz-transform: rotate(360deg); }
}
@keyframes spin{
    100% { transform: rotate(360deg); }
}
.simplebar-track.horizontal{
    display:none !important;
}
.tp-title span{
    font-family: electroHarmonix;
    font-weight: 300;
}
#aapl-loading-page{
    position:fixed;
    left:auto;
    right:15px;
    bottom:15px;
    width:60px;
    height:60px;
    margin-left:-140px;
}
.tp-part{
    overflow:hidden;
    position:relative;
}
.tp-part .gallery_youtube_vid{
    position:absolute;
    right:4px;
    bottom:-3px;
    font-size:35px;
}

.wpcf7{
    width:367px;
}
.wpcf7 label{
    width: 100%;
}
.wpcf7 input,.wpcf7 textarea{
    background:transparent;
    border:3px solid #fff;
    width: 100%;

}
.wpcf7 .submit_button_wpcf7{
    background:#18A699;
    position:relative;
    border:3px solid #fff;
    display:inline-block;
    height:40px;
}

.wpcf7 .submit_button_wpcf7:after{
    content:"\f1d8";
    font:normal normal normal 22px/1 FontAwesome;
    left:0;
    right:0;
    bottom:0;
    top:0;
    position:absolute;
    pointer-events:none;
    line-height:35px;
    text-align:center;
    transition:all 0.5s;
}
.wpcf7 .submit_button_wpcf7:hover:after{
    background:rgba(255,255,255,0.25);
}

.wpcf7 input[type="submit"]{
    color:transparent;
    border:0;
    padding:5px;
    width:100%;
    height:100%;
}
.wpcf7-response-output{
    display:none;
}
@media all and (min-width:1600px){
    body #content p{
        font-size:20px;
    }
}
@media all and (max-width:480px){
    #main-loading #pulsing-logo{
        background-image: url(img/main_load/logo_x2.png);
        background-size:200px;
    }
    .tp-grid li img{
        max-height:180px !important;
        max-width:200px;
    }
    .main-menu.mobile{
        top:-5px;
        bottom:auto;
    }
    ul.main-menu li {
        margin:0;
        margin-top: 5px;
        line-height:0;
        left:0;
    }
    ul.main-menu li a {
        background: #fff;
        padding: 15px;
        display: block;
        width: 200px;
        height: 50px;
        line-height: 20px;
    }
    #content{
        left: 5%;
        width: 90%;
        top:calc(45px + 5%);
        overflow:auto;
        -webkit-overflow-scrolling: touch;
        overflow-x:hidden;

    }
    .topbar{
        width: 200px;
        text-align: right;
        position: absolute;
        top: 0; 
        right: 0;
        z-index:2;
    }
    .topbar h1{
        margin-bottom:0px;
        margin-top:0;
        display:none
    }
    .topbar h3{
        margin-top: 0px;
        display:none

    }
    .topbar-back-button{
        width:100%;
    }
    #content-inner {
        top: 0;
        overflow:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling: touch;
        width:100%;
    }
    .tp-grid li{
        max-width: 250px;
    }
    .desktop{
        visibility: hidden;
        opacity: 0;
    }
    .mobile{
        visibility: visible;
        opacity:1;
        display:inherit;
    }

    #aapl-loading-page{
        margin-left:0;
        margin-left:-30px;
        display:none;

    }
    .button {
        padding: 15px;
        width: 100%;
        line-height: 20px;
        height: 63px;
    }
    .wpcf7{
        width:300px;
        margin:0 auto !important;
    }
    .wpcf7 textarea{
        height: 150px;
    }
    .wpcf7 label{
        position:relative;
    }
    .wpcf7-form-control-wrap{
        position:static;
    }
    span.wpcf7-not-valid-tip{
        position:absolute;
        top:0;
        right:0;
        color:#e06969;
    }
    .wpcf7-response-output{
        display:none !important;
    }
    .war_soundy_audio_control{
        top:auto !important;
        bottom:35px !important;
    }
}