div.gallery_03 {clear:both; padding: 30px 0 60px 0; background-color:#000;}
div.gallery_03 .container { min-height:650px;  width: 100%; display:block; overflow:hidden;  max-width: 1100px;  margin: 0px auto;   position: relative;   text-align: center;}
#gallery, #projects {overflow:hidden;}
div.gallery_03 h1 {display:none;  margin-bottom: 20px;  text-transform: uppercase; color: #F39CC3;}
div.gallery_03 nav {   display: block;   width: 100%; }
div.gallery_03 ul {   list-style: none;    margin-bottom: 20px; padding:10px 0;}
div.gallery_03 nav > ul > li {   display: inline-block;}
div.gallery_03 nav > ul > li > a {  font-size:20px;  text-transform: uppercase;   padding: 4px 12px 5px 12px;  margin-right: 2px;  margin-left: 2px;
    text-decoration: none;  color: #ff5000;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;
    border-radius: 25px;  border: 1px solid #ff5000; line-height:30px;
	-webkit-transition: all 300ms ease-in-out;  -moz-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;}
div.gallery_03 .hidden {   display: none;}
div.gallery_03 nav > ul > li > a:hover,div.gallery_03 .current a {  color: #fff !important; background-color: #ff5000;}
div.gallery_03 #projects > ul > li {  display: inline-block; float: left; margin:0.5% 0.5%; width: 24%; /* 220804 */ height: 174px;
    cursor: pointer; border-radius: 5px; box-sizing: border-box; position: relative; opacity: 0.7;
	-webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
div.gallery_03 #projects > ul > li:hover { opacity: 1;}
div.gallery_03 img { max-width: 100%; border-radius: 5px; vertical-align:top;}
div.gallery_03 .gallery {  position: fixed;  top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);
    display: none; box-sizing: border-box; z-index:999; }
    div.gallery_03 .gallery div.table1{display:table; height:100%; width:100%;}
    div.gallery_03 .gallery div.table2{display:table-cell; vertical-align:middle;}
div.gallery_03 .gallery > img { max-height: 100%; width: auto;}
.close i { position: fixed; top: 10px; right: 10px; height: 30px; width: 30px;}
div.gallery_03 .bar { display: block; position: absolute; top: 13px; float: left; width: 30px; border-bottom: 4px solid #fff; transform: rotate(45deg);}
div.gallery_03 .bar:first-child { transform: rotate(-45deg);}


#gallery{}
#gallery li{
}
#gallery li > div {
    display: table;
    font-size: 23px;
}
#gallery li > div a{
    display: block;
    position: relative;
}
#gallery li > div a img{}
#gallery li > div a:after{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
#gallery li > div .hover-on{
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #fff;
    /* font-size: 25px; */
}
#gallery li > div .hover-me{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    vertical-align: middle;
    display: none;
    color: #fff;
    z-index: 9;
    /* font-size: 25px; */
}
#gallery li > div .hover-me span{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
#gallery li:hover > div .hover-on{display:none;}
#gallery li:hover > div .hover-me{display:table;}
#gallery li:hover > div a:after{content:''; background: rgb(0 0 0 / 60%);}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {

	div.gallery_03 {clear:both; padding: 30px 0 60px 0; background-color:#000;}
div.gallery_03 .container { min-height:650px;  width: 100%; display:block; overflow:hidden;  max-width: 1100px;  margin: 0px auto;   position: relative;   text-align: center;}
#gallery, #projects {overflow:hidden;}
div.gallery_03 h1 {display:none;  margin-bottom: 20px;  text-transform: uppercase; color: #F39CC3;}
div.gallery_03 nav {   display: block;   width: 100%; }
div.gallery_03 ul {   list-style: none;    margin-bottom: 20px; padding:10px 0;}
div.gallery_03 nav > ul > li {   display: inline-block;}
div.gallery_03 nav > ul > li > a {  font-size:14px;  text-transform: uppercase;   padding: 4px 12px 5px 12px;  margin-right: 2px;  margin-left: 2px;
    text-decoration: none;  color: #ff5000;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;
    border-radius: 25px;  border: 1px solid #ff5000; line-height:30px;
	-webkit-transition: all 300ms ease-in-out;  -moz-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;}
div.gallery_03 .hidden {   display: none;}
div.gallery_03 nav > ul > li > a:hover,div.gallery_03 .current a {  color: #fff !important; background-color: #ff5000;}
div.gallery_03 #projects > ul > li {  display: inline-block; float: left; margin:0.5% 0.5%; width: 24%; /* 220804 */ height: 23vw;
    cursor: pointer; border-radius: 5px; box-sizing: border-box; position: relative; opacity: 0.7;
	-webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
div.gallery_03 #projects > ul > li:hover { opacity: 1;}
div.gallery_03 img { max-width: 100%; border-radius: 5px; vertical-align:top; /* 220804 */height:auto !important; }
div.gallery_03 .gallery {  position: fixed;  top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);
    display: none; box-sizing: border-box; z-index:999; }
    div.gallery_03 .gallery div.table1{display:table; height:100%; width:100%;}
    div.gallery_03 .gallery div.table2{display:table-cell; vertical-align:middle;}
div.gallery_03 .gallery > img { max-height: 100%; width: auto;}
.close i { position: fixed; top: 10px; right: 10px; height: 30px; width: 30px;}
div.gallery_03 .bar { display: block; position: absolute; top: 13px; float: left; width: 30px; border-bottom: 4px solid #fff; transform: rotate(45deg);}
div.gallery_03 .bar:first-child { transform: rotate(-45deg);}
	
	#gallery{}
#gallery li{
}
#gallery li > div {
    display: table;
    /* 220808 1.2rem - > 0.9rem */
    font-size: 0.9rem;
}
#gallery li > div .hover-on{
    position: absolute;
    bottom: 16px;
    width: 100%;
    text-align: center;
    color: #fff;
    /* font-size: 25px; */
}
#gallery li > div .hover-me{
    position: absolute;
    width: 100%;
    /* 220808 100%-> 70% */
    height: 70%;
    top: 0;
    vertical-align: middle;
    display: none;
    color: #fff;
    z-index: 9;
    /* font-size: 25px; */
}
#gallery li > div .hover-me span{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
#gallery li:hover > div .hover-on{display:none;}
#gallery li:hover > div .hover-me{display:table;}
	
}
@media (max-width: 768px) {
div.gallery_03 {margin:0;}
div.gallery_03 #projects > ul > li { width: 33.333333%; padding:1% 1%; margin:0 ;  text-align:center;  }
/* 220808 */
#gallery li > div {
    font-size: 1.2rem;
}
#gallery li > div .hover-me{
    height: 100%;
}
}
@media (max-width: 640px) {
    div.gallery_03 #projects > ul > li { width: 50%;   }
    	/*220808  */
    div.gallery_03 #projects > ul > li{height:33vw;}
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}