/*
Tutorial Name: Modernize Your Site: Building a YouTube Video Background 
Author: Samuel Dalusung
*/


/* GENERAL STYLES
================================================== */
html {
    height:100%
}
body {
    height:100%;
    width:100%;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%
}

body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	list-style-type: none;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
    font:'Estrangelo Edessa',sans-serif;
}

div, input, textarea, button, a, span,li {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	font-family: '�q���M�m�p�S Pro W3','Hiragino Kaku Gothic Pro',Meiryo,serif;
	font-size:12px;
}

html		{ height: 100%; }
textarea 	{ font-size: 100%; }
hr 			{ display: none; }
iframe		{ border: 0; margin: 0; padding: 0; overflow: hidden; }

a			{	text-decoration: underline; color: #444; word-break: break-all;	}
a:hover		{   text-decoration: none; color: #444;	}

a:hover img{
	opacity:0.7;
}
a:hover img.hoverimg{
	opacity:1;
}


img {
	vertical-align: bottom;
	max-width:100%;
	height:auto;
}



.cf:before, .cf:after {
	content: "";
	display:table;
}
.cf:after { clear:both }
.cf { zoom:1 } /* For IE 6/7 */



.fl_r{float:right;}
.fl_l{float:left;}
.center{text-align:center;}
.right{text-align:right;}
span.right{text-align:right;display:block;}
.left{text-align:left;}
.mt-5 {	margin-top:-5px;}
.ml10 {	margin-left:10px;}
.ml15 {	margin-left:15px;}
.ml20 {	margin-left:20px;}
.mt10 {	margin-top:10px !important;}
.mt20 {	margin-top:20px;}
.mt50 {	margin-top:50px;}
.mb5{ margin-bottom:5px !important;}
.mb10{ margin-bottom:10px !important;;}
.mb15{ margin-bottom:15px !important;;}
.mb20 {	margin-bottom:20px !important;;}
.mb25 {	margin-bottom:25px !important;;}
.mb30 {	margin-bottom:30px !important;}
.mb40 {	margin-bottom:40px;}
.mb50 {	margin-bottom:50px;}
.mb60 {	margin-bottom:60px;}
.fs10{font-size:10px !important;}
.fs12{font-size:12px !important;}
.fs13{font-size:13px !important;}
.fs14{font-size:14px !important;}
.fs15{font-size:15px !important;}
.fs16{font-size:16px !important;}
.fs18{font-size:18px !important;}
.fs19{font-size:19px !important;}
.fs20{font-size:20px !important;}
.fs22{font-size:22px !important;}
.fs24{font-size:24px !important;}
.fs26{font-size:26px !important;}
.fw100{font-weight:100 !important;}
.fw600{font-weight:600 !important;}
.border_b{border-bottom:1px dotted #cccccc;}
.lh1_6{line-height:1.6 !important;}


.pt40{padding-top: 40px;}

.indent1em{
    padding-left: 1em;
    text-indent: -1em;
}

.show_sp{
	display:none;
}
@media (max-width: 640px) {/*SP*/
.show_sp{
		display:inline;
	}
.show_pc{
	display:none;
	}
}




.wrapper {
    z-index:600;
    position:relative
}

.pattern {
    //background-image:url(../images/pattern.png);
    background-repeat: repeat;
    background-attachment:scroll;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}

.divider {
    background:url(../images/divider.png) no-repeat 0 0;
    display:block;
    width:581px;
    height:190px;
    margin:10px auto
    
}


#colorize {
    color:#ffffff;
    font-family:'Estrangelo Edessa',sans-serif;
    font-size:40px
}

.over_box{
	z-index: 999; min-width: 100%; left: 0px; top: 0px; overflow: hidden; opacity: 1; position: fixed; backface-visibility: hidden;border-top:10px solid #fff700;
}


.header{
	background-color:#000000;
	padding:15px 0;
}
.header_inner{
	width:570px;
	margin:0 auto;
}
.logo{
	float:left;
}
.nav {
	float:right;
	padding-top:10px;
}

.nav li{
	float:left;
	text-align:center;
	margin-right:2.5em;
}
.nav li:last-child{
	margin-right:0;
}
.nav li a{
    font-family:'�q���M�m�ۃS Pro W4','Hiragino Maru Gothic Pro',sans-serif;
	font-size:16px;
	color:#fff700;
	font-weight:600;
	text-decoration:none;
	line-height:1.3;
}
.nav li a:hover{
	text-decoration:underline;
}
.nav li a span{
	font-size:10pt;
	color:#fff700;
}


#about{
	margin-top:-150px;
	padding-top:150px;
}

/* BIG VIDEO BACKGROUND
================================================== */
.big-background {
    z-index:550;
    text-align:center;
    height:100%;
    min-height:100%;
    position:relative;
    overflow:hidden

}

.big-background .big-background-container {
    width:830px;
    max-width:100%;
    display:inline-block;
    position:absolute;
    top:53%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}

.big-background-title {
    font-family:'Estrangelo Edessa',sans-serif;
    font-size:78px;
    color:#fff;
    font-weight:300;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:22px;
    padding-top:20px;
    display:inline-block;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center
}

a.big-background-btn {
    font-family:'Estrangelo Edessa',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    background:transparent;
    border:2px solid #fff;
    padding:10px 14px;
    cursor:pointer;
    letter-spacing:2px;
    text-align:center;
    display:inline-block;
    -webkit-transition:.4s background ease;
    -moz-transition:.4s background ease;
    -o-transition:.4s background ease;
    transition:.4s background ease;
}

.big-background-btn:hover {
    color:#fff;
    background:rgba(255,255,255,0.20)
}

.big-background-default-image {
    background:url(../images/sunset.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:100%;
    height:100%;
    z-index:0;
    backface-visibility:hidden
}



/* ABOUT SECTION
================================================== */
.about-section {
    font-family:'Estrangelo Edessa',sans-serif;
    color:#ffffff;
    padding:60px 20px;
	background: url(../images/pattern.png) repeat 0 0;
}

.about-section-container {
    padding-bottom:50px;
	margin: 0 auto 50px auto;
	width:760px;
    border-bottom: 1px solid #ffffff;

}
.right_box{
	float:right;
	width:340px;
}
.left_box{
	float:left;
	width:340px;
}

.about-section-title {
    font-family:'Estrangelo Edessa',sans-serif;
    font-size:14px;
    //background:#fff;
    color:#ffffff;
    padding:0 ;
    margin-bottom:22px;
    text-transform:uppercase;
    font-weight:600;
}
.about-section-title span{
	font-size:24px;
    font-weight:600;
}

.about-section-container p{
	margin-bottom:20px;
    font-size:12px;
    text-indent:1em;
}
p.no-indent{
    text-indent:0 !important;
}
.about-section-container p.left_box_about{
	margin-bottom:30px;
    font-size:14px;
    font-weight:600;
}



.name_h3{
	margin-top:0;
	font-size:24px;
	font-family: '�q���M�m�p�S Pro W3','Hiragino Kaku Gothic Pro',Meiryo,serif;
	line-height:1.3;
	margin-bottom:0.5em;
}
.name_h3 span{
	font-size:12px;
	font-family: '�q���M�m�p�S Pro W3','Hiragino Kaku Gothic Pro',Meiryo,serif;
	display:block;
}

.profile{
	border-bottom:1px solid #ffffff;
	padding-bottom:3px;
	margin-bottom:28px;
}
.profile:last-child{
	border-bottom:0px solid #ffffff;
	}

.profile dl{
	margin-bottom:20px;
}
.profile dl dt{
	float:left;
	margin-right:20px;
	width:158px;
}
.profile dl dd{
	float:left;
	width:162px;

}
.date_ul{
	text-indent:-0.5em;
	margin-bottom:1.3em;
}
.link_ul li{
	float:left;
	display:inline-block;
	margin-right:0.5em;

}



a.about-section-btn {
    font-family:'Estrangelo Edessa',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    text-decoration:none;
    color:#34495e;
    background:transparent;
    border:2px solid #34495e;
    padding:10px 14px;
    cursor:pointer;
    letter-spacing:2px;
    text-align:center;
    display:inline-block;
    -webkit-transition:.4s background ease;
    -moz-transition:.4s background ease;
    -o-transition:.4s background ease;
    transition:.4s background ease;
}

.about-section-btn:hover {
    color:#fff;
    background: #34495e;
}



/* SMALL VIDEO BACKGROUND 
================================================== */
.small-background-section {
    font-family:'Estrangelo Edessa',sans-serif;
    padding:100px 0;
    position:relative;
    width:100%;
    overflow:hidden;
    color:#ffffff;
    background: #000000;
    border-bottom:10px solid #fff700;
}

.small-background-container {
    position:relative;
    text-align:center;
    	width:715px;
    	margin:0 auto 3em auto;
}

.small-background-title {
    font-size:40px;
    color:#f1c40f;
    font-weight:300;
    z-index:10;
    display:inline-block;
    text-transform:uppercase;
    margin-bottom:20px;
    margin-top: 20px;
    position:relative;
    background-attachment:scroll;
    background-repeat:repeat-x;
    background-position:top center
}





/* SOCIALS
================================================== */
.socials{
	display:table;
}
.socials li{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
	padding-right:3em;
    //padding-left: 5em;
}
.socials li:last-child{
	padding-right:0;
}
.socials a {
    color:#fff
}

.socials a:hover {
    color:#bdc3c7
}
.powered_p{
	float:left;
	margin-top:3px;
	margin-right:2em;
}
.powered_by{
	text-align:center;
}

.contact_div{
	width:400px;
	margin:0 auto;
}
.contact_p{
	font-size:20px;
	font-weight:600;
	text-align:center;
	margin-bottom:1em;
}
.contact_p span{
	font-size:13px;
}
.contact_div dl{
	margin-bottom:1em;	
}
.contact_div dl dt{
	margin-bottom:10px;
}
.tel_dd{
	font-size:22px;
	text-align:center;
	
}
.tel_dd a{
	color:#ffffff;
	font-size:20px;
    text-decoration:none;
}
.form_dd {
	margin-left:10px;
}
.form_dd a{
	border:1px solid #ffffff;
	color:#ffffff;
	font-size:14px;
	text-align:center;
	padding:0.5em 0 ;
	display:block;
	width:280px;
    border-radius: 4px;        /* CSS3���� */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome�p */  
    -moz-border-radius:4px;   /* Firefox�p */
    text-decoration:none;
    margin:0 auto;
}
.form_dd a:hover{
    text-decoration:underline;
}



/* MEDIA QUERIES
================================================== */

@media screen and (max-width: 768px) {
.about-section-title {
    line-height:1
}
	.divider{
		width:80%;
		background-size:100% auto;
	}
	.about-section-container{
		width:100%;		
	}
	.left_box,.right_box{
		width:94%;	
		margin:0 auto;
    	float: none;
	}
	#rider{
		margin-top:-100px;
		padding-top:100px;
	}
	.small-background-container{
		width:98%;	
		margin:0 auto;
	}
	.socials li{
		margin-right:1em;
	}
	.socials {
		margin-bottom:1em;
	}
	.powered_p {
    float: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 1em;
	}
	.socials ul{
    margin-bottom: 1.5em;
	}
	.socials li {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding-right: 0;
    margin-bottom: 0.5em;
	}
	.icon_fa{
		width:85%;
	}
}

@media screen and (max-width: 480px) {
.big-background-title {
    font-size:58px;
}

.small-background-title {
    line-height:1;
}

/*.player{ display: none;}  -> If you want to remove the video bg on a specific viewport w/o plugin*/
}

@media screen and (max-width: 360px) {
.big-background-title,#colorize {
    line-height:1
}


}

@media screen and (max-width: 320px) {
.small-background-title {
    font-size:30px
}
}
@media screen and (max-width: 480px) {
	section.header{
	padding: 1px 0 5px 0 !important;
	}
	html.desktop.portrait body div.over_box section.header div.header_inner.cf nav{
	display: none !important;
	}
	.header_inner{
		width:100%;	
	}
	.divider{
		width:80%;
		background-size:100% auto;
	}
	.about-section-container{
		width:100%;		
	}
	.left_box,.right_box{
		width:94%;	
		margin:0 auto;
    	float: none;
	}
	#rider{
		margin-top:-100px;
		padding-top:100px;
	}
	.small-background-container{
		width:98%;	
		margin:0 auto;
	}
	.socials li{
		margin-right:1em;
	}
	.socials {
		margin-bottom:1em;
	}
	.powered_p {
    float: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 1em;
	}
	.socials ul{
    margin-bottom: 1.5em;
	}
	.socials li {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding-right: 0;
    margin-bottom: 0.5em;
    padding-left: 0 !important;
	}
	.icon_fa{
		width:85%;
	}
	.profile dl dt{
		width:40%;
	}
	.profile dl dd{
		width:50%;
	}
	.contact_div{
		width:100%;
		margin:0 auto;
	}
	

}

.left_box a{color:#fff;}

.icon_tr a img{width:160px;}