/*

Theme Name: Projekty Fundacja VCC - radomski

Description: Strona projektowa Fundacja VCC

Author: Paweł Nowicki

Author URI:

Version: 2.0

*/



html {

  font-size: 62.5%;

}



body {

  font-family: 'Roboto', sans-serif;

  font-weight: 300;

  font-size: 2rem;

  line-height: 1.5;

  color: #777777;

  color: #7f7f7f;

  background: #fff;

  height: 100%;

  position: relative;

  z-index: 1;

}



.top-bar {

  width: 100%;

  background: #474c55;

  border-bottom: 3px solid #a3a5aa;

  padding: 0.625rem 0;

}



.logo {

  line-height: 40px;

}



.social-bar {

  margin: 0;

  height: 40px;

  text-align: center;

  padding: 0;

  line-height: 40px;

}



.social-bar i:hover {

  color: #d2ab67;

  transition: color 0.5s ease;

}



.social-bar ul {

  list-style-type: none;

  text-decoration: none;

}



.social-bar li {

  display: inline-block;

  font-size: 1.8rem;

  padding: 8px 10px;

}



.social-bar li i {

  color: #fff;

}



.row {

  margin: 0;

}



.center {

  margin: auto;

  height: 53px;

  padding: 0;

}



.bar-wrapper {

  width: 96%;

  margin: 0 auto;

}



.navbar-brand img {

  float: left;

  padding-right: 5px;

}



.logo-vcc {

  width: 50px;

}



.logo-vcc-text {

  padding-top: 4px;

}



a {

  color: #333333;

  -webkit-transition: 0.3s;

  -o-transition: 0.3s;

  transition: 0.3s;

}



a:hover,

a:active,

a:focus {

  color: #d2ab67;

  outline: none;

}



p {

  margin-bottom: 1.5em;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: #000;

  font-family: 'Roboto', sans-serif;

  font-weight: 400;

  margin: 0 0 30px 0;

}



#page-header {

  position: absolute;

  z-index: 99;

  width: 100%;

  opacity: 1;

  top: 0;

  margin-top: 0;

}



#page-header .navbar {

  padding-bottom: 0;

  margin-bottom: 0;

}



#page-header #navbar li a {

  font-family: 'Roboto Condensed'sans-serif;

  color: rgba(255, 255, 255, 0.5);

  position: relative;

  font-size: 1.9rem;

  font-weight: 300;

}



#page-header #navbar li a span {

  position: relative;

  display: block;

  padding-bottom: 2px;

}



#page-header #navbar li a span:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 2px;

  bottom: 0;

  left: 0;

  background-color: #f7eedd;

  visibility: hidden;

  -webkit-transform: scaleX(0);

  -moz-transform: scaleX(0);

  -ms-transform: scaleX(0);

  -o-transform: scaleX(0);

  transform: scaleX(0);

  -webkit-transition: all 0.3s ease-in-out 0s;

  -moz-transition: all 0.3s ease-in-out 0s;

  -ms-transition: all 0.3s ease-in-out 0s;

  -o-transition: all 0.3s ease-in-out 0s;

  transition: all 0.3s ease-in-out 0s;

}



#page-header #navbar li a:hover {

  color: #fff;

}



#page-header #navbar li a:hover span:before {

  visibility: visible;

  -webkit-transform: scaleX(1);

  -moz-transform: scaleX(1);

  -ms-transform: scaleX(1);

  -o-transform: scaleX(1);

  transform: scaleX(1);

}



#page-header #navbar li.active a {

  background: transparent;

  background: none;

  color: #fff;

}



#page-header #navbar li.active a span:before {

  visibility: visible;

  -webkit-transform: scaleX(1);

  transform: scaleX(1);

}



#page-header .navbar-brand {

  float: left;

  display: block;

  font-size: 3rem;

  font-weight: 700;

  color: rgb(255, 255, 255);

  padding: 11px 11px 11px 0px;

}



#page-header .navbar-default {

  border: transparent;

  background: transparent;

  -webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  -ms-border-radius: 0px;

  border-radius: 0px;

}





/*MEDIA Queries*/



@media screen and (max-width: 768px) {

  #page-header .navbar-default {

    margin-top: 0px;

    padding-right: 0px;

    padding-left: 0px;

  }

  #navbar li a {

    color: #555;

    padding: 10px;

    border-bottom: 1px solid #404040;

    display: block;

    margin: 0;

    padding: 50px;

    font-size: 3.9rem !important;

  }

  /*	BURGER   */

  #navbar {

    width: 100vw;

    visibility: hidden;

    opacity: 0;

    overflow: hidden;

    background: #555;

    height: 100vh;

    transition: all 0.3s ease-in-out;

    position: fixed;

    left: 0px;

    top: 0px;

    margin: 0 !important;

    padding: 0;

  }

  #navbar::before{

    margin-top: 100px;

  }

  #navbar.open {

    visibility: visible;

    opacity: .97;

    height: 100vh;

    width: 100vw;

    border: 1px solid #888;

    position: fixed;

    left: 0px;

    top: 0px;

    margin: 0 !important;

    padding: 0;

    transition: all 0.5s ease-in-out;

  }

  #navbar li {

    float: none;

    text-align: center;

    width: 100%;

    margin: 0;

  }

  .social-bar {

    display: none;

  }

  .pagination {

    display: inline-block !important;

  }

  #page-header #navbar li a span:before {

    width: 40%;

    left: 30%;

    right: 30%;

  }

  @media screen and (max-width: 768px) {

    #page-header #navbar li a span:before {

      height: 0px !important;

    }

  }

  .google-maps {

    display: none;

  }

  .project-logo img {

    max-width: 430px !important;

    /* min-width: 100px; */

    max-width: 100px;

    padding-top: 10px;

  }

  .eu-logo {

    position: relative !important;

  }

  .navbar-nav {

    margin: 6px -8px !important;

  }

  #page-header .navbar-brand {

    padding: 3px 11px 11px 0px;

  }

  .single-blog-post {

    height: auto;

  }

  #footer {

    background: #474c55;

  }

}



@media screen and (max-width: 995px) {

  .single-blog-post {

    height: auto !important;

  }

  .single-blog-post img {

    display: none !important;

  }

  .pagination-buttons {

    margin-top: 20px !important;

    position: static !important;

  }

  .post-section {

    text-align: center;

  }

  .pagination-button-previous {

    float: none !important;

  }

  .nav-container {

    text-align: center;

  }

  .social-bar li {

    padding: 8px 5px !important;

  }

  .project-logo img {

    max-width: 430px !important;

  }

}



#page-header .navbar-default .brand-slogan em {

  color: #52d3aa;

  font-style: normal;

}



#page-header a {

  -webkit-transition: 0s;

  -o-transition: 0s;

  transition: 0s;

}



#home {

  background-color: transparent;

  background-size: cover;

  background-attachment: fixed;

  position: relative;

  width: 100%;

  color: #fff;

  overflow: hidden;

  z-index: 3;

  border-bottom: 4px solid #d7b56e;

}



#home .gradient {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 2;

  opacity: 1;

  background-color: #d2ab67;

}



#home .text-wrap {

  height: 500px;

}



#home .small {

  height: 220px !important;

  display: table;

  width: 100%;

  position: relative;

  z-index: 3;

}



#home .text-wrap {

  display: table;

  width: 100%;

  position: relative;

  z-index: 3;

}



#home .text-inner {

  display: table-cell;

  vertical-align: bottom;

  text-align: center;

  padding-bottom: 40px;

}



@media screen and (max-width: 1199px) {

  #home .text-inner {

    padding-bottom: 25px;

  }

}



@media screen and (max-width: 1160px) {

  #home .text-inner {

    padding-bottom: 0px;

  }

  #home .text-inner h2 {

    line-height: 31px !important;

  }

}



#home .text-inner a {

  text-decoration: none;

  color: white;

}



#home .text-inner h1 {

  font-size: 4rem;

  color: white;

  margin: 0 0 20px 0;

  letter-spacing: 4px;

  font-weight: 200;

}



#home .text-inner h2 {

  font-size: 2rem;

  line-height: 38px;

  font-weight: 300;

  color: rgba(255, 255, 255, 0.8);

  margin: 0;

  letter-spacing: 4px;

}



.inner-box-text {

  position: absolute;

  background-color: #fff;

  content: "";

  z-index: 3;

  display: inline-block;

  height: 70px;

  bottom: 0;

  margin-bottom: -35px;

  padding: 0;

  width: 103%;

}



#main-boxes {

  position: relative;

  bottom: 0;

  margin-top: -150px;

  padding-bottom: 7em;

  background: #fff;

}



@media screen and (max-width: 768px) {

  #main-boxes {

    padding-bottom: 3em;

  }

}



#main-boxes>div {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  flex-wrap: wrap;

  -webkit-flex-wrap: wrap;

  -moz-flex-wrap: wrap;

}



#main-boxes .box-block {

  width: 25%;

  float: left;

  text-align: center;

  font-size: 1.6rem;

  min-height: 300px;

  max-height: 330px;

  vertical-align: middle;

  padding: 40px;

  background: #fff;

  -webkit-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);

  -moz-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);

  -ms-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);

  -o-box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);

  box-shadow: 7px 10px 40px 3px rgba(163, 174, 184, 0.4);

  z-index: 7;

  flex-grow: 1;

  background-size: cover;

  position: relative;

  backgroun-repeat: no-repeat;

}



@media screen and (max-width: 768px) {

  #main-boxes .box-block {

    width: 100%;

  }

}



#main-boxes .box-block>.overlay-darker {

  z-index: 8;

  opacity: .5;

  background: #474747;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#main-boxes .box-block>.overlay {

  background: #fff;

  opacity: 1;

  z-index: 9;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  -webkit-transition: 0.5s;

  -o-transition: 0.5s;

  transition: 0.5s;

}



#main-boxes .box-block>.box-text {

  position: relative;

  z-index: 10;

}



#main-boxes .box-block h2 {

  font-size: 2.4rem;

  font-weight: 400;

}



#main-boxes .box-block:hover>.overlay,

#main-boxes .box-block:focus>.overlay {

  opacity: 0;

  z-index: 9;

}



#main-boxes .box-block:hover>.box-text,

#main-boxes .box-block:focus>.box-text {

  color: #fff;

}



#main-boxes .box-block:hover>.box-text .intro-icon,

#main-boxes .box-block:focus>.box-text .intro-icon {

  color: #fff;

}



#main-boxes .box-block:hover h2,

#intro .box-block:focus h2 {

  color: #fff;

}



#main-boxes .box-block:hover .btn,

#intro .box-block:focus .btn {

  border: 2px solid #fff !important;

  background: transparent;

}



#main-boxes .box-block:hover .btn:hover,

#intro .box-block:focus .btn:hover {

  background: #d2ab67 !important;

  border: 2px solid #d2ab67 !important;

}



.form-control {

  box-shadow: none;

  background: transparent;

  border: 2px solid rgba(0, 0, 0, 0.1);

  height: 54px;

  font-size: 1.8rem;

  font-weight: 400;

}



.form-control:active,

.form-control:focus {

  outline: none;

  box-shadow: none;

  border-color: #52d3aa;

}



.btn {

  -webkit-transition: 0.5s;

  -o-transition: 0.5s;

  transition: 0.5s;

}



.btn:hover,

.btn:active,

.btn:focus {

  outline: none;

}



#fh5co-contact {

  padding-bottom: 0;

}



#fh5co-contact .fh5co-contact-info {

  padding: 0;

  margin: 0 0 1.5em 0;

}



#fh5co-contact .fh5co-contact-info li {

  position: relative;

  padding: 0;

  margin: 0 0 1.5em 0;

  padding-left: 50px;

  list-style: none;

}



#fh5co-contact .fh5co-contact-info li i {

  position: absolute;

  top: .2em;

  left: 0;

}



.btn {

  -webkit-transition: 0.3s;

  -o-transition: 0.3s;

  transition: 0.3s;

}





/* BURGER */



.burger-nav {

  display: none;

  position: absolute;

  top: 12px;

  right: 9px;

  z-index: 21;

  width: 30px;

  height: 25px;

  cursor: pointer;

  text-decoration: none;

}



.burger-line {

  display: block;

  position: absolute;

  left: 0px;

  width: 100%;

  height: 4px;

  background: #F7F7F7;

  -webkit-transition: all 800ms ease;

  -moz-transition: all 800ms ease;

  -ms-transition: all 800ms ease;

  -o-transition: all 800ms ease;

  transition: all 800ms ease;

  transform-origin: center center;

}



.line-1 {

  top: 0px;

}



.line-2 {

  top: 10px;

}



.line-3 {

  top: 20px;

}



.burger-nav.active {

  position: fixed;

  top: 18px;

  right: 22px;

}



.burger-nav.active .line-1 {

  transform: translateY(10px) rotate(45deg) !important;

}



.burger-nav.active .line-2 {

  opacity: 0 !important;

}



.burger-nav.active .line-3 {

  transform: translateY(-10px) rotate(-45deg) !important;

}



@media screen and (max-width: 768px) {

  .burger-nav {

    display: block;

  }

}





/*BUTTONS*/



.btn {

  text-transform: uppercase;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  -o-transition: 0.3s;

  transition: 0.3s;

  border-radius: 50px;

}



.btn.btn-primary {

  background: #474c55;

  color: #d2ab67;

  border: none !important;

  border: 2px solid transparent !important;

}



.btn.btn-primary:hover,

.btn.btn-primary:active,

.btn.btn-primary:focus {

  box-shadow: none;

  background: #d2ab67;

}



.btn:hover,

.btn:active,

.btn:focus {

  background: #393e46 !important;

  color: #fff;

  outline: none !important;

}



.btn.btn-default:hover,

.btn.btn-default:focus,

.btn.btn-default:active {

  border-color: transparent;

}



.nav-pills li a {

  background: #393e46;

  color: #d2ab67;

  max-height: 50px;

  font-size: 1.6rem;

  border-radius: 0px;

  border-right: 4px solid #d2ab67;

}



.nav-pills li a:hover {

  margin-right: 10px;

  border-radius: 0 10px 10px 0;

  background: #393e46;

  color: #d2ab67;

  font-size: 1.6rem;

  padding-left: 34px;

}



@media screen and (min-width: 1820px) {

  .nav-pills li a {

    font-size: 2.2rem;

  }

  .nav-pills li a:hover {

    font-size: 2.4rem;

  }

}



@media screen and (max-width: 1270px) {

  .nav-pills li a {

    font-size: 1.1rem;

  }

  .nav-pills li a:hover {

    font-size: 1.2rem;

  }

}



.nav-pills li:hover a::after {

  content: "\f105";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  position: absolute;

  right: 18px;

}



@media screen and (max-width: 480px) {

  .col-xxs-12 {

    float: none;

    width: 100%;

  }

}



.row-bottom-padded-lg {

  padding-bottom: 7em;

}



@media screen and (max-width: 768px) {

  .row-bottom-padded-lg {

    padding-bottom: 2em;

  }

}



.row-bottom-padded-md {

  padding-bottom: 4em;

}



@media screen and (max-width: 768px) {

  .row-bottom-padded-md {

    padding-bottom: 2em;

  }

}



.row-bottom-padded-sm {

  padding-bottom: 2em;

}



@media screen and (max-width: 768px) {

  .row-bottom-padded-sm {

    padding-bottom: 2em;

  }

}





/*POSTS SECTION*/



.post-section {

  border-left: 2px solid #d2ab67;

  min-height: 366px;

}



.post-section img {

  padding-bottom: 0px;

}



.nav-container {

  padding: 10px 0;

  background: #fff;

}





/*FOOTER*/



#footer {

  padding: 80px 0;

  height: 400px;

  color: #fff;

  position: relative;

  z-index: -1;

}



#footer .copyright {

  font-size: 1.6rem;

  margin-bottom: 0px;

  padding-bottom: 0;

}



footer.full-width {

  /* background-color: #474c55; */

  padding-top: 3rem;

  z-index: -2;

}



@media screen and (max-width: 768px) {

  footer.full-width {

     background-color: #474c55; 

  }

  

  .blurred-background {

    border: 0px !important;

    background-image: none !important;

  }

}



#footer h4 {

  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

  text-transform: uppercase;

  font-size: 20px;

  font-weight: 700;

  color: #d7b56e;

  border-bottom: 1px solid #52575f;

  padding-bottom: 10px;

}



#footer ul li {

  list-style-type: none;

  border-bottom: 1px solid #52575f;

  padding: 5px 0;

}



#footer ul li a {

  color: #fff;

  font-size: 1.6rem;

}



#footer ul li a:before {

  margin-right: 0.4375rem;

}


.contact {

  padding-left: 0;

  font-size: 1.6rem;

}



.contact li,

strong {

  font-size: 1rem;

}



.col-md-10 strong {

  font-size: 2.2rem;

}



.contact-box strong {

  font-size: 1rem !important;

}



.contact-box {

  padding-left: 0px;

  text-align: center;

  padding-top: 18px;

  padding-bottom: 20px;

}

.iso img {
  width: 100%;
}




@media screen and (max-width: 768px) {

  .contact-box {

    padding-top: 0px; 

    padding-bottom: 0px; 

  }

}



.contact-box h4 {

  padding-left: 0 !important;

}



.contact-box p {

  text-align: center !important;

}



.contact-for {

  padding-top: 20px;

}



.contact-for p {

  font-size: 1.4rem;

  margin-bottom: 0;

}





/*POSTS*/



.post {

  padding-top: 40px;

}



.gallery {

  display: inline-block;

  margin-top: 20px;

}



.single-post {

  padding: 20px 0 0 0;

}



.single-post p {

  text-align: justify;

}



.single-blog-post {

  padding: 0;

  margin-bottom: 11px;

  margin-top: 11px;

  overflow: hidden;

}



.main-single-blog-post {

  height: 291px;

  padding: 0 10px;

  text-align: center;

  font-size: 1.7rem;

}



.single-blog-post a {

  opacity: 1;

  font-weight: bold;

}



.single-blog-post a:hover {

  opacity: 0.9;

}





/*LOGOTYPES*/



.eu-logo {

  position: absolute;

  top: 105px;

  left: 10px;

}



.eu-logo img {

  max-width: 350px;

  background: transparent;

}



@media screen and (max-width: 1366px) {

  .eu-logo {

    top: 112px;

    left: 10px;

  }

  .eu-logo img {

    max-width: 290px;

  }

}



@media screen and (max-width: 1160px) {

  .eu-logo {

    top: 68px;

    left: 50%;

    transform: translateX(-50%);

  }

}





/*PROJECT LOGO*/



.project-logo img {

  height: 100px;

  padding-top: 10px;

}



#partners-brand {

  background: white;

  border-top: 3px solid #d7b56e;

}



.partners {

  padding-bottom: 80px;

  padding-top: 50px;

}



.partner-logo {

  margin: auto;

  padding: 20px;

}



.partner-logo img {

  vertical-align: middle;

  max-width: 300px;

}



.clearfix {

  clear: both;

}



.title h2 {

  font-size: 2.2rem;

  font-weight: 500;

  background: #fff;

  color: #555;

  padding: 8px;

  text-align: center;

  width: 250px;

  text-transform: uppercase;

  position: relative;

  top: 22px;

  margin: 0 auto;

  border-left: 16px solid #fff;

  border-right: 16px solid #fff;

}



.partners-brand {

  border-top: 2px solid #ccc;

  padding-top: 30px;

}



.partners-text {

  height: 302px;

  padding: 48px 20px;

  position: relative;

}



.partners-text p {

  text-align: justify;

  overflow: auto;

  overflow-y: auto;

  overflow-x: hidden;

  height: 200px;

  margin: 0 !important;

  font-size: 1.6rem;

}



.title {

  background: #fff;

}



.google-maps {

  height: 500px;

  width: 100%;

  position: fixed;

  bottom: -23px;

  left: 0;

  z-index: -1;

}





/*CONTACT*/





/*BLOG SECTION*/



.blog-container {

  border-bottom: 11px solid #d7b56e;

  background: #fff;

}



.published {

  width: 50px;

  height: 50px;

  color: black;

  z-index: 50;

}



.posts img {

  width: 100%;

  height: 100%;

  background-size: cover;

  max-height: 276px;

}



.date {

  margin-bottom: 0;

}



.date a {

  text-decoration: none;

  color: #333333;

}



.btn-primary p {

  margin-bottom: 0;

}



.full-size {

  background: #fff;

  border-bottom: 11px solid #d7b56e;

}



.single-aside {

  text-align: center;

  font-size: 2rem;

  font-weight: bold;

}





/*PAGNINATION*/



.pagination {

  display: block;

  padding: 0;

  height: 50px;

}



.pagination-button-previous {

  list-style-type: none;

}



.pagination-button-next {

  float: right;

  list-style-type: none;

}



.pagination-buttons {

  /* background: #474c55; */

  color: #d2ab67;

  border: none;

  border: 2px solid transparent;

  text-transform: uppercase;

  letter-spacing: 2px;

  -webkit-transition: 0.3s;

  -o-transition: 0.3s;

  transition: 0.3s;

  border-radius: 8px;

  display: inline-block;

  margin-bottom: 0;

  text-align: center;

  vertical-align: middle;

  touch-action: manipulation;

  cursor: pointer;

  border: 1px solid transparent;

  padding: 16px 10px;

  font-size: 1.1rem;

  line-height: 1.42857;

  /* position: absolute;

  bottom: 2px;

  left: 50%;

  transform: translateX(-50%); */

  margin-top: 12px;

  margin-bottom: 13px;

}



.pagination-buttons:hover {

  transition: All 1s ease;

  -webkit-transition: All 1s ease;

  -moz-transition: All 1s ease;

  -o-transition: All 1s ease;

  transform: rotate(-2deg) scale(1.1) skew(.2deg) translate(-50px);

  -webkit-transform: rotate(-2deg) scale(1.1) skew(.2deg) translate(-50px);

  -moz-transform: rotate(-2deg) scale(1.1) skew(.2deg) translate(-50px);

  -o-transform: rotate(-2deg) scale(1.1) skew(.2deg) translate(-50px);

  -ms-transform: rotate(-2deg) scale(1.1) skew(.2deg) translate(-50px);

}



.pagination>.pagination-buttons {

  position: absolute;

  bottom: 6px;

  left: 90px;

}



.pagination-buttons a:hover {

  box-shadow: none;

  background: #393e46;

  color: #fff;

  border-color: #122b40;

  outline: none;

  text-decoration: none;

}



.pagination-buttons a {

  color: #d2ab67;
  background: #474c55;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 4px 7px;

}





/*CONTACT 2*/



.contact-box-2 {

  text-align: center;

  box-shadow: -4px 5px 14px 1px rgba(163, 174, 184, 0.4);

  border: 1px solid #7f7f7f26;

  border-radius: 6px;

  margin-top: 30px;

  margin-bottom: 30px;

  height: 300px;

  padding: 30px;

  transition: all .5s;

}



@media screen and (max-width: 1530px) {

  .contact-box-2 h2 {

    font-size: 2.2rem;

  }

  .contact-for p:nth-child(2) {

    font-size: 0.9rem;

    margin-top: 10px;

  }

}



.contact-box-2:hover {

  box-shadow: 4px 7px 48px 7px rgba(71, 76, 85, 0.34901960784313724);

  transition: all .5s;

  transform: translate(3px, -3px);

}



.contact-data {

  margin-top: 0px;

  height: 0px;

  overflow: hidden;

  -webkit-transition: all 300ms linear 0s;

  -o-transition: all 300ms linear 0s;

  transition: all 300ms linear 0s;

  opacity: 0;

}



.contact-box-2:hover .contact-data {

  height: 30px;

  overflow: visible;

  opacity: 1;

  margin-top: 25px;

  -webkit-transition: all 300ms linear 0s;

  -o-transition: all 300ms linear 0s;

  transition: all 300ms linear 0s;

}



.contact-box-2:hover .project-name {

  display: none;

  transition: all 1s;

}



.fa-user {

  font-size: 8rem;

}



.project-name {

  position: relative;

  bottom: -47px;

}



#map {

  height: 500px;

}



.table-header {

  padding-top: 30px;

}



.tab-content {

  padding-bottom: 30px;

}



.tab-content div p::before {

  padding-right: 10px;

  content: "\f015";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

}



.tab-content div a::before {

  padding-right: 10px;

  content: "\f015";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

}



.tab-content div p {

  max-height: 30px;

}



.nav-tabs li a::before {

  content: "";

  display: table;

  background-image: url(img/logo/kul.png);

}



.blog-text {

  height: 97%;

  border: 1px solid #e5e5e3;

  border-radius: 11px;

  background: rgba(196, 195, 192, 0.11);

  transition: all .5s;

}



@media screen and (max-width: 768px) {

  .blog-text {

    margin: 8px 0px;

  }

}



.blog-text:hover {

  box-shadow: -4px 5px 14px 1px rgba(163, 174, 184, 0.4);

  transition: all .5s;

  transform: translate(3px, -3px);

}



.blog-text h2 {

  margin-top: 4px;

  max-height: 65px;

  overflow: hidden;

}



.about-us {

  font-size: 2rem !important;

  text-align: justify;

}





/*scroll-bars:*/



::-webkit-scrollbar {

  width: 12px;

}



::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

  border-radius: 10px;

}



::-webkit-scrollbar-thumb {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);

}





/*LOGO PAGE ANIMATION*/



.cont {

  width: 400px;

  height: 200px;

  overflow: hidden;

  background: none;

  margin: auto;

}



.anm {

  height: 51%;

  position: relative;

  left: 110px;

  transform: translatey(50%);

  -webkit-animation-name: example;

  /* Safari 4.0 - 8.0 */

  -webkit-animation-duration: 10s;

  /* Safari 4.0 - 8.0 */

  animation-name: anm;

  animation-duration: 10s;

  animation-iteration-count: 100;

  animation-delay: 2s;

}



@-webkit-keyframes anm {

  0% {

    left: 110px;

  }

  25% {

    left: -168px;

  }

  50% {

    left: -640px;

  }

  75% {

    left: -168px;

  }

  100% {

    left: 110px;

  }

}



@keyframes anm {

  0% {

    left: 110px;

  }

  25% {

    left: -168px;

  }

  50% {

    left: -640px;

  }

  75% {

    left: -168px;

  }

  100% {

    left: 110px;

  }

}







/*Accesibility*/



#navbar li a:focus,

#navbar li a:active {

  background: #4B4B4B !important;

  border: 2px solid #FFFFFF !important;

  color: #FFFFFF !important;

}



.aicon_link {

  position: fixed !important;

  bottom: 0 !important;

  right: 0 !important;

  left: 0 !important;

}





/*FOOTER BLURRED BOX*/



.blurred-background {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: 1;

  background: none;

  border: 2px solid #393e46;

  opacity: 0.6;

  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.17));

  -webkit-filter: blur(5px);

  -moz-filter: blur(5px);

  -o-filter: blur(5px);

  -ms-filter: blur(5px);

  filter: blur(5px);

}





/* SLIDEOUT */



.slideout-widget {

  position: fixed;

  right: -12px;

  top: 15%;

  transition: all .4s;

  width: 65px;

  z-index: 10;

}



.slideout-widget:hover {

  right: 74px;

}



.slideout-widget:hover>.slideout-widget-content {

  width: 5em;

  transition: all .5s;

}



.slideout-widget:hover>.slideout-widget-content:before {

  /* left: 116px; */

  transition: all .5s;

}



.slideout-widget-content {

  position: absolute;

  width: 5em;

  background: #eee;

  border-radius: 5px 0 0 5px;

  padding: 0 11px;

  font-size: 31px;

  border-width: 1px 0;

  overflow: hidden;

  z-index: 11;

  opacity: .7;

  cursor: pointer;

  transition: all .5s;

}



.slideout-widget-content:before {

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  content: "\f193";

  font-size: 18px;

  position: relative;

  left: 4px;

  top: -4px;

  transition: all .4s;

}



.slideout-widget:hover>.slideout-widget-content>.fa-big {

  display: inline-block;

}



.slideout-widget:hover>.slideout-widget-content>.fa-small {

  display: inline-block;

}



.bg-banner {

  background: linear-gradient(90deg, rgba(71, 76, 85, 0.79), rgba(215, 181, 110, 0.83), rgba(71, 76, 85, 0.69)), url(img/VCC_Banner_3.jpg) no-repeat center center fixed;

  width: 100%;

  height: 429px;

  background-repeat: no-repeat;

  background-position: center top;

  border-bottom: 3px solid #d7b56e;

}



.fa-big{

  display: none;

  margin-bottom: 0px;

  transition: all .4s;

  font-size: 26px;

  margin-left: 20px;

}



.fa-small{

  display: none;

  margin-bottom: 0px;  

  transition: all .4s;

  font-size: 18px;

  margin-left: 11px;

}







/*404 Error Page*/



.error-404 {

  background: #474c55;

  width: 100%;

  height: 100vh;

  position: absolute;

  top: 0;

  left: 0;

}



.error-404 h2{

  position: relative;

  top: 70%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  color: rgba(255, 255, 255, 0.5);

}



.error-404 h2 strong{

  font-size: 4rem;

  color: #d7b56e;

  text-transform: uppercase;

}



.error-404 i {

  position: absolute;

  top: 70%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 27.2rem;

  opacity: 0.4;

}