Team:Tianjin/Resources/CSS:video

.modalit {

   visibility: hidden;
   -webkit-transition: all .3s;
   transition: all .3s

}

.modalit.backdrop {

   opacity: 0;
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: rgba(234,234,234,.85);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   -ms-flex-line-pack: stretch;
   align-content: stretch;
   -js-display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center

}

.modalit[aria-hidden=false] {

   opacity: 1;
   visibility: visible

}

.modalit .dialog {

   opacity: 0;
   color: rgba(0,0,0,.6);
   background-color: #fff;
   width: 600px;
   max-width: 85%;
   max-height: 88%;
   border-radius: 2px;
   -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2);
   box-shadow: 0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2);
   -webkit-filter: none;
   -webkit-transition: all .5s ease-out;
   transition: all .5s ease-out

}

.modalit:not(.backdrop) .dialog {

   position: fixed;
   left: 0;
   right: 0;
   top: 50%;
   margin: 0 auto

}

.modalit[aria-hidden=false] .dialog {

   opacity: 1

}

.modalit[data-modal-media=video] .content,.modalit[data-modal-media=image] .content {

   padding: 0

}

.modalit header {

   padding: 1.4em 1.2em 0

}

.modalit .dialog>:not(.content)>:not(button) {

   line-height: 1;
   margin: 0

}

.modalit .content {

   padding: 1.2em;
   overflow: auto

}

.modalit .content:after,.modalit .content:before {

   content: ;
   display: table

}

.modalit .content:after {

   clear: both

}

.modalit footer {

   padding: 0 1.2em .9em;
   text-align: right

}

.modalit[data-modal-position~=top] {

   -webkit-box-align: start;
   -ms-flex-align: start;
   -webkit-align-items: flex-start;
   align-items: flex-start

}

.modalit[data-modal-position~=top] .dialog {

   top: 0;
   max-height: inherit

}

.modalit[data-modal-position~=bottom] {

   -webkit-box-align: end;
   -ms-flex-align: end;
   -webkit-align-items: flex-end;
   align-items: flex-end

}

.modalit[data-modal-position~=bottom] .dialog {

   top: auto;
   bottom: 0;
   max-height: inherit

}

.modalit[data-modal-position~=right] {

   -webkit-box-pack: end;
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
   justify-content: flex-end

}

.modalit[data-modal-position~=right]:not(.backdrop) .dialog {

   left: auto;
   right: 0

}

.modalit[data-modal-position~=left] {

   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start

}

.modalit[data-modal-position~=left]:not(.backdrop) .dialog {

   right: auto;
   left: 0

}

.modalit[data-modal-width=small]>.dialog {

   width: 300px

}

.modalit[data-modal-width=large]>.dialog {

   width: 960px

}

.modalit[data-modal-width=full] {

   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   -webkit-align-items: stretch;
   align-items: stretch

}

.modalit[data-modal-width=full] .dialog {

   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
   -webkit-box-shadow: 0;
   box-shadow: 0;
   border-radius: 0

}

.modalit[aria-hidden=false][data-modal-width=full] .dialog {

   top: 0

}

.modalit[data-modal-width=full] footer {

   width: 100%;
   position: absolute;
   bottom: 0

}

.modalit[data-modal-transition=zoom] .dialog {

   top: 50%;
   left: 0;
   right: 0;
   -webkit-transform: scale(.2,.2);
   -ms-transform: scale(.2,.2);
   transform: scale(.2,.2)

}

.modalit[aria-hidden=false][data-modal-transition=zoom] .dialog {

   -webkit-transform: scale(1,1);
   -ms-transform: scale(1,1);
   transform: scale(1,1)

}

.modalit[data-modal-transition=flip] .dialog {

   -webkit-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   transform: rotateY(180deg)

}

.modalit[aria-hidden=false][data-modal-transition=flip]>.dialog {

   -webkit-transform: rotateY(0);
   -ms-transform: rotateY(0);
   transform: rotateY(0)

}

.modalit[data-modal-transition=slideDown] .dialog {

   -webkit-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   transform: translateY(-100%)

}

.modalit[data-modal-transition=slideUp] .dialog {

   -webkit-transform: translateY(100%);
   -ms-transform: translateY(100%);
   transform: translateY(100%)

}

.modalit[aria-hidden=false][data-modal-transition=slideDown] .dialog,.modalit[aria-hidden=false][data-modal-transition=slideUp] .dialog {

   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   transform: translateY(0)

}

.modalit[data-modal-transition=slideRight] .dialog {

   -webkit-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%)

}

.modalit[data-modal-transition=slideLeft] .dialog {

   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%)

}

.modalit[aria-hidden=false][data-modal-transition=slideRight] .dialog,.modalit[aria-hidden=false][data-modal-transition=slideLeft] .dialog {

   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0)

}

.modalit[data-modal-media]:not([data-modal-media=ajax]) footer,.modalit[data-modal-media]:not([data-modal-media=ajax]) header {

   padding: .8em 1em

}

.modalit[data-modal-media]:not([data-modal-media=ajax]) .content {

   padding: 0

}

.modalit[data-modal-media=image] .content {

   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden

}

.modalit[data-modal-media=image] .content img {

   vertical-align: bottom;
   width: 100%;
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto

}

.modalit[data-modal-media=image]:not([data-modal-width=full])>.dialog>:first-child,.modalit[data-modal-media=image]:not([data-modal-width=full])>.dialog>:first-child figure,.modalit[data-modal-media=image]:not([data-modal-width=full])>.dialog>:first-child img {

   border-radius: 2px

}

.modalit[data-modal-media=image] figure,.modalit[data-modal-media=image] img {

   max-width: 100%;
   height: auto

}

.modalit[data-modal-media=image] img {

   vertical-align: bottom

}

.modalit>.dialog>:first-child figure {

   margin: 0;
   position: relative;
   overflow: hidden

}

.modalit>.dialog>:first-child figure figcaption {

   visibility: hidden;
   opacity: 0;
   position: absolute;
   bottom: 10%;
   font-size: .8em;
   -webkit-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
   background-color: rgba(0,0,0,.75);
   color: rgba(255,255,255,.86);
   padding: .8em 1rem;
   -webkit-transition: .8s ease;
   transition: .8s ease

}

.modalit[data-modal-width=full]>.dialog>:first-child figure figcaption {

   bottom: 20%;
   text-align: center

}

.modalit>.dialog>:first-child figure:hover figcaption {

   visibility: visible;
   opacity: 1;
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0)

}

.modalit>.dialog>:first-child figcaption>* {

   visibility: hidden;
   opacity: 0;
   -webkit-transition: .3s ease .8s;
   transition: .3s ease .8s;
   margin: 0

}

.modalit>.dialog>:first-child figure:hover figcaption>* {

   visibility: visible;
   opacity: 1

}

.modalit[data-modal-width=full][data-modal-media=image] .content {

   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: rgba(0,0,0,.9)

}

.modalit[data-modal-width=full][data-modal-media=image] .content figure {

   width: 100%;
   height: 100%;
   overflow: hidden

}

@media (max-width:768px) {

   .modalit[data-modal-width=full][data-modal-media=image] .content img
   {
       width: 100%;
       height: 100vh;
       font-family: 'object-fit:cover;';
       -o-object-fit: cover;
       object-fit: cover
   }

}

@media (min-width:769px) {

   .modalit[data-modal-width=full][data-modal-media=image] .content img.portrait
   {
       width: auto;
       max-width: none;
       height: 100%;
       max-height: 100%
   }

}

.modalit[data-modal-media=video] .dialog {

   color: #fff;
   background-color: #000;
   width: 1080px;
   height: 600px;

}

.modalit[data-modal-media=video] .dialog>.content {

   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden

}

.modalit[data-modal-media=video][data-modal-width=full] .dialog>.content {

   padding: 0;

}

.modalit[data-modal-media=video] .dialog>.content>* {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
   vertical-align: bottom

}

.modalit button[data-modal-btn=action] {

   margin-left: .5em

}

.modalit span[data-modal-btn=dismiss] {

   position: absolute;
   top: -13px;
   right: -13px;
   width: 30px;
   height: 30px;
   display: inline-block;
   line-height: 30px;
   text-align: center;
   border-radius: 50%;
   background-color: #fff;
   -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2);
   box-shadow: 0 3px 3px 0 rgba(0,0,0,.14),0 1px 7px 0 rgba(0,0,0,.12),0 3px 1px -1px rgba(0,0,0,.2);
   color: rgba(0,0,0,.5);
   overflow: hidden;
   cursor: pointer

}

.modalit span[data-modal-btn=dismiss]:after,.modalit span[data-modal-btn=dismiss]:before {

   background: #888;
   content: ;
   position: absolute;
   height: 2px;
   width: 60%;
   top: 50%;
   left: 0;
   right: 0;
   margin: -1px auto 0

}

.modalit[data-modal-width=full] span[data-modal-btn=dismiss] {

   width: 36px;
   height: 36px;
   top: .8em;
   right: 1rem;
   background: 0 0;
   -webkit-box-shadow: none;
   box-shadow: none

}

.modalit[data-modal-width=full][data-modal-media=video] span[data-modal-btn=dismiss] {

   top: 3rem;
   right: 2rem

}

.modalit[data-modal-width=full] span[data-modal-btn=dismiss]:after,.modalit[data-modal-width=full] span[data-modal-btn=dismiss]:before {

   background-color: #ddd;
   width: 100%

}

@media (min-width:768px) {

   .modalit[data-modal-width=full] span[data-modal-btn=dismiss]
   {
       width: 42px;
       height: 42px;
       right: 1.4rem
   }

}

.modalit span[data-modal-btn=dismiss]:before {

   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg)

}

.modalit span[data-modal-btn=dismiss]:after {

   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg)

}[data-modal-role=navi] {

   position: fixed;
   z-index: 1100;
   left: 0;
   right: 0;
   bottom: 0;
   text-align: center

}[data-modal-role=navi] ul {

   list-style-type: none;
   padding: 0

}[data-modal-role=navi] li {

   display: inline-block;
   width: 16px;
   margin: 0 2px;
   cursor: pointer

}[data-modal-role=navi] li:before {

   display: inline-block;
   content: ;
   background: rgba(0,0,0,.2);
   width: 8px;
   height: 8px;
   border-radius: 50%;
   vertical-align: middle

}[data-modal-role=navi] li.active:before {

   width: 12px;
   height: 12px;
   background-color: rgba(26,182,255,.6)

}

@media (min-width:768px) { [ data-modal-role=navi] li

   {
       margin: 0 5px
   }[    data-modal-role=navi] li:before
   {

       width: 12px;
       height: 12px;
       margin: 0 .4em
   }[    data-modal-role=navi] li.active:before
   {
       width: 16px;
       height: 16px
   }

}

.modalit .loader {

   position: relative;
   display: block;
   height: 200px

}

.modalit[data-modal-width=full] .loader {

   height: 100%

}

.modalit .loader:before {

   content: ;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 40px;
   height: 40px;
   margin-top: -20px;
   margin-left: -20px;
   border-radius: 50%;
   border: 4px solid #ccc;
   border-top-color: #333;
   -webkit-animation: modalit-loader .8s linear infinite;
   animation: modalit-loader .8s linear infinite

}

@-webkit-keyframes modalit-loader {

   to
   {
       -webkit-transform: rotate(360deg)
   }

}

@keyframes modalit-loader {

   to
   {
       -ms-transform: rotate(360deg);
       transform: rotate(360deg)
   }

}