/* --- 
Orchestrate Modal
Version: v1.0
Date: April 12, 2018
--- */

/* --- Login Modal --- */
.modal, .modal-box {z-index: 250;}
.modal-sandbox {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: transparent;}

.modal {display: block; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgb(255,255,255); background: rgba(255,255,255,.8); overflow: auto;}

.modal-box {position: relative; width: 80%; max-width: 640px; margin: 100px auto; background: #fff; padding: 110px 30px 30px 30px; box-shadow: 0 0 10px 0 rgba(0,0,0,.2); border-radius: 5px; overflow: hidden;
  animation-name: modalbox; animation-duration: .3s; animation-timing-function: ease-out;}

.modal-box .modal-title h3 {font-size: 24px; font-weight: 600; text-align: center; color: #333;}

.modal-box .modal-content {margin: 30px 60px; text-align: center; z-index: 10;}
.modal-button a {background: #5196D5; color: #fff; padding: 10px 80px; border-radius: 30px; text-transform: uppercase; font-size: 12px; box-shadow: 0 0 10px 0 rgba(0,0,0,.2);}
.modal-button a:hover, .modal-button a:active, .modal-button a:focus {text-decoration: none;}

/* Background */
.modal-bkgd:before {content: ""; position: absolute; width: 100%; height: 130px; background: #eee url(/Contents/images/modal-icons@2x.png) 0 0 no-repeat; background-size: 264px 600px; background-position: -100px -100px;top: 0; left: 0; border-radius: 5px;}
.modal-bkgd:after {content: ""; position: absolute; width: 200%; margin-top: 100px; height: 400px; background: #fff; top: 0; left: -50%; border-radius: 100%;}
.modal-bkgd {z-index: 250;}
.modal-box .modal-title, .modal-box .modal-content, .close-modal {z-index: 300; position: relative;}

/* Close Button */
.close-modal {cursor: pointer; background: rgba(0,0,0,.1); padding: 3px 12px 7px 12px; position: absolute; top: 0; right: 0; border-radius: 0 5px;}
.close-modal a {color: white; font-size: 16px;}

/* --- Modal Styles --- */
.modal-affirm .modal-bkgd:before {background-color: #5DBF86; background-position: 50% -80px;}
.modal-affirm .modal-button a {background: #5DBF86;}
.modal-affirm .modal-button a:hover, .modal-affirm .modal-button a:focus, .modal-affirm .modal-button a:active {background: #3D9F66;}

.modal-email .modal-bkgd:before {background-color: #5196D5; background-position: 50% -180px;}
.modal-email .modal-button a {background: #5196D5;}
.modal-email .modal-button a:hover, .modal-email .modal-button a:focus, .modal-email .modal-button a:active {background: #3176B5;}

.modal-congrats .modal-bkgd:before {background-color: #F0CC4A; background-position: 50% -280px;}
.modal-congrats .modal-button a {background: #F0CC4A;}
.modal-congrats .modal-button a:hover, .modal-congrats .modal-button a:focus, .modal-congrats .modal-button a:active {background: #D0AC2A;}

.modal-takeaction .modal-bkgd:before {background-color: #5196D5; background-position: 50% -380px;}
.modal-takeaction .modal-button a {background: #5196D5;}
.modal-takeaction .modal-button a:hover, .modal-takeaction .modal-button a:focus, .modal-takeaction .modal-button a:active {background: #3176B5;}

/* Animation */
@-webkit-keyframes modalbox {
  0% {top: -250px; opacity: 0;}
  100% {top: 0; opacity: 1;}
}

@keyframes modalbox {
  0% {top: -250px; opacity: 0;}
  100% {top: 0; opacity: 1;}
}

@media only screen and (max-width: 640px) {
  .modal-box {width: calc(100% - 40px); margin: 20px; border: none; min-width: 280px;}
  .modal-box .modal-content {margin: 30px 0;}
  .modal-button a {padding: 10px; width: 100%; display: block;}
}