@font-face {
  font-family: '4365';
  src: url('../fonts/4365.eot');
  src: local('4365'), url('../fonts/4365.woff') format('woff'), url('../fonts/4365.ttf') format('truetype');
}

/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_11020">Text with this font applied</p> */
.fontsforweb_fontid_11020 {
  font-family: '4365' !important;
}

@font-face {
  font-family: 'Josefin';
  src: local('JosefinSans-Light'), url('../fonts/JosefinSans-Light.ttf') format('truetype');
}
/* use this class to attach this font to any element i.e. <p class="fontsforweb_fontid_11020">Text with this font applied</p> */
.fontsforweb_fontid_11022 {
  font-family: 'Josefin' !important;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: black; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    -webkit-border-radius: 10px 15px; /* Rounded corners */
    border-radius: 10px 15px;
    opacity: 0.5;
}
#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}



.event-head{
	height: 40%;
	background-image: url('../img/events_bg.png');
	background-size: cover;
	background-repeat: no-repeat;
}
.event-panel,.workshop-panel{
	margin-bottom: 30px;
}

.left_name{
	float: left;
}
.h3_ev .right_name{
	float: right;
}

.event-panel .wrap-event,.workshop-panel .wrap-work{
	padding: 2.333%;
	overflow: hidden;
	width: 70%;
	margin: 0 auto;
}

.event-panel .wrap-bg,.workshop-panel .wrapwk-bg{
	background:transparent;
	overflow: visible;
}

.main{
	display: block;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 9%;
	border-radius: 8px;
	border : 2px solid #ccc;
	float : left;
	width : 35%;
	overflow: hidden;
	box-shadow : 3px 3px 10px black;
	position: relative;
}

.main img{
	margin-top: -20px;
    width: 100%;
    height: 40%;
	position: relative;
}

.main:hover {
    border: 2px groove #E5E7E9;
}

.desc {
	margin-top:-10px;
	height: 15%;
    padding: 15px;
    text-align: center;
	background-color: #263238;
	color: white;
	font-family: "Times New Roman";
	font-size: 14px;
}

.event-heading,.ws-heading{
	font-family: '4365';
	font-size: 30px;
	text-align: center;
	color:#11ADC9;
	text-transform: uppercase;
}

.ws-heading{font-size: 25px;}

.events-header{
  position: relative;
  top:45px; 
  padding:12px 30px;
  font-family: 'Josefin', sans-serif;
  text-transform: uppercase;
  font-size: 40px;
}

.upcoming,.past{
	width: 100%;
	perspective:700px;
	padding: 10px 10px;
}

#line2{
  position: relative;
  left:-200px;
}

.name_ws{
	font-size: 20px !important;
}

#line2 p{
  float: left;
  padding: 3px 8px;
  color: white;
  background: #34495E;
  border-radius: 8px;
}



.hr_e{
  color: black;
  opacity: 1;

}

.p_ev{
	font-family: '4365';
	font-size: 17px;

}

.h3_ev{
	font-size: 35px;
	text-transform: uppercase;
	font-family: 'Roboto';
	font-weight: 400;
}

@media all and (max-width: 1100px){
	.event-panel .wrap-event,.workshop-panel .wrap-work{width: 85%}
}
@media all and (max-width: 500px){
	.event-panel .wrap-event,.workshop-panel .wrap-work{width: 93%}
	.event-head{height: 20%;}
	.events-header{top: 36px;font-size: 25px;padding: 5px 5px;}
}
@media all and (max-width: 400px){
	.event-panel .wrap-event, .workshop-panel .wrap-work{width: 100%}
}

@media all and (max-width: 336px){
	.h3_ev{font-size: 27px}
	.p_ev{font-size: 14px;}
	.event-head{height: 17%;}
	.event-heading{font-size: 25px}
	.ws-heading{font-size: 20px}
}