/*
-----------------------------------------------
---- Looking at CSS eh?       			-------
---- Found a problem? Got a suggestion?	-------
---- email robert@buglogic.com 			-------
-----------------------------------------------
*/
/*
colors
----------------*/
:root {
--primary:#42d7f5;
--accent:#9DBE30;
--gray:#727272;
--lt-gray:#ececec;
}
/*
body
-----------------*/
html, body {height:100%;}
body {display:flex;flex-direction:column;font-family:'Jost', sans-serif; background:#f2f2f2;font-size:1em;margin:0;font-weight:300;}
a {text-decoration:none;}
h1,h2,b{font-weight:600;}
.container {flex:1 0 auto;display:table;width:80%;margin:auto; padding-bottom:20px;}
/*
top
----------------*/
.header {padding:20px;text-align:center;}
.sticky-nav {position:sticky;position:-webkit-sticky;top:0;}
nav {text-align:center;}
nav a, .header a {display:inline-table; margin-left:10px;margin-right:10px;color:var(--gray);font-size:120%;font-weight:500;}
nav a:hover, .header a:hover{color:red;text-decoration:none;}
.header a {font-size:100%;}
a.button {display:inline-block;background:var(--primary);color:#FFF;border-radius:5%;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;transition:padding-left 0.5s ease,padding-right 0.5 ease;}
a.button:hover {text-decoration:none;color:#FFF;padding-left:7px;padding-right:7px;}
.nav{padding:5px;background:var(--lt-gray); border-bottom:solid 1px var(--gray);z-index:10;}
a.top-name{color:#000;}
a.top-name:hover{color:red;text-decoration:none;}
/*
footer
----------------*/
footer {flex-shrink:0;background:var(--lt-gray);padding:10px;}
.social-container {display:flex;align-items:center;justify-content:center;}
a.nav-social {display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-left:5px;margin-right:5px;border-radius:15px;}
a.nav-social:hover {background:#000;text-decoration:none;}
a.nav-social i {color:#FFF;font-size:20px;}
a.facebook {background:#315cb0;}
a.pinterest {background:#c60514;}
a.twitter {background:#4db0f0;}
a.behance {background:#166ee8;}
a.linkedin {background:#4f7ea6;}
a.youtube {background:#ed2925;}
a.instagram {background:#bc2a8d;}
a.vimeo {background:#2ccad6;}
/*
gallery
----------------*/
.gallery-container {width:80%; margin-left:auto; margin-right:auto;margin-bottom:20px;margin-top:20px;}
.gallery-wall {column-count:3;column-gap:10px;}
a.gallery-item {display:inline-table;padding:5px;}
.gallery-wall img {width:100%;height:auto;display:block;margin-bottom:5px;}
.fit-img {max-width:100%; margin-left:auto;margin-right:auto;margin-bottom:10px;}
.full-img {max-width:80%;cursor:pointer;margin:auto;}
.image {display:flex;justify-content:center;}
.image-cover {display:table;width:100%;height:100vh;}
.image-cover-nav {display:table-cell;vertical-align:middle;width:15%;}
.image-cover-nav a {margin-left:5px;margin-right:5px;display:table;padding:5px;background:var(--primary);color:#FFF;}
.image-cover-nav a:hover {text-decoration:none;background:var(--gray);}
.image-details {display:table;min-width:25%;text-align:center;margin-left:auto;margin-right:auto;margin-top:10px;background:var(--lt-gray);padding:5px;border-radius:20px;font-size:120%;font-weight:600;}
.image-details a {display:inline-table;margin-left:5px;margin-right:5px;color:var(--primary);}
.image-details a:hover{text-decoration:none;color:var(--gray);}
/*
content
----------------*/
.text-reader {margin-left:auto; margin-right:auto; width:33em;}
.header-title {display:flex; justify-content:space-around; align-items:center; margin-left:20px; margin-right:20px; margin-top:10px;}
.header-title h2{white-space:nowrap;}
.header-deck {width:100%; border-top:solid 2px var(--gray);}
.text-deck {background:#FFF;border-radius:5px;padding:20px;}
/*
contact
----------------*/
.contact-container {display:flex;flex-direction:row;}
.contact {display:table;margin-left:auto;margin-right:auto; margin-bottom:20px;padding:20px;border:solid 2px var(--gray);border-radius:5px;text-align:center;min-width:50%;background:#FFF;}
input[type='text'], textarea {background:var(--lt-gray);padding:5px;border-radius:3px;border:solid 2px transparent; color:var(--gray);font-family:Lora;font-weight:400;width:90%;margin-top:5px;margin-bottom:10px;margin-left:auto;margin-right:auto;}
input[type='text']:focus, textarea:focus  {background:#FFF;border:solid 2px var(--gray);}
textarea {min-height:240px;}
.sender {cursor:pointer;display:table;margin-top:10px;margin-left:auto;margin-right:auto;background:var(--gray);color:var(--lt-gray);padding:5px;font-size:120%;font-weight:600;}
.sender:hover {background:#000;}
.captcha, .captcha-word, input.captcha-word[type="text"] {background:var(--gray); color:#ececec; font-family:georgia; font-size:140%; padding:10px;text-align:center;}
.frameWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;}
.frameWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
@media (max-width: 699px) {
	.image-cover-nav {display:none;}
	.image-cover img {max-width:95%;max-height:auto;}
	.gallery-container, .container, .contact {width:90%;}
	.gallery-wall {column-count:2;}
	.contact-container {flex-direction:column-reverse;}
}