:root {
    --wc-dark-gray: #2D3142;
    --wc-md-gray: #4F5D75;
    --wc-light-gray: #E5E5E5;
    --wc-white:#FFFFFF;
    --wc-orange:#EF8354;
    font-size: 16px;
}


.loader{
    width:auto;
    height: 30px;
    margin: auto;
    animation: flip 2s infinite;
    animation-timing-function: ease;
    content: url("../images/logo.png")
  }

  @keyframes flip{
    0%{
     transform: rotateY(0deg);
   }
   100%{
    transform: rotateY(360deg);
 }
 }


  
@font-face {
    font-family: 'NeoBold';
    src: url('../fonts/ChangelingNeo-Bold.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Bold.woff') format('woff'),
         url('../fonts/ChangelingNeo-Bold.ttf') format('truetype');
  }


  @font-face {
    font-family: 'NeoInline';
    src: url('../fonts/ChangelingNeo-Inline.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Inline.woff') format('woff'),
         url('../fonts/ChangelingNeo-Inline.ttf') format('truetype');
  }


  @font-face {
    font-family: 'NeoLight';
    src: url('../fonts/ChangelingNeo-Light.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Light.woff') format('woff'),
         url('../fonts/ChangelingNeo-Light.ttf') format('truetype');
  }


  @font-face {
    font-family: 'NeoRegular';
    src: url('../fonts/ChangelingNeo-Regular.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Regular.woff') format('woff'),
         url('../fonts/ChangelingNeo-Regular.ttf') format('truetype');
  }


  @font-face {
    font-family: 'NeoStencil';
    src: url('../fonts/ChangelingNeo-Stencil.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Stencil.woff') format('woff'),
         url('../fonts/ChangelingNeo-Stencil.ttf') format('truetype');
  }


  @font-face {
    font-family: 'PressuraRegular';
    src: url('../fonts/GT-Pressura-Regular.otf') format('opentype');
  }

html,
body {
    background-color: var(--wc-light-gray) !important;
    font-family: 'PressuraRegular';
    letter-spacing: 0.1rem !important;
}



h1, h2, h3, h4, h5, h6{
    font-family: 'NeoRegular';
    letter-spacing: 0.2rem;
}

button{
    letter-spacing: 0.1rem;
}


.no-select {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.half-font{
    font-size: 0.5rem !important;
}

.three-quarter-font{
    font-size: 0.75rem !important;
}


.one-and-half-font{
    font-size: 1.5rem !important;
}


.bg-wc-dark-gray {
    background: var(--wc-dark-gray);
}

.border-wc-dark-gray {
    border-color: var(--wc-dark-gray) !important;
}

.text-wc-dark-gray {
    color: var(--wc-dark-gray);
}


.bg-wc-md-gray {
    background: var(--wc-md-gray);
}

.border-wc-md-gray {
    border-color: var(--wc-md-gray) !important;
}

.text-wc-md-gray {
    color: var(--wc-md-gray);
}


.bg-wc-light-gray {
    background: var(--wc-light-gray);
}

.border-wc-light-gray {
    border-color: var(--wc-light-gray) !important;
}

.text-wc-light-gray {
    color: var(--wc-light-gray);
}


.bg-wc-white {
    background: var(--wc-white);
}

.border-wc-white {
    border-color: var(--wc-white) !important;
}

.text-wc-white {
    color: var(--wc-white);
}


.bg-wc-orange {
    background: var(--wc-orange);
}

.border-wc-orange {
    border-color: var(--wc-orange) !important;
}

.text-wc-orange {
    color: var(--wc-orange);
}

.btn{
    border-radius: 0px !important;
}

.btn-outline{
    color: var(--wc-light-gray);
}


.btn-outline.orange {
    border-color: var(--wc-orange) !important;
    background-color: var(--wc-dark-gray) !important;
    color: var(--wc-light-gray) !important;
}

.btn-outline.orange:hover {
    background-color: var(--wc-orange) !important;
    color: var(--wc-light-gray) !important;
    
}

input{
    border-radius:0px !important;
}


.btn-solid.orange {
    color: var(--wc-white) !important;
    background-color: var(--wc-orange);
    border-color: var(--wc-orange) !important;
}


.btn-solid.orange:hover {
    background-color: var(--wc-orange) !important;

}

/*NAVBAR*/
#navbar {
    height: 75px;
    position: relative;
    box-sizing: border-box;
}

#nav-logo-wrapper {
    position: absolute;
    left: 50%;
    height: 100px;
    width: 100px;
    margin-left: -50px;    position: absolute;
    left: 50%;
    height: 87.5px;
    width: 100px;
    margin-left: -50px;
    top: -12.5px;
    overflow: hidden;
}

#nav-logo-img {
    height: 100px;
    width: 100px;
}




input[type=text], input[type=email], input[type=password], input[type=number], select{
    background-color: var(--wc-light-gray) !important;
    border-color: var(--wc-light-gray) !important;
    color: var(--wc-dark-gray) !important;
    font-size: 16px !important;
}


input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus, 
input[type=number]:focus,
select:focus
{
    color: var(--wc-dark-gray) !important;
    background-color: var(--wc-light-gray) !important;
    border-color: var(--wc-orange) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0px rgba(208, 63, 37, 1.0) !important;
}

.form-check-input{
    background-color: var(--wc-orange) !important;
    color: var(--wc-orange) !important;
    box-shadow: none !important;
    border:none !important;

}

.form-check-input:checked{
    background-color: var(--wc-orange) !important;
    color: var(--wc-light-gray) !important;
    box-shadow: none !important;
    border:none !important;
}

a.text-wc-orange:hover{
    color:var(--wc-orange);
}