@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');





*

{

    margin: 0;

    text-decoration: none;

    font-family: 'Inter', sans-serif;

	max-width: 100%;

}



body

{

	background-image: url(https://www.megacable.com.mx/plan100/img/back_.png);

	background-repeat: no-repeat;

}







a

{

	color: #09438f;

}



img

{

    max-width: 100%;

}







.cont

{

    max-width: 1100px;

    margin: 0 auto;

}



@media screen and (max-width: 900px)

{

	.cont

	{

		max-width: 100%;

		margin: 0 30px;

	}

}







@media screen and (max-width: 400px)

{

	.cont

	{

		max-width: 100%;

		margin: 0 30px;

	}

}







.txtform

{

	text-align: center;

	color: #fff;

    font-size: 30px;

}



@media screen and (max-width: 900px)

{

	.txtform

	{

		text-align: center;

		color: #fff;

		margin: 0 auto;

	}

}



@media screen and (max-width: 400px)

{

	.txtform

	{

		text-align: center;

		color: #fff;

		margin: 0 auto;

		width: 80%;

		line-height: 35px;

	}



}



.form

{



	margin: auto;

	display: flex;

	justify-content: center;

    align-items: center;

	margin: 60px 0;



	border: 2px solid #fff;

	border-radius: 20px;

	padding: 30px;

}





@media screen and (max-width: 900px)

{

	.form

	{

		max-width: 100%;

		height: auto;

		display: grid;

		text-align: center;

		margin: 60px 0;

	}

}







@media screen and (max-width: 400px)

{

	.form

	{

		max-width: 100%;

		height: auto;

		display: grid;

		padding: 30px 0;

		text-align: center;

		margin: 30px 0;

	}

}





.inp

{

    margin: 0 20px;

}





@media screen and (max-width: 900px)

{

	.inp

{

    margin: 0;

}

}



@media screen and (max-width: 900px)

{

	.inp

{

    margin: 10px 0;

}

}





input

{

	width: 364px;

	height: 57px;

	text-align: center;

	font-size: 20px!important;

    border-radius: 30px;

    border: 1px solid rgb(0, 0, 0);

}



@media screen and (max-width: 900px)

{

	input

	{

		width: 100%;

		height: 57px;

		text-align: center;

		font-size: 20px!important;

		margin: 20px 0;

	}

}



@media screen and (max-width: 400px)

{

	input

	{

		width: 80%;

		height: 57px;

		text-align: center;

		font-size: 20px!important;

		margin: 20px 0;

	}

}





button

{

	text-align: center;

	text-transform:uppercase;

	color: #fff!important;

	font-size: 20px!important;

	font-weight: 500;

	padding: 15px 40px;

	border: transparent;

	border-radius: 35px;

	background-color: rgb(0, 0, 0);

	cursor: pointer;

}



@media screen and (max-width: 900px)

{

	button

	{

		width: 100%;

	}

}



@media screen and (max-width: 400px)

{

	button

	{

		width: 80%;

		margin-top: 20px;

	}

}



.contact

{

	color: #fff;

	font-weight: 400;

	font-size: 50px;

	position: relative;

}



.p1

{

	font-size: 30px;

	font-weight: 200;

}



.p2

{

	color: #fff;

	font-weight: 700;

	font-size: 50px;

	position: relative;

}



.centered-element {

	margin: 0;

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

  }



  @media screen and (max-width: 900px)

{

	.centered-element {

		margin: 0;

		position: inherit;

		top: 50%;

		transform: translateY(25%);

	  }

}



  @media screen and (max-width: 400px)

{

	.centered-element {

		margin: 0;

		position: absolute;

		top: 50%;

		transform: translateY(-15%);

	  }

}





/* Grid */



.column {

	flex-basis: 100%;

	text-align: center;

  }

  

  @media screen and (min-width: 800px) {

	.row {

	  display: flex;

	  flex-direction: row;

	  flex-wrap: nowrap;

	  text-align: center;

	}

	.column {

	  flex: 1;

	}

	._25 {

	  flex: 2.5;

	}

	._5 {

	  flex: 5;

	}

  }

  /* Style */

  



  

  .column  {

	padding: 15px;

	margin: 5px 0;



  }



  .column2 {



	margin-top: 230px;

  }



  @media screen and (max-width: 900px) {

	.column2 {



		margin-top: 0;

		display: none;

	  }

	}

  

  main {

	max-width: 1200px;

	margin: 0 auto;

  }



  h1

  {

	font-size: 50px!important;

	margin-bottom: 10px;

	text-align: center;

  }