/* mobile */
body{ font-family: 'Lato', sans-serif; font-weight:700; background:url(../img/bg-photo.jpg) #e5e4ea no-repeat left top; background-size:50%; }

::selection{ background:rgba(209, 158, 31, 1); color:#fff; /* WebKit/Blink Browsers */ }
::-moz-selection{ background:rgba(209, 158, 31, 1); color:#fff; /* Gecko Browsers */ }
.wrapper{ margin-top:25%; }
h1{ font-size:25px; text-transform:uppercase; letter-spacing:2px; text-align:center; margin-bottom:12px; }
.home h1{ text-transform:none; }
h2{ font-size:16px; }
h3{ font-size:8px; text-transform:uppercase; letter-spacing:1px; }

h1, h2, h3{ color:rgba(209, 158, 31, 1); }
p{ font-size:12px; font-weight:300; line-height:1.4; }
a{ text-decoration:none; color:rgba(209, 158, 31, 1); text-transform:uppercase; }
a:hover{ -webkit-transition:color 0.5s ease-out; -moz-transition:color 0.5s ease-out; -o-transition:color 0.5s ease-out; transition:color 0.5s ease-out; }
.italic, em{ font-style:italic; }
.clear{ clear:both; }
sup{ font-size: 50%; vertical-align: top; }

/*overlay nav*/
.overlay{ height:0%; width:100%; position:fixed; z-index:1; top:0; left:0; background-color:rgb(0,0,0); background-color:rgba(0,0,0, 0.9); overflow-y:hidden; transition:0.5s; }
.overlay-content{ position:relative; top:10%; width:100%; text-align:center; margin-top:30px; }
.overlay a{ padding:10px 0; text-decoration:none; font-size:24px; color:#f1f1f1; display:block; transition:0.3s; font-weight:700; text-transform:uppercase; letter-spacing:3px; }
.overlay a:hover, .overlay a:focus{ color:#d19e1f; }

#closebtn{ position:absolute; top:-6px; right:21px; font-size:60px; font-weight:700; }
#openbtn svg path{ fill:rgba(255, 255, 255, 1); }
#openbtn{ position:fixed; cursor:pointer; z-index:999; top:22px; right:21px; width:33px; height:22px; background:rgba(209, 158, 31,0.7); padding:2.5%; opacity:0.5; }
#openbtn:hover{ opacity:1.0; transition:0.3s; }
/*end overlay nav*/

.grid{ width:90%; margin:0 auto; margin-bottom:32px; }
.grid-item{ float:left; width:48%; height:150px; display:block; overflow:hidden; margin:1%; }
.grid-home li{ float:left; width:48%; display:block; overflow:hidden; margin:1%; text-align:center; }
.grid-home-item{ height:150px; }
.grid-home img, .grid-item img{ height:100%; position:relative; } 
.tall-img img{ height:auto; width:100%; }

.home h1{ font-size:48px; letter-spacing:0; }

/* clearfix */
.grid:after{ content:''; display:block; clear:both; }

footer{ width:80%; margin:0 auto; }
footer p{ color:#999; font-size:12px; text-align:center; font-weight:400; margin-bottom:32px; }

/*mobile landscape*/
@media 
(max-height:480px)
and (max-width:667px)
  and (-webkit-max-device-pixel-ratio: 2)
and (orientation: landscape) { 
.overlay-content{ top:2%; }
.overlay a{ font-size:10px; }
}

/*tablet*/
@media
(min-width:768px) {
.wrapper{ margin-top:12%; }
#closebtn{ top:20px; right:45px; }
#openbtn{ top:44px; right:42px; padding:1%; }
.overlay-content{ top:25%; }
.overlay a{ font-size:30px; letter-spacing:10px; }

h1{ font-size:60px; margin-bottom:32px; }
p{ font-size:18px; line-height:1.6; }

.grid{ width:80%; margin:0 auto; margin-bottom:60px; }
.grid-item{ width:31%; height:200px; }
.grid-home li{ width:31%; }
.grid-home-item{ height:200px; }

.home h1{ font-size:100px; }
}

/*desktop*/
@media
(min-width:1024px) {
body{ background:url(../img/bg-photo.jpg) #e5e4ea no-repeat left -88px; background-size:50%; }
#closebtn{ top:26px; right:50px; }
.wrapper{ margin-top:8%; }
.grid{ width:996px; }
.grid-item{ height:250px; }
.grid-home-item{ height:250px; margin-bottom:12px; }
}

@media
(min-width:1280px) {
	
.grid{ width:1200px; margin-bottom:100px; }
.grid-item{ width:23%; }
.grid-home li{ width:23%; }
}