//
// Modals
// --------------------------------------------------

.modal-active {
	max-height: 100%;
	overflow: hidden;
}

// Background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  background-color: #000;
  // Fade for backdrop
  &.fade { opacity: 0; }
}

.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.8;
}

// Base modal
.modal {
	position: fixed;
	z-index: 10000;
	outline: none;
	left: 50%;
	width: $modal-width;
	margin: 0 0 0 #{- $modal-width / 2};
  
	&.fade {
  		@include transition(all 0.3s);
    	top: -25%;
    }
    
    &.fade.in {
    	top: 35%;
    }
    
    .modal-inner {
	    width: $modal-width;
	    background: $site-background-color;
	    @include border-radius($big-border-radius);
	    @include box-shadow(0px 10px 10px rgba(0,0,0,0.5));
    }   
    
    .modal-section {
    	position: relative;
	    padding: $base-font-size $modal-padding;
	    border-bottom: 1px solid rgba(0,0,0,0.1);
	    
	    &:first-child {
		    @include border-radius($big-border-radius $big-border-radius 0 0);
		    padding-top: $modal-padding;
	    }
	    
	    &:last-child {
		    @include border-radius(0 0 $big-border-radius $big-border-radius);
		    padding-bottom: $modal-padding;
		    border-bottom: none;
	    }
	    
	    & > *:last-child {
		    margin-bottom: 0;
	    }
	    
	    .or-divider {
		    position: absolute;
		    top: - $base-line-height / 2;
		    left: 50%;
		    width: 2.5em;
		    margin-left: -1.25em;
		    background: $site-background-color;
		    color: $muted-font-color;
		    font-size: 11px;
		    font-weight: bold;
		    text-align: center;
		    text-transform: uppercase;
	    }
    }
    
    .modal-footer {
	    background-color: darken($site-background-color, 5%);
    }
}

.hide {
	display: none;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
     -moz-transition: opacity 0.15s linear;
       -o-transition: opacity 0.15s linear;
          transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

@media screen and (max-width: 767px) {

	.modal {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
		padding: $modal-padding;
		overflow-y: auto;
		
		&.fade.in {
			top: 0;
		}
		
		.modal-inner {
			width: auto;
			max-width: $modal-width;
			margin: 0 auto 20px auto;
		}
	}
}

.close {
  position: absolute;
  top: $modal-padding - 3;
  right: $modal-padding;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}