@-webkit-keyframes glow5 {

    0%, 40%     {
         transform: scale(1);
     }
    40%, 50%       {
         transform: scale(4);
     }
    90%, 100%     {
         transform: scale(1) translateX(-1px);
     }
 
 }
 @-webkit-keyframes glow {
     to {
          border-color:rgba(255,255,255,.75);
     }
 }
 @-webkit-keyframes glow2 {
     to {
          border-color:rgba(255,0,0,0);
     }
 }
 @keyframes glow {
     to {
          border-color:rgba(255,255,255,.75);
     }
 }
 @keyframes glow2 {
     to {
          border-color:rgba(255,0,0,0);
     }
 }
 .hide {
 display:none;
 }
 #animateOn{display:none; cursor:pointer; position:absolute; bottom:0px; left:0px; z-index:1004; background:#981e32;}
 #animateOff{display:none; cursor:pointer; position:absolute; bottom:0px; left:0px; z-index:1005; background:#981e32;}
 .powerBtn {height:22px; width:21px; margin:5px auto 0; background: url("../images/power.png") no-repeat center;}
 .animateText {color:#53565a; font-size:11px; padding:4px 3px 3px; text-align:center; line-height:1em;}
 
 .overlayF {border: 3px solid #fff;box-sizing: border-box;
 
     -webkit-animation: glow2 .4s forwards;
     -moz-animation: glow2 .4s forwards;
     animation: glow2 .4s forwards;  }
 /*
 *
 *
 *
 *
 *
 *
 *
 *PictureMosaicsViewer Styles
 *
 *
 *
 *
 *
 *
 *
 */
 
 @-webkit-keyframes glow {
     to {
          border-color:rgba(255,255,255,.75);
     }
 }
 #navControlBox {display:block; position:absolute !important; width:40px; z-index:3; top: 5px; right: 5px;line-height: 0px;line-height: 0px;}
 #fScreenNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center;background-position:0 0;}
 .minScreenNavControl {background-position:0 -40px !important;}
 .mobileFullscreenNavControl {background-position:0 -200px !important;}
 .mobileExitFullscreenNavControl {background-position:0 -240px !important;}
 #resetNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center; background-position:0 -80px; margin-top:3px;}
 #plusNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center; background-position:0 -120px; margin-top:3px;}
 #minusNavControl {cursor:pointer; width:40px; height:40px; background: url("../images/controls/navControls.png") no-repeat center; background-position:0 -160px; margin-top:3px;}
 #fScreenNavControl:hover, #resetNavControl:hover, #plusNavControl:hover, #minusNavControl:hover {   box-shadow:rgba(255,255,255, 0.7) 0 0 0 1px inset;}
 .overlay {border: 3px solid white;box-sizing: border-box;z-index:1; box-shadow: 0px 0px 0px 3px #074538;}
 .overlayBig{border: 3px solid white;box-sizing: border-box;z-index:1;box-shadow: 0px 0px 0px 3px #ff8da3;width:286px !important;height:286px !important;}
 .overlayS2 {border: 3px solid white;box-sizing: border-box;}
 .overlayS3 {
     -webkit-animation: glow5 2.0s forwards;
     -moz-animation: glow5 2.0s forwards;
     animation: glow5 2.0s forwards;
         }
 .overlayS {border: 2px solid white;  box-sizing: border-box;
     -webkit-animation: glow 1.0s infinite alternate;
     -moz-animation: glow 1.0s infinite alternate;
     animation: glow 1.0s infinite alternate;
         }
 
 
 #swiperPMHolder {background-color:rgba(0,0,0,.85); display: none; z-index: 999; position: fixed; height: 100vh;}
 #swiperPMHolderFS {background-color:rgba(0,0,0,.85); display:none; z-index: 999;}
 
 
 
 #viewer_holder{height:auto;
 width:100%;
 /*max-width: 902px;*/
 position: relative;
 background: #FFF;
 margin:0 auto;
 }
 #pm_viewer{cursor: pointer;
 margin:0 0;
 position:relative;
 -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 z-index: 0;
 width:100%;
 height: 100%;
 display:inherit;
 }
 /* Button Styles */
 a{outline:none;    text-decoration:none;}
 .click {cursor:pointer; border:0; }
 /*input {background-color:transparent; border:none; resize:none; outline:none;  -webkit-appearance: caret; -moz-appearance: caret;}*/
 
 /*
 *
 *
 *
 *
 *
 *
 * FANCY BOX styles
 *
 *
 *
 *
 *
 *
 */
 .fancybox-inner { overflow:hidden !important; }
 
 
 .embedOverlay {
 background-color: #fff;
 height:auto;
 left: 50%;
 margin-left: -250px;
 margin-top: -50px;
 outline: 9999px solid rgba(0, 0, 0, 0.5);
 position: fixed;
 top: 25%;
 width: 500px;
 z-index: 10000;
 }
 #overlayCloseButtononclick{float:right; margin:5px 5px 0 0;}
 .embedClose{height:12px;width:12px;background:url(../images/closeB.png) no-repeat; position: absolute; right: 8px; top: 8px;}
 .embed_inner {padding: 5px; display: flex;}
 #embedImg { width:75px; height:75px; border: 4px solid #074538; margin:8px; }
 
 .embedPhoto {width: 95px; margin-bottom: 5px;}
 .embedInfo {width: 390px; margin-left: 5px; vertical-align: super; color: #000;}
 .embedInstr {margin-top: 10px; font-weight: 600; }
 #embedLink, #embedBtn {display: inline-block; vertical-align: bottom;}
 #embedLink {font-weight: bold; font-size: 15px; word-break: break-all;}
 .copyLinkBtn {background-color: transparent; outline: none;}
 .copyLinkBtn img {height: 24px; }
 .copyLinkBtn:active {border: 2px solid #73c259;}
 
 
 /*overlay info*/
 
 #viewer_holder{overflow: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);}
 #search_holder{position:absolute; z-index:998; top:0px; right:50px; width:232px; display:none;}
 #search_controls{background-color:#29292d; width:232px; height:21px;}
 #pm_viewer_holder{width:100% !important; -webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
 #pm_viewer{width:auto !important;background-color:#f7f9f8;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
 #search_drop{background: url('/images/searchBg.png') repeat; display:none;}
 #viewer_animation{position:absolute; width:100%; height:100%; margin:auto; left:0; right:0; top:0; bottom:0; cursor:pointer; display:none; z-index:2;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
 #viewer_animation_holder {position:absolute; top:0; left:0;}
 #animateSwitch{background: url() repeat; position:absolute; width:100%; height:100%; margin:auto; left:0; right:0; top:0; bottom:0; cursor:pointer; display:none; z-index:1;}
 
 #infoHolder {display: table;}
 .infoHolder{
 display:block;
 position: absolute;
 right:-250px;
 width:242px;
 z-index:1000;
 padding:0px;
 vertical-align:top;
 text-align:left;
 background: rgba(255,255,255,0.8);
 min-height:128px;
 pointer-events:auto !important;
 color: #53565a;
 }
 .rightInfo{
 left:-244px;
 }
 .rightBottomInfo{
 left:-244px;
 top:-10px !important;
 }
 .bottomInfo{
 right:-242px;
 bottom:2px !important;
 }
 
 #infoClose {position:absolute; top:4px; right:4px;}
 .infoImgHolder{position:relative;}
 .imgInfo {position:relative;}
 .photoData{padding:10px;}
 .photoName{line-height:normal; font-weight:bold; font-family: 'qfvf'; text-transform: capitalize;}
 .photoCap{margin:5px; line-height:normal; word-wrap:break-word; max-width: 218px; max-height:155px; overflow-y:auto; font-size: 14px; font-weight: 500; font-family: 'qfvf'}
 .school{margin:5px; line-height:normal; word-wrap:break-word; max-width: 218px; max-height:155px; overflow-y:auto; font-size: 14px; font-weight: 500; font-family: 'qfvf'}
 .photoName_AR{margin-top:10px; line-height:normal; word-wrap:break-word; max-width: 218px; max-height:155px; overflow:inherit; font-size: 14px; font-weight: 500; font-family: 'qfvf'; text-align: right;}
 .caption_AR{margin-top:10px; line-height:normal; word-wrap:break-word; max-width: 218px; max-height:155px; overflow:inherit; font-size: 14px; font-weight: 500; font-family: 'qfvf'; text-align: right;}
 .school_AR{margin-top:10px; line-height:normal; word-wrap:break-word; max-width: 218px; max-height:155px; overflow:inherit; font-size: 14px; font-weight: 500;font-family: 'qfvf'; text-align: right;}
 
 .photoCapTitle {margin: 5px;}
 .socialData {margin:5px 5px 5px 5px;}
 .sharePhotoBlock {display: list-item; text-align: center;}
 .fb-like {margin: 0; margin-right: 5px;}
 .embed{width:24px; height:24px; background:url(../images/embedPhoto.png) no-repeat;}
 .line {margin-top:10px; width:95%; height:1px; background:#fff; margin: 0 auto;}
 
 .swiper-close {
     position: absolute;
     top: -25px;
     right: -25px;
     width: 50px;
     height: 50px;
     cursor: pointer;
     z-index: 8040;
     background-image: url('../images/delete.png');
     background-size: contain;
     background-color: rgba(255, 255, 255, 0.6);
 }
 
 .socialShare {width: 95%; margin: 0 auto 5px; display: none; align-items: center; justify-content: center; }
 .infoShareTxt {font-size: 16px; margin-right: 5px;}
 .infoShareTxt span {    font-family: 'qfvf';}
 
 
 
 /*swiper*/
 .swiper-slide {
     text-align: center;
     font-size: 18px;
     width:100% !important;
     /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
 }
 
 #closeSwiper {height:52px; width:64px; background-color:#FFF; position:absolute; top:0; right:0; z-index:100013; text-align:center; color:#106a37; padding-top: 12px; cursor:pointer;font-size: 45px;}
 #closeSwiper:hover {color:grey;}
 #swiperPMHolderFS{
     width: 100%;
     height: 100%;
     top:0px;left:0px;
     position: absolute;
     z-index: 10;
 }
 #swiperPMHolder{
     width: 100%;
     height: 100%;
     top:0px;
     left:0px;
     position: absolute;
     position: fixed;
     overflow: auto;
 }
 .swiper-container {
     width: 100%;
     height: 100%;
     z-index:9;
 
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .swiperShareMobile ul {
     float: none !important;
     width: 100%;
 }
 
 .swiperShareMobile .grey_b12 {
     color: #000 !important;
 }
 
 
 .swiperShareMobile li {
     display: inline-block;
 }
 
 .infoHolderSwiper {
     width: 100%;
     border:5px #fff solid;
     background:#fff;
     position:relative;
     max-width: 500px;
     margin-top: 25px;
 }
 
 .swiperUser {display: flex;justify-content: space-between; margin-bottom: 15px;}
 
 .swiperInfo {background:#FFF; padding: 20px; color: #53565a; display: flex; justify-content: center; align-items: center; flex-direction: column;}
 .swiperImg img {width: 100%;}
 .swiperData {display: flex; flex-direction: column;}
 .swiperData {width: 100%; text-align: left; word-wrap: break-word;}
 .swiperName, .swiperCap {padding-left: 5px; font-size: 14px; line-height: 16px; text-align: left; }
 .swiperSchool{text-align: right; font-size: 14px; line-height: 16px; padding-right: 5px;}
 .swiperCap {height: auto;  max-height: 80px; overflow: scroll; font-size: 14px; line-height: 16px; font-weight: normal; margin-bottom: 10px;  word-break: break-word;}
 .swiperCap::-webkit-scrollbar {
     display: none;
   }
   .swiperCap {
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none;  /* Firefox */
   }
 .arSwipe {text-align: right;}
 .swiperName {text-transform: capitalize;}
 .swiperSchool, .swiperName {margin-top: 15px; color: #034436;}
 
 .swiperShare {display: none; align-items: center; justify-content: center;}
 .swiperShareTxt {font-weight: bold; margin-right: 20px;}
 .swiperShareTxt span {    font-family: 'qfvf';}
 .sPhotoFb, .sPhotoTw, .shareEmbed, .sPhotoli {display: inline-block; margin-left: 15px;}
 .sPhotoFb{width:20px; height:20px; background: url(../images/social.png) no-repeat;background-position: -32px 0; margin: 0; background-size: auto 24px;}
 .sPhotoTw{width:24px; height:22px; background: url(../images/social.png) no-repeat; background-position: -74px 0; background-size: auto 24px;}
 .shareEmbed {width:20px;height:20px; background:url(../images/embedPhoto.png) no-repeat; background-size: contain;}
 .sPhotoli {width:20px;height:20px; background:url(../images/link_red.png) no-repeat; background-size: contain;}
 
 .swipeShareFB, .swipeShareTW, .swipeShareEmb, .swipeShareLi  {display: inline-block; margin-left: 12px;}
 .swipeShareFB{width:24px; height:24px; background: url(../images/social_white.png) no-repeat;background-position: -32px 0; margin: 0; background-size: auto 24px;}
 .swipeShareTW{width:24px; height:24px; background: url(../images/social_white.png) no-repeat; background-position: -76px 0; background-size: auto 24px;}
 .swipeShareEmb {width:32px;height:24px; background:url(../images/embedPhoto_white.png) no-repeat; background-size: contain;}
 .swipeShareLi {width:32px;height:24px; background:url(../images/link_white.png) no-repeat; background-size: contain; }
 
 .photoFunction {display: inline-block; vertical-align: top; padding-top: 10px; float: right; margin-right: 15px; position: absolute; right: 0;}
 .photoLikeBtn, .likeAmount {display: inline-block; vertical-align: middle;}
 .photoLikeBtn { color: #FFF; font-size: 18px;}
 .likeHeart {font-size: 30px;}
 .likeAmount {color: #FFF; margin-left: 5px; font-weight: 600; font-size: 16px;}
 .likeAmount span {font-weight: 800;}
 .likeHeart {font-size: 30px;}
 
 
 /*resize*/
 
 @media (max-width:767px)  {
     #mobileColumns{display: flex; flex-direction: column; width: 100%;}
 
     #menuBar{display: none;}
     .fancybox-opened{width:80% !important;}
     .fancybox-inner{width:100% !important;}
     #animationBox{width:100% !important;}
     .grey_b12 {color:#fff !important;}
     .photoCap {color:#fff !important; max-width: none;}
     .photoName{color:#fff !important;}
     .fancybox-outer{height:auto !important;}
     .embedOverlay{
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     left:0px !important;
     }
     .embed_inner{ width: 95% !important; margin: 0 auto !important; flex-direction: column;}
     .embedPhoto {display: flex; justify-content: center; align-items: center; width: auto;}
     .embedInfo {text-align: center; width: 95%; margin: 0 auto;}
     .sPhotoFb{width:24px; height:24px; background: url(../images/social_white.png) no-repeat;background-position: -32px 0; margin: 0; background-size: auto 24px;}
     .sPhotoTw{width:24px; height:24px; background: url(../images/social_white.png) no-repeat; background-position: -72px 0; background-size: auto 24px;}
     .shareEmbed {width:32px;height:24px; background:url(../images/embedPhoto_white.png) no-repeat; background-size: contain;}
 
     .imgInfo{
     height: 55px !important;
     float:left;
     width:auto !important;
     }
     .photoData{height: auto !important;}
     .photoCap {height: auto !important;}
     .photoBib {height: auto !important;}
     .socialShare{width: auto; margin: 0; padding: 15px;}
     .sharePhotoBlock {padding-right: 10px; }
 
     .infoHolderSwiper {width: 100%; background-color: transparent; border: none;}
     .swiperImg img {width: 75%;}
     .infoHolderSwiper .fancybox-close {top: -100px; right: 43%; background-image: url(../images/closeB3.png); width: 23px; height: 23px; background-size: contain;}
     .swiperData, .swiperShare {width: 100%; text-align: center;}
     .swiper-button-prev, .swiper-button-next { display: none; top: 45% !important; width: 32px !important; height: 30px !important;}
 }
 
 @media (max-width: 430px) {
     .embedInfo {font-size: 4.4vw;}
     #embedLink {font-size: 3.9vw;}
     #embedBtn {margin-top: 5px;}
 }
 
 @media (max-width: 375px) {
     .swiperData, .swiperShareTxt {font-size: 4.8vw;}
     .sPhotoTw, .shareEmbed {margin-left: 5px;}
 }
 
  @media (max-width: 767px) and (orientation:portrait) {
     /* .swiper-close {background-color: rgba(255,255,255,0.6); top: -20px; right: 25px; left: auto; width: 40px; height: 40px;} */
     .swiper-close {background-color: rgba(255,255,255,0.6); top: -22px; right: 3.5px; left: auto; width: 40px; height: 40px;}
     .swiperPersonal {}
     .swiperName, .swiperSchool {margin-bottom: 15px; line-height: 14px}
     .swiperCap {font-size: 13px; line-height: 16px;  height: 73px;}
     .swiperShareTxt {font-size: 14px; margin-right: 12px;}
     .photoFunction {padding-bottom: 3px; padding-top: 0px;}
 
 }
 
  @media (max-width: 767px) and (orientation:landscape) {
 
     .infoHolderSwiper {width: 100%; background-color: transparent; border: none;}
     .swiperData, .swiperShare {width: 100%; text-align: center;}
     .swiper-button-prev, .swiper-button-next {display: none;top: 45% !important; width: 32px !important; height: 30px !important;}
     .infoHolderSwiper .fancybox-close {top: -100px; right: 43%; background-image: url(../images/closeB3.png); width: 23px; height: 23px; background-size: contain;}
 
     .infoHolderSwiper {display: flex; padding: 0 8vw; align-items: center; }
     .swiperInfo {padding-top: 8vw; position: relative;}
     /* .swiperImg, .swiperInfo {flex: 5 5 50%;} */
     /* .swiperImg, .swiperInfo {flex: 1 1 30%;} */
     .swiperImg {width: 252px;}
     .swiperImg img {width: 100%;}
     .swiperData {margin-bottom: 10px; padding: 1%;  width: 98%;}
     .swiper-close {background-color: rgba(255,255,255,0.8); top: 1vw; right: 1vw; left: auto; width: 35px; height: 35px;}
 
     .swiperPersonal {flex-direction: column; text-align: left;}
     /* .swiperName {font-size: 17px; } */
     .swiperCap {font-size: 13px; line-height: 16px; overflow:scroll;}
     .swiperShareTxt {font-size: 14px; margin-right: 12px;}
 
     .swiperPersonal {align-items: flex-start;}
     .swiperInfo {padding: 10px; padding-top: 2vw;}
     .photoFunction {right: auto; margin-left: 4px;}
     .swiperCap {margin-top: 20px; margin-bottom: 0;}
     .swiperShareIcons {display: flex;}
     .swiperShareTxt {margin-right: 0; font-size: 12px;}
 
     .swiperSchool, .swiperName {margin-top: 15px;}
 
  }