Team:EPF Lausanne/CSS/magnific-popup
/* Magnific Popup CSS */ .mfp-bg {
top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.9; filter: alpha(opacity=80); }
.mfp-wrap {
top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.mfp-container:before {
content: ; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%; cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom {
cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible; cursor: pointer; background:#000; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 1046;
}
button::-moz-focus-inner {
padding: 0; border: 0; }
.mfp-close {
width:30px; height:30px; position: absolute; right:5px; top:5px; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; outline:none; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { }
.mfp-close-btn-in .mfp-close {
color:#fff;
} .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; outline:none; }
.mfp-counter {
position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; }
.mfp-arrow {
position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: ; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px; border-bottom-width: 21px; }
.mfp-arrow-left {
left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid white; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3f3f3f; }
.mfp-arrow-right {
right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid white; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder {
padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-scaler {
width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
/* Main image in popup */ img.mfp-img {
width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
/* The shadow behind the image */ .mfp-figure:after {
content: ; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444444; }
.mfp-figure {
line-height: 0; }
.mfp-bottom-bar {
margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }
.mfp-title {
text-align: left; line-height: 18px; color: #f3f3f3; word-break: break-word; padding-right: 36px; }
.mfp-figure small {
color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
/******** Plans List *******/ /* Styles for dialog window */
- small-dialog {
background: white; padding:30px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } /**
/**
* Fade-zoom animation for first dialog */
/* start state */ .my-mfp-zoom-in #small-dialog { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* Dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.9;
} /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg{
opacity: 0;
} .plans_table{ padding:10px 0; } .plans_table thead{ background:#fff; } .plans_table thead th.plans-list{
} .plans_table thead th.plans-list h3{ font-size: 1.4em; color:#fff; display: block; width: 100%; margin: 0; text-align: center; background: #00AEFF; padding: 10px 0; } .plans_table thead th.plans-list h4{ font-size: 1em; color:#555; display: block; width: 100%; margin: 0; text-align: center; } .plans_table thead th.plans-list h4 small{ font-size:14px; padding-left:2px; } .plans_table td.plan_list_title{
font-size:0.85em;
text-align:left; color:#fff; background: #00AEFF; } .plans_table tbody td{ padding:10px; color:#8F8F8F; font-size:0.8em; border:1px solid #E6E6E6; text-align:center;
}
.plans_table tfoot td.order_now button{ display:block; font-size:0.85em; text-align:center; text-decoration:none; margin:0 auto; outline: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; padding:8px 10px;
-moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; border:none; cursor:pointer; background:#000000;
color:#ffffff;
} .plans_table tfoot td.order_now button:hover{ background:#555; color:#fff; } .plans_table tfoot td{ text-align:center;
padding:10px 0; border:1px solid #E6E6E6;
} /**** End Plans List *********/ @media (max-width: 320px){
- small-dialog{
padding:20px 5px; } .mfp-close{ line-height:25px; } .plans_table{ margin-top:10px; } .plans_table thead th.plans-list h3{ font-size:1em; } .plans_table thead th.plans-list{ padding:10px 0; } .plans_table thead th.plans-list h4{
font-size:1em;
} .plans_table thead th.plans-list h4 small{
font-size:10px;
} .plans_table tfoot td.order_now button{
font-size:0.7em; padding:8px;
} } /* start state1 */
- small-dialog1{
background:#fff; padding: 20px 20px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; } .my-mfp-zoom-in #small-dialog1 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog1 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog1{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } /* start state2 */ .pop_up h2{ font-size: 1.4em; color:#555; margin:10px 0 10px; text-transform: capitalize; } .pop_up { background:#fff; padding:10px; } .pop_up p{ font-size:0.85em; color:#555; line-height:1.5em; }
- small-dialog2{
background: white; padding: 10px 15px; text-align: left; max-width: 400px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog2 { opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog2 { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog2{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .pop_up1{ padding:10px; } .pop_up1 h2{ font-size: 1.3em; text-align: center; text-transform: uppercase; color: #555; } .pop_up1 img{ text-align:center; } .button-alert{ float:left; } .button-alert input[type="submit"] { cursor: pointer; -webkit-appearance: none; padding: 8px 20px; border: 1px solid #FFF; background:#555; display: inline-block; font-size: 0.85em; text-transform: uppercase; color: #FFF; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; font-family: 'ambleregular'; border: none; outline:none; } .button-alert1{ float:right; } .button-alert1 input[type="submit"] { cursor: pointer; -webkit-appearance: none; padding: 8px 20px; border: 1px solid #FFF; background:#555; display: inline-block; font-size: 0.85em; text-transform: uppercase; color: #FFF; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; font-family: 'ambleregular'; border: none; outline:none; } .button-alert input[type="submit"]:hover, .button-alert1 input[type="submit"]:hover{ background:#444; } .pop_up1 p{ margin-bottom:10px; color:#555; font-size:0.85em; } .pop-img{ text-align:center; }
- small-dialog3 {
background: #FFF; padding: 10px 15px; text-align: left; max-width:338px; margin: 40px auto; position: relative; } .pop_up2{ padding:20px; margin-top: 10px; } .pop_up2 h2{ padding:10px 0; color: #000; font-size:1em; text-transform: uppercase; } .pop_up2 p{ line-height: 1.8em; color: #999; font-size: 0.85em; margin-bottom:10px; }
- small-dialog4{
background: white; padding: 10px 15px; text-align: left; max-width:338px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog4{ opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog4{ opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog4{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; }
- small-dialog5{
background: white; padding: 10px 15px; text-align: left; max-width:338px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog5{ opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog5{ opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog5{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; }
- small-dialog6{
background: white; padding: 10px 15px; text-align: left; max-width:338px; margin: 40px auto; position: relative; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; } .my-mfp-zoom-in #small-dialog6{ opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } /* animate in */ .my-mfp-zoom-in.mfp-ready #small-dialog6{ opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* animate out */ .my-mfp-zoom-in.mfp-removing #small-dialog6{ -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; }