/* ==========================================================
   ORION HOSTING
   PREMIUM COMPARISON
   PARTE 1 - ESTRUTURA E CARTÕES
========================================================== */

/* ==========================================================
   CONTAINER
========================================================== */

#order-premium_comparison{

    color:#555;

}

/* ==========================================================
   GRELHA DOS PLANOS
========================================================== */

#order-premium_comparison .price-table-container{

    margin:30px auto;

    text-align:center;

}

#order-premium_comparison .price-table-container > ul{

    margin:0;

    padding:0;

}

/* ==========================================================
   CADA PLANO
========================================================== */

#order-premium_comparison .price-table-container > ul > li{

    display:inline-block;

    vertical-align:top;

    width:300px;

    margin:15px;

    padding:0 !important;

    background:none !important;

}

/* ==========================================================
   CARTÃO
========================================================== */

#order-premium_comparison .price-table{

    background:#ffffff;

    border:1px solid #d8dde6;

    border-radius:12px;

    overflow:hidden;

    box-shadow:none;

    transition:border-color .20s ease;

}

/* Hover muito discreto */

#order-premium_comparison .price-table:hover{

    border-color:#bfc7d2;

}

/* ==========================================================
   REMOVER EFEITOS DO TEMPLATE ORIGINAL
========================================================== */

#order-premium_comparison .price-table-container > ul > li{

    background-image:none !important;

    box-shadow:none !important;

}

#order-premium_comparison .price-table *{

    box-shadow:none;

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width:991px){

    #order-premium_comparison .price-table-container > ul > li{

        width:100%;

        max-width:360px;

        margin:15px auto;

        display:block;

    }

}

/* parte 2 */

/* ==========================================================
   CABEÇALHO DOS PLANOS
========================================================== */

#order-premium_comparison .price-table .top-head{

    padding:28px 24px 22px;

    text-align:center;

    border:none;

}

/* ==========================================================
   CORES DOS PLANOS
========================================================== */

#order-premium_comparison li.plan-lite .top-head{

    background:#2475ff;

}

#order-premium_comparison li.plan-standard .top-head{

    background:#5a26c9;

}

#order-premium_comparison li.plan-premium .top-head{

    background:#fa4a2d;

}

#order-premium_comparison li.plan-business .top-head{

    background:#21262b;

}

/* ==========================================================
   ÍCONE
========================================================== */

#order-premium_comparison .plan-icon{

    width:72px;

    height:72px;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.20);

}

#order-premium_comparison .plan-icon i{

    color:#ffffff;

    font-size:32px;

}

/* ==========================================================
   NOME DO PLANO
========================================================== */

#order-premium_comparison .top-area h4{

    margin:14px 0 6px;

    color:#ffffff;

    font-size:24px;

    font-weight:600;

    line-height:1.25;

}

/* ==========================================================
   TAGLINE
========================================================== */

#order-premium_comparison .top-area p{

    margin:0;

    color:rgba(255,255,255,.82);

    font-size:14px;

    font-weight:400;

}

/* ==========================================================
   BADGE
========================================================== */

#order-premium_comparison .popular-plan{

    display:inline-block;

    margin:16px auto 0;

    padding:6px 14px;

    border-radius:20px;

    background:rgba(255,255,255,.18);

    border:1px solid rgba(255,255,255,.22);

    color:#ffffff;

    font-size:11px;

    font-weight:600;

    letter-spacing:.8px;

    text-transform:uppercase;

}

/* parte 3 preço + botão */


/* ==========================================================
   PARTE 3
   PREÇO + BOTÃO
========================================================== */


/* ==========================================================
   PREÇO
========================================================== */

#order-premium_comparison .price-table-container .price-table .price-area{

    margin-top:18px;

    text-align:center;

}

#order-premium_comparison .price-table-container .price-table .price{

    margin:0;

    padding:0;

    color:#ffffff;

    font-size:34px;

    font-weight:600;

    line-height:1.1;

}

#order-premium_comparison .price-table-container .price-table .price span{

    font-size:34px;

    font-weight:600;

    color:#ffffff;

}

#order-premium_comparison .price-table-container .price-table .price small{

    display:block;

    margin-top:6px;

    font-size:13px;

    font-weight:400;

    opacity:.85;

}


/* ==========================================================
   BOTÃO
========================================================== */

#order-premium_comparison .price-table-container .price-table .order-button{

    display: inline-block;
    margin: 16px auto 0;
    padding: 10px 20px;
    border-radius: 30px;
/*
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
*/ 
 color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: none;
}


#order-premium_comparison .price-table-container .price-table .order-button:hover{

    background-color: red;

    border-color:rgba(255,255,255,.30);

    color:#ffffff;

}


/* ==========================================================
   CORES DOS BOTÕES
========================================================== */

#order-premium_comparison .price-table-container li.plan-lite .price-table .order-button{
	background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
	width:72%;
	margin: 25px auto 0;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 500;
}
#order-premium_comparison .price-table-container li.plan-lite .price-table .order-button:hover{
    background: rgba(255,255,255,.22);
	border: 1px solid white;
	transform:translateY(-1px);
}


#order-premium_comparison .price-table-container li.plan-standard .price-table .order-button{
	background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
	width:72%;
	margin: 25px auto 0;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 500;
}
#order-premium_comparison .price-table-container li.plan-standard .price-table .order-button:hover{
    background: rgba(255,255,255,.22);
	border: 1px solid white;
	transform:translateY(-1px);
}

#order-premium_comparison .price-table-container li.plan-premium .price-table .order-button{
	background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
	width:72%;
	margin: 25px auto 0;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 500;
}
#order-premium_comparison .price-table-container li.plan-premium .price-table .order-button:hover{
    background: rgba(255,255,255,.22);
	border: 1px solid white;
	transform:translateY(-1px);
}

#order-premium_comparison .price-table-container li.plan-business .price-table .order-button{
	background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
	width:72%;
	margin: 25px auto 0;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 500;
}
#order-premium_comparison .price-table-container li.plan-business .price-table .order-button:hover{
    background: rgba(255,255,255,.22);
	border: 1px solid white;
	transform:translateY(-1px);
}


/* ==========================================================
   HOVER
========================================================== */


/* parte 4 */ 

/* ==========================================================
   LISTA DE CARACTERÍSTICAS
========================================================== */

#order-premium_comparison .price-table-container .price-table ul{

    margin:0;

    padding:22px 24px;

    list-style:none;

    background:#ffffff;

}

#order-premium_comparison .price-table-container .price-table ul li{

    display:flex;

    align-items:center;

    padding:11px 0;

    margin:0;

    color:#4b5563;

    font-size:14px;

    line-height:1.45;

    border-bottom:1px solid #edf0f3;

}

#order-premium_comparison .price-table-container .price-table ul li:last-child{

    border-bottom:none;

}


/* ==========================================================
   ÍCONE DA FEATURE
========================================================== */

#order-premium_comparison .price-table-container .price-table ul li .feature-icon{

    flex:0 0 18px;

    margin-right:10px;

    color:#22c55e;

    font-size:13px;

    text-align:center;

}


/* ==========================================================
   BADGE "MAIS POPULAR"
========================================================== */

#order-premium_comparison .price-table-container .price-table .popular-plan{

    display:inline-block;

    margin:16px auto 0;

    padding:6px 14px;

    border-radius:30px;

    background:rgba(255,255,255,.18);

    border:1px solid rgba(255,255,255,.22);

    color:#ffffff;

    font-size:11px;

    font-weight:600;

    letter-spacing:.6px;

    text-transform:uppercase;

}


/* ==========================================================
   INCLUDED FEATURES
========================================================== */

#order-premium_comparison .includes-features{

    margin-top:50px;

}

#order-premium_comparison .includes-features .head-area span{

    display:inline-block;

    padding:10px 24px;

    border-radius:8px;

    background:#5a26c9;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

}

#order-premium_comparison .includes-features ul{

    margin-top:25px;

}

#order-premium_comparison .includes-features ul li{

    padding:8px 0;

    color:#555;

}

.feature-check{
    width:14px;
    margin-right:1px;
}


/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width:991px){

    #order-premium_comparison .price-table-container > ul > li{

        display:block;

        width:100%;

        max-width:380px;

        margin:20px auto;

    }

    #order-premium_comparison .price-table{

        width:100%;

    }

}