/* CUSTOM STYLESHEET
-------------------------------------------------------------------------------------
Instructions: Add your custom styles in this file instead of style.css, so it's 
easier to update the theme. Simply copy an existing style from style.css to this 
file, and modify it as you like.
------------------------------------------------------------------------------------- */



/* GLOBAL STYLES
-------------------------------------------------------------------------------------
Add styles beneath this line that you want to be applied across your entire site */



/* DESKTOP ONLY STYLES
-------------------------------------------------------------------------------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */

 @-moz-keyframes color /* Firefox */
{
0%   {background:#ed6d3f;}
50%  {background:#eb9c3e;}
100%   {background:#ed6d3f;}
}
 
    @-webkit-keyframes color /* Firefox */
{
0%   {background:#ed6d3f;}
50%  {background:#eb9c3e;}
100%   {background:#ed6d3f;}
}


    
    div.donation { width: 100%; background: #ed6d3f; padding: 10px; color: white; 
        animation:color 5s;
  -moz-animation:color 5s infinite; /* Firefox */
-webkit-animation:color 5s infinite; /* Safari and Chrome */
    
    }
    
    
    
    div.central { text-align: center; max-width: 1024px; margin: 0 auto;}
    
    div.donation h4 {color: white; font-size: 20px; font-weight: 100 !important; margin-bottom: 0; margin-top: 0;}
    
    div.donation a.button { display: inline-block; border-radius: 8px; background: #0C3B59; color: white; margin-left: 20px; padding: 8px; transition:all 0.25s ease; -webkit-transition:all 0.25s ease;}
    
    div.donation a.button:hover {
        
        background: #0e5989;
        transition:all 0.25s ease;
        -webkit-transition:all 0.25s ease;
    }
    
@media only screen and (min-width: 801px) {



	/* Desktop styles go here */
    
}





/* ---------------- [ DONATION POPUP ] ---------------- */

.donation-popup-wrapper {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.5);
  z-index: 1000;
}

.donation-popup-wrapper.modal-show {
  visibility: visible;
  opacity: 1;
}

.donation-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 978px;
  background: #ed6d3f;
  padding-top: 80px;
  padding-bottom: 80px;
  font-size: 30px;
  color: #fff;
  font-family: 'proxima-nova', 'source sans pro', arial, helvetica !important;
  box-shadow: 4px 4px 19px rgba(0,0,0,.3);
}

.donation-popup-close {
  position: absolute;
  width: 52px;
  height: 52px;
  top: -26px;
  right: -26px;
  background: url(images/donate-popup-close.svg) no-repeat center;
  cursor: pointer;
}

.donation-popup-left {
  position: absolute;
  width: 22%;
  height: 100%;
  left: 0;
  top: 0;
  background: #0c3b59;
}

.donation-popup-logo {
  position: absolute;
  top: 50%;
  right: 0;
  width: 222px;
  height: 222px;
  -webkit-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  background: url(images/donate-popup-logo.svg) no-repeat center;  
}

.donation-popup-right {
    padding-left: 41%;
    padding-right: 5%;
}

.donation-popup h3 {
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 0;
  color: #fff;
  font-weight: 400 !important;
}

.donation-popup .donation-popup-subheading {
  color: #0c3b59;
  margin-top: -3px;
  margin-bottom: 0;
}

.donation-popup .donation-popup-small-text {
  font-size: 18px;
  color: #e5e5e5;
}

.donation-popup-form {
  margin-top: 40px;
}

.donation-popup-select {
  width: 262px;
  overflow: hidden;
  float: left;
  margin-right: 24px;
}

.donation-popup-select select {
  width: 120%;
  height: 52px;
  color: #e5e5e5;
  font-size: 32px;
  border: none;
  border-radius: 0;
  box-shadow: none;  
  -webkit-appearance: none;
  background: #c15b33 url("images/donate-popup-arrow.svg") no-repeat 75% 50%;
  padding-left: 14px;
  padding-top: 4px;
}

.donation-popup-select select:focus {
    outline: none;
}

.donation-popup button {
  height: 52px;
  padding: 0 20px;
  border-radius: 26px;
  text-transform: uppercase;
  font-size: 24px;
  background: #0c3b59;
  padding-top: 2px;
}

.donation-popup button:hover,
.donation-popup button:focus,
.donation-popup button:active {
  outline: none;
  background: #0e476b
}

@media (max-width: 1280px) {
	.donation-popup-left {
		width: 128px;
	}
	.donation-popup-logo {
		width: 160px;
		height: 160px;
	}
	.donation-popup-right {
		padding-left: 290px;
	}
}

@media (max-width: 1024px) {
	.donation-popup h3 {
		font-size: 32px;
	}
	.donation-popup {
		font-size: 26px;
	}
	.donation-popup .donation-popup-small-text {
		font-size: 16px;
	}
	.donation-popup-close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -20px;
    right: -20px;
  }
  .donation-popup-form {
    margin-top: 30px;
  }
  .donation-popup-select {
		float: none;
  }
  .donation-popup-donate {
  	margin-top: 15px;
  }
  .donation-popup {
  	padding-top: 40px;
  	padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
	.donation-popup-left {
		width: 120px;
	}
	.donation-popup-logo {
	  right: auto;
	  left: 50%;
	  width: 120px;
	  height: 120px;
	  -webkit-transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	}
	.donation-popup-right {
		padding-left: 160px;
	}
	.donation-popup {
		width: 90%;
	}
	.donation-popup-select {
		width: 125px;
		margin-right: 0;
	}
	.donation-popup .donation-popup-subheading {
		line-height: 28px;
	}
	.donation-popup h3 {
    line-height: 32px;
    margin-bottom: 10px;
	}
	.donation-popup-select select {
		height: 42px;
		font-size: 26px;
		padding-top: 3px;
		background-position: 70% 50%;
	}
	.donation-popup button {
		height: 42px;
		border-radius: 22px;
		font-size: 20px;
	}
}

@media (max-width: 449px) {
	.donation-popup-left {
		display: none;
	}
	.donation-popup-right {
    padding-left: 30px;
	}
	.donation-popup h3 {
    line-height: 32px;
    margin-bottom: 10px;
	}
	.donation-popup-close {
    width: 30px;
    height: 30px;
    top: -15px;
    right: -15px;
	}
	.donation-popup h3 {
    font-size: 28px;
    line-height: 28px;
	}
	.donation-popup {
		font-size: 24px;
	}
}


.donation-block {
    
     background: #ed6d3f;
}


.donation-block .bl-right {
    display: inline-block;
    /* float: right; */
    width: 60%;
    vertical-align: top;
    margin-top: 5%;
    color: white;
}

.donation-block .bl-right h3 {color: white;}

.donation-block .bl-left {
    display: inline-block;
    width: 35%;
    margin-left: 2%;
}

.logo {background: url(images/donate-popup-logo.svg) no-repeat center;  display: inline-block; width: 200px; height: 200px;     margin: 8%;}

.donation-block .donation-popup-select {display: inline-block; float: left;}
.donation-block .donation-popup-donate {display: inline-block; }

.donation-block .donation-popup-select {width: 40%;}


@media (max-width: 700px) { 
    
    .donation-block {padding: 5%;}

    .donation-block .bl-right {width: 100%;}
    
    .donation-block .bl-left {width: 100%;}
    
    .donation-block .bl-left .logo {
        
        margin: 0 auto;
        padding: 0;
        display: block;
        text-align: center;
    
    }
    
    .donation-block .donation-popup-donate {display: block; width: 100%; margin: 10px 0;}
    .donation-block .donation-popup-select {display: block; width: 100%; margin: 10px 0;}

    

}