/* -- Général -- */
html, body {
  margin:0;
  padding:0;
}

body {
  color: #000;
  font-size: 1em;
  /*font-family: 'woodford_bourneregular', 'Trebuchet MS', verdana, arial, sans-serif;*/
  font-family: 'Archivo Narrow', sans-serif;
}

img {     
  image-rendering:optimizeSpeed;              /* Legal fallback                 */
  image-rendering:-moz-crisp-edges;           /* Firefox                        */
  image-rendering:-o-crisp-edges;             /* Opera                          */
  image-rendering:auto;  /* Chrome (and eventually Safari) */
  /*image-rendering:crisp-edges;*/                /* CSS3 Proposed                  */
  -ms-interpolation-mode:bicubic;             /* IE8+                           */
}
.margR0 {
  margin-right: 0;
}
.margL0 {
  margin-left: 0;
}
.marg0 {
  margin: 0;
}
.paddR0 {
  padding-right: 0;
}
.paddL0 {
  padding-left: 0;
}
.padd0 {
  padding: 0;
}
a, a:hover, a:focus {
  outline: none;
}
@keyframes tourner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes scrollBackground {
  0% {
    background-position-y: 0;
  }
  50% {
    background-position-y: 100%;
  }
  100% {
    background-position-y: 0;
  }
}
/* -- HP -- */
body.hp {
  margin: 0;
  padding: 0;
  cursor: none;
}

* { cursor: none !important; }

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-cursor.hover-state {
  width: 40px;
  height: 40px;
  background-color: #000;
  border: 2px solid #FFF;
  border-radius: 50%;
}

.cursor-svg {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cursor-svg path {
  fill:#FFF;
}

.custom-cursor.hover-state .cursor-svg {
  opacity: 1;
}

.header {
  border-bottom: 1px dotted #000;
  padding: 40px 0;
}

.logo-hp {
  width:150px;
  height:150px;
  display:block;
  background:#000;
  /*background: url('ton-image.jpg') no-repeat center / cover;*/
  mask-image: url('../img/logo-st-luc.svg');
  mask-repeat: no-repeat;
  mask-size: cover;
}

.logo-hp:hover {
  background: url('../img/gradient.jpg') no-repeat center / cover;
  animation: scrollBackground 5s linear infinite;
}

/*.logo-hp img {
  width:150px;
  height:150px;
}*/

.header-title {
  font-size: 1.2rem;
  font-weight: normal;
  color: #000;
  letter-spacing: 2px;
  border: 1px solid #000;
  padding: 10px 20px;
  border-radius: 40px;
  text-decoration:none;
}

.header-title:hover {
  background: url('../img/gradient.jpg') no-repeat center / cover;
  animation: scrollBackground 5s linear infinite;
  border-color:#FFF;
}

.main-content {
  padding: 40px 0 100px;
  min-height: 80vh;
}

.hero-text {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.2;
  color: #000;
  margin-bottom: 50px;
}

.photo-links {
  padding: 0;
  margin: 0 0 100px;
}

.photo-links li {
  display: inline-block;
  margin-right: 60px;
  margin-bottom: 0;
  position: relative;
}

.photo-link {
  font-family: "Space Grotesk", sans-serif;
  color: #000;
  text-decoration: none;
  font-size: 60px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  text-transform: uppercase;
  font-weight:700;
  white-space: nowrap;
}

.photo-link span {
  font-weight: 300;
  display: inline-block;
  border: 1px solid #000;
  padding: 0 16px;
  line-height: 1em;
  border-radius: 30px;
  font-style: normal !important;
}

.photo-link:hover {
  color: #000;
  font-style:italic;
  text-decoration: underline;
}

.photo-link:hover span {
  background-image:url('../img/gradient.jpg');
  background-size:cover;
  border-color: #FFF;
  animation: scrollBackground 5s linear infinite;
}

.hover-image {
  position: fixed;
  width: 400px;
  height: 300px;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.hover-image.active {
  opacity: 1;
}

.mention a {
  text-decoration:none;
  color:#000;
}

.mention a:hover {
  text-decoration:underline;
}


/* -- Menu -- */

.loadLoading {
  display: none;
}

.nav-side-menu {
  overflow: auto;
  font-size: 1.3em;
  font-weight: 200;
  position: fixed;
  /*position: relative;*/
  top: 0px;
  width: 290px;
  height: 100%;
  z-index: 1000;
  background-color: #fff;
  height: 100vh;
  border-right:1px dotted #000;
}
.nav-side-menu .brand {  
  display: inline-block;
  margin: 20px 0 0 0;
}
.nav-side-menu .brand IMG {
  max-width: 80px;
  color: #FFF;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.menu-list {
  margin-left: 40px;
  margin-top: 10px;
}

.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 30px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  border: none;
  line-height: 38px;
  margin-left: 10px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
.nav-side-menu li {
  padding-left: 20px;
  font-size: 1.3em;
  line-height: 50px;
}
.nav-side-menu li a {
  text-decoration: none;
  color: #000;
  font-weight: 700;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.nav-side-menu li a:hover {
  opacity: 0.6;
}

.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li a i.fa {
  padding-left: 0;
  font-size: 14px;
}
.nav-side-menu li:hover {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.nav-side-menu ul .sub-menu li a,
.nav-side-menu li .sub-menu li a {
  font-weight:200;
}
.likebox {
  margin-left: 95px;
  margin-top: 30px;
}
.tiragespro, .tiragespro:hover, .tiragespro:focus {
  display: block;
  margin: 20px 0 20px 95px;
  line-height: 15px;
  color: #000;
  text-decoration: none;
}

/* -- HOMEPAGE -- */
#preloader { 
  position: fixed; 
  left: 0; 
  top: 0; 
  z-index: 9999; 
  width: 100%; 
  height: 100%; 
  overflow: visible; 
  background: #FFF url('../img/loading.gif') no-repeat center center; 
}
/*.wrapperHome {
  position: relative;
  z-index: 11;
  width: 100%;
  height: 100%;
}
.wrapperHome a.bigLogo {
  display: block;
  margin-top: 160px;
}*/
.wrapperHome {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 11;
  margin-top:60px;
  padding: 0 20%;
}
.wrapperHome IMG {
  display: inline-block;
}
.wrapperHome a.bigLogo {
  display: inline-block;
  max-width: 140px;
  opacity: 0.6;
}
.wrapperHome H1 {
  text-align: center;
    /*color: #FFF;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 8em;*/
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .wrapperHome H2 {
    text-align: center;
    color: #FFF;
    font-family: 'Archivo Narrow', sans-serif;
    font-style: italic;
    font-size: 1.2em;
    white-space: nowrap;
    margin-top: 0px;
    letter-spacing: 0.25em;
  }
  .wrapperHome .separ {
    height: 1px;
    width: 102px;
    display: inline-block;
    background-color: rgba(255,255,255,0.5);
    margin: 10px 0 10px;
  }
  .wrapperHome a.btHome {
    display: inline-block;
    padding: 0 20px;
    background-color: #FFF;
    height: 40px;
    line-height: 40px;
    font-size: 1.6em;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    margin-top: 20px;
    text-decoration: none;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    margin-bottom: 20px;
    white-space: nowrap;
  }
  .wrapperHome a.btHome:hover {
    color: #000;
  }
  .frame {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(40,20,0,0.2);
    /*background-color: rgba(20,10,0,0.2);*/
  }
  .frame .borderTop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #FFF;
  }
  .frame .borderBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #FFF;
  }
  .frame .borderBottom P {
    display: none;
  }
  .frame .borderLeft {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 10px;
    background-color: #FFF;
  }
  .frame .borderRight {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 10px;
    background-color: #FFF;
  }
  body.bgHome {
    background: url("../img/homepage.webp") no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .wrapperHome ul.rezo {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 50px;
  }
  .wrapperHome ul.rezo li {
    display: inline-block;
  }
  .wrapperHome ul.rezo li a {
    color: #FFF;
    font-size: 2.4em;
    padding: 0 8px;
  }
/*video { 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('../img/preview-video-sud-ouest-usa.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
  object-fit: cover;
}*/



/* -- Loading --*/


/* -- Galerie Masonry */

.main-posts {
  position: relative;
  z-index: 6;
  padding: 0 40px 40px;
  box-sizing: border-box;
}
.main-posts H1 {
  font-size: 36px;
  text-align: right;
  margin: 20px 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.main-posts H1 span {
  font-weight: 400;
  display: inline-block;
  border: 1px solid #000;
  padding: 0 16px;
  line-height: 1em;
  border-radius: 30px;
}

.grid-sizer,
.post-masonry {
  width: 50%;
  display: block;
}
.post-masonry {
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  float: left;
}

.post-masonry .post-thumb {
  overflow: hidden;
  position: relative;
}
.post-masonry .post-thumb img {
  width: 100%;
  /*height: 100%;*/
  display: block;
  opacity: 1;
  color: #FFF;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.post-masonry .post-thumb:hover img {
  filter: contrast(120%);
  -webkit-filter: contrast(120%);
  -moz-filter: contrast(120%);
  -o-filter: contrast(120%);
  -ms-filter: contrast(120%);
}

.post-masonry .post-thumb .title-over {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.9);
  padding: 15px 20px;
}

.post-masonry .post-thumb .title-over h4 {
  font-size: 16px;
  font-family: 'robotoregular';
}

.post-masonry .post-thumb .title-over a {
  color: #fff;
}

.post-masonry .post-thumb .post-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(255,255,255,0.2);
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}

.post-masonry .post-thumb .post-hover .inside {
  position: relative;
    /*-moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);*/
  }

  .post-masonry .post-thumb .post-hover h4 {
    font-size: 16px;
    font-family: 'robotoregular';
    margin-bottom: 10px;
  }

  .post-masonry .post-thumb .post-hover a {
    color: #fff !important;
  }

  .post-masonry .post-thumb .post-hover i {
    display: block;
    margin-bottom: 10px;
  }

  .post-masonry .post-thumb .post-hover p {
    font-size: 12px;
  }

  .post-masonry .post-thumb .post-hover span {
    font-size: 12px;
    margin-bottom: 15px;
    display: block;
  }

  .post-masonry .post-thumb:hover .title-over {
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    visibility: hidden;
    opacity: 0;
    bottom: -50px;
  }
  .post-masonry .post-thumb .filter {
    position: absolute;
    z-index: 1000;
    background-color: rgba(213,213,213,0);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
  }
  .post-masonry .post-thumb .filter {
    display:none;
  }
  /*.post-masonry .post-thumb .filter SPAN {
    display: block;
    position: absolute;
    bottom: -20px;
    right: -20px;
    background-color: #FFF;
    z-index: 100;
    height: 20px;
    width: 20px;
    line-height: 30px;
    text-align: right;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    font-size: 1.5em;
    font-weight: normal;
    font-style: normal;
    border-top-left-radius: 25px;
    font-family: arial,sans-serif;
  }*/
  .post-masonry .post-thumb:hover .filter {
    background-color: rgba(213,213,213,0.2);
  }
  /*.post-masonry .post-thumb:hover .filter SPAN {
    bottom: 0;
    right: 0;
  }*/

  .lazyloading {
    background: #FFF url('../img/loading.gif') no-repeat center;
    min-height: 60px;
  }

/* -- Galerie Fullscreen */
.lg-outer.lg-visible {
  padding-left: 0;
}
.lg-backdrop.in {
  margin-left: 0;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
  -webkit-transform: none;
  transform: none;
  opacity: 0;
  -webkit-transition: -webkit-transform 1000ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1000ms cubic-bezier(0, 0, 0.25, 1) !important;
  -moz-transition: -moz-transform 1000ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1000ms cubic-bezier(0, 0, 0.25, 1) !important;
  -o-transition: -o-transform 1000ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1000ms cubic-bezier(0, 0, 0.25, 1) !important;
  transition: transform 1000ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1000ms cubic-bezier(0, 0, 0.25, 1) !important;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}
.lg-toolbar .lg-icon {
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
  color: #000;
  width: 70px;
}
.lg-toolbar .lg-icon:hover {
  color: #000;
  opacity: 0.6;
}

.lg-download {
  display: none;
}
/*.lg-toolbar .lg-icon i.fa-th {
  font-size: 0.75em;
  margin-right: 10px;
  line-height: 28px;
  display: inline-block;
  vertical-align: top;
}*/
.lg-toolbar .lg-icon i {
  font-family: 'lg';
  margin-right: 10px;
  font-style: normal;
}
.lg-toolbar .lg-icon i::after {
  content: "\e1ff";
}

#lg-counter {
  color: #000;
  font-size: 14px;
  padding-left: 20px;
  padding-top: 12px;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: transparent;
  border-radius: 0;
  color: #000;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
  font-family: inherit;
  text-indent: -9999px;
  width: 50px;
  height: 50px;
  background-image: url('../img/nav-lightgallery.png');
}
.lg-actions .lg-prev {
  background-position: 0 0;
}
.lg-actions .lg-next {
  background-position: 50px 0;
}
.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: transparent;
  border-radius: 0;
  color: #000;
  -webkit-transition: all 150ms ease-in-out;
  -moz-transition: all 150ms ease-in-out;
  -ms-transition: all 150ms ease-in-out;
  -o-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
  font-family: inherit;
  text-indent: -9999px;
  width: 50px;
  height: 50px;
  background-image: url('../img/nav-lightgallery.png');
}
.lg-actions .lg-prev {
  left: 0px;
}
.lg-actions .lg-next {
  right: 0px;
}
.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
  color: #000;
  opacity: 0.6;
}
.lg-backdrop {
  background-color: rgba(255,255,255,1);
}
.lg-sub-html, .lg-toolbar {
  background-color: transparent;
}
.lg-next, .lg-prev, .lg-toolbar {
  opacity: 1;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.lg-outer .lg-img-wrap {
  padding: 40px;
  border-left: 1px dotted #e9e4e1;
}
.lg-sub-html {
  color: #000;
  font-size: 12px;
}
.lg-icon {
  font-family: lg;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- MUSIC --*/
.music H2 {
  font-size: 1.4em;
  text-align: center;
  margin: 10px 0 50px;
}
.music IFRAME {
  width: 100%;
  height: 360px;
}

/* -- FORM CONTACT --*/
.contact {
  margin-top: 20px;
  border-left: 1px dotted;
  padding-left: 30px;
}
.contact a, .contact a:hover {
  color: #E9573E;
  text-decoration: none;
  font-size: 24px;
}


/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. If you don't care, no problem, just delete this.
Can this be done with Masonry options? */
@media (max-width: 767px) {  
  .hero-text {
    font-size: 2.5rem;
  }

  .photo-links li {
    display: block;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .hover-image {
    width: 200px;
    height: 250px;
  }
  .photo-link {
    font-size:40px;
  }
  .main-posts H1 {
    font-size: 24px;
  }
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    height: inherit;
    border-bottom: 1px dotted #000;
    padding-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 25px;
    z-index: 100 !important;
    color: #000;
    text-align: center;
    font-size: 1.3em;
    padding: 20px;
    z-index: 100000;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}
@media (max-width: 575px) {
  * { cursor: default !important; }
  .custom-cursor {
    display:none;
  }
  .photo-links,
  .mention {
    text-align:center;
  }
  .photo-link {
    font-size:24px;
  }
}
@media (min-width: 479px) { 
  .wrapperHome a.bigLogo {
    max-width: 170px;
  }
  .wrapperHome {
    padding:0;
  }
  .wrapperHome H1 {
    margin-top: 20px;
  }
  .wrapperHome .separ {
    margin: 14px 0 10px;
  }
  .wrapperHome H2 {
    font-size: 1.8em;
    letter-spacing: 0.4em;
  }
  .wrapperHome a.btHome {
    margin-top: 40px;
    margin-bottom: 40px;
  }  
  .grid-sizer,
  .post-masonry {
    width: 33%;
  }
  .frame .borderTop {
    height: 20px;
  }
  .frame .borderBottom {
    height: 20px;
  }
  .frame .borderLeft {
    width: 20px;
  }
  .frame .borderRight {
    width: 20px;
  }
}
@media (min-width: 767px) {
  .wrapperHome {
    position: absolute;
    height: 500px;
    width: 500px;
    margin-top:-250px;
    margin-left:-250px;
    top:50%;
    left:50%;
  }
  .frame .borderTop {
    height: 30px;
  }
  .frame .borderBottom {
    height: 30px;
  }
  .frame .borderLeft {
    width: 30px;
  }
  .frame .borderRight {
    width: 30px;
  }
  .frame .borderBottom P {
    display: block;
    text-align: center;
    color: #000;
    font-size: 1.1em;
    line-height: 30px;
  }
  .menu-list {
    margin-left: 30px;
  }  
  .nav-side-menu li {
    padding-left: 20px;
    font-size: 1em;
    line-height: 28px;
  }
  .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li {
    line-height: 28px;
  }
  .nav-side-menu {
    z-index: 1100;
  }
  .nav-side-menu .brand IMG {
    max-width: 150px;
  }
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
  .gallery {
    padding: 40px 40px 40px 320px;
  }
  .nav-side-menu .brand {  
    margin: 20px;
  }
  .main-posts {
    padding: 40px;
    max-width: 1400px;
  }
  .grid-sizer,
  .post-masonry {
    width: 25%;
  }
  .lg-outer.lg-visible {
    padding-left: 290px;
  }
  .lg-backdrop.in {
    margin-left: 290px;
  }
  .lg-sub-html {
    padding-left: 290px;
    padding-right: 10px;
  }
  .contact {
    margin-top: 106px;
    padding-left: 40px;
  }
  .contact a, .contact a:hover {
    font-size: inherit;
  }

}