/* ------->> VN Studios Landing Page <<<----------*/


/* ---------->> smaller than 1060 <<<-------------*/

@media screen and (max-width: 1060px) {
	.center {
		width: 96%;
		margin: 0 auto;
	}
	header .logo {
		float: none;
		margin: 30px auto 0;
	}
	header nav {
		float: none;
		margin: 20px auto 0;
	}
	.main-image {
		height: 800px;
	}
	.que .info {
		padding-top: 320px;
		width: 98%;
	}
	.que .info ul {
		margin-top: 30px;
	}
	.que .proceso {
		margin-top: -150px;
		width: 95%;
	}
	.que .proceso li::after {
		width: 60px;
		margin-left: 7%;
	}
	.parallax-inner {
		background-size: cover!important;
	}
	.como {
		margin-bottom: 100px;
	}
	.como .info {
		width: 40%;
	}
	.como picture {
		width: 58%;
		margin-top: 90px;
	}
	.como picture img {
		width: 100%;
		height: auto;
	}
	.lenguajes h3 {
		width: 96%;
		margin: 0 auto;
	}
	.quienes {
		margin: 95px auto 125px;
		width: 80%;
	}
	.experiencia picture {
		width: 100%;
	}
	.experiencia picture img {
		max-width: 994px;
		width: 100%;
	}
}

@media screen and (max-width: 1060px) and (min-width: 800px) {
	header.sticky .logo {
		float: left;
		margin: 0 0 0 5px;
	}
	header.sticky nav {
		float: right;
		margin-top: 15px;
	}
	header.sticky nav li {
		font-size: 1.000em;
	}
}

@media screen and (max-width: 850px) {
	header {
		width: 100%;
		padding: 20px 10px;
		height: 175px;
		z-index: 1100;
		position: absolute;
	}
	header .logo {
		float: none;
		margin: 45px auto 0;
		position: relative;
	}
	header .button_container {
		display: block;
	}
	header .extras {
		display: block;
	}
	header .top-mobile {
		display: block;
		background: #2d4d76;
		position: fixed;
		top: 0;
		left: 0;
		height: 55px;
		width: 100%;
		z-index: 1100;
		text-transform: uppercase;
		color: #2a2727;
		font-weight: 600;
	}
	header .top-mobile a {
		float: right;
		margin: 17px 20px 0 0;
		color: #fff;
		display: block;
	}
	header .button_container {
		margin: 15px 10px 0 0;
		z-index: 1210;
		position: fixed;
		top: 0;
		height: 18px;
		width: 130px;
		cursor: pointer;
		-webkit-transition: opacity .25s ease;
		transition: opacity .25s ease;
		text-transform: uppercase;
		color: #fff;
		font-weight: 600;
	}
	header .button_container span {
		width: 30px!important;
		z-index: 1200;
	}
	header .button_container p {
		margin-top: -2px;
	}
	header .button_container:hover {
		opacity: .7;
	}
	header .button_container.active .top {
		background: #FFF;
		-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
		transform: translateY(8px) translateX(0) rotate(45deg);
	}
	header .button_container.active .middle {
		opacity: 0;
		background: #FFF;
	}
	header .button_container.active p {
		opacity: 0;
	}
	header .button_container.active .bottom {
		background: #FFF;
		-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
		transform: translateY(-8px) translateX(0) rotate(-45deg);
	}
	header .button_container span {
		background: #fff;
		border: none;
		height: 4px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		cursor: pointer;
	}
	header .button_container span:nth-of-type(2) {
		top: 8px;
	}
	header .button_container span:nth-of-type(3) {
		top: 16px;
	}
	header .overlay {
		position: fixed;
		background: #2d4d76;
		z-index: 1100;
		top: 0;
		left: 0;
		width: 100%;
		height: 0%;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
		transition: opacity .35s, visibility .35s, height .35s;
		overflow: hidden;
	}
	header .overlay.open {
		opacity: .9;
		visibility: visible;
		height: 100%;
	}
	header .overlay.open li {
		-webkit-animation: fadeInRight .5s ease forwards;
		animation: fadeInRight .5s ease forwards;
		-webkit-animation-delay: .35s;
		animation-delay: .35s;
	}
	header .overlay.open li:nth-of-type(2) {
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
	}
	header .overlay.open li:nth-of-type(3) {
		-webkit-animation-delay: .45s;
		animation-delay: .45s;
	}
	header .overlay.open li:nth-of-type(4) {
		-webkit-animation-delay: .50s;
		animation-delay: .50s;
	}
	header .overlay nav {
		position: relative;
		height: 70%;
		top: 5%;
		font-size: 1.4em;
		font-weight: 500;
		text-align: center;
		z-index: 1200;
	}
	header nav li .select {
		border-bottom: 0;
		color: #032e3e!important;
	}
	header nav li a:hover {
		color: #032e3e;
		-webkit-transition: .35s;
		transition: .35s;
	}
	header .overlay ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		display: inline-block;
		position: relative;
		z-index: 1200;
	}
	header .overlay ul li {
		display: block;
		min-height: 50px;
		position: relative;
		opacity: 0;
	}
	*::-ms-backdrop,
	header .overlay ul li {
		opacity: 1;
	}
	/* IE11 */
	header .overlay ul li a {
		display: block;
		position: relative;
		color: #FFF;
		text-decoration: none;
		overflow: hidden;
	}
	header .overlay ul li a:hover:after,
	.overlay ul li a:focus:after,
	.overlay ul li a:active:after {
		width: 100%;
	}
	header .overlay p {
		position: relative;
		height: 25%;
		top: 5%;
		bottom: 0;
		display: block;
		color: #fff;
		font-weight: 600;
		font-size: 0.875em;
	}
	header .overlay p a {
		color: #fff;
	}
	header .overlay p a:hover {
		color: #fff;
		-webkit-transition: .35s;
		transition: .35s;
	}
	header .overlay p .instagram {
		margin: 0 auto;
	}
	header .overlay p .social-icons {
		padding-bottom: 10px;
		display: inline-block;
		margin-top: 0;
	}
	.que {
		margin-bottom: 100px;
	}
	.como {
		text-align: center;
	}
	.como .info {
		width: 100%;
		float: none;
		text-align: left;
	}
	.como picture {
		width: 100%;
		float: none;
	}
	.como picture img {
		width: auto;
		height: auto;
		margin: 0 auto;
		margin-top: 20px;
	}
}


/* ---------->> smaller than 800 <<<-------------*/

@media screen and (max-width: 800px) {
	@-webkit-keyframes fadeInRight {
		0% {
			opacity: 0;
			left: 20%;
		}
		100% {
			opacity: 1;
			left: 0;
		}
	}
	@keyframes fadeInRight {
		0% {
			opacity: 0;
			left: 20%;
		}
		100% {
			opacity: 1;
			left: 0;
		}
	}
	.main-image {
		height: 600px;
	}
	.que .info {
		padding-top: 250px;
	}
	.que .info ul {
		margin-top: 15px;
	}
	.que .info h1 {
		font-size: 2.0em;
		line-height: 1.0em;
	}
	.que .info h2 {
		font-size: 1.8em;
	}
	.que .proceso h3 {
		margin-left: 20px;
	}
	.que .proceso {
		margin-top: -150px;
		padding: 50px 20px 90px;
	}
	.que .proceso li::after {
		width: 30px;
		margin-left: 55px;
	}
	.parallax-inner {
		background-size: cover!important;
	}
	.como {
		width: 94%;
	}
	.lenguajes h3 {
		padding: 60px 0;
	}
	.quienes {
		margin: 60px auto;
	}
	.donde .center {
		width: 100%;
	}
	.donde .info {
		position: relative;
		width: 100%;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		padding: 30px 20px;
		margin-top: 40px;
	}
	.donde .map {
		height: 275px;
		margin: 0;
	}
	.donde .map #gmap_canvas {
		height: 275px;
	}
	.donde .info:after {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(242, 54, 48, 0);
		border-top-color: #f23630;
		border-width: 30px;
		margin-left: -30px;
	}
	.experiencia ul {
		margin-top: 0;
	}
	.consultas .center {
		padding: 100px 0 0;
	}
	.consultas .main-image-2 {
		height: 1370px;
	}
}


/* ---------->> smaller than 650 <<<-------------*/

@media screen and (max-width: 650px) {
	.que {
		margin-bottom: 90px;
	}
	.que .info ul li {
		width: 85px;
		height: 50px;
	}
	.que .info .android {
		background-size: 274px 50px;
		background-position: 0 0;
	}
	.que .info .ios {
		background-size: 274px 50px;
		background-position: -95px 0;
	}
	.que .info .webapps {
		background-size: 274px 50px;
		background-position: -184px 0;
	}
	.que .proceso {
		padding: 30px 20px 60px;
	}
	.que .proceso h3 {
		margin-left: 0;
		margin-bottom: 20px;
	}
	.que .proceso li {
		width: 100%;
		text-align: left;
		margin-bottom: 5px;
	}
	.que .proceso li .number {
		display: none;
	}
	.que .proceso li .icon {
		width: 60px;
		height: 60px;
		margin-top: 0;
		position: relative;
		float: left;
		background-size: 254px 60px;
		margin-right: 10px;
	}
	.que .proceso li:after {
		display: none;
	}
	.que .proceso li .icon-2 {
		background-position: -66px 0;
	}
	.que .proceso li .icon-3 {
		background-position: -127px 0;
	}
	.que .proceso li .icon-4 {
		background-position: -192px 0;
	}
	.que .proceso li p {
		font-size: 1.00em;
		margin-top: 18px;
	}
	.que .proceso .btn {
		padding: 10px 15px;
		margin: 35px auto;
		left: auto;
		text-align: center;
		width: 88%;
	}
	.como {
		margin-bottom: 50px;
	}
	.lenguajes h3 {
		padding: 50px 0;
		font-size: 1.3em;
	}
	.lenguajes .frase-image {
		height: 195px;
	}
	.quienes {
		margin: 50px auto 20px;
		width: 70%;
	}
	.quienes h1 {
		text-align: center;
		margin-bottom: 30px;
	}
	.experiencia picture img {
		max-width: 361px;
		width: 100%;
	}
	.experiencia li {
		width: 100%;
	}
	.experiencia ul .top {
		margin-top: 0;
	}
	.experiencia ul .bottom {
		margin-top: 0;
	}
	.experiencia h1 {
		margin-bottom: 30px;
	}
	.experiencia {
		padding: 50px 0 40px;
	}
	.consultas .center {
		padding: 80px 0 0;
		width: 94%;
	}
}

@media screen and (max-width: 450px) {
	.que .info {
		padding-top: 220px;
	}
	.como picture img {
		width: 100%;
	}
	.lenguajes h3 {
		padding: 40px 0;
		font-size: 1.0em;
	}
	.lenguajes h3 strong {
		font-size: 1.2em;
	}
	.lenguajes .frase-image {
		height: 185px;
	}
	.quienes {
		width: 60%;
	}
	.quienes .owl-carousel .bottom {
		margin-top: 0;
	}
	.quienes .owl-carousel .middle {
		margin-top: 0;
	}
	.consultas .center {
		padding: 60px 0 0;
		width: 90%;
	}
	.consultas form .left {
		float: none;
		width: 100%;
	}
	.consultas form .right {
		float: none;
		width: 100%;
	}
	.consultas .main-image-2 {
		height: 1370px;
	}
	.consultas form input {
		margin-bottom: 15px;
	}
	.mauticform-errormsg {
		display: block;
		color: white;
		margin-top: -10px!important;
		font-size: 13px;
	}
}

@media screen and (max-height: 400px) {
	header .overlay p {
		display: none;
	}
	header nav li {
		font-size: 1.0em;
	}
	header .overlay ul li {
		min-height: auto;
	}
}