/* --------------------------------- */
/* Css Styles                        */
/*---------------------------------- */

/**
	Berlin - Portfolio Template 
	Author : Tavonline
	Copyright 2018

/* Table of Content
==================================================
	
	1. Body and Core Css
	2. Home Section
	3. About Section
	4. Portfolio Section
	5. Contact Section
	6. Responsive
	7. Slider & Video Home


/*------------------------ 1 Body and Core Css ------------------------*/		

:root {
	--blue-gray: rgb(237,243,247);
	--light-blue: rgb(249,253,255);
	--soft-blue: rgb(177,223,255);
	--blue: rgb(104,202,238);
	--wh:#ffffff;
	--bl:#000000;
	--gr: rgb(181,181,221);
	--dark-blue: rgb(83,86,90);
	--fa-style-family-classic: 'Font Awesome';
}
body {
	font-family: 'Open Sans', sans-serif;
	background-color: var(--light-blue);
}
html {
	height: 100%;
}
.content-section {
	display: none;
} 
.content-section.active {
	display: block;
}
nav ul.subject li.active {
	font-weight: 300;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
nav {
	position: fixed;
	background: var(--wh);
	z-index: 1000;
	width: 100%;
	padding: 8px;
	display: none;
	-webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18);
}
nav.landing {
	position: fixed;
	z-index: 1000;
	width: 100%;
	padding: 8px;
	display: flex;
	-webkit-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 2px 92px 0px rgba(0, 0, 0, 0.18);
}
.nav-menu {
	float: right;
	line-height: 32px;
	position: relative;
	top: calc(30px - 16px);
}
.nav-landing {
	list-style-type: none;
	text-align: right;
	font-size: 2rem;
	font-weight: 700;
	float: right;
	line-height: 3rem;
	position: relative;
	top: calc(30px - 16px);
}
ul.nav-landing li a {
	color:var(--light-blue);
	text-shadow: 0px 0px 30px rgba(0,0,0,0.5);
}
ul.nav-landing li a:hover {
	color:var(--blue);
	text-shadow: 2px 4px 25px rgba(164,255,255,0.9);
}
ul.nav-landing li a.active {
	color:var(--soft-blue);
	text-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}
nav ul li {
	float: left;
	margin-right: 15px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
}
li.li-title {
	color:var(--light-blue);
	font-size: 2.5rem;
	line-height: 2.75rem;
	font-weight: 700;
	text-shadow: 0px 0px 30px rgba(0,0,0,0.5);
}
nav ul li a {
	color: #000;
}
nav ul li a:hover {
	color: #afafaf!important;
}
.logo {
	float: left;
}
.logoNav {
	width:5rem;
}
.responsive {
	display: none;
	font-size: 23px;
}
.active {
	color: #afafaf;
}
li a.active {
	color: #afafaf;
}
footer {
	background: #000;
	padding: 90px 0;
	text-align: center;
}
footer p {
	line-height: 20px;
	margin-top: 20px;
}
footer .social a {
	color: #b1b1b1;
	margin: 0 10px;
	transition: all ease 0.3s;
	font-size: 13px;
}
section::before {
	display: block;
	content: "";
	margin-top: -80px;
	height: 80px;
	pointer-events: none;
}
.diag footer p {
	font-size: 14px;
	color: #757575;
	line-height: 27px;
}
.site-button:focus {
	outline: 0;
}
.nav-menu li a:focus {
	color: #000;
}
.ok {
	background: green !important;
	border: solid 2px green !important;
	color: white;
}
 input:-webkit-autofill {
 -webkit-box-shadow: 0 0 0px 1000px white inset;
	box-shadow: 0 0 0px 1000px white inset;
}
.form-inp.reqError, .contact-form textarea.reqError {
	border-color: #f00;
}
.content {
	margin-top: 120px;
	margin-bottom: 60px;
}
.subpage-nav {
	display: block !important;
	margin-top:-120px;
}
.page-title {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	z-index: 2;
	position: relative;
}
.page-title h1 {
	font-size: 75px;
	color: var(--wh);
	font-weight: bold;
	letter-spacing: -3px;
	margin-bottom: 20px;
}
/* Text */
h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}
div.blog-content h3 {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.25;
	padding-bottom: 1rem;
	color: var(--blue);
	text-transform: uppercase;
}
h4 {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.25;
}
h5 {
	font-size:1.3rem;
	font-weight: 700;
}
h6 {
	font-size:1.2rem;
	font-weight: 500;
}
.seperator {
	vertical-align:2px;
}
figcaption {
	font-size: 0.75rem;
	margin:0 0;
	color:var(--dark-blue)
}
.italic {
	font-style: italic;
}
.tab {
	display:inline-block;
	float: right;
}
/* Margins */

.top_-58 {
	margin-top: -58px;
}
.top_15 {
	margin-top: 15px;
}
.top_30 {
	margin-top: 30px;
}
.top_45 {
	margin-top: 45px;
}
.top_50 {
	margin-top: 50px;
}
.top_60 {
	margin-top: 60px;
}
.top_90 {
	margin-top: 90px;
}
.top_120 {
	margin-top: 120px;
}
.padding_30 {
	padding: 30px 0;
}
.padding_45 {
	padding: 45px 0;
}
.padding_60 {
	padding: 60px 0;
}
.padding_90 {
	padding: 90px 0;
}
.bottom_15 {
	margin-bottom: 15px;
}
.bottom_30 {
	margin-bottom: 30px;
}
.bottom_45 {
	margin-bottom: 45px;
}
.bottom_60 {
	margin-bottom: 60px;
}
.bottom_90 {
	margin-bottom: 90px;
}
.bottom_120 {
	margin-bottom: 120px;
}
.padbot_15 {
	padding-bottom: 15px;
}
.padbot_30 {
	padding-bottom: 30px;
}
.padbot_45 {
	padding-bottom: 45px;
}
.padbot_60 {
	padding-bottom: 60px;
}
.padbot_90 {
	padding-bottom: 90px;
}
.padbot_100 {
	padding-bottom: 100px;
}
.padbot_120 {
	padding-bottom: 120px;
}
.padbot_160 {
	padding-bottom: 160px;
}
.padbot_200 {
	padding-bottom: 200px;
}
.padtop_15 {
	padding-top: 15px;
}
.padtop_30 {
	padding-top: 30px;
}
.padtop_45 {
	padding-top: 45px;
}
.padtop_60 {
	padding-top: 60px;
}
.padtop_90 {
	padding-top: 90px;
}
.padtop_100 {
	padding-top: 100px;
}
.padtop_120 {
	padding-top: 120px;
}
.padtop_200 {
	padding-top: 200px;
}
/*preloader */
.loader-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 9999;
}
.loader {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center the element */
  width: 0;               /* start collapsed horizontally */
  height: 2px;            /* small initial height */
  background: var(--wh);
  box-sizing: border-box; /* keep sizing predictable */
  z-index: 10000;
}
.loader2 {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* center the element */
  width: 0;               /* start collapsed horizontally */
  height: 2px;            /* small initial height */
  background: var(--wh);
  box-sizing: border-box; /* keep sizing predictable */
  z-index: 10000;
}
.fsm {
	font-size:0.75rem!important;
}
.portfolioP {
	padding-bottom:200px;
}
.toggle-content {
	display: none;
}
.toggle-content.active {
	display: block;
}
.nav-landing li.active {
	font-weight: bold;
}
div .divider {
	width: 100%;
	height: 3px;
	background-color: var(--dark-blue);
	margin:2.5rem 0 5rem 0;
}
.bold {
	font-weight: 700;
}
.italic {
	font-style: italic;
}
.faicon{
	font-size: 2rem;
}
.web-prototype {
	 margin:calc(vw/2-1170);
}
/*------------------------ 2 Home ------------------------*/		

.home {
	width: 100%;
	display: table;
}

.home.bg1 {
	background: url(../images/home-2.jpg) 50% 50% fixed;
	background-size: cover;
	transition: background-image 500ms
}
.home.bg2 {
	background: url(../images/home-3.jpg) 50% 50% fixed;
	background-size: cover;
	transition: background-image 500ms
}
.home.bg3 {
	background: url(../images/home-4.jpg) 50% 50% fixed;
	background-size: cover;
	transition: background-image 500ms
}
.home-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	z-index: 2;
	position: relative;
}
.home-content h1 {
	font-size: 55px;
	color: var(--light-blue);
	font-weight: bold;
	margin-bottom: 20px;
}
.home:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.social {
	height: 30px;
}
.social a {
	color: white;
	font-size: 22px;
	margin: 0 15px;
	transition: all ease-in-out 0.3s;
}
.social a:hover {
	transition: all ease 0.3s;
	color: var(--blue);
	filter: drop-shadow(0 1px 5px rgba(249,253,255,0.55));
}
i.social-icons {
	transition: all ease 0.3s;
}
i.social-icons:hover {
	transition: all ease 0.3s;
	transform: scale(1.5);
}
.home-down {
	color: var(--wh);
	font-size: 40px;
	padding-top: 40px;
	padding-left: 68px;
	display: inline-block;
	transition: all 0.3s ease;
}
.home-down:hover {
	color: var(--light-blue);
	transition: all 0.3s ease;
	text-shadow: 0 0 8px var(--blue);
}
.home-down:focus {
	color: var(--light-blue);
	text-shadow: 0 0 8px var(--blue);
}

/* arrow css3 animation */

@-webkit-keyframes bounce {
 0%, 100% {
-webkit-transform: translateY(0);
	 transform: translateY(0);
}
 50% {
-webkit-transform: translateY(-20px);
	 transform: translateY(-20px);
}
}
 @-moz-keyframes bounce {
 0%, 100% {
-moz-transform: translateY(0);
	 transform: translateY(0);
}
 50% {
-moz-transform: translateY(-20px);
	 transform: translateY(-20px);
}
}
 @-o-keyframes bounce {
 0%, 100% {
-o-transform: translateY(0);
	 transform: translateY(0);
}
 50% {
-o-transform: translateY(-20px);
	 transform: translateY(-20px);
}
}
 @keyframes bounce {
 0%, 100% {
transform: translateY(0);
}
 50% {
transform: translateY(-20px);
}
}
.bounce {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;
}
.diagonal {
	position: absolute;
	left: 0;
	bottom: 0;
	pointer-events: none;
	background: var(--light-blue);
	float: left;
	z-index: 1000;
}
.diagonal-gray {
	/* -- two triangles cut in from right -- */
	position: absolute;
	left: 0;
	bottom: 0;
	pointer-events: none;
	background: var(--light-blue);
	float: left;
	/*z-index: 100;*/
	margin-top: 120px;
}
.diagonal-gray path {
	/* -- central right downward triangle for about me and projects sections-- */
	fill: var(--blue-gray);
}
.diagonal-white {
	/* -- two triangles cut in from left -- */
	background: var(--blue-gray);
	margin-bottom: -6px;
	margin-top: 60px;
}
.diagonal-white path {
	/* -- central left downward triangle for portfolio section-- */
	fill: var(--light-blue);
	stroke: var(--blue-gray);
	stroke-width: 0;
}
.diagonal.home-left {
	position: absolute;
	bottom: 0;
	left: 0;
	background: none;
	z-index: 99;
}
.diagonal.home-right {
	position: absolute;
	bottom: 0;
	right: 0 !important;
	background: none;
	z-index: 99;
	left: auto;
}
.diagonal.home-left, .diagonal.home-right path {
	fill: var(--blue-gray);
	stroke: var(--blue-gray);
	stroke-width: 4;
}
.diag p {
	font-size: 15px;
	color: #748182;
	line-height: 28px;
}
.diag .section-title.dleft {
	text-align: left;
	padding: initial;
}
.diag .section-title.dleft .portfolio_filter ul {
	float: left;
}
.diag .section-title.dright {
	text-align: right;
	padding: initial;
}
.diag section {
	position: relative;
}
.diag .contact .contact-info li {
	line-height: 36px;
	font-size: 14.5px;
	color: #414141;
	text-align: left;
	list-style: none;
}
.diag .page-title.sub {
	font-size: 23px;
	text-align: right;
	width: 100%;
	float: right;
}
.diag .page-title.sub h5 {
	font-weight: bold;
	line-height: 30px;
	padding-bottom: 15px;
}
.diag .social-icons a {
	color: #000;
	font-size: 18px;
	width: 26px;
	height: 18px;
	display: inline-block;
}
.diag .home-content h1 {
	text-align: left;
}
.diag .home-content .social {
	text-align: left;
}
.diag .home-content .home-down.bounce {
	float: left;
	padding: 50px inherit;
}
.social-icons a:hover {
	font-size: 22px;
}
.fb:hover {
	color: #3b5998!important;
	transition: all ease 0.1s;
}
.tw:hover {
	color: #55acee!important;
	transition: all ease 0.1s;
}
.ins:hover {
	color: #cd486b!important;
	transition: all ease 0.1s;
}
.bh:hover {
	color: #1769ff!important;
	transition: all ease 0.1s;
}
.dr:hover {
	color: #ea4c89!important;
	transition: all ease 0.1s;
}
.sitebtn {
	border: solid 2px #dfdfdf;
	background: var(--wh);
	font-size: 13px;
	padding: 9px 11px;
	text-align: left;
	min-width: 140px;
	line-height: 17px;
	transition: all ease 0.3s;
	color: var(--dark-blue);
}
.sitebtn:after {
	color: var(--dark-blue);
	float: right;
}
.sitebtn:focus {
	border: solid 2px #000;
}
.sitebtn:hover {
	background: #000;
	color: var(--wh);
	border-color: #000;
	transition: all ease 0.3s;
}
.sitebtn:hover:after {
	color: var(--wh);
}
.sitebtn:focus {
	border: solid 2px #dfdfdf;
}
/*------------------------ 3 About ------------------------*/	

.about.type-1 .about-image {
	padding-bottom: 70px;
	background: #d2dadd;
}
.about.type-1 .about-image img:before {
	background: #e4e4e4;
}
.about.type-1 .about-image img {
	width: 100%;
	box-shadow: 0px 0px 85px 0px rgba(0, 0, 0, 0.14);
	margin-top: -15%;
	margin-left: calc(15% - 15px);
}
.about.type-1.vertiqal .about-image img {
	width: 100%;
	box-shadow: 0px 0px 85px 0px rgba(0, 0, 0, 0.14);
	margin-top: -15%;
	margin-left: -15%;
}
.diagonal-title h5 {
	padding-bottom: 20px;
	font-size: 25px;
	line-height: 31px;
}
.diagonal span {
	font-size: 15px;
	color: #b3b3b3;
	letter-spacing: 3px;
	margin-bottom: 5px;
	display: block;
}
.about {
	padding-top: 90px;
}
.diag .about {
	position: relative;
}
.about-image img {
	width: 100%;
}
.work-areas {
	width: 100%;
	display: inline-block!important;
}
.work-areas .area .icon i:before {
	font-size: 40px;
	margin-left: 5px;
}
.work-areas .area .icon i {
	display: inline-block;
}
.work-areas .area .icon {
	width: 20%;
	float: left;
}
.work-areas .area .text {
	width: 80%;
	float: left;
}
.work-areas .area .text h6 {
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 8px;
}
.work-areas .area .text p {
	font-size: 13px;
	line-height: 24px;
	letter-spacing: 0.02rem;
}
.about h2 {
	font-size: 23px;
	line-height: 30px;
}
.about-text {
	display: table;
	height: 407px;
}
.out {
	display: table-cell;
	vertical-align: middle;
}
.typed-cursor {
	opacity: 1;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
@keyframes blink {
 0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
@-webkit-keyframes blink {
 0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
@-moz-keyframes blink {
 0% {
opacity:1;
}
 50% {
opacity:0;
}
 100% {
opacity:1;
}
}
.gray-bg {
	margin-top: 90px;
	background: var(--blue-gray);
}
.bgray-bg {
	background: var(--blue-gray);
}
.what-can {
	padding: 90px 0;
}
.what-can .feature {
	text-align: center;
	margin-bottom: 30px;
}
.what-can .feature i {
	font-size: 40px;
}
.what-can .feature h3 {
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 11px;
}
.what-can .feature p {
	line-height: 20px;
}
/*------------------------ 4 Portfolio ------------------------*/	


.section-title {
	text-align: center;
	padding: 90px 0 60px 0;
}
.section-title h2 {
	font-size: 23px;
	font-weight: bold;
}
.section-title p {
	line-height: 20px;
}
.portfolio_filter {
	text-align: center;
	padding-top: 15px;
}
.portfolio_filter ul {
	margin: auto;
	display: inline-block;
}
.portfolio_filter ul li {
	font-size: 14px;
	color: #777777;
	font-family: 'Poppins', sans-serif;
	float: left;
	margin-right: 15px;
	list-style: none;
	cursor: pointer;
}
.single_item {
	margin-bottom: 30px;
}
.single_item img {
	width: 100%;
	transition: all ease 0.3s;
}
.single_item img:hover {
	background: var(--wh);
	transition: all ease 0.3s;
	box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
	top: -5px;
}
.select-cat {
	color: #000 !important;
}
.popup-youtube {
	position: relative;
}
.popup-youtube i {
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	background: rgba(0, 0, 0, 0.66);
	padding: 28px 29px;
	color: var(--wh);
	margin: -31px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}
.dwhite-bg {
	background: var(--light-blue);
}
.title {
	font-weight: 500;
}
.category {
	font-weight: 200;
	font-size: 0.875rem;
}
.pdf {
vertical-align:4px;
	font-size:0.8rem;
}
/*------------------------ 5 Blog ------------------------*/

.blog-image img {
	width: 100%;
}
.blog-content {
	margin-bottom: 60px;
}
.blog-title {
	font-size: 18px;
	letter-spacing: 0;
	line-height: 27px;
	padding: 30px 0 15px;
	color: #000;
}
.blog-info {
	font-size: 14px;
	font-weight: 400;
	color: #b9b9b9;
	margin-top: 20px;
	display: inline-block;
}
.blog-info span {
	color: #000;
	font-weight: 600;
}
.blog .site-button {
	margin: 0 auto 60px;
	display: table;
}
.blog-single h1 {
	font-size: 30px;
	line-height: 41px;
	margin: 25px 0 22px 0;
	color: var(--dark-blue);
	font-weight: 600;
	letter-spacing: -1px;
}
.blog-single .blog-detail {
	font-size: 13px;
	color: #b9b9b9;
	margin-bottom: 30px;
}
.blog-single .blog-detail span {
	color: #000;
}
.blog-single blockquote {
	color: var(--dark-blue);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.8rem;
	border-left: 4px solid var(--gr);
	padding:0 30px;
	margin: 30px 30px;
}
.blog-single ul.list-style {
	padding: 30px;
	line-height: 24px;
}
.blog-single ul.list-style li {
	font-size: 14px;
	list-style: circle;
}
.lightbox-image img {
	width: 100%;
	padding-bottom: 30px;
}
.blog-single .post-lightbox {
	padding: 30px 0 0;
}
.subtitle {
	font-size: 22px;
	line-height: 24px;
	margin: 25px 0 30px 0;
	color: #000;
	font-weight: bold;
}
.post-comment {
	float: left;
}
ul.post-comment li {
	width: 100%;
	float: left;
	border-bottom: 1px solid #efefef;
	padding: 15px 0;
	list-style: none;
}
ul.post-comment li img {
	width: 15%;
	float: left;
}
ul.post-comment li .comment-info {
	float: left;
	width: 85%;
	padding-left: 15px;
	margin-top: 15px;
}
ul.post-comment li h3 {
	float: left;
	font-size: 14px;
}
ul.post-comment li a {
	float: right;
	font-size: 11px;
	font-weight: bold;
	color: #000;
}
ul.post-comment li span {
	float: left;
	width: 100%;
	font-size: 12px;
	color: #c5c5c5;
	margin-top: 3px;
}
ul.post-comment li p {
	font-size: 12px;
	line-height: 20px;
	float: left;
	margin-top: 6px;
}
.send-message {
	margin-top: 60px !important;
}
.send-message .subtitle {
	margin-bottom: 30px;
}
.blog .bgray-bg .sitebtn {
	margin-right: 12px;
}
/*------------------------ 5 Contact ------------------------*/

.contact-info {
	text-align: center;
}
.contact-info i {
	width: 60px;
	height: 60px;
	text-align: center;
	background: #000;
	border-radius: 50px;
	color: var(--wh);
	padding-top: 20px;
	font-size: 20px;
	margin-bottom: 15px;
}
.contact-info p {
	line-height: 20px;
}
.section-title p {
	margin-top: 20px;
}
.form-inp {
	width: 100%;
	height: 45px;
	border: 0;
	color: #000;
	border-bottom: solid 1px #dfdfdf;
	font-size: 13px;
	padding-left: 10px;
	margin-bottom: 15px;
	font-family: 'Poppins', sans-serif;
}
.contact-form textarea {
	width: 100%;
	border: 0;
	border-bottom: solid 1px #dfdfdf;
	font-size: 13px;
	padding: 20px 0 0 10px;
	height: 119px;
	margin-bottom: 15px;
	font-family: 'Poppins', sans-serif;
}
.contact-form {
	margin-top: 60px;
}
.contact-form .sitebtn {
	margin: auto;
	margin-top: 30px;
	display: block;
}
.button {
	text-align: center;
	padding: 45px 0;
}
.site-button {
	padding: 10px 50px;
	font-size: 12px;
	background: none;
	border: 2px solid;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	transition: all ease 0.3s;
}
a.site-button {
	border: 2px solid #000;
	color: #000;
}
.site-button:hover {
	background: #000;
	color: var(--wh);
	transition: all ease 0.3s;
}

/*------------------------ 6 Responsive ------------------------*/


/*max Width 992px */

@media screen and (max-width: 991px) {
.home-content h1 {
	font-size: 50px;
}
.nav-landing li{
	font-size: 1.25rem!important;
	line-height: 1.75rem!important;
}
.nav-landing li.li-title {
	font-size: 1.5rem!important;
	line-height: 1.75rem!important;
	padding-bottom: 0.3rem;
}
.what-can .feature {
	padding: 0 30px;
}
.about.type-1 .about-image {
	background: none;
}
.about.type-1 .about-image img {
	margin: 0;
}
.web-prototype {
	 margin:calc(vw/2-991);
}
}

/*max Width 768px */

@media screen and (max-width: 767px) {
.home-content h1 {
	font-size: 32px;
	margin-bottom: 10px;
}
.contact-info {
	margin-bottom: 30px;
	padding: 0 50px;
}
.social a {
	margin: 0 10px;
	font-size: 12px;
}
nav {
	padding: 30px 15px;
	}
.nav-menu {
	margin-top: 59px;
	display: none;
	float: none;
	width: 100%;
}

.nav-menu li {
	width: 100%;
	text-align: center;
	height: 45px;
	border-top: 1px solid #f7f7f7;
	line-height: 45px;
}
.nav-landing li {
	width: 100%;
	text-align: right;
	display: block;
	float: none;
	font-size: 1rem!important;
	line-height: 1.6rem!important;
}
.nav-landing li.li-title {
	font-size: 1.3rem!important;
	line-height: 1.65rem!important;
	padding-bottom: 0.3rem;
}
.responsive {
	float: right;
	display: block;
}
.about {
	padding-top: 60px;
}
.about h2 {
	margin-top: 30px;
}
.gray-bg {
	margin-top: 30px;
}
.what-can {
	padding: 45px 0;
}
.section-title {
	padding: 60px 0 45px 0;
}
.portfolio_filter ul {
	margin-top: 15px;
}
.portfolio_filter ul li {
	height: 30px;
}
.diagonal, .diagonal-gray, .diagonal-white {
	height: 70px;
}
.row.bottom_90 {
	margin-bottom: 0;
}
.web-prototype {
	 margin:calc(vw/2-767);
}
/*------------------------ 7 Slider & Video Home ------------------------*/


.home-slider {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
}
.slider {
	background: none !important;
}
.home-video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.wow-removed {
	animation-name: none !important;
	visibility: visible !important;
}