/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
* {-webkit-box-sizing:border-box;box-sizing:border-box;}

body {margin:0 auto;padding:0;background-color:#ffffff;font-size:16px;font-family:'Caudex';}
#header{margin:0 auto;padding:24px 0;background:black;color:white;}

#header_content{max-width:666px;width:100%;margin:0 auto;padding:28px 8px 32px 8px;text-align:center;}
#header_content h1{font-size:48px;line-height:48px;}

#radial{background:rgb(255,255,255);
background:-o-radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%);
background:radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%);}


#strapline{margin:0 auto 24px auto;padding-top:24px;text-align:center;}
#strapline h2{margin:0 auto;font-size:24px;line-height:32px;font-style:italic;}

#mastercraftsman{margin:0 auto;text-align:center;}
#mastercraftsman img{max-width:540px;width:100%;border:1px solid black;}

#services{margin:16px auto 32px auto;text-align:center;}
#services h3{margin:0 auto;font-size:18px;}
#services p{margin:8px auto 0 auto;font-size:18px;}
#services ul {margin:8px auto 16px auto;}
#services ul li{font-size:18px;font-style:italic;padding-bottom:2px;}


.gallery {display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:8px 20px;}
.gallery img {margin:10px 14px;cursor:pointer;max-width:230px;display:cover;border:1px solid black;}
/* Lightbox styles */
#lightbox {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}
#lightbox img {max-width:80%;max-height:80vh;-webkit-box-shadow:0 0 25px rgba(0, 0, 0, 0.8);box-shadow:0 0 25px rgba(0, 0, 0, 0.8);border:1px solid black;}
#close-btn {position:absolute;top:10px;right:20px;font-size:48px;color:#fff;cursor:pointer;z-index:2;}
/* Style for navigation buttons */
#prev-btn, #next-btn {position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:20px;color:#fff;background-color:rgba(0, 0, 0, 0.5);border:none;padding:10px;cursor:pointer;-webkit-transition:background-color 0.3s;-o-transition:background-color 0.3s;transition:background-color 0.3s;}
#prev-btn {left:10px;}
#next-btn {right:10px;}
#prev-btn:hover, #next-btn:hover {background-color:rgba(0, 0, 0, 0.8);}
/* Styles for thumbnails */
.thumbnail-container{display:none;}
.thumbnail{display:none;}
/*.thumbnail-container {display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;}*/
/*.thumbnail {max-width:50px;width:100px;cursor:pointer;margin-top:40px;margin-left:5px;margin-right:5px;border:2px solid #fff;transition:opacity 0.3s;}*/
/*.thumbnail:hover, .thumbnail.active-thumbnail {opacity:0.7;}*/


#contact {margin:24px auto 0 auto;padding:16px 12px;max-width:380px;width:100%;text-align:center;}
#contact h3{padding-bottom:16px;font-size:32px;}
.contact_detail {font-size:18px;line-height:24px;}
.social_detail {margin:24px auto 0 auto;}
.social_detail img{height:28px;padding:0 4px;}

#footer{margin:0 auto;padding:24px 0 64px 0;width:100%;font-size:14px;line-height:18px;text-align:center;}
#footer button{padding:2px 10px;border:0;background:transparent;}
#footer button:hover{cursor:pointer;}
#footer p{margin:4px auto;}

 /* The Modal (background) */
.modal {display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}

/* Modal Content/Box */
.modal-content {background-color:#fefefe;margin:35% auto;padding:18px 28px 20px 28px;border:1px solid #000;max-width:616px;width:100%}
/* The Close Button */
.close {color:#aaa;float:right;font-size:28px;font-weight:bold;}
.close:hover, .close:focus {color:black;text-decoration:none;cursor:pointer;}
.modal-content h3{margin:8px 0 2px 0;font-size:16px;line-height:22px;}
.modal-content p{margin:4px 0;font-size:14px;line-height:20px;}


@media (max-width:767px) {
	#radial{padding:0 8px;}
	#strapline h2{font-size:22px;line-height:30px;font-style:italic;}
}
@media (max-width:560px) {
	#strapline h2{font-size:20px;line-height:28px;font-style:italic;}
}
@media (max-width:400px) {
	#header_content h1{font-size:36px;line-height:36px;}
}