/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/


/* common */
h1.fancy-title{
	font-size:5em!important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
    h1.fancy-title{
		font-size:2.0em!important;
	}
}

p.subheading{
	color: #192B38;
	font-size: 14px;
	font-weight: 600;
}

.dl-horizontal dd{
	display: block;
	margin: 20px 0 20px 35%;
	padding: 0 1%;
	padding-top: 20px;
	border-top: 1px solid #CCC;
}

.dl-horizontal dt{
	clear: left;
	float: left;
	width: 33%;
	padding: 0 1%;
	padding-top: 20px;
  	border-top: 1px solid #CCC;
}

.dl-horizontal dt:first-child,

.dl-horizontal dd:first-of-type { border-top: 0 none transparent; }

/* home */
h2.home-about-heading,h2.home-wholesale-heading {
	font-size: 5em;
}
@media screen and (max-width: 768px) {
    h2.home-about-heading,h2.home-wholesale-heading {
		font-size: 2.2em;
	}
}

/* home */
.recruitment-main-copy h1 {
	font-size: 4em;
	line-height: 2em;
}
@media screen and (max-width: 768px) {
    .recruitment-main-copy h1{
		font-size: 1.2em;
		line-height: 1.6em;
	}
}



.wholesalebutton {
	font-size: 20px;
}

.home-hero-area{
	margin-bottom: 80px; 
}
@media screen and (max-width: 768px) {
	.home-hero-area{
		margin-bottom: 20px; 
	}
}

.home-ourbeer-area{
	margin-top:120px;
	margin-bottom: 80px; 
}
@media screen and (max-width: 768px) {
	.home-ourbeer-area{
		margin-top:40px;
		margin-bottom: 20px; 
	}
}

.home-about-area{
	margin-top:120px;
	margin-bottom: 80px; 
}
@media screen and (max-width: 768px) {
	.home-about-area{
		margin-top:40px;
		margin-bottom: 20px; 
	}
}

.home-about-area h3{
	margin-top:60px;
	margin-bottom: 20px; 
	border-left: solid 1px #192B38;
	padding-left: 20px;
}
@media screen and (max-width: 768px) {
	.home-about-area .en h3{
		margin-top:0px;
		margin-bottom: 20px; 
		border-left: solid 1px #192B38;
		padding-left: 20px;
	}
}

.home-wholesale-area{
	margin-top: 120px;
	margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
	.home-wholesale-area{
		margin-top:40px;
		margin-bottom: 20px; 
	}
}

.home-slideimages-area{
	margin-top: 120px;
	margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
	.home-slideimages-area{
		margin-top:40px;
		margin-bottom: 20px; 
	}
}

.home-map-area{
	margin-top:120px;
	margin-bottom: 80px; 
}
@media screen and (max-width: 768px) {
	.home-map-area{
		margin-top:40px;
		margin-bottom: 20px; 
	}
}

/* about */
h2.about-profile-heading ,h2.about-about-heading,h2.about-qanda-heading  {
	font-size: 5em;
}
@media screen and (max-width: 768px) {
    h2.about-profile-heading ,h2.about-about-heading,h2.about-qanda-heading {
		font-size: 2.2em;
	}
}

.about-about-area h3,.about-qanda-area h3{
	margin-top:60px;
	margin-bottom: 20px; 
	border-left: solid 1px #192B38;
	padding-left: 20px;
}

@media screen and (max-width: 768px) {
	.about-profile-area h2,.about-profile-area p.subheading {
		text-align: left !important;
	}
}

.about-profile-area,.about-qanda-area,.about-about-area{
	margin-top: 80px;
	margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
	.about-profile-area,.about-qanda-area,.about-about-area{
		margin-top:40px;
		margin-bottom: 20px; 
	}
}


/* contact */
.contact-btn {
	font-size: 1.5em !important;
	letter-spacing: 0.1em;
	text-align: center;
	display: block;
	width: 100%;
	height: 80px;
}

/* footer-nav */
.footer ul.custom-menu li a{
	font-family:"Titillium Web",Helvetica, Arial, Verdana, sans-serif;
	font-weight:normal !important;
}


/* beer */



img.beer-thumb{
	width: 100%;
	height: 100%;
}

div.bottle-conditioned {
    position: fixed;
    top: 110px;
    left: 10px;
}
@media screen and (max-width: 768px) {
	div.bottle-conditioned {
	    top: 80px;
	    right: 10px;
	    left: auto;
	}
}
div.nitro-beer-cans {
    position: fixed;
    top: 110px;
    left: 10px;
}
@media screen and (max-width: 768px) {
	div.nitro-beer-cans {
	    top: 80px;
	    right: 10px;
	    left: auto;
	}
}

div.nitro-beer-cans img{
	width: 204px;
    height: 89px;
}
	

div.beer-button{
	background-color: #212121;
    border: none;
    color: white;
    padding: 30px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
}

div.beer-button-small{
	background-color: #333;
    border: none;
    color: white;
    padding: 10px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
}

div.beer-button:hover ,div.beer-button-small:hover{
	background-color: #000;
}

div.beer-button a ,div.beer-button-small a{
	color: #fff;
	text-decoration: none;	
}

h2.beername {
	border-top: solid 15px #111;
	padding-top: 1.0rem;
	color: #111;
	font-size: 100px;
	font-family:"Titillium Web",Helvetica, Arial, Verdana, sans-serif;
	font-weight:800;
	line-height: 1;
}
@media screen and (max-width: 768px) {
	h2.beername {
		font-size: 40px;
	}
}

.beernamekana{
	padding-bottom: 1.2rem;
	border-bottom: solid 1px #333;
	margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
	.beernamekana{
		padding-bottom: 0.8rem;
	}
}

.beerstyle{
	color: #111;
	font-size: 60px;
	font-family:"Titillium Web",Helvetica, Arial, Verdana, sans-serif;
	font-weight:800;
	line-height: 1.1;
}
@media screen and (max-width: 768px) {
	.beerstyle{
		font-size: 30px;
	}
}

.beershortcopy{
	color: #111;
	font-size: 24px;
	font-weight:400;
	line-height: 1.2;
	margin-bottom: 1.1rem;

}
@media screen and (max-width: 768px) {
	.beershortcopy{
		font-size: 14px;
	}
}

.beer-stat{
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
	border-bottom: solid 1px #333;
}

.beer-stat:last-child{
	border-bottom: solid 0px #333;
}


.beer-stat-label{
	color: #333;
	font-size: 14px;
	font-weight:400;
	line-height: 1.4;
}

.beer-stat-value{
	color: #111;
	font-size: 20px;
	font-weight:400;
	line-height: 1.4;	
}

.beercoverart {
	min-height: 550px;
	z-index : 1;
}

.js-flickity{
	margin-bottom: 30px;
/* 	background-color: #000; */
}

.flickity-button {
  /* background: transparent; */
  opacity: 0.7;
}

.flickity-prev-next-button {
  width: 30px;
  height: 30px;
}

.flickity-button:hover {
  background: #000;

}

.carousel-cell{
	width: 100%;
}

.beercopyjp {
	font-size: 18px;
}

.beerthumb img, img.beer-slide {
	width: 100%;
	display: block;
}

@media screen and (max-width: 768px) {
	body.single-beer div#main{
		padding-top: 25px;
	}
}

.owl-carousel{
	background-color: #111;
}

@media screen and (max-width: 575px) {
	.hidden-xs{
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.hidden-sm{
		display: none;
	}
}
@media screen and (max-width: 992px) {
	.hidden-md{
		display: none;
	}
}

.visible-xs{
	display: none;
}
@media screen and (max-width: 575px) {
	.visible-xs{
		display: inline;
	}
}

.visible-sm{
	display: none;
}
@media screen and (max-width: 768px) {
	.visible-sm{
		display: inline;
	}
}

.visible-md{
	display: none;
}
@media screen and (max-width: 992px) {
	.visible-md{
		display: inline;
	}
}

#footer hr{
	color: rgba(133,134,140,0.15);
}

@media screen and (min-width: 768px) {
	.specialnav{
		padding: 10px;
		background: -webkit-linear-gradient(left,#518de8 32%,#006dd2 100%);
		border-radius: 4px;
	}
	.specialnav:hover {
		padding: 10px;
		background: -webkit-linear-gradient(left,#d20c08 32%,#a21512 100%);
		border-radius: 4px;
	}
}

.specialnav a span.menu-item-text	{
		opacity: 1 !important;
	}
	
.menu-item-text:hover	{
		opacity: 1 !important;
}

.beer p{
	color: #111;
	margin-top: 5px;
	margin-bottom: 20px;
    line-height: 1.8em;
}
.beer h4{
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	font-size: 18px;
}

.beer-lineup-title h4{
	font-size: 32px;
	margin-top: 10px;
}

.beer-lineup-title h5{
	font-size: 18px;
	margin-bottom: -15px;
}

.beer-lineup-copy{
	margin-bottom: 30px;
	min-height: 4.0em;
	/* あとで直す */
}

.beer-lineup-soldout{
	color: #fff;
	background-color: #8c0909;
	letter-spacing: 1px;
	display: inline-block;
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    padding: 5px;
    border-radius: 5px;
}

.beer-lineup-style{
	font-size: 16px;
}

.beer-lineup-style-soldout{
	font-size: 12px;
}

.beer-lineup-item:hover .beer-lineup-image,
.beer-lineup-item:focus .beer-lineup-image {
  transform: scale(1.2);
}

.beer-lineup-item-wrapper{
	letter-spacing: -.4em;
}

.beer-lineup-item{
	letter-spacing: normal;
	cursor: pointer;
	overflow: hidden;
	color: #222;
}

.beer-lineup-image {
	transition: all .5s;
	width: 100%;
  	height: 100%;
}

.beer-lineup-wrapper{
	/* display: flex; */
}
@media screen and (max-width: 767px) {
		.beer-lineup-wrapper{
		display: block;
	}
}

.beer-lineup-button{
	
}
.beer-button-small{
	margin-top: 10px;
}

.beer-soldout ,.beerisendtosell{
	color: #222;
}

.beer-small-text{
	color: #222;
	font-size: 14px;
	line-height: 1.6;
}

.taproom-area h3 {
    margin-top: 60px;
    margin-bottom: 20px;
    border-left: solid 1px #192B38;
    padding-left: 20px;
}

.can2020text{
	color: #e2393b!important;
}

.can2020text h4{
	color: #e2393b!important;
}

.can2020heading{
	font-size: 52px;
	line-height: 1.4;
	font-weight: bold;
	color: #e2393b!important;
}
@media screen and (max-width: 992px) {
		.can2020heading{
			font-size: 40px;
	}
}
@media screen and (max-width: 767px) {
		.can2020heading{
			font-size: 26px;
	}
}

.page-id-2030 .fancy-header{
	height: 260px;
}

.page-id-7812 #main{
	background-color: #f3eddd;
}