/*!
########### NOTICE!! DO NOT COPY ! ########### 

*/

::selection{color:#fff;background:rgba(47,125,225,0.98)}
::-moz-selection{color:#fff;background:rgba(47,125,225,0.98)}
::-o-selection{color:#fff;background:rgba(47,125,225,0.98)}
::-webkit-selection{color:#fff;background:rgba(47,125,225,0.98)}
::-ms-selection{color:#fff;background:rgba(47,125,225,0.98)}


html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }  
a:focus,a:active,button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,select::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner{border:0;outline:none;outline-width:0;}
*:focus {outline: none;}
[contenteditable="true"]:focus{outline: none;}
  

.transition-in {
  -webkit-animation: fade-in ease-in;
  animation: fade-in ease-in;
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.transition-out {
  opacity: 1;
  -webkit-animation: fade-out ease-out;
  animation: fade-out ease-out;
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }
 

/* ================================ 
Modal Menu
=================================== */
.hoverdivbck:hover  {background-color:rgba(50,55,60,0.1) !important;}
 
.MMmenu .modal { -webkit-backdrop-filter: blur(30px);backdrop-filter: blur(30px);-moz-backdrop-filter: blur(30px);-webkit-animation: fadeIn 0.4s ;-moz-animation: fadeIn 0.4s ;animation: fadeIn 0.4s; z-index:1234567890;
/* Replace when backdrop-filter is supported by Firefox */ background-image: -moz-linear-gradient(top right, rgba(246,247,248,.9), rgba(246,247,248,.95)); }
/* Images under nav 
-------------------------------------------------- */

/* Images under nav 
-------------------------------------------------- */
.navbar-wrapper{position:absolute;top:0;right:0;left:0;z-index:20}
.navbar-wrapper .container{padding-right:0;padding-left:0}
.navbar-wrapper .navbar{padding-right:15px;padding-left:15px}
@media (min-width: 768px) {
.navbar-wrapper{margin-top:0px}
.navbar-wrapper .container{padding-right:15px;padding-left:15px;}
.navbar-wrapper .navbar{padding-right:0;padding-left:0;border-radius:0px}
}
@media only screen and (max-width: 767px) {
.navbar-wrapper{height:100%;padding:0}
}
@media (max-width:767px) { .navbar-wrapper .container, .navbar-wrapper .navbar {padding-left:0px; padding-right:0px;width:100%;}} 
 
/*  
-------------------------------------------------- */
  

/* Give a img a grey color
-------------------------------------------------- */

.portogreyimg, .greytrans { height: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:.9;}
.portogreyimg:hover, .greytrans:hover { -webkit-filter:none; filter:none; } 



@keyframes slow-spin {from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.slow-spin50 { -webkit-animation: slow-spin 50s infinite linear; animation: slow-spin 50s infinite linear; }
.slow-spin100 { -webkit-animation: slow-spin 100s infinite linear; animation: slow-spin 100s infinite linear; }
.slow-spin150 { -webkit-animation: slow-spin 150s infinite linear; animation: slow-spin 150s infinite linear; }

@keyframes slow-spincc {from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
.slow-spin50cc{-webkit-animation:slow-spincc 50s infinite linear;animation:slow-spincc 50s infinite linear;}
.slow-spin100cc{-webkit-animation:slow-spincc 100s infinite linear;animation:slow-spincc 100s infinite linear;}
.slow-spin150cc {-webkit-animation:slow-spincc 150s infinite linear;animation:slow-spincc 150s infinite linear;}


@keyframes ImgPuls {from { transform: none; }50% { transform: scale(1.2); }to { transform: none; }} 
.heartpuls {animation: ImgPuls .5s infinite;transform-origin: center;  }


 

/* Responsive images
-------------------------------------------------- */
img {display: inline-block;height: auto;max-width: 100%;}
.img-thumbnail{padding:4px;line-height:1.42857143;background-color:transparent ;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}
.img-thumbnail:hover{background-color: rgba(255, 255, 255, 0.7);border:1px solid #dedede;}
.img-circle{border-radius:50%} 


 


/* Animate
-------------------------------------------------- */
@keyframes abbdcolors {75%{fill: #7cc120;}25%{fill: #ff1160;}50%{fill: #ab62d6;}100%{fill: #2f7de1;}} 
.abbd1  { transition: fill 1s ease; fill: #2f7de1; -webkit-animation: abbdcolors 100s ease infinite;-moz-animation: abbdcolors 100s ease infinite;-o-animation: abbdcolors 100s ease infinite;animation: abbdcolors 100s ease infinite;}
.abbd1:hover  {  transition: fill 1s ease; fill:#2f7de1; -webkit-animation: none 20s ease infinite;-moz-animation: none 20s ease infinite;}

@keyframes bg-bdf {0%{background-position:93% 0%}50%{background-position:0% 100%}100%{background-position:93% 0%}}
#cd-bck{background: linear-gradient(45deg, #7cc120, #ff1160, #ab62d6, #2f7de1);background-size: 1000% 1000%;-webkit-animation: bg-bdf 100s ease infinite;-moz-animation: bg-bdf 100s ease infinite;-o-animation: bg-bdf 100s ease infinite;animation: bg-bdf 100s ease infinite;} 
.cd-bck{background: linear-gradient(45deg, #00bcb4, #57c9e8, #ff5959, #ffca1e, #7cc120, #ff1160, #ab62d6, #2f7de1);background-size: 1000% 1000%;-webkit-animation: bg-bdf 80s ease infinite;-moz-animation: bg-bdf 80s ease infinite;-o-animation: bg-bdf 80s ease infinite;animation: bg-bdf 80s ease infinite;}  
.cd-text-bck{background: linear-gradient(45deg, #7cc120, #ff1160, #ab62d6, #2f7de1);-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;} 

#cd-bck2{background: linear-gradient(45deg, #2f7de1, #7CC120, #ff1160, #ffbf3b);background-size: 1000% 1000%;-webkit-animation: bg-bdf 100s ease infinite;-moz-animation: bg-bdf 100s ease infinite;-o-animation: bg-bdf 100s ease infinite;animation: bg-bdf 100s ease infinite;}
#cd-text-bck2{background: linear-gradient(45deg, #2f7de1, #7CC120, #ff1160, #ffbf3b);-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}  

#cd-bck3{background: linear-gradient(45deg,  #ffbf3b, #ff1160, #57c9e8, #2f7de1);background-size: 1000% 1000%;-webkit-animation: bg-bdf 100s ease infinite;-moz-animation: bg-bdf 100s ease infinite;-o-animation: bg-bdf 100s ease infinite;animation: bg-bdf 100s ease infinite;}  
#cd-text-bck3{background: linear-gradient(45deg,  #ffbf3b, #ff1160, #57c9e8, #2f7de1);-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}  





/* -------------------------------------------------------------------------- */

/* Keyframes for the fadeIn */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


 

/* -------------------------------------------------------------------------- */  
.typewriter font {
  display: inline-block; 
  overflow: hidden; /* Ensures the content is not revealed until the animation */ 
  border-right: 0.2em solid #ff1160; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing:-.02em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #ff1160 }
}

 

/* Menu Icon
-------------------------------------------------- */
@-webkit-keyframes rotate {100%{-webkit-transform:rotate(0deg);}60%{-webkit-transform: rotate(0deg);}50%{-webkit-transform: rotate(360deg);}0%{-webkit-transform: rotate(360deg);}}
.rotating360inf{-webkit-animation-name:rotate;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:3s;}

 
 

/* tooltip are nice 
-------------------------------------------------- */
.tooltip-inner { 
	max-width: 300px;
    padding: 8px;
	background: linear-gradient(45deg,   #7cc120, #ff1160, #ab62d6, #2f7de1);background-size: 1000% 1000%;-webkit-animation: bg-bdf 20s ease infinite;-moz-animation: bg-bdf 20s ease infinite;-o-animation: bg-bdf 20s ease infinite;animation: bg-bdf 20s ease infinite;
} 
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: rgba(60,70,80,1);
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: rgba(60,70,80,1);
}








/* Footer
-------------------------------------------------- */
.footerlight {background-color:var(--bs-body-bg);}
.footerdark {background-color:#000000}

.footerdesign  { padding-bottom:100px; }
.footerdesign a {text-decoration: none; }
.footerdesign a:hover {text-decoration: underline; }

.greytrans { height: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:.9;}
.greytrans:hover { -webkit-filter:none; filter:none; }


@keyframes ImgwwPuls {from { transform: none; }50% { transform: scale(1.2); }to { transform: none; }} 
.heartdesignpulse {animation: ImgwwPuls .5s infinite;transform-origin: center;}
.heartdesignpulse {background: linear-gradient(45deg, #00bcb4, #57c9e8, #ff5959, #ffca1e, #7cc120, #ff1160, #ab62d6, #2f7de1);-webkit-background-clip: text; -webkit-text-fill-color: transparent;}  


.social-container i { margin:0px 18px 18px 2px;} 
@media only screen and (max-width: 768px) {.social-container i { margin:0px 21px 21px 2px;} }


.premiumqualitydesign { width:100px; height:100px;display:block; background-image: url(/images/logo/premium.quality.design.logofbw.svg);background-repeat: no-repeat;background-position: center center ;cursor: pointer}
.premiumqualitydesign:hover, premiumqualitydesign:active, premiumqualitydesign:focus { width:100px; height:100px; background-image: url(/images/logo/premium.quality.design.logof.svg);background-repeat: no-repeat;background-position: center center ;}
.betterbydesign { width:60px; height:85px;display:block; background-image: url(/images/logo/better.by.design.logofbw.svg);background-repeat: no-repeat;background-position: center center ;cursor: pointer}
.betterbydesign:hover, betterbydesign:active, betterbydesign:focus { width:60px; height:85px; background-image: url(/images/logo/better.by.design.logof.svg);background-repeat: no-repeat;background-position: center center ;}
.testedbycreator { width:60px; height:60px;display:block; background-image: url(/images/logo/tested.by.creator.logofbw.svg);background-repeat: no-repeat;background-position: center center ;cursor: pointer}
.testedbycreator:hover, testedbycreator:active, testedbycreator:focus { width:60px; height:60px; background-image: url(/images/logo/tested.by.creator.logof.svg);background-repeat: no-repeat;background-position: center center ;}

  

 

 /*  
-------------------------------------------------- */
.TheMainCardHG .card:hover {
	  background: linear-gradient(45deg, rgba(47,125,225,.02),rgba(60,80,100,.01));background-size: 1000% 1000%;-webkit-animation: bg-bdf 10s ease infinite;-moz-animation: bg-bdf 10s ease infinite;-o-animation: bg-bdf 10s ease infinite;animation: bg-bdf 10s ease infinite;
 }
 
 
.TheStudioCardHG .card:hover {
	  background: linear-gradient(45deg, rgba(255,17,95,.5), rgba(171,98,214,.5), rgba(255,89,89,.5), rgba(255,202,30,.5));background-size: 1000% 1000%;-webkit-animation: bg-bdf 10s ease infinite;-moz-animation: bg-bdf 10s ease infinite;-o-animation: bg-bdf 10s ease infinite;animation: bg-bdf 10s ease infinite;
 }
 




/* card-stack-system
-------------------------------------------------- */
.card-lg {
	-webkit-box-shadow: 0 0 42px rgba(60,70,80,.1);
	box-shadow: 0 0 42px rgba(60,70,80,.1);
	border-radius: 2rem!important;
	border:none;
}
  
.card-flush {
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none
}
.card-flush .card-body {
	padding-left: 0;
	padding-right: 0
}

.card-img-slider {
	height: 100%;
	width: 100%
}
.card-img-slider * {
	height: inherit!important;
	width: inherit!important
}

.card-stack {
	display: grid;
	grid-auto-rows: 1fr
}
.card-stack-item {
	position: -webkit-sticky;
	position: sticky;
	top: 140px;
	
}
.card-stack-item>.card {
	height: 100%;
	-webkit-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center
}
.card-stack-item>.card>.row {
	height: inherit
}
@media (max-width:992px) {
.card-stack {
	display: inherit!important;  
} 
.card-stack-item {
	position: inherit!important;
	
}
.card-stack-item>.card {
	height: inherit!important; 
} 
}
 
  


/* colored shapes
-------------------------------------------------- */
.shape {
	position: absolute;
	pointer-events: none;
	background-color: currentColor;
}
.shape-img {
	position: inherit;
	overflow: hidden
}
.shape-img>svg {
	position: inherit;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2)
}
.shape-fluid-x {
	width: 100%
}
.shape-fluid-x .shape-img {
	width: inherit
}
.shape-top {
	bottom: 100%
}
.shape-top .shape-img {
	bottom: inherit
}
.shape-top .shape-img>svg {
	bottom: 0;
	-webkit-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center
}
.shape-bottom {
	top: 100%
}
.shape-bottom .shape-img {
	top: inherit
}
.shape-bottom .shape-img>svg {
	top: 0;
	-webkit-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	transform-origin: bottom center
}



 

 
/*  DIV Background images
-------------------------------------------------- */
.bbd-background-image {background-repeat: no-repeat;background-size: cover;height: 100%;width: 100%;}
@media (max-width: 576px) {.bbd-background-image{display:block;height: 300px;}}


 

/* article
-------------------------------------------------- */ 
.bbd-styled-article p  { font-size:20px;font-weight:300;line-height:34px;margin-top:32px;margin-bottom:32px;}

.bbd-styled-article p a , .gradlinkunder a{ 
text-decoration: none;
transition: background-position .3s linear,box-shadow .15s linear 0s;
background-image: linear-gradient(to right,rgba(255, 202, 30,0.9),rgba(255, 17, 96,0.7),rgba(124, 193, 32,0.3));
background-size: 400%;
background-repeat: no-repeat;
background-position: 0 24px;
cursor: pointer;
}

 
.bbd-styled-article p a:hover , .gradlinkunder a:hover {
background-image: linear-gradient(to right,rgba(255, 17, 96,0.7),rgba(124, 193, 32,0.3),rgba(255, 202, 30,0.99));
background-position: 100% 2px;
}


.bbd-styled-article-fullpage { width: 100vw; position: relative; margin-left: -50vw;  left: 50%; transition: 0.3s;  }