/* ===========================
--- Intro
============================ */

#intro.intro {padding:17% 0;}

.intro {
	width:100%;
	position:relative;	
	background: url(../img/bg1.png) no-repeat bottom center;
	background-size: cover;
}
.intro .slogan,.intro .page-scroll{
	text-align: center;
	position: relative;
	right: 18%;
}
.intro .slogan p{
	font-size: 2.5em;
	text-shadow: 2px 2px 2px #fff;
	margin-top: 0px;
}

.intro .page-scroll a {text-shadow: 2px 2px 2px #fff;}

/* ===========================
--- activity
============================ */

#activity .grandprix p{
	font-weight: 700;
	text-align: center;
	font-size: 1.2em;
}

#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: 15%;
}
#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;}


/* Media queries */
@media (max-width:1024px) {
	.intro .slogan p{font-size: 2em;}
}

@media (max-width:991px) {
	
	#activity .place{font-size: .7em;}
	#activity .commentL,
	#activity .commentR{
		top: -160px;
		width: 73%;
	}
	#activity .commentL2{
		top: -250px;
		width: 73%;
	}
}

@media (max-width:768px) {
	.intro {background: url(../img/bg1_tab.png) no-repeat bottom center;}
	.intro .slogan,	.intro .page-scroll{
		position: relative;
		right: 0;
	}
	.intro .slogan p{
		font-size: 1.4em;
		margin-top: 40px;
		background-color: rgba(255,255,255,0.7);
	}
	.intro .slogan img{width: 40px;}

	#activity .commentL2{
		top: -250px;
		width: 50%;
		font-size: 0.8em;
	}
	#activity .commentL,
	#activity .commentR{
		top: -170px;
		width: 72%;
		font-size: 0.8em;
	}
	#activity .place{
		font-size: .75em;
	}
	#separator p{
		font-size: .9em;
	}
	.link iframe,.link img{
		max-width: 360px;
		width: 100%;
		height: 350px;
		margin: 0 auto;
	}
}

@media (max-width:650px) {
	#activity .commentL,
	#activity .commentL2,
	#activity .commentR{
		top: -300px;
		width: 40%;
		font-size: 0.7em;
	}
}

@media (max-width:480px) {
	.intro {
		background: url(../img/bg1_sp.png) no-repeat bottom center;
		background-size: cover;
	}
	#intro.intro {padding:25% 0px 5% 0px;}

	.intro .slogan p{
		font-size: 1.2em;
	}
	.section-heading h2 {
		font-size: 33px;
	}
	.link img{
		height: auto;
	}
	#activity .commentL,
	#activity .commentL2,
	#activity .commentR{
		top: -250px;
		width: 50%;
	}
}
@media (max-width:320px) {
	.section-heading h2 {
		font-size: 29px;
	}
	#activity .commentL,
	#activity .commentL2,
	#activity .commentR{
		top: -210px;
	}
}