2005 lines
33 KiB
CSS
2005 lines
33 KiB
CSS
/* Main CSS file */
|
|
|
|
@font-face{
|
|
font-family:Gilroy;
|
|
font-style:normal;
|
|
font-weight:600;
|
|
src:url(/assets/fonts/Gilroy-Light.otf) format("truetype");
|
|
font-display:auto
|
|
|
|
}
|
|
|
|
|
|
@font-face{
|
|
font-family:Gilroy;
|
|
font-style:normal;
|
|
font-weight:400;
|
|
src:url(/assets/fonts/Gilroy-ExtraBold.otf) format("truetype");
|
|
font-display:auto
|
|
|
|
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
/* font-family: Gilroy; */
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
p.code {
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
.code.error {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.code.warning {
|
|
color: #BF8F00;
|
|
}
|
|
|
|
.code.success {
|
|
color: #07943d;
|
|
}
|
|
|
|
#details {
|
|
border: 1px solid black;
|
|
margin-bottom: 20px;
|
|
padding: 10px;
|
|
background: #ececec;
|
|
}
|
|
|
|
.description{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.description.tasks{
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.description > b {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.bg-light {
|
|
background-color: #bec1c3 !important;
|
|
}
|
|
|
|
a {
|
|
color: rgb(220, 35, 140);
|
|
}
|
|
|
|
a:hover {
|
|
color: rgb(220, 35, 140);
|
|
|
|
}
|
|
|
|
.idx {
|
|
color: #1540de;
|
|
}
|
|
|
|
/* Style the tab */
|
|
.tab {
|
|
overflow: hidden;
|
|
border: 1px solid #ccc;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
/* Style the buttons that are used to open the tab content */
|
|
.tab button {
|
|
background-color: inherit;
|
|
float: left;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 14px 16px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Change background color of buttons on hover */
|
|
.tab button:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
/* Create an active/current tablink class */
|
|
.tab button.active {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
/* Style the tab content */
|
|
.tabcontent {
|
|
display: none;
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
}
|
|
|
|
.tabcontent.default {
|
|
display: block;
|
|
}
|
|
|
|
#Errors {
|
|
}
|
|
|
|
#Exceptions {
|
|
}
|
|
|
|
#Warnings {
|
|
}
|
|
|
|
#Full {
|
|
}
|
|
|
|
.text-smaller {
|
|
font-size:0.75rem;
|
|
}
|
|
.spacer {
|
|
margin-top:2rem;
|
|
}
|
|
p {
|
|
font-weight:600;
|
|
}
|
|
h3 {
|
|
margin-top:10px;
|
|
font-weight:100;
|
|
}
|
|
|
|
h3.meetingbyusers {
|
|
display: inline-block;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.m-l-1rem {
|
|
margin-left:1rem;
|
|
}
|
|
.m-l-3p {
|
|
margin-left:2%
|
|
}
|
|
|
|
.m-t-3p {
|
|
margin-top:2%
|
|
}
|
|
|
|
.p-l-2p {
|
|
padding-left:2%
|
|
}
|
|
|
|
.p-t-5p {
|
|
padding-top:5%;
|
|
}
|
|
|
|
.page-container {
|
|
padding:2rem;
|
|
}
|
|
|
|
|
|
.p-t-10p {
|
|
padding-top:10%;
|
|
}
|
|
form.timer {
|
|
float: left;
|
|
width: 220px;
|
|
display: block;
|
|
}
|
|
form.timer #duration {
|
|
display: none;
|
|
}
|
|
|
|
input#picture {
|
|
font-weight:600;
|
|
border:0px;
|
|
}
|
|
|
|
#messages { list-style-type: none; margin: 0 0 0 10px; padding: 0; font-weight:600;}
|
|
#messages li { padding: 5px 10px; }
|
|
#cube { padding: 10px;}
|
|
#control {
|
|
display: flex;
|
|
padding-left: 10px;
|
|
}
|
|
#left-control {
|
|
width: 220px;
|
|
}
|
|
#startcounter {
|
|
padding: 6px 10px;
|
|
border: 1px solid black;
|
|
margin: 8px;
|
|
font-size: 28px;
|
|
float: left;
|
|
min-width: 164px !important;
|
|
text-align: center;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
border-radius:0.5rem;
|
|
}
|
|
|
|
#stopcounter {
|
|
padding: 6px 10px;
|
|
border: 1px solid black;
|
|
margin: 8px;
|
|
font-size: 28px;
|
|
float: left;
|
|
min-width: 164px !important;
|
|
text-align: center;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
border-radius:0.5rem;
|
|
display: none;
|
|
}
|
|
|
|
#right-control {
|
|
|
|
}
|
|
|
|
#right-control > .header {
|
|
height: 56px;
|
|
margin-top: 12px;
|
|
font-weight:600;
|
|
}
|
|
|
|
#right-control h3 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#counter {
|
|
display: none;
|
|
}
|
|
img.left-control-logo {
|
|
margin-right: 10px;
|
|
height: 40px
|
|
}
|
|
span.left-control-title {
|
|
font-size: 24px;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
span.right-control-title {
|
|
font-size: 24px;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
span.currentplan {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
span.duration {
|
|
padding: 6px 10px;
|
|
border: 1px solid black;
|
|
margin: 8px;
|
|
font-size: 28px;
|
|
float: left;
|
|
min-width: 74px !important;
|
|
text-align: center;
|
|
border-radius:0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon {
|
|
width:24px;
|
|
height:24px;
|
|
background-size:cover;
|
|
display:inline-block;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.icon-copy-content {
|
|
margin: -5px 0px 0px 12px;
|
|
background-image: url(/assets/icons/copy-content.svg);
|
|
}
|
|
|
|
.icon-mic-fill {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: -5px 0px -5px 12px;
|
|
background-image: url(/assets/icons/mic-fill.svg);
|
|
filter: invert(69%) sepia(56%) saturate(245%) hue-rotate(144deg) brightness(100%) contrast(90%);
|
|
}
|
|
|
|
.icon-mic-fill:hover {
|
|
filter: invert(36%) sepia(38%) saturate(550%) hue-rotate(164deg) brightness(90%) contrast(92%);
|
|
}
|
|
|
|
.icon-mic-mute {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: -5px 0px -5px 12px;
|
|
background-image: url(/assets/icons/mic-mute-fill.svg);
|
|
}
|
|
|
|
.icon-alarm {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin: -5px 0px -5px 12px;
|
|
background-image: url(/assets/icons/bell.svg);
|
|
filter: invert(39%) sepia(85%) saturate(1598%) hue-rotate(338deg) brightness(92%) contrast(94%);
|
|
|
|
}
|
|
|
|
|
|
.icon-alarm:hover {
|
|
filter: invert(17%) sepia(41%) saturate(4694%) hue-rotate(326deg) brightness(103%) contrast(105%);
|
|
}
|
|
.icon-eye-slash {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(/assets/icons/eye-slash.svg);
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 8px;
|
|
}
|
|
|
|
.icon-close {
|
|
background-image: url(/assets/icons/x.svg);
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.icon-copy-content:hover,
|
|
.icon-copy-content:focus,
|
|
.icon-chat-fill:hover,
|
|
.icon-chat-fill:focus {
|
|
filter: invert(82%) sepia(29%) saturate(7334%) hue-rotate(114deg) brightness(92%) contrast(101%);
|
|
}
|
|
|
|
|
|
|
|
|
|
img.copymeetingid {
|
|
margin: -5px 0px 0px 12px;
|
|
background-image: url(/assets/icons/copy-content.svg);
|
|
}
|
|
|
|
#app-square {
|
|
position:relative;
|
|
text-align:center;
|
|
|
|
}
|
|
|
|
|
|
.icon-copy-content:hover,
|
|
.icon-copy-content:focus {
|
|
filter: invert(82%) sepia(29%) saturate(7334%) hue-rotate(114deg) brightness(92%) contrast(101%);
|
|
}
|
|
|
|
|
|
img.copymeetingdid:active {
|
|
background-color: rgb(0, 214, 159);
|
|
}
|
|
li.user {
|
|
list-style-type: none;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
span.organizer {
|
|
margin-left: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: 1.5rem;
|
|
background-color: rgb(0, 214, 159);
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* room */
|
|
|
|
.line-left {
|
|
border-left:1px dotted gray
|
|
}
|
|
|
|
.m-t-10 {
|
|
margin-top:10px;
|
|
}
|
|
|
|
.logo {
|
|
width:100px;
|
|
}
|
|
|
|
/* Form fields */
|
|
|
|
.form-style-2{
|
|
margin: 0 auto;
|
|
max-width: 500px;
|
|
padding: 20px 12px 10px 20px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
p.errorMsg {
|
|
margin: 4px 0px 0px 100px;
|
|
color: #FF3D3D;
|
|
}
|
|
|
|
p.infoMsg {
|
|
margin: 4px 0px 0px 100px;
|
|
color: #000;
|
|
font-size: 10px;
|
|
display: block;
|
|
}
|
|
|
|
span.formError {
|
|
display: block;
|
|
margin: 8px 0 0 4px;
|
|
color: #FF3D3D;
|
|
}
|
|
|
|
span.formSuccess {
|
|
display: block;
|
|
margin: 8px 0 0 4px;
|
|
color: rgb(220, 35, 140);
|
|
}
|
|
|
|
.f-w-600 {
|
|
font-weight:600;
|
|
}
|
|
|
|
.f-w-400 {
|
|
font-weight:400;
|
|
}
|
|
|
|
/* Login form */
|
|
.login-container{
|
|
margin-top: 5%;
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
.icon-array {
|
|
display:flex;
|
|
}
|
|
.login-container-subscribe{
|
|
margin-top: 15%;
|
|
}
|
|
|
|
.login-container-subscribe-content {
|
|
margin-top:20%;
|
|
}
|
|
.login-form-1{
|
|
padding: 5%;
|
|
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
.login-form-1 h3{
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.login-container form{
|
|
padding: 10%;
|
|
}
|
|
.btnSubmit {
|
|
width:auto;
|
|
border-radius: 0.25rem;
|
|
padding: 0.5rem 2rem 0.5rem 2rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: rgb(220, 35, 140);
|
|
}
|
|
|
|
.btnSmall {
|
|
padding: 0rem 1rem 0rem 1rem;
|
|
}
|
|
|
|
.p-t-5px {
|
|
padding-top:5px;
|
|
padding-left:0px;
|
|
}
|
|
span.inviteBtn {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
span.inviteBtnTop {
|
|
opacity: 0;
|
|
/* padding-top:5px; */
|
|
padding-left:1rem;
|
|
|
|
}
|
|
|
|
.btnSubmit.speaker
|
|
{
|
|
width: auto;
|
|
min-width: 24px;
|
|
border-radius: 0.4rem;
|
|
padding: 0px 6px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: rgb(220, 35, 140);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.btnReset
|
|
{
|
|
width: 25%;
|
|
border-radius: 0.5rem;
|
|
padding: 1.5%;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: #CCC;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.login-form-1 .ForgetPwd{
|
|
color: rgb(220, 35, 140);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#laptopimg {
|
|
width: 100%;
|
|
padding-top:5%;
|
|
}
|
|
|
|
label {
|
|
font-weight:600;
|
|
}
|
|
|
|
.col-md-4.qube {
|
|
/* min-width: 220px; */
|
|
}
|
|
|
|
.statsHead {
|
|
background-color: #DADADA;
|
|
}
|
|
|
|
#croppie {
|
|
/*height: 340px; */
|
|
}
|
|
|
|
.row.image > img {
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
margin: 0 0 15px 15px;
|
|
}
|
|
|
|
.announcement {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
background: rgb(220, 35, 140);
|
|
color:#333;
|
|
|
|
z-index: 9999;
|
|
}
|
|
|
|
.announcement a {
|
|
color:#fff;
|
|
}
|
|
|
|
.announce {
|
|
text-align: center;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sentSuccess {
|
|
display: block;
|
|
}
|
|
|
|
.sentError {
|
|
display: block;
|
|
color: #ff0000;
|
|
}
|
|
|
|
p.nousers {
|
|
opacity: 0;
|
|
width: 300px;
|
|
}
|
|
|
|
|
|
/* Modal */
|
|
|
|
.modal-header {
|
|
background-color: rgb(220, 35, 140);
|
|
color: #fff;
|
|
}
|
|
|
|
.modal-body {
|
|
padding-top: 3rem;
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
|
|
/* Controller css */
|
|
|
|
.p-3rem {
|
|
padding:4rem;
|
|
}
|
|
/* nav */
|
|
|
|
#controller .drag {
|
|
-webkit-app-region: drag;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#controller .no-drag {
|
|
-webkit-app-region: no-drag;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* controller content */
|
|
|
|
#controller .right-body h3 {
|
|
font-size:1rem;
|
|
}
|
|
|
|
#controller .profile .form-control {
|
|
font-size: 0.8rem;
|
|
height: calc(1.0em + .75rem + 2px);
|
|
}
|
|
|
|
#controller .preset .form-control {
|
|
font-size: 0.8rem;
|
|
height: calc(1.0em + .75rem + 2px);
|
|
}
|
|
|
|
#controller .speakerpreset .form-control {
|
|
font-size: 0.8rem;
|
|
height: calc(1.0em + .75rem + 2px);
|
|
}
|
|
|
|
#controller .btnSubmit {
|
|
padding: 0.2rem 0.4rem;
|
|
font-size:14px;
|
|
}
|
|
|
|
#controller .btnReset {
|
|
padding: 0.2rem 0.4rem;
|
|
}
|
|
|
|
|
|
|
|
section .section-title {
|
|
text-align: center;
|
|
color: #007b5e;
|
|
text-transform: uppercase;
|
|
}
|
|
#tabs{
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
#tabs h6.section-title{
|
|
color: #000;
|
|
}
|
|
|
|
#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
|
|
color:rgb(220, 35, 140);
|
|
background-color: transparent;
|
|
border-color: transparent transparent #f3f3f3;
|
|
border-bottom: 5px solid !important;
|
|
font-size: 1rem;
|
|
|
|
}
|
|
#tabs .nav-tabs .nav-link {
|
|
border: 0px solid transparent;
|
|
border-top-left-radius: .25rem;
|
|
border-top-right-radius: .25rem;
|
|
color:rgb(220, 35, 140);
|
|
font-size: 1rem;
|
|
}
|
|
#controller a.nav-item.nav-link {
|
|
color:rgba(0,0,0,.5)
|
|
}
|
|
|
|
#controller a.nav-item.nav-link:hover{
|
|
color:#000;
|
|
}
|
|
|
|
#controller a.nav-item.nav-link:enabled {
|
|
color:rgb(220, 35, 140);
|
|
}
|
|
|
|
#controller .active {
|
|
color:#000!important;
|
|
}
|
|
|
|
.form-rows-together {
|
|
display:flex;
|
|
}
|
|
|
|
nav .active{
|
|
color:#000;
|
|
}
|
|
|
|
|
|
|
|
#controller p.nousers {
|
|
padding-top:4rem;
|
|
opacity: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color:#1A1A1A;
|
|
}
|
|
|
|
#controller .page-container {
|
|
padding:1rem;
|
|
}
|
|
|
|
#controller .hide-in-controller {
|
|
display:none
|
|
}
|
|
|
|
#controller .login-image-padding {
|
|
padding-top:3rem;
|
|
}
|
|
|
|
#controller .login-form-1{
|
|
box-shadow:none;
|
|
}
|
|
|
|
#controller .login-container {
|
|
margin-top:12%!important;
|
|
}
|
|
|
|
#controller #login-button {
|
|
width:100%!important;
|
|
}
|
|
#controller .navbar {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#controller .text-bottom-corner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 1rem;
|
|
}
|
|
/* plans secton */
|
|
|
|
.pricing-card.active {
|
|
border-top: 5px solid #f46f7c;
|
|
}
|
|
|
|
.pricing-card {
|
|
border-top: 5px solid transparent;
|
|
border-radius: 6px;
|
|
padding: 24px 45px 30px;
|
|
background-color: #fff;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
margin-bottom: 30px;
|
|
|
|
}
|
|
|
|
.pricing-card .pricing-list {
|
|
padding-left:1rem;
|
|
line-height: 0.75rem;
|
|
}
|
|
.pricing-card .card-content .pricing-list li i {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 18px;
|
|
color: #1f1f1f;
|
|
border-radius: 50%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
top: 4px;
|
|
|
|
}
|
|
|
|
[class*='btn--toggle-'] .slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
background-color: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
[class*='btn--toggle-'] span {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.51px;
|
|
text-transform: uppercase;
|
|
color: #4eab08;
|
|
background-color: rgba(78, 171, 8, 0.14);
|
|
padding: 0 15px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* checkout page */
|
|
|
|
.checkbox > input.form-control {
|
|
width: 20%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.checkbox > label {
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* CSS from Timeqube.online */
|
|
|
|
/*=== Media Query ===*/
|
|
/* ///////////////////////////
|
|
Header Area
|
|
//////////////////////////// */
|
|
@media (min-width: 768px) {
|
|
.site-header {
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.site-header {
|
|
padding-top: 15px;
|
|
}
|
|
}
|
|
|
|
.site-header .main-menu {
|
|
margin: 0 -18px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu > li > a {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.4px;
|
|
color: #1f1f1f;
|
|
padding: 18px;
|
|
}
|
|
}
|
|
|
|
.main-menu > li > a:hover {
|
|
color: rgb(220, 35, 140);
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu .has-dropdown {
|
|
position: relative;
|
|
z-index: 99;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu .has-dropdown:hover .menu-dropdown {
|
|
top: 100%;
|
|
opacity: 1;
|
|
pointer-events: visible;
|
|
}
|
|
}
|
|
|
|
.main-menu .has-dropdown:hover .menu-dropdown p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu .menu-dropdown {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
top: 110%;
|
|
position: absolute;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
min-width: 530px;
|
|
-webkit-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.03);
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.03);
|
|
border-radius: 8px;
|
|
border: 1px solid #e5e5e5;
|
|
background-color: #ffffff;
|
|
padding: 30px 30px 0px;
|
|
z-index: 99;
|
|
opacity: 0;
|
|
-webkit-transition: opacity .4s,top .4s;
|
|
transition: opacity .4s,top .4s;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu .menu-dropdown .single-item {
|
|
-webkit-box-flex: calc(50% - 20px);
|
|
-ms-flex: calc(50% - 20px);
|
|
flex: calc(50% - 20px);
|
|
max-width: calc(50% - 20px);
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu .menu-dropdown .single-item:hover a h3 {
|
|
color: rgb(220, 35, 140);
|
|
}
|
|
}
|
|
|
|
.main-menu .menu-dropdown .single-item a h3 {
|
|
color: #1f1f1f;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.4px;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
padding: 0;
|
|
}
|
|
|
|
.main-menu .menu-dropdown .single-item a p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.main-menu .menu-dropdown .single-item p {
|
|
color: #878b90;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.35px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.main-menu .menu-dropdown .single-item:nth-child(odd) {
|
|
margin-right: 40px;
|
|
}
|
|
}
|
|
|
|
.header-btns {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.header-btns {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.header-btns .btn-1 {
|
|
color: #666666;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -1px;
|
|
margin: 0 14px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.header-btns .btn-1 {
|
|
margin: 0 17px;
|
|
}
|
|
}
|
|
|
|
.header-btns .btn-2 {
|
|
width: 137px;
|
|
height: 40px;
|
|
border-radius: 3px;
|
|
background-color: rgb(220, 35, 140);
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.header-btns .btn-2 {
|
|
margin: 0 17px;
|
|
}
|
|
}
|
|
|
|
.header-btns .btn-2 a {
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
/* Mobile Menu / Mean Menu Reset */
|
|
.mobile-menu.mean-container .mean-bar {
|
|
position: static;
|
|
float: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .meanmenu-reveal {
|
|
text-indent: 0 !important;
|
|
position: relative;
|
|
font-size: 21px;
|
|
color: #1f1f1f;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
height: 42px;
|
|
width: 42px;
|
|
margin-left: auto;
|
|
margin-right: -24px;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-expand {
|
|
font-size: 0 !important;
|
|
padding: 0 !important;
|
|
height: 42px;
|
|
width: 42px;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-expand:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
font: normal normal normal 32px/1 'ep';
|
|
content: "\ea1a";
|
|
font-size: 15px;
|
|
color: #7c7373;
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
-webkit-transition: -webkit-transform .3s;
|
|
transition: -webkit-transform .3s;
|
|
transition: transform .3s;
|
|
transition: transform .3s, -webkit-transform .3s;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-expand.mean-clicked {
|
|
-webkit-transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-expand:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav {
|
|
float: none;
|
|
margin-top: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
border: 0;
|
|
z-index: 888;
|
|
background: transparent;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .main-menu {
|
|
border: 1px solid #e5e5e5;
|
|
-webkit-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.03);
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.03);
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .menu-item > a {
|
|
border-bottom: 0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .menu-item.mean-last {
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .menu-dropdown {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .menu-dropdown .single-item {
|
|
padding-bottom: 0;
|
|
border-top: 1px solid #e5e5e5;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .menu-dropdown {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav .menu-dropdown p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav ul li {
|
|
float: none;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.mobile-menu.mean-container .mean-bar .mean-nav ul li a {
|
|
color: #000;
|
|
float: none;
|
|
text-transform: initial;
|
|
}
|
|
|
|
/* ///////////////////////////
|
|
Hero Area
|
|
//////////////////////////// */
|
|
.shapes img {
|
|
width: 100%;
|
|
max-width: initial;
|
|
}
|
|
|
|
.hero-area {
|
|
padding: 36px 0 50px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.hero-area {
|
|
padding: 115px 0 110px;
|
|
}
|
|
}
|
|
|
|
.hero-content {
|
|
text-align: left;
|
|
}
|
|
|
|
.hero-content h1 {
|
|
margin-bottom: 19px;
|
|
color: #1f1f1f;
|
|
font-weight: 700;
|
|
letter-spacing: -4px;
|
|
font-size: 45px;
|
|
line-height: 50px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.hero-content h1 {
|
|
font-size: 53px;
|
|
line-height: 60px;
|
|
margin-bottom: 24px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.hero-content h1 {
|
|
font-size: 60px;
|
|
line-height: 65px;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.hero-content h1 {
|
|
padding-right: 78px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.hero-content h1 {
|
|
padding-right: 0px;
|
|
font-size: 55px;
|
|
line-height: 62px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.hero-content h1 {
|
|
font-size: 60px;
|
|
padding-right: 35px;
|
|
}
|
|
}
|
|
|
|
.hero-content p {
|
|
color: #222f3f;
|
|
font-size: 21px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.4px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.hero-form {
|
|
padding: 30px 0 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.hero-form {
|
|
padding: 30px 75px 0 0;
|
|
}
|
|
}
|
|
|
|
.hero-form .form-group {
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.hero-form .form-group {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.hero-form .form-group input {
|
|
height: 60px;
|
|
color: #666666;
|
|
border-radius: 5px;
|
|
background: rgba(18, 144, 164, 0.07);
|
|
padding-left: 17px;
|
|
border-color: transparent;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.hero-form .form-group input {
|
|
margin-right: 10px;
|
|
height: 60px;
|
|
width: calc(100% - 187px);
|
|
}
|
|
}
|
|
|
|
.hero-form .form-group input::-webkit-input-placeholder {
|
|
color: #878b90;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.9px;
|
|
}
|
|
|
|
.hero-form .form-group input:-ms-input-placeholder {
|
|
color: #878b90;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.9px;
|
|
}
|
|
|
|
.hero-form .form-group input::-ms-input-placeholder {
|
|
color: #878b90;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.9px;
|
|
}
|
|
|
|
.hero-form .form-group input::placeholder {
|
|
color: #878b90;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.9px;
|
|
}
|
|
|
|
.hero-form .form-group button {
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
letter-spacing: -1.12px;
|
|
border-radius: 3px;
|
|
background-color:rgb(220, 35, 140);
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
height: 50px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.hero-form .form-group button {
|
|
margin-top: 0px;
|
|
height: 60px;
|
|
width: 177px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.hero-form .form-text {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.32px;
|
|
line-height: 36px;
|
|
color: #878b90;
|
|
}
|
|
|
|
.hero-form .form-text a {
|
|
color: rgb(220, 35, 140);
|
|
}
|
|
|
|
.hero-form .form-text a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hero-image {
|
|
margin-bottom: 30px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.hero-image img {
|
|
max-width: 105%;
|
|
}
|
|
}
|
|
|
|
|
|
/* ///////////////////////////
|
|
Pricing Section
|
|
//////////////////////////// */
|
|
.pricing-section {
|
|
padding-top:2rem;
|
|
background-color: #30393b;
|
|
position: relative;
|
|
}
|
|
|
|
.pricing-section .shape {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
-webkit-transform: translateY(-85%);
|
|
transform: translateY(-85%);
|
|
}
|
|
|
|
.pricing-section .section-title {
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.pricing-section .section-title h2 {
|
|
color: #fff;
|
|
}
|
|
|
|
.pricing-section .section-title p {
|
|
color: #878b90;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.pricing-section {
|
|
padding-top: 2rem;
|
|
padding-bottom: 120px;
|
|
}
|
|
.pricing-section .section-title {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.pricing-card {
|
|
border-top: 5px solid transparent;
|
|
border-radius: 6px;
|
|
padding: 24px 45px 30px;
|
|
background-color: #fff;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.pricing-card .card-head {
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.pricing-card .card-head h6 {
|
|
color: #666666;
|
|
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.43px;
|
|
line-height: 32px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.pricing-card .card-head h2 .small-title {
|
|
color: #1f1f1f;
|
|
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pricing-card .card-head h2 .big-txt {
|
|
color: #1f1f1f;
|
|
|
|
font-size: 50px;
|
|
font-weight: 400;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.pricing-card .card-head h2 .big-txt:before {
|
|
position: absolute;
|
|
}
|
|
|
|
.pricing-card .card-head h2 .month {
|
|
color: #1f1f1f;
|
|
letter-spacing: -0.68px;
|
|
}
|
|
|
|
.pricing-card .card-head p {
|
|
font-weight: 600;
|
|
letter-spacing: -0.6px;
|
|
line-height: 28px;
|
|
color: #666666;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pricing-card .card-content .pricing-list li {
|
|
color: #1f1f1f;
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
.pricing-card h2 {
|
|
font-size:1rem;
|
|
}
|
|
.pricing-card .card-content .pricing-list li i {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 18px;
|
|
color: #1f1f1f;
|
|
border-radius: 50%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
top: 4px;
|
|
}
|
|
|
|
.pricing-card .card-content .pricing-list li.disable-opt {
|
|
text-decoration: line-through;
|
|
color: #8e8e8e;
|
|
}
|
|
|
|
.pricing-card .card-content .pricing-list li.disable-opt i {
|
|
color: #8e8e8e;
|
|
}
|
|
|
|
.pricing-card .card-content p {
|
|
font-weight: 600;
|
|
letter-spacing: -0.6px;
|
|
line-height: 28px;
|
|
color: #666666;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pricing-card .card-badge {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 45px;
|
|
background-color: #f46f7c;
|
|
border-radius: 500px;
|
|
height: 26px;
|
|
color: #fff;
|
|
width: 83px;
|
|
text-align: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.pricing-card .card-badge {
|
|
width: 60px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.pricing-card .card-badge {
|
|
width: 60px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pricing-card .card-badge {
|
|
width: 83px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.pricing-card .card-badge {
|
|
width: 83px;
|
|
}
|
|
}
|
|
|
|
.pricing-card .card-btn {
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
padding-top: 33px;
|
|
padding-bottom: 5px;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.pricing-card .card-btn .btn--primary {
|
|
font-size: 18px;
|
|
letter-spacing: -1.12px;
|
|
padding: 0 37px;
|
|
height: 50px;
|
|
}
|
|
|
|
.pricing-card .card-btn .btn--primary:hover .btn--primary:focus .btn--primary:active {
|
|
background-color: #059a74;
|
|
color:#fff!important;
|
|
}
|
|
|
|
.pricing-card.active {
|
|
border-top: 5px solid #f46f7c;
|
|
}
|
|
|
|
.btn--toggle-pricing {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.btn--toggle-pricing p {
|
|
color: #fff;
|
|
}
|
|
|
|
.btn--toggle-pricing p:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.pricing-extra-info {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.pricing-extra-info p {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
letter-spacing: -0.32px;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.pricing-extra-info p {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.pricing-extra-info p {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
.pricing-extra-info span {
|
|
color: #878b90;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.pricing-extra-info a {
|
|
color: #fff;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.pricing-extra-info a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.pricing-extra-info {
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
[class*='btn--toggle-'] {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding-bottom: 35px;
|
|
}
|
|
|
|
[class*='btn--toggle-'] p {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
padding: 0 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
[class*='btn--toggle-'] span {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.51px;
|
|
text-transform: uppercase;
|
|
color: #4eab08;
|
|
background-color: rgba(78, 171, 8, 0.14);
|
|
padding: 0 15px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .badge--discount {
|
|
height: 26px;
|
|
line-height: 1;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
text-align: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
width: 83px;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 25px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
background-color: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 5px;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
background-color: rgb(220, 35, 140);
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
[class*='btn--toggle-'] input:checked + .slider {
|
|
background-color: #fff;
|
|
border: 1px solid #e5e5e5;
|
|
}
|
|
|
|
[class*='btn--toggle-'] input:focus + .slider {
|
|
-webkit-box-shadow: 0 0 1px #fff;
|
|
box-shadow: 0 0 1px #fff;
|
|
}
|
|
|
|
[class*='btn--toggle-'] input:checked + .slider:before {
|
|
-webkit-transform: translateX(21px) translateY(-50%);
|
|
transform: translateX(21px) translateY(-50%);
|
|
background-color: rgb(220, 35, 140);
|
|
}
|
|
|
|
[class*='btn--toggle-'] .slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
|
|
[class*='btn--toggle-'] .slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* pricng toggle */
|
|
.custom-tab-wrapper.monthly [data-monthly] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.custom-tab-wrapper.monthly [data-monthly]:before {
|
|
content: attr(data-monthly);
|
|
visibility: visible;
|
|
display: inline-block;
|
|
}
|
|
|
|
.custom-tab-wrapper.yearly [data-yearly] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.custom-tab-wrapper.yearly [data-yearly]:before {
|
|
content: attr(data-yearly);
|
|
visibility: visible;
|
|
display: inline-block;
|
|
}
|
|
|
|
.green {
|
|
background-color:rgb(220, 35, 140);
|
|
}
|
|
|
|
.yellow {
|
|
background-color:yellow;
|
|
}
|
|
.red {
|
|
background-color:red;
|
|
}
|
|
/*# sourceMappingURL=style.css.map */
|
|
|
|
.p-t-30p {
|
|
padding-top:30%;
|
|
}
|
|
|
|
.p-t-20p {
|
|
padding-top:10%;
|
|
}
|
|
|
|
.p-b-3p {
|
|
padding-bottom:3%;
|
|
}
|
|
|
|
.p-b-5p {
|
|
padding-bottom:5%;
|
|
}
|
|
|
|
.p-t-5p {
|
|
padding-top:5%;
|
|
}
|
|
|
|
.p-t-3p {
|
|
padding-top:3%;
|
|
}
|
|
|
|
.btn--success {
|
|
width:10rem;
|
|
background-color: rgb(220, 35, 140);
|
|
color:#fff;
|
|
font-weight:400;
|
|
}
|
|
|
|
.btn--success a:hover {
|
|
color:#fff!important;
|
|
}
|
|
|
|
.m-t-some {
|
|
margin-top:2rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn--plans {
|
|
letter-spacing: -1.12px;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
border-radius: 5px;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
height: 50px;
|
|
}
|
|
|
|
.btn--primary {
|
|
background-color: rgb(220, 35, 140);
|
|
color: #FFF;
|
|
}
|
|
|
|
.btn--primary:hover {
|
|
background-color: rgba(11, 105, 58, 0.8);
|
|
color:#fff;
|
|
}
|
|
|
|
.btn-outlined--primary {
|
|
background-color: transparent;
|
|
color: rgb(220, 35, 140);
|
|
border: 2px solid rgb(220, 35, 140);
|
|
}
|
|
|
|
.btn-outlined--primary:hover {
|
|
background-color: rgb(220, 35, 140);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn--orange {
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
background-color: #ee5a24;
|
|
}
|
|
|
|
.btn--orange:hover {
|
|
color: #fff;
|
|
background-color: rgba(238, 90, 36, 0.8);
|
|
}
|
|
|
|
.btn-outlined--white {
|
|
color: #fff;
|
|
border: 2px solid #fff;
|
|
}
|
|
|
|
.btn-outlined--white:hover {
|
|
background-color: #fff;
|
|
color: #000;
|
|
border-color: #fff;
|
|
}
|
|
|
|
.btn--white {
|
|
color: rgb(220, 35, 140);
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.btn--white:hover {
|
|
color: rgb(220, 35, 140);
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.btn--green {
|
|
color: #ffffff;
|
|
background-color: #4eab08;
|
|
}
|
|
|
|
.btn--green:hover {
|
|
background-color: rgba(78, 171, 8, 0.8);
|
|
color: #ffff;
|
|
}
|
|
|
|
|
|
/* checkout */
|
|
.nomt {
|
|
margin-top:0!important;
|
|
}
|
|
|
|
.nomb {
|
|
margin-bottom:0!important;
|
|
}
|
|
|
|
.m-t-1rem {
|
|
margin-top:1rem;
|
|
}
|
|
|
|
.flex-container {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
.img-stripe-branding {
|
|
margin-left: 1rem;
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.checkmark__circle {
|
|
stroke-dasharray: 166;
|
|
stroke-dashoffset: 166;
|
|
stroke-width: 2;
|
|
stroke-miterlimit: 10;
|
|
stroke: rgb(0, 214, 159);
|
|
fill:none;
|
|
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
|
|
}
|
|
|
|
.checkmark {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
stroke-width: 2;
|
|
stroke: #fff;
|
|
stroke-miterlimit:10;
|
|
box-shadow: inset 0px 0px 0px rgb(0, 214, 159);
|
|
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
|
|
}
|
|
|
|
.checkmark__check {
|
|
transform-origin: 50% 50%;
|
|
stroke-dasharray: 48;
|
|
stroke-dashoffset: 48;
|
|
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
|
}
|
|
|
|
@keyframes stroke {
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
@keyframes scale {
|
|
0%, 100% {
|
|
transform: none;
|
|
}
|
|
50% {
|
|
transform: scale3d(1.1, 1.1, 1);
|
|
}
|
|
}
|
|
@keyframes fill {
|
|
100% {
|
|
box-shadow: inset 0px 0px 0px 30px rgb(0, 214, 159);
|
|
}
|
|
}
|
|
|
|
.left-25p {
|
|
left:25%;
|
|
}
|
|
|
|
.p-r-1rem {
|
|
padding-right:1rem;
|
|
}
|
|
|
|
p.plan {
|
|
font-size:1rem;
|
|
} |