/*donate*/
/* these are the ideal media queries
only screen and (min-width:480px)
only screen and (min-width:768px)
only screen and (min-width:960px)
*/
/*donate*/

/*body.dNonMobile*/ /*this means it's desktop or tablet. can use this to target desktop when the screen is small like a mobile if needed. are doing this to view the 
mobile hero image on desktop. only use if media queries can't do what you need  */
/*body.dMobile */ /*can use this to target mobile only. only use if can't use media queries*/
/*body.donate*/ /*use this to target this page*/
/*body.noMediaQuery*/ /*use this to target devices that don't support media queries such ie8 and below*/
.donate #hero 
{
    background:url('../img/mobile/donate.jpg') no-repeat center 0;
    background-size:contain;  
}
#donateForm 
{
    background-color:#8c7e71;
    width:100%;    
    margin-bottom:20px;
     -moz-box-shadow:    inset  0  8px 8px -8px #333, 
                        inset  0 -8px 8px -8px #333;
    -webkit-box-shadow: inset  0  8px 8px -8px #333, 
                        inset  0 -8px 8px -8px #333;
     box-shadow:        inset  0  8px 8px -8px #333, 
                        inset  0 -8px 8px -8px #333;
}

#donateFormInner 
{
    max-width:717px;
    display:block;
    margin:0 auto;
    position:relative;
}

.details-close-btn{
    position: absolute;
    right: 0;
    top: 40px;
    cursor:pointer;
    width:16px;height:16px;
}
.donate .details-close-btn {
    right: 20px;
}

.dNonMobile .donate #hero 
{
    background:url('../img/donate.jpg') no-repeat center 0;
    background-size:auto;  
}
.donate #hero .container {
    overflow: hidden;
    width:100%;
    height:188px;
}

    .dNonMobile .donate #hero .container {
        height:343px;
    }
.donate #hero .innerContainer {
    text-align:center;
}
.dNonMobile .donate #hero .innerContainer .copy {font-size:1.3em;max-width: 550px;margin:0 auto;padding-top:223px; }
.donate #main 
{
    padding-top:3.5em;
}

.donate .box 
{
    margin-top:18px;
}

.donate .box img 
{
    vertical-align:bottom;
}

.donate .box .innerBox
{
    padding:0 10px;
}

.donate .box a 
{
    color:#fff;
    text-decoration:none;
}

.donate .box h2 
{
    background-color: #621849;
    margin: 0;
    padding: 12px;
    color:#fff;
  
}
.donate #hero .innerContainer .copy {
    color:#fff;
    padding-top:102px;
}

#donateFormInner {
    padding:20px 0;
}
#donateForm iframe {
    width: 100%;
}

.products { padding:0 10px;}
.products .product { clear:both;margin:0 0 30px 0;


  -webkit-transition: margin-top 100ms ease-in-out;
	-moz-transition:margin-top 100ms ease-in-out;
    -ms-transition: margin-top 100ms ease-in-out;
	-o-transition: margin-top 100ms ease-in-out;
	transition: margin-top 100ms ease-in-out;

}
.products .product .img { width:100%;height:165px;background-color:#000;overflow:hidden;}
.products .product .img img { width:100%;}
.products .product .ttl {clear:both;height:42px;background-color:#621849;padding:2px 0 0 5px;color:#fff;font-size:2.7em; }
.products .product .content { padding:17px 13px;background-color:#fff;



}
.products .product:hover { 
 -webkit-box-shadow:  6px 6px 30px  rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 6px 6px 30px   rgba(50, 50, 50, 0.75);
    box-shadow:  6px 6px 30px  rgba(50, 50, 50, 0.75);
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    margin-top:-4px;
        -webkit-transition: margin-top 200ms ease-in-out;
	-moz-transition:margin-top 200ms ease-in-out;
    -ms-transition: margin-top 200ms ease-in-out;
	-o-transition: margin-top 200ms ease-in-out;
	transition: margin-top 200ms ease-in-out;


}
.products .product.on:hover { 
 -webkit-box-shadow:none;
    -moz-box-shadow: none;
    box-shadow:none;
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.products .product .content h3 {color:#621849;font-weight:bold; }
.products .product .content p {padding:10px 0;min-height:50px;}

.products .product .ttl { }
sup { top:-.2em;padding-left:10px;}
.btn { display:block;text-align:center;font-size:1.1em;}


#donateTitleGeneral { font-size:1.9em;line-height:38px;}
@media only screen and (min-width: 500px) 
{
    .donate .box 
    {
        width:50%;
    }    
    
}

@media only screen and (min-width: 721px) 
{
    #donateTitleGeneral { font-size:1.9em;line-height:57px;}

    .btn { display:inline-block;}
    sup { top:-.5em;padding-left:0px;}
    .products .product .ttl {height:52px;padding:12px 0 0 13px;}

    .products {width:939px;margin:0 auto;margin-bottom:16px;padding:0;}
    .products .product { clear:none;width:300px;margin-left:19px;float:left;margin-bottom:0;}
   
    .products .product.first { margin-left:0;}
    .products .product .img { width:300px;height:165px;background-color:#000;}
    .products .product .ttl { width:287px;height:52px;background-color:#621849;padding:2px 0 10px 13px;color:#fff;font-size:3.5em;}
    .products .product .ttl .small { font-size:.5em;line-height:30px;}

    .products .product .content { width:274px;height:174px;padding:17px 13px;background-color:#fff;}
    .topProducts .product.on .content, .btmProducts .product.on .content{height:228px;background:#fff url('../img/donate/productSelected.png') no-repeat left bottom; }
    /*.btmProducts .product.on .img{height:165px;background:#fff url('../img/productSelectedUp.png') no-repeat left top; padding-top:40px;}*/
    
    .products .product .content h3 {color:#621849;font-weight:bold; }
    .products .product .content p {padding:10px 0;height:100px; }
    .donate #hero .innerContainer .copy {
        font-size:1.3em;
    }
    .donate #hero .container
    {
        max-width:1800px;
    }    
    
    .dNonMobile .donate #hero .scaleImg 
    {
        display:block;    
    }
    
    .donate #hero, #hero
    {
        max-width:1800px;   
    }  
   
    .donate #hero .innerContainer 
    {
        color:#fff;
    }
    .dNonMobile .donate #hero .container 
    {
        padding-top:0;
    }
    .donate #hero .innerContainer 
    {
    }
    .donate .box 
    {
        width:33.33333%;   
    }           
}