#page-content{

}

body{
    color:#000;
    font-size:16px;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover, a:focus {
    color: #333;
    text-decoration: none;
}


a.powerhourlink {
    color: white;
    text-decoration: none;
}

a.powerhourlink:hover, a.powerhourlink:focus {
    color: #BBB;
    text-decoration: underline;
}

h1{
    font-size: 48px;
}

h2{
    font-size: 36px;
    margin-top: 40px;
}

.ua-section-text{
    padding: 20px 0;
}

.ua-dd-style{
    padding:5px;
}

.ua-challenge-dd-check-symbol, .ua-crowdfunding-dd-check-symbol{
    display: none;
    padding: 0 5px 0 2px;
    margin: 0 0 0 auto;
    position: relative;
    float: right;
    font-weight: bold;   
}


/* McGill 24 top banner */
#top-head-div-full{
    width:100%;  
    padding: 25px 0;
    background-color:#ED1B2F; 
    background-image: url("/give/mcgill24leaders/assets/hero-banner-gradient.svg");
    background-size: 100%; 
}
#top-head-container{ 
    padding:50px 0px;
} 

.ua-flex-middle{
    display:flex; 
    height:100%; 
    align-items:center;
}

#dogLogo{
    width:90%;
}

.ua-anchor{
  position: absolute;
  transform: translateY(-25vh);
}


#top-head-raised,
#top-head-donations{
    text-align:center;
    margin-left:20%;
}
#top-head-donations{
    padding-top:10px;
}

#top-head-raised-text,
#top-head-raised-amount,
#top-head-donations-text,
#top-head-donations-amount,
#top-head-donations-give-rise{
    color:white;
    font-size:38px;
    text-align:center;
    font-weight:500;
}



#top-head-raised-text,
#top-head-donations-text{
    font-size:18px;
    font-weight:500;
}

#top-head-donations-give-rise{
    font-size:42px;
    line-height: 48px;
    text-align: left;
}

#top-head-donations-give-rise-pink{
    color:white;
}


#ua-float-top-anchor-menu-container{
    background:#eaeaea;
    width:100%;
    z-index:10; 
}
#ua-float-top-anchor-menu{
    font-size:1.2em;
    padding:30px 5px 30px 0;
    margin:0 auto;
}
#ua-float-top-anchor-menu-challenge-btn{
    display:inline-block;
    padding-right:60px; 
}
#ua-float-top-anchor-menu-donor-btn{
    display:inline-block;
}
.ua-anchor-link{
    border-bottom:2px solid transparent;
    display:inline-block;
    padding:5px 0;
    font-weight:500;
    font-size:20px;
}
.ua-anchor-link:hover{
    border-bottom:2px solid red;
    display:inline-block;
    padding:5px 0;
}

#ua-float-top-faq-menu{
    display:inline-block;
    float:right;
}

#ua-faq-page{
    padding-bottom:180px;
}
#ua-faq-button{
    border-radius: 6px;
    background-color: #000;
    border: 2px solid #000;
    font-size: 16px;
    height: 43px;
    color: white !important;
    cursor: pointer;
    padding: 6px 15px;
}
#ua-faq-page-inner{
    margin:0 auto;
}

/* POWER HOUR */
#power-hour-container{
    width:100%;
    background:#640028; 
    text-align:center;
    padding:25px 15px;
}
#power-hour-title{
    font-size:26px;
    font-weight:600;
    color:white;
}
#power-hour-text{
    font-size:16px;
    font-weight:500;
    color:white;
    padding:5px;
}


/* Style The Dropdown Button */
.ua-drop-btn {      
    color: black;
    padding: 6px 0 2px 5px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-align: left;
    background:transparent;
    width:100%;

}

/* The container <div> - needed to position the dropdown content */
.ua-dropdown {
    position: relative;
    display: inline-block;
    width:100%;
    border: 1px solid #eaeaea;
    background-image: -webkit-linear-gradient(right, #ED1B2F, #ED1B2F 10%, transparent 10%, transparent 100%); 
}

/* Dropdown Content (Hidden by Default) */
.ua-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    width:100%;
    max-width:335px;    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.ua-dropdown-content a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.ua-dropdown-content a:hover {
    background-color: #f1f1f1
}

.ua-drop-btn-container{
    display:inline-block;
    width:100%;
}
.ua-drop-btn-chevron{
    display:inline-block;
    float: right;
    color:white;
    padding:3px;
    text-align:center;
    width:10%;
    transform: rotate(0deg);
    transition: all .3s;
}
.ua-drop-btn-chevron-on{
    transform: translateY(-10%) rotate(180deg);
    transition: all .3s;
}


/* Change the background color of the dropdown button when the dropdown content is shown */
.ua-dropdown:hover .ua-drop-btn {

}






/* Nav buttons */

.ua-slideshow-nav-buttons{
    width: 20px;
    height:20px;
    border:none;
    background:transparent;
}
.ua-slideshow-nav-buttons-right{
    background-image: url("/give/mcgill24/next.svg");
    background-size: cover;
}
.ua-slideshow-nav-buttons-left{
    background-image: url("/give/mcgill24/back.svg");
    background-size: cover;
}






/************ CHALLENGE SECTION *************/

#ua-challenge-section{
    padding:25px 0;
}


/* Challenge promo section */

#ua-challenge-promo-container-card{
    padding: 15px 10px;
    box-shadow: 0 4px 5px 0 rgb(0 0 0 / 10%), 0 6px 20px 0 rgb(0 0 0 / 8%);    
}

#ua-challenge-promo-select-container{
    padding-bottom: 10px;
}



#ua-challenge-promo-container-image{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #d2d3d4;
    border: 1px solid #d2d3d4;
    height: 100%;
    max-height: 195px;
    overflow: hidden;
    text-align: center;
}

#ua-challenge-promo-container-image img{
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
}

#ua-challenge-promo-container-card .ua-challenge-card-title{
    font-size:18px;
    line-height:22px;
}

#ua-challenge-promo-container-card .ua-challenge-card-progress{
    font-size:16px;
}

.ua-slideshow-nav-buttons-left-container,.ua-donor-nav-buttons-left-container{
    padding: 0 10px 0 0;
    margin: auto 0;
    display:block;
}

.ua-slideshow-nav-buttons-right-container, .ua-donor-nav-buttons-right-container{
    padding: 0 0 0 10px;
    margin: auto 0;
    display:block;
}

#challenge-page-nav, #crowdfunding-page-nav{
    display:none;
}






/* Challenge card section */


#ua-challenge-slideshow-container,#ua-crowdfunding-slideshow-container{
    white-space:nowrap; 
    display:flex; 
    justify-content: space-between; 
    align-items: baseline;
    width:100%;
}

#ua-challenge-slideshow, #ua-crowdfunding-slideshow{
    white-space: nowrap;
    overflow-x: hidden; /* Add horizontal scrollbar */
    overflow-y: hidden; /* Hide vertical scrollbar */
    width:100%;
}
#ua-challenge-slideshow{
    display: -webkit-flex;
    display: flex;   
    flex-direction: column;
    flex-wrap: wrap;
    height: 350px;
}



.ua-challenge-card-sm{
    width: 330px;
    white-space: normal; 
    margin: 0 10px 10px 0;
    padding: 16px 15px;
    position:relative; 
    background:#F7F5F5;  
}

.ua-challenge-card-container{
    display: flex;
}

.ua-challenge-icon-container{
    flex: 1;
    width: 75px;
    max-width: 75px;
}

.ua-challenge-description-container{
    padding: 0 0 0 5px;
    position: relative;
} 

.ua-challenge-card-title{
    font-weight:500;
    font-size: 15px;
    line-height:18px;
}

.ua-challenge-card-progress{
    position: absolute;
    bottom: 0px;
    white-space: nowrap;
    font-size: 12px;
}

.ua-challenge-inside-circle img{
    width: 30px;
    height:30px;
}




.progress-item {
    display: flex;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 0;
    animation: .4s ease-out reverse; 
}

.progress-item::after {
    background-image:url(\'./icons/book-Black.svg\');
    background-size: 38px;
    background-repeat: no-repeat;
    background-color: white;
    background-position: center;
    background-image: var(--bg-image); 
    content: " ";
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 70px;
    margin: 10px;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
}


.progress-item-met {
    display: flex;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-image:url(\'./icons/book-White.svg\');
    background-size: 38px;
    background-repeat: no-repeat;
    background-color: #ED1B2F;
    background-position: center;
    background-image: var(--bg-image); 
}

/* IE10 and IE11 fill */
@media all and (-ms-high-contrast:none){
    .ua-challenge-icon-container{   /* IE10 */
        flex:none;width:auto;
    }
    *::-ms-backdrop, .ua-challenge-icon-container { /* IE11 */
        flex:none;width:auto;
    } 
}



/** CROWDFUNDING CARDS **/

#ua-crowdfunding-select-container{
    text-align:right; 
    width:100%; 
    clear:both; 
    padding: 15px 30px 15px 0;

}
#ua-crowdfunding-select-box{
    max-width:320px;
}

#ua-crowdfunding-section{
    margin-bottom:35px;
}

.ua-crowdfunding-card-container{
    width:350px;
    background:#FFF;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.10), 0 6px 20px 0 rgba(0, 0, 0, 0.08); 
    display:inline-block;
    margin: 0 20px 0 0;
    white-space: normal;
}


.ua-crowdfunding-card-image{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #d2d3d4;
    border: 1px solid #d2d3d4;
    height: 100%;
    max-height: 240px;
    overflow: hidden;
    text-align: center;
}

.ua-crowdfunding-card-image img{
    position: relative;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
}

.ua-crowdfunding-card-title{
    width:100%; 
    color: #000000; 
    font: normal normal bold 18px/25px "McGillCampSans","Helvetica Neue","Helvetica","Arial","sans-serif"; 
    text-align:center;
    padding: 15px;
    height: 70px;
}

.ua-crowdfunding-card-description{
    width:100%;
    height:45px; 
    color: #000000; 
    font: normal normal normal 14px/19px "McGillCampSans","Helvetica Neue","Helvetica","Arial","sans-serif"; 
    text-align:center;
    padding: 0 30px;
}
.ua-crowdfunding-card-fund{
    width:100%; 
    text-align:center;
    padding:23px;
}
.ua-crowdfunding-card-progress{
    width:100%; 
    padding: 0 30px 0 30px;
}

.progress{
    border-radius: 10px;
    font: normal normal 500 12px/20px "McGillCampSans","Helvetica Neue","Helvetica","Arial","sans-serif"; 
    background-color: #C7C7C7;               
}
.progress-bar {
	width: 100%;
	background-color: #464646;
	padding: 0 3px;
    text-align:left;
    border-radius: 10px;
}




/* DONOR WALL AND REGIONS MAP */

#ua-donors-content-container{
    display:inline-block;
    width:100%;
    margin: 20px 0;
}


#ua-donor-quotes-container{
    display:flex;
    width:100%;
}

#ua-donor-quotes-slideshow{
    width:100%;
    font-size:20px;
    padding: 15px 35px;    
}


#donor-wall-map-container{
    width:100%;
}
#donor-wall-container{
    width:230px;
    float:left;
    display:block;
}

#donor-wall-page-nav,#challenge-page-nav,#crowdfunding-page-nav{
    width:100%;
}
#donor-wall-page-nav-right,#challenge-page-nav-right,#crowdfunding-page-nav-right{
    width:10%;
    text-align:right;
}
#donor-wall-page-nav-dotted,#challenge-page-nav-dotted,#crowdfunding-page-nav-dotted{
    width:80%;
}
#donor-wall-page-nav-left,#challenge-page-nav-left,#crowdfunding-page-nav-left{
    width:10%;
    text-align:left;
}


#donor-wall-back-btn-black,#donor-wall-forward-btn-black,
#challenge-back-btn-mobile,#challenge-forward-btn-mobile,
#crowdfunding-back-btn-mobile,#crowdfunding-forward-btn-mobile{
    width:30px;
    height:30px;
    padding:5px 5px 5px 5px;
    cursor: pointer;
}



#map-container{
    float:left;
    position:relative;
    padding:0px 0px 20px 10px; 
    width:950px
}

#map-container img{
    width:100%;
}

/* for map borders */
#map-container path {
    stroke-width:1; /* control the countries borders width */
    stroke: #9a9a9a; /* choose a color for the border */      
}

#donor-wall-list{
    background:#F7F5F5;
    width:100%;
    padding:20px 12px;
}
.donor-wall-donor{
    padding:5px;
}
.donor-wall-donor-name{
    font-size:1.1em;
    text-align:center;
}
.donor-wall-donor-date{
    font-style:normal;
    font-size:12px;
    color:#000;
}
.donor-wall-donor-amount{
    color:#ED1B2F;
}
.donor-wall-donor-detail{
    color:#000;
    line-height:1.25em;
    text-align:center;
}



#map-container-top-tabs{
    width:100%;
    text-align:center;
}

.regionsmap{
    width: 700px; 
    height: 500px;
    margin: 0 auto;
    padding-top:40px; 
}
.regionstab{
    border: 1px solid #E7E3E1;
    border-radius: 6px;
    background: #E7E3E1;
    font-weight:500;
    outline: none;
    font-size:18px;
    color:#333;    
    height:55px;
    margin: 0 15px;
    padding: 15px 20px;       
}
.regionstabselected{
    border: 1px solid #ED1B2F;
    border-radius: 6px;
    background: #ED1B2F;
    font-weight:500;
    outline: none;
    font-size:18px;
    color:white;
    height:55px;
    margin: 0 15px;
    padding: 15px 20px;
}

.regionstab:hover{
    border: 1px solid #ED1B2F;
    color:#ED1B2F;     
}


#social-container{
    margin-bottom:60px;
    background:#eaeaea;
}

#tintupDiv{
    height:620px;
    width:100%;
}




/* PAGINATION DOTS*/
.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
} 


.paginationOutter {
  display: block;
  margin: 5px auto;
  width: 120px; /* only show 5 dots */
  overflow: hidden;
  height:18px;
  position: relative;
  
}

.paginationInner{
  position:absolute;
}

.dot {
  display: inline-block;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
  transition: height width 1s ease;
}


/* 1st and 5th */
.dot {
  width: 10px;
  height: 10px;
}

/* 2nd and 4th */
.dot.nearActive {
  width: 10px;
  height: 10px;
}


/* 3rd */
.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
}




/* FAQ SECTION */
#ua-faq-page-inner a{
    text-decoration:underline;
}
#ua-faq-page-inner a:hover{
    text-decoration:none;
    color:red;
}
.ua-faq-question{
    font-size:24px;
    font-weight:500;
    padding: 20px 0 0 0;
    margin: 0;
}
.ua-faq-answer{
    font-size:16px;
    padding:10px 0 0 0;
}
.ua-faq-caveat{
    font-style: italic;
    padding:10px 0 0 0;
}




/* SMALL SCREEN ADJUSTMENTS (Bootstrarap 750px	970px	1170px) */

@media (max-width: 1600px) {  
    #top-head-div-full{
        background-position: 50%;
        background-size: 135%;
    }
}

@media (max-width: 1200px) {  
    #ua-inner-header-container,
    #top-head-container,
    #ua-float-top-anchor-menu-container,
    .ua-camp-page-section,
    #ua-faq-page-inner,
    #ua-footer-section-row{
        padding: 0 15px;
    } 

    #top-head-raised,
    #top-head-donations{
        margin-left:auto;
    }
    
    #map-container{
        width: 700px;
    }

    .regionsmap{
        width: 700px; 
    } 
    
    #top-head-donations-give-rise{
        font-size:36px;
        line-height: 40px;
    }    
    
}




@media (max-width: 970px) {  
    #ua-inner-header-container,
    #top-head-container,
    .ua-camp-page-section,
    #ua-footer-section-row{
        padding: 0 15px;
    }
    

    #top-head-donations-give-rise{
        font-size:22px;
        line-height: 28px;
    }


    
    #top-head-raised-text,
    #top-head-raised-amount,
    #top-head-donations-text,
    #top-head-donations-amount{
        font-size:20px;
    } 

    #ua-challenge-section{
        margin-right:-15px;;
    }    
    
    #ua-crowdfunding-select-container{
        padding: 15px 0 15px 0;
    }
   
    
    
    #map-container{
        width: 400px;
    }

    .regionsmap{
        width: 400px; 
    } 
    
    #tintupDiv {
        height: 400px;
    }          
           
}


@media (max-width: 770px) {

    h1{
        font-size:36px;
        font-weight:500;
        padding: 30px 0 10px 0;
    }

    #top-head-donations-give-rise{
        text-align: center;
    } 

    .ua-section-text{
        padding: 10px 0;
    }

    #ua-faq-button {
        height:35px;
        padding:3px 15px;
    }

    .ua-anchor-link {
        font-size:16px;
    }

    #ua-float-top-anchor-menu{
        font-size:1em;
        padding:15px 10px 20px 0;
        margin:0 auto;
    }
    #ua-float-top-anchor-menu-challenge-btn{
        padding-right:20px; 
    }



    #donor-wall-back-btn-black,#donor-wall-forward-btn-black,
    #challenge-back-btn-mobile,#challenge-forward-btn-mobile,
    #crowdfunding-back-btn-mobile,#crowdfunding-forward-btn-mobile{
        width:40px;
        height:40px;
    }
    #ua-donor-quotes-nav-right,#ua-donor-quotes-nav-left{
        width:30px;
        height:30px;    
    }

    #ua-challenge-slideshow{
        height: 570px;   
    }

    #ua-challenge-promo-container-card .ua-challenge-card-progress {
        font-size:15px;
    } 

    #ua-challenge-promo-container-card{
        padding: 15px;
        margin-bottom: 6px;           
    }
    .ua-slideshow-nav-buttons-left-container, .ua-slideshow-nav-buttons-right-container{
        display:none;
    }
    #challenge-page-nav,#crowdfunding-page-nav{
        display:inline-table;
    }
    
    .ua-challenge-card-sm{
        width: 100%;
    }
    
    #ua-challenge-section{
        padding:25px 0 0 0;
    }
    
    .ua-flex-middle{
        display:block;
        margin:0 auto;
    }
    #dogLogo{
        width:100%;
        max-width:400px;
    }
  

    #top-head-donations-give-rise{
        padding:15px 0;
        font-size:18px;
        line-height: 22px;
    }    
    
    #top-head-raised-text,
    #top-head-raised-amount,
    #top-head-donations-text,
    #top-head-donations-amount{
        display:inline-block;
        font-size:16px;
    }

    #ua-crowdfunding-select-box{
        max-width:770px;
    } 

    
    #top-head-mcgill24-logo{
        text-align: center;
    } 
    
    
    
    #ua-donor-quotes-slideshow{
        width: 100%;
        font-size: 16px;
        padding: 15px 15px;    
    }
    #donor-wall-container{
        width:100%;
    }    
    
    #map-container{
        width: 100%;
    }
    
    #map-container-top-tabs{
        padding: 15px 0;
    }
    .regionsmap{
        width: 300px;
        height: 300px; 
    }
    .regionstab, .regionstabselected{ 
        height: 50px;
        margin: 0 5px;
        padding: 5px 15px;
        width:30%;
    }        
        
    #tintupDiv {
        height: 360px;
    } 
       
}            

@media (max-width:500px){
    #ua-float-top-anchor-menu-challenge-btn{
        display:block; 
    }  
 
}


@media (max-width:460px){
    h1{
        font-size:24px;
    }    
    #ua-challenge-promo-container-card{
        padding: 15px;
    }
    #ua-challenge-promo-container-card .ua-challenge-card-progress {
        font-size:16px;
    }
    .ua-crowdfunding-card-container{
        width: 100%;
    }
    
    .soc-rank-display{
        width: 47%;
        margin: 2px;
    }
    .soc-rank-title-div{
        font-size:16px;
        height:35px;
    }    
    #tintupDiv {
        height: 320px;
    }
    .regionstab, .regionstabselected {
        padding:5px;
    }
    #map-container{
        float:left;
        position:relative;
        padding:0px 0px 20px 0; 
        width:100%
    } 
              
}


@media (max-width:360px){
    #tintupDiv{
        height:280px;
    }
   
}