/* General styles for the modal */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
html{
	{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
}
@media only screen and (max-width: 2523px) {

	.home {
		position: fixed;
		float: left;
		height:10px;
	}
	.col-contacto{
		float: left;
		width: 33.3333%;
		/*border-right: 1px solid #87868b;*/
	}
	.contacto-espacio{
		width: 80%;
		margin-left: 15%;
		margin-bottom: 60px;
	}
	.contact {
		background: #fff;
	}
	.contact .row {
	}
	.contact p {
		text-align: center;
		align-items: center;
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		line-height: 20px;
		color: #717075;
		font-size: 15px;
	}
	.contact .info {
		float: left;
		width: 35%;
		margin-right: 1%;
		margin-top: 10px;
	}
	.col-servicio{
		width: 25%;
		float: left;
		position: inherit;
		margin-bottom: 50px;
	}
	/*==service section css===*/
	.service {
		padding:0px 0;
		background: #fff;
		height: auto;
		margin-top:10%;

	}
	.service p{
		padding-top: 1cm;
		font-weight: 400;
		text-align: justify;
	}
	/*==apartado de servicios css===*/
	.serv {
		margin-top: -10px;
		padding-top: 150px;
		background: #fff;
		padding-bottom: 40px;
	}
	.serv p{
		font-family: 'Raleway', sans-serif;
		font-weight: 400;
		line-height: 28px;
	}
	.serv h4{
		font-family: 'Raleway', sans-serif;
		text-transform: uppercase;
		font-weight: 900;
		line-height: 20px;
		color: #717075;
		font-size: 15px;
	}
	/*==apartado de portafolio css===*/
	.portfolio {
		padding:70px 0;
		background: #fff;
	}
	.portfolio .row2{
		margin-top: 40px;
		display: inline-block;
	}
	.col-des-servicio{
		margin-left: 10%;
		margin-right: 10%;
		text-align: center;
	}
	.home-content {
		margin-top:40vh;
		width: 100%;
	}
	p.big-index{
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
		text-transform: uppercase;
		font-size: 3.5em;
		margin-left: 1px;
		line-height: 80px;
		color: #fff;
		text-align: center;
	}
	p.small-index{
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
		line-height: 20px;
		color: #fff;
		font-size: 1.7em;
		text-align: center;
	}

	.portada{
		width: 100%;
		height: auto;
		float: left;
	}
	.somos-setion{
		width: 100%;
		height: 100%;
		float: left;
	}
	.cuadro1{
		width: 50%;
		height: auto;
		float: left;
	}
	.cuadro2{
		width: 50%;
		height: auto;
		float: left;
	}
	.orange{
		width: 90%;
	}
	.texto-somos{
		margin-left: 100px;
		margin-right: 100px;
		margin-top: 8%;
	}
	.md-modal {
		position: fixed;
		left: 50%;
		width: 50%;
		height: 100%;
		max-width: 1200px;
		min-width: 1200px;
		z-index: 2000;
		visibility: hidden;
		transform: translateX(-50%) translateY(-50%);
		-ms-transform: translate(50px,100px); /* IE 9 */
		-webkit-transform: translate(-50%,-40%); /* Safari */
		-moz-transform: translate(-50%,-40%);
	}
	.especial1{
		position: fixed;
	}
	.md-show {
		visibility: visible;
		overflow:hidden;
		height: 100%;
		position: fixed;
		top: 50%;
		margin-top: 4%;
		overflow: hidden;
	}
	.md-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		visibility: collapse;
		top: 0;
		left: 0;
		z-index: 1000;
		background: rgba(35,35,35,1);
		opacity: 1;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.md-show ~ .md-overlay {
		opacity: 1;
		visibility: visible;
	}
	/* Content styles */
	.md-content {
		color: #fff;
	}
	/* Individual modal styles with animations/transitions */

	/* Effect 1: Fade in and scale up */
	.md-effect-1 .md-content {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		transform: scale(0.7);
		opacity: 0;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	.md-show.md-effect-1 .md-content {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
	.media1
	{
		display: block;
	}
	.media2
	{
		display: none;
	}
	.col-md-7 {
		width: 58.33333333%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}

}


@media only screen and (max-width: 1950px) {
	.home {
		position: fixed;
		float: left;
		min-height: calc(90vh);
		height: 80%;
	}
}

@media only screen and (max-width: 1600px) {
	.texto-somos{
		margin-left: 20px;
		margin-right: 50px;
		margin-top: 8%;
	}

}

@media only screen and (max-width: 1399px) {
	.col-servicio{
		margin-top: 0%;
		margin-left: 6%;
		height: 300px;
		width: 40%;
		float: center;
		position: inherit;
	}
	.col-md-7 {
		width: 50.33333333%;
		margin-left: 5%;
	}
}


@media only screen and (max-width: 1099px) {
	.md-show {
		visibility: visible;
		overflow:hidden;
		height: 100%;
		position: fixed;
		top: 50%;
		margin-top: 4%;
		overflow: hidden;
	}

	.media1
	{
		display: none;
	}
	.media2
	{
		display: block;
	}
}

@media only screen and (max-width: 1080px) {
	.home {
		position: fixed;
		float: left;
		min-height: calc(100vh);
		height: 100%;
	}
	.col-md-7 {
		width: 45.33333333%;
		margin-left: 9%;
	}
	.col-contacto{
		float: left;
		width: 100%;
		/*border-right: 1px solid #87868b;*/
	}
	.contacto-espacio{
		width: 80%;
		margin-left: 10%;
		margin-bottom: 60px;
	}
}
@media only screen and (max-width: 991px) {
	.col-md-7 {
		width: 45.33333333%;
		float: left;
	}
	.col-md-4 {
		width: 33.33333333%;
		float: left;
	}

}
@media only screen and (max-width: 868px) {
	.orange{
		width: 100%;
	}
	.cuadro1{
		width: 100%;
		height: auto;
		float: left;
	}
	.cuadro2{
		width: 100%;
		height: auto;
		float: left;
	}
	.orange{
		width: 70%;
		margin-left: 15%;
	}
	.texto-somos{
		margin-left: 40px;
		margin-right: 40px;
		margin-top: 5%;
	}
	.somos-setion{
		width: 100%;
		height: 100%;
		float: left;
	}
	.md-show {
		visibility: visible;
		overflow: auto;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 50%;
		margin-top: 4%;
		overflow: hidden;
	}

	.col-md-7 {
		margin-left: 13%;
		width: 40.33333333%;
		float: left;
	}
	.col-md-4 {
		width: 35.33333333%;
		float: left;
	}
	.tex{
		width: 80%;
		margin-left: 50px;
		margin-right: 10px;
	}

}

@media only screen and (max-width: 818px) {
	.md-show {
		visibility: visible;
		overflow: auto;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 35%;
		margin-top: 4%;
		overflow: hidden;
	}

	.col-md-7 {
		margin-left: 15%;
		width: 40.33333333%;
		float: left;
		margin-top: 50px;
	}
	.col-md-4 {
		width: 35.33333333%;
		float: left;
		margin-left: -70px;
	}
	.tex{
		width: 80%;
		margin-left: 50px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 794px) {
	.dem{
		visibility: visible;
		overflow: scroll;
		height: 500px;
		width: 100%;
		position: absolute;
		top: 1%;
		margin-top: 0px;
	}
	.md-show {
		visibility: visible;
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 35%;
		margin-top: 4%;
		overflow: hidden;
	}

	.col-md-7 {
		margin-left: 25%;
		width: 50%;
		float: left;
		margin-top: 50px;
	}
	.col-md-4 {
		margin-left: 25%;
		width: 35.33333333%;
		float: left;
	}
	.tex{
		width: 80%;
		margin-left: 50px;
		margin-right: 10px;
	}
}


@media only screen and (max-width: 615px) {
	.col-servicio{
		margin-top: 0%;
		margin-left: 0%;
		height: 300px;
		width: 100%;
		float: center;
		position: inherit;
	}
	.md-show {
		visibility: visible;
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 35%;
		margin-top: 4%;
		height: 600px;
		overflow: hidden;
	}

	.col-md-7 {
		margin-top: 25px;
		margin-left: 32%;
		width: 35%;
		float: left;
		margin-top: 50px;
	}
	.col-md-4 {
		width: 38.33333333%;
		float: left;
	}
	.tex{
		width: 80%;
		margin-top: 10px;
		margin-left: 25%;
		margin-right: 10px;
		margin-bottom: 90px;
	}
}
@media only screen and (max-width: 520px) {

}

@media only screen and (max-width: 423px) {
	p.big-index{
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
		text-transform: uppercase;
		font-size: 2.7em;
		margin-left: 1px;
		line-height: 80px;
		color: #fff;
		text-align: center;
	}
	p.small-index{
		margin-top: -25px;
		font-family: 'Raleway', sans-serif;
		font-weight: 300;
		line-height: 20px;
		color: #fff;
		font-size: 1.5em;
		text-align: center;
	}
	.dem{
		visibility: visible;
		overflow: scroll;
		height: 500px;
		width: 100%;
		position: absolute;
		top: 2%;
		margin-top: 0px;
	}
	.md-show {
		visibility: visible;
		height: none;
		overflow: auto;
		width: 100%;
		position: fixed;
		top: 35%;
		margin-top: 4%;
		overflow: hidden;
	}

	.col-md-7 {
		margin-top: 25px;
		margin-left: 36%;
		width: 28%;
		float: left;
		margin-top: 50px;
	}
	.col-md-4 {
		width: 32.33333333%;
		float: left;
	}
	.tex{
		width: 80%;
		margin-top: 10px;
		margin-left: 43%;
		margin-right: 10px;
		margin-bottom: 50px;
	}
}