@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root{
	--dark: #00345F;
	--azul: #027BE4;
	--rosa: #DA0080;
	--morado: #660EFF;
	--gris: #F2F2F2;
	--deg1: #027BE4;
	--deg2: #06BEF2;
	--light: #E1F0FF;
}
body{
	margin: 0 auto !important;
	max-width: 1266px;
	font-family: 'Montserrat', sans-serif;
}
section{
	padding: 20px 10px;
}
.head{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.head button{
	border: 2px solid var(--morado);
	border-radius: 5px;
	background: #fff;
	color: var(--morado);
	font-size: 18px;
	font-weight: 600;
	padding: 4px;
	width: 200px;
	cursor: pointer;
}
.head button:hover{
	background: var(--morado);
	border-color: var(--morado);
	color: #fff;
}
.head button:hover svg{
	fill: #fff;
}
.head button:focus, .head button:active{
	background: #320032;
	border-color: #320032;
	color: #fff;
}
.head button:focus svg, .head button:active svg{
	fill: #fff;
}
h1{
	font-size: 30px;
	margin: 0;
	color: var(--azul);
	letter-spacing: -1px;
}
h1 strong{
	color: var(--dark);
}
h2{
	font-size: 22px;
	margin: 0 0 15px;
	color: var(--dark);
}
h3{
	font-size: 18px;
	margin: 0;
}
h4{
	font-size: 14px;
	margin: 0;
	color: var(--azul);
}
p, li{
	font-size: 14px;
	margin: 0;
}
ul{
	list-style-image: url(../img/check-morado.svg);
    margin: 0 0 10px;
    line-height: 1;
}
li::marker{
	font-size: 25px;
}
.check{
	list-style-image: url(../img/check-gris.svg);
    margin: 0 0 10px;
    line-height: 1;
}
.point {
    list-style-image: none;
    margin: 0 0 10px;
    line-height: 1.5;
}
.point li::marker{
	font-size: 12px;
}
.bg-gris{
	background: var(--gris);
}
.ribbon {
    width: 0;
    height: 0;
    border-top: 245px solid transparent;
    border-right: 40px solid var(--gris);
    border-bottom: 245px solid transparent;
    transform: rotate(180deg);
    margin: 0 0 0 -1px;
}
.first{
	display: grid;
	grid-template-columns: 50% 50%;
}
.first h4{
	color: #fff;
}
.first .bg-gris h4{
	color: #000;
}
.first .bg-gris{
	padding: 20px 0 20px 20px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.first .bg-deg{
	border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: linear-gradient(var(--deg1), var(--deg2));
    color: #fff;
}
form{	
	padding: 20px;
}
.flex{
	display: flex;
}
.center{
	text-align: center;
}
.grid2, .new-div-grid2{
	display: grid;
	grid-template-columns: 48% 48%;
	justify-content: space-between;
    align-items: start;
}
.grid3{
	display: grid ;
    grid-template-columns: 32% 32% 32% ;
    justify-content: space-between ;
    align-items: start ;
    grid-gap: 20px 0 ;
}
.grid4{
	display: grid;
    grid-template-columns: 120px 120px 140px 120px;
    justify-content: center;
    justify-items: center;
    grid-gap: 0 5px;
    margin-top: 20px;
}
.grid4 h4{
	font-size: 12px;
}
select, input{
	width: -webkit-fill-available;
	margin-bottom: 10px;
	font-size: 14px;
	padding: 3px 5px;
	border: 1px solid #fff;
	border-radius: 5px;
	color: #000;
}
input::-webkit-input-placeholder{
	color: #999999;
}
input[type="checkbox"]{
	width: 20px;
	height: 20px;
}
.error{
	border-color: #FF0000;
	background: #FFC8C8;
	background-image: url(../img/icono-advertencia.svg);
	background-repeat: no-repeat;
	background-position: right 5px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none; 
	color: #FF0000;
}
.error::-webkit-input-placeholder{
	color: #FF0000;
}
.error-select{
	border-color: #FF0000;
	background: #FFC8C8;
	background-image: url(../img/juntos.svg);
	background-repeat: no-repeat;
	background-position: right 5px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none; 
	color: #FF0000;
}
.error-select option:selected{
	color: #FF0000;
}
label{
	font-size: 11px;
	font-weight: 600;
}
.terminos p{
	font-size: 9px;
}
select {
	background-image: url(../img/flecha.svg);
	background-repeat: no-repeat;
	background-position: right 5px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none; 
}
select::-ms-expand {
	display: none;
}
.btn{
	background: #DA0080;
	border: 1px solid #640080;
	border-radius: 5px;
	width: 200px;
	height: 32px;
	font-size: 18px;
	cursor: pointer;
	color: #fff;
	font-weight: 600;
}
.btn:hover{
	background: #FA00C8;
}
.btn:focus, .btn:active{
	background: #96007D;
}
.aseguradoras{
	display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffffbf;
    padding: 12px 5px;
    border-radius: 5px;
    margin: 10px auto 20px;
    width: 90%;
}
.box-azul{
	padding: 15px;
    background: var(--azul);
    color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.box-dark{
	padding: 10px;
    background: var(--dark);
    color: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin: 0;
}
.flex4{
	display: grid;
	grid-template-columns: 22% 22% 22% 22%;
	justify-content: space-between;
	width: 90%;
	margin: auto;
}
.bg-light{
	padding: 10px 30px;
	background: var(--light);
}
.div-btn{
	height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer{
	padding: 10px;
    background: var(--dark);
    color: #fff;
}
.footer p, .footer a{
	font-size: 10px;
	color: #fff;
}
.footer .flex{
	display: flex;
    justify-content: center;
    grid-gap: 25px;
}
.movil{
	display: none;
}
i{
	display: none;
}
.h2-tittle{
	margin: 0;
	background: var(--azul);
	color: #fff;
	padding: 10px 30px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}
.box{
	padding: 15px 30px 25px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
.flex3{
	display: grid;
    grid-template-columns: 42% 42% 15%;
    justify-content: space-between;
}
.pt{
	padding: 10px 0;
}
.flexing{
	display: flex;
	grid-gap: 25px;
	align-items: center;
}
.flex5{
	display: grid;
	grid-template-columns: 18% 18% 18% 18% 18%;
	justify-content: space-between;
}
#img2{
	position: absolute;
	margin: 0 85px;
}
.div-img{
	display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.section-movil{
	padding: 20px 40px;
}


.section-one {
	padding: 0px 40px !important;
}
.new-table {
	margin-top: 20px;
	align-items: center;
	justify-content: center;
}
.new-table {
    margin: 20px;
    overflow-x: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.table th,
.table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.table th {
    background-color: var(--azul);
    color: #fff;
}
.table tr:hover {
    background-color: #f1f1f1;
}
.table img {
    display: block;
    margin: 0 auto;
}
.table td.text-center {
    text-align: center;
}
.fw-bold {
	font-weight: bold;
}
.text-center {
	text-align: center !important;
}
.form-input, .form-select {
	padding: 7px 0px;
}
.table {
	overflow-x: auto;
}
.new-div-desk {
	justify-content: center;
	align-items: center;
	text-align: center;
}
.notas img{
	object-fit: cover;
}
.linked{
	cursor: pointer;
}
.linked:hover{
	transform: scale(1.1);
}
.btnslide{
		width: 100%;
	    display: grid;
	    grid-template-columns: 5% 5%;
	    justify-content: center;
	    margin: 20px 0;
	    justify-items: center;
	}
	.w3left, .w3right{
	    width: 32px;
	    height: 32px;
	    background: var(--morado);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: #fff;
	    border-radius: 100%;
	    cursor: pointer;
	}
	.footerp .home{
		display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	}
	.footerp a{
		text-decoration: none;
	    color: #fff;
	    font-size: 12pt;
	    line-height: 1.5;
	}
	.footerp a:hover{
		color: var(--morado);
	}
	.footer4{
		display: grid;
	    grid-template-columns: 10% 30% 30% 30%;
	    background: var(--dark);
	    padding: 20px;
	    color: #fff;
	}
	.footer-isologotipo{
		background: url(https://segurointeligente.mx/src/img/logo-footer.svg);
		background-repeat: no-repeat;
    	background-position: right;
	}
	.footerp .copy{
		font-size: 8pt;
	}
	.gridFooter{
		display: flex;
	    justify-content: flex-start;
	    grid-gap: 20px;
	}


@media (max-width: 820px){
	.section-one {
		padding: 0px 20px !important;
	}
	.desk{
		display: none;
	}
	.movil{
		display: block;
	}
	.first, .flex3 {
	    grid-template-columns: 100%;
	}
	#img{
		width: 100%;
	}
	#img2{
		width: -webkit-fill-available;
		position: initial;
	}
	.head{
		padding: 20px;
	}
	section{
		padding: 12px 0;
	}
	h1 {
	    font-size: 18px;
	}
	h2 {
	    font-size: 18px;
	}
	h3 {
	    font-size: 16px;
	}
	select, input {
	    font-size: 20px;
    	padding: 8px 5px;
	}
	.first .bg-gris{
		display: grid;
        grid-template-columns: 40% 60%;
        padding: 5px 10px;
        border-radius: 0;

	}
	.box-azul, .box-dark, .bg-light {
	    padding: 20px;
	    border-radius: 0;
	}
	.first .bg-deg {
	    border-top-right-radius: 0;
	    border-bottom-right-radius: 0;
	}
	.flex {
	    flex-direction: column;
	    align-items: center;
	}
	.ribbon {
	    border-top: 188px solid transparent;
	    border-bottom: 188px solid transparent;
	    transform: rotate(-90deg);
	    margin-top: -169px;
    	margin-bottom: -135px;
	}
	.first .grid3 {
    	grid-template-columns: 100%;
	    grid-gap: 0;
	}
	.grid2, .flex4, .grid3, .flex5, .new-div-grid2 {
	    grid-template-columns: 100%;
	}
	.grid3{
		grid-gap: 5px 0;
		justify-content: start;
	}
	.terminos{
		flex-direction: row;
		margin-bottom: 20px;
	}
	.btn {
	    width: -webkit-fill-available;
	    font-size: 20px;
	    padding: 8px 5px;
	    height: 40px;
	}
	.p-movil{
		padding: 20px;
	}
	.footer .flex{
		flex-direction: row;
	}
	ul {
	    padding: 0 15px;
	}
	.aseguradorasM{
		height: 32px;
	}
	.aseguradorasM > ul {
    width: 100%;
    list-style: none;
    }
 
 .aseguradorasM   ul > li {
	    width: 30%;
	    list-style-type: none;
	    position: absolute;
	    padding: 0;
	    opacity: 0;
	    text-align: center;
	    transition: 1s opacity;
	    background: transparent;
	    margin: -3px 0;
	    text-align: right;
    }

 .show {
        opacity: 1!important;
    }
    .white{
    	background: #404040 !important;
    	width: 20px !important;
    	border-radius: 15px !important;
    }
    .w3-badge {
	    height: 8px ;
	    width: 8px ;
	    padding: 0 ;
	    display: flex ;
	    background: #BFBFBF ;
	    border-radius: 100% ;
	}
	.spans{
		display: flex !important;
	    justify-content: center !important;
	    align-items: center !important;
	    grid-gap: 5px !important;
	}
	.btn-slide{
		width: 100% !important;
	    display: grid !important;
	    grid-template-columns: 10% 50% 10% !important;
	    justify-items: center !important;
	    justify-content: space-between !important;
	    margin: 20px 0 !important;
	}
	.w3-left, .w3-right{
	    width: 32px !important;
	    height: 32px !important;
	    background: var(--morado) !important;
	    display: flex !important;
	    justify-content: center !important;
	    align-items: center !important;
	    color: #fff !important;
	    border-radius: 100% !important;
	    margin-top: -160px !important;
	}
	.btnslide {
	    grid-template-columns: 20% 20%;
	}
	i{
		display: inline;
		font-size: 20px;
	    font-style: normal;
	    font-weight: 900;
	    color: var(--morado);
	}
	.w3-hide{
		display: none;
	}
	.w3-show{
		display: block;
	}
	.div-btn {
	    height: 100%;
	}
	.h2-tittle {
	    border-top-right-radius: 0;
	    border-top-left-radius: 0;
	}
	#astrid-auto, #preguntas{
		width: 100px;
	}
	.flexing-reverse{
		flex-direction: column-reverse!important;
	}
	.section-movil{
		padding: 10px 20px;
	}
	.mySlides, .mySlides1, .mySlides2{
		padding: 0px 40px !important;
	}
	.flexing {
	    flex-direction: column;
	}
	.div-img {
	    align-items: center;
	    margin-top: 15px;
	}
	.div-img img{
		width: 100px;
	}
	.box {
	    border-bottom-right-radius: 0;
	    border-bottom-left-radius: 0;
	}
	ul{
    	line-height: 1.5;
	}
	li::marker{
		font-size: 20px;
	}
	.home{
		display: none!important;
	}
	.footer4{
		grid-template-columns: 100%;
		text-align: center;
	}
	.footerp a {
	    font-size: 14pt;
	}
}

@media (max-width: 576px) {
	.movil-grid2-row {
		display: grid !important;
        grid-template-columns: 48% 48% !important;
        justify-content: space-between !important;
        align-items: start !important;
	}
	.div-width {
		width: 100% !important;
		grid-column: 1 / -1 !important;
	}
	.new-table {
		margin-top: 20px !important;
		margin: 0px 0px;
		overflow-x: auto;
	}
}