br{
    clear:both;
}

.planos{
	width: 100%;
	display: block;
	align-content: space-between;
	align-items: center;
	padding: 7px;
	overflow-x:hidden ;
	margin-top:1%;
}

.planos .cartao{
	height: 85vh;
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 255, .2),0 0 50px -15px rgba(0, 0, 255, .1);
	float: left;
	margin-bottom: 5%;
	margin-left: 6.5%;
	padding: 10px;
	overflow: hidden;
}

.planos .cartao:hover{
	box-shadow: 0 0 20px 0 rgba(255, 0, 0, .2),0 0 50px -15px rgba(255, 0, 0, .2);
}

.cartao a{
	color: unset;
	text-decoration: none;
}

.cartao .add{
	width: 200px;
	height: 200px;
	background: transparent;
	overflow: hidden;
	top: 67.5%;
	margin-left:-1.2%;
	position: absolute;
	overflow: hidden!important;
	display: block;
}


.cartao .add span{
	position: absolute;
	width: 220px;
	padding: 10px 0;
	color: #fff;
	text-align: center;
	font-family: poppins;
	background: #3399ff;
	top: 25px;
	left: -60px;
	transform: rotate(-45deg);	
}

.hab .add{
	top: 163%;
}

.sombras:before,.sombras:after{
	content: "";
	width: 7px;
	height: 7px;
	background: #3300ff;
	position: absolute;
	overflow: hidden!important;
	display: block;
}

.sombras:before{
	top: 0;
	left: 120px;
}

.sombras:after{
	top: 120px;
	left: 0;
}


.risco .sombras:before,.risco .sombras:after{
	background: #8b0000!important;
}

.risco span{ 
	background: #ff5e13!important;
}

.habit span{
	background: #fe5a1d!important;
}

.habit .sombras:before,.habit .sombras:after{
	background: #9e6700!important;
}


.cartao a img{
	width: 200px;
	margin: auto;
	display: block;
}

.outros_ct a img{
    width:150px;
}

.cartao blockquote{
    display:block;
    margin-top:-20px;
}

.cartao blockquote h2{
	width: 100%;
	height: 2px;
	background: #3399ff;
}

.cartao blockquote{
	text-align: center;
}

.cartao blockquote h2:before{
	font-family: poppins,sans-serif;
	font-size: 15pt;
	font-weight: 700;
	text-align: center;
	align-items: center;
	color: #3399ff;
	background: #fff;
	position: relative;
	top: -20px;
	padding: 10px;
}

.sg_terc:before{
	content: 'Seguro Autómovel contra Terceiros';
	
}

.sg_risco:before{
	content: 'Seguro Automóvel Danos Proprios';
	
}

.sg_viagem:before{
	content: 'Seguro de Viagem';
}

.sg_saude:before{
	content: 'Seguro de Saúde';
}

.sg_act:before{
	content: 'Seguro de Acidente de Trabalho';
}

.sg_htc:before{
	content: 'Seguro de Multirricos';
}

.cartao legend p{
	font-family:poppins;
	text-align: center;
	font-size: 11pt;
	color: #333;
	margin-top: 7%;
	position: relative;
}

.cartao ul{
	list-style: none;
	padding: 0;
	margin: auto;
	width: 100%;
}

.cartao ul li{
	display: block;
	text-align: center;
}

.cartao .aut li span{
    font-size:13pt;
}


.plano_periodo li span,.plano_utentis li span{
	font-family: poppins;
	font-size: 11pt;
	font-weight: 400;
	color: #3399ff;
	text-align: center;
	margin-top: -1%;
	display: block;
}

.plano_utentis li span{
	font-size: 13pt;
	margin-top: 2%;
}

.plano_periodo li p{
	font-family: poppins;
	font-size: 10pt;
	font-weight: normal;
	color: #333;
	margin-top: -1%;
}


.cartao button{
	font-family: poppins;
	border: none;
	border: 2px solid #3399ff;
	border-radius: 8px;
	background: transparent;
	height: 45px;
	width: 80%;
	margin: auto;
	margin-top: 6%;
	display: block;
}

.cartao button:hover{
	background: #3399ff;
	color: #fff;
}

.cartao button{
	position: absolute;
	width: 20%;
	top: 133%;
	margin-top: 5%;
	margin-left: 2%;
	display: block;
}

.outros_ct button{
	top: 228%;
}

@media (max-width: 1366px){
	.cartao{
		width:25%;
	}
}

@media (max-width: 1020px){
	.cartao{
		width:30%;
	}
}

@media (max-width: 678px){
	.cartao{
		width: 95%;
		margin-left:2.5%!important;
	}
	
	.cartao button{
	    width:90%!important;
	    position:relative!important;
	}
	
	.cartao .add{
	    top:unset!important;
	    left:4%!important;
	    position:absolute!important;
	    margin-top:-18px!important;
	}
}