/*
Theme Name: Onboarding
Theme URI: http://wigo-media.com
Author: the WigoMedia team
Author URI: http://wigo-media.com/
Description: Onboarding.
Version: 2.1
*/


:root {
  --bs-success: #53AF2B;
  --bs-success-rgb: 83, 175, 43;
  --bs-warning: ##CCA020;
  --bs-warning-rgb: 204, 160, 32;
}

/*# Initialize #*/
html{color: #505050; font-size: 16px; font-family: Inter;}

/*# Sizing #*/
h1, .h1{font-size: 2.5rem; font-weight: 600; letter-spacing: -1px; color: var(--wp--preset--color--primary); margin-bottom: 1.5rem;}
h2, .h2{font-size: 2rem; font-weight: 600;}
h3, .h3{font-size: 1.75rem; font-weight: 600;}
h4, .h4{font-size: 1.5rem; font-weight: 600;}
h5, .h5{font-size: 1.2rem; font-weight: 600;}
h6, .h6{font-size: .75rem; text-transform: uppercase; font-weight: bold;}
.lead{font-size: 1.25rem}

/*# Colors #*/
.bg-primary{background-color: var(--wp--preset--color--primary)!important; color: #FFF}
.bg-secondary{background-color: var(--wp--preset--color--secondary)!important; color: #FFF}
.bg-light{background-color: var(--wp--preset--color--light)!important; color: #333}
.bg-dark{background-color: var(--wp--preset--color--dark)!important; color: #FFF}

.text-primary{color: var(--wp--preset--color--primary)!important;}
.text-secondary{color: var(--wp--preset--color--secondary)!important;}
.text-light{color: var(--wp--preset--color--light)!important;}
.text-dark{color: var(--wp--preset--color--dark)!important;}
.text-grey{color: var(--wp--preset--color--grey)!important;}

/*# Header #*/
header{margin-bottom: 2rem;}

/* WM MENU - Starter theme menu style */
.wm-menu{list-style: none; display: flex; padding-left: 0; margin: 0}
.wm-menu .menu-item{margin: 0;}
.wm-menu .menu-item a{text-decoration: none; color: inherit; display:inline-block; padding: .75rem 1rem;}
.wm-menu .menu-item-has-children{position: relative;}
.wm-menu .menu-item-has-children:hover > .sub-menu{display: block;}
.wm-menu .sub-menu{list-style: none; padding-left: 0; position: absolute; z-index: 100; background: #FFF;  width: 100%; min-width: 200px; max-width: 350px; left: 1rem; filter: drop-shadow(0px 4px 44px rgba(0, 109, 104, 0.30)); display: none; animation: .2s ease-in-out slidefadein;}
.wm-menu .sub-menu:before{ content: ""; display: block; width: 1rem; height: 1rem; position: absolute; top: -0.5rem; background-color: #FFF; left:2rem; transform: rotate(45deg); z-index: 100;}
.wm-menu .sub-menu .menu-item{position: relative; z-index: 101;}
.wm-menu .sub-menu .menu-item:hover{background-color: #F6F6F6}
.wm-menu .sub-menu .menu-item a{display: block; width: 100%;}
.wm-menu .menu-item-description{font-size: 0.825rem; color: #555}

/*# Background #*/
.bg-arrow{position: absolute; top: 10%; left: 0; z-index: -1;}

/*# Footer #*/
footer .footer-bottom .madeby img{height: 1em}
footer .footer-bottom .menu a{margin: 0 0.825rem 0 0}

/*# Animations #*/
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slidein {
  from { transform: translateY(-.5rem);}
  to   { transform: translateY(0);}
}
@keyframes slidefadein {
  from { transform: translateY(-.5rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/*# Responsive #*/
@media only screen and (max-width: 1399px){

}

@media only screen and (max-width: 1199px){
	
}

@media only screen and (max-width: 991px){
	
}

@media only screen and (max-width: 767px){
	.bg-arrow{top: 16%; left: 0; width: 90%; height: auto;}
}

@media only screen and (max-width: 575px){
	
}

/*# Bootstrap #*/
.cursor-p{cursor: pointer;}