/* css document for sa_hamburger toggle w/half menu 
   Author: Shane Anderson
   site: http://www.shanehanderson.com
*/

:root{
	/* vars for hamburger toggle */
	--sa-hamburger-height:35px;
	--sa-hamburger-width:50px;
	
	--sa-hamburger-padding-top_bottom:6px;
	--sa-hamburger-padding-left_right:6px;
	
	--sa-bar-height: 1px;
	--sa-bar-color: #000;
	--sa-bar-active-color: #fff;
	
	--sa-bar-zindex: 1000000;
	/* ------------------------- */
	
	/* vars for hamburger half menu */
	--sa-menu-background: #221D1E;
    --sa-menu-item-color: #B4975A;
    --sa-menu-item-hover-color: #ffffff;
    --sa-menu-image-border:#221D1E;
    
	
	/* ------------------------- */
}

/* hamburger toggle */

.sa_hamburger{ /* sets up initial position and sizing */
	box-sizing: border-box;
	
	position:fixed;
	right:10px;
	top:10px;
	
	width: var(--sa-hamburger-width);
	height:var(--sa-hamburger-height);
	
	cursor:pointer;
	
	z-index: var(--sa-bar-zindex);
}

.sa_ham_wrapper{ /* holds look and feel */
	box-sizing:inherit;
	width:100%;
	height:100%; 
	position:relative;
	
	padding:var(--sa-hamburger-padding-top_bottom) var(--sa-hamburger-padding-left_right);
	
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	
	transition: padding 200ms;
}

.sa_hamburger .sa_ham_wrapper .sa_ham_bar{ /* bar items */
	height:var(--sa-bar-height);
	width:100%;
	
	background-color:var(--sa-bar-color);
	
	transition: opacity 200ms, transform 200ms, background-color 200ms;
}

.sa_hamburger .sa_ham_wrapper .sa_barDup{ /* middle bar item to form 'x' icon when active */
	position: absolute;
	top:calc((var(--sa-hamburger-height)/2) - (var(--sa-bar-height)/2));
	left:var(--sa-hamburger-padding-left_right);
	width:calc(var(--sa-hamburger-width) - var(--sa-hamburger-padding-left_right)*2);
}

/* toggle hover state */
.sa_hamburger:hover .sa_ham_wrapper{
	padding:4px 6px;
}

/* toggle active state */
.sa_hamburger_active .sa_ham_wrapper .sa_ham_bar, .sa_hamburger_active .sa_ham_wrapper .sa_barDup{
	background-color:var(--sa-bar-active-color);
}
.sa_hamburger_active .sa_ham_wrapper .sa_ham_bar:first-child, .sa_hamburger_active .sa_ham_wrapper .sa_ham_bar:last-child{
	opacity:0;
}

.sa_hamburger_active .sa_bar2{
	transform: rotate(45deg);
}

.sa_hamburger_active .sa_barDup{
	transform: rotate(-45deg);
}

/* -------------------------------------- */

.sa_half_menu{
	display:flex;
	justify-content:flex-end;
    position:fixed;
    right:0px;
    top:0px;
	
	box-sizing:border-box;
	overflow-x:hidden;
	
	width:0%;
	height:100%;
    
    transition: width 800ms ease-out;
}

.sa_half_menu_wrapper{
	display:grid;
	grid-template-columns: 1.15fr 2fr;
	box-sizing:border-box;
	width:75vw;
	height:100%;
	
	background:var(--sa-menu-background);
	
	box-shadow: -1px 0px 1px rgba(0,0,0,0.0),
				-2px 0px 2px rgba(0,0,0,0.0),
                -4px 0px 4px rgba(0,0,0,0.0), 
                -8px 0px 8px rgba(0,0,0,0.0),
                -16px 0px 16px rgba(0,0,0,0.0),
				-32px 0px 32px rgba(0,0,0,0.0);
    
    position:absolute;
    top:0px;
    left:100vw;
    
    transition: left 800ms ease-out;
}

.sa_half_menu_item_wrapper{
	display:flex;
	flex-direction:column;
	justify-content:center;
    
    grid-row-start:1;
    grid-column-start:1;

}

.sa_half_menu_item{
    display:flex;
    text-decoration:none;
}

.sa_half_menu_item:hover .sa_item_pointer{
    width:100%;
}

.sa_half_menu_item:hover .sa_item_title{
    color:var(--sa-menu-item-hover-color);
}

.sa_half_menu_item .sa_item_title{
	display:block;
	padding:12px 6px;
	
	font-size:25px;
    letter-spacing:.15em;
	color:var(--sa-menu-item-color);

    text-transform:uppercase;
    transition: color 300ms ease-out;
}

.sa_item_pointer_wrap{
    display:flex;
    align-items:center;
    width:20%;
    margin-right:10px;
}

.sa_item_pointer{
    width:0%;
    height:1px;
    background-color:var(--sa-menu-item-hover-color);
    
    transition: width 300ms ease-out;
}

.sa_half_menu_content{
    width:70%;
    justify-self:end;
    align-self:center;
    padding:30px;
    
    grid-row-start:1;
    grid-column-start:2;
}

.sa_half_menu_images{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "image";
    
    grid-column-start:2;
    grid-column-end:span 2;
    
    grid-row-start:1;
    grid-row-end: span 1;
    
    padding:10%;
}

.sa_half_menu_image{
    grid-area:image;
    border:20px solid var(--sa-menu-image-border);
    box-shadow: 
        0 0px 2.2px rgba(0, 0, 0, 0.2),
        0 0px 5.3px rgba(0, 0, 0, 0.2),
        0 0px 10px rgba(0, 0, 0, 0.2),
        0 0px 17.9px rgba(0, 0, 0, 0.2),
        0 0px 33.4px rgba(0, 0, 0, 0.2),
        0 0px 80px rgba(0, 0, 0, 0.2);
    
    opacity:0;
    
    transition:opacity 300ms ease-out;
}

.sa_half_menu_image img{
    object-fit:cover;
    width:100%;
    height:100%;
}

.sa_half_menu_images_active{
    opacity:1;
}

.sa_hamburger_active ~ .sa_half_menu .sa_half_menu_wrapper{
	box-shadow: -1px 0px 1px rgba(0,0,0,0.12),
				-2px 0px 2px rgba(0,0,0,0.12),
                -4px 0px 4px rgba(0,0,0,0.12), 
                -8px 0px 8px rgba(0,0,0,0.12),
                -16px 0px 16px rgba(0,0,0,0.12),
				-32px 0px 32px rgba(0,0,0,0.12);
    
    left:25vw;
}

.sa_hamburger_active ~ .sa_half_menu{
    width:100%;
}

@media (max-width: 1004px){
    .sa_half_menu_wrapper{
        grid-template-columns:1fr;
        align-items:start;
        padding-top:100px;
        width:100vw;
    }
    
    .sa_half_menu_images{
        display:none;
    }
    
    .sa_half_menu_content{
        display:none;
    }
    
    .sa_hamburger_active ~ .sa_half_menu .sa_half_menu_wrapper{
        left:0vw;
    }
}