@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/full/img/back.png);
	background-repeat: no-repeat;
}

@media screen and (max-width: 900px)
{
	body
{
	background-image: url(https://www.megacable.com.mx/full/img/back_.png);
	background-repeat: no-repeat;
}
}

a
{
	color: #09438f;
}

img
{
    max-width: 100%;
}

.ben
{
	width: 245px;
}

	@media screen and (max-width: 900px)
	{
		.ben
		{
			width: 270px;
		}
	}

    .portada
    {
        width: 100%;
        height: 900px;
        background-image: url(https://www.megacable.com.mx/full/img/portada.png);
        background-repeat: no-repeat;
        background-size:cover;
    }

    @media screen and (max-width: 1440px)
	{
		.portada
    {
        width: 100%;
        height: 850px;
        background-image: url(https://www.megacable.com.mx/full/img/portada_.png);
        background-repeat: no-repeat;
        background-size:cover;
    }
	}

    @media screen and (max-width: 780px)
	{
		.portada
    {
        width: 100%;
        height: 800px;
        background-image: url(https://www.megacable.com.mx/full/img/portada_2.png);
        background-repeat: no-repeat;
        background-size:cover;
    }
	}

    @media screen and (max-width: 900px)
	{
		.oferta
    {
        margin-top: -370px;
    }
	}

    @media screen and (max-width: 400px)
	{
		.oferta
    {
        margin-top: 0;
    }
	}


    .paq
    {
        padding-left: 145px;
    }

    @media screen and (max-width: 900px)
	{
		.paq
    {
        padding-left: 0;
    }
	}


/* CARRUSEL */

.carousel-controls {
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);

    }

	@media screen and (max-width: 900px)
{
	.carousel-controls {
		position: absolute;
		top: 46%;
		bottom: 0;
		left: 0;
		width: 15%;
		font-size: 20px;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,.6);
	
		}
}



@media screen and (max-width: 400px)
{
	.carousel-controls {
		position: absolute;
		top: 38%;
		bottom: 0;
		left: 0;
		width: 10%;
		font-size: 20px;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,.6);
	
		}
}


    .carousel-controls.right {
        right: 0;
        left: auto;
    }


    .azul
    {
        width: 100%;
        height: auto;
        background-image: url(https://www.megacable.com.mx/full/img/footer.png);
        background-repeat: no-repeat;
        background-size:cover;
    }

	@media screen and (max-width: 900px)
{
	.azul
    {
        width: 100%;
        height: auto;
        background-image: url(https://www.megacable.com.mx/full/img/footer.png);
        background-repeat: no-repeat;
        background-size:cover;
        padding-bottom: 0%;
    }
}

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

    .centered-element p {
        font-size: 22px;
    }
}

@media screen and (max-width: 767px){
	.centered-element{padding-top: 10% !important;}
	.contact{display: inline-block !important; position: relative; width: 100%;}
	.izq{display: inline-block; position: relative; width: 100%; height: auto !important;}
	.izq img{width: 100%; display: inline-block; max-width: 300px;}
	.portada .izq{padding-top: 50%;}
}

@media screen and (max-width: 600px){
    .oferta {
        margin-top: -300px;
        width: 100%;
        max-width: 370px;
    }
    .portada .izq { padding-top: 60%; }
    .title { padding-top: 120px !important; font-size: 22px !important; }
}

@media screen and (max-width: 400px)
{
	.azul
    {
        width: 100%;
        background-image: url(https://www.megacable.com.mx/full/img/footer.png);
        background-repeat: no-repeat;
        background-size:cover;
    }
}



.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;
	}
}



.title
{
	padding-top: 150px;
    color: #fff;
    font-weight: 700;
}

@media screen and (max-width: 900px)
{
	.title
{
	padding-top: 228px;
}
}

@media screen and (max-width: 400px)
{
	.title
{
	padding-top: 150px;
}
}

.izq
{
	position: relative;
}

@media screen and (max-width: 900px)
{
	.izq
{
	position: relative;
  	height: 300px;
}
}

@media screen and (max-width: 400px)
{
	.izq
{
	position: inherit;
  	height: unset;
}
}


.izq_
{
	
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #09438f;
  text-align: initial;
  
}

@media screen and (max-width: 400px)
{
	.izq_
{
	margin: 0;
	position: inherit;
	top: none;
	transform: none;
	text-align: initial;
}
}

.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: 100%;
        line-height: 25px;
        font-size: 22px;
	}
	.portada{ height: auto !important;display: flex; justify-content: center; padding-bottom: 30px;}
	.centered-element p { font-size: 20px !important; }
	.paq{display: inline-block !important;width: 100%; margin: 0;}
	.azul .column{ padding: 0px !important; margin: 0px !important;}
	.title { padding-top: 70px !important;}

}

@media screen and (max-width: 400px){
	.oferta { margin-top: -220px; width: 100%; max-width: 200px; }
	input { width: 100% !important; height: 45px !important;}
	button{ width: 100% !important; height: 45px !important; }
}

.form
{

	margin: auto;
	display: flex;
	justify-content: center;
    align-items: center;
	margin: 60px 0;
}

@media screen and (max-width: 1500px)
{
	.form
	{
		max-width: 100%;
		display: block;
		height: auto;
		display: grid;
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 400px)
{
	.form
	{
		max-width: 100%;
		height: auto;
		display: grid;
		padding: 30px 0;
		text-align: center;
	}
}

@media screen and (max-width: 900px)
{
	.form
	{
		max-width: 100%;
		height: auto;
		display: grid;
		text-align: center;
	}
}

.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 transparent;
}

@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: #ff771c;
	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%);
  }



/* 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: 991px) {
  	.centered-element p{font-size: 26px;}

  }

  @media screen and (max-width: 900px) {
  	.centered-element {
        top: 0%;
        position: relative;
        padding-top: 90%;
    }
	.column2 {

		margin-top: 0;
		display: none;
	  }
	}
  
  main {
	max-width: 1200px;
	margin: 0 auto;
  }

  h1
  {
	font-size: 50px!important;
	margin-bottom: 10px;
	text-align: center;
  }