#sp-header .logo:before {content: url(../images/logo-circle.png);margin-right: 5px;}
#sp-header .logo:hover:before {content: url(../images/logo-circle-hover.png);margin-right: 5px;}
#sp-header .logo a:hover {color:#fff}
#sp-right .sp-column {overflow: hidden;height: 100vh;}
.offcanvas-menu .logo a:hover {color:#fdbb36}
.offcanvas-menu .logo:before {content: url(../images/logo-circle.png);margin-right: 5px;}
.offcanvas-menu .logo {font-size: 1rem}
#sp-header {box-shadow: none}
.btn {border-radius: 0;}
.homevideo {position: relative;display: inline-block;width: 50vw;}
video {width: 100% !important;height: 100% !important;}
.scd-logo {position: absolute;width: 50%;left: 20%;top: 50vh;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.homeblock {}
.homeblock h1 {font-size: 5vw;text-align: right;color: #4A4540;}
.homeblock h2 {font-size: 1.5vw;color: #fdbb36;text-align: right;}
.homeblock .btn {background-color:#4A4540;border-color:#4A4540;margin: 15px 0px 0px 5px;text-transform: uppercase;}
.homeblock .btn:hover {background-color: #fdbb36;border-color: #fdbb36}
#sp-component {display: grid;align-items: center;justify-content: center;}
.home #sp-component .sp-column {align-self: auto !important;width: 50vw;margin: 0 auto;}
#sp-component .sp-column {align-self: auto !important;width: 90vw;margin: 0 auto;}
.profile-list {border-left: solid 1px #ccc;padding: 0px 0px 0px 10px;}
.profile-list li {position: relative;list-style: none;margin-bottom: 10px;padding: 0px 0px 10px 10px;border-bottom: solid 1px #eee;}
.profile-list li:before {display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;-webkit-font-smoothing: antialiased;font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f1ce";left: -17px;position: absolute;color: #ccc;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.modal-menu {max-width: 1024px;}

@media screen and (max-width:576px){
  #sp-header .logo a {font-size: 18px}
  #sp-component .sp-column {height: auto;width: 90vw;}
  .homeblock h1 {font-size: 9vw}
  .homeblock h2 {font-size: 3vw;}
}
@media screen and (max-width:768px){
  #sp-main-body {padding: 30px 0px 0px 0px !important;}
  .home #sp-component {margin: 70px 0px 15px 0px;}
    .home #sp-component .sp-column {height: auto;width: 90vw;}
    .homevideo{width: 100vw;}
    .scd-logo {top: 15%;left: 12.5%;width: 75%}
    .page-header.page-header {padding-bottom: 0px}
    .container .card.card {max-width: inherit;height: inherit;margin: 0px 0px 30px 0px;padding: 0px;}
    .container .card .imgContainer.imgContainer {width: auto;height: auto;top: 0px;left: 0px;}
    .container .card .imgContainer img {margin: 0 auto}
      .container .card .content.content {visibility: visible;opacity: unset;margin-top: unset;padding: 10px 5px 0px 5px;}
}
@media screen and (max-width:992px){
  #sp-component .sp-column {height: auto;}
  .content a { display:inline-block;
   font-weight:400;
   line-height:1.5;
   color:#212529;
   text-align:center;
   text-decoration:none;
   vertical-align:middle;
   cursor:pointer;
   -webkit-user-select:none;
   -moz-user-select:none;
   user-select:none;
   background-color:transparent;
   border:1px solid transparent;
   padding:.375rem .75rem;
   font-size:1rem;
   border-radius:.25rem;
   transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; background-color: #fdbb36}
   .modal-dialog {margin-top: 5.75rem;}
}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
#sp-main-body {padding: 30px 0px 0px 0px !important;}
.page-header.page-header {padding-bottom: 0px}
.portfoliocontainer {padding: 0px;}
.container .card.card {max-width: 350px;min-height: 480px;height: inherit;margin: 0px 0px 30px 0px;padding: 0px;}
.container .card.card:nth-child(odd) {margin-right: 20px;}
.container .card .imgContainer.imgContainer {width: auto;height: auto;top: 0px;left: 0px;}
  .container .card .content.content {visibility: visible;opacity: unset;margin-top: unset;padding: 10px 10px 0px 10px;}
}


.card {border-radius: 0px}
  .container .card {
      max-width: 400px;
      height: 245px;
      margin: 30px 10px;
      padding: 20px 15px;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
      transition: 0.3s ease-in-out
  }

  .container .card:hover {
      height: 450px
  }

  .container .card .imgContainer {
      position: relative;
      width: 350px;
      height: 250px;
      top: -50px;
      left: 10px;
      z-index: 1;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2)
  }

  .container .card .imgContainer img {
      max-width: 100%;
  }

  .container .card .content {
      position: relative;
      margin-top: -140px;
      padding: 10px 15px;
      text-align: center;
      color: #111;
      visibility: hidden;
      opacity: 0;
      /*pointer-events: none;*/
      transition: 0.3s ease-in-out
  }

  .container .card:hover .content {
      visibility: visible;
      opacity: 1;
      margin-top: -40px;
      transition-delay: 0.3s
  }

  @media (max-width: 330px) {
      .container .card .imgContainer {left: -2px}
  }
  @media (min-width:576px) {
 .modal-dialog {
  /*max-width:1024px;*/
  margin:5.75rem auto
 }
}