/** * CSS Modal * Modal as reusable module * http://drublic.github.com/css-modal * * @author Hans Christian Reinl - @drublic * @version 1.0.4 * * Usage: *    selector { *        @extend %modal; *    } *//* * Configuration */html {  overflow-y: scroll;   }.has-overlay {  overflow: hidden;}.has-overlay > body {  height: 100%;  overflow-y: scroll;   }.semantic-content {	background:#fff;background: rgba(0,0,0,0.5);  -webkit-transform: translate(0, 100%);  -moz-transform: translate(0, 100%);  -o-transform: translate(0, 100%);  -ms-transform: translate(0, 100%);  transform: translate(0, 100%);  -webkit-transform: translate3d(0, 100%, 0);  transform: translate3d(0, 100%, 0);  background:url(./../images/bgbox.png);  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 9999;  opacity: 0;  color: #000;  line-height: 1.3;  display: none\9;}.semantic-content:target {  -webkit-transform: translate(0, 0);  -moz-transform: translate(0, 0);  -o-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);  opacity: 1;}.is-active.semantic-content {  display: block\9;}.semantic-content:target {  display: block\9;}.semantic-content .modal-inner {  position: absolute;  top: 20%;  left: 50%;  z-index: 20;  margin-left: -325px;  width: 650px;  /*height: 650px;*/  overflow-x: hidden;  border-radius: 2px;  background: #fff;  /*-webkit-box-shadow: 0 0 30px rgba(100, 0, 0, 0.6);*/  box-shadow: 0 0 30px rgba(225, 225, 225, 225);  text-align:justify;}.semantic-content .modal-inner > img,.semantic-content .modal-inner > video,.semantic-content .modal-inner > iframe {  width: 100%;  height: auto;  min-height: 500px;}.semantic-content .modal-inner > img {  width: auto;  max-width: 100%;}.semantic-content header {  border-bottom: 1px solid #dddddd;  padding: 0 1.2em;  background:#f5f5f5;  padding:20px 15px}.semantic-content header > h2 {  margin: 0.5em 0;}.semantic-content .modal-content {  max-height: 400px;  max-height: 70vh;  /*border-bottom: 1px solid #dddddd;*/  padding: 35px 35px;  overflow-x: hidden;  overflow-y: auto;    height: 520px;	border:none !important}.semantic-content .modal-content > * {  max-width: 100%;  }.semantic-content footer {  border-top: 1px solid white;  padding: 0 1.2em 18px;  background: #f0f0f0;  border-radius: 2px;}.semantic-content .modal-close {  display: block;  text-indent: -100px;  overflow: hidden;}.semantic-content .modal-close:before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 10;  /*background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");*/}.semantic-content .modal-close:after {  content: '\00d7';  position: absolute;  top: 16.5%;  left: 51%;  z-index: 20;  margin-left: 285px;  background: #fff;  border-radius: 2px;  padding: 2px 8px;  font-size: 1.2em;  text-decoration: none;  text-indent: 0;}@media screen and (max-width: 690px) {  .semantic-content .modal-inner {    width: auto;    left: 20px;    right: 20px;    margin-left: 0;  }  .semantic-content .modal-close {    left: auto;    right: 33px;    margin-left: 0;  }  .semantic-content .modal-close:after {    margin-left: 40%;  }}@media screen and (max-width: 30em) {  .semantic-content {    -webkit-transform: translate(0, 400px);    -webkit-transform: translate3d(0, 100%, 0);    transform: translate3d(0, 100%, 0);    -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;    -moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s;    -o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s;    -ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s;    transition: transform .25s ease-in-out, opacity 1ms .25s;    display: block;    height: 100%;    bottom: auto;  }  .semantic-content:target {    -webkit-transition: -webkit-transform .25s ease-in-out;    -moz-transition: -moz-transform .25s ease-in-out;    -o-transition: -o-transform .25s ease-in-out;    -ms-transition: -ms-transform .25s ease-in-out;    transition: transform .25s ease-in-out;  }  .semantic-content:before {    background-color: #000;    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2), to(#1c9cd3));    background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3);    background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3);    background-image: -o-linear-gradient(top, #27aae2, #1c9cd3);    background-image: linear-gradient(to bottom, #27aae2, #1c9cd3);*/    content: '';    position: fixed;    top: 0;    left: 0;    right: 0;    z-index: 30;    height: 3em;    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);  }  .semantic-content .modal-inner {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    top: 0;    left: 0;    right: 0;    padding-top: 3em;    height: 100%;    overflow: scroll;    -webkit-box-shadow: none;    box-shadow: none;  }  .semantic-content .modal-content {    max-height: none;  }  .semantic-content .modal-close {    right: auto;    text-decoration: none;  }  .semantic-content .modal-close:before {    display: none;  }  .semantic-content .modal-close:after {    content: attr(data-close);    top: 0.4em;    left: 1em;    z-index: 40;    margin-left: 0;    font-size: 1em;    padding: 0.5em 1em;  }}@media screen and (max-height: 46em) and (min-width: 30em) {  .semantic-content .modal-content {    max-height: 340px;    max-height: 50vh;  }}@media screen and (max-height: 36em) and (min-width: 30em) {  .semantic-content .modal-content {    max-height: 265px;    max-height: 40vh;  }}@media screen and (min-width: 30em) {  .semantic-content {    -webkit-transition: opacity 0.4s;    -o-transition: opacity 0.4s;    transition: opacity 0.4s;  }}