/* FOOTER */
html {
	position: relative;
	min-height: 100%;
}
body {
	/* Margin bottom by footer height */
	margin-bottom: 125px;
}
@media only screen and (max-width: 768px){
	body{
		margin-bottom: 200px;
	}
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	/*height: 95px;*/
	background-color: #f5f5f5;
}
.footer > div{
	margin-bottom: 5px;
}
.footer > div > div{
	margin-top: 10px;
}


/* HEADER */
.navbar-right > *{
	float: right;
}
.twitter{
	line-height: 48px;
}
.twitter img{
	height: 35px;
}


/* GENERAL */
.guide > a > div{
	height: 125px;
	overflow: hidden;
	/*cursor: pointer;*/
}
.guide > a > div > .bg{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.2;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.guide > a > div:hover > .bg{
	opacity: 0.4;
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
.guide .row div{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.guide .guide-name{
	font-size: 1.3em;
	margin: 5px 5px 0px 5px;
}
.guide .guide-name-japanese{
	font-size: 1.1em;
	margin: 0px 5px 5px 5px;
}
.guide .idol-name{
	font-size: 1.2em;
	margin: 5px;
	text-align: right;
	position: relative;
	top: 35px;
}
.guide > a{
	width: 100%;
	height: 100%;
}


/* MAIN */
.wotagei-introduction{
	background-color: #222;
	color: #FFF;
	margin: 25px 0px;
}
.wotagei-introduction > div > div{
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
	text-shadow: 0px 5px 3px black;
	font-size: 1.5em;
}
.sections > .section > .section-title{
	margin-bottom: 10px;
	animation-name: stretchAfter;
	animation-duration: 2.5s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-timing-function: ease-out;
}
.sections > .section > .section-title > h1{
	margin-bottom: 5px;
	font-size: 30px;
}
.sections > .section > .section-title > h1::after{
	content: "";
	border-bottom: 2px solid #000;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	animation: makeVisible 1s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
}
.sections > .section:nth-child(even) > .section-title{
	float: right;
	text-align: right;
}
.sections > .section > .section-title a{
	visibility: hidden;
	position: relative;
	animation-name: fadeInFromTop;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-timing-function: ease-out;
}
.sections > .section > .section-body {
	visibility: hidden;
	position: relative;
	animation-name: fadeInFromBottom;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-timing-function: ease-out;
}
.sections > .section a, .sections > .section a:hover, .sections > .section a:active{
	color: inherit;
	text-decoration: none;
}
.sections > .section > .section-body{
	font-size: 17px;
}

@keyframes fadeInFromTop { /* Standard syntax */
	from {
		visibility: visible;
		opacity: 0;
		top: -20px;
	}
	to {
		visibility: visible;
		opacity: 1;
		top: 0px;
	}
}
@-webkit-keyframes fadeInFromTop { /* Safari */
	from {
		visibility: visible;
		opacity: 0;
		top: -20px;
	}
	to {
		visibility: visible;
		opacity: 1;
		top: 0px;
	}
}
@keyframes fadeInFromBottom { /* Standard syntax */
	from {
		visibility: visible;
		opacity: 0;
		top: 20px;
	}
	to {
		visibility: visible;
		opacity: 1;
		top: 0px;
	}
}
@-webkit-keyframes fadeInFromBottom { /* Safari */
	from {
		visibility: visible;
		opacity: 0;
		top: 20px;
	}
	to {
		visibility: visible;
		opacity: 1;
		top: 0px;
	}
}

@keyframes stretchAfter { /* Standard syntax */
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}
@-webkit-keyframes stretchAfter { /* Safari */
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

@keyframes makeVisible { /* Standard syntax */
	from {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}
@-webkit-keyframes makeVisible { /* Safari */
	from {
		visibility: hidden;
	}
	to {
		visibility: visible;
	}
}

@keyframes fadeIn { /* Standard syntax */
	from {
		visibility: hidden;
		opacity: 0;
	}
	to {
		visibility: visible;
		opacity: 1;
	}
}
@-webkit-keyframes fadeIn { /* Safari */
	from {
		visibility: hidden;
		opacity: 0;
	}
	to {
		visibility: visible;
		opacity: 1;
	}
}



/* SEARCH */
#custom-search-input {
	margin:0;
	margin-top: 8px;
	padding: 0;
}

#custom-search-input .search-query {
	padding-right: 30px;
	padding-right: 4px \9;
	padding-left: 3px;
	padding-left: 4px \9;
	/* IE7-8 doesn't have border-radius, so don't indent the padding */

	margin-bottom: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#custom-search-input button{
	position: absolute;
	left: 100%;
	top: 15%;

	border: 0;
	background: none;
	/** belows styles are working good */
	padding: 2px 5px;
	margin-top: 2px;
	position: relative;
	left: -28px;
	/* IE7-8 doesn't have border-radius, so don't indent the padding */
	margin-bottom: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color:#222;
	z-index: 3;
}

#custom-search-input button:active{
	-webkit-box-shadow: unset;
	box-shadow: unset;
}


/* CALL GUIDE */
.guide-title{
	font-size: 30px;
	margin-top: 20px;
	margin-bottom: 10px;
}
.guide-idol-name{
	font-size: 23px;
}
.box-footer{
	padding-top: 50px;
}
.guide-page .call-guide{
	padding: 0px 50px;
}
.call-guide .mix, .call-guide .maru, .call-guide .data-mix, .call-guide .mix-content{
	color: #f00;
	font-weight: bold;
}
.call-guide .mix{
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
.call-guide .mix:hover{
	cursor: pointer;
	color: #d11;
	text-decoration: none;
}
.call{
	font-weight: bold;
	color: #F00;
}
.furi{
	font-weight: bold;
	color: #00F;
}

.call-guide .mix-content.in{
	visibility: hidden;
	animation: fadeIn 1s;
	animation-fill-mode: forwards;
}



@media only screen and (max-width: 767px){
	.box-body > div > div:first-child{
		float: unset !important;
	}
	.guide-page .box, .guide-page .box > div, .guide-page .box > div .call-guide{
		padding-left: 0;
		padding-right: 0;
	}
}


/* CALL GUIDES */
.guides .guide, .recent-guides .guide{
	margin-top: 20px;
}

@media only screen and (max-width: 767px){
	.guides{
		padding-left: 0;
		padding-right: 0;
	}
}



/* COOKIES */
#alert-cookies{
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: rgba(0, 0, 0, .8);
	color: #FFF;
	padding: 10px 20px;
}
#alert-cookies div{
	display: inline-block;
	max-width: 90%;
}
#alert-cookies .glyphicon{
	cursor: pointer;
}