:root {
    --cgray: #D9D9D9;
    --cbgray: #4D4D4D;
    --clgray: #999;
}

.bg-cgray { background-color: var(--cgray)!important;}
.text-cbgray {color: var(--cbgray)!important;}
.text-cgray {color: var(--cgray)!important;}
.text-clgray {color: var(--clgray)!important;}

p {font-family: Suisse;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;}

@font-face {
    font-family: CasaAlma;
    src: url(/fonts/CASAALMAScript_V02.otf);
}

@font-face {
    font-family: Suisse;
    src: url(/fonts/Suisse.otf);
}

.casa-alma { font-family: CasaAlma;}
.suisse { font-family: Suisse;}

p {font-size: 30px;font-style: normal;font-weight: 300;line-height: 43px;letter-spacing: 1.2px;}
h3 {font-size: 40px;font-style: normal;font-weight: 300;line-height: 78px;}
html, body {overflow-x: hidden;}


.burger-menu {width: 100vw;height: 100vh;position: fixed;z-index: 9999;overflow-y: auto;font-family: CasaAlma;display: none;margin-top: 0px;}
.burger-menu p {font-family: Suisse;}
.burger-menu.show {display: block;z-index: 99999;}
.burger-menu ul, img.logo {padding-left: 5rem;}
.burger-menu ul li a {text-decoration: none;color:var(--cgray);font-size: 30px;font-style: normal;font-weight: 400;line-height: 59px;position: relative;}
.burger-menu ul li a.active::after {content: url(/assets/images/burguer-active.png);position: absolute;left: -2rem;margin-top:-.9rem;}
.burger-menu ul li:hover > a::after {content: url(/assets/images/burguer-active.png);position: absolute;left: -2rem;margin-top:-.9rem;}
.burger-menu ul li{margin-bottom: 43px;}
.burger-menu #btn-close {width: 5rem;height: 5rem;border: none;font-size: 5rem;font-weight: 600;}

.draw-tools-bar {border-radius: 110px;border: 0.6px solid #FFF;background: #FFF;box-shadow: 2px 4px 40px 0px rgba(36, 36, 36, 0.12), 0px 14px 24px 0px rgba(0, 0, 0, 0.06) inset;}
.draw-tools-bar a img{margin-left: .5rem;margin-right: .5rem;transition: all .1s linear;}
.draw-tools-bar a:hover > img {transform: scale(1.3);}

.btn-capture {transition: all .5s ease-in-out;}
.btn-capture:hover img {transform: scale(1.1);}

.bg { background-position: center !important;background-repeat: no-repeat !important;background-size: cover!important;}
.filter {position: relative;z-index: 1;}
.filter::after {content: "";width: 100%;height: 100%;position: absolute;background: rgba(0, 0, 0, 0.4);z-index: 0;}

.btn-blur {text-decoration: none;border-radius: 50px;background: rgba(255, 255, 255, 0.24);backdrop-filter: blur(3px); padding: 10px 35px;margin-right: 2rem;color:var(--cgray)}
.btn-black {border-radius: 50px;background: black;box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.10);color:var(--cgray);padding: 18px 30px;}

.publish {border-radius: 30px;}
.publish .category {font-size: 16px;font-style: normal;font-weight: 300;line-height: normal;}
.publish .title {font-size: 32px;font-style: normal;font-weight: 300;line-height: 36px;}
.publish .author {font-size: 16px;font-style: normal;font-weight: 300;line-height: normal;}

.right {right: 0px;}
.left { left:0;}
.bottom { bottom: 0px;}


/***** ANIMATIONS SECTION ******/

.pull-tops{ transform: translateY(-50px);}
.push-downs{ transform: translateY(50px);}
#home-animation-container .item { transition: all .5s linear;}
#scroll-notice {transition: all 1s ease-in-out;}
#scroll-notice.fade-out {transform: translateY(5rem);opacity:0;}

#toolbar {transition: all 1s ease-in-out;}
#toolbar.fade-out {transform: translateY(5rem);opacity:0;}

nav {transition:1s all ease-in-out;}
nav.hidden-navbar { margin-top: -5rem;}
nav {z-index: 9999!important;}


#canvas{cursor: crosshair;}


@media screen and (max-width:600px) {
    .special-text {font-size: 20px!important;}
}