@-webkit-keyframes glow5 {

    0%, 40%     {
         transform: scale(1);
     }
    40%, 50%       {
         transform: scale(4);
     }
    90%, 100%     {
         transform: scale(1) translateX(-1px);
     }
 
 }
 @-webkit-keyframes glowColumn {
 
    0%, 40%     {
         transform: scale(1);
     }
    40%, 50%       {
         transform: scale(1);
     }
    90%, 100%     {
         transform: scale(4) translateX(-1px);
     }
 
 }
 @-webkit-keyframes shrink {
 
    0%, 40%     {
         transform: scale(1);
     }
    40%, 50%       {
     }
    90%, 100%     {
         transform: scale(.01) 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; right:0px; z-index:1004; background:#09aebe;}
 #animateOff{display:none; cursor:pointer; position:absolute; bottom:0px; right:0px; z-index:1005; background:#09aebe;}
 .powerBtn {height:22px; width:21px; margin:5px auto 0; background: url("../images/power.png") no-repeat center;}
 .animateText {color:#FFF; 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);
     }
 }
 
 .mobileFullscreenNavControl {background-position:0 -200px !important;}
 .mobileExitFullscreenNavControl {background-position: 0 -240px !important;}
 #fScreenNavControl {cursor:pointer; width:40px; height:40px; background: url("https://cdn.virtualmosaics.com/autism/images/controls/navControls_new.png") no-repeat center;background-position:0 0; position:absolute; top:0;}
 .minScreenNavControl {background-position:0 -40px !important;}
 #resetNavControl {cursor:pointer; width:40px; height:40px; background: url("https://cdn.virtualmosaics.com/autism/images/controls/navControls_new.png") no-repeat center; background-position:0 -80px; margin-top:3px;}
 #plusNavControl {cursor:pointer; width:40px; height:40px; background: url("https://cdn.virtualmosaics.com/autism/images/controls/navControls_new.png") no-repeat center; background-position:0 -120px; margin-top:3px;}
 #minusNavControl {cursor:pointer; width:40px; height:40px; background: url("https://cdn.virtualmosaics.com/autism/controls/navControls_new.png") no-repeat center; background-position:0 -160px; margin-top:3px;}
 .overlay {border: 3px solid white;box-sizing: border-box;z-index:1;box-shadow: 0px 0px 0px 3px #09aebe;
 
 
 }
 .overlayBig{border: 3px solid white;box-sizing: border-box;z-index:1;box-shadow: 0px 0px 0px 3px #09aebe;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; outline: 2px solid #575757;box-sizing: border-box;
     -webkit-animation: glow 1.0s infinite alternate;
     -moz-animation: glow 1.0s infinite alternate;
     animation: glow 1.0s infinite alternate;
         }
 
 #navControlBox {display:block; position:absolute !important; width:40px; z-index:3; top: 5px; right: 5px;line-height: 0px;line-height: 0px;}
 .navControlBoxFullpage {top: 5px !important; right: 5px !important;}
 /*#navControlBox {display:block; position:absolute; width:40px; z-index:3; bottom: 10px; right: 10px;line-height: 0px;line-height: 0px;}
 .navControlBoxFullpage {bottom: 10px!important; right: 10px !important;}*/
 #ViewerDisplay {-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;}
 #fScreenNavControl:hover, #resetNavControl:hover, #plusNavControl:hover, #minusNavControl:hover {   box-shadow:rgba(255,255,255, 0.7) 0 0 0 1px inset;}
 #viewer_holder{height:auto;
 width:100%;
 /*max-width: 902px;*/
 position: relative;
 z-index: 0;
 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/closeB2.png) no-repeat; position: absolute; right: 8px; top: 8px;}
 #embedImg { width:75px; height:75px; border:2px solid #09aebe; margin:10px 0 0 10px; }


 .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;}
    .embed_inner {padding: 5px; display: flex;}
    
    .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 #09aebe;}
 
 /*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;height:675px; -webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
 #pm_viewer{width:auto !important;background-color:#fff;-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{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:2;-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,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;}
 
 #overlayinfor{display: none;height:auto;width:100%;}
 #infoHolder {display: table;}
 .infoHolder{
 display:block;
 position: absolute;
 right:-250px;
 width:242px;
 z-index:1000;
 padding:0px;
 vertical-align:top;
 text-align:left;
 background: transparent url("../images/photoBg.png") repeat;
 min-height:128px;
 pointer-events:auto !important;
 }
 .rightInfo{
 display:block;
 position: absolute;
 left:-244px;
 width:242px;
 z-index:1000;
 padding:0px;
 vertical-align:top;
 text-align:left;
 background: transparent url("../images/photoBg.png") repeat;
 min-height:128px;
 pointer-events:auto !important;
 }
 .rightBottomInfo{
 display:block;
 position: absolute;
 left:-244px;
 width:242px;
 z-index:1000;
 padding:0px;
 vertical-align:top;
 text-align:left;
 background: transparent url("../images/photoBg.png") repeat;
 min-height:128px;
 pointer-events:auto !important;
 top:-10px !important;
 }
 .bottomInfo{
 display:block;
 position: absolute;
 right:-242px;
 width:242px;
 z-index:1000;
 padding:0px;
 vertical-align:top;
 text-align:left;
 background: transparent url("../images/photoBg.png") repeat;
 min-height:128px;
 pointer-events:auto !important;
 bottom:2px !important;
 }
 .infoHolderSearch{
 display:block;
 position: absolute;
 right:-242px;
 width:242px;
 z-index:1000;
 padding:0px;
 vertical-align:top;
 text-align:left;
 background: transparent url("../images/photoBg.png") repeat;
 min-height:128px;
 pointer-events:auto !important;
 }
 .loadingInfo{position:absolute; top:0; left:0; width:100%; height:100%; background: transparent url("../images/photoBg.png") repeat; z-index:998; display:none;}
 .noData{position:absolute; top:0; left:0; width:100%; height:100%; background: transparent url("../images/photoBg.png") repeat; z-index:998; display:none;}
 .infoImgHolder{position:relative;}
 .imgInfo {position:relative;}
 .photoData{padding:10px;}
 .photoName{line-height:normal; margin-left:5px;font-weight:bold;}
 .photoCap{margin:5px; line-height:normal; word-wrap:break-word; max-width: 218px; max-height:145px; overflow-y:hidden; font-size: 14px;}
 .capMore {font-size: 14px; /*margin-top: -3px;*/ color: #003c77 !important;}
 .capMore a { color: #003c77 !important;}
 .photoCapTitle {margin: 5px;}
 .ytLink{margin:0 auto; line-height:normal; word-wrap:break-word; max-height:155px; overflow-y:auto; text-align: center; z-index: 9999999; height:27px;}
 .ytPlay{top:5px; position: relative;}
 .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: -18px;
     right: -18px;
     width: 36px;
     height: 36px;
     cursor: pointer;
     z-index: 810040;
     background-image: url('../fancybox2/fancybox_sprite.png');
 }
 
 
 .socialShare {width: 100px; margin: 0 auto; padding-bottom: 5px;}
 .socialShare ul, .socialShare li {display: table-cell; vertical-align: middle;}
 
 
 /*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;
 }
 #swiperPMHolderFS {background-color:rgba(0,0,0,.85); display:none; z-index: 999;}
 
 #swiperPMHolder{
     width: 100%;
     height: 100%;
     top:0px;left:0px;
     position: absolute;
 }
 .swiper-container {
     width: 100%;
     height: 100%;
     z-index:9;
 }
 
 .swiperShareMobile ul {
     float: none !important;
     width: 100%;
 }
 
 .swiperShareMobile .grey_b12 {
     color: #000 !important;
 }
 
 
 .swiperShareMobile li {
     display: inline-block;
 }
 
 .infoHolderSwiper {
     border:5px #fff solid;
     background:#fff;
     position:relative;
     max-width: 590px;
 }
 .swiperInfo {padding-top: 10px; background:#fff;}
 .swiperData, .swiperShare {display: inline-block;}
 .swiperData {width: 75%; text-align: left; word-wrap: break-word;}
 .swiperName, .swiperCap {padding-left: 5px;}
 .swiperName {font-weight: 900; margin-bottom: 5px;}
 .swiperCap {height: auto; min-height: 50px; max-height: 80px; overflow: auto; font-size: 15px;}
 .swiperShare {width: 24%; vertical-align: top;}
 .swiperShareTxt {font-weight: bold; margin-bottom: 5px;}
 .sPhotoFb, .sPhotoTw, .shareEmbed {display: inline-block; margin-left: 15px;}
 .sPhotoFb{width:24px; height:24px; background:url(../images/fbPhoto.png) no-repeat; margin: 0;}
 .sPhotoTw{width:24px; height:24px; background:url(../images/twPhoto.png) no-repeat;}
 .shareEmbed {width:24px;height:24px; background:url(../images/embedPhoto.png) no-repeat;}
 .removeInfo{display: none !important;}
 
 #logo {
         padding: 20px 0 20px 35px;
     }
 #embedLink{
 text-align: center;
     display: inline-block;
     vertical-align: bottom;
 }
 #embedBtn{
 margin: 0 auto;
     display: block;
     text-align: center;
 }
 .copyLinkBtn{
 background-color: unset;
 }
 /*resize*/
 @media (max-width:1015px)  {
     #shareTxt{
         display: none !important;
     }
     #share, #shareIcons{
         float: right;
     }
     #share{width:18% !important;}
     #upload{margin-left: 35px;}
     #shareIcons{
         margin-right: 10px;
     }
 }
 
 @media (max-width:1000px)  {
     .menuItem{
         font-size: 1.6vw;
     }
 }
 
 @media (max-width:767px)  {
    .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;
        font-weight: 100;
    }
    .embedPhoto {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
    }
    .embedInfo {
        text-align: center;
        width: 95%;
        margin: 0 auto;
    }



 /*    #navControlBox {display: none;}
 */
     .swiper-close{left: 35px;}
     #mobileColumns{display: flex; flex-direction: column; width: 100%;}
     #search{margin: 0 auto; /*margin-top: 50px;*/ width:100% !important; order:2;}
     #upload{width: 100% !important; margin-left: 0px;margin-top: 10px; order:1;}
     #share{display: none !important;}
     #shareMobile{display: block !important;}
     #logo {
         padding: 20px 0 20px 0px !important;
         width: 100%;
     }
     #logoImg{
         display: block;
         margin:0 5%;
         width:90%;
         height:auto !important;
     }
 
     #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;}
     .ytLinkPhoto {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: 100% !important;
     margin: 0 !important;
     padding: 0px !important;
     display: flex;
     flex-direction: column;
     }
     #infoHolder{
         display: inline-block ;
         position:relative !important;
         top:0px !important;
         left:0px;
         width: 100%;
         height: auto !important;
         z-index: 9 !important;
         background:#003c77 !important;
     }
     .imgInfo{
     height: 55px !important;
     float:left;
     width:auto !important;
     }
     .photoData{height: auto !important;}
     .photoCap {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 {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;
    
 }