#AboutProjectPage { }

#AboutProjectPage #ContactHeader { min-height:600px; background-image:url(/Images/aboutprojectbg.jpg); background-size:cover; background-repeat:no-repeat;
                                   background-position:center top;
}

#AboutProjectPage #header { display:block; width:100%; background-color:var(--color11); position:fixed; top:0; left:0; height:100px; z-index:300;
                         background-color:rgba(0,0,0,0.7);
}

#AboutProjectPage #header.fix { background-color:var(--color11); }
#AboutProjectPage #header .hLogo{ height:60px; width:310px; top:17px; }
#AboutProjectPage #header .hLogo a{ background-image:url(/Images/logo-rev.png); }
#AboutProjectPage #header .hMenu #MenuButton,#ApartmentPage #header .hMenu #CloseMenu{ top:30px; z-index:400; }
#AboutProjectPage #MenuButton .text, #AboutProjectPage #CloseMenu .text, #AboutProjectPage #HomeButton .text { color:white; }
#AboutProjectPage #MenuButton .butt #buttonImg, #AboutProjectPage #HomeButton .butt #buttonImg { fill:var(--color9); }
#AboutProjectPage #AboutProjectHeader { position:relative; width:100%; height:500px; background-image:url(/Images/aboutprojectbg.jpg); background-repeat:no-repeat;
                                        background-position:center center; background-repeat:no-repeat; background-size:cover;
}
#AboutProjectPage #apTitle { background-color:var(--color7); color:white; padding:4rem 0; }
#AboutProjectPage #apTitle h1{ margin:0; padding:0; color:var(--color10); font-size:1.8rem; }
#AboutProjectPage #apTitle p{ color:var(--color10); }

#AboutProjectPage #VideoBackground { position:relative; width:100%; height:100%; display:block; left:0; top:0; overflow:hidden; }
#AboutProjectPage #VideoBackground .shadow{ position:absolute; left:0; top:0; width:100%; height:100%;
                                       background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.7987570028011204) 0%, rgba(0,0,0,0.5074404761904762) 29%, rgba(0,0,0,0) 47%, rgba(0,0,0,0.16290266106442575) 82%, rgba(0,0,0,1) 100%);
}
#AboutProjectPage #VideoContent { position:absolute; left:0; top:0; display:block; width:100%; height:100%;  }
#AboutProjectPage #VideoContent video{   position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

    }
#AboutProjectPage .TopTitleContent{ position:absolute; top:0; bottom:0; margin:auto; width:calc(50% - 60px); left:60px; height:auto; display:table;  }
#AboutProjectPage .TopTitleContent .titleUserText{ color:white; font-size:2rem; }
#AboutProjectPage #mousescroll { width:80px; height:80px; position:absolute; left:0; right:0; bottom:60px; margin:auto; cursor:pointer;
}
#AboutProjectPage #mousescroll:hover{-ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition: transform .2s;
}

#AboutProjectPage .apUserText { padding:4rem 0; }
#AboutProjectPage .apUserText .text{ width:65%;  }
#AboutProjectPage .apUserText .video,#AboutProjectPage .apUserText .image{ width:35%; }
#AboutProjectPage .apUserText .video video,#AboutProjectPage .apUserText .image img{ max-width:100%; }
#AboutProjectPage #apUserText1 .text { width:calc(65% - 30px); padding-right:30px; }
#AboutProjectPage #apUserText1 .img { width:35%;  }
#AboutProjectPage #apUserText1 .img img{ max-width:100%; }
#AboutProjectPage #apUserText2 .text { width:calc(65% - 30px); padding-left:30px; }
#AboutProjectPage #apUserText2 { background-color:var(--color2); }
#AboutProjectPage .apUserText .text { width:100%; }
#AboutProjectPage .button.location,#AboutProjectPage .button.apartment { width:auto; padding-right:2rem; padding-left:2rem; display:table; }

/*#AboutProjectPage .gallery { padding:2rem }*/
#AboutProjectPage .gallery h2{ width:100%; text-align:center; margin-bottom:2rem; }
#AboutProjectPage .gallerycontent { display:flex; flex-wrap:wrap; width:100%; }
#AboutProjectPage .gallerycontent .item{ width:calc(50% - 15px); margin-right:15px; margin-bottom:15px; }
#AboutProjectPage .gallerycontent .item a{ display:table; width:100%; }
#AboutProjectPage .gallerycontent .item img{ max-width:100%; display:table; }
#AboutProjectPage #apUserText1 .img video { max-width:100%; }

@media all and (max-width: 90em) {
    #AboutProjectPage #apTitle { padding:2rem 0; }
}

@media all and (max-width: 68em) {
    #AboutProjectPage #apTitle h1 { font-size:1.4rem; }
    
}

@media all and (max-width: 58em) {
    #AboutProjectPage .flex{ flex-direction:column-reverse; }
    #AboutProjectPage #apUserText1 .text,#AboutProjectPage .apUserText .video,#AboutProjectPage .apUserText .image { width:100%; padding:0; }
    #AboutProjectPage #apUserText2 .text { width:100%; padding:0; }
}

@media all and (max-width: 38em) {
    #AboutProjectPage #header .hLogo { width:250px; }
}

@media all and (max-width: 30em) {
    #AboutProjectPage #header .hLogo { height:40px; width:190px; }
}