@font-face{
  font-family:'talal';
  font-display: block;
  font-weight: 400;
font-style: normal;
src: url("/fonts/talal.woff2") format('woff2');
}
body,html {
    font-family:'talal', sans-serif; -webkit-overflow-scrolling: touch;padding:0;margin:0;font-size:100%;
    width:100%;background:#fff;background-color:rgba(255,255,255,1);
}
div,p,h1,h2,h3,a {
  font-display: fallback;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  }
  a{ text-decoration:none;font-size:1em;
  }
  h1{font-size: clamp(1.9rem, 2.8vw, 3.1rem)}
  h2{font-size: clamp(1.6rem, 2.2vw, 2.8rem)}
.fullscreen{
  position:fixed;top:0;bottom:0;z-index:9999;
  right:0;left:0;color:#fff;background:rgba(255,255,255,.99);
}
.fullscreen .holder{
  order:1;margin:auto;width:98%;min-height:98vh;
  display:flex;-webkit-display:flex;-moz-display:flex;
  flex-direction:column;-webkit-flex-direction:column;-moz-flex-direction:column;
}
.fullscreen .holder > img{display:flex;order:1;margin: auto;width:auto;max-width:94%;height:auto;
}
.fullscreen .closeme{transition:all .5s ease-in-out;}
.fullscreen .closeme:hover{transform:scale(1.2);-webkit-transform:scale(1.2);}
img   {background-origin: border-box;cursor:pointer;
-webkit-background-origin: border-box;}
.body {position:relative;width:100%;min-height:80vh;position:relative;background-size:cover;background-repeat:no-repeat;background-position:center center;}

.home {
  width:100%;margin:0;
  min-height:100vh;
  background-image:url('images/blurry.jpg');
  background-position:center top;
  background-origin: border-box;
  -webkit-background-origin: border-box;
  background-size:cover;
  overflow:hidden;
  overflow-x: scroll;
  -webkit-overflow:hidden;
  -webkit-overflow-x: scroll;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-justify-content: space-between;
    justify-content: space-between;
    -moz-justify-content: space-between;
  align-content: center;
  -webkit-align-content: center;
  -moz-align-content: center;
  transition:all .2s ease-in-out;
}
.weddingP {
  width:100vw;margin:0;padding:0;
  min-height:100px;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  flex-direction: row;
  align-content: center;
  -webkit-align-content: center;
  -moz-align-content: center;
  flex-direction: row;-webkit-flex-direction: row;-moz-flex-direction: row;-o-flex-direction: row;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  align-content: stretch;-webkit-align-content: stretch;-moz-align-content: stretch;
  justify-content: center;-webkit-justify-content: center;-moz-justify-content: center;
}
.weddingP img{order:1;flex:1 1 220px;display:block;width:auto;height:auto;margin:0 auto;align-self:center;-webkit-align-self: center;}

.cinema {
  width:90%;max-width:900px;min-width:280px;margin:0 auto;padding-top:60px;
  min-height:400px;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  flex-direction: column;
  flex-direction: column;-webkit-flex-direction: column;-moz-flex-direction: column;-o-flex-direction: column;
}
.cinema .cinema1{
  order:1;
  margin:.3em 0;
  width:100%;
  min-height:100px;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  justify-content: space-evenly;-webkit-justify-content: space-evenly;-moz-justify-content: space-evenly;-o-justify-content: space-evenly;
  flex-direction: row;
  flex-direction: row;-webkit-flex-direction: row;-moz-flex-direction: row;-o-flex-direction: row;}
  .cinema .cinema1 div{
    order:1;width:40%;min-height:200px;
  }
  
  .aboutcover{
    width:100vw;padding-top:70px;margin:0;
    display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;

  justify-content: center;-webkit-justify-content: center;-moz-justify-content: center;-o-justify-content: center;
  flex-direction: row;
  flex-direction: row;-webkit-flex-direction: row;-moz-flex-direction: row;-o-flex-direction: row;
  flex-wrap:wrap;-webkit-flex-wrap:wrap;
  }
.about{position:relative;order:1;margin:.3em;width:50%;min-width:280px;
}
.about p { flex-grow:1;width:96%;line-height:28px;color:#666;font-size:1em;
}
.aboutcover .imgcon { order:1;width:260px;height:auto;display:block;margin:1em;
}
.aboutcover img { width:260px;height:auto;display:block;margin:0 auto;
}
  .home > div {
    order:1;flex-grow:1;
    margin:auto;
    min-height:100vh;
    min-width:33.33vw;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    -ms-display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -moz-justify-content: space-between;
    align-content: center;-webkit-align-content: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    align-content: center;-webkit-content-items:center;-moz-content-items: center;
    align-items: center;-webkit-align-items:center;-moz-align-items: center;
  }
  .home > div  div{
    margin:auto;
    width:100%;
    align-self:center;
    -webkit-align-self:center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    -ms-display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    -webkit-justify-content: space-between;justify-content: space-between;-moz-justify-content: space-between;align-content: center;
    -webkit-align-content: center;-moz-align-content: center;align-items: center;
    -webkit-align-items:center; -moz-align-items: center;
  }
  .home div div  a {
    align-self:center;-webkit-align-self:center;
    order:1;min-width:100%;margin:auto;display:flex;
    min-width:auto;padding:.5em;text-align:center;border:none;text-decoration:none;
    color:#fff;font-size:1.2em;font-weight:bolder;
    background-color:rgba(0,0,0,.3);transition: all .4s ease-in-out;z-index:99;
  }
  .home div.cinematography  a {text-indent:20px;}
  .home div div  a:hover {transform:scale(.92);}
  .portrait, .cinematography, .photography{background-position:center top;background-size:cover;background-repeat:no-repeat;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    background-origin: border-box;
    -webkit-background-origin: border-box;
    filter: brightness(80%);
}
.home div.portrait, .home div.cinematography,.home div.photography{min-width:33.3333vw;}
.home div.photography{background-image:url('images/2.jpg');}
  .portrait{background-image:url('images/1.jpg');}
  .home div.cinematography{background-image:url('images/cinema.jpg');}

img {object-fit:scale-down;-webkit-object-fit:scale-down;-moz-object-fit:scale-down;}

.DetailsBar {
  position:fixed;
  left:0;right:0;top:0;
  z-index:9999;
  height:65px;
  max-height:65px;
  min-height:65px;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -o-justify-content: center;
  align-content: center;
  -webkit-align-content: center;
  -moz-align-content: center;
  -o-align-content: center;
  flex-direction: row-reverse;
  -webkit-flex-direction:row-reverse;
  -o-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  transition:all 6s ease-in-out;
  -webkit-transition:all 6s ease-in-out;
  background-color:rgba(0,0,0,.50);
  }
.Bar,.social{
    order:1;
    margin:auto;
    width:100%;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    -o-display: flex;
    -ms-display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -o-flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-content: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    
}
.social{
  width:fit-content;-webkit-width:fit-content;-moz-width:fit-content;-o-width:fit-content;
  position:fixed;background-color:rgba(0,0,0,.50);
  bottom:0px;left:0px;
  width:140px;height:38px;
  z-index:999;
  padding:.2em;
}
.social a {order:1;margin:auto .8em;cursor:pointer;border:none;text-decoration:none;width:32px;height:32px;background-size:28px 28px;background-repeat: no-repeat;
background-position:center center;}
.social a.fb {background-image:url('images/fb.svg');}
.social a.tw {background-image:url('images/tw.svg');}
.social a.ins {background-image:url('images/ins.svg');}
.menuBar{
  order:1;
  width:100%;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -o-justify-content: center;
  align-content: center;
  -webkit-align-content: center;
  -moz-align-content: center;
  -o-align-content: center;
  flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  }
 
  
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }
  
  .scale {
  transform: scale(.9);
  -webkit-transform: scale(.9);
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  }
  
  .sticky+.content {
  padding-top: 102px;
  }
  
.space {
  order: 1;
  flex-grow: 1;
  }
  
ul.links {
  flex-grow:1;
  list-style:none;
  order: 1;
  min-height:50px;
  margin:0;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  border:none;
  }
  ul.links li {display:inline-block;min-width:60px;line-height:45px;font-size:.9em;text-decoration:none;text-align:center;order:1;margin:0 .5em;color:#eaeaea;flex-basis: auto;}
  .links a {color:#fefefe;}
  .links a:hover {color:#ccc;}
  .links a.active {color:#ccc;}

  
.logoBox {
  order: 1;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  }
  .logoBox a{text-decoration:none;font-size:1.3em;font-weight:bold;display:flex;color:#fff;margin:auto .5em;}

  
 


/*grid*/
.column{
  order:1;
  margin:0;
  background-color:#ffffff;
  width:100vw;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  -ms-display: flex;
  flex-direction: row; -webkit-flex-direction: row;-moz-flex-direction: row;-o-flex-direction: row;
  justify-content: top;
  -webkit-justify-content: top;flex-wrap:wrap;-webkit-flex-wrap:wrap;
}
.column .row{align-self:top;-webkit-align-self:top;margin:0;padding:0;border:0;background:#fff;
  object-fit:cover;object-position: center;cursor:pointer;
}
@media only screen and (min-width:1200px) {
  .column .row{width:20vw;background-size:cover;height:40vh;}
}
@media only screen and (max-width:1000px) {
  .column .row{width:25vw;height:40vh;}
}
@media only screen and (max-width:800px) {
  .column .row{width:33.333vw;height:42vh;}
}
@media only screen and (max-width:480px) {
  .column .row{width:50vw;height:33.3333vh;}
}
@media only screen and (max-width:399px) {
  .column .row{width:100vw;height:65vh;}
}

/**/
          .contact{order:1;width:90%;min-width:240px;max-width:400px;}
          .contact p{font-size:1em;}

          .contact form{width:98%;
            display: flex;
            -webkit-display: flex;
            -moz-display: flex;
            -o-display: flex;
            -ms-display: flex;
            flex-direction: row;
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            -o-flex-direction: column;
            margin:2em auto;max-width:340px;
            }
            .contact form *{text-align:right;width:96%;order:1;flex-grow:1;margin:.8em auto;min-height:45px;color:#333;font-size:.85em;}
            .contact form input{border:none;border-bottom:1px solid #d9d9d9;outline:none;background:#fefefe}

            .contact form label{border:none;color:#666;font-size:.9em;text-align:left;margin-top:.5em;}
            .contact form textarea{outline:none;width:98%;order:1;flex-grow:1;margin:.5em auto;min-height:100px;border:none;border-bottom:1px solid #aaa;}
            .contact form input[type=submit]{font-size:1em;height:35px;text-align:center;flex-grow:1;margin:1em auto;
            border:1px solid #999;cursor: pointer;transition:all .5s ease-in-out
          }
          .contact form input[type=submit]{width:80px;height:35px;}
          .contact form input[type=submit]:hover{transform:scale(.90)}
          

          @keyframes blink-animation {
            to {
              visibility: hidden;
            }
          }
          @-webkit-keyframes blink-animation {
            to {
              visibility: hidden;
            }
          }

          /*  BURGER
========================================== */

.burger {
  order:1;
  display:flex;
  -webkit-display:flex;
  flex-direction:column;
-webkit-flex-direction:column;

-moz-flex-direction:column;

  position:relative;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  z-index: 10;
}

.burger span {
  position:relative;
  display:flex;order:1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin:auto;
}

.burger span, .burger span::before, .burger span::after {
  width: 30px;
  height: 3px;
  background-color: #bdb9b9;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.burger span::before, .burger span::after {
  position: absolute;
  content: "";
}

.burger span::before { top: -9px; }

.burger span::after { top: 9px; }

.burger.clicked span { background-color: transparent; }

.burger.clicked span::before {
  -webkit-transform: translateY(9px) rotate(45deg);
  -moz-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -o-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}

.burger.clicked span::after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -moz-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  -o-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}

.burger.clicked span:before, .burger.clicked span:after { background-color: #ffffff; }

.burger:hover { cursor: pointer; }

/*  NAV
========================================== */

nav {
  background-color: rgba(0,0,0,.50);
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 300px;
  width: 100%;
  padding: 2em .2em;
  padding-top:100px;
  overflow-y: auto;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

nav.show {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}

nav.show ul.main li {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}

nav.show ul.main li:nth-child(1) { transition-delay: 0.15s; }

nav.show ul.main li:nth-child(2) { transition-delay: 0.3s; }

nav.show ul.main li:nth-child(3) { transition-delay: 0.45s; }

nav.show ul.main li:nth-child(4) { transition-delay: 0.6s; }

nav.show ul.main li:nth-child(5) { transition-delay: 0.75s; }

nav.show ul.main li:nth-child(6) { transition-delay: 0.9s; }

nav.show ul.main li:nth-child(7) { transition-delay: 1.05s; }

nav.show ul.main li:nth-child(8) { transition-delay: 1.2s; }

nav.show ul.main li:nth-child(9) { transition-delay: 1.35s; }

nav.show .about, nav.show .social, nav.show ul.sub {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  transition-delay: .85s;
}


nav ul.main { list-style-type: none; }

nav ul.main li {
  margin-bottom: 20px;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
nav ul.main li:last-of-type { margin-bottom: 0px; }

nav ul.main li a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .9em;
  display: block;
  font-weight: 400;
  padding: 5px 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

nav ul.main li a span { color: #b7ac7f; }

nav ul.main li a:hover { color: #b7ac7f; }


nav .social a {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 25px;
}

nav .social a:last-of-type { margin-right: 0px; }

nav .social a:hover svg path, nav .social a:hover svg circle { fill: #b7ac7f; }

nav .social a svg {
  width: 100%;
  height: 100%;
}

nav .social a svg path, nav .social a svg circle {
  fill: #ffffff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

nav ul.sub {
  list-style-type: none;
  margin-top: 40px;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

nav ul.sub li { margin-bottom: 10px; }

nav ul.sub li:last-of-type { margin-bottom: 0px; }

nav ul.sub li a {
  color: #ffffff;
  font-size: 0.9em;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

nav ul.sub li a:hover { color: #b7ac7f; }

/*  OVERLAY
========================================== */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
}

.overlay.show {
  opacity: 0.8;
  visibility: visible;
}
.stickLogo {
        width:140px;
}
.stickLogo img {
        max-width:120px;height:auto;display:block;margin:0 auto;
}

@media only screen and (max-width:800px) {
  ul.links {
    display: none;
  }
  .burger {
    display: flex;
  }

  .about{width:94%;}

  .cinema .cinema1{
    justify-content: center;-webkit-justify-content: center;-moz-justify-content: center;-o-justify-content: center;
    flex-direction: column;
    flex-direction: column;-webkit-flex-direction: column;-moz-flex-direction: column;-o-flex-direction: column;}
    .cinema .cinema1 div{
      width:100%;margin:.5em 0;
    }
    /* .weddingP {
    flex-direction: column;-webkit-flex-direction: column; -moz-flex-direction: column;-o-flex-direction: column;
    }.weddingP img{width:auto;height:auto;max-width:99%;max-height:99vh;} */

    .flip{display:none;}.menuBurger{display:block;}

    .portrait{position:absolute;top:0;right:0;left:0;
      -webkit-clip-path: polygon(100% -3%, 0 100%, 0 0);
clip-path: polygon(100% 0, 0 100%, 0 0);
    } .portrait div a{position:absolute;left:12px;top:22%;}
    .photography{
      position:absolute;top:20;right:0;left:0;bottom:20;
      /* -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0); */
      -webkit-clip-path: polygon(0% 52%, 98% 100%, 100% 0%);
      clip-path: polygon(0% 52%, 98% 100%, 100% 0%); 
      /* clip-path: polygon(0 50%, 100% 100%, 100% 0);  */
    }
       /* .photography div a{} */
    .cinematography{position:absolute;bottom:0;right:0;left:0;
      -webkit-clip-path: polygon(100% 100%, -7% 0, 0 100%);
      clip-path: polygon(100% 100%, -7% 0, 0 100%);background-image:none;
    }
    .cinematography div a{display:block;position:absolute;left:2px;bottom:10%;}
      
    .home {
        position:relative;height:100vh;flex-direction: column;-webkit-flex-direction: column;-moz-flex-direction: column;-o-flex-direction: column;
      }
    .home{
          min-width:100%;min-height:15vh;
        }
    .home div.portrait,.home div.cinematography{
          min-width:100%;min-height:50vh;
        }
        /* .home div.photography{min-width:100%;min-height:20vh;background-image:none;} */
}


@media only screen and (max-width:405px) {
    .weddingP {
      width:100%;flex-direction: column;-webkit-flex-direction: column; -moz-flex-direction: column;-o-flex-direction: column;
      }.weddingP img{width:100%;min-width:100%;height:auto;}
}
@media only screen and (min-width:800px) {
  .links {
    display: flex;
  }
  .burger {
    display: none;
  }
}