@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 */
@import 'intlTelInput.css?v1'; /* 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 {text-align: center;background-color: #ffffff; padding: 130px 0 0}
body, html, div, table, input, select, textarea, blockquote, ul, ol {font:normal 1em/1.69 '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:36px}
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: 36px}
h1, h2 ,h3, h4, h5, h6 {margin: 0;line-height: 1.3;letter-spacing: 3px;font-family:'NexaB2';font-weight: normal}
h2 {text-transform: uppercase;max-width: 840px; margin-left: auto;margin-right: auto;font-size:26px}

section + section, main + footer, header + main, section + main, div + main, main + div, section + h2, h2 + section {margin-top: 2.1vw}
section + section.portfolio, section.portfolio + section, section.portfolio + footer {margin-top: 6.2vw}
main section.portfolio:last-child {margin-bottom: 6.2vw}

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

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

.logo, a.logo.logo-min {width:260px;height: 40px;margin:0 auto;}
.logo > a, a.logo.logo-min {display:block;width: 100%;height: 100%;background: transparent url(../img/sharpcake-logo.svg) center center no-repeat;font-size:0;color:rgba(0,0,0,0);background-size: auto 100%}
a.logo.logo-min {width:260px;height: 40px;}

header.site-header {position: fixed;z-index: 20;left: 0;right: 0;top: 0;background-color: transparent }
header.site-header > .pg {padding: 48px 0 40px 0;}
header.site-header:before, header.site-header:after {content:"";display:block;position: absolute;background-color:transparent;height: 8px;}
header.site-header:before {z-index: 1;right: 0;top: 0;left:0;background-color:#17C3E5}
header.site-header:after {z-index: 2;right: 65%;top: 0;left:0;background-color:#DD1133}

header.site-header.sticky {background-color: #ffffff;box-shadow: 0 5px 15px 0 rgba(23,195,229,.1)}
header.site-header.sticky:after {right: 35%;}
header.site-header.sticky .logo {height: 20px;width: 128px}
header.site-header {position: fixed;z-index: 20;left: 0;right: 0;top: 0;background-color: #ffffff }
header.site-header.sticky > .pg {padding: 28px 0 20px 0;}

hr {display: block;appearance: none;border:0;height: 6px;background: transparent url(../img/zigzag.svg) center center repeat-x;background-size: auto 100%}

/* 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}
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"] {background-color: #DD1133;border:2px solid #DD1133;display: inline-block; border-radius: 4px;color: #ffffff;font-family: 'NexaB2';padding: 15px 20px 10px 20px;cursor: pointer;}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {background-color: #CB0929;}
input.error {border-color: #DD1133}

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: 0;top:calc(-22px);font-size:12px;color:#8C8C8C;text-transform: uppercase}
label.tag-anime.focused {top:calc(-22px);opacity: 1;left:0;}

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

/* form */

.form-elements form p, .form-elements form div:not(.iti__flag-container) {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}
.iti {display: block}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {left: 12px;}
.iti__selected-dial-code {line-height: normal;padding: 5px 0 0}
.iti--separate-dial-code .iti__selected-flag {background-color: transparent}

/* person slide */
.slick-slide-people {max-width: 860px;margin-left: auto;margin-right: auto}
.slick-slide-people .fac.fac-person {display: inline-flex}
.person-slide > .pg {padding:5vw;background-color:#F9F9F9 ;position: relative;z-index: 1;border-radius: 10px;overflow: hidden;}
.person-slide > .pg:after {content: "";position: absolute;z-index: 1;right: 0;bottom: 0;left: 0;height: 10px;background-color:#DD1133}
.person-slide h2 {font-size:32px}
.person-slide h2 ~ p {font-size:18px}

.fac-person .img {padding: 10px}
.fac-person .img p {width: 65px;height: 65px;overflow: hidden;border-radius: 50%;border:2px solid #03AED1}
.fac-person strong {line-height: normal;}
.fac-person .cl.toleft {line-height: normal}

.grid-article.grid-portfolio {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}
.grid-portfolio > article {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center;position: relative;z-index: 1;height: 118px;}
.grid-portfolio > article:before, .grid-portfolio > article:after {content: "";width: 118px;height: 118px;background: transparent url(../img/circle-partial.svg) center center no-repeat;background-size: auto 100%;display: inline-block;position: absolute;z-index: 2;}
.grid-portfolio > article:after {background: none;border:1px solid #EDEDED;border-radius: 50%;z-index: 1;opacity: 0;}
.grid-portfolio > article.clicked:after {opacity: 1;}
.grid-portfolio > article:before {transform: rotate(180deg) scale(1);opacity: 0;}
.grid-portfolio > article.clicked:before {transform: rotate(0deg) scale(1);opacity: 1;}
.grid-portfolio > article a {position: relative;z-index: 3;}
.grid-portfolio > article img {opacity: 0;transform: scale(1.3)}
.grid-portfolio > article.clicked img {opacity: 1;transform: scale(1)}
.grid-portfolio img[src*="double"], .grid-portfolio img[src*="celtra"] {width: 74px}
.grid-portfolio img[src*="banner"] {width: 84px}
.grid-portfolio img[src*="adobe"] {width: 50px}

.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)}

footer.site-footer {background: #F7F7F7}
footer.site-footer > .pg {padding: 40px 0}
.foot-logo p {font-size:12px;letter-spacing: 2.3px} 

.social a {width: 50px;height: 50px;border-radius: 50%;font-size: 0;display: inline-block;vertical-align: middle; margin: 5px;background-color: #DD1133; position: relative;z-index:1}
.social a:hover {background-color: #03AED1}
.social a:before {content:"";width: 24px;height: 24px;position: absolute; left: calc(50% - 12px); top: calc(50% - 12px);background-color: #ffffff;display: inline-block;}
.social a:hover:before {transform: scale(1.1)}
.social a:before {-webkit-mask:  url(../img/facebook.svg) no-repeat; -webkit-mask-size:auto 100%;-webkit-mask-position: 50% 50%;mask: url(../img/facebook.svg) no-repeat 50% 50%;  mask-size:auto 100%;}
.social a[href*="instagram"]:before {-webkit-mask-image:  url(../img/instagram.svg); mask-image: url(../img/instagram.svg)}
.social a[href*="linkedin"]:before {-webkit-mask-image:  url(../img/linkedin.svg); mask-image: url(../img/linkedin.svg)}

/* form */
.req-ico {display:inline-block;color: #DD1133;position: absolute;z-index: 3;left:102%;top:9px;font-style: normal;font-size:24px}
.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 > .pg, label.tag-anime, [type="button"], [type="submit"], [type="reset"], input, .slick-prev, .slick-next,.err-txt { -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, .grid-portfolio > article:before, header.site-header:after, .grid-portfolio > article img { -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) {
    .form-elements [type="button"], .form-elements [type="submit"], .form-elements [type="reset"] {width: 50%}
    .fac-footer .foot-logo {order:0;text-align: left}
    .fac-footer .foot-logo a.logo {margin-left: 0;}
    .fac-footer .social-links {order:5;text-align: right}
    .grid-portfolio > article:nth-child(1):before {transition-delay: 0s}
    .grid-portfolio > article:nth-child(2):before {transition-delay: 0.15s}
    .grid-portfolio > article:nth-child(3):before {transition-delay: .3s}
    .grid-portfolio > article:nth-child(4):before {transition-delay: .45s}
    .grid-portfolio > article:nth-child(5):before {transition-delay: .6s}
    .grid-portfolio > article:nth-child(6):before {transition-delay: .75s}
    .grid-portfolio > article:nth-child(6) ~ article:before {transition-delay: .9s}
  }
  
  @media only screen and (max-width: 1024px) {
    .form-elements [type="button"], .form-elements [type="submit"], .form-elements [type="reset"] {width: 100%}
    .grid-article.grid-portfolio {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
    .grid-article.grid-portfolio {grid-gap: 30px}
    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}
  }
  
  @media only screen and (max-width: 969px) {
   .form-box .pg {margin-left: 0;margin-right: 0}
   .form-box .fc:not(.no) > .cl + .cl, .form-box .fac:not(.no) > .cl + .cl {margin-top:45px}
   .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}
    .form-elements p + p, .form-elements p + div, .form-elements div + p {margin-top: 45px}
    .form-elements form p:last-child {margin-top: 30px !important}
    img[src*="video-bg.png"] {border-radius: 10px}
    input[type="text"], input[type="number"], input[type="tel"], textarea, select {padding:13px 15px 8px 15px}
    }
  
  
  @media only screen and (max-width: 1024px) and (min-width: 667px) {
  }
  
  @media only screen and (max-width: 737px) {
    h2 {font-size:16px} 
  }
  
  @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) {

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