/*
Theme Name: James Nash
Theme URI: http://www.jamesnash.net/
Author:  James Nash and Aminiasi Tikoi Navunitale
Author URI: http://www.jamesnash.net/
Description: James Nash Theme
Version: 1.0
Tags: skeleton, responsive
*/

@import url("resources/css/base.css");
@import url("resources/css/skeleton.css");
@import url("resources/css/layout.css");

@font-face {
    font-family: 'hurme_geometric_sans_2black';
    src: url('/wp-content/themes/jamesnash/resources/fonts/hurme_design_-_hurmegeometricsans2_black-webfont.woff2') format('woff2'),
         url('/wp-content/themes/jamesnash/resources/fonts/hurme_design_-_hurmegeometricsans2_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'hurme_geometric_sans_2light';
    src: url('/wp-content/themes/jamesnash/resources/fonts/hurme_design_-_hurmegeometricsans2_light-webfont.woff2') format('woff2'),
         url('/wp-content/themes/jamesnash/resources/fonts/hurme_design_-_hurmegeometricsans2_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body{
	--color-text: #fff;
	--color-bg: #252525;
	--color-link: #fff;
	--color-link-hover: #f20c40;
	--color-bg-item1: #15171b;
	--color-bg-item2: #2c35b7;
	--color-bg-item3: #0f1013;
	--color-bg-item4: #1d2027;
	--color-bg-item5: #0f1013;
	--color-item-alt: #494d54;
	--color-quote: #5b677a;
	--color-info: #57535a;
	--color-title: #e23434;
	--color-tagline: #e2e2e2;
	font-family: 'hurme_geometric_sans_2light';
	font-size: 16px;
	background-color: #f0f0f0;
}
header .action {
    position: fixed;
    width: 30px;
	height:30px;
    top: 22px;
    right: 15px;
	z-index:10000;
}

body.logged-in header .action{
	
}

header .action .action-menu{
	position:relative;
	width: 30px;
	height:30px;
	cursor: pointer;
}

header .action .bar1, header .action .bar2 {
  background-color: #0028ff;
  transition: 0.4s;
  position:absolute;
  right:0px;
}
header .action .bar1 {
	height: 4px;
  width: 30px;
  top:0px;
}
header .action .bar2 {
	height: 4px;
  width: 20px;
  top:9px;
}

header .action.action--close .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  background-color: #ffffff;
  top:0px;
}

header .action.action--close .bar2 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: #ffffff;
  top:20px;
  right:6px;
}
#main-menu {
    position: fixed;
    top: -100%;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0028ff;
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
}
#main-menu .menu li{
	margin-bottom: 35px;
	opacity: 0;
}
#main-menu .menu a {
    color: #fff;
    text-transform: uppercase;
    font-size: 60px;
    line-height: 50px;
    font-family: hurme_geometric_sans_2black;
    position: relative;
}
#main-menu .menu a:hover{
	text-decoration: none;
}
.menu-social-icons{
	position: absolute;
	bottom: 20px;
	left: 35px;
	opacity: 0;
}
#main-menu .social-media-links h4 {
    color: #fff;
}
#main-menu .social-media-links img {
    width: 32px;
    height: 32px;
    -webkit-filter: grayscale(100) brightness(100);
            filter: grayscale(100) brightness(100);
}
#main-menu .social-media-links ul li {
    margin-left: 0;
    margin-right: 25px;
}
#portfolio .cover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
#portfolio .isotope-item:hover figure.cover{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
}
.title-wrapper {
    position: relative;
    z-index: 2;
    padding-top: 180px;
}
#portfolio.container .columns.intro-box {
    transform: none !important;
}
#portfolio .intro-box h2.title, #portfolio .intro-box h1.title{
	position: absolute;
	left: 0;
	top: 0;
	width: 150%;
	font-size: 55px;
	line-height: 0.91;
}
/* about us page */
#about-content {
    max-width: 610px;
    text-align: center;
    margin-top: 45px;
}
#contact-content .title-image {
    text-align: center;
}
#about-content .title-image img,
#contact-content .title-image img{
	max-width: 410px;
}
.line-divider {
    width: 20px;
    margin-top: 5px;
    margin-bottom: 20px;
    display: block;
}
.line-divider.size-lg{
	width: 35px;
}
.line-divider.size-lg.align-center{
	margin-left: auto;
	margin-right: auto;
}
.social-media-links h4{
	color: #0028ff;
}
.social-media-links ul li {
    display: inline-block;
    margin: 0 15px;
}
.projectdetailsbox.container {
    height: auto !important;
}
.social-media-links img {
    width: 32px;
    height: 32px;
}
article .content div {
    margin-bottom: 1rem;
}

.home_intro {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #b8b8b8;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align:center;
    	-ms-flex-align:center;
    		align-items:center;

}
.home_intro svg{
	max-width: 400px;
	width: 100%;
	display: none;
}
#logo_text{
	opacity: 0;
}
#portfolio .isotope-item:not(.projectbox){
	opacity: 0;
}
#portfolio.container .columns.intro-box{
	opacity: 1;
}
.blog p {
    font-size: 12px;
    line-height: 18px;
    color: #2f2f2f;
}
#contact-content .contact-form-wrapper{
    margin: 0 auto;
    text-align: center;
    float: none;
    display: block;
}
#contact-content .contact-form-wrapper h4 {
    text-transform: none;
    font-family: 'hurme_geometric_sans_2light';
}
#contact-content .contact-form-wrapper p a {
    color: #292929;
}
#forminator-module-469 {
    max-width: 450px;
    margin: 0 auto;
}
.forminator-custom-form-469.forminator-design--material .forminator-response-message.forminator-success, .forminator-custom-form-469.forminator-design--material .forminator-response-message.forminator-success p {
    box-shadow: none;
    background-color: #0028ff;
    color: #fff !important;
    text-align: center;
}
body .forminator-custom-form-469.forminator-design--material .forminator-label[class*="forminator-floating-"] {
    color: #0028ff;
    font-size: 20px;
    margin-bottom: 6px;
}
 body .forminator-custom-form-469.forminator-design--material .forminator-is_active .forminator-label[class*="forminator-floating-"] {
    color: #0028ff;
}
.et-db #et-boc .et_pb_module .forminator-ui.forminator-custom-form.forminator-design--material .forminator-input, .forminator-ui.forminator-custom-form.forminator-design--material .forminator-input{
    border-color: #0028ff;
    text-align: center;
}
.forminator-ui.forminator-custom-form.forminator-design--material .forminator-textarea {
    border-width: 0 0 1px 0 !important;
    border-color:  #0028ff !important;
    text-align: center;
    padding-top: 40px !important;
}
 .forminator-ui.forminator-custom-form.forminator-design--material .forminator-textarea--wrap::after{
    opacity: 0 !important;
}
.forminator-button.forminator-button-submit {
    background: transparent !important;
    color: #0028ff !important;
    text-transform: uppercase;
    font-size: 20px !important;
    font-family: 'hurme_geometric_sans_2black' !important;
}
.forminator-button.forminator-button-submit:hover{
    box-shadow: none !important
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #0028ff;
  opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #0028ff;
  opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #0028ff;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
  color: #0028ff;
  opacity: 1;
}
.projectimages .eight.columns,
.projectimages .full.columns {
    margin: 0;
}
#main-menu .menu a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 8px;
    background: 
    #fff;
    top: 50%;
    animation: out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
#main-menu .menu a:hover:before{
  animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
@keyframes in{
  0%{
    width: 0;
    left:0;
    right:auto;
  }
  100%{
    left:0;
    right:auto;
    width: 100%;
  }
}
@keyframes out{
  0%{
    width:100%;
    left: auto;
    right: 0;
  }
  100%{
    width: 0;
    left: auto;
    right: 0;
  }
}
@keyframes show{
  0%{
    opacity:0;
    transform:translateY(-10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
@media only screen and (max-width: 767px){
	header .action{
		top: 22px;
		right: 15px;
	}
	#main-menu .menu li {
    	margin-bottom: 15px;
	}
	#main-menu .menu a{
		font-size: 40px;
	}
	#portfolio.container .columns.intro-box {
    	padding: 0px;
    	width: calc( 100% - 10px );
	}
	#portfolio.container .four-row{
		height: auto;
	}
	.title-wrapper{
		padding-top: 0;
	}
	#portfolio .intro-box h2.title, #portfolio .intro-box h1.title {
	    position: relative;
	    left: 0;
	    top: 0;
	    width: 100%;
	    font-size: 38px;
	}
	#portfolio .intro-box h1.title{
		margin-bottom: 10px;
	}
	#about-content .title-image img, #contact-content .title-image img {
    	max-width: 210px;
	}
	.contact-box{
		height: auto !important;
    	width: 100% !important;
	}
	#contact-content h2{
		margin-bottom: 0;
	}
	.my-story-box h2{
		margin-bottom: 0;
	}
    .projectdetailsbox .details h2 {
        font-size: 38px;
        line-height: 36px;
    }
    .container .columns .detail-box{
        display: none !important;
    }
    .two.columns.four-row.isotope-item,
    .two.columns.two-row.isotope-item,
    .four.columns.two-row.isotope-item{
        max-width: calc( 50% - 20px );
        width: 100%;
        height: auto;
        margin: 5;
    }
}
@media only screen and (max-width: 480px){
	.container {
	    width: 100%;
	}
}