/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 21, 2019, 6:35:46 PM
    Author     : phlan
*/

html{
   font-size: 62.5%;
   overflow-y: hidden; /* so google translate bar doesnt add extra scrollbar, however this hides footer bottom margin*/
}
html, body{
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* added for warboy */

}
html, button, input, select, textarea {
    font-family: 'Open Sans', sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
.proxima-nova, .card h2, .top-bar h2, .legal-body h3, body, input, select, textarea {
    /* font-family: "proxima-nova","Helvetica Neue",Arial,Helvetica,sans-serif; */
    /* font-family: Tahoma, Geneva, sans-serif; */
    /* font-family: "Trebuchet MS", Helvetica, sans-s erif; */
    /* font-family: Verdana, Geneva, sans-serif; */
    font-family: 'Open Sans', sans-serif;
}
.home-message{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 28px;
}
.form-btn,
/* .form-title, */
.menu-title{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
/*
h1,
.home-message-title{
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 300 !important;
}

h1{
    font-size: 26px;
}
h2{
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}
*/

.page-footer .copyright{
    font-family: "Montserrat", Helvetica, sans-serif;
    font-weight: 600;
}


/* template */
/* red   rgb(173, 5, 5)     hsl(0, 94%, 35%)    */
/* blue  rgb(4, 122, 219)   hsl(207, 96%, 44%)  */

/*------------------------------------------------------------------------------
    webkit
------------------------------------------------------------------------------*/
/* COMMENTED OUT, MESSED UP INPUTS
textarea,
input{
    -webkit-appearance: none;
}
*/

/*------------------------------------------------------------------------------
   top level
------------------------------------------------------------------------------*/
.body{
    color: #2B2729;
    line-height: 20px;
    font-size: 1.4rem;
    margin: 0;
}
body{
   overflow-x: hidden;
}
body, .base{
    width: 100%;
}
.base{
   /*
    height: 100%;
    min-width: 320px;
    min-height: 480px;
   */ 
   display: flex;
	flex-direction: column;
   height: 100%;
}
.page{
   /*
    position: relative;
      min-height: -moz-calc(100% - 76px);
      min-height: -webkit-calc(100% - 76px);
      min-height: calc(100% - 76px);
      margin-bottom: 76px;
   */
   flex: 1 0 auto;
}
.page-footer {
    /* background: #fff none repeat scroll 0 0; */
    background: transparent;
    overflow: hidden;
    text-align: center;
    z-index: 20;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    padding: 36px 0 36px;
 /* display: block; 
    position: relative; 
    clear: both; 
    margin-top: -76px; */
   
   flex-shrink: 0;
}
.page-footer .wrapper{
    position: static;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    width: auto;
    max-width: 992px;
}
.page-footer nav, .page-footer .copyright, .page-footer li {
    display: inline-block;
}
.page-footer li {
    margin: 0;
}
.page-footer nav, .page-footer nav ul, .page-footer .copyright {
    margin: 0;
    padding: 0;
}
.page-footer nav, .page-footer p {
    font-weight: 700;
    text-transform: uppercase;
}
.page-footer a {
    display: block;
    padding: 8px 8px;
    font-size: 16px;
}
.page-footer a, 
.page-footer a:visited {
    color: #F20060;
    color: hsl(207, 96%, 44%);
    color: hsl(202, 67%, 47%);
    /* color: hsla(185, 65%, 40%, 1); */
    font-family: 'Montserrat', sans-serif;
    font-family: 'MedievalSharp', cursive;
    font-weight: 700;
    text-decoration: none;
}
.page-footer a:hover{
    color: #CC0051;
    color: hsl(207, 96%, 38%);
    color: hsl(202, 67%, 40%);
    /* color: hsla(185, 65%, 32%, 1); */
    text-decoration: underline;
}




nav ul, nav ol {
    list-style: outside none none;
}
.page-footer .copyright {
    margin: 0 0 0 8px;
    padding: 8px 6px;
    font-size: 13px;
}
.page-footer p {
    color: rgba(51, 7, 24, 0.3);
    color: hsla(34, 11%, 25%, .35);
    /* color: hsla(185, 11%, 25%, .35); */
}
/* float: must be separate */
.page-footer nav{
    float: left;
}
.page-footer .copyright{
    float: right;
}


/*------------------------------------------------------------------------------
    navbar
------------------------------------------------------------------------------*/
.navbar{
    position: relative;
    width: 100%;
    height: 70px;
    z-index: 100;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 0px; /* bootstrap overwrite */
    border-radius: 0px; /* bootstrap overwrite */
    border: none;
}
.navbar-small{/* deprecated */
    height: 79px;
}
.navbar-small .navbar-logo{
    padding-top: 20px;
}
.navbar-small .navbar-logo img{
    max-width: 80px;
}

.navbar-inner{
    max-width: 1200px;
    height: inherit;
    margin: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.navbar-left{
    position: relative;
    display: inline-block;
    width: 33%;
    float: left;
    height: inherit;
}
.navbar-right{
    position: relative;
    display: inline-block;
    float: right;
    width: 66%;
    height: inherit;
    font-size: 20px;
    font-weight: 600;
    margin-right: 0px; /* bootstrap overwrite */
}
.navbar-right-inner{
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 0px;
    height: auto; /* works better for multi height navbar items */
}
.navbar-item{
    position: relative;
    display: inline-block;
    width: 22%;
    height: inherit;
    text-align: center;
    top: 16px;
}
.navbar-item a{
    text-decoration: none;
    color: #DBD9C1;
    opacity: .4;
    font-family: 'MedievalSharp', cursive;
    font-weight: 400;
}
.navbar-item-focus a,
.navbar-item a:hover{
    font-size: 21px;
    color: #c4c2ae;
    opacity: 1;
    font-weight: 400;
}

/*---- navbar large-icon ----*/
.navbar-item-large{
    margin-top: -15px; /* must be atleast 10 for font-size of 30 */
}
.navbar-item-large a{
    font-size: 26px;
}
.navbar-item-large.navbar-item-focus a,
.navbar-item-large.navbar-item a:hover{
    font-size: 28px;
}
/* only on focus hack fix */
.navbar-item-large.navbar-item-focus{
    margin-bottom: -3px;
}

.arrow-up {
    width: 0; 
    height: 0; 
    padding-top: 1px;
    margin: auto;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 24px solid white;
    margin-bottom: 8px;
}
.arrow-down {
    width: 0; 
    height: 0; 
    padding-top: 0px;
    margin: auto;
    margin-bottom: -32px;
    margin-bottom: -16px; /* changed to work with margins in shop.css */
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 32px solid #FF0066;
}
/*------------------------------------------------------------------------------
    navbar - arrow up behavior
------------------------------------------------------------------------------*/
.arrow-up{
    display: none;
}
.navbar-item-focus .arrow-up{
    display: block;
}

/*------------------------------------------------------------------------------
    navbar - nested styling
------------------------------------------------------------------------------*/
.navbar-nest{
   height: 100%;
   margin: auto;
   text-align: center;
}
.navbar-nest-img{
   /* background-image: url(../image/pattern-bg.png); */
   /*background-size: cover;*/
   background-position: bottom;
   background-repeat: repeat;
   background-position-y: 5px; 
   overflow: hidden;
}
.navbar-nest-dull{
   /*
   background-color: rgba(33,33,33,.88);
   background-color: rgba(36,36,36,.955);
   */
}
.navbar-nest-gradient.brown{
    background: -webkit-linear-gradient(30deg, hsla(34, 10%, 20%, .75) 0%, hsla(40, 15%, 26%, .85) 100%);
    background: -o-linear-gradient(30deg, hsla(34, 10%, 20%, .75) 0%, hsla(40, 15%, 26%, .85) 100%);
    background: -moz-linear-gradient(30deg, hsla(34, 10%, 20%, .75) 0%, hsla(40, 15%, 26%, .85) 100%);
    background: linear-gradient(30deg, hsla(34, 10%, 20%, .75) 0%, hsla(40, 15%, 26%, .85) 100%);
}
.navbar-nest-gradient.avid{
    background: -webkit-linear-gradient(30deg, hsla(194, 47%, 22%, .62) 0%, hsla(252, 36%, 37%, .6) 100%);
    background: -o-linear-gradient(30deg, hsla(194, 47%, 22%, .62) 0%, hsla(252, 36%, 37%, .6) 100%);
    background: -moz-linear-gradient(30deg, hsla(194, 47%, 22%, .62) 0%, hsla(252, 36%, 37%, .6) 100%);
    background: linear-gradient(30deg, hsla(194, 47%, 22%, .62) 0%, hsla(252, 36%, 37%, .6) 100%);
}
.navbar-nest-gradient.warboy-colored{
    background: -webkit-linear-gradient(30deg, rgba(135,135,208,.62) 4%, rgb(234 172 72 / 55%) 100%);
    background: -o-linear-gradient(30deg, rgba(135,135,208,.62) 4%, rgb(234 172 72 / 55%) 100%);
    background: -moz-linear-gradient(30deg, rgba(135,135,208,.62) 4%, rgb(234 172 72 / 55%) 100%);
    background: linear-gradient(30deg, rgba(135,135,208,.62) 4%, rgb(234 172 72 / 55%) 100%);
}
.navbar-nest-gradient.warboy{
    background: -webkit-linear-gradient(30deg, rgb(36 36 38 / 97%) 4%, rgb(44 43 42/ 96%) 100%);
    background: -o-linear-gradient(30deg, rgb(36 36 38 / 97%) 4%, rgb(44 43 42/ 96%) 100%);
    background: -moz-linear-gradient(30deg, rgb(36 36 38 / 97%) 4%, rgb(44 43 42/ 96%) 100%);
    background: linear-gradient(30deg, rgb(36 36 38 / 97%) 4%, rgb(44 43 42/ 96%) 100%);
}

.navbar-nest-gradient.shadow{
   box-shadow: 0px -144px 144px -144px rgba(0,0,0,.34) inset, 0px -8px 8px -8px rgba(0,0,0,.27) inset;
   -webkit-box-shadow: 0px -144px 144px -144px rgba(0,0,0,.34) inset, 0px -8px 8px -8px rgba(0,0,0,.27) inset;
   -moz-box-shadow: 0px -144px 144px -144px rgba(0,0,0,.34) inset, 0px -8px 8px -8px rgba(0,0,0,.27) inset;
}
/* just for documentation: happy avidsphere gradient */
/* background: linear-gradient(30deg, hsla(194, 57%, 52%, .45) 0%, hsla(280, 42%, 55%, .5) 100%); */

/*------------------------------------------------------------------------------
    navbar - logo
------------------------------------------------------------------------------*/
.navbar-logo {
    display: block;
    position: relative;
    color: #FFFFFF;
    text-align: center;
    padding-top: 24px;
    z-index: 1;
}
.navbar-logo a{
    text-decoration: none !important;
}
.navbar-logo img{
    width: 32px;
    height: auto;
    cursor: pointer;
    /* added for warboy */
    margin-top: -5px;
}
.navbar-logo img.default{
    opacity: .8 !important;
}

.navbar-logo img.mobile{
   display: none;
}

.navbar-logo span{
   font-size: 18px;
    line-height: 0;
    font-weight: 500;
    color: #9d9484;
    margin-left: -3px;
    font-family: "Montserrat", sans-serif;
}

.navbar-logo a:hover span,
.navbar-logo a:focus span
.navbar-logo a:active span{
    color: #f8b700;
  background: -webkit-linear-gradient(top,#efd100,#e2a233 19%,#f0c328 30%,#fff1a3 43%,#ffe13e 50%,#FFE359 51%,#FFEB87);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-logo a img.hover,
.navbar-logo a:hover img.default,
.navbar-logo a:focus img.default,
.navbar-logo a:active img.default{
    display: none;
}

.navbar-logo a:hover img.hover,
.navbar-logo a:focus img.hover,
.navbar-logo a:active img.hover{
    display: inline-block;
}


/* mobile */
@media (max-width: 767px) {
   .navbar-small .navbar-logo,
   .navbar-logo {
       padding-top: 14px;
       text-align: center;
       padding-left: 20px;
       padding-right: 0px;
       
   }
   .navbar-small .navbar-logo img,
   .navbar-logo img{
       width: 32px;
       margin-top: 0px;
       /*opacity: .51;*/
   }
   .navbar-logo img.default{
      /* display: none; */
   }
   .navbar-logo img.mobile{
      display: inline-block !important;
   }
   .navbar-logo a span{
     display: none;
}
}

/*------------------------------------------------------------------------------
    home
------------------------------------------------------------------------------*/
.home-main{
    display: block;
    width: 100%;
    height: auto;
    max-width: 960px;
}

.home-list{
    position: relative;
    width: 100%;
    margin: 0;
    height: auto;
    overflow-x: hidden;
    padding: 0;
    padding-bottom: 200px;
    padding-top: 30px;
}
.home-item {
    margin-top: 70px;
    margin-bottom: 70px;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
#homeItemFirst{
    margin-top: 40px;
}


.home-message{
    width: 570px;
    display: inline-block;
    float: right;
    margin-top: 40px;
    text-align: center;
}
.home-message-title{
    line-height: 42px;
}
.home-message-list{
    list-style-type: disc;
    padding-top: 15px;
    padding-left: 30px;
}
.home-message-item{
    
}
.home-message-item > span{
    font-size: 15px;

}

.home-content{
    padding: 30px;
}

.home-demo {
    display: inline-block;
    position: relative;
    text-align: center;
    float: left;
   
    /*padding-bottom: 70px;*/
}
.home-demo-inner{
    margin: 20px;
    height: auto;
    width: auto;

}
.home-demo img{
    max-width: 320px;
    height: auto;
    cursor: pointer;
    /*box-shadow: 1px 1px 7px 2px rgba(28,34,45,0.38);*/
}

/* for reverse*/
.home-item-rev{
    
}
.home-item-rev .home-message{
    float: left;
}
.home-item-rev .home-demo{
    float: right;
}

/*------------------------------------------------------------------------------
    main
------------------------------------------------------------------------------*/
.main{
    display: block;
    max-width: 960px;
    margin: auto;
    height: auto;
}
.main-full,
.main-section,
.main-content{
    padding-bottom: 50px;
}
.main-small{
    padding-top: 20px;
}
.main-section{
    display: inline-block;
    width: 256px;
    float: left;
    height: auto;
    padding-left: 20px;
}
.main-content{
    display: inline-block;
    max-width: 640px;
    width: 100%;
    float: right;
}
.content-area{
    padding: 15px;
    color: #2B2729;
}
.content-faq{

}
.content-faq h3{
    color: #1068ED;
    font-weight: 600;
}
.content-terms{
    
}
.content-privacy{
   
}
.content-privacy ul{
    margin-top: 15px;
    margin-bottom: 25px;
}
.content-company{
    
}
.content-features{
    
}
.content-form h3{
    font-weight: 600;
}

/*
h3{
    font-weight: 700;
}
h1{
    padding: 15px 0;
    line-height: 32px;
}
h1 + h2{
    margin-top: 15px;
}
h3{
    margin: 20px 0 10px;
    font-size: 15px;
    line-height: 20px;
}
p + h2{
    margin-top: 40px;
}
p,
ol li,
ul li{
    margin: 0 0 10px;
    font-size: 13px;
    /* font-family: "proxima-nova","Helvetica Neue",Arial,Helvetica,sans-serif; 
}
ol > li > ol{
    margin-top: 10px;
    margin-bottom: 20px;
}
*/

/*------------------------------------------------------------------------------
    menu-nav
------------------------------------------------------------------------------*/
/* menu left - desktop*/
.menu-nav{
    list-style: outside none none;
    margin: 0;
    margin-top: 30px;
    padding: 50px 0 100px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #DFDEE0;
}
.menu-nav-item{
    height: 60px;
    width: 100%;
    background-color: #FFFFFF;
}
.menu-nav-item a{
    display: block;
    position: relative;
    height: inherit;
    color: #545052;
    font-size: 18px;
    line-height: 60px;
    text-decoration: none;
    padding-left: 30px;
}
.menu-nav-item a:hover{
    color: #2B2729;
    font-weight: 600;
}
.menu-nav-item-focus{
    width: -moz-calc(100% + 1px);
    width: -webkit-calc(100% + 1px);
    width: calc(100% + 1px);
    border-top: 1px solid #DFDEE0;
    border-bottom: 1px solid #DFDEE0;
    border-left: 1px solid #DFDEE0;
    border-right: 1px solid #FFFFFF;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.menu-nav-item-focus a{
    color: #F20060;
    font-weight: 700;
}
.menu-nav-item-focus a:hover{
    color: #F20060;
    font-weight: 700;
}

.page-footer .wrapper{
    padding: 0 32px;
}

/* tablet */
@media (max-width: 961px) {
    .menu-nav{
        padding: 0px 0 60px 0;
        border-bottom: 1px solid #DFDEE0;
        border-right: none;
    }
    .menu-nav-item{
        float: left;
        width: auto;
    }
    .menu-nav-item a{
        text-align: center;
        padding-right: 30px;
    }
    .menu-nav-item-focus{
        height: 61px;
        width: auto;
        border-top: 1px solid #DFDEE0;
        border-left: 1px solid #DFDEE0;
        border-right: 1px solid #DFDEE0;
        border-bottom: 1px solid #FFFFFF;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 0;
    }
    .main-full,
    .main-section{
        position: relative !important;
        width: auto;
        max-width: 884px;
        float: none;
        display: block;
        padding: 20px 40px 0 40px;
    }
    .main-content{
        float: left;
        display: block;
        margin-left: 50px;
        height: auto;
    }
    /* home */
    .home-list{
        padding-top: 0px;
    }
    .home-demo {
        display: block;
        position: relative;
        float: none !important;
        text-align: center;
        margin: auto;
    }
    .home-message{
        position: relative;
        width: auto;
        /*text-align: center;*/
        float: none !important;
        display: block;
        /*padding: 30px 15px 0 15px;*/
        padding: 0 15px 0 15px;
        /*max-width: 640px;*/
        margin-top: 0px;
    }
}

/* mobile */
@media (max-width: 767px) {
    .main-section{
        display: none;
    }
    .main-full{
        padding: 0;
    }
    .main-full,
    .main-content{
        margin-left: 0px;
    }
    /* footer */
    .page-footer{
       padding-left: 0px;
       padding-right: 0px;
       padding-bottom: 7px;
       padding-top: 50px;
    }
    .page-footer .wrapper{
        padding: 0 16px;
    }
    .page-footer .copyright {
        clear: both;
        display: block;
        float: none;
        margin-top: 8px;
    }
    .page-footer nav{
        float: none;
    }
    .page-footer .copyright{
        float: none;
    }
    /* navbar */
    .navbar{
        height: 60px;
    }
    .navbar-small{
        height: 64px;
    }
    .navbar-left{
        height: 40px; /* adds up to total height with navbar-right */
        display: block;
        display: none;
        width: 100%;
        /*float: none;*/
        width: 5%;
    }
    .navbar-right{
        height: 48px; /* adds up to total height with navbar-left */
        display: block;
        font-size: 14px;
        width: 100%;
        /*float: none;*/
        width: 95%;
    }
   .navbar-left,
   .navbar-right{
        display: inline-block;
    }
    .navbar-right-inner{
        height: 42px; /**/
    }
    .navbar-item{
        width: 23%; /**/
    }
    .navbar-item-focus a{
        font-size: 15px; /**/
    }
    .navbar-item a:hover{
        font-size: 14px; /**/
    }

    /*---- navbar large-icon ----*/
    .navbar-item-large a{
        font-size: 20px
    }
    .navbar-item-large.navbar-item-focus a{
       font-size: 21px;
    }
    .navbar-item-large.navbar-item a:hover{
        font-size: 20px;
    }
    
    .arrow-up {
        padding-top: 4px;
        border-left: 17px solid transparent;
        border-right: 17px solid transparent;
        border-bottom: 17px solid white;
    }
    .arrow-down {
        margin-bottom: -15px;
        margin-bottom: 0px; /* changed to work with margins in shop.css */
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #FF0066;
    } 
    
/*     only on focus hack fix */
    .navbar-item-large.navbar-item-focus{
        margin-bottom: -2px;
    }
    .navbar-item-large.navbar-item-focus .arrow-up{
       padding-top: 4px;
    }
    
    /* home */
    .home-content{

    }
    .home-demo img{
        width: 100%;
        max-width: 480px;
    }
    .home-message{
        position: relative;
        width: auto;
        /*text-align: center;*/
        float: none;
        display: block;
        /*padding: 30px 15px 0 15px;*/
        padding: 0 15px 0 15px;
        max-width: 640px;
        margin-left: 0px;
    }
    .home-message-title{
        line-height: 34px;
    }
    .home-message-title > span{
        font-size: 22px;
    }
    .home-message-item{
        line-height: 20px;
    }
    .home-message-item > span{
        font-size: 14px;
    }
    

    
}
/* very small mobile */
@media (max-width: 320px) {
    .form-recap{
        float: none;
        margin-right: -8px;
        margin-left: -8px;
    }
}

/*------------------------------------------------------------------------------
    classes
------------------------------------------------------------------------------*/
.display-none{ display: none; }
.color-green{ color: #08E016; }
.color-green-dark{ color: #07B50D; }
.color-red{ color: rgba(232, 11, 11, 1); }


/*------------------------------------------------------------------------------
   DEFAULT THEME COLORS overwrite in your apps css
------------------------------------------------------------------------------*/
/* background */
.base{
   /*background: white;*/
}
.arrow-up{
   /* border-bottom-color: white; */
}
/* arrow down, */
.arrow-down{
  /* border-top-color: hsl(205, 80%, 45%); */
}

/*------------------------------------------------------------------------------
    buttons
------------------------------------------------------------------------------*/
.btn:active
{
    box-shadow:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
/* get rid of focus outline */
.btn,
.btn:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none !important;
  outline-offset: 0 !important;
}
a,
button::-moz-focus-inner {
  border: 0;
}



/*------------------------------------------------------------------------------
    button - link
------------------------------------------------------------------------------*/
.btn-link{
   height: inherit;
   background-color: transparent !important;
   border: none !important;
   font-size: 18px;
   /* color: #4194D8; */
   color: #1068ED;
   -webkit-tap-highlight-color: rgba(14, 90, 204, 1) !important;
   /* font-family: "Tahoma", Helvetica, Arial, sans-serif; */
   cursor: pointer;
   padding: 0;
}
.btn-link.active,.btn-link:active{
    /* color: #2E6996; */
    color: #0E5ACC;
}
.btn-link:hover{
    /* color: #2E6996; */
    color: #0E5ACC;
}
.btn-link:focus{
    /* color: #2E6996; */
    color: #0E5ACC;
}
.btn-link.disabled,.btn-link:disabled,.btn-link[disabled]{
}
.btn-link-disabled{
    color: #A4A6A8 !important;
    cursor: default !important;
}

/*------------------------------------------------------------------------------
    button - normal
------------------------------------------------------------------------------*/
.btn-outline,
.btn-normal{
    padding: 8px 25px;
    border-radius: 4px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 500;
    background-color: hsla(207, 80%, 60%, 1);
    cursor: pointer;
    transition-duration: .12s;
}
.btn-outline,
.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus,
.btn-normal,
.btn-normal:hover,
.btn-normal:active,
.btn-normal:focus{
    color: white;
}
/* focus outline */
.btn-outline:focus,
.btn-normal:focus{
    box-shadow: 0px 0px 0px 3px rgba(0,0,0,.18);
    -webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,.18);
    -moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,.18);
}
.btn-outline:hover,
.btn-normal:hover{
    background-color: hsla(207, 90%, 62%, 1);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,.2);
    -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,.2);
    -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,.2);
}
.btn-outline:active,
.btn-normal:active{
    background-color: hsla(207, 70%, 56%, 1);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,.1) inset;
    -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,.1) inset;
}

/* btn-outline */
.btn-outline{
    border: 1px solid hsla(0, 0%, 62%, 1);
}
.btn-outline,
.btn-outline:focus{
    color: hsla(0, 0%, 55%, 1);
    background-color: transparent;
}
.btn-outline:hover{
    background-color: hsla(0, 0%, 62%, 1);
}
.btn-outline:hover,
.btn-outline:active{
    color: white;
}
.btn-outline:active{
   background-color: hsla(0, 0%, 55%, 1);
}
.btn-outline:focus,
.btn-outline:hover,
.btn-outline:active{
   border-color: hsla(0, 0%, 62%, 1);
}

/* btn-outline-theme */
.btn-outline-theme{
    border-color:  hsla(207, 80%, 60%, 1); /* relatively light */
}
.btn-outline-theme,
.btn-outline-theme:focus{
    color: hsla(207, 70%, 56%, 1); /* relatively dark */
}
.btn-outline-theme:hover{
    background-color: hsla(207, 80%, 60%, 1); /* relatively light */
}
.btn-outline-theme:hover, /* required */
.btn-outline-theme:active{
    color: white;
}
.btn-outline-theme:active{
   background-color: hsla(207, 70%, 56%, 1); /* relatively dark */
}


/* btn-normal sizes */
.btn-large{
    padding: 11px 25px;
    width: 100%;
}
.btn-small{
   padding: 3px 11px;
   font-size: 12px;
}
.btn-small.btn-thin{
   padding: 3px 5px;
   font-size: 12px;
}
.btn-huge{
   padding: 14px 25px;
   font-size: 22px;
   font-weight: 400;
   display: block;
   margin: auto;
}
.btn-outline.btn-huge{
   font-weight: 500;
   border-width: 2px;
}

/* btn-outline-transparent (added again in shop.css for functional reason, left here for documentation reasons) */
.btn-outline-transparent{
   border-color: transparent;
}


/*------------------------------------------------------------------------------
    iframe
------------------------------------------------------------------------------*/
.iframe{
    width: 100%;
    outline: none;
    display: block;
    border: none;
}
/*------------------------------------------------------------------------------
    form - title
------------------------------------------------------------------------------*/
.menu-text,
.form-text{
    margin: 25px 15px 0px 10px;
}
.menu-text-bottom,
.form-text-bottom{
    margin: 5px 15px 0px 17px;
}

/* .form-title, */
.menu-title{
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 15px;
    line-height: 17px;
    color: #A4A6A8;
}
.menu-desc{
    padding-bottom: 5px;
    font-size: 14px;
    line-height: 17px;
    color: #A4A6A8;
}
.menu-desc-title,
.form-desc-title{
    padding-bottom: 13px;
}
/* for titleless menu or form */
.form-buffer-top,
.menu-buffer-top{
    margin-top: 40px; /*25*/
}
.form-buffer-bottom,
.menu-buffer-bottom{
    margin-bottom: 35px;
}
/* for action pages */
.menu-text-act{
    margin-top: 32px;
}
.menu-text-act > .menu-title{
    color: #2B2729;
}
.menu-text-act > .menu-desc{
    color: #797A7C;
    font-weight: 500;   
}
/* for message below */
.menu-text-msg{
    margin: 15px 14px 10px 14px;
}
.menu-text-msg > .menu-desc{
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    color: #545052;
}
.menu-desc-link{
    text-decoration: underline;
    color: #797A7C;
}

/*------------------------------------------------------------------------------
    form
------------------------------------------------------------------------------*/
#reset-form{
    margin-top: 30px;
}
.menu,
.form {
    background-color: #FFFFFF;
    /*border-top: 1px solid #C8C5CC;
    border-bottom: 1px solid #C8C5CC;*/
    border: 1px solid #E0E1E2;
    border-radius: 12px;
}
.menu-item,
.form-item{
    display: block;
    width: 100%;
    height: 55px;
}
.form-input{
    height: inherit;
    float: left;
    padding: 0;
}
.form-input-noglyph{
    width: -moz-calc(100% - 17px);
    width: -webkit-calc(100% - 17px);
    width: calc(100% - 17px);
    padding-left: 17px;
}
.menu-glyph,
.form-glyph{
    display: inline-block;
    float: left;
    color: #A4A6A8;
    font-size: 20px;
    height: inherit;
    padding: 0px 20px 0 20px;
}
.menu-sub .menu-glyph,
.menu-sub .menu-glyph{
    padding: 0px 20px 0 40px;
}
.menu-glyph > span,
.form-glyph > span{
    margin-top: 10px;
}
.menu-glyph .icon,
.form-glyph .icon{
    line-height: 100% !important;
    speak: normal !important;
    position: relative !important;
    display: inline-block !important;
}

.menu-icon,
.form-icon{
    display: inlline-block;
    float: left;
    color: #A4A6A8;
    font-size: 28px;
    height: inherit;
    padding: 0px 16px 0 16px;
}
.menu-icon .icon,
.form-icon .icon{
    margin-top: 8px;
    line-height: 100% !important;
    speak: normal !important;
    position: relative !important;
    display: inline-block !important;
}


/* for text area */
.form-item-area{
    height: auto;
    width: 100%;
}
.form-item-area > .textarea-simple{
    /*resize: none;*/
    /*width: 100%;*/
    padding: 7px 8px 5px 11px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/* recaptcha */
.form-recap-wrapper,
.form-submit{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
.form-recap-wrapper{
    margin-top: 30px;
    height: 78px;
}
.form-recap{
    position: relative;
    float: right;
}

/* form-submit */
.form-submit{
    margin-top: 0px;
    margin-bottom: 100px;
    height: 50px;
}
.form-btn{
    position: relative;
    display: block;
    float: right;
    margin-right: 20px;
    height: 45px;
}
/* spinner */
.form-spinner{
    margin-top: 6px;
    margin-right: 10px;
}
.spinner-form{
    height: 32px;
    float: right;
}
.spinner-img{
    background-size: cover;
    margin: 0;
}
.spinner-img-form{
    width: 32px;
    height: 32px;
    background-image: url('../image/spinner-form32.png');
}

/*------------------------------------------------------------------------------
    input / textarea
------------------------------------------------------------------------------*/
.textarea-simple,
.input-simple{
    color: #2B2729;
    /* font-family: "Tahoma", Helvetica, Arial, sans-serif; */
    display: inline-block;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    outline: 0 none;
    font-size: 17px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.textarea-simple,
.input-simple:focus {   
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    outline: 0 none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.textarea-simple{
    height: auto;
    display: block;
    width: 100%;
    border: 1px solid #E0E1E2;
    border-radius: 12px;
    line-height: 24px;
    padding: 7px 8px 5px 11px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/* placeholders */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #C2C3C6;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #C2C3C6;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #C2C3C6;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #C2C3C6;
}

/*------------------------------------------------------------------------------
    hr
------------------------------------------------------------------------------*/
hr {
    margin: 0;
    border: none;
    /*
    height: 1px;
    /* color: #C8C5CC; /* old IE */
    /* background-color: #C8C5CC; /* Modern Browsers */
    /*color: #E0E1E2;
    background-color: #E0E1E2; /* DDDBE0 */
}
.hr-grad{
    height: 1px;
    color: rgba(224, 225, 226, .9) !important;
    background: rgba(224, 225, 226, .9);       
   background: -webkit-linear-gradient(90deg, rgba(224, 225, 226, 0) 1%, rgba(224, 225, 226, .11) 50%, rgba(224, 225, 226, 0) 99%);
   background: -moz-linear-gradient(90deg, rgba(224, 225, 226, 0) 1%, rgba(224, 225, 226, .11) 50%, rgba(224, 225, 226, 0) 99%);
   background: -o-linear-gradient(90deg, rgba(224, 225, 226, 0) 1%, rgba(224, 225, 226, .11) 50%, rgba(224, 225, 226, 0) 99%);
   background: linear-gradient(90deg, rgba(224, 225, 226, 0) 1%, rgba(224, 225, 226, .11) 50%, rgba(224, 225, 226, 0) 99%);
}
.hr-grad-dark{
    height: 1px;
    color: rgba(224, 225, 226, .9) !important;
    background: rgba(224, 225, 226, .9);       
   background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 99%);
   background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 99%);
   background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 99%);
   background: linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0) 99%);
}
/* arrow down line */
.arrow-line {
  position: relative;
  width: 100%;
  display: block;
  margin-top: -1px;
}
.arrow-line-down-inner {
  position: absolute;
  width: 0;
  height: 0;
  padding-top: 0px;
  left: -moz-calc(50% + 2px);
  left: -webkit-calc(50% + 2px);
  left: calc(50% + 2px);
  top: 0px;
    margin-left: -32px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #FFFFFF;
}
.arrow-line-down {
  position: absolute;
  width: 0;
  height: 0;
  padding-top: 0px;
  left: 50%;
  top: 0px;
    margin-left: -32px;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-top: 32px solid #E0E1E2;
}