/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of CSS Reset*/

body, html {
	height : 100%;
	text-align  : center;
	background-color : #fff;
	font-family : 'Roboto', sans-serif;
	min-width : 300px;
}

h1 {
	font-family: 'Press Start 2P', cursive;
	font-size : 35px;
	margin : 3vh auto;
	color : #6441a5;
}

h2 {
	font-size : 26.25px;
	width : 90%;
	margin : 1vh auto;
}

h3 {
	font-size: 20.5px;
	margin : 1.5vh auto;
	line-height: 120%;
	display : inline-block;

}

h4 {
	font-size : 17.5px;
	margin : 1.5vh auto;
	line-height : 120%;

}

input {
	height : 100%;
	width : calc(100% - 42px);
	float : left;
	padding : 0 21px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
	transition : box-shadow 300ms ease-in-out;
	border : none;
	font-size : 18px;
}

input:hover, input:focus {
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

/*TITLE START*/

.title-div {
	margin : 0;
}

.svg {
	width : 30%;
}

/*TITLE END*/

/*SEARCH FUNCTION START*/

.streamer-search{
	width : 90%;
	height : 45px;
	border : none;
	background-color : #fff;
	margin : 1vh auto 1vh;
}

.search-bar-btn:hover, .search-bar-btn:focus {
	background-color: #956dd7;
}

.search-result-div {
	width : 90%;
	background-color : #6441a5;
	margin : 1vh auto;
}

.button-span {
	display : none;
	text-align : right;
	width : 100%;
}

.close {
	font-size : 30px;
	border : none;
	background-color : #6441a5;
	color : white;
	cursor : pointer;
}

.close:hover, .close:focus {
	color : black;
}

.searched-streamer-offline {
	display: flex;
	flex-flow : column wrap;
	text-align : center;
	background-color : #fff;
	color : black;
	width : 90%;
	margin : 3vh auto;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	border-radius : 2px;
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	max-width : 600px;
}

.searched-streamer-online {
	display: flex;
	flex-flow : column wrap;
	justify-content: flex-end;
  	text-align : center;
	width : 90%;
	margin : 0 auto;

	background-color : #fff;
	color : black;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	border-radius : 2px;
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
	max-width : 600px;
}

.searched-streamer-online:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.streamer-not-found {
  	text-align : center;
	width : 90%;
	margin : 0 auto;
	color : #fff;
}

/*SEARCH FUNCTION END*/

/*REFRESH BUTTON START*/

.refresh-streams {
	margin : 1vh 0;
	height : calc(34.3px + (8.6 * (100vh - 300px) / 468));
	width : 90%;
	font-size: calc(11px + (4 * (100vw - 350px) / 130));
	background-color : #6441a5;
	color : #eee;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
	transition : all 300ms ease-in-out;
	border : none;
}

.refresh-streams:hover, .refresh-streams:focus {
	background-color : #956dd7;
	box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}

/*REFRESH BUTTON END*/

/*TABS START*/

.tab-div {
	height : calc(34.3px + (8.6 * (100vh - 300px) / 468));
	width : 90%;
	border:  none;
	margin : 1vh auto 0;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.tab {
	display : inline-block;
	width : 30%;
	height : 100%;
	border : none;
	transition : all 300ms ease-in-out;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.big-tab {
	width  : 40%;
}

.tab-div button {
	width : 100%;
	height : 100%;
	border  : none;
	font-size: calc(11px + (4 * (100vw - 350px) / 130));
	background-color : #6441a5;
	color : #eee;
	padding : 0;
	transition : all 300ms ease-in-out;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.tab-div button:hover, .tab-div button:focus {
	background-color: #956dd7;
	color : #fff;
}

.inner-tab-div {
	display : inline-block;
	line-height : calc(34.3px + (8.6 * (100vh - 300px) / 468));
	height : 100%;
	width : 100%;
	pointer-events: none;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.tab-active {
	height : 100%;
	width : 100%;
	background-color : #956dd7
}

/*TABS END*/

/*STREAMS START*/

.streams-div{
	width : 90%;
	margin : 0 auto 5%;	
	color : #fff;
	border  :none;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.sub-heading-div {
	background-color : #956dd7;
	padding : 3vh 0;
}

.featured {
	display : none;
	width : 100%;
	margin : 0 auto;
	padding-bottom : 3vh;
	background-color: #6441a5;
	border : none;
}

.show {
	display : block;
}

/*NAVBAR START*/

.navbar {
	display : flex;
	flex-flow : row nowrap;
	justify-content : space-around;
	height : calc(34.3px + (8.6 * (100vh - 300px) / 468));
	width : 100%;
	background-color: #6441a5;
	margin : 4vh auto 0;
}

.navbar-btn {
	background-color : #6441a5;
	color : #fff;
	height : 100%;
	width : 30%;
	border : none;
	text-decoration : none;
	line-height : calc(34.3px + (8.6 * (100vh - 300px) / 468));
	font-size : 25px;
	cursor : pointer;
	padding : 0 10px;
	transition : all 300ms ease-in-out;
	border-radius : 25px;

}

.navbar-btn:hover {
	color : #fff;
	background-color : #956dd7;
}

.navbar-btn:focus {
	color : black;
	background-color : #fff;
	border-radius : 25px;
}

.navbar-active {
	color : black;
	background-color : #fff;
	width : 40%;
}

/*NAVBAR END*/

.outer {
  	position : relative;
  	width : 100%;
  	margin : 0 auto;
 	overflow : hidden;
 	transition: height 300ms linear;
}

.twitch-outer {
	display : flex;
	flex-flow : row wrap;
	justify-content: space-around;
}

.inner {
	display : flex;
	flex-flow : row wrap;
	justify-content : flex-start;
	align-content : flex-start;
 	position : absolute;
 	left : 0;
 	width : 100%;
 	transition : left 300ms ease-in-out;
 	padding : 0 0 1vh 0;
 	visibility : hidden;
}

.show-inner {
	visibility : visible;
}

.online {
  	left : -100%;
}

.offline {
  	left : 100%;
}

.featured-streamer, .offline-streamer {
	display: flex;
	flex-flow : column wrap;
	text-align : center;
	width : 90%;
	margin : 3vh auto;
	background-color : #fff;
	color : black;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	border-radius : 2px;
	transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}

.featured-streamer:hover, .offline-streamer:hover {
  	box-shadow: 0 5px 8px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.featured-streamer{
	justify-content: flex-end;
  
}

.offline-streamer {
	justify-content : center;
}

.placeholder{
	visibility : hidden;
  	text-align : center;
	width : 45%;
	margin : 0 auto;	
}

a {
	display : inline;
	text-decoration: none;
	color : black;
}

a:hover, a:focus {
	color : #6441a5;
}

.img-anchor {
	display : inline-block;
	width : 95%;
	max-width : 320px;
	height : 180px;
	margin : 0 auto;
}

.img {
	display : inline-block;
	width : 95%;
	max-width : 320px;
	height : 180px;
	border : solid 2px black;
}

.status {
	display : inline;
	margin : 0 auto -1.5vh;
}

.logo-anchor {
	display : inline;
	width: 110px;
	margin : 0 auto;	
}

.logo {
	display : inline;
	margin : 1vh auto;
	height : 110px;
	width: 110px;
	border : black 2px solid;
}

/*STREAMS END*/

@media (min-width : 480px){

	h1 {
		display : inline-block;
		margin : 0 2.5%;
		font-size : calc(35px + (35 * (100vw - 480px) / 1480));
	}

	h2 {
		font-size : calc(26.25px + (53 * (100vw - 480px) / 1480));
	}

	.svg {	
		width : 15%;
	}

	.title-div {
		margin : 2vh auto;
	}

	.tab-div button, .refresh-streams {
		font-size : calc(15px + (15 * (100vw - 480px) / 1540));
	}

	

}

@media (min-width : 768px) {

	.featured-streamer, .offline-streamer {
		width : 45%;
	}

}

@media (min-width : 1000px){

	.featured-streamer, .offline-streamer, .placeholder {
		width : 30%;
	}

}

@media (min-width : 1300px) {
	.featured-streamer, .offline-streamer, .placeholder {
		width : 22.5%;
	}
}

@media (min-height : 768px){

	.refresh-streams {
		height : 6%;
	}

	.tab-div {
		height : 6%;
	}

	.inner-tab-div {
		line-height : 6vh;
	}

	.navbar {
		height : 6vh;
	}

	.navbar-btn {
		line-height : 6vh;
	}

	.featured {
		padding-bottom : 0;
	}

}