@import 'slick.css?v1.00'; /* basic slide, required */
@import 'slick-theme.css?v1.00'; /* basic slide, required */
@import 'jquery.fancybox.css'; /* basic popup, required */
@import '../fonts/fonts.css'; /* custom web font */
@import 'skeleton.css?v1.00'; /* basic layout, required */
/*
Theme Name: Sharpcake
Theme URI: https://sharpcake.com/
Author: Sharpcake Team
Description: Sharpcake, October, 2019. 
Version: 1.0
License: All rights reserved
*/
/* site custom */
body {background-color: #ffffff; padding: 108px 0 0}
body.login-page {padding: 0;}
body.customer-preview {padding: 40px 0 0;}
html, body {min-height: 100vh;}
body, html, div, table, input, select, textarea, blockquote, ul, ol {font:normal 1em/1.39 'NexaB',"Helvetica Neu", serif, Helvetica, Arial;color:#3F3F3F}
b, strong {font-family: 'NexaB2';font-weight: normal}
.bl, b.bl, strong.bl {font-family: 'NexaB2'}
p + p,  p + div, div + p, p + ul, ul + p, p + ol, ol + p, p + blockquote, blockquote + p, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, h1 + div, h2 + div, h3 + div, h4 + div, h5 + div, h6 + div, h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, h2 + ul, ul + h2, h3 + ul, ul + h3, h4 + ul, ul + h4  {margin-top:20px}
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6,ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6, ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6, div + h1, div + h2, div + h3, div + h4, div + h5, div + h6, h2 + section, h3 + section, h4 + section, section + h2, section + h3, section + h4, p + iframe, iframe + p, p + hr, hr + p, h1 + hr, hr + h1, hr + h2, h2 + hr, hr + h3, h3 + hr, hr + h4, h4 + hr {margin-top: 20px}
div + [class*="grid-"], p + [class*="grid-"], [class*="grid-"] + div, [class*="grid-"] + p, div + table, table + div, form + table, table + form, form + form {margin-top: 20px}
div + p.action, section + p.action {margin-top: 40px;}
h1, h2 ,h3, h4, h5, h6 {margin: 0;line-height: 1.3;font-family:'NexaB2';font-weight: normal}
h2 {font-size:60px}
h2 + p {font-size: 22px;}
.sharp {color:#03AED1}
.cake {color:#DD1133}
em.sharp, em.cake {font-style: normal;}

section + section, main + footer, header + main, section + main, div + main, main + div, section + h2, h2 + section {margin-top: 2.1vw}
header + main.create-enter, header + main.find-enter {margin-top: 6.2vw}
header + .create-storyboard {margin-top:0;}
header.sticky {box-shadow:0 10px 10px 0 rgba(0,0,0,.05)}

.pg {max-width: 1120px}
.hide {display: none}
p.close {margin-top: 5px !important}

a {color:#3F3F3F;text-decoration: none}
a:hover {color:#000000;text-decoration:none}

.logo, a.logo.logo-min {width:149px;height: 35px;margin:0 auto;}
.logo > a, a.logo.logo-min {display:block;width: 100%;height: 100%;background: transparent url(../img/sharpcake-storyboard-logo@2x.png) center center no-repeat;font-size:0;color:rgba(0,0,0,0);background-size: auto 100%}

header.site-header {position: fixed;z-index: 20;left: 0;right: 0;top: 0;background-color: #F9F9F9 }
.fac-header > .cl.autow {padding: 25px 30px;}
.fac-header > .cl.nav-cl {text-align: center;}

.login-page .site-content.fac-login {min-height: 100vh;}
.fac-sb-heading {font-size: 22px;}

/* inputs */
input[type="text"], input[type="password"], input[type="email"], input[type="time"], input[type="date"], input[type="number"], input[type="tel"], textarea, select {display: inline-block;vertical-align: middle;padding:15px 15px 11px 15px;border-radius:4px;border:1px solid #CDCDCD;width: 100%;font-family: 'NexaB';border-width: 1px 1px 1px 13px;border-left-color: #03AED1;background-color: #ffffff;margin:0}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="time"]:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {background-color: #F2FDFF;border-color:#03AED1 }
input:focus, textarea:focus, select:focus {outline: none;}
input[type="button"], input[type="submit"], input[type="reset"], .buton {background-color: #DD1133;border:2px solid #DD1133;display: inline-block; border-radius: 4px;color: #ffffff;font-family: 'NexaB2';padding: 19px 20px 14px 20px;cursor: pointer;text-align: center;}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .buton:hover {background-color: #CB0929;text-decoration: none;color: #ffffff;}
input.error,textarea.error,select.error {border-color: #DD1133 !important}
.buton.grey {background-color: #DADADA;color: #ffffff;border-color:#DADADA}
.buton.grey:hover {background-color: rgb(185, 185, 185);border-color: rgb(185, 185, 185);}
.buton.blue {background-color:#03AED1 ;color: #ffffff;border-color:#03AED1}
.buton.blue:hover {background-color:#02a5c5 ;color: #ffffff;border-color:#02a5c5}
.fixed .buton {border-radius: 0;display: block;margin:0}
.fixed .buton.grey {color:#838383}
input.nor, .buton.nor {border-radius: 0;}

.out {padding-left: 8px;position: relative;z-index: 1;}
.out:active {z-index: 2;}
.out:before {content: "";display: block;width: 8px;height: 45px;border-radius: 3px 0 0 3px;background-color: #009CD2;position: absolute;left: 0;top:5px}
.out.red:before {background-color: #DD1133}
.out.grey:before {background-color: #EDDCCF;}
.out input[type="text"], .out input[type="password"], .out input[type="email"], .out input[type="time"], .out input[type="date"], .out input[type="number"], .out input[type="tel"], .out textarea, .out select {border-color:#CDCDCD;border-left-width: 1px;}

.full {width: 100%;}
.full.buton, input.full {text-align: center;} 

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {background-color: #ffffff !important;border-color:#03AED1}

label.tag-anime {position: absolute; z-index: 2;left: 14px;top:12px;color:#8C8C8C;text-transform: uppercase;visibility: hidden;opacity: 0;}
label.tag-anime.focused {top:-12px;opacity: 1;left:0;visibility: visible;opacity: 1;font-size:10px;}

::-webkit-input-placeholder {color: #D6D6D6;line-height: 1.69;vertical-align:middle;}
::-moz-placeholder {color: #D6D6D6;line-height: 1.69;vertical-align:middle;}
:-ms-input-placeholder {color: #D6D6D6;line-height: 1.69;vertical-align:middle;}
:-moz-placeholder {color: #D6D6D6;line-height: 1.69;vertical-align:middle;}
::placeholder {color: #D6D6D6;line-height: 1.69;vertical-align:middle;}

.black ::placeholder {color: #000000;}

.create-storyboard-form {padding: 6.2vw 0;background:#FBFBFB;border:1px solid #DADADA;border-width: 1px 0;}
.create-storyboard-form .black input {font-size:20px;border-left-color:#DD1133}

/* user links */

.user-links em.img {display:inline-block;width: 58px;height: 58px;overflow: hidden;border-radius: 50%;display: inline-block; vertical-align: middle;text-align: center;}
.user-links em.img img {width: auto;height: 100%;object-fit: cover;}

/* nav */

nav ul, nav ul > li {margin: 0;padding: 0;}
nav ul > li {display: inline-block;vertical-align: middle;}
nav ul > li > a {display: block;padding: 10px 20px;text-transform: uppercase;}
nav ul > li > a:hover {text-decoration: none;}

.site-header nav, .site-header nav ul, .site-header nav ul > li, .site-header nav ul > li > a {height: 100%;}
.site-header nav ul > li > a {white-space: nowrap;position: relative;z-index: 1;padding: 10px 35px;}
.site-header nav ul > li > a:before, .site-header nav ul > li > a:after {width: 0;height: 100%;display: inline-block;vertical-align: middle;content:"";font-size:0}
.site-header nav ul > li > a:after {width: auto;position: absolute;z-index: 2;left: 50%;right: 50%;bottom: 0;height: 5px;background-color: transparent;}
.site-header nav ul > li > a.active, .site-header nav ul > li > a:hover {color:#03AED1}
.site-header nav ul > li > a:hover:after,.site-header nav ul > li > a.active:after {left: 25%;right: 25%;background-color: #03AED1;}

/* form */

.form-elements form .taged {position: relative;z-index: 1;}
.form-elements form div.phone-box {z-index: 5;}
.form-elements form p:last-child {text-align: left;padding-left: 0}
p.fixed {position: fixed;z-index: 10;left:0;right: 0;bottom:0;margin:0}
p.fixed input {width: 100%;border-radius: 0;display: block;margin:0}
.creat-sb, input.creat-sb {font-size:30px;font-family: 'NexaB';}

/* sumo select */

.SumoSelect {border-radius: 4px;border: 1px solid #CDCDCD;  border-width: 1px 1px 1px 13px;  border-left-color: #03AED1;  background-color: #ffffff;position: relative;z-index: 1;}
.SumoSelect.error {border-color:#CB0929}
.SumoSelect select {display: none;}
.SumoSelect .optWrapper {position: absolute;z-index: 1;top:120%;right: 0;left:0;margin:0 !important;background-color: #ffffff;border:1px solid #CDCDCD;max-height: 180px;overflow:auto;overflow-x: hidden;padding: 20px;opacity: 0;visibility: hidden;}
.SumoSelect.open {box-shadow: 0 0 10px 2px rgba(3,174,209,.25);border-color:#03AED1}
.SumoSelect.open .optWrapper {opacity: 1;visibility: visible;top:100%}
.SumoSelect .optWrapper ul, .SumoSelect .optWrapper ul > li {margin: 0;padding: 0;list-style: none;text-align: left;}
.SumoSelect .optWrapper ul > li {padding: 5px 5px 3px 5px;color:#505050;cursor: pointer;}
.SumoSelect .optWrapper ul > li.selected {color:#03AED1}
.SumoSelect .optWrapper ul > li.hidden {display: none;}
.SumoSelect p.SelectBox {padding: 15px 25px 13px 15px;text-align: left;position: relative;z-index: 1;cursor: pointer;}
.SumoSelect p.SelectBox:after {content: "";display: block;width: 16px; height: 10px;background: transparent url(../img/arrow.svg) center center no-repeat;background-size: auto 100%;position: absolute;z-index: 2;right: 12px;top: calc(50% - 5px);}
.SumoSelect.open p.SelectBox:after {transform: rotate(180deg);}
.SumoSelect input.search-txt {opacity: 0;visibility: hidden;border:0 !important;position: absolute;z-index: 1;left:0;top: 0;bottom:0;right: 0;}
.SumoSelect.open input.search-txt {opacity: 1;visibility: visible;}
p.no-match {color:#dd1133;margin:0 !important}
.SumoSelect.open>.search>span, .SumoSelect.open>.search>label {visibility: hidden;}

#creat-form .SumoSelect, #find-form .SumoSelect {background-color: #FBFBFB;}
#creat-form input[type="text"], #creat-form input[type="password"], #creat-form input[type="email"], #creat-form input[type="time"], #creat-form input[type="date"], #creat-form input[type="number"], #creat-form input[type="tel"], #creat-form textarea, #creat-form select, #find-form input[type="text"], #find-form input[type="password"], #find-form input[type="email"], #find-form input[type="time"], #find-form input[type="date"], #find-form input[type="number"], #find-form input[type="tel"], #find-form textarea, #find-form select {padding: 20px 20px 16px 20px;background-color: #FBFBFB;}
#creat-form .SumoSelect p.SelectBox, #find-form .SumoSelect p.SelectBox {padding: 20px 20px 16px 20px;}

/* file browse */
.fac-createform > .cl {position: relative;z-index: 1;}
.files-browse {position: absolute;z-index: 1;left:0;right: 0;top: 0;bottom: 0;background: #009CD2;border:1px solid #707070}
.files-browse.fill {opacity: 0;visibility: hidden;}
.files-browse:before {content: "+";font-size: 130px;line-height:0;position: absolute;z-index: 1;color: #fff;left: 32%;top: 57%;}
.fac-createform > .cl.input-img {min-height: 160px;}
.fac-createform > .cl:active .files-browse {border-style: dashed;border-width: 3px;border-color: #ffffff;}
.files-browse input[type="file"] {display: block !important;position: absolute;z-index: 3;left:0;top:0;right:0;bottom:0;width: 100%;opacity: 0;}
.files-browse input.input-file {background: transparent;position: absolute;top: 45%;left:46%;padding: 0;margin:0;border:0;font-size:34px;font-family: 'Nexa';width: auto !important;}
.files-browse input.input-file:before {content:"+"}
.preview-img {visibility: hidden;opacity: 0;}
.preview-img[src*="data:image"] {position: relative;z-index: 5;visibility: visible;opacity: 1;}
.selected-files {display:block !important;position: absolute;right: 20px;top:20px;padding:10px 12px 6px 12px;border-radius:3px;background-color: rgba(0,0,0,.35);color: #ffffff;visibility: hidden;opacity: 0;z-index: 6;}
.selected-files[style*="block"] {opacity: 1;visibility: visible;}
.selected-files a.file-remove {display: inline-block;vertical-align:middle;width:24px;height: 24px;line-height:24px;border-radius: 50%;text-align: center;color: #ffffff;background-color: #DD1133;text-decoration: none;margin-left:5px;}

/* storyboard-frame */
small {color:#D6D6D6}
.grid-storyboards {grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));grid-gap:60px 120px}
.grid-storyboards > article {padding:0;}
.grid-storyboards > article p.img {margin: 0;}
.grid-storyboards > article p.img > a , .grid-storyboards > article p.img img {display: block;}
.grid-storyboards > article > p + div, .grid-storyboards > article > div + p, .grid-storyboards > article > div + div {margin-top: 20px;}
.grid-storyboards > article .out {border:1px solid #CDCDCD;border-radius: 4px;padding: 10px;margin-left:8px}
.grid-storyboards > article .out:before {left:-8px;top:0}
.grid-storyboards + div {margin-top: 60px;}
/* slick */

.slick-prev, .slick-next {border:3px solid #D8D8D8;border-width: 3px 3px 0 0;border-radius: 3px}
.mini .slick-prev, .mini .slick-next {top:auto;bottom:-22px}
.slick-dots li button {width: 14px;height: 14px;border-radius: 7px;background-color: #D8D8D8}
.slick-dots li.slick-active button {width: 38px;background-color:#03AED1}
.mini .slick-prev {left:30% !important}
.mini .slick-next {right:30% !important}

span#valid-msg, span#error-msg {position: absolute;z-index: 3;right: 8px;top:12px;color: green;font-size:12px}
span#error-msg {color:red}

a[href*="youtube"].iconic, a[href*="vimeo"].iconic {position: relative;z-index: 1;display: block}
a[href*="youtube"].iconic:before,a[href*="vimeo"].iconic:before {content:"";width: 7vw;height: 7vw;background: transparent url(../img/ico-play.svg) center center no-repeat;background-size: auto 100%;display: block;position: absolute;z-index: 1;left: calc(50% - 3.5vw);top: calc(50% - 3.5vw);}
a[href*="youtube"].iconic:hover:before,a[href*="vimeo"].iconic:hover:before {transform: scale(1.1)}

a.hamburger:before, a.hamburger:after,  a.hamburger > em {border-radius: 3px;background-color: #03AED1;}
a.hamburger:before {top:14px}
a.hamburger:after {bottom:13px}
a.hamburger.active:after, a.hamburger.active:before, a.hamburger.active > em {background-color:#DD1133}

/* table */

table {width: 100%;border-collapse: collapse;border:1px solid #D7D7D7;padding: 0;border-spacing: 1px;}
table tr td {padding: 10px;text-align: center;width: auto;background-color:#FCFCFC;}
table tr + tr {border-top:1px solid #D7D7D7;}
table tr td a {display: block;}
table tr td + td {border-left:1px solid #D7D7D7;}
table tr td.auto {max-width: fit-content;max-width: -moz-max-content;padding: 0;width: fit-content;width: -moz-max-content;text-align: right;}
table tr:hover td {background-color:#f5f5f5 ;}
table.data-storyboard td.auto {width: 80px;border-left:0}

span.cl a.buton {height: 100%;white-space: nowrap;}
span.cl a.buton:before {content: "";width: 0;margin:0;height: 100%;vertical-align: middle;}

.meta-desc {font-size:20px}
div + .meta-desc, .meta-desc + div {margin-top: 50px}
.meta-desc p {border:1px solid #CDCDCD;background: #ffffff;border-width: 1px 1px 1px 13px;border-radius: 3px;padding: 18px 15px 13px 15px;border-left-color:#DD1133;}

/* form */
.req-ico {display:inline-block;color: #DD1133;position: absolute;z-index: 3;left:102%;top:9px;font-style: normal;font-size:24px}
.req-ico {display: none;}
.err-txt {display: inline-block;position: absolute;z-index: 4;right: 5px;bottom: 100%;background-color: #DD1133;color: #ffffff;border-radius: 4px;padding: 8px 10px 5px 10px;font-size: 12px;line-height: normal;opacity: 0;transform: translateY(10px);visibility: hidden;font-style: normal}
.err-txt.show {opacity: 1;transform: translateY(0);visibility: visible}
.err-txt:after{width: 0;height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #dd1133 transparent transparent transparent;content: "";position: absolute;right: 10px;top: 100%}

/* transitions */
.trans300, .logo,header.site-header, header.site-header > .pg, label.tag-anime, [type="button"], [type="submit"], [type="reset"], input, .slick-prev, .slick-next,.err-txt, .optWrapper, .SumoSelect, .SelectBox:after, nav ul > li > a:after, .preview-img, .err-slct { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.trans700 { -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }


@media only screen and (max-width: 1441px) {
    /* page widths */
  }
  
  @media only screen and (max-width: 1281px) {
  
  }
  
  @media only screen and (min-width: 1024px) {
    .logo.logo-big {width:316px;height: 73px;}
    .fac-login [type="button"], .fac-login [type="submit"], .fac-login [type="reset"] {width: 100%}
    .fac-login .form-elements {margin-right: 18px;}
    .fac-sb-heading .project-desc {text-align: right;}
    .person-cl {position: relative;z-index: 1;}
    .person-cl:before {content: "";width: 1px;background-color: #D8D8D8;left:-1px;top:33%;bottom: 33%;position: absolute;z-index: 1;}
    .fac-fixed-bottom {font-size:30px;}
    .fac-fixed-bottom .buton {border-radius: 0;}
  }
  
  @media only screen and (max-width: 1024px) {
    body {padding: 55px 0 110px 0}
    header.site-header .resp {display: none !important;}
    .form-elements [type="button"], .form-elements [type="submit"], .form-elements [type="reset"] {width: 100%}
    section + section, main + footer, header + main, section + main, div + main, main + div, section + h2, h2 + section {margin-top: 4vh}
    section + section.portfolio, section.portfolio + section, section.portfolio + footer {margin-top: 6.2vh}
    main section.portfolio:last-child {margin-bottom: 6.2vh}
    .fac-header > .cl.autow {padding: 10px;}
    .mobile-slide nav ul, .mobile-slide nav ul > li, .mobile-slide nav ul > li > a {display: block;}
    .mobile-slide nav ul > li > a {padding: 10px 0;}
    .selected-files {left:20px;text-align: center;}
  }
  
  @media only screen and (max-width: 969px) {
    .fac-sb-heading.fc:not(.no) > .cl + .cl, .fac-sb-heading.fac:not(.no) > .cl + .cl {margin-top: 0;}
    .fac-sb-heading.fac > .cl {text-align: center;}
    .fac-sb-heading.fac.pad > .cl, .fac-sb-heading.fc.pad > .cl {padding: .5vw;}
   .pg hr {margin-left: -2.5vh;margin-right: -2.5vh}
   .social strong.h {display: none}
   .person-slide > .pg {padding: 30px;border-radius: 0;margin-left: 0;margin-right: 0}
   footer p.close {margin-top: 2.5vh !important}
   .person-slide h2 {font-size:20px}
   .person-slide h2 ~ p {font-size:inherit}
    br {display: none}
    img[src*="video-bg.png"] {border-radius: 10px}
    input[type="text"], input[type="number"], input[type="tel"], textarea, select {padding:13px 15px 8px 15px}
    .SumoSelect {border:0}
    .SumoSelect select {display: block;}
    .SumoSelect p.SelectBox {display: none;}
    }
  
  
  @media only screen and (max-width: 1024px) and (min-width: 667px) {
  }
  
  @media only screen and (max-width: 737px) {
    h2 {font-size:24px} 
  }
  
  @media only screen and (max-width:669px) {
    a[href*="youtube"].iconic:before,a[href*="vimeo"].iconic:before {content:"";width: 7vh;height: 7vh;left: calc(50% - 3.5vh);top: calc(50% - 3.5vh);}
  }
  
  @media only screen and (max-width: 481px) {
    .grid-storyboards {grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));grid-gap:20px}
}
  
  @media only screen and (max-width: 421px) {
  
  }
  @media only screen and (max-width: 331px) {
  }