/*==============================================================================

 * Template Name: Niz - Creative Personal Portfolio
 * Template URI: 
 * Author: ixtheme - (https://themeforest.net/user/ixtheme)
 * Description: Personal Portfolio Template
 * Version: 1.0
 * Copyright 2018 ixtheme


==============================================================================
    
    [Table of CSS contents]
    ===================
	
    01. GOOGLE FONTS
    02. DEFAULT CSS
    03. REQUIRED CLASSES
    04. LANDING WRAPPER
        -- PRELOADER start
        -- MENU style start
        -- LANDING content start
        -- SOCIAL LINKS style start
    05. ABOUT WRAPPER
        -- SERVICE style start
        -- TESTIMONIAL style start
        -- COUNTER style start
        -- CLIENTS style start
    06. WORKS WRAPPER
    07. CONTACT WRAPPER
        -- FORM Validation style start

==============================================================================*/

/* ==========================================================================
    01. GOOGLE FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:600|Montserrat:300,400,500,600,700');

/* ==========================================================================
    02. DEFAULT CSS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

html,
body {
    color: #212121;
    height: 100%;
    width: 100%;
    font-family: "Times New Roman", 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 110%;
    font-size: 10px !important;
}

::-moz-selection {
    background: #fff;
    color: #333;
    text-shadow: none;
}

::selection {
    background: #fff;
    color: #333;
    text-shadow: none;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

a {
    display: inline-block;
    -webkit-transition: .25s;
    transition: .25s;
    color: #ae0d15;
}

a:hover,
a:active {
    text-decoration: none;
    outline: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding: 0;
    margin: 0;
}

.button {
	padding: 10px 25px 0 25px;
	background-color: #ae0d15;
	border: 1px solid transparent;
	margin-top: 30px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.button::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background-color: #111111;
    top: 0;
    right: 0;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: -1;
}

.button:hover::after {
    width: 100%;
    top: 0;
    right: auto;
    left: 0;
}

.button:hover {
    color: #fff;
    border: 1px solid #fff;
}

/* ==========================================================================
   03. REQUIRED CLASSES
   ========================================================================== */

.wrapper {
    padding: 100px 0;
}

.overlay{
    position: relative;
    z-index: 1;
}

.overlay::after {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: -1;
	opacity: .6;
}

.vegas-overlay {
	opacity: .4;
	background-color: #000;
}

.wrapper_pad {
    padding: 50px 0 0 50px;
    height: 100%;
    background-color: #14131d;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.main_wrapper {
    display: table;
    height: 100%;
    width: 100%;
    /*border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;*/
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.content_middle {
    display: table-cell;
    vertical-align: middle;
}

.text_no_select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hide {
    opacity: 0 !important;
    visibility: hidden !important;
}

.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.wrapper_work,
.wrapper_about,
.wrapper_contact {
    position: fixed;
    height: 0px;
    width: 100%;
    z-index: 9991;
    overflow-y: scroll;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    background-color: #030303;
}

.wrapper_work.wrapper_visible,
.wrapper_about.wrapper_visible,
.wrapper_contact.wrapper_visible {
    height: 100%;
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}

.page_wrapper {
    margin-top: 130px;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}

.page_visibility {
    margin: 100px 0;
    opacity: 1;
    visibility: visible;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
}

/* ==========================================================================
   04. LANDING WRAPPER
   ========================================================================== */

/* -- PRELOADER start */

#preloader {
	width: 100%;
	height: 100%;
	background: #14131d;
	overflow: hidden;
    position: fixed;
    z-index: 9990;
    color: #ae0d15;
}

#preloader span {
	position: absolute;
	color: #ae0d15;
    top: 50%;
    text-align: center;
    width: 100%;
}

.text {
    z-index: 8000;
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    width: 300px;
    background: transparent;
    border: 0px;
    height: 300px;
    overflow: hidden;
    color: #fff;
    font-size: 50px;
    line-height: 130px;
    text-align: center;
}

/** PACE custom css **/
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    z-index: 9999;
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    height: 70px;
    overflow: hidden;
}

.pace .pace-progress {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	display: block;
	position: absolute;
	right: 100%;
	width: 100%;
	top: 30px;
	height: 1px;
	font-size: 18px;
	background: #fff;
	color: #fff;
	line-height: 60px;
}

.pace .pace-progress::after {
	content: attr(data-progress-text);
	display: inline-block;
	position: fixed;
	text-align: right;
	right: 0;
	padding-right: 14px;
	top: -47px;
}

.pace .pace-progress[data-progress-text="0%"]:after { right: -200px }
.pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px }
.pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px }
.pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px }
.pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px }
.pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px }
.pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px }
.pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px }
.pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px }
.pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px }
.pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px }
.pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px }
.pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px }
.pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px }
.pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px }
.pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px }
.pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px }
.pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px }
.pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px }
.pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px }
.pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px }
.pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px }
.pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px }
.pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px }
.pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px }
.pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px }
.pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px }
.pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px }
.pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px }
.pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px }
.pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px }
.pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px }
.pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px }
.pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px }
.pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px }
.pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px }
.pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px }
.pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px }
.pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px }
.pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px }
.pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px }
.pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px }
.pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px }
.pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px }
.pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px }
.pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px }
.pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px }
.pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px }
.pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px }
.pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px }
.pace .pace-progress[data-progress-text="50%"]:after { right: -107px }
.pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px }
.pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px }
.pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px }
.pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px }
.pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px }
.pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px }
.pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px }
.pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px }
.pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px }
.pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px }
.pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px }
.pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px }
.pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px }
.pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px }
.pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px }
.pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px }
.pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px }
.pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px }
.pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px }
.pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px }
.pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px }
.pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px }
.pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px }
.pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px }
.pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px }
.pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px }
.pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px }
.pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px }
.pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px }
.pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px }
.pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px }
.pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px }
.pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px }
.pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px }
.pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px }
.pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px }
.pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px }
.pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px }
.pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px }
.pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px }
.pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px }
.pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px }
.pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px }
.pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px }
.pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px }
.pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px }
.pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px }
.pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px }
.pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px }
.pace .pace-progress[data-progress-text="100%"]:after { right: -14px }

.pace .pace-activity {
	position: absolute;
	width: 100%;
	height: 28px;
	z-index: 2001;
}

.pace.pace-inactive {
    display: none;
}

/* PRELOADER end */

/* -- MENU style start */

.menu_btn_wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9970;
}

.menu_btn {
	flex: 0 0 auto;
	width: 51px;
	height: 51px;
	/*border: 1px solid #ae0d15;*/
	cursor: pointer;
	position: relative;
	border-top: 0;
	border-left: 0;
}

.hamburger,.cross{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}

.hamburger span{
	display:block;
	width:18px;
	height:2px;
	margin-bottom:3px;
	overflow:hidden;
	position:relative;
    color: #ae0d15;
}

.hamburger span:last-child{
	margin:0;
}

.hamburger span:before,.hamburger span:after{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	background-color:#fff;
	transform:translateX(-200%);
	-webkit-transform:translateX(-200%);
	-moz-transform:translateX(-200%);
	-ms-transform:translateX(-200%);
	-o-transform:translateX(-200%);
	transition:transform ease 300ms;
	-webkit-transition:transform ease 300ms;
	-moz-transition:transform ease 300ms;
	-ms-transition:transform ease 300ms;
	-o-transition:transform ease 300ms;
}

.hamburger span:after{
	transform:translateX(0);
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
}

.hamburger span:nth-child(2):before,.hamburger span:nth-child(2):after{
	transition-delay:75ms;
}

.hamburger span:last-child:before,.hamburger span:last-child:after{
	transition-delay:150ms;
}

.menu_btn:hover .hamburger span:before{
	transform:translateX(0);
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
}

.menu_btn:hover .hamburger span:after{
	transform:translateX(200%);
	-webkit-transform:translateX(200%);
	-moz-transform:translateX(200%);
	-ms-transform:translateX(200%);
	-o-transform:translateX(200%);
}

.menu_btn.active .hamburger span:before{
	transform:translateX(100%);
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	-ms-transform:translateX(100%);
	-o-transform:translateX(100%);
}

.menu_btn.active .hamburger span:after{
	transform:translateX(200%);
	-webkit-transform:translateX(200%);
	-moz-transform:translateX(200%);
	-ms-transform:translateX(200%);
	-o-transform:translateX(200%);
}

.cross span{
	display:block;
	width:18px;
	height:2px;
	background-color:#ae0d15;
	transform:translateY(50%) rotate(45deg) scaleX(0);
	-webkit-transform:translateY(50%) rotate(45deg) scaleX(0);
	-moz-transform:translateY(50%) rotate(45deg) scaleX(0);
	-ms-transform:translateY(50%) rotate(45deg) scaleX(0);
	-o-transform:translateY(50%) rotate(45deg) scaleX(0);
	transition:transform ease 200ms;
	-webkit-transition:transform ease 200ms;
	-moz-transition:transform ease 200ms;
	-ms-transition:transform ease 200ms;
	-o-transition:transform ease 200ms;
}

.cross span:last-child{
	transform:translateY(-50%) rotate(-45deg) scaleX(0);
	-webkit-transform:translateY(-50%) rotate(-45deg) scaleX(0);
	-moz-transform:translateY(-50%) rotate(-45deg) scaleX(0);
	-ms-transform:translateY(-50%) rotate(-45deg) scaleX(0);
	-o-transform:translateY(-50%) rotate(-45deg) scaleX(0);
}

.menu_btn.active .cross span{
	transition-delay:450ms;
	transform:translateY(50%) rotate(45deg) scaleX(1);
	-webkit-transform:translateY(50%) rotate(45deg) scaleX(1);
	-moz-transform:translateY(50%) rotate(45deg) scaleX(1);
	-ms-transform:translateY(50%) rotate(45deg) scaleX(1);
	-o-transform:translateY(50%) rotate(45deg) scaleX(1);
}

.menu_btn.active .cross span:last-child{
	transform:translateY(-50%) rotate(-45deg) scaleX(1);
	-webkit-transform:translateY(-50%) rotate(-45deg) scaleX(1);
	-moz-transform:translateY(-50%) rotate(-45deg) scaleX(1);
	-ms-transform:translateY(-50%) rotate(-45deg) scaleX(1);
	-o-transform:translateY(-50%) rotate(-45deg) scaleX(1);
}

.menu {
    text-align: center;
    position: absolute;
    left: 50px;
    top: 50px;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    opacity: 0;
    overflow: hidden;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}

.menu li {
    position: relative;
    opacity: 0;
    visibility: hidden;
    position: relative;
    left: 50px;
}

.menu.menu_full li:nth-child(1) {
    transition-delay: .3s;
}

.menu.menu_full li:nth-child(2) {
    transition-delay: .4s;
}

.menu.menu_full li:nth-child(3) {
    transition-delay: .5s;
}

.menu.menu_full li:nth-child(4) {
    transition-delay: .6s;
}

.menu.menu_full li:nth-child(5) {
    transition-delay: .7s;
}

.menu.menu_full li:nth-child(6) {
    transition-delay: .8s;
}

.menu.menu_full li {
    opacity: 1;
    visibility: visible;
    left: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.menu_full {
    background: rgba(0, 0, 0, 0.92);
    padding: 25px 50px;
    z-index: 999;
    opacity: 1;
}

.menu_item {
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 9995;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    padding-left: 5px;
}

.menu_item:hover {
    color: #fff;
    letter-spacing: 5px;
}

.menu_item::after {
	position: absolute;
	content: "";
	height: 100%;
	width: 0%;
	background-color: #ae0d15;
	top: 0;
	right: 0;
	z-index: -1;
	transform: rotate(-4deg);
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.menu_item:hover::after {
    width: 100%;
    right: auto;
    left: 0;
}

.back_btn,
.close_visible_wrapper {
	position: fixed;
	right: 30px;
	color: #fff;
	z-index: 9999;
	top: 13px;
	cursor: pointer;
	background-color: #222222;
	height: 35px;
	font-size: 15px;
	letter-spacing: 1px;
	/*padding: 4px 10px 0;
    padding-top: 1%;*/
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	margin-top: 0;
    border-radius: 100px;
}

.back_btn i,
.close_visible_wrapper i {
	position: relative;
	top: -7px;
	font-size: 13px;
	margin-right: 4px;
}

.back_btn {
    position: static;
}

.menu li {
    margin-bottom: 35px;
}

.menu li:last-child {
    margin: 0;
}

/* MENU style end */

/* -- LANDING content start */

.home_wrapper {
    background-color: #14131d;
}

.landing_content h1 {
	font-weight: 900;
	font-size: 50px;
	text-transform: uppercase;
	margin-top: 20px;
    margin-bottom: 5px;
    display: inline-block;
}

.landing_content h4 {
    font-size: 25px;
    color: #ddd;
    margin-bottom: 40px;
    font-weight: 400;
	position: relative;
}

@-webkit-keyframes line_anim {
    0%   { width: 20px }
    100% { width: 250px }
}

@-moz-keyframes line_anim {
    0%   { width: 20px }
    100% { width: 250px }
}

@-o-keyframes line_anim {
    0%   { width: 20px }
    100% { width: 250px }
}

@keyframes line_anim {
    0%   { width: 20px }
    100% { width: 250px }
}

.landing_content h4::after {
    position: absolute;
    content: "";
    height: 1px;
    width: 250px;
    left: 50%;
    bottom: -23px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 8%, rgba(255,255,255,1) 27%, rgba(0,0,0,0) 100%);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-animation: line_anim 2s infinite alternate-reverse;
    -moz-animation: line_anim 2s infinite alternate-reverse;
    -o-animation: line_anim 2s infinite alternate-reverse;
    animation: line_anim 2s infinite alternate-reverse;
    -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1);
    -moz-animation-timing-function: cubic-bezier(0, 0, .2, 1);
    -o-animation-timing-function: cubic-bezier(0, 0, .2, 1);
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
}

.landing_content h5 {
    color: #ddd;
}

.cd-headline b {
    color: #fff;
    font-size: 22px;
}

.cd-headline.push b {
    font-size: inherit;
}

/* LANDING content end */

/* -- SOCIAL LINKS style start */

.social_links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-top: 5px;
}

.social_links li {
    display: inline-block;
    font-weight: 600;
}

.social_links li a {
    display: inline-block;
    margin-right: 20px;
    font-size: 16px;
    color: #fff;
}

.social_links li:last-child a {
    margin-right: 0;
}

.social_links li a:hover {
    color: #ae0d15;
}

/* SOCIAL LINKS style end */

/* ==========================================================================
   05. ABOUT WRAPPER
   ========================================================================== */

.about_wrapper {
    background-color: #111;
    padding: 100px 0;
    color: #fff;
    border-radius: 5px;
}

.about_img {
 /*   margin-top: 75px;*/
}

.about_info .social_links {
    display: inline-block;
    margin-top: 20px;
}

.about_info h4 {
    font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    letter-spacing: 2px;
    line-height: 1.2;
/*    font-size: 15px !important;*/
    font-size: 125%;
    margin-left: -0px;
    text-shadow: 0 0 15px #000;
}

.about_info h4 span {
    display: block;
    font-size: 65%;
    color: #fff;
    line-height: 1.3;
}

.about_info p.about_desc {
    font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    letter-spacing: 2px;
    line-height: 1.2;
    margin-top: 20px;
    line-height: 1.8;
    font-size: 75%;
    color: #ddd;
}

.about_info p.about_desc span {
    /*font-weight: 600;*/
    /*font-size: 18px;*/
    color: #fff;
}

.about_info hr {
    background-color: #fff;
    width: 15%;
    height: 1px;
    margin: 22px 0;
}

/* ===== SERVICE style start ====== */

.services {
    margin-top: 100px;
    padding: 100px 0;
    background-color: #030303;
}

.section_title {
    font-size: 30px;
    font-weight: 100;
    margin-bottom: 70px;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    display: inline-block;
    z-index: 1;
    color: #fff;
}

.section_title::after {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    background-color: #ae0d15;
    left: -10px;
    z-index: -1;
    top: -1px;
    border-radius: 50%;
    box-shadow: 13px -5px #004a99, 26px -10px #003a79;
}

.service_items {
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.service_single_item {
    padding: 25px 20px;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    text-align: center;
    position: relative;
    z-index: 1;
}

.service_single_item::before,
.service_single_item::after {
    position: absolute;
    content: "";
    height: 5px;
    width: 40px;
    background-color: #fff;
    left: 50%;
    top: -3px;
    z-index: -1;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.service_single_item::before {
    background-color: #fff;
    top: auto;
    bottom: -3px;
}

.service_single_item:hover::before,
.service_single_item:hover::after {
    width: 60px;
}

.service_single_item i {
	display: block;
	font-size: 40px;
	margin-bottom: 25px;
	position: relative;
	z-index: 1;
	margin-top: 10px;
}

.service_single_item h6 {
	font-size: 20px;
	display: inline-block;
	cursor: pointer;
	color: #ae0d15;
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	margin-bottom: 10px;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	font-weight: 700;
	letter-spacing: 2px;
}

.service_single_item h6::after {
    position: absolute;
    content: attr(data-hover);
    height: 100%;
    width: 100%;
    color: #fff;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: scale(3);
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
}

.service_single_item:hover h6::after {
    opacity: 1;
    visibility: visible;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.service_single_item p {
	color: #ccc;
	font-size: 15px;
}

/* SERVICE style end */

/* -- TESTIMONIAL style start */

.testimonials {
    padding: 100px 0;
    background-color: #030303;
}

.testimonial_single_item {
    text-align: center;
}

.testimonial_single_item img {
    height: 80px;
    width: 80px;
    border: 2px solid #fff;
    padding: 2px;
    margin-bottom: 20px;
    border-radius: 50%;
}

.testimonial_single_item h4 {
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 2px;
}

.testimonial_single_item p {
	margin-top: 10px;
	color: #ccc;
	line-height: 190%;
}

.testimonial_slider {
    padding-bottom: 40px;
}

.swiper-pagination.testimonial_pagination {
    margin-bottom: -15px;
}

.testimonial_pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: 1;
    width: 12px;
    border-radius: 9px;
}

.testimonial_pagination .swiper-pagination-bullet-active {
    background-color: #ae0d15;
    width: 20px;
    border-radius: 9px;
}

/* TESTIMONIAL style end */

/* -- COUNTER style start */

.counter {
    padding: 100px 0;
}

.counter i {
    display: inline-block;
    font-size: 30px;
    margin-bottom: 20px;
    background-color: #06386e;
    position: relative;
    z-index: 1;
    height: 60px;
    width: 60px;
    text-align: right;
    padding-right: 5px;
    padding-top: 5px;
    overflow: hidden;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.counter .col-md-3:hover i {
    background-color: #ae0d15;
}

.counter i::after {
	position: absolute;
	content: "";
	top: -23px;
	right: -44px;
	height: 100%;
	width: 95px;
	background-color: #111;
	z-index: -1;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}

.counter .col-md-3:hover i::after {
	top: 15px;
	right: -1px;
}

.counter span {
    display: block;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 3px;
}

.counter h4 {
	font-size: 18px;
	margin-top: 20px;
	font-weight: normal;
}

/* COUNTER style end */

/* -- CLIENTS style start */

.clients {
    padding: 100px 0 0;
    position: relative;
}

.clients img {
    width: 200px;
    margin: 1px;
}

/* CLIENTS style end */

/* ==========================================================================
   06. WORKS WRAPPER
   ========================================================================== */

.work_wrapper {
    background-color: #111;
    padding: 100px 0;
    text-align: center;
}

.work_single_item {
    /*box-shadow: 0 0 25px #000;*/
    text-align: left;
    margin-bottom: 30px;
    text-align: center;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.work_single_item:hover{
    opacity: .8;
}

.work_info {
    /*background-color: #fff;*/
    padding: 20px;
    text-align: left;
    color: #fff;
}

.work_info h6 {
    /*font-weight: 600;*/
    color: #fff;
    font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    letter-spacing: 2px;
    line-height: 1.2;
    /* font-size: 15px !important; */
    font-size: 105%;
    margin-left: -0px;
    text-shadow: 0 0 15px #000;
}










.work_info p {
    font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    letter-spacing: 2px;
    line-height: 1.2;
    /* font-size: 15px !important; */
    font-size: 90%;
    margin-top: 1px;
    position: relative;
    padding-left: 30px;
    color: #fff;
}

.work_info p::after {
    position: absolute;
    content: "";
    height: 1px;
    width: 20px;
    top: 49%;
    left: 0;
    background-color: #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.work_nxt_prv_btn {
	position: absolute;
	bottom: 64px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	z-index: 999;
}

.work_details_wrapper {
    background-color: #111;
    color: #fff;
}

.work_details_slider {
	margin-bottom: 80px;
}

.work_details_slider .swiper-slide{
    cursor: move;
}

.work_nxt_prv_btn div {
    color: #fff;
    background-color: #ae0d15;
    cursor: pointer;
    display: inline-block;
    height: 35px;
    width: 35px;
    text-align: center;
    line-height: 35px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.work_nxt_prv_btn div:hover {
    background-color: #fff;
    color: #000;
}

.work_info.work_details_info {
	background-color: transparent;
	padding: 0;
}

.work_info.work_details_info p {
    color: #fff;
}

.work_info.work_details_info p::after {
    background-color: #fff;
}

/* ==========================================================================
   07. CONTACT WRAPPER
   ========================================================================== */

.contact_wrapper {
    background-color: #111;
    padding: 100px 0;
    color: #fff;
    border-radius: 5px;
}

.contact_item {
    margin-bottom: 17px;
}

.contact_item h5 {
    color: #ae0d15;
    font-weight: 900;
    margin-bottom: 3px;
}

.input_fild {
    width: 100%;
    background-color: transparent;
    color: #fff;
    margin-bottom: 30px;
    padding: 8px 10px;
    border: 1px solid #fff;
    -webkit-transition: .3s;
    transition: .3s;
}

.input_fild:focus {
    border: 1px solid #ae0d15;
}

textarea.input_fild {
    resize: none;
    height: 120px;
}

button.button {
    outline: 0;
    -webkit-transition: .3s;
    transition: .3s;
    margin-top: 0;
    cursor: pointer;
}

/* -- FORM Validation style start */

.error {
    color: #ce2a5b;
}

.success {
    color: #14ba3a;
}

.inputEmpty {
    border-color: #ce2a5b;
}

.inputNotEmpty {
    border-color: #fff;
}

.inputEmpty::-webkit-input-placeholder {
    color: #ce2a5b;
    opacity: 1;
}

.inputEmpty::-moz-placeholder {
    color: #ce2a5b;
    opacity: 1;
}

.inputEmpty:-ms-input-placeholder {
    color: #ce2a5b;
    opacity: 1;
}

.inputEmpty:-moz-placeholder {
    color: #ff004e;
    opacity: 1;
}

/* FORM Validation style end */



@media (max-width:600px){

.logo_img{
    width: 60%;
    padding-bottom: 5%;
}

.menufont {
    font-size: 12px!important;
}




}


@media (min-width:600px){

.logo_img{
    width: 40%;
    padding-bottom: 5%;
}

.menufont {
    font-size: 12px!important;
}




}


/*768px*/
@media only screen
    and (min-device-width:600px) 
    and (max-device-width:1200px) 
    and (orientation:portrait){
.logo_img{
    width: 30%;
    padding-bottom: 5%;
}

}

@media (min-width:1200px){




.logo_img{
    width: 30%;
    padding-bottom: 5%;
}

}


.infotitle{
    font-size: 130%;
    font-weight: bold;
    padding-bottom: 3%;
    padding-top: 7%;

}


.infotxt{
    font-size: 110%;
    font-weight: bold;
    padding-bottom: 10%;
    line-height: 170%;

}

.maptxt{
    font-size: 110%;
    font-weight: bold;
    padding-bottom: 10%;
    padding-top: 5%;
    line-height: 170%;

}

.company_tbl {
    display: table;
    width: 100%;
}
.company_row {
    display: table;
    width: 100%;

}
.company_td, .company_th {
    border-bottom: 1px solid #ccc;
    display: table-cell;
    font-size: 13px;
    line-height: 2;
    padding: 28px 0;
    text-align: left;
    vertical-align: top;
}
.company_message_item, .company_td_half {
    display: inline-block;
    vertical-align: top;
}
.company_th {
    min-width: 6em;
    width: 15%;
    /*color: #ae0d15;*/
    font-weight: bold;
}
.company_td {
    transform: translateZ(0px);
}
.company_td_half {
    width: 50%;
}
.company_row:first-child .company_td, .company_row:first-child .company_th {
    border-top: 1px solid #ccc;
}