body, html {padding:0; margin:0;font-family: "Open Sans"; height: 100%; width:100%;  white-space: nowrap; 
    background: #1c1c1c; color: white;
/*
    -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
    -moz-user-select: none; -ms-user-select: none; user-select: none;
*/
}

h1 {font-size:13px; color:dimgrey;}
a:link, a:visited, a:active {text-decoration: none; color: dimgrey; transition: .25s}
ul {list-style: none;}
.invisible {display:none !important;}

/*--------------------------HOMEPAGE-------------------------*/
#bgDiv {position: fixed; left:0px; top: 0px; height:100%; animation: enter 1.5s forwards; }
.bgHolder {position: absolute; left:0px; top: 0px; opacity:0; }
.bgHolder img {display:block;}
#bgShield {position:fixed; width:100%; height:100%; opacity:0;}

#mobileMenu {display:none;}
#menubar {position:fixed; display:inline-block; left:0px; height:100%; z-index: 9;
    width: 300px;
}
#menuBG {position: absolute;  opacity:0; width: 100%; height:100%; padding:0px;margin:0px;
     background: rgba(10,10,10,.30);}

#siteTitle {opacity:0; letter-spacing: 6px; font-weight: 100; padding:5%; animation: enter .5s forwards; position:relative; 
    font-size: 14px;}
#siteTitle:hover {cursor: pointer;}
@keyframes enter {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#menu {position: absolute;opacity:0; padding:0px;margin:0px; white-space: nowrap; 
    width:100%; height:90%; outline:0px solid red;overflow: auto;}

#menuList {padding-left:5%; margin: 0px; }
#menuList > li { vertical-align: middle; background: none; transition: .25s;
    padding: 3%; }
#menuList > li > span, #aboutLI, #blogLI {margin:0px;}
#menuList > li > span:hover, #aboutLI:hover, #blogLI:hover {cursor:pointer;
    color:dimgrey;
}

#menuList > li > ul {display:none; padding-left:5%; margin-top:2px; min-height:30px;}
#menuList > li.expanded > span {display:none;}
#menuList > li.expanded > ul {display:block;padding:0px; min-height:0px;}
#menuList > li.expanded > ul li {padding-left: 0px !important;}
#menuList > li > ul li {padding: 
    2%;
}
#menuList > li > ul li span:hover {cursor:pointer;
color:dimgrey;}
#menuList > li > ul li span:active {color:skyblue;}
.prj {font-size: 12px;}
.cat, #aboutLI span, #blogLI span, .pagcat  {font-size: 12px; }
.urlName {display:none;}
#copyright {margin-left: 3%; margin-top:50px; padding-left:5%; font-size:12px;}

#barSettings {padding:5px; background:white; color:black; font-size:12px;}
.clickedLI {color:#D1A700;}
.deleteFolder {position:relative; margin-top:0px; padding:0px; font-size:15px; border:0px;}
.deleteFolder:hover {color:red; background:none;}
.editFolder {position:relative; margin-top:0px; padding:0px; font-size:15px; border:0px;}
.editFolder:hover {color:green; background:none;}
#btn_saveSiteSettings {margin:5px; padding:10px; font-size:16px; background:green; color:white; cursor:pointer; border: 0px;}
#btn_deleteSiteSettings {margin:5px; padding:10px; font-size:16px; background:red; color:white; cursor:pointer; border: 0px;}
#addFolder {margin:5px; padding:10px; font-size:16px; background:goldenrod; color:white; cursor:pointer; border: 0px;}
#btn_saveSiteSettings:hover, #btn_deleteSiteSettings:hover, #addFolder:hover {background-color: cyan;}
button[type="submit"] {background:#0db2ff; color:white; padding:10px; border:0px; cursor:pointer;}

/*-------------------------PROJECTS------------------*/
#dropArea {position: relative; display:inline-block; white-space: normal; padding-left: 15px; vertical-align:top;
    left:300px;}
.photosLoading {animation: loadingAnimation 1s infinite ease-in; padding:25px;}
.imageGrid {display:inline-flex; flex-direction: row; flex-wrap: wrap; align-items:flex-start; align-content:flex-start; padding:0px; min-height:200px;
}
.imageGrid2 {display:inline-flex; flex-direction: column; align-items:flex-start; align-content:flex-start; padding:0px; min-height:200px; 
}
.imageGrid li, .imageGrid2 li {position:relative;}
.photos {display:block;}
.columnPack {display:flex; flex-direction: row; j}

/*.photos {vertical-align: middle;}*/

.thumbnailShield {position:absolute; display: inline-block; }
.thumbnailShield:hover {cursor:pointer;}

.category {position:absolute; width:100%; height:100%; }
.project {position:absolute;width:100%; height:100%; }
.projectHeader { margin:0px; display:inline-block; padding-top:15px;
    font-size: 14px;}
.caption {position: relative;margin:0px; margin-top:5px;
    font-size: 12px;}
.photoName {background:none; border:0px;  font-size:10px; position:absolute; bottom:0px; color: white}
.photoName + span {position:absolute; font-size:10px; bottom:0px; right:12%;}

#about, #blog {width:100%; height:100%; padding:1%; font-size:15px; }
.blogEntry {margin-bottom:50px; font-family: "Helvetica"; letter-spacing: normal;}
.blogHeader {font-size:18px; font-weight:800;}
.blogEntryBody {font-size:15px;}
.blogPic + label:hover {cursor:copy;}

.settingsTable {table-layout: fixed;}
.settingsTable tr td:nth-of-type(2) {width:500px;}
.gridSpacing, .imageDimension {width:50px;}
.saveSettings {margin:5px; padding:10px; font-size:20px; background:green; color:white; cursor:pointer; border: 0px;}
.deleteSettings {margin:5px; padding:10px; font-size:20px; background:red; color:white; cursor:pointer; border: 0px;}
.toDelete {outline: 4px solid red;}
.hover {outline: 4px dashed green; }
.projectName, .nicknameLabel {display:none;}

/*---------------------------pageCategory--------------------------*/
.pageCategory ul {margin-left:0px; padding-left:0px;}
.pageCategory li {display:inline-block; cursor:pointer; vertical-align: top; transition:.2s;}
.pageCategory li:hover {color:dimgrey;}
/*.pageCategory li:hover > div::before {position:absolute; content:"→"; background:rgba(255,255,255,.5); font-size:50px; width:50px; height:50px; color:dimgrey;}*/
.pageCategory li > span {font-size: 12px;}

/*--------------------FULL SCREEN IMAGES-------------------*/
#imageNavigator {position: fixed; top: 0px; left:0px; width:100%; height:100%; background: #1c1c1c; display:none; z-index:10;}
#FullImageDiv {display:flex; justify-content: center; align-items: center; text-align: center; width:100vw; height:100vh; box-sizing: border-box;}
#shield {position:fixed; width:100%; height:100%; z-index:12;}
#FullImageDiv img {}

#leftarea {position:fixed; left:0%; top:0px; width:20%; height:100%; background: none; z-index:12; opacity:0; transition: .2s;}
#rightarea {position:fixed; right:0%; top:0px; width:20%; height:100%; background: none; z-index:12; opacity:0; transition: .2s;}
#rightarea:hover, #leftarea:hover {opacity:1;}
#leftbutton {position:absolute; top:40%; left:-5%; width:35%;
    color:darkgrey; background: none; border: 0px solid red; font-size:50px; transition: color .5s;}
#rightbutton {position:absolute; top:40%; right:-5%; width:35%;
    background: none; border: 0px solid red; font-size:50px; transition: color .5s;
    color:darkgrey;}
#closebutton {
    position:fixed; top:1%; right:1%; opacity: 1;
    font-size:35px;  color:darkgrey; background: none; border: 0px; 
    transition: color .5s;  z-index:20;
   }
#leftbutton:hover, #rightbutton:hover,#closebutton:hover  {color:skyblue; cursor:pointer;}
#leftbutton:active, #rightbutton:active, #closebutton:active {color:deepskyblue; transition: .2s;}

#bufferZone {display:none;}

/*--------------------------------FUNCTIONALITY----------------*/
#loginPane {position: fixed; display:none; justify-content: center; align-items: center; color:white; top:0%;
    width:100%; height:100%; background:rgba(0,0,0,.8); z-index:100;}
#loginPane input {height:20px; margin:10px; border-radius: 5px;}

#loading {position: fixed; display:none; justify-content: center; align-items: center; color:white; top:0%; font-size:27px; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:12;}
#loading span {  animation: loadingAnimation 1s infinite ease-in; }
#statusArea {position:fixed; display:none; color:white; background:rgba(67,117,45,.8); top: 0px; margin:5px; padding:5px; right:5px; font-size:20px; border:5px; border-radius:6px; text-align: center; min-width:25%; center; z-index:10;}

#imageLoading {position: fixed;  z-index:9; display:flex; justify-content: center; align-items: center; top:0px; width:100%; height:100%;  background:none;}
#imageLoader {
    border: 10px solid #f3f3f3; /* back */
    border-top: 10px solid #3498db; /* fore */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes loadingAnimation { 
    0% {opacity: .2;} 
    50% {opacity: 1;} 
    100% {opacity: .2;} 
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*--------------------------------GENERAL ELEMENTS----------------*/
button {outline: none; background:none; border:1px solid dimgray; font-size:15px; border-radius: 5px; color:dimgray;
    transition: .2s;}
button:hover {background:goldenrod; color:white;}
button:active {background:deepskyblue; color:white;}
textarea {vertical-align: top; width:90%; min-height:100px; margin-bottom:2px; resize: vertical;}
form {display:inline-block;}




/************************-----------------------MOBILE------------------------**********************/
@media screen and (max-device-width: 720px) {


#mobileMenu{position:fixed; font-size:25px; display:inline-block; right:0px; z-index:10;
       background: rgba(10,10,10,.30); padding:2%;text-align: right; }
#mobileMenu div {display:inline-block; font-size:10px; margin-top:-5px;vertical-align: middle;}
/*    home--------------*/


#menubar {display:none; left:0px; height:100%; z-index: 9; background: rgba(10,10,10,.9); width: 100vw;}
#menuBG {display:none; position: absolute;  opacity:1; width: 100%; height:100%; padding:0px;margin:0px;}
    
#menu {position: absolute;opacity:1; padding:0px;margin:0px; white-space: nowrap; 
    width:100%; height:90%; outline:0px solid red;overflow: auto;}

#menuList {padding-left:2%; margin: 0px; }

/*-------------------------PROJECTS------------------*/
#dropArea {width:94vw; left:0px; padding-left:2vw;}
#dropArea ul { padding:0px; width:100%; display:inline-flex; flex-wrap: wrap; flex-direction: column; align-items: center;}
    
.photos {width:75vw !important; height:auto !important; display:inline-block; }
.thumbnailShield {width:100% !important;  height:90vh !important;}

.projectHeader {max-width:80vw;}

.columnPack {display:flex; flex-direction: column; }
.columnPack > div {width:100%;}

    #leftbutton, #rightbutton {opacity:0;}

}