/* ----- fonts */
body {
    color: #111111; font-family: 'Open Sans', sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5  {
    color: #1D1D1D; font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

h6, .h6  {
    color: #1D1D1D; font-family: 'Oswald', sans-serif;
}

/* ----- Handy styles for debugging */
.Bred   {border-color: red;   border-style: solid;  border-width: 2px;}
.Bblue  {border-color: blue;  border-style: solid;  border-width: 2px;}
.Bgreen {border-color: green; border-style: solid;  border-width: 2px;}

/* ----- Responsive text sizes */
legend      {font-size: calc(1.275rem + 0.3vw);}
h1, .h1     {font-size: calc(1.375rem + 1.5vw);}
h2, .h2     {font-size: calc(1.325rem + 0.9vw);}
h3, .h3     {font-size: calc(1.300rem + 0.6vw);}
h4, .h4     {font-size: calc(1.275rem + 0.3vw);}
.display-1  {font-size: calc(1.725rem + 5.7vw);}
.display-2  {font-size: calc(1.675rem + 5.1vw);}
.display-3  {font-size: calc(1.575rem + 3.9vw);}
.display-4  {font-size: calc(1.475rem + 2.7vw);}
.close      {font-size: calc(1.275rem + 0.3vw);}
body        {font-size: calc(0.800rem + 0.1vw);}

legend      {font-size: calc(2.167rem + 0.5vw);}
h1, .h1     {font-size: calc(2.1rem + 2.5vw);}
h2, .h2     {font-size: calc(1.8rem + 1.5vw);}
h3, .h3     {font-size: calc(1.6rem + 1.0vw);}
h4, .h4     {font-size: calc(1.4rem + 0.5vw);}
.display-1  {font-size: calc(2.933rem + 9.7vw);}
.display-2  {font-size: calc(2.848rem + 8.7vw);}
.display-3  {font-size: calc(2.677rem + 6.6vw);}
.display-4  {font-size: calc(2.508rem + 4.6vw);}
.close      {font-size: calc(2.167rem + 0.5vw);}
body        {font-size: calc(1.05rem);}

/* link style */

section a:link, section a:visited, section a:hover {
    text-decoration: underline !important;
    color: inherit!important;
}

.no-underline a:link, .no-underline  a:visited, .no-underline  a:hover {
    text-decoration: none !important;
    color: inherit!important;
}

a.no-underline:link, a.no-underline:visited, a.no-underline:hover {
    text-decoration: none !important;
    color: inherit!important;
}

a.btn:link, a.btn:visited, a.btn:hover {
    text-decoration: none !important;
    color: white!important;
    font-weight:550;
}



/* .navbar-custom.top-nav-collapse #loginlink span {box-shadow:none;} */

/* xs */    @media (max-width: 575px)   {}
/* sm */    @media (min-width: 576px)   {}
/* md */    @media (min-width: 768px)   {}
/* lg */    @media (min-width: 992px)   {}
/* xl */    @media (min-width: 1200px)  {}

/* ----- The navbar at the top of the page */

/* ----- The navbar at the top of the page */

.navbar {
    width: 100%;
}

.navbar-light {
    position: fixed !important;
    background-color: rgba(0,0,0,0) !important;
}

.navbar-dark {
    background-color:rgba(32,32,32,1) !important;
}

@media (max-width: 575px)   {.navbar {height: 50px;} .navbar-brand {height: 40px; width: 100px;} .topanchor {padding-top: 50px;margin-top: -50px;}}
@media (min-width: 576px)   {.navbar {height: 50px;} .navbar-brand {height: 40px; width: 100px;} .topanchor {padding-top: 50px;margin-top: -50px;}}
@media (min-width: 768px)   {.navbar {height: 65px;} .navbar-brand {height: 50px; width: 150px;} .topanchor {padding-top: 65px;margin-top: -65px;}}
@media (min-width: 992px)   {.navbar {height: 85px;} .navbar-brand {height: 70px; width: 210px;} .topanchor {padding-top: 85px;margin-top: -85px;}}
@media (min-width: 1200px)  {.navbar {height: 85px;} .navbar-brand {height: 70px; width: 210px;} .topanchor {padding-top: 85px;margin-top: -85px;}}

.navbar-dark  .navbar-logo                  {background-image: url(/img/logos/svipe-logo-wo.png);}
.navbar-light .navbar-logo                  {background-image: url(/img/logos/svipe-logo-ww.png);}
.navbar-light.navbar-shrink .navbar-logo    {background-image: url(/img/logos/svipe-logo-wo.png);}

.navbar-logo {
    height: 100%;
    background-position: left; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:contain; /* Resize the background image to cover the entire container */
}

/* ----- The navbar-shrink class is added when page is scrolled */

.navbar-light.navbar-shrink {
    background-color: rgba(32,32,32,1) !important;  
}


/* ----- Topher section fixes */

#tophero p.h4 {
    text-transform: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: calc(1.5rem + 0.5vw);
    /* font-style:; */
}

#tophero > div {
    background-position: 50% -8vw;
    background-size: cover !important;
}

@media (max-aspect-ratio: 10/10) {
    #tophero > div            {background-position: 60% 50%; background-size: cover !important;}
    #bushero > div            {background-position: 70% 50%; background-size: cover !important;}
    #business-coverage > div  {background-position: 80% 50%; background-size: cover !important;}
    #business-ai > div        {background-position: 75% 50%; background-size: cover !important;}
    #overview-features > div  {background-position: 80% 50%; background-size: cover !important;}
    #overview-secure > div    {background-position: 80% 50%; background-size: cover !important;}
    #solutions-features > div {background-position: 70% 50%; background-size: cover !important;}
}


/* ----- The navigation links at the top of the page */

.nav-link {
    font-family: 'Open Sans', sans-serif;
    font-size: calc(0.6rem + 0.5vw) !important;
    /* text-transform: uppercase; */
    font-weight: 600;
    text-align: right;
    padding-right: 10px !important;
}

.navbar-collapse.collapse .nav-link {
    color: white !important;
}

.navbar-collapse.show .nav-link {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0.9) 100%);
    font-size: calc(1rem + 0.5vw) !important;
    font-weight: 600;
    color: white !important;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}
.navbar-collapse.show .menu-buttons {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0.9) 100%);
    font-size: calc(1rem + 0.5vw) !important;
    font-weight: 600;
    color: white !important;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
}


.menu-buttons {
    white-space: nowrap;
}

.menu-buttons .btn {
    font-family: 'Open Sans', sans-serif;
    font-size: calc(0.6rem + 0.5vw) !important;
    /* text-transform: uppercase; */
    font-weight: 600;
    /* text-align: right; */
    /* padding-right: 10px !important; */
}

/* @media (min-width: 768px) {
} */

/* .navbar-collapse.show {
    display: none;
} */

/* ----- Fix the footer */

.footer {
    font-size: calc(0.95rem);
    line-height: 127%;
}
#footer {
    color:            white;
    background-color: black;  
}

#footer .container {
    padding-top:    1vh !important;
    padding-bottom: 1vh !important;
}

/* ----- Accordion */

.accordion .card-header {
    padding: .3rem 0.6rem !important;
}

.accordion .btn {
    color: black;
    padding: .3rem .2rem !important;
}

/* ----- Carousel */

.carousel-item.active .carousel-caption {
	transition: all 200ms linear;
	background: rgba(0, 0, 0, 0.3); 
}

.carousel-control-prev .fa-angle-left,
.carousel-control-next .fa-angle-right {
    color:black;
    font-size: 3em;
}

/* ----- utility classes for borders; enhancements of bs4 standard classes */

.border-2-black {
    border-color: black;
    border-style: solid; 
    border-width: 2px; 
}

.border-black   {border-color: black !important;}
.border-orange  {border-color: #DF7E22 !important;}
.border-1       {border-width: 1px !important;}
.border-2       {border-width: 2px !important;}
.border-3       {border-width: 3px !important;}
.border-4       {border-width: 4px !important;}
.border-5       {border-width: 5px !important;}

.rounded-xl {
    border-radius: 0.5em;
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22' style='stroke-width: 3px;'/%3E%3C/svg%3E");
}



.navbar-collapse {
    max-height: 100% !important;
    transition: max-height 0.1s cubic-bezier(0, 1, 0, 1) !important;
}

.features i {
    /* color:      black; */
    font-weight: 100;
}

.features li {
    padding-left: 2px;  
}

.greyed-out {
    color:rgba(0, 0, 0, 0.2);
}

.btn-rounded {
    border-radius: 10px;
}

.card {
    /* border-radius: 4px; */
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    background-color:rgba(56,190,239,.02);
    /* cursor: pointer; */
}

.card:hover {
    transform: scale(1.02);
    /* box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: white;;
}

.plan-price {
    color: orange;
    font-family: "Harmonia Sans W01", sans-serif;
    font-weight: 600;
    font-size: 1.8em;
}
.plan-pricing {
    /* width:      auto; */
    display: inline-block;
    text-align: left;
}

.plan .card-footer h6 {
    margin-bottom:  0.3em;
}

.plan .features {
    margin-bottom:  0.6em;  
}

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.Bred   {border-color: red;   border-style: solid;  border-width: 2px;}
.Bblue  {border-color: blue;  border-style: solid;  border-width: 2px;}
.Bgreen {border-color: green; border-style: solid;  border-width: 2px;}



.support-button {
    float: right;
    margin: 20px 20px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 999998;

    background-color: #cccccc !important;
    color: #535353 !important;
    fill: #535353 !important;
    /* padding: 0.74rem 1.44rem 0.90rem 1.21rem; */
    
    border: solid;
    border-color: #c0c0c0;
    border-width: 1px;
    /* border-radius: 999rem; */

    letter-spacing: 0.6; 
    font-size: 1.07143rem;
    font-weight: 600;
}

.support-label {
    vertical-align: -0.1em;
}

.modal-wide {
    width: initial;
}



/* @-moz-keyframes scroll {
    0%   { -moz-transform: translateX( 100%); }
    100% { -moz-transform: translateX(-100%); }
} */
    
/* @-webkit-keyframesOld scroll  {
    0%   { -webkit-transform: translateX( 100%); }
    100% { -webkit-transform: translateX(-100%); }
} */
/* @-webkit-keyframes scroll  {
    / * 0%   { -webkit-transform: translateX( 100%); } * /
    100% { -webkit-transform: translateX(-100%); }
} */

/* --- Cookieconsent --------------------------------------------------- */


#cookieconsent .cookies-approve,
#cookieconsent .cookies-decline {
    /* color:        #FFF !important; */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left:    5px;
    margin-right:   5px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

#cookieconsent .cookies-approve { background-color: #1967D2; }
#cookieconsent .cookies-decline { background-color: #999;}

#cookieconsent.modal  {
    background-color: rgba(0,0,0,0.6);
    z-index: 999999;
    box-sizing:unset !important;
}

#cookieconsent .modal-dialog {
    max-width: 100%;
    width: 600px;
    box-shadow: none;
}

#cookieconsent .modal-content {
    background-color: white;
}

#cookieconsent .modal-content {
    border-radius:      10px;
}


/* --- News ------------------------------------------------------------ */


#news .news-item {
    right: 0;
    margin: 0 0 15px;
}

#news .news-item .news-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#news .news-item .news-link .news-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;

    background: rgba({{ .primary_rgb }}, .9);
}

#news .news-item .news-link .news-hover:hover {
    opacity: 1;
}

#news .news-item .news-link .news-hover .news-hover-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#news .news-item .news-link .news-hover .news-hover-content i {
    margin-top: -12px;
}

#news .news-item .news-link .news-hover .news-hover-content h3,
#news .news-item .news-link .news-hover .news-hover-content h4 {
    margin: 0;
}

#news .news-item .news-caption {
    margin: 0 auto;
    padding: 25px;
    max-width: 400px;
    text-align: center;
}

#news .news-item .news-caption h4 {
    margin: 0;
    text-transform: none;
}

#news .news-item .news-caption p {
    margin: 0;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-style: italic;
}

#news * {
    z-index: 2;
}

@media(min-width:767px) {
    #news .news-item {
        margin: 0 0 30px;
    }
}

.news-date {
    margin-top: 15px;
    margin-bottom: 5px;
}

.news-modal .modal-content {
    padding: 100px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.news-modal .modal-content h2 {
    margin-bottom: 15px;
    font-size: 3em;
}

.news-modal .modal-content p {
    margin-bottom: 30px;
}

.news-modal .modal-content p.item-intro {
    margin: 20px 0 30px;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-style: italic;
}

.news-modal .modal-content ul.list-inline {
    margin-top: 0;
    margin-bottom: 30px;
}

.news-modal .modal-content img {
    margin-bottom: 30px;
}

.news-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.news-modal .close-modal:hover {
    opacity: .3;
}

.news-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #222;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.news-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #222;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}


.news-image {
  border-color: rgba(0, 0, 0, .0);
  border-style: solid;
  border-width: px;
  width: 250px;
  box-shadow: 0  6px 10px 0   rgba(0, 0, 0, .14), 0 1px 18px  0   rgba(0, 0, 0, .3), 0 3px  5px -1px rgba(0, 0, 0, .2)
}


.news-image:hover {
  border-color: rgba({{ .primary_rgb }}, .9);
}

.news-member {
  margin-bottom: 40px;
}


@keyframes scroll {
    0%      {transform: translateX(0);}
    100%    {transform: translateX(-4000px);}
}

.scroll {
    -moz-animation:     scroll 50s linear infinite;
    -webkit-animation:  scroll 50s linear infinite;
    animation:          scroll 50s linear infinite;
}

.scroll > span {
    display: block;
    white-space: nowrap;
    text-decoration: none;
}
.scroll > span a:link, 
.scroll > span a:visited, 
.scroll > span a:hover {
    text-decoration: none !important;
    color: inherit!important;
}

#contact-form {
    text-align: left;
}

#contact-form button {
    margin: 10px 0px;
    padding: 5px 20px;

    color: white !important;
    fill: #535353 !important;

    border: solid;
    background-color: #f76002;;
    border-color: #c44c02;
    border-width: 1px;
    border-radius: 999rem;

    letter-spacing: 0.6;
    font-size: 1.07143rem;
    font-weight: 550;
}

#contact-form button:hover {
    text-decoration: none !important;
    background-color: #d15102;
    border-color: #c44c02;
}