/* Site Custom CSS */

/*================== General ==================*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*================== End General ==================*/

/*================== Person Profile ==================*/
.person-photo
{
    width:20%;
}
.person-profile
{
float:left;
width:79%;
padding-bottom:2em;
}

/* Logo Icons */
.cal-cab-icon img
{
  padding-right:0.6px;
}
.cab-comm-icon img
{
  margin: 0 2.8%;
}

/* ================== End Person Profile ==================*/

/*================== About ==================*/

.video-image-container {
    position: relative;
}

.video-image-overlay {
	position: absolute;
	top: 40px;
	left: 97px;
	width: 68px;
}

/*================== End About ==================*/


/*================== Summer BioEnergy Undergrad Research Program ==================*/
.cust-apply-button h3:hover {
background: #d9781c;
}

/*================== EDGE Event ==================*/

.edge-event-img {
    margin: 0px 3% -20px 3%;
    width: 19%;
    height: 19%;
   
}

.edge-event-img-spon {
    margin: 0px 4.5%;
    width: 16%;
    height: 16%;
   
}

/*================== End EDGE Event ==================*/

/*================== News Styling ==================*/

.news_article {
    margin-bottom: 40px;
}

.news_article img {
    width: 300px;
    height: 200px;
    padding: 0px 0px 15px 15px;
    float: right;
}    
/*================== End News Styling ==================*/


/*================== Event Styling ==================*/

.event-block {
 background-color: #F7F7F7;
 border: 1px solid #EDEDED;
 padding: 30px;
 margin: 20px 0;
}


.event-block a:hover {
    text-decoration: none;
}

.top-left-sub {
float: left;
width: 85%;
height: 45px;
}

.top-left-sub h2 {
display: inline;

}

.calendar-date {
background: #016691;
padding: 5px;
float: right;
border-radius: 5px;
width: 80px;
height: 80px;
color: white;
margin: 0 0 20px 20px;
}

.calendar-date p {
margin: -1px 2px;
text-align: center;
font-weight: bold;
font-size: 180%;

}

.calendar-date p:first-child {
border-bottom: white 2px solid;
padding-bottom: -3px;
}


.add-to-calendar-sub a {
background: #d56a03;
padding: 7px 10px;
margin: 20px 5px 0px 5px;
border-radius: 5px;
color: white;
}

.add-to-calendar-sub a:hover {
background: #dd8735;
cursor: pointer;
}

.add-to-calendar-sub {
 margin-top: 15px;
}

/*================== End Event Styling ==================*/

/*================== Mail Chimp sing up styling ==================*/

#mc_embed_signup {
    background:#fff; 
    clear:left; 
    font:14px Helvetica,Arial,sans-serif; 
}

.mc-field-group {
    padding-bottom: 10px;
}

.indicates-required {
    padding-top: 10px;
}

/*================== End Mail Chimp styling ==================*/

/*================== Partners Page styling ==================*/

.partners-container img {
    float: left;
    margin: 0 2.2%;
    width: 20.5%;
    vertical-align: middle;
    height: 100%;
    display: inline-block;
    
}

/*================== End Partners Page styling ==================*/

/*================== Social Media ==================*/

.social-list li.email {
    background: url(http://algae.ucsd.edu/_images/icons/envelope-clipart-black-and-white-envelope_closed_bw_143963.jpg) no-repeat;
    background-size: 32px 32px;
}


/*================== End Social Media ==================*/


.col img {
    margin: 0 5%;
}

/*================== Research Page ==================*/

.counter-container {
    float: left;
    width: 30%;
    margin: 0 1.5%;
    padding: 1.5%;
    text-align: center;
}

    .counter-container p {
        font-size: 175%;
    }
    
    .counter-container p.count-num {
        font-size: 350%;
        color: rgb(1, 102, 145);;
        margin-bottom: 0px;
    }

#collaborators img {
    margin-bottom: 20px;
}

#collaborators img.logo {
    margin-bottom: -10px;
}

/*================== End Research Page ==================*/

/*===================== RESPONSIVE ======================*/

@media screen and (max-width: 500px) {
        .counter-container {
            float: none;
            width: 95%;
            margin: auto;
            padding: 2%;
            
        }
    
    }
    
@media screen and (min-width: 518px) {
    .video-image-overlay {
	    top: 12%;
	    left: 38%;
	    width: 27%;
    }

}

@media screen and (min-width: 818px) {
    .video-image-overlay {
        top: 14%;
        left:39%;
	    width: 27%;
    }

}

@media screen and (min-width: 1237px) {
    .video-image-overlay {
        top: 16%;
	    left:33%;
	    width: 24%;
    }

}