/* Main Setting - Repeat on every page */
html { margin: 0px auto; padding: 0px; border: 0px; font-size: 12px; }
body { margin: 0px auto; padding: 0px; border: 0px; font-family: 'Montserrat', sans-serif; font-size: 100%; color: #3c3c3c; background: #FFFFFF;
overflow-x: hidden; overflow-y: scroll; width: 100%; vertical-align: top; /*overflow-y: hidden;*/ }
/*Resets*/
h1,h2,h3 { margin: 0; padding: 0; }
/*
@media screen and ( max-width: 800px) { html { font-size: 14px; } body { font-size: 100%; }
@media screen and ( max-width: 500px) { html { font-size: 16px; } body { font-size: 100%; }
*/
/* @media screen and ( min-width: 350px) { html { font-size: 16px; } body { font-size: 100%; } } */
.Gutters { margin: 0 auto; margin-left:15px; margin-right: 15px; max-width: 1600px; }
.MainBackgroundImage { background-image: url("images/Background-2.jpg"); background-size: 100%; /* background-position: center; background-repeat: no-repeat;*/ }
.HeaderBackgroundColor { background-color: rgba(21,35,46, 0.8); }
.MenuBackgroundColor { Background-color: rgba(21,35,46,.7);}
.MainBackgroundColor { background-color: rgba(35,49,60, 0.9); }
/* Header */
.header { width: 100%; }
.ParallaxContainer { margin-top: -67px; position: relative; z-index: -1; height: 85vh; transform: translateZ(-1px) scale(2);
/* display: flex; flex: 1 0 auto; justify-content: center; align-items: center;*/ }
.MainContainer { perspective: 1px; transform-style: preserve-3d; height: 100vh; overflow-x: hidden; overflow-y:scroll; }
#BtnBackToTop { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 99; border: none;
border-radius: 50%; display: none; height: 50px; width: 50px; cursor: pointer;
transition: background 0.2s ease, color 0.2s ease; background: rgba(145, 145, 145, 0.4);
/* bottom: 40px; right: 40px; font-size: 18px; border: none; outline: none; background-color: red; color: white;
cursor: pointer; padding: 15px; border-radius: 4px; background: rgba(145, 145, 145, 0.4);*/}
#BtnBackToTop:hover { outline: 0; background: rgba(145, 145, 145, 0.9); /*background-color: #555; */ }
#BtnBackToTop svg { display: block; left: 27%; top: 25%; overflow: hidden; }
.icon-back-to-top { fill: #0d0d0d; height: 24px; width: 24px; opacity: 0.45; position: absolute; }
#BtnBackToTop:hover .icon-back-to-top { fill: white; }
@media (max-width: 600px) { #BtnBackToTop { display: none !important; }}
.menu2 a { white-space: nowrap; color: white; text-decoration: none; padding: 6px 15px; margin-top: .5rem;}
.menu2 a:hover { text-decoration: underline; }
.menu a { color: white; text-decoration: none; padding: 6px 15px;
border-left: 1px solid #494949; border-radius: 100px ; border: 1px solid rgba(255,255,255,.2);
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 4px 10px 2px rgba(0,0,0,0.2);
transition: 0s background ease-in-out; transition: .3s background,font-weight ease-in-out;
border-left: 0px; margin-left: 5px; margin-right: 5px; margin-bottom: 8px; white-space: nowrap;
}
.menu a:hover { background-color: #008FC2; }
.BtnActive { background-color: #008FC2; /*font-weight: bold;*/ }
.BtnActive2 { text-decoration: underline !important; }
.TopMenuBox { padding-top: 25px; padding-bottom: 1px; display: block; width:100%; max-width: 1250px; margin: 0 auto; }
.TopMenuBoxInner { margin-right: 2%; margin-bottom: 15px; text-align: right; font-size: 1rem;}
.MenuBio { }
.MenuContact { }
.HeaderInfo { width: 100%; text-align: center; padding-bottom: 1rem; color: white; font-family: 'Montserrat', sans-serif; }
.HeaderInfo p { padding:0; margin:7px}
.Header-Name { font-size: 6rem; text-transform: uppercase; letter-spacing: 0.09em; }
.Header-Title { padding-top: 10px; color: #6bccef; font-size: 4rem; font-family: 'Roboto', sans-serif; }
.Lili { background-image: url('images/Lili.jpg'); background-size: 100%; max-width: 250px; height: 250px; margin: 0 auto; border-radius:50%; margin-bottom: 20px;}
@media screen and ( max-width: 700px) { .Header-Name { font-size: 4rem; }
.Header-Title { font-size: 2rem; }}
@media screen and ( max-width: 500px) { .Lili { max-width: 175px; height: 175px; }
.Header-Name { font-size: 3rem; }
.Header-Title { font-size: 1.5rem; }
}
@media screen and ( max-width: 400px) { .Lili { max-width: 150px; height: 150px; }
.Header-Name { font-size: 3rem; }
.Header-Title { font-size: 1.5rem; }
.TopMenuBoxInner { text-align: left; margin-right: 0px; }
.TopMenuBoxInner a { margin-top: -5px; }
.MenuBio { float: left;}
.MenuContact { float: right;}
}
.stickymenu { z-index: 100; position: sticky; top: 0; }
.mainmenu { padding-top: 5px; padding-bottom: 0rem; color: white !important; font-size: 1rem; text-align: center; display: none; /*line-height: 2.5rem;*/ }
.mainmenu a { }
.SubBar { display: none; position: relative; }
.SubBar a { /*background-color: #ADADAD;*/ }
.SubBar h2 { Font-size: 2rem; font-weight: 500; text-align: center; display: block; padding-top: 1.5rem; padding-bottom: 1.5rem;}
.SubBar .FilterMenu { text-align: right; display: block; margin-top: -1.75rem; padding-bottom: 1rem; }
/* .BarAdvertising { } .BarDisplayArt { display: none; } .BarEvents { display: none; } .BarIdentity { display: none; } .BarPhotography { display: none; } .BarPrint { display: none; }*/
.Category { width: 100%}
.Category a { width: 30.83%; margin: 0 .63% 2.4% .63%; /*margin: 1.25% ; float: left;*/ position: relative; opacity: .88; overflow: hidden;}
.Category img { width: 100%; display: block; opacity: inherit; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.Category a:hover { opacity: 1 !important; }
.Category a:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.Category-overlay { position: absolute; top:47%; background: rgba(0, 0, 0, 0.7); /* Black see-through */
color: #f1f1f1; width: 100%; transition: .5s ease; opacity: inherit; color: white; padding: 20px; text-align: center; box-sizing: border-box;}
.Category-overlay h3 { font-size: 1.75rem; line-height: 2rem; margin: 0; padding: 0; font-weight: 500; text-align: center;}
.Category-overlay p { font-size: 1rem; line-height: 1.25rem; margin: 0; padding: 0; text-align: center;}
@media (max-width: 600px) { .Category a { width: 48%; margin-bottom: 4%; }
.Category-overlay h3 { font-size: 1.25rem; line-height: 1.5rem; } }
/* MainContent */
.MainContent { margin: 0 auto; padding-top: 1rem; width: 100%; z-index: 1; display: block; position: relative;}
.MainContent: after { clear: both; }
.MainInner { margin: 0 auto; padding-top: 0; padding-bottom: 0px; width: 96%; max-width: 1200px;}
.ImageGrid { /*float: left;*/ -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; }
.GridItem { /*float: left; overflow: hidden; max-height: 300px; display:inline-block; */ display: none; opacity: 1; margin-bottom: 10px; position: relative; margin: 0 .63% 1.26% .63%; width: auto;}
.GridItem:hover { opacity: .8; }
.Featured { display: none; /*inline-block;*/ }
.GridItem a { }
.GridItem img { width: auto; height: auto; max-height: 100%; max-width: 100%; max-height: 180px; background-color: white; display: block; }
.overlay { display: none; position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); /* Black see-through */
color: #f1f1f1; width: 100%; transition: .5s ease; opacity:1; color: white; padding: 10px; text-align: center; box-sizing: border-box;}
.overlay h3 { font-size: 1.25rem; line-height: 1.5rem; margin: 0; padding: 0; font-weight: 500; text-align: center;}
.overlay p { font-size: 1rem; line-height: 1.25rem; margin: 0; padding: 0; text-align: center;}
.GridItem:hover .overlay { opacity: 1 !important} /* When you mouse over the container, fade in the overlay title */
@media (max-width: 600px) { .GridItem img { max-height: 120px; }}
/*
.Narrow { max-Width: 15.4%; }
.Wide { max-width: 32.06%; }
@media (min-width: 800px) { .Narrow { Max-Width: 23.74% } .Wide { Max-width: 48.74% } }
@media (min-width: 1000px) { .Narrow { Max-Width: 15.4%} .Wide { Max-width: 32.06% } }
/* @media (min-width: 200px) { .Narrow { Max-Width: 48.74% } .Wide { Max-width: 98.74% } }
@media (min-width: 600px) { .Narrow { Max-Width: 32.07% } .Wide { Max-width: 65.4% } }
@media (min-width: 800px) { .Narrow { Max-Width: 23.74% } .Wide { Max-width: 48.74% } }
@media (min-width: 1000px) { .Narrow { Max-Width: 15.4%} .Wide { Max-width: 32.06% } } */
/*
.Narrow { Width: 15.4%; }
.Wide { width: 32.06%; }
.Narrow Img { width: 100%; height: 100%; vertical-align: 50%; background-color: white;}
.Wide Img { width: 100%; height: 100%; vertical-align: 50%; background-color: white;}
@media (min-width: 200px) { .Narrow { Width: 48.74% } .Wide { width: 98.74% } }
@media (min-width: 600px) { .Narrow { Width: 32.07% } .Wide { width: 65.4% } }
@media (min-width: 800px) { .Narrow { Width: 23.74% } .Wide { width: 48.74% } }
@media (min-width: 1000px) { .Narrow { Width: 15.4%} .Wide { width: 32.06% } }
*/
.EmailBox { width: 100%; min-height: 5rem; text-align: center; font-size: 1.85rem; color: white; padding-top: 4rem; padding-bottom: 4rem; }
.EmailBackgroundColor { Background-color: rgba(21,35,46,.94);}
.EmailButton { width: 100%; display: block; padding-top: 1rem; }
.EmailButton a { padding: 20px 30px 18px 30px; font-size: 1.25rem; background-color: #81D4F1; color: #051421; text-decoration: none; }
.EmailButton a:hover { background-color: #008FC2; }
/* LightBox */
.lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8); }
.LightBoxInner { margin: 0 auto; width: 98%; /*margin-left: 40px; margin-right: 40px;*/ margin-top: 1%; height: 85%; position: relative;}
.lightbox img { max-width: 100%; max-height: 100%; outline: none; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.lightbox img:hover { cursor: pointer; }
.lightbox-close { display: block; padding:0 inherit;width:35px; height:35px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: 10px; right: 0; margin: 8px; background: #dddddd; float: left; border-radius: 50%; border: none; transition: background 0.2s ease, color 0.2s ease; background: rgba(145, 145, 145, 0.4); }
.lightbox-close:hover { cursor: pointer; background: #585858; background: rgba(145, 145, 145, 0.9); }
.close-x { stroke: black; fill: transparent; fill: #0d0d0d; stroke-linecap: round; stroke-width: 5; width: 100% }
.lightbox-close:hover .close-x { stroke: #e5e5e5; }
/* Footer */
#footer { color: #051421; /*background-image: url("images/Conch.png"); background-repeat: no-repeat;background-position: center; */ }
/* background-size: 80%; background-position: top;*/
/*p { margin-left: 10px; margin-right: 10px; }*/
.ShortAboutMe { width: 100%; font-size: 1.75rem; padding-top: 1rem; padding-bottom: 6rem; background-color: rgba(111, 194, 223, 0.5); text-align: center;}
.ShortAboutMe p { margin-left: 10px; margin-right: 10px; margin:0; padding:1rem; }
/* Social Networking */
.SocialBar { text-align: center; padding-top: 3rem; padding-bottom: 0rem; margin:0; }
.SocialIcon { margin: 0px 9px; width:48px; height:51px; display: inline-block;}
@media (max-width: 300px) { .SocialIcon { margin: 0px 5px; }}
.facebook { background: url("images/social/facebook.png") no-repeat;}
.instagram{ background: url("images/social/instagram.png") no-repeat;}
.linkedin { background: url("images/social/linked_in.png") no-repeat;}
.email { background: url("images/social/mail.png") no-repeat;}
.facebook:hover { width:48px; height:51px; background: url("images/social/facebook-hover.png") no-repeat; }
.instagram:hover { width:48px; height:51px; background: url("images/social/instagram-hover.png") no-repeat; }
.linkedin:hover { width:48px; height:51px; background: url("images/social/linked_in-hover.png") no-repeat; }
.email:hover { width:48px; height:51px; background: url("images/social/mail-hover.png") no-repeat; }
.SubFooter { width: 100%; color: white; font-size: 1.5rem; background-color: rgba(36, 114, 142, 0.5); padding-top: 1rem; padding-bottom: 1rem; text-align: center;}