/* General styles */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
#wrap{max-width: 1024px;margin:10px 15%;overflow:visible;}
html{height:100vh;}
.clear{clear:both;}
.left{ float:left;}
.breaker{display:none;}
.tCenter{text-align: center;}.tRight{text-align: right;}.tLeft{text-align: left;}
.bumpBot{padding-bottom:15px;}
.desctype{text-align: left; font-weight:700;color:#096D38;font-size:1em;padding-bottom:7px;padding-left: 5%;}
.descbody{text-align: left;font-weight:400;color:#333;font-size:.9em;padding-left: 5%;}
.fulltext{padding:15px;}
.fullimagebox{max-height: 90%;overflow-y: scroll;text-align: center;}
p{padding-bottom: 15px;}
.responsiveImage{max-width: 100%;height: auto;padding: 10px;}
hr{border:none;border-bottom:1px solid #777;}

/*Text Styles */
h1{color:#096D38;font-size:2rem;font-family:'Lato',sans-serif;padding-bottom: 15px;}
h2{color:#096D38;font-size:1.5rem;font-family:'Lato',sans-serif;padding-bottom: 5px;}
a{color:#096D38;font-size:1rem;font-family:'Lato',sans-serif;text-decoration: none;}
a:hover{text-decoration: underline;}
.disc{font-size:.8rem;}

/* main containers */
body{background:#ADAFB2;font-family:'Lato',sans-serif;color:#ADAFB2;font-size:1.25rem;line-height:1.25;}
#mainBlock{width: 80%;background-color: #fff;box-shadow: 0px 5px 5px #999;}
#main{max-width: 904px;margin-left: 133px;position: relative;}
#boxTop{background-color:#fff;width: 100%;min-height:80px;padding-top:11px;}
#boxBottom{background-color:#fff;width: 100%;padding:11px 0px;}
#mainContent{background-color: #fff;width:100%;float:right;}
#mainContentBox{background-color:#fff;width: 100%;}
footer{background-color: #fff;width:100%;text-align: center;}

.middleContent{;padding:25px 50px 15px 50px;font-family: Arial, Helvetica, sans-serif;font-size: 1.1rem;}

/*Design Elements */
.bar1{background-color:#95C93D;height:11px;}
.bar2{background-color:#FFC64A;height:11px;margin-bottom:10px;}


/* Header */
#head{/* background-color: #ADAFB2; */width:100%;position:relative;}
#hBanner{max-width: 487px;margin: 0px auto;position: relative;top: 50px;}

/* Page Specific */
#welcomeQuote p{padding-bottom:15px;max-width: 400px;margin: 0px auto;}

/* Nav 1 */
#avatarBox{position:relative;z-index: 50;max-width: 170px;top: 40px;margin-bottom:-220px;left: 0px;background-color:#D8DCCD;border-radius: 50%;border:10px solid #096D38;width:170px;height:170px;}
#avatarHead{position:relative;z-index: 100;max-width: 96px;top: 20px;left: 33px;margin-bottom: -20px;}
#nav{width:250px;height:250px;position:relative;z-index:100;margin-bottom:-300px;}
#navBox{max-width:220px;height:auto;position:relative;left:20%;}
nav{display:block;position:relative;}
.navIcon{max-width:46px;height:auto;position: relative;z-index: 200;cursor: pointer;}
@keyframes navIconRotate{
    from{
        -ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
    }
    to{
        -ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
    }
}
.navIcon:hover{-webkit-animation-name: navIconRotate;animation-name: navIconRotate;
    -webkit-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;
    animation-timing-function:linear;

}
#nav01, #nav02, #nav03, #nav04, #nav05{max-width: 46px;}
#nav01{top: 30px;left: 75px;margin-bottom: -45px;}
#nav02{top: 62px;left: 153px;margin-bottom: -45px;}
#nav03{top: 146px;left: 183px;margin-bottom: -45px;}
#nav04{top: 207px;left: 150px;margin-bottom: -45px;}
#nav05{top: 229px;left: 75px;margin-bottom: -45px;}
#currentTool, #portfolioTool, #aboutTool, #downloadsTool, #contactTool {display: none;position: relative;
top: 45px;text-align: center;font-size: 1.7rem;margin-bottom: -33px;color:#FFC64A;left:4%;}
#hamb, #hamb2{display: none;}
#mobileNav{display: none;}

/* Art Piece */
#artPiece{width:20%;height:100%;position: relative;}
#artpieceBox{padding-top:50px;text-align: center;}
#artpieceBox img{max-width:50px;height:auto;}


/* Contact Form */
input[type='text'], input[type='email'], textarea{border-radius: .5em;padding: 10px;width: 90%;border: 1px solid #95C93D;color: #096D38;font-size: 1.2rem;font-family:'Lato',sans-serif;margin-bottom:10px;}
input[type='submit']{margin-top: 15px;border-radius: 1em;background-color: #096D38;padding: 7px 40px;color: #fff;font-weight: 600;font-family: 'Lato', sans-serif;font-size: 1.2em;border: none;cursor:pointer;}
.success{padding-bottom: 15px;color:#096D38;}
.error{padding-bottom: 15px;color: red;}


/* Media Queries */
@media screen and (max-width:1224px){
    #wrap{margin:10px auto;}
}
@media screen and (max-width:1060px){
    #mainBlock{width: 70%;}
}
@media screen and (max-width:900px){
    #box-top{min-height: 160px;}
    #hBanner{left:5%;max-width:367px;}
    #avatarBox{width:130px;height:130px;border-width: 7px;}
    #navBox{left:25%;}
    #avatarHead{max-width: 76px;top:18px;left:26px;}
    #nav01{top: 80px;left: 75px;}
    #nav02{top: 112px;left: 124px;}
    #nav03{top: 167px;left: 141px;}
    #nav04{top: 211px;left: 116px;}
    #nav05{top: 230px;left: 58px;}
}
@media screen and (max-width:770px){
    #currentTool, #portfolioTool, #aboutTool, #downloadsTool, #contactTool{font-size:1rem;margin-bottom:-20px;}  
}
@media screen and (max-width:750px){
    #box-top{min-height: 120px;}
    #navBox{left:6%;}
}
@media screen and (max-width:600px){
    #artPiece{display: none;}
    #wrap, #mainBlock, #leftSection, #mainContent{width:100%}
    #mainContent{float:left;}
    #hBanner{top:20px;left:0px;}
    #navBox{top:70px;margin:0px auto;left:6%;}
    #avatarHead{max-width: 66px;top:9px;left:16px;}
    #avatarBox{width:100px;height:100px;border-width: 3px;}
    #nav01, #nav02, #nav03, #nav04, #nav05 {display: none;}
    #boxTop{min-height:100px;}
    #nav{width:100%;}
    #hamb{background-color:#096D38;display: block;position: relative;top: 250px;left: 38px;padding: 10px 0px 5px 25px;width: 64px;border-radius: .5em;margin:0px auto;}
    #hamb2{background-color:#096D38;display: block;position: relative;top:207px;left: -72px;padding: 10px 25px 5px 10px;width:64px;border-radius: .5em;margin:0px auto;}
    #hamb img, #hamb2 img{max-width:50px;height: auto;}
    #mobileNav{top:192px;position: relative;z-index:500;}
    #mobileNav ul li{padding:5px 5% 5px 5px;background-color:#096D38 !important;border-bottom: 1px solid #95C93D;color:#D8DCCD;font-size:1.5rem;text-align:center;}
    #mobileNav ul li a{text-decoration:none;color:#D8DCCD; display: block;width: 100%;}/*height: 100%;*/
    #mobileNav ul li a:hover{color:#096D38;}
    #mobileNav ul li:hover{background-color:#FFC64A !important;color:#096D38;}
}
@media screen and (max-width:480px){
    #head{top:-50px;}
    #avatarBox{width:110px;height:110px;}
    #avatarHead{max-width: 70px;top:8px;left:18px;}
    #navBox{top:60px;left:8%;}
    #hBanner{top:50px;left:0px;}
    #mainBlock{width:97%;left:5px;position: relative;}
    .middleContent{padding:10px 20px;}
    #mobileNav{top:176px;}
    /* #mobileNav ul li{padding:5px 0px 5px 100px;text-align: left;} */
    #hamb{top:240px;left:37px;}
    #hamb2{top:194px;left:-64px;}
}
@media screen and (max-width:390px){
    #navBox{left:10%;}
    #hbanner{top:40px;}
}
@media screen and (max-width:370px){
    #navBox{left:11%;}
}
@media screen and (max-width:350px){
    #navBox{top:43px;left:12%;}
    #hamb{top:220px;}
    #hamb2{top:177px;left:-58px;}
    #mobileNav{top:159px;}
}