/*
	In order to be abe to use :hover on the menu, 
	Got to bring in a parent div over the hamburger; set it menu_wrap, position absolute;
	Then hamburger is relative to the wrapper, so move the hamburger offsets to the wrapper
	
		
*/

body { 
	font-family: 'Aptos', 'Avenir', 'Arial', sans-serif;
	font-weight:400;
}
ul 	{ margin:0; padding:0; }
p 	{ margin-block-end:1.5em;}

div.header {margin:100px;}
header { 
    margin: 0;
    padding: 0;
    margin-top: 100px; 
}
	/* prevent the line elements wrapping */
header .theline {
	width:400px; 
}

section {
	width:500px;
	margin-top:50px; 
	margin-left:100px; 
	line-height: 2.2em;
}

div.bottom_spacer{
	margin-bottom:600px; 
}

/* =======   MENU POSITIONING ========== */
nav#topline {
    display: block;
    position: fixed;
    top: 0px;
    right: 0px;  left: 0px;
  
	height:60px;
	/*border:1px solid red; */
    z-index: 98;
}
div#menu_wrap { 
	position:absolute;
	top:25px;
	right:25px;
	width:40px; height:40px;
	/*border:1px solid blue; */
}

div#hamburger {
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    width: 28px;
    height: 28px;
    text-indent: -9999px;
    border-radius: 100%;
    /* margin-top: 25px;    margin-right: 25px; */
	
    background-color: #000;
    z-index: 101;
    border: 3px solid transparent;
    outline: none; 
}

div#hamburger a {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    
    outline: none;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAVCAYAAADID4fUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5NjQ1NjhiMS01MTU3LTRhNGMtYjVjNS1mNTM4M2ZmYjIwMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjE5RDdBNzQwMDU3MTFFNDhCOTVDQTM2NTY4QTQ5RDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjE5RDdBNzMwMDU3MTFFNDhCOTVDQTM2NTY4QTQ5RDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1YmJmMWEyZC0yMTk1LTQwN2MtODFjYS1jZTMzYjAwNThmYmMiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplMmU2NTc0MC00ODcwLTExNzctOWQwZi1lYTRlZTViZTc1NDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz57tFh6AAAAQklEQVR42mL8DwQMAwyYGAYBGBSOYAFioYF2BOMgSBKjaWLUEVhzx2hhNVpYjRZWo44glDAFB0PCHC2sBo0jAAIMAMLXD1V9r1XiAAAAAElFTkSuQmCC) no-repeat;
    background-size: 15px 11px;
    background-position: center center;
    transition-property: all;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    -ms-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    -o-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
}

div#menu_wrap:hover  ul#dropdown {
	display:block;
	 transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}
	

nav ul#dropdown {
    transform: translate3d(350px, 0, 0);
    -moz-transform: translate3d(350px, 0, 0);
    -webkit-transform: translate3d(350px, 0, 0);
    position: fixed;
    right: 0px;    top: 0px;    bottom: 0px;			/* <<<< Extends it all the way down */
    text-align: right;
    display: block;
	width: 200px; 
    list-style-type: none;
    background-color: #fff;
    border-left: 1px solid #f0f0f0;
    padding-right: 30px;
    padding-top: 70px;
    padding-left: 10px;
    z-index: 100;
    margin-right: 0px;
    transition-property: all;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.155, 0.605, 0.18, 1);
    -webkit-transition-timing-function: cubic-bezier(0.155, 0.605, 0.18, 1.055);
    -moz-transition-timing-function: cubic-bezier(0.155, 0.605, 0.18, 1.055);
    -o-transition-timing-function: cubic-bezier(0.155, 0.605, 0.18, 1.055);
    /* transition-timing-function: cubic-bezier(0.155, 0.605, 0.18, 1.055); */
}

nav ul#dropdown li {
	padding:10px 0;	
}
ul.services{}
ul.services li{ margin-left:1em; 
	padding-bottom: 20px; 
}
ul.services div.comment {
	margin-top: 10px;
	font-style: italic;
}

/* ====================================== */
div.title { 
	width: 50vw; 
	margin:0 auto; 
}

div#theline {
	position:relative;
	left:-40px; 
}
	/* css for the "swoosh" line */
div.segment{
	position:relative;
	display:inline-block;
	height:4px; 
	border-bottom:4px solid #ccc; 	
}
div.segment.part1{ 	width:300px; }

div.segment.part2{ 	width:20px; 
	transform:rotate(-10deg) translate(20px)  ; 
}
div.segment.part3{	width:16px; 
	transform: rotate(-20deg) translate(40px)   ; 
}
div.segment.part4{ 	width:12px; 
	transform: rotate(-30deg) translate(60px)   ; 
}
div.segment.part5{ 	width:8px; 
	transform: rotate(-40deg) translate(80px)   ; 
}
/* ====================================== */
p#footer{
	width:300px; margin: 0 auto; padding: 10px; 	
}

/*=============================================

  MEDIA QUERIES 
	picture sources are in base.html <header>
	min-width: 500px - overrides for phones held horizontally
	min-width: 750px - overrides for ipads held vertically
	min-width: 1000px - overrides for ipads held horizontally
	min-width: 1250px - overrides for laptops and desktops

	mobile 	320-480px
	tablets 481-768px
	laptops 769-1024px
	desktops 1025-1200 and more

================================================*/

	/* basic width is 500px; */
@media screen and (width <= 768px ) { 
	body, 
	section { font-size: 1.3em; 
		width:700px; }
	
	
		/* base dims are 28px; */
	div#hamburger { 
		width: 48px; 
		height:48px;
	}
		/* base dims are 28px; backgrnd 15px 11px; */
	div#hamburger a{
		width: 48px; 
		height:48px;
		background-size:30px 22px;		
	}
	nav ul#dropdown {
		width:120px; 
		text-align: left;
	}
		
		
	
}