body{
background-color:#fffbf7;

}

#bannerPic{
	position: relative;
	width:300px;
	height:95%;
	left: 10%;
	top: 5%;
}

#tab{
	position:relative;
	text-align:left;
	font-size: 50px;
	font-family: 'Norican', cursive;
	float: left;
	width: 70%;
	left: 5%;
	top: 25%;
}

#image{
	float: right;

}


#header{
display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  position: relative;
  height:20%;
 /* border: solid black 1px;*/
  top: 0;
	background-color:#12ccad;
	text-align: center;
}

#footer{
		display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 100%;
	top: 100%;
	background-color:#12ccad;
	text-align: center;
	font-family: 'Cookie', cursive;
	font-size: 25px;
}

#slogan{
	left: 20%;
	width: 60%;
}



#socials{
	width: 20%;
	padding-top: 10px;
	left: 5%;
	
}

@media screen and (min-width: 320px) and (max-width: 480px) {
 #bannerPic{
	position: relative;
	width:170px;
	height:80px;
	top: 10%;
	left: 15%;
	
}

#tab{

	text-align:left;
	font-size: 20px;
	font-family: 'Norican', cursive;
	float: left;
	/*width: 40%;
	left: 5%;
	top: 25%;
	*/
}

#image{
	float: right;

}


#header{
display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  position: relative;
  height:20%;
 /* border: solid black 1px;*/
  top: 0;
	background-color:#12ccad;
	text-align: center;
}

#footer{
	display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
	top: 100%;
	background-color:#12ccad;
	text-align: center;
	font-family: 'Cookie', cursive;
	font-size: 25px;
}
 
}

@media screen and (min-width: 768px) and (max-width : 1024px) {
#bannerPic{
	position: relative;
	width:300px;
	height:95%;
	left: 100%;
	top: 5%;
}

#tab{
	position:relative;
	text-align:left;
	font-size: 50px;
	font-family: 'Norican', cursive;
	float: left;
	width: 40%;
	left: 5%;
	top: 25%;
}

#image{
	float: right;

}


#header{
display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  position: relative;
  height:20%;
 /* border: solid black 1px;*/
  top: 0;
	background-color:#12ccad;
	text-align: center;
}

#footer{
	position: static;
  width: 100%;
	top: 100%;
	height: 5%;
	background-color:#12ccad;
	text-align: center;
	font-family: 'Cookie', cursive;
	font-size: 25px;
}
 
}