/* ------------------------------------------------------------------------------

	Template Name: designstub
	Template URI: http://www.designstub.com/
	Description: Full Screen Design Agency Template
	Author: Andy
	Author URI: http://www.designstub.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.0
	
	1. CSS Reset
	2. Document Setup
	3. Header Part
		3.1 Menu Style
	4. About me Style
	5. Skills Style
	6. Experience Style
	7. Education Style
	8. Portfolio Style
	9. Contact Style
	10.Footer Style
	11.Responsive style
		
		
--------------------------------------------------------------------------------/*

/*----------------------------------------------------
	1. CSS Reset
------------------------------------------------------*/
* {
	padding:0;
	margin:0;
}
html { font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; 
	text-rendering: optimizelegibility; 
}
body {
	color:#000;
	font-family: "Noto Sans JP";
	font-weight: 400;
	position:relative;
	background:#fff;
	width:100%;
	height:100%;
	overflow: scroll;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        letter-spacing:0.15em;
}
a {
	text-decoration:none;
	color:#000;
	outline:none;
}
img {
	max-width:100%;
}


a:link{
color:#4c4c4c;
font-weight:normal;
text-decoration:normal;
opacity:1;
}

a:link img{
font-weight: bold;
text-decoration:normal;
opacity:1;
}

a:visited{
color:#4c4c4c;
font-weight:normal;
opacity:1;
}

a:hover{
color:#4c4c4c;
font-weight:normal;
opacity:0.5;
text-decoration:none;
filter:brightness(200%);
}

a:hover img{
color:#4c4c4c;
font-weight:normal;
opacity:0.5;
text-decoration:none;
}

a:activ{
color:#4c4c4c;
font-weight:normal;
opacity:0.5;}

a:activ img{
color:#4c4c4c;
font-weight:normal;
opacity:0.5;}




/*----------------------------------------------------
	 2. Document Setup
------------------------------------------------------*/
.wrapper{
	width:100%;
}
.spHeight{
	padding-top:63px;
}
.wrapper.noGap {
	padding-top:0;
}
.noMar{
	margin:0 !important;
}
.noPadd{
	padding:0px !important;
}

p{
	font-size:15px;
	line-height:27px;
	font-weight:400;
	padding-bottom:33px;
	margin:0px;
	text-align:left;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color:#000;
}
h1{
	font-family: "Noto Sans JP";
	font-size:30px;
	line-height:2em;
	letter-spacing:0.2em;
	font-weight:400;
	margin:0px;
	padding-bottom:8px;
        text-align:center;
}
h2{
	font-family: "Noto Sans JP";
	font-size:25px;
	line-height:1.5em;
	letter-spacing:0.2em;
	font-weight:400;
	margin:0px;
	padding-bottom:8px;
        text-align:left;
}
h3{
        font-family:"Anton";
	font-size:27px;
	line-height:30px;
	padding-bottom:10px;
	font-weight:300;
	margin:0px;
}
h4{
	font-family: "Noto Sans JP";
	font-size:21px;
	line-height:24px;
	padding-bottom:10px;
	font-weight:400;
	margin:0px;
}
h5{
	font-family: "Noto Sans JP";
	font-size:17px;
	color:#000;
	line-height:24px;
	padding-bottom:10px;
	font-weight:400;
	margin:0px;
}
.wrapper .media {
	margin-top:0;
}
.heading{
	text-align:center;
	padding-bottom:70px;
}
.heading .container{
	padding-top:0px !important;
	padding-bottom:0px !important;
	padding-right: 15px;
	padding-left: 15px;
        margin-top:-100px;
}
.heading h2 {
	font-family: "Noto Sans JP";
	font-size:20px;
	line-height:1.5em;
	letter-spacing:0.2em;
	font-weight:400;
	margin:0px;
	padding-bottom:8px;
        text-align:left;
}
.heading h2:after {
	content:"";
	display:block;
	width:200px;
	height:2px;
	background:#efefef;
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-100px;
}
.heading h3{
	font-size:18px;
	line-height:30px;
	color:#efefef;
	padding-bottom:0;
	font-weight:300;
	text-transform:none;
	letter-spacing:1px;
}
.heading p{
	line-height:25px;
}

.topmar{
	margin-top:20px;
}

/*----------------------------------------------------
	3. Header Part
------------------------------------------------------*/
header{
	position:relative;
}
.banner{
	overflow:hidden ;
	margin:0 auto !important;
	background:#fff;
	width:100%;
	height:50%;
}
.patternOverlay {
	background:#fff;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:50%;
	z-index:9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0;
}

.bannerText{
	width:100%;
	position:absolute ;
	left:0;
	top:40%;
	text-align:center;
	margin-top:-35px;
	padding:0 ;
	z-index:999 ;
}
.bannerText h1{
	text-transform:uppercase;
	line-height:normal;
	font-weight:300;
	color:#000;
	letter-spacing:4px;
	margin-top:-50px;
}
.bannerText h3{
	color:#000;
	font-size:19px;
	line-height:normal;
	font-weight:400;
	text-transform:none;
	margin-bottom:20px;
	letter-spacing:2px;
}

/*----------------------------------------------------
 	3.1 Menu Style
------------------------------------------------------*/

    @font-face {
    font-family: "Ubuntu Condensed";
    font-style: normal;
    font-weight: 400;
    src: local("Ubuntu Condensed"),
         local("UbuntuCondensed-Regular"),
         url(UbuntuCondensed-Regular.woff) format("woff");
    }
    header .logo,
    footer .copyright {
    margin: 0;
    color: #686868;
    font-family:"Anton";
    font-weight: normal;
    text-align: center;
    letter-spacing: .1em;
    }
    /* :::::: contents :::::: */
    #wrapper {
    overflow: hidden;
    height: auto;
    padding: 0;
    }
    .contents {
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    }
    #navTgl:checked ~ .contents {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    }
    /* :::::: toggle button :::::: */
    #navTgl {
    display: none;
    overflow: hidden;
    }
    label {
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 15px;
    }
    .open {
    z-index: 13;
    width: 5%;
    height: 5%;
    color: #666;
    background-color: #none;
    font-size: 3em;
    line-height: 30px;
    text-align: center;
    -webkit-transition: background-color .6s, -webkit-transform .6s;
    transition: background-color .5s, transform .5s;
    }
    .open:hover{opacity:0.5;}
    #navTgl:checked + .open {
    background-color: #none;
    color: rgba(0,0,0,0);    
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    }
    .close {
    z-index: 12;
    width: 5%;
    height: 5%;
    color: #fff;
    background-color: #none;
    font-size: 3em;
    line-height: 30px;
    text-align: center;
    -webkit-transition: background-color .6s, -webkit-transform .6s;
    transition: background-color .5s, transform .5s;
    }
    #navTgl:checked ~ .close {
    pointer-events: auto;
    background-color: rgba(0,0,0,0);
    color: rgba(0,0,0,0.5);    
    }
    #navTgl:checked ~ .close hover {
    background-color: rgba(100,100,100,0);
    opacity:0.5;
    }
    /* :::::: drawer menu :::::: */
    .menu {
    z-index: 11;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    letter-spacing: 0.5em;
    font-size: 1.5em;
    background-color: rgba(0,0,0,.3);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    }
    #navTgl:checked ~ .menu {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    .menu h2,
    .menu li a {
    color: #fff;
    list-style:none;
    font-size: 150%;
    font-family:"Anton";
    }
    .menu h2 {
    text-align: center;
    }
    .menu ul,
    header nav ul {
    padding-top: 3%;
    list-style:none;
    }
    .menu li {
    border-bottom: 0px solid rgba(255,255,255,.6);
    font-size: .8em;
    line-height: 0.7em;
    list-style:none;
    }
    .menu li:first-child {
    border-top: 0px solid rgba(255,255,255,.6);
    list-style:none;
    }
    .menu li a,
    header nav li a {
    text-align: center;
    display: block;
    padding: 1em 1.5em;
    text-decoration: none;
    transition: background-color .6s;
    list-style:none;
    font-size: 280%;
    }
    .menu li a:hover {
    background-color: rgba(0,0,0,0);
    border-bottom:3px solid #fff;
    list-style:none;
    font-size: 330%;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    }

/*----------------------------------------------------
	4. About me Style
------------------------------------------------------*/
.aboutus{
	background:#fff;
	text-align:left;
        margin-top:200px;
	width:98%;
}
.aboutus .container{
	padding-top:0px ;
	padding-bottom:100px ;
        width:65%;
}
.aboutus img {
	padding:7px;
	display:block;
	border:0px solid #bab4bb;
}
.aboutus .heading p{
	padding-bottom:41px;
}

.aboutus .p{
        font-size:15px;
	margin-top:-100px;
}
.aboutus h4 {
	font-size:16px;
	color:#000;
	padding-bottom:20px;
}
.aboutus h1 {
	font-size:16px;
	color:#000;
	padding-bottom:20px;
        text-align:left;
}
.aboutus .btn-primary {
	border:2px solid #746c75;
	background:none;
	line-height:30px;
	font-size:12px;
	color:#efefef;
	letter-spacing:2px;
	text-transform:uppercase;
	font-weight:600;
	border-radius: 0;
}
.aboutus .btn-primary:hover {
	color:#666;
}

/*----------------------------------------------------
	5. Skill & Expert Style
------------------------------------------------------*/
span.news {
margin: 0;
padding: 5px;
border-bottom: thin dashed #fefefe;
}

.skillset {
	background:#000;
	display:table;
	width:95%;
}

.skillset .container{
	padding-top:66px ;
	padding-bottom:64px ;
}
.skillbar {
	position:relative;
	display:block;
	margin-bottom:53px;
	width:95%;
	background:#e2e1e2;
	height:7px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:0.4s linear;
	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;
	-o-transition:0.4s linear;
	transition:0.4s linear;
	-webkit-transition-property:width, background-color;
	-moz-transition-property:width, background-color;
	-ms-transition-property:width, background-color;
	-o-transition-property:width, background-color;
	transition-property:width, background-color;
}

.skillbar-title {
	position:absolute;
	top:-27px;
	left:0;
	font-weight:bold;
	font-size:13px;
	line-height:27px;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#5b4c5c;
}

.skillbar-title span {
	display:block;
}

.skillbar-bar {
	height:7px;
	width:0px;
	background:#e88988;
}

.skill-bar-percent {
	position:absolute;
	top:-24px;
	font-size:14px;
	color:#796f7a;
	margin-left:-20px;
}

/*----------------------------------------------------
	6. Member
------------------------------------------------------*/

.myexperties {
	background:#fff;
	text-align: left;
        margin-top:200px;
	width:98%;

}
.myexperties .container{
	padding-top:67px ;
	padding-bottom:0 ;
	margin-bottom:-20px;
        border:solid 2px #000;
}
.expertiesico {
	padding:10px 30px 50px 0;
	text-align:right;
	font-family:'Crimson Text',serif;
	font-size:21px;
	line-height:24px;
	color:#fefefe;
	font-style:normal;
}
.expertiesdesc {
	border-left:0px solid #ada5ad;
	padding:10px 25px 10px 10px;
	margin-bottom:30px;
}
.expertiesdesc p {
	padding-bottom:0;
	padding-left:5px;
	font-size:15px;
	color:#000;
}

.expertiesdesc h4 {
	font-size:20px;
	font-weight:600;
	color:#000;
	line-height:normal;
	text-transform:;
	letter-spacing:2px;
}
.expertiesdesc h5 {
	font-family: 'Crimson Text', serif;
	color:#fefefe;
	font-size:12px;
	font-style:normal;
	font-weight:400;
}

.gotoother {
	display:inline-block;
	width:40px;
	height:40px;
	border-radius:30px;
	background-color:none;
}

.gotoother:hover{
	display:inline-block;
	width:40px;
	height:40px;
	border-radius:30px;
	background-color:none;  
}


/*----------------------------------------------------
	7. Education & Diplomas Style
------------------------------------------------------*/

.educationdiploma {
	background-color:#fff;
	text-align:left;
        margin-top:0px;
	margin-bottom:100px;
	padding-left:0.5%;
	margin-left:2%;
	margin-right:2%;
	width:96%;
}
.educationdiploma .container{
	padding-top:65px ;
	padding-bottom:0 ;
}



/*----------------------------------------------------
	 10. Footer Style
------------------------------------------------------*/
.footer{
	background:#eee;
        border-top:0px solid #ada5ad;
        margin-top:0px;
}
.footer .container{
	padding:50px 0 0 0;
}

.footer img{
border:solid 0px #eeeeee;}

.footer ul{
	margin:10px auto 60px auto;
	text-align:center;
	list-style-type:none;
}
.footer ul li{
	display:inline-block;
	text-align:center;
	background:none;
	color:none;
	line-height:30px;
	margin:30px 22px 0 22px;
	width:55px !important;
	height:55px !important;	
	-webkit-border-radius: 0;
    border-radius: 0;
}
.footer ul li:hover{
	background:none;
}
.footer ul li:hover a{
	color:none;
}

.footer ul li a{
	color:#000;
	width:42px !important;
	height:42px !important;
}
.footer ul li a i{
	line-height:30px !important;
	color:#000;font-size:23px;
}
.foot{transition: all 0.3s ease;margin:50px 0 -50px 0}
.foot:hover{transform: scale(1.3); opacity:0.5}

.footer p{
	color:#000;
	font-size:15px;
	line-height:24px;
	font-weight:300;
	text-align:center;
}
.footer p:last-child{
	padding-bottom:0px;
}


.gototop {
	display:inline-block;
	width:40px;
	height:40px;
	border:2px solid #746c75;
}
.gototop i {
	color:#817a82;
	line-height:35px;
}

/* Preloader */
#preloader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:9999999999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	color:#fff;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/gif.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}
#status p{text-align:center;}




/*---------------------------------------------------------------------------------
	 11. Responsive style
-------------------------------------------------------------------------------*/


@media screen and (min-width: 2047px) {
	
	ul.portfolioContainer li{
		width:24.8%;
	}
}


@media screen and (min-width: 2035px) {
	
	ul.portfolioContainer li{
		width:24.8%;
	}
}


@media screen and (min-width: 1440px) {
	
	.workYear{
		width:140px;
		height:140px;
		padding-top:50px;
	}
	
	.education .workYear{
		padding-top:58px;
	}
	ul.portfolioContainer li{
		width:24.8%;
	}
}

@media screen and (min-width: 1200px) {
	.workYear{
		width:140px;
		height:140px;
		padding-top:50px;
	}
	
	.education .workYear{
		padding-top:58px;
	}
	ul.portfolioContainer li{
		width:24.8%;
	}
}


@media screen and (max-width: 991px) {

	.bannerText h1{
		font-size:65px;
		line-height:71px;
	}
	.bannerText h2{
		font-size:28px;
	}
	.proPic{
		text-align:center;
	}
	
	.navbar-inverse .navbar-toggle .icon-bar{
		background:#000;
	}
	.navbar-inverse .navbar-toggle:hover .icon-bar,
	.navbar-inverse .navbar-toggle.active .icon-bar{
		background:#fff;
	}
	.navbar-inverse .navbar-toggle.active {
		background-color:#11141c;
	}





@media screen and (max-width: 810px) {
    label {
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 35px;
    }
	body{
		min-height:700px;
	}
	#header h3{
		font-size: 38px;
	}
	#header h3 span{
		font-size: 16px;
	}
	
	.abc{
		width:100%;
	}
	.navArea {
		float:none;
	}
	#header{
		font-size: 38px;
		text-align:left;
	}	
}


@media screen and (min-width: 768px) {
	.conForm input.col-sm-6 {
		width: 48.5%;
	}
	.conForm input.col-lg-6 {
		width: 48.5%;
	}
	.navbar.navbar-inverse.navbar-static-top a {
		padding-left:0px;
		padding-right:0px;
	}
	.navbar.navbar-inverse.navbar-static-top a.closeMenu {
		width:28px;
		height:28px;
		top:25px;
	}
	.closeMenu i {
		line-height:25px;
	}
}


@media screen and (max-width: 767px) {
	.navbar-wrapper .container,
	.navwrapper .container{
		width:100%;
	}
		.navbar-nav{
		position: absolute;
		width: 100%;
		left: 0;
		color:#fff;
		background:#181a1c;
		text-align:center;
	}
	.nav > li > a {
		display:block;
	}
	.navbar.navbar-inverse.navbar-static-top a:hover{
		background:none;
	}
	
	.navbar-nav > li{
		float:none;
		display:block;
	}
	.navbar-nav > li> a{
		padding:15px 0 !important;
		color:#fff !important;
	}
	.navbar-nav > li> a:hover{
		background:#000 !important;
	}

	ul.portfolioContainer li{
		width:100%;
	}
	.navbar-toggle {
		margin-top: 23px;
	}
	.navbar .container{
		padding:0;
	}
	.isStuck.navbar-wrapper .navArea{
		display:block;
	}
	.navbar-header .navbar-brand{
		float:right;
	}
	
}


@media screen and (max-width: 767px) {
    .menu li {
    font-size: .8em;
    line-height: 0.7em;
    }
    .menu li a,
    header nav li a {
    padding: 1em 1.5em;
    font-size: 200%;
    }
    .menu li a:hover {
    font-size: 250%;
    }
	ul.portfolioContainer li{
		width:100%;
	}
	.navbar-header{
		display:none;
	}
	.isStuck .navbar-header{
		display:block;
	}
	.workYear{
		margin:0 auto;
	}
	.workDetails .rightArea{
		border-left:none;
	}
	.arrowpart{
		float:none;
		width:100%;
		height:40px;
		background:url(../images/arrow-top.png) no-repeat 50% 100%;
	}
	.education .arrowpart{
		background:url(../images/arrow-top-light.png) no-repeat 50% 100%;
	}
	.exCon{
		margin-left:0px;
	}
	/*.stuckMenu .closeMenu {
		display:none;
		left:10px;
		top:24px !important;
		right:inherit;
	}*/
	.closeMenu,
	.nav-icon{
		display:none;
	}
	.navbar-nav > li {
		display:block;
	}
	ul.navbar-nav li a{
		display:block;
	}
	.navbar.navbar-inverse.navbar-static-top a {
		padding:10px 0;
	}
	.about{
		border-right:none;
		border-bottom:solid 1px #dbdbdb
	}
	.about:nth-child(3n+3){
		border-bottom:none;
	}
	.media {
		text-align:center;
	}
	.experdate {
		margin:0 auto 40px;
	}
	.conForm .submitBnt {
		width:100%;
	}

}


@media screen and (max-width: 650px) {
	ul.portfolioContainer li{
		width:100%;
	}
	
	#wrapper{
		top: 200px !important;
	}
	.heading {
		padding-bottom:40px;
	}
	.upbox{
		transform: translate(0px, -70px);
		-ms-transform: translate(0px, -70px); /* IE 9 */
		-webkit-transform: translate(0px, -70px); /* Safari and Chrome */
	}	
	.bannerText {
		padding-top:15px;
		padding-bottom:15px;
	}
	.bannerText h1 {
		font-size: 42px;
		line-height: 48px;
	}
	.bannerText h3 {
		font-size: 28px;
		line-height: normal;
	}
	.bannerText h2 {
		font-size: 18px;
		line-height:24px;
	}
	.aboutus h3 {
		padding-top:20px;
	}
	.expertiesico {
		padding:0;
		border:none;
		text-align:center;
		margin-bottom:30px;
	}
	.expertiesdesc {
		padding:0;
		margin-bottom:50px;
		margin-left:10px;
		margin-right:20px;
	border-left:0px solid #ada5ad;

	}
	.skillbar:last-child {
		margin-bottom:0;
	}
}


@media screen and (max-width: 480px) {
    .menu li {
    font-size: .8em;
    line-height: 0.7em;
    }
    .menu li a,
    header nav li a {
    padding: 1em 1.5em;
    font-size: 130%;
    }
    .menu li a:hover {
    font-size: 160%;
    }
	ul.portfolioContainer li{
		width:100%;
	}
	.bannerText h1 {
		font-size:32px;
	}
	.bannerText h3 {
		font-size:20px;
	}
	.bannerText p {
		font-size:15px;
		padding-bottom:20px;
	}
}


@media screen and (max-width: 400px) {
    .menu li {
    font-size: .8em;
    line-height: 0.7em;
    }
    .menu li a,
    header nav li a {
    padding: 1em 1.35em;
    font-size: 115%;
    }
    .menu li a:hover {
    font-size: 150%;
    }
	#loopedSlider, #newsSlider{
		min-height: 700px;
		height: 100%;
	}
	ul.slides{
		width:100%;
	}
	.slides-container{
		width:100%;
	}

	.item{
		width: 19%;
	}
	.item p {
		font-size: 36px;
	}
	
	.ourservice img{
		width:100%;
	}
	
	ul.portfolioContainer li{
		width:100%;
	}
	
	.bntDownload{
		font-size: 13px;
		padding: 16px 14px;
	}
	
	.conForm textarea{
		margin-bottom:20px;
	}
	.textGroup{
		display:block;
		padding:0 0 40px 0;
	}
	
	.nameError,
	.emailError{
		left:0px;
		top:0px;	
	}

}