body { background-color :black!important; }
body, h1,h2,h3,h4,h5,h6 { font-family: "Montserrat", sans-serif;position:relative; } /*position relative makes if be on top of images */
.w3-row-padding img { margin-bottom: 12px }
.w3-sidebar { width: 120px; background: #222; }
h1,h2,h3,h4,h5,h6,i,input { position:relative; z-index:1; }
img { max-width:100%; }
#main { margin-left: 115px; }
.w3-jumbo {	font-family: 'Molle', cursive; }
.w3-top, .w3-bottom { z-index:2; }
.mk-heading { 
	font-size:74pt!important;
	line-height:1;
	color:#ff00cc;
	text-shadow:.03em .03em .01em white;
}
.mk-subheading { margin-top:0; line-height:1; margin-top:0;}

.dragButton {
    display: inline-block;
    text-rendering: auto;
	height: 50px;
    width: 50px;
    background-image: url(images/about.png);
    background-size: contain;
    background-position-x:4px;
    background-repeat: no-repeat;
}
.w3-button.w3-black:hover > .dragButton { /*makes user png backgorund image turn black on white when hovering over button */
	filter: invert(1);
}
#main::after {
	content: '';
    background: url(images/main-border-pink-sparkle.png);
    background-position: top left;
    background-size: contain;
    opacity: 0.3;
    height: 250px;
    margin: -10px;
    width: calc(100% + 24px); /*for mobile 12px padding*/
    position: fixed;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 0;
    background-repeat: repeat-x;
    top: 0px;
    pointer-events:none;
    left:-12px;
}
.w3-button, .w3-button i { transition:1s; }
.w3-button:hover > i { transform:scale(1.3,1.3); }

.fadeIn { opacity:0; transition:opacity 1s ease-in-out} /*fade in items of this class */


/* when hovering over image, zoom in but keep image dimensions the same
.hover-img {transition: .5s ease-in-out; }
.hover-img:hover { 
    filter: brightness(150%) sepia(80%); 
    transform: scale(1.03);
}*/
.imgA {
    display:inline-block; 
    overflow:hidden;
    border:2px transparent solid; 
    transition: border .5s ease-in-out;
}
.imgA.fadeIn { transition:opacity 2s ease-in-out, border .5s ease-in-out} 

.imgA:hover {border:2px grey solid;}
.imgA img {transition: transform .5s ease-in-out;}
.imgA img:hover {transform: scale(1.3);}

.txtlinks p {margin:0;}
.txtlinks.fadeIn {transition:opacity 1s ease}
.txtlinks p a {
    display:flex;
    align-items: center; 
    padding:6px 12px 6px 0; 
    border-radius:8px; 
    text-decoration: none; 
    transition: all 1s ease-in-out; 
    box-shadow: inset 0 0 0 0 #000000;
}
.txtlinks p a:hover {box-shadow: inset 400px 0 0 0 #0f0f0f;}

/* font-awesome additions */
.fa-facebook-official {color:#3b5998;}

/*for parallax, html overflow needs to be hidden on the actual page */
.parallax {
    perspective: 20px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.parallax header {
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
    transform-style: preserve-3d;
    z-index:-1;
}
.parallaxBack {
    transform: translateZ(-20px) scale(2);
    object-fit:cover;
    top:0;
}
.parallaxFront {
    transform: translateZ(-10px) scale(1.5);
    object-fit:contain;
    top:25vh;
}
.parallaxTitle {
    position:relative;
    align-self:flex-end;
}
.parallaxBack,
.parallaxFront {
    position: absolute;
    height:100%;
    width:100%;
    z-index:-1;
}
.parallax section {
    background-color:#000;
    padding:0 20px;
}

@media only screen and (max-width: 600px) 
{
	#main {margin-left: 0} /* Remove margins from "page content" on small screens */
	.mk-heading { font-size:40pt!important; }
	header.w3-padding-32 { padding-bottom:0px!important; }
	.w3-text-grey { color:#aaaaaa!important; }
    .not_mobile {display:none;}
    .w3-cell.mobile {display:block;} /* change from display:table-cell to full width */
    .parallaxFront {
        top:10vh;
    }
    .parallaxBack {
        object-position: left;
    }
    .parallaxTitle {
        top:-11vh;
    }
    	
    /* a.w3-black { background-color:white!important; color:black!important; } disabled for new menu below
	.w3-bar .w3-button { white-space:nowrap;width:25%; }
	.w3-bar .w3-bar-item { padding:8px 1px; }*/
    /* Mobile Nav menu originally made by Erik Terwan -------------------------*/
    #menuToggle
    {
        display: block;
        position: relative;
        top: 12px;
        left: 12px;
        
        z-index: 1;
        
        -webkit-user-select: none;
        user-select: none;
    }
    #menuToggle a
    {
        text-decoration: none;
        color: #aaa;
        transition: color 0.3s ease;
    }
    #menuToggle a:hover
    {
        color: fff;
    }
        #menuToggle input
    {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }
    /* Just a quick hamburger */
    #menuToggle span
    {
        display: block;
        width: 32px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        border:1px rgba(0,0,0,.3) solid;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
    }
    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }
    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }
    /* 
    * Transform all the slices of hamburger into a crossmark. */
    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg);
        background: #fff;
    }
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
        #menuToggle input:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg);
    }
    /* * Make this absolute positioned at the top left of the screen */
    #menu
    {
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        background: #333;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 1s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    #menu li
    {
        padding: 5px 0;
        font-size: 22px;
    }
    /* And let's slide it in from the left */
    #menuToggle input:checked ~ ul
    {
        transform: none;
    }
    /* end NAVBAR -------- */
}