html {
    font-family: Inter,Helvetica,Arial,sans-serif;
    line-height: 1.5;
}

.layouts {
    display: grid;
    margin-left:15%;
    margin-right:15%;
    margin-top: 40px;
}



.login-option {
    font-size: 21px;
    color: #606974;
    margin-bottom: 30px;
	border-top: 1px solid #e9ecef
	padding-top: 1.5rem;
	display:flex;
	justify-content:center;
	text-decoration: none;
	align-items:center;
}
.svg-card{
	position:inherit;
	color:black;
}
a{
	text-decoration: none;
	color:black;
}

.login-option a{
	color:black !important;
}

.plans {
    margin: 60px 0 20px;
    box-sizing: border-box;
}

.plan-block {
    margin-top: 20px;
    box-sizing: border-box;
}

.plan {
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    border-radius: 4px;
    flex-direction: row;
    height: 100px;
}

.plan-image{
    padding-bottom: 15px;
    overflow: hidden;
    min-width: 170px;
    height: 100%;
    padding: 0;
    border-radius: 4px 0 0 4px;
}

.plan-content{
    display: -webkit-box;
    display: flex;
    padding: 30px;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.plan-title{
    color: #30363e;
    font-size: 18px;
    font-weight: 700;
}

.plan-desc{
    margin-top: 5px;
    font-size: 13px;
    color: #606974;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
}

.plan-action{
    margin: 15px 0;
    margin-left: auto;
}

.plan-image img{
	height: 100%;
	width: auto;
}

.btn{
    color: white !important;
    background-color: black;
    box-sizing: border-box;
    border: 0 solid #dfe2e6;
    padding: 10px;
    display: block;
    width: 150px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    cursor:pointer;
    font-size: 13px;
    font-weight: 700;
}

.gift {
    justify-content: center;
    align-items: center;
    text-align: center;
	color:black !important;
}

.svg, video {
    display: block;
    vertical-align: middle;
}

@media screen and (max-width:992px){
    .plan{
        flex-direction:column;
        height: 100%;
    }
    .plan-image{
        display:none;
    }
    .plan-title{
       text-align:center; 
    }
    .plan-desc{
        text-align:center;
    }
    .plan-content{
        flex-direction:column;
    }
    .plan-action{
        margin-left:0;
    }
    
}
