/* Sets the font and background color */
body {
	font-family: 'Lato', sans-serif;
	background-color: black;
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
	color: white;
}
/* Logo placement */
.logo {
	float: left;
	width: 20%;
	padding-left: 40px;
	margin-top: 22px;
	position: absolute;
	z-index: 9999;
}
/* Left half section of the screen */
.sec-1 {
	position: absolute;
	margin-top: 0;
	height: 100%;
	width: 50%;
	background-color: black;
}
.sec-1 h6 {
	position: absolute;
	text-align: center;
	font-size: 16px;
	margin-top: -29px; 
	margin-left: 3px;
	z-index: 9999;
}
/* Social media links */
.social {
	width: 54px;
	position: absolute;
	right: 0;
	top: 50%;
  	transform: translateY(-50%);
  	margin-right: 15px;
  	z-index: 9999;
}
.social a:nth-of-type(2) img{
	height: 26px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.social a:nth-of-type(2) img, .social a:nth-of-type(3) img{
	margin-top: 15px;
}
.social img {
  	border: 2px solid white;
	background-color: transparent;
	padding: 10px 10px 10px 10px;
	width: 30px;
	height: 30px;
}
.social img:hover {
	background-color: #E3E3E3;
}
/* Main slogan */
.hashtag {
	position: absolute;
	bottom: 0;
	font-size: 100px;
	font-weight: 900;
	width: 200px;
	margin: 0 0 67px 40px;
	z-index: 9999;
}
/* Spinning can animation */
.can {
 width: 50%;
 display: inline-block;
 margin: 0;
 transform: rotate(-20deg);
 transform: scale();
}
.hashtag span {
	color: #ED1B2F;
}
/* Footer bar */
footer {
	width: 100%;
	height: 47px;
	background-color: #ED1B2F;
	bottom: 0;
	position: absolute;
	font-size: 12px;
	text-decoration: none;
	z-index: 9999;
}
footer p:first-child {
	margin-left: 30px;
	margin-top: 16px;
}
footer p:nth-child(2) {
	text-align: center;
	margin-top: -27px;
}
footer p:nth-child(3) {
	text-align: right;
	margin-top: -27px;
}
footer p:nth-child(2) a {
	color: black;
}
footer p:nth-child(3) a {
	text-decoration: none;
	color: white;
	margin-right: 30px;
}
/* Top right section of the screen */
.sec-2 {
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	position: absolute;
	background-color: #ED1B2F;
}
/* Secondary slogan */
.sec-2 p:first-child {
	position: absolute;
	font-size: 80px;
	font-weight: 900;
	width: 200px;
	margin: 9% 0 0 40px;
	color: black;
	opacity: .2;
}
/* Small cans */
.cans {
	width: 300px;
	position: absolute;
	right: 10%;
	top: 10%;
}
/* Large plus */
.plus {
	font-size: 200px;
	position: absolute;
	right: 0;
	top: 0;
	margin: -64px 7px 0 0;
}
/* Description */
.desc {
	width: 300px;
	font-weight: 300;
	font-size: 20px;
	text-align: right;
	position: absolute;
	margin: 0 20px 78px 0;
	right: 0;
	bottom: 0;
}
/* Products button */
#button {
	background-color: black;
	border: none;
	padding: 10px 30px;
	color: white;
	font-weight: 400;
	font-size: 16px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    cursor:pointer;
    position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 20px 20px 0;
}
#button:hover {
	background-color: #270000;
}
/* Bottom right section of the screen */
.sec-3 {
	right: 0;
	bottom: 0;
	width: 25%;
	height: 50%;
	position: absolute;
	background-color: black;
	text-align: center;
}
/* Events title */
.sec-3 h1:first-child {
	font-size: 80px;
	font-weight: 800;
	margin: 0 auto;
	color: white;
}
hr {
	width: 35%;
}
/* Events text */
.sec-3 > p {
	width: 350px;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 20px;  
	font-weight: 300;
}
/* See more events button */
#button-2 {
	background-color: #ED1B2F;
	border: none;
	padding: 10px 30px;
	color: white;
	font-weight: 400;
	font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    margin-top:88px;
}
#button-2:hover {
	background-color: #F43547;
}
/* Bottom middle section of the screen */
.sec-4 {
	right: 25%;
	bottom: 0;
	width: 25%;
	height: 50%;
	position: absolute;
	display: inline;
	background-color: white;
}
/* Div containing all social media feeds */
.scroller {
	overflow-y:scroll;
	width: 100%;
	height: 100%;
}
/* Social media tabs */
ul.tabbar {
	margin: 0; 
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
/* Tab links */
ul.tabbar a {
	display: inline-block;
	background-color: white;
	width: 25%;
	height: 50px;
	float: left;
	text-align: center;
}
ul.tabbar a li {
	display: inline-block;
	padding: 10px 10px;
    text-decoration: none;
    transition: 0.3s;
    height: 33px;
}
/* Button hover */
a.hover:hover {
	background-color: #E3E3E3;
}
ul.tabbar a:focus, .active {
	border-bottom: 2.5px solid black;
	display: all;
}
ul.tabbar a li img {
	width: 30px;
	height: 30px;
}
.tablinks:nth-child(2) img{
	height: 26px;
	width: 30px;
	margin-top: 2px;
}
#Facebook{
	text-align: center; 
	margin-top: 3px;
}
.tabcontent {
	display: none;
    border-top: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
#Gallery img{
	width: 100%;
	margin: 0;
}
/* Gallery tab */
#tester{
	background-color: white;
	border: none;
	padding: 10px 30px;
	color: black;
	font-weight: 400;
	font-size: 16px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor:pointer;
    position: absolute;
    bottom: 0;
	width: 129px;
	margin-left: 37.5%;
	margin-bottom: 30px;
}
#tester:hover {
	background-color: #E3E3E3;
}
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
@media (min-width: 1024px) and (max-width: 1580px) { 
	.sec-3 > p {
		width: 175px;
		margin: 0 auto;
		padding-top: 30px;
		font-weight: 300;
	}
	.none {
		display: none;
	}
	#button-2 {
		margin-top: 30%;
	}
	.sec-2 p:first-child {
		margin: 4% 0 0 40px;
	}
}
@media(max-height: 800px){
	.none {
		display: none;
	}
		#button-2 {
		margin-top: 10%;
	}

}
@media(min-height: 800px) and (max-height: 950px){
	.done {
		display: none;
	}
}
@media(max-height: 721px) and (max-width: 1430px), (max-height: 721px) {
	.cans {
		width: 200px;
		right: 20%; 
	}
}