@import "sonj-components.css";
@import "cards.css";



.skip {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}

.skip:focus {
  color: black;
  display: inline-block;
  height: auto;
  width: auto;
  position: static;
  margin: auto;
}

.hero-logo {
  max-height: 70px;
  width: auto
}

.hero-caption {
  background-color: rgba(0, 0, 0, 0.7);
}

.pattern-overlay-3 {
  position: relative;
  z-index: 1;
}

#content h1 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
}

#content h1 .font-weight-bold {
  font-weight: 500 !important;
}

img.rounded-circle {
  border-radius: 50%;
  border: solid silver 1px;
  padding: 5px;
  margin: -5px;
  vertical-align: middle;
  position: relative;
  /*to send on top */
}

.card-chart .small {
  font-weight: 500 !important;
  font-size: 0.95em;
}

.card-chart h4 {
  font-weight: 500 !important;
  font-size: 1.3em;
}

.pattern-overlay-3 {
  content: "";
  /*background: url(/it/assets/slices/bg-gradient.png );
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  position: absolute;*/
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0c315c+0,1d84aa+39,1d84aa+64,0c315c+100 */
  background: rgb(2, 36, 76);
  background: -moz-radial-gradient(circle, rgba(2, 36, 76, 1) 0%, rgba(5, 99, 138, 1) 0%, rgba(2, 36, 76, 1) 78%);
  background: -webkit-radial-gradient(circle, rgba(2, 36, 76, 1) 0%, rgba(5, 99, 138, 1) 0%, rgba(2, 36, 76, 1) 78%);
  background: radial-gradient(circle, rgba(2, 36, 76, 1) 0%, rgba(5, 99, 138, 1) 0%, rgba(2, 36, 76, 1) 78%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#02244c", endColorstr="#02244c", GradientType=1);
}


.bg-color0 {
  background-color: #059ec8;
}

.bg-color1 {
  background-color: #5e6369;
}

.bg-gray {
  background-color: #5e6369;
}

.bg-gray-dark {
  background-color: #4c5359;
}

.bg-dark-blue {
  background-color: #022855;
  text-white;
}

.bg-bright-blue {
  background-color: #257ea2 !important;
  text-white;
}


.text-bright-blue {
  color: #48d4fc !important;
}

.text-white,
p.text-white {
  color: #fff !important;
}

.srv-box {
  line-height: normal;
  padding: 0.8em;
}

/*--Icons --*/
.round_icon {
  width: 90px;
  height: 88px;
  background-color: #fff;
  border: 1px solid #1b4378;
  border-top-color: rgb(92, 92, 94);
  border-right-color: rgb(92, 92, 94);
  border-bottom-color: rgb(92, 92, 94);
  border-left-color: rgb(92, 92, 94);
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  color: #032956;
}

.srv-box .card-text {
  color: #fff;
  padding: 0;
  line-height: 1.5;
}

/*----- Arrow Buttons---*/
a.btn-arrow {
  height: 36px;
  line-height: 36px;
  vertical-align: middle;
  text-align: center;
  padding: 0 15px;
  color: #ffffff;
  font-weight: 600;
  background-color: #195d77;
  position: relative;

}

/*a.btn-arrow:after{
    position:absolute;
    right:-19px;
    content:" ";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 18.9px 0 19px 19px;
    border-color: transparent transparent transparent #059ec8;
}*/
a.btn-arrow:hover {
  background-color: #0066cc;
}

a.btn-arrow:hover:after {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 25px 0 25px 20px;
  border-color: transparent transparent transparent #0066cc;
}

.card:hover .card-overlay {
  left: 0;
}

.border-top {
  border-top: 8px solid #102166 !important;
}

.btn-caption {
  text-transform: uppercase;
  color: #fff;
  background-color: #0420b2;
  padding: .375rem .75rem;
  border-radius: .2rem;
}

.btn-caption:hover {
  text-transform: uppercase;
  color: #fff;
  background-color: #0420b2;
  padding: .375rem .75rem;
  border-radius: .2rem;
}

.h3 header {
  color: #0050ff;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: -100%;
  background-color: rgba(85, 211, 150, 0.6);
  color: #fff;
  height: 100%;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: left .7s;
}

ol.breadcrumb a,
ol.breadcrumb {
  font-size: 98%
}

img.noscale {
  -o-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

.card-img-top,
.img-icon {
  width: 100%;
  height: auto !important;

}

.card-img-top-icon,
.img-icon {
  width: 100%;
  height: 100px;

}

*.card-img-top,
*.img-icon {
  min-height: 0.01px;
}

# Sections General --------------------------------------------------------------*/ section {
  padding: 60px 0 0 0;
  overflow: hidden;
}

section table {
  border-top: 4px solid #093e79;
}

section table th {
  color: #093e79;
  font-weight 400
}

section h4 {

  color: #37517e;
  font-weight: 400;

  margin-bottom: 15px;
}

.section-bg {
  background-color: #f3f5fa;
}

.section-title {
  text-align: left;
  padding-bottom: 30px;
  padding-top: 60px;
}

.section-title h3 {
  font-size: 32px;
  font-weight: 600;
  /*text-transform: uppercase;*/
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #37517e;
}

/*.section-title h3::before {
  content: '';
  position: absolute;
  display: block;
  width: 150px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h3::after {
  content: '';
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: #067f9d;
  bottom: 0;
  left: calc(50% - 20px);
}
*/

.section-title p {
  margin-bottom: 0;
}


/*--------------------------------------------------------------
# Resources
--------------------------------------------------------------*/
.rsrcs .row {
  padding-top: 0px;
}





.rsrcs h4 {

  color: #37517e;
  font-weight: 400;

  margin-bottom: 15px;
}



.rsrcs ul {
  margin: 0 20px 0;
  list-style: none;
  color: #333;
  text-align: left;
  line-height: 20px;
  border-top: 4px solid #093e79;
}

.rsrcs ul li {
  padding: 10px 0 10px 20px;
  position: relative;
}

.rsrcs ul i,
section i {
  color: #666 !important;
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 6px;
}

.rsrcs ul .na {
  color: #ccc;
}

.rsrcs ul .na i {
  color: #ccc;
}

.rsrcs ul ul {
  margin: 0 20px 0;
  list-style: none;
  color: #333;
  text-align: left;
  line-height: 20px;
  border-top: 0px solid #fff;
}

.rsrcs ul li {
  padding: 10px 0 10px 20px;
  position: relative;
}

.border-right {
  border-right: 1px dotted #059ec8 !important;
}

.slick-arrow {
  background-color: #fff
}

.fa-linkedin-in:hover {
  color: #0077B5;
}

.home-btn {
  color: white !important;
}

a:hover {
  text-decoration: underline !important;
}

.home-bottom-cards a:hover {
  color: white !important;
}

.navbar a:hover {
  text-decoration: none !important;
}

@media (max-width: 767.98px) {
  .border-right {
    border-right: 0 none !important;
  }

  .border-tpcs {
    margin-bottom: 2rem;
  }

}

/* Fix for phone in header */
@media (max-width: 1836px) {
  .nav-link-customer > a { display: inline-block; margin-left: 0 !important; }
  #it-pNav1 { white-space: nowrap; }
}

@media (max-width: 1200px) {
  .navbar-nav > .nav-item { padding-right: .5em !important; }
  .navbar.navbar-expand-lg.navbar-dark { margin-top: 0 !important; }
}

/* Vendors Section */
.vendors-section {
  background-color: #1C5C83 !important;
}

.vendors-section img {
  border: 2px solid white;
  width: 11rem;
}

.vendors-section h4 {
  font-weight: 500;
}

.vendors-section .btn {
  background-color: #092854 !important;
  font-weight: 400;
}

.vendors-section .btn:hover {
  background-color: #0066cc !important;
}