@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700&subset=latin-ext');

@font-face
{
 font-family: 'Myriad Pro';
 font-style: normal;
 font-weight: normal;
 src: local('Myriad Pro'), url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face
{
 font-family: 'Myriad Pro';
 font-style: normal;
 font-weight: bold;
 src: local('Myriad Pro Bold'), url('fonts/MYRIADPRO-BOLD.woff') format('woff');
}

:root
{
 --site-max-width: 1030px;
 --color-green: #00904c;
 --color-gray: #aaa;
 --color-mid-gray: #888;
 --color-dark-gray: #333;
 --color-gray-on-black: #ccc;
 --color-gray-background: #888;
}

*
{
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

html
{
 overflow-y: scroll;
 min-height: 100%;
}

body
{
 height: 100%;
 margin: 0;
}

a
{
 color: inherit;
 text-decoration: underline;
 cursor: pointer;
}

b, strong
{
 font-weight: normal;
 color: var(--color-green);
}

p
{
 font-family: 'Myriad Pro', sans-serif;
 font-weight: normal;
 font-size: 10pt;
 line-height: 18pt;
 margin-bottom: 1em;
}

.clr
{
 clear: both;
 display: none !important;
}

.right
{
 text-align: right;
}

.center
{
 text-align: center;
}

h2
{
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 18pt;
 letter-spacing: 2pt;
 color: #000;
 text-transform: uppercase;
 margin: 60px 0;
}

div.container
{
 width: 96%;
 max-width: var(--site-max-width);
 margin: 0 auto;
}

header
{
 background: #000 url(../img/hod-bg.jpg) center;
 background-size: cover;
 padding: 60px 20px;
 text-align: center;
}

header h1
{
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 24pt;
 margin: 100px 0 60px 0;
 letter-spacing: 3pt;
 color: #fff;
 text-transform: uppercase;
}

header .tagline
{
 font-family: 'Montserrat', sans-serif;
 font-weight: normal;
 font-size: 11pt;
 margin-bottom: 60px;
 letter-spacing: 3pt;
 color: #fff;
 text-transform: uppercase;
 display: inline-block;
}

#work .tagline::after
{
 content: "";
 display: block;
 width: 400px;
 max-width: 80%;
 height: 20px;
 max-width: 80%;
 margin: 0 auto;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header p
{
 font-family: 'Montserrat','Myriad Pro', sans-serif;
 font-weight: normal;
 font-size: 10pt;
 line-height: 18pt;
 color: #fff;
 max-width: 640px;
 margin: 0 auto;
}

a.header-link
{
 color: var(--color-green);
 text-decoration: none;
}

nav
{
 margin-bottom: 60px;
}

#logo
{
 margin-bottom: 60px;
}

ul#menu
{
 list-style: none;
 display: inline-block;
}

ul#menu::after
{
 content: "";
 display: block;
 width: 400px;
 max-width: 80%;
 height: 20px;
 max-width: 80%;
 margin: 0 auto;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

ul#menu > li
{
 display: inline-block;
 margin: 0 1em;
 font-family: 'Montserrat', sans-serif;
 font-weight: 500;
 font-size: 11pt;
 color: #fff;
}

ul#menu > li > a
{
 display: inline-block;
 text-transform: uppercase;
 text-decoration: none;
}

ul#menu > li > a:hover
{
 color: var(--color-green);
}

#menu-h {display: none; cursor: pointer;}
#menu-h > svg {fill: #fff;}
#menu-h:hover > svg {fill: var(--color-green);}

h3
{
 font-family: 'Myriad Pro', sans-serif;
 text-transform: uppercase;
 color: var(--color-green);
 font-size: 12pt;
 letter-spacing: 3pt;
 font-weight: normal;
 text-align: center;
 margin: 40px auto;
}

h3 > a
{
 text-decoration: none;
 color: inherit;
}

h4
{
 font-family: 'Myriad Pro', sans-serif;
 color: #fff;
 font-size: 12pt;
 letter-spacing: 1pt;
 font-weight: normal;
 text-align: left;
 margin: 40px auto;
}

.two-columns h4
{
 -webkit-column-span: all;
 column-span: all;
}

.border-button,
.border-button-project
{
 padding: 10px 40px;
 cursor: pointer;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 color: #666;
 font-size: 9pt;
 letter-spacing: 1pt;
}

.more-button
{
 padding: 10px 40px;
 cursor: pointer;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 color: #666;
 font-size: 9pt;
 letter-spacing: 1pt;
 margin: 20px auto;
 text-align: center;
}

.work-more-button
{
 display: inline-block;
 padding: 10px 40px;
 cursor: pointer;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 color: #666;
 font-size: 9pt;
 letter-spacing: 1pt;
 margin: 20px auto;
 text-align: center;
 border: 2px solid var(--color-gray-on-black);
 color: var(--color-gray-on-black);
 background-color: transparent;
}

.work-more-button:hover
{
 color: var(--color-green);
 border: 2px solid var(--color-green);
}

#work
{
 background-color: rgba(0, 0, 0, .3);
 padding: 10px 10px 50px 10px;
 margin: 20px -20px -60px -20px;
}

#work h3
{
 margin-top: 0;
}

#work img
{
 max-width: 100%;
}

/* gallery */

#gallery
{
 padding-bottom: 60px;
}

#gallery-selector
{
 margin: 0 auto 40px auto;
 text-align: center;
 text-transform: uppercase;
 font-family: 'Myriad Pro', sans-serif;
 letter-spacing: 1pt;
 color: var(--color-dark-gray);
}

#gallery-selector > div
{
 width: 160px;
 display: inline-block;
 vertical-align: top;
 text-align: center;
 margin: 0 20px 20px 20px;
 cursor: pointer;
}

.gallery-filter
{
 display: inline-block;
 width: 41px;
 height: 41px;
 margin-bottom: 20px;
}

#gallery-selector > div:hover .gallery-filter,
#gallery-selector > div.active .gallery-filter
{
 background-position: 0 -41px;
}

#gallery-selector > div:hover,
#gallery-selector > div.active
{
 color: var(--color-green);
}

#gallery-custom
{
 background-image: url(../img/gallery-custom.png);
}

#gallery-monument
{
 background-image: url(../img/gallery-monument.png);
}

#gallery-public
{
 background-image: url(../img/gallery-public.png);
}

#gallery-villa
{
 background-image: url(../img/gallery-villa.png);
}


#gallery-elements
{
}

.gallery-item
{
 max-width: 100%;
 width: 250px;
 height: 250px;
 float: left;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 margin-bottom: 10px;
 position: relative;
 overflow: hidden;
 display: none;
}

.gallery-item-shown
{
 display: block;
}

.gallery-image
{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 background-color: var(--color-gray);
}

.gallery-image > img
{
 width: 100%;
 height: 100%;
}

.gallery-item:hover .gallery-image
{
 overflow: hidden;
 -webkit-transform: scale(1.05);
 -moz-transform: scale(1.05);
 -o-transform: scale(1.05);
 transform: scale(1.05);
 filter: none;
 -webkit-filter: grayscale(0%);
}

.gallery-item--width2
{
 width: 510px;
 height: 250px;
}

.gallery-item--height2
{
 width: 250px;
 height: 510px;
}

.gallery-link
{
 cursor: pointer;
}

.gallery-corner
{
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 width: 63px;
 height: 62px;
}

.gallery-item:hover > .gallery-corner
{
 background-position: 0 -62px;
}

.gallery-article
{
 background-image: url(/img/corner-article.png);
}

.gallery-gallery
{
 background-image: url(/img/corner-gallery.png);
}

.gallery-video
{
 background-image: url(/img/corner-video.png);
}

.gallery-lead
{
 position: absolute;
 width: 100%;
 bottom: 0;
/* background-color: var(--color-green); */
 background-color: rgba(0, 0, 0, 0.8);
 color: #fff;
 padding: 5px 10px;
 -webkit-opacity: 0;
 -moz-opacity: 0;
 -o-opacity: 0;
 opacity: 0;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}

.gallery-item:hover .gallery-lead
{
 -webkit-opacity: 1;
 -moz-opacity: 1;
 -o-opacity: 1;
 opacity: 1;
}

.gallery-lead > p
{
 margin-bottom: 0;
}

.gallery-lead > p.title
{
 color: var(--color-green);
 text-transform: uppercase;
 font-weight: bold;
}

.gallery-article
{
 background-image: url(/img/corner-article.png);
}

.gallery-gallery
{
 background-image: url(/img/corner-gallery.png);
}

.gallery-video
{
 background-image: url(/img/corner-video.png);
}

#image-gallery
{
 width: 100%;
}

#image-gallery > div
{
 text-align: center;
}

#image-gallery > div > img
{
 display: inline-block;
}

/* team */

#team-photos-container
{
 width: 100%;
 max-width: var(--site-max-width);
 text-align: center;
 margin: 60px 0;
 overflow: hidden;
}

#team-photos
{
 text-align: center;
 margin-bottom: 60px;
 height: 250px;
}

#team-photos > div
{
 display: inline-block;
 vertical-align: top;
 text-transform: uppercase;
 color: var(--color-green);
 font-family: 'Myriad Pro', sans-serif;
 margin: 0 10px;
}

#team-photos > div > img
{
 display: inline-block;
 margin-bottom: 10px;
}

/*
#team-photos::after
{
 display: block;
 position: relative;
 margin-top: -250px;
 height: 250px;
 z-index: 5;
 content: '';
 background: -moz-linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
 background: -ms-linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
 background: -o-linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(35%,rgba(255, 255, 255, 0)), color-stop(65%,rgba(255, 255, 255, 0)), color-stop(100%,rgba(255, 255, 255, 1)));
 background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
}
*/

/* chronology */

#chronology
{
 background: #000;
 padding: 20px 0;
}

#chronology-list
{
 position: relative;
 height: 400px;
 max-width: 100%;
 overflow-x: scroll;
}

#chronology-list ul
{
 padding-top: 300px;
 font-family: 'Myriad Pro', sans-serif;
}

#chronology-list ul > li
{
 position: relative;
 margin-right: 100px;
 display: inline-block;
 font-size: 11pt;
}

#chronology-list ul > li > strong
{
 color: var(--color-green);
}

#chronology-list ul > li > span
{
 display: inline-block;
 position: absolute;
 bottom: 40px;
 left: 20px;
 width: 35em;
 color: #fff;
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
 -ms-transform: rotate(-30deg);
 -o-transform: rotate(-30deg);
 -transform: rotate(-30deg);
 transform-origin: bottom left;
}

#chronology-list::after
{
 display: block;
 position: relative;
 margin-top: -340px;
 height: 380px;
 z-index: 2;
 content: '';
 background: -moz-linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 33%);
 background: -ms-linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 33%);
 background: -o-linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 33%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(33%,rgba(0,0,0,0.1)));
 background: linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.1) 33%);
}

/* */

#call-us
{
 background: #182710 url(../img/hod2-bg.jpg) center top no-repeat;
 background-size: 100%;
 text-align: center;
 color: #fff;
 padding: 40px;
 margin-bottom: 60px;
}

#call-us h3
{
 margin-top: 40px;
}

#call-us h2
{
 color: #fff;
 font-size: 20pt;
 margin: 20px;
}

#call-us p
{
 font-size: 1.2em;
 line-height: 1.8em;
}

#contact
{
 margin-bottom: 60px;
}

#contact h2
{
 margin: 20px;
}

#contact p
{
 margin-bottom: 120px;
 color: var(--color-gray);
}

#contact-container > div
{
 font-family: 'Myriad Pro', sans-serif;
 display: inline-block;
 vertical-align: top;
 width: 30%;
 margin: 0 1.666666%;
 text-align: center;
 color: var(--color-gray);
 font-size: 10pt;
}

.contact-icon
{
 width: 100%;
 text-align: center;
 margin-bottom: 20px;
 position: relative;
}

.contact-icon:before
{
 content: '';
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 border-top: 1px solid #888;
 transform: translateY(-50%);
 z-index: -1;
}

.contact-icon img
{
 padding: 0 20px;
 background-color: #fff;
}

.contact-icon span
{
 display: inline-block;
 z-index: 10;
 width: 70px;
 height: 30px;
}

.contact-icon:hover span
{
 background-position: 0 -30px;
}

.contact-text
{
 width: 90%;
 margin: 0 auto;
}

/* footer */

footer
{
 background-color: #000;
 color: var(--color-gray-on-black);
 padding: 60px 0;
}

footer p
{
 margin-bottom: 30px;
}

footer a
{
 color: var(--color-gray-on-black);
}

.facebook-icon
{
 display: inline-block;
 width: 30px;
 height: 30px;
 background-image: url(../img/icon-facebook.png);
}

.facebook-icon:hover
{
 background-position: 0 -30px;
}

ul#footer-menu
{
 list-style: none;
 margin-bottom: 30px;
}

ul#footer-menu > li
{
 display: inline-block;
 font-family: 'Montserrat', sans-serif;
 font-weight: 500;
 font-size: 11pt;
 text-transform: uppercase;
 padding: 0 1em .5em 1em;
}

ul#footer-menu > li > a
{
 text-decoration: none;
 color: #fff;
}

ul#footer-menu > li > a:hover
{
 color: var(--color-green);
}

#footer-links
{
 margin-bottom: 30px;
 color: var(--color-green);
}

#footer-links > a
{
 color: var(--color-green);
}

#footer-links > a:hover
{
 color: var(--color-gray);
}

ul#group-menu
{
 list-style: none;
 margin-bottom: 30px;
}

ul#group-menu > li
{
 display: inline-block;
 font-family: 'Montserrat', sans-serif;
 font-weight: 500;
 font-size: 11pt;
 text-transform: uppercase;
 padding: 0 .5em;
 color: var(--color-grey-on-gray);
}

ul#group-menu > li:not(:last-child):after
{
 content: "|";
 padding-left: .5em;
 color: var(--color-gray-on-gray);
}

ul#group-menu > li > a
{
 text-decoration: none;
}

ul#group-menu > li > a:hover
{
 color: var(--color-green);
}

#footer-copyright
{
 color: var(--color-gray-on-gray);
}

/* popup */

#popup
{
 position: fixed;
 opacity: 0;
 visibility: hidden;
 z-index: 100;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

#popup.is-visible
{
 opacity: 1;
 visibility: visible;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.7);
}

#popup-content
{
 background-color: #fff;
 margin: 2.5% auto;
 width: 90%;
 max-width: var(--site-max-width);
 max-height: 92%;
 padding: 40px;
 z-index: 1000;
 visibility: hidden;

 display: flex;
 flex-direction: column;
}

#popup-loader
{
 visibility: hidden;
 text-align: center;
}

#popup-content.is-visible,
#popup-loader.is-visible
{
 visibility: visible;
}

#popup-content h1
{
 padding-bottom: .5em;
 margin-bottom: 1em;
}

#popup-content h3
{
 text-align: left;
 margin: 1em 0;
 text-transform: none;
 letter-spacing: 0;
 font-size: 10pt;
}

#popup-close
{
/*
 float: right;
 margin: -20px -20px 0 0;
*/
 cursor: pointer;
 font-size: 25px;

 position: absolute;
 top: 20px;
 right: 20px;
}

#popup-content h1
{
 font-family: 'Myriad Pro', sans-serif;
 text-transform: uppercase;
 color: var(--color-green);
 font-size: 12pt;
 letter-spacing: 3pt;
 font-weight: normal;
 text-align: left;
 margin: 0 0 .5em 0;
}

#popup-date
{
 font-family: 'Myriad Pro', sans-serif;
 color: var(--color-green);
 font-size: 10pt;
}

#popup-container
{
 border-top: 1px solid var(--color-mid-gray);
 padding-top: .5em;
 margin-top: .5em;
 width: 100%;
 height: 100%;
 overflow-y: auto;
}

#popup-content
{
 position: relative;
}

#popup-content p
{
 color: var(--color-mid-gray);
}

#popup-content .video
{
 margin-bottom: 20px;
}

#popup-content img
{
 max-width: 100% !important;
 height: auto;
}

#popup-text img
{
 padding: 20px;
 max-width: 100%;
}

.popup-text-with-gallery
{
 display: inline-block;
 vertical-align: top;
 width: 30%;
}

#popup-gallery
{
 display: inline-block;
 vertical-align: top;
 width: 68%;
 margin-left: 2%;
}

#popup-left
{
 position: absolute;
 left: -40px;
 top: 300px;
}

#popup-right
{
 position: absolute;
 right: -40px;
 top: 300px;
}

/* arrow */

.arrow-left,
.arrow-right
{
 display: inline-block;
 background-position: 0 -27px;
 width: 27px;
 height: 27px;
 cursor: pointer;
}

.arrow-left
{
 background-image: url(/img/arrow-left.png);
}

.arrow-right
{
 background-image: url(/img/arrow-right.png);
}

.arrow-left:hover,
.arrow-right:hover
{
 background-position: 0 0;
}

/* hovereffects */
/* http://kevinjannis.github.io/hovereffects.css/ */

.effect {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-perspective: 400;
  -moz-perspective: 400;
  -ms-perspective: 400;
  -o-perspective: 400;
  perspective: 400;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1em;
  backface-visibility: hidden;
}
.effect:before, .effect:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transform-origin: center center 0 50%;
  -moz-transform-origin: center center 0 50%;
  -ms-transform-origin: center center 0 50%;
  -o-transform-origin: center center 0 50%;
  transform-origin: center center 0 50%;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  content: attr(data-effect);
  backface-visibility: hidden;
  top: 0;
  left: 0;
  color: rgba(0, 0, 0, 0.9);
}

.effect.zoom-in {
  color: transparent;
}
.effect.zoom-in:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  color: rgba(255, 255, 255, 1);
}
.effect.zoom-in:after {
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  color: rgba(0, 99, 195, 1);
}
.effect.zoom-in:hover:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.effect.zoom-in:hover:after {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* media queries */


@media screen and (max-width: 1030px)
{
 .bx-wrapper .bx-prev {left: 10px;}
 .bx-wrapper .bx-next {right: 10px;}
}

@media screen and (min-width: 640px)
{
 h2 {font-size: 24pt; letter-spacing: 3pt;}
}

@media screen and (max-width: 840px)
{
 header {padding: 30px 10px;}
 header h1 {margin: 40px 0 20px 0;}
 #work {margin: 20px -10px -30px -10px;}
 ul#menu li {margin: 0 1em 10px 1em;}
 .two-columns {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
 #popup-content img {float: none !important; max-width: 100% !important; margin: 10px;}
 #popup-content {padding: 20px;}
 #popup-close {margin: -10px 0 0 0;}
 #call-us {background-size: cover;}
 .popup-text-with-gallery, #popup-gallery {display: block; width: 100%; margin: 0 0 2em 0;}
}

@media screen and (max-width: 639px)
{
 #contact-container > div {width: 96%; margin: 0 0 20px 0;}
 ul#company > li {margin: 0 0 50px 0;}

 #menu-h {display: block; width: 35px; height: 35px; position: absolute; top: 10px; right: 10px;}
 ul#menu {display: none; float: right; list-style-type: none; background-color: rgba(0, 0, 0, .8); width: 100%; position: absolute; top: 50px; right: 0; height: auto; z-index: 9999; padding: 20px 0 20px 0; margin-right: 0;}
 ul#menu > li {display: block; text-align: right; padding: .5em; margin-top: 10px;}
 ul#menu > li > a {display: block; text-decoration: none; text-transform: uppercase; color: #fff;}
 ul#menu > li:hover > a {color: var(--color-green);}
 ul#menu::after {display: none;}
}

@media screen and (max-width: 550px)
{
 #gallery-selector > div {width: 100px; margin: 0 10px 20px 10px; font-size: 10pt; letter-spacing: 0;}
 .gallery-item {width: 200px; height: 200px;}
 .gallery-item--width2 {width: 410px; height: 200px;}
 .gallery-item--height2 {width: 200px; height: 410px;}
}

@media screen and (max-width: 480px)
{
 h2 {font-size: 16pt; letter-spacing: 1pt;}
 ul#footer-menu > li {display: block; margin-bottom: 1em;}
 ul#group-menu > li {display: block; margin-bottom: 1em;}
 ul#group-menu > li:not(:last-child):after {content: none;}
 #popup-close {float: none; margin: 0; position: fixed; right: 30px;}
}

@media screen and (max-width: 440px)
{
 .gallery-item {width: 150px; height: 150px;}
 .gallery-item--width2 {width: 310px; height: 150px;}
 .gallery-item--height2 {width: 150px; height: 310px;}
}