/* global */

* {
	box-sizing: border-box;
}

body{
	font: 16px Arial, Helvetica, sans-serif;
	color: #2A2A2A;
	padding:0;
	margin:0;
	background-color:#FFFFFF;
}

h1, h2, h3{
	color: #00D258;
}

ul{
	margin: 0px;
	padding: 0px;
}

table {
	border-collapse: collapse;
	width: 100%;
}

td{
	vertical-align: top;
}

a{
	color: #00D2C1;
	text-decoration:none;
	font-weight: bold;
}

button{
	font-weight: bold;
	border-radius: 0px;
	border: 0px solid #00D2C1;
	background-color: #00D2C1;
	padding: 10px 20px 10px 20px;
	color: #FFFFFF;
}

.centered{
	text-align: center;
	margin: 0px auto;
}

.bolded{
	font-weight: bold;
}

#speakersContainer{
	padding: 10px;
	color: #00D258;
}

#speakersBlock{
	display: grid;
	grid-template-areas: 'speaker_1 speaker_2 speaker_3';
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
	padding: 10px;
	border: 0px;
	margin: 0px auto;	
}

#speaker_1{
	grid-area: speaker_1;
	margin: 0px auto;
}

#speaker_2{
	grid-area: speaker_2;
	margin: 0px auto;
}

#speaker_3{
	grid-area: speaker_3;
	margin: 0px auto;
}

#speaker_1 h1, #speaker_2 h1, #speaker_3 h1{
	font-size: 19px;
}

#speaker_1 p, #speaker_2 p, #speaker_3 p{
	font-size: 14px;
}

.speakerPic{
	display: block;
	margin: 0px auto;
	height: 200px;
}

.speakerSocial{
	width: 100%;
	margin: 0px auto;
}

.speakerSocial img, .speakerSocial a img{
	margin: 0px auto;
	height: 30px !important;
}

/* page content */
#grid-container {
	display: grid;
	grid-template-areas:
		'header'
		'main'
		'footer';
	grid-template-columns: 100%;	
	gap: 0px;
	padding:0;
	margin:0;
}

/* header container */
#headerContainer{
	grid-area: header; 
	display: grid;
	grid-template-areas: 
		'topContainer'
		'navContainer';
	grid-template-columns: 100%;
	color:#FFFFFF;
	padding: 0px;
}

#topContainer{
	grid-area: topContainer; 
	float:right;	
	background-color: #00D258;
	padding: 5px;
	width: 100%;
}

.socialIcons{
	float:right;	
	padding: 10px;
}

.socialIconsFooter{
	padding: 10px;
}

.socialIcons img, .socialIconsFooter img{
	height: 30px;
}

#navContainer{
	grid-area: navContainer;	
	width: 100%;
	display: grid;
	grid-template-columns: 50% auto;	
}

#logoContainer{
  float:left;
  margin: 0px;
  padding: 5px 0px 0px 10px;
}

#logoContainer img{
	height: 40px;
}

#burgerContainer{
	float:right;
	display: none;
 }

#hamburgerIcon{
	height: 30px;
}

#menuContainer{
	float:right;
	min-height:45px;
	padding: 5px 0px 0px 15px;
	vertical-align: middle;
}

#menuContainer ul{
	float:right;
	list-style-type: none;
	padding: 10px;
}

#menuContainer li{
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0;
	border: 0;
}

#menuContainer a{
	color:#00D258;
	text-transform: uppercase;
	font-size:14px;
	vertical-align: top;
}

#textContainer{
	width: 80%
	padding-bottom: 50px;
	margin: 20px auto 20px auto;
	display: grid;
	grid-template-areas: 'introVisual introText';	
	gap: 0px;
}

#textVisual{
  grid-area: introVisual;
  padding-left: 20px;
}

#textVisual img{
	width: 350px;
}

#textText{
	grid-area: introText;
	margin-left: 20px;
	color: #2A2A2A;
	width: 90%;
}

#textText h1{
	color: #00D258;
	font-size: 35px;	
}

#textText h2{
	color: #00D2C1;
	font-size: 19px;	
}

#textText h3{
	font-size: 15px;	
}

#textText p{
	color: #2A2A2A;
	text-align: justify;
}

#textText img{
	height: 200px;
}

/* main container */
#mainContainer{
	grid-area: main;
	background-color: #FFFFFF;
	min-height: 600px;
}

/* hero container */
#heroContainer{
	position: relative;
	width: 100%;
}

#heroContainer img {
	display: block;
	width: 100%;
}

#borderOverlay{
	color: #00D258;
	display: block;
	position: absolute;
	bottom: 0;
  	width: 100%;
  	z-index: 5;
}

#borderOverlayText{
	width: 35%;
	padding: 10px 0px 20px 10px;
	background: rgba(30, 30, 30, 0.5);
}

/* intro container */
#introContainer{
	width: 80%
	padding-bottom: 50px;
	margin: 20px auto 20px auto;
	display: grid;
	grid-template-areas: 'introVisual introText';	
	gap: 0px;
}

#introVisual{
  grid-area: introVisual;
  padding-left: 20px;
}

#introVisual img{
	width: 350px;
}

#introText{
	grid-area: introText;
	margin-left: 20px;
	color: #2A2A2A;
	width: 90%;
}

#introText h1{
	color: #00D258;
	font-size: 35px;	
}

#introText h2{
	color: #00D2C1;
	font-size: 18px;	
}

#introText p{
	color: #00D258;
	text-align: justify;
}

/* items container */
#itemsContainer{
	display: grid;
	grid-template-areas: 'item_1 item_2 item_3';
	grid-template-columns: 33% 34% 33%;
	gap: 0px;
	padding: 0px;
	border: 0px;
}

#itemsContainer div h1{
	color: #FFFFFF;
}	
	
#itemsContainer div{
	color: #FFFFFF;
	border: 0px;
	padding: 20px;
}

#itemsContainer div img{
	display: block;
	margin: 0px auto;
	width: 20%;
}

#itemsContainer div p{
	text-align: justify;
}

#itemsContainer div h1{
	text-align: center;
	font-size: 22px;
}

#item_1{
	grid-area: item_1;
	background-color: #00D258;
}

#item_2{
	grid-area: item_2;
	background-color: #00D2C1;
}

#item_3{
	grid-area: item_3;
	background-color: #11D200;
}

#nextContainer{
	padding-top: 40px;
	padding-bottom: 40px;
	color: #FFFFFF;
	background-color: #00D258;
	text-align: center;
	margin: 0px auto;
}

#nextSemi{
	font-size: 20px;
	font-weight: bold;		
}

#nextMain{
	font-size: 25px;
	font-weight: bold;		
}

#newsContainer, #blogsContainer, #prevEventContainer{
	padding-top: 30px;
	padding-bottom: 30px;
}

#newsContainer h1, #blogsContainer h1, #prevContainer h1{
	color: #00D258;
}

.newsBlock {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(510px,1fr));
	gap: 0px;
	padding-top: 40px;
	padding-bottom: 40px;
	margin: 0px auto;
	width: 100%;
}
.news, .blogPost{
	padding: 20px;
	margin: 0px auto;
}

.news img, .blogPost img{
	display: block;
	margin: 0px auto;
	width: 65%;
}

.news h2, .blogPost h2{
	color: #00D258;
}

.news p, .blogPost p{
	color: #2A2A2A;
	text-align: justify;
}

.blogsBlock{
	display: grid;
	grid-template-areas: 'blogPost blogPost blogPost';
	grid-template-columns: 33%;
	gap: 0px;
	padding-top: 40px;
	padding-bottom: 40px;
	margin: 0px auto;
	width: 100%;
}

.prevEventBlock{
	display: grid;
	grid-template-areas: 'prevEvent prevEvent prevEvent';
	grid-auto-columns: 32%;
	gap: 15px;
	padding: 40px;
	margin: 0px auto;
	width: 100%;
}

.prevEvent img{
	display: block;
	margin: 0px auto;
	width: 65%;
}

.prevEvent p{
	text-align: justify;
}

#sponsorContainer{
	padding-top: 40px;
}

#sponsorContainerBlock{
	display: grid;
	grid-template-areas: 'singleSponsor singleSponsor';
	grid-auto-columns: 50%;
	gap: 15px;
	padding: 40px;
	margin: 0px auto;
	width: 100%;

}

.singleSponsor{
	text-align: center;
	margin: 0px auto;
}

.singleSponsor img{
	display: block;
	margin: 0px auto;
	height: 100px;
}


/* footer */
#footerContainer{
	color: #FFFFFF;
	grid-area: footer;
	background-color: #1C1C1C;
	padding: 15px 0 0 0;
	width: 100%;
	bottom: 0px;
}

#contactContainer{
	display: grid;
	grid-template-areas: 'contact newsletter';
	grid-template-columns: 50% 50%;
	padding: 0px;
	border: 0px;
	gap: 0px;
}

#contactContainer div{
	padding: 0 10px 10px 10px;
}

#contact a, #contact p{
	color: #FFFFFF;
}

#contact{
	grid-area: contact;
}

#contactLogo{
	width: 250px;
}

#emailIcon{
	height: 15px;
}

#newsletter{
	grid-area: newsletter;	
	padding-bottom: 20px;
	color: #FFFFFF;
}

#newsletter form button{
	border-radius: 5px;
	background-color: #00D258;
}

#newsletter form input{
	border-radius: 5px;
	border: 1px solid #FFFFFF;
	background-color: #1C1C1C;
	color: #FFFFFF;
	height: 30px;
	width: 50%;
}

#copywrightContainer{
	padding: 15px 0px 15px 0px;
	background-color: #00D258;
	text-align: center;
	font-size: 14px;
}

#copywrightContainer a{
	color: #FFFFFF;
}

@media(max-width: 768px){
	#burgerContainer{
		display: block;
		margin: 0px;
		padding-top: 5px;
		padding-right: 5px;
	}

	#burgerContainer a{
		float:right;
	}
		
	#navContainer{
		grid-area: navContainer;	
		width: 100%;
		display: grid;
		grid-template-columns: 200px auto;	
	}
		
	#logoContainer img{
		height: 30px;
	}
		
	#menuContainer{
		display: none;
		position: absolute;
		top: 100px;
		z-index: 100;
		background-color: #FFFFFF;
		right: 0px;
	}

	#menuContainer ul{
		float: left;		
	}
	
	#menuContainer li{
		display: block;
	}

	#borderOverlayText{
		width: 50%;
		padding: 10px 0px 10px 10px;
	}

	#borderOverlayText h1, #borderOverlayText p{
		font-size: 14px;
	}
	
	#introContainer{
		display: grid;
		grid-template-areas:
		'introVisual'
		'introText';
	}
	
	#introVisual img{
		display: block;
		width: 85%;
		margin: 0px auto;
	}

	#introText{
		display: block;
		width: 90%;
		margin: 0px auto;
	}
	
	#introText p{
		font-size: 15px;
	}
	
	#introText h1{
		font-size: 18px;
	}

	#introText h2{
		font-size: 15px;	
	}

	#itemsContainer{
		display: grid;
		grid-template-areas: 
			'item_1'
			'item_2'
			'item_3';
		grid-template-columns: 100%;
		gap: 0px;
	}

	#itemsContainer div img{
		width: 10%;
	}

	#itemsContainer div p{
		font-size: 15px;		
	}
	
#speakersContainer{
	padding: 10px;
}

#speakersBlock{
	display: grid;
	grid-template-areas: 
		'speaker_1'
		'speaker_2'
		'speaker_3';
	padding: 10px;
	border: 0px;
	margin: 0px auto;	
}

#speaker_1{
	grid-area: speaker_1;
	margin: 0px auto;
}

#speaker_2{
	grid-area: speaker_2;
	margin: 0px auto;
}

#speaker_3{
	grid-area: speaker_3;
	margin: 0px auto;
}

#speaker_1 h1, #speaker_2 h1, #speaker_3 h1{
	font-size: 16px;
}

#speaker_1 p, #speaker_2 p, #speaker_3 p{
	font-size: 10px;
}

#textContainer{
	display: grid;
	grid-template-areas: 
		'introVisual'
		'introText';	
	gap: 0px;
	grid-template-columns: 100%;
}



	#nextSemi{
		font-size: 20px;
		font-weight: bold;		
	}
	
	#nextMain{
		font-size: 25px;
		font-weight: bold;
		margin: 0px auto;		
		width: 75%;
		padding-bottom: 10px;
	}	

	.newsBlock, .blogsBlock{
		display: grid;
		grid-template-areas: 
			'news'
			'news'
			'news';
		grid-template-columns: 100%;
		gap: 0px;
		width: 100%;
	}
	
	.news, .blogPost{
		width: 85%;
	}
	
	.news img, .blogPost img, {
		display: block;
		height: 200px;
		margin: 0px auto;		
	}	
	
#sponsorContainerBlock{
	display: grid;
	grid-template-areas: 
		'singleSponsor'
		'singleSponsor';
	grid-auto-columns: 100%;
}

.singleSponsor img{
	display: block;
	margin: 0px auto;
	height: 70px;
}
	
	
	#contactContainer{
		display: grid;
		grid-template-areas: 
			'contact'
			'newsletter';
		grid-template-columns: 100%;
		padding: 0px;
		border: 0px;
		gap: 0px;
	}
	
	.prevEventBlock{
		display: grid;
		grid-template-areas: 
			'prevEvent'
			'prevEvent'
			'prevEvent';
		grid-template-columns: 100%;
		gap: 15px;
		padding-top: 40px;
		padding-bottom: 40px;
		width: 90%;
	}
	
	
}