@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond|Libre+Baskerville|Nanum+Myeongjo');

*{margin:0;padding:0;box-sizing:border-box;}
        
        body, html{min-height:100%; font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height:2.5em; font-weight:300;}
        
        article{max-width:1000px; margin: auto; padding:2em; text-align:center; }

h1, h2, h3{font-weight:300;}
        
        h1{ font-size: 1em;}
        
        h2{text-transform: uppercase; font-weight:300; letter-spacing: .05em; text-align:center; font-size: 1.2em;}

h3{font-size: 1.4em;}
        
        nav{background:rgb(0, 74, 109); color: #fff; font-size: .8em;  position:fixed; width:100%; z-index:10}
        nav article{padding: .1em 2em; text-align:left;}
        
nav span{font-size: 1.2em; letter-spacing: .02em;}

        nav li{display: inline-block; text-transform: uppercase;  letter-spacing: .05em; margin: 0 1em}
        nav ul{float:right;}
        
        .white{color:#fff;}
        .left{text-align:left;}
.black{color: #000;}
        
        header{background: url(img/jigsawDK.jpg) center center no-repeat;
        background-size: cover;}
        
        main{background:rgba(0, 74, 109, .8); text-align:center;}
        header div{margin-left: 45%}
        header p{ color:#fff; line-height:1.4em; padding: 10em 0;  text-align:center; letter-spacing: .06em;}

/*text-shadow: 1px 1px 7px #06121d,1px 1px 7px #111b26;*/
        
        a{color: #fff; text-decoration: none;}
        
       /* #about, #forums, #info{background:  url(img/white.jpg) center center no-repeat;
        background-size: cover; }*/
        
        #about img{float:left; margin: 1em 2em 0 0 ;}
        
        button{background: #000; color: #fff; padding: .7em 1em; border: none; font-family: "Cormorant Garamond", serif; font-size: 1em; letter-spacing: .1em; margin-top: 1.5em; cursor:pointer;}
        
        #services, #articles, footer{
            background-image: url(img/black-wood.jpg) ;
            background-position:center center;
            background-repeat:no-repeat;
            background-size:cover;
            color: #fff;}


        
        #clients{background:  url(img/jigsaw-dark.jpg) center center no-repeat;
        background-size: cover; color: #fff;}
        
        
        #grid{
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-flex-align: center;
            -webkit-align-items: center;
            display: -moz-box;     
            display: -ms-flexbox; 
            display: -webkit-flex;
            display:flex;
            -webkit-flex-wrap: wrap;
            flex-wrap:wrap; 
            -webkit-justify-content:center;
            justify-content:center;
        }
        
        #grid div{
            height:200px; 
            border: 1px solid #fff; 
            min-width:240px; 
            display: -webkit-box;  
            display: -moz-box;     
            display: -ms-flexbox; 
            display: -webkit-flex;
            
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-flex-align: center;
            -webkit-align-items: center;
            text-align:center;
            display:flex; 
            -webkit-justify-content:center;
            justify-content:center; 
            align-items:center; 
            flex-grow:1; 
            flex-shrink:1; 
            background-color: rgba(0, 74, 109, 0); 
            transition: all .7s; 
            position:relative;

}
        
#about p{text-indent: 1.75em; margin-bottom: .75em;}

#grid div:hover{background-color: rgba(0, 74, 109, .6)}

#grid div:hover span{opacity:0;}


        #grid span{font-size: 1.5em; transition: all .7s}
        
        #grid a{opacity:0; position:absolute; transition: all .5s; left:0; margin-left:0; width:100%; top: 38%; pointer-events: none;}

    #grid div:hover a{opacity:1; pointer-events: all;}

#flexCol2 div {display:inline-block; text-align:center; padding:1em 4em;}

footer{text-align: center; padding: 2em 0;}


footer h1{font-size: 1.75em; text-transform: uppercase; }

footer h2{font-size: .88em; letter-spacing: .1em}

.hfls{display:none;}
        
        @media only screen and (min-width:1201px) {
            #grid div{min-width: 290px;}
            body{font-size: 21px;}
        }
         @media only screen and (min-width:1400px) {
            #grid div{min-width: 350px;}
        }

 @media only screen and (max-width:400px) {
     body{font-size:18px;line-height:1.25em;}
     header div{margin-left: 0;}
     header p{padding: 1em 0;}
     article{padding:.66em .66em 1em .66em;}
     nav li{display: block; }
     nav ul{float:none;}
     nav span{line-height: 3em; }
     footer{font-size:.8em;}
     .hfls{display:inline;}
     h2+img{padding: .5em 0 .3em 0;}
     footer h2{padding: .75em 0 .5em 0;}
     article h2{padding-top: .75em;}
     #home p{margin-top: -6em; padding:2em 0 10em 0; font-weight:bold; letter-spacing: .01em; text-shadow: 1px 1px 0 #031624;}
     #home article img{position:relative; transform:translateY(-10px);}
      #about img{float:left; margin: .5em 1.5em .5em 0 ;}
     #articles{background-image: url(img/black-wood-tall.jpg) ;}
     
        }