/*==========  Desktop First Method  ==========*/

@media only screen and (min-width : 800px) {
	#other .title {
		opacity: 0;
	}
	.work-list .work-item {
		opacity: 0;
	}
	.form-fields {
		opacity: 0;	
	}
}

@media only screen and (max-width : 1440px) {
	.wrapper {
		width: 90%;
	}
	.arrow:after {
		right: calc(50% - 19px);
	}
	.arrow:before {
		margin-right: -19px;
		width: 40px;
	}
	.slider-nav {
		position: absolute;
		top: 0;
		right: 20px;
		width: 50px;
	}
	.slider-nav .slider-dots button.owl-dot {
		width: 20px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1280px) {
	#how-its-work .wrapper:after {
		margin-left: -1px;
	}
}
@media only screen and (max-width : 1200px) {
	#how-its-work-list .wrapper {
		padding: 0;
	}
	#how-its-work-list .work-list {
		width: 100%;
	}
	.work-list .work-item {
		width: 100%;
	}
	.preview {
		width: 100%;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	
}

@media only screen and (max-width : 800px) {
	.desctop, .main-menu:after, footer .soc:before, footer {
		display: none;
	}
	.main-menu ul li {
		margin: 0;
	}
	.main-menu ul li a {
		font-weight: bold;
		font-size: 12px;
		line-height: 16px;
		text-transform: uppercase;
	}
	.main-menu ul li:last-child {
		margin: 0;
	}
	header {
		top: 0px;
		background: rgb(0 0 0 / 40%);
		padding: 20px 0 25px;
	}
	
	.main-menu ul {
		justify-content: space-between;
	}
	.title span {
		font-weight: 300;
		font-size: 25px;
		line-height: 34px;
	}
	.title {
		font-weight: 800;
		font-size: 70px;
		line-height: 95px;
	}
	footer .soc {
		justify-content: center;
	}
	footer .soc a:first-child {
		margin-left: unset;
	}
	#other-inner + footer {
		display: none;
	}
	#who-if-not-us .title, #projects .title, #contacts .title, #project1 .title {
		font-size: 40px;
		line-height: 54px;
		text-align: left;
	}
	#who-if-not-us .title span, #projects .title span, #contacts .title span {
		font-size: 20px;
		line-height: 27px;
		margin-top: 18px;
	}
	#projects .slider-dots {
		display: none;
	}
	.slider-nav {
		top: unset;
		bottom: 30px;
		height: auto;
	}
	.section-item-detail {
		padding: 91px 0 62px;
	}
	.section-item .wrapper {
		align-items: flex-start;
	}
	.project-btn {
		margin-bottom: 40px;
	}
	
	.detail-text {
		width: 100%;
	}
	.slide-item-wrap {
		width: unset;
		text-align: left;
		margin: 0;
	}
	.slide-item {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 100%;
	}
	.section-item {
		height: 100px;
		min-height: 100vh;
	}
	.section-item-detail {
		height: auto;
		min-height: 100vh;
	}
	#how-its-work-list {
		height: auto;
		padding: 100px 0;
	}
	.work-item {
		margin-top: 133px;
	}
	.work-item:first-child {
		margin-top: 0;
	}
	.arrow {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
	.arrow:before {
		content: '';
		position: absolute;
		top: unset;
		right: unset;
		bottom: -125px;
		left: 0;
		display: block;
		width: 1px;
		height: 83px;
		background: #000;
	}
	.arrow:after {
		content: '';
		position: absolute;
		top: unset;
		margin-top: 0;
		bottom: -125px;
		right: unset;
		left: -2px;
		margin-right: -1px;
		display: block;
		width: 4px;
		height: 4px;
		border-left: 1px solid #000;
		border-bottom: 1px solid #000;
		transform: rotate(315deg);
	}
	#how-its-work-list .wrapper {
		width: 100%;
		padding: 0 53px;
		box-sizing: border-box;
	}
	.work-list .work-item:after {
		padding-right: 54px;
	}
	#how-its-work {
		position: relative;
		background: url(../img/how-its-work.png) no-repeat;
		background-position: 0 100%;
		background-size: 100% 100%;
	}
	#how-its-work-list {
		position: relative;
		background: url(../img/how-its-work2.png) no-repeat;
		background-size: 100% 100%;
		background-position: 0% 0%;
	}
	.contacts-form {
		width: 100%;
	}
	.form-fields {
		width: 100%;
	}
	#how-its-work .wrapper:after {
		margin-left: -2px;
	}
	
	.arrow {
		animation: spin-v 1.3s infinite linear;
	}
	@keyframes spin-v {
	  0% {
		transform: translate3d(0, 10px, 0);
	  }
	  50% {
		transform: translate3d(0, -10px, 0);
	  }
	  100% {
		transform: translate3d(0, 10px, 0);
	  }
	}
	#how-its-work .wrapper:before {
		top: calc(70% + 40px);
	}
	#how-its-work .wrapper:after {
		top: calc(90% + 34px);
	}
	.main-menu ul li a {
		color: #fff;
	}
	
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
	
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 400px) {
	.slider-nav {
		right: 70px;
	}
	
}
@media only screen and (max-width : 320px) {
	
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}