/* ===========================
--- Intro
============================ */
#intro.intro {padding:17% 0;}
.intro {
	width:100%;
	position:relative;	
	background: url("../img/bg1_lg.png") no-repeat top center;
	background-size: cover;
}
.intro .slogan,.intro .page-scroll{
	text-align: center;
	position: relative;
	right: -20%;
}
.intro .slogan p{
	font-size: 2.5em;
	margin-top: -50px;
}

/* ===========================
--- activity
============================ */
#activity .grandprix p{
	font-weight: 700;
	text-align: center;
	font-size: 1.2em;
	color: #330000;
}
#activity .grandprix img{
	width: auto;
}
#activity .commentL,
#activity .commentL2,
#activity .commentR{
  position: relative;
  padding: .5em .75em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
	top: -220px;
	width: 55%;
	font-size: 0.7em;
}
#activity .commentL::before,
#activity .commentL::after,
#activity .commentL2::before,
#activity .commentL2::after,
#activity .commentR::before,
#activity .commentR::after{
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  height: 0;
  width: 0;
  border: 10px solid transparent;
}
#activity .commentL::before,
#activity .commentL2::before,
#activity .commentR::before{
  border-top: 15px solid #ccc;
}
#activity .commentL::after,
#activity .commentL2::after,
#activity .commentR::after{
  margin-top: -2px;
  border-top: 15px solid #fff;
}
#activity .commentL,
#activity .commentL2{
	left: 5%;
}
#activity .commentR{
	left: 40%;
}
.comment2{
	position: relative;
	padding: .5em .75em;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #e5f7ff;
	font-size: 0.9em;
}
#activity .place{
	font-size: .8em;
}


/* ===========================
--- Elements
============================ */

/* Media queries */

@media (max-width:1024px) {
	.intro {
		background: url(../img/bg1.png) no-repeat top center;
		background-size: cover;
	}
	.intro .slogan p{
		font-size: 1.8em;
	}
}

@media (max-width:991px) {
	#activity .place{
		font-size: .7em;
	}
	#activity .commentR{
		top: -160px;
		width: 73%;
	}
	#activity .commentL{
		top: -160px;
		width: 45%;
	}
	#backnumber .vol1 .slogan p,
	#backnumber .vol2 .slogan p,
	#backnumber .vol3 .slogan p,
	#backnumber .vol4 .slogan p{
		font-size: 1.1em;
	}
	
}

@media (max-width:768px) {

	.intro .slogan p{
		margin-top: -50px;
	}
	.intro .slogan img{
		width: 40px;
	}
	#separator p{font-size: .9em;}
	.link iframe,.link img{
		max-width: 360px;
		width: 100%;
		height: 350px;
		margin: 0 auto;
	}
	#activity .commentL2{
		top: -250px;
		width: 50%;
		font-size: 0.8em;
	}
	#activity .commentL,#activity .commentR{
		top: -170px;
		width: 52%;
		font-size: 0.7em;
	}
	#activity .place{
		font-size: .75em;
	}
}
@media (max-width:767px) {
	#activity .commentL,#activity .commentL2,#activity .commentR{
		top: -390px;
		width: 50%;
		font-size: 0.7em;
	}
}
@media (max-width:650px) {
	.intro {
		background: url(../img/bg1_tab.png) no-repeat top center;
		background-size: cover;
	}
	.intro .slogan,
	.intro .page-scroll{
		text-align: center;
		position: relative;
		right: 0%;
		top:50px;
	}
	.intro .slogan p{
		font-size: 1.3em;
		font-weight: 700;
		color: #444;
		background-color: rgba(255,255,255,0.7);
		margin-top: 50px;
	}
	#activity .commentL,#activity .commentL2,#activity .commentR{
		top: -300px;
		width: 40%;
		font-size: 0.7em;
	}
	#backnumber .intro .slogan p{
		font-weight: 100;
		color: #444;
	}
}

@media (max-width:480px) {
	.intro {
		background: url(../img/bg1_sp.png) no-repeat top center;
		background-size: cover;
	}
	#intro.intro {padding:25% 0px 10% 0px;}
	.section-heading h2 {font-size: 30px;}
	.link img{height: auto;}
	#activity .commentL,#activity .commentL2,#activity .commentR{
		top: -250px;
		width: 55%;
	}
	#activity .grandprix img{width: 18%;}

}
@media (max-width:320px) {
	.section-heading h2 {font-size: 25px;}
	#activity .grandprix p{font-size: 0.9em;}
	#activity .commentL,#activity .commentL2,#activity .commentR{top: -210px;}
}