/*
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 : 2018-02-12, 15:39:41
    Author     : marcin
*/



/* Stars */
.fa-star {
    color: #ecec22;
}
@keyframes star1{
  10% {
   transform: scale(1.2);
  }
  30% {
   transform: scale(1);
  }
  100% {
   transform: scale(1);
  }
}
.star1{
  animation: star1 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
}
@keyframes star2{
  20% {
   transform: scale(1.2);
  }
  40% {
   transform: scale(1);
  }
  100% {
   transform: scale(1);
  }
}
.star2{
  animation: star2 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
}
@keyframes star3{
  30% {
   transform: scale(1.2);
  }
  50% {
   transform: scale(1);
  }
  100% {
   transform: scale(1);
  }
}
.star3{
  animation: star3 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
}
@keyframes star4{
  40% {
   transform: scale(1.2);
  }
  60% {
   transform: scale(1);
  }
  100% {
   transform: scale(1);
  }
}
.star4{
  animation: star4 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
}
@keyframes star5{
  50% {
   transform: scale(1.2);
  }
  70% {
   transform: scale(1);
  }
  100% {
   transform: scale(1);
  }
}
.star5{
  animation: star5 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
}
  
  

form .btn-primary:hover {
    background: #1f5ac5;
}

.btn, .btn-primary{  
  position: relative;
  overflow: hidden;
}
.btn:hover, .btn-primary:hover, .fa-star:hover{
    transform: scale(1.1);
    box-shadow: 0px 2rem 0.5rem -32px rgba(10,10,10,.1);
  }

.btn:after, .btn-primary:after{
  animation: shine 5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
  content: "";
  position: absolute;
  top: -110%;
  left: -410%;
  width: 330%;
  height: 200%;
  opacity: 0;
    transform: rotate(117deg);
  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
@keyframes shine{
  50% {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
}


@media(max-width:767px){
    .footer-bottom .col-xs-12,.footer-top .col-xs-12{
    text-align: center;
    }
}

@media(max-width:768px){
  
  .caption .text h2{
    text-align: left;
  }
  
  .slider .caption .text {
    max-width: 100%
  }
  
  /* Homepage Banner */
  .slider .caption .localization {
    font-size: 20px;
  }
  .banner h1{
    font-size: 18px;
  }
  .banner .caption .text, .slider .caption .text {
    font-size: 13px;
}
  .slider .text img{
        width: 15px;
  }
  
  .full_width_boxes .box {
    min-height: 220px;
  }
  
  
  .section-bar ul .separator {
    display:none!important;
}
  .footer-top .heading.border:after{
    display:none;
  }
  .navbar-header .logo{
        top: -35px!important;
  }
  header .logo img {
    max-height: 80px;
}
}

@media (max-width:425px){
  header .logo img {
    max-height: 52px;
}
  .navbar-header .logo {
    top: 0px!important;
}
  .slider .container {
    padding: 0 30px;
  }
  .caption img{
  display:none!important;
}
}


header a:hover {
    color: #000;
    text-decoration: none;
}

.heading.border:after, h1.border:after, h2.border:after, h3.border:after, h4.border:after, h5.border:after, h6.border:after {
  background: #000;
  bottom: -5px;
}

.breadcrumb, .breadcrumb .active, footer .footer-top a:hover {
    color: #231f20;
    font-weight: 600;
}

footer .footer-top {
  background-color: #d2232a;
}

footer .footer-bottom {
 background: #231f20;
}

/* Homepage */
.btn.custom1 {
    background: #231f20;
    border-color: none!important;
}
.btn.custom1:hover {
    background: #000;
}

.red-icon{
  color:#d2222a;
}

.center{
    align-items: center;
    display: flex;
}

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

.review-score{
    width: 90px;
    height: 90px;
    background-color: #fff;
    border: solid 5px #0057a2;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: #0057a2;
}

/* Subpage */
.content-text a {
    color: #d2222a;
}
.content-text a.btn-primary{
  color:#fff;
}

/* CTA Banner */
.row-centre{
    display:flex;
    justify-content:center;
    align-items:center;
}
.project-image-gradient {
    background-color: rgba(20, 45, 69, 0.8);
}
.banner {
    height: initial;
    transition: box-shadow .2s ease-in-out;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    background-image: url(/webroot/files/ckeditor/CTA/rubbish-banner.jpg?time=1584368804893); /*Change background image */
    background-size: cover;
    overflow:hidden;
    border-radius:0px!important;
} 
.banner2{
  padding:3em 0;
  background-image: url(/webroot/files/ckeditor/CTA/waste-recycling.jpg?time=1584362764533); /*Change background image */
}
.banner .content{
    text-align: left;
    padding: 3em 3em 3em 0;
}
.content-text .banner .row{
    margin-bottom: 0px!important;
}

.project-image-gradient {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}
.banner .project-name img {
    max-width: 160px!important;
}
.project-name {
    font-weight: 200;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 0 10px;
}
.project-name strong, .project-name h4, .project-name a{
    color: #ecf3f7;;
    font-weight: 800;
}
.project-name strong{
    font-size: 2em;
}
.project-name a{
    width: auto;
}
.project-name .row{
    display: flex;
}
.project-name p{
    margin-bottom:0px;
    color:#fff;
    margin-bottom:5px;
}
.project-name .banner-logo{
    margin:20px 0;
}
.content-text .row{
    margin-bottom: 30px !important;
}

@media (max-width: 425px){
    .project-name p:last-child{
        margin-bottom:25px;
    }
}

header .top .social { 
  text-transform: capitalize;
}

header .navbar li a {
    color: #524F63;
  font-weight: bold;
}

header .top {
    background: #fff;
}

header, header a {
    color: #d2222a;
}

header .navbar {
    background: #fff;
}
.content-text h2 {
    color: #d2232a;
}

/* HOME - PAGE NAVIGATION BUTTONS RESET */
.page-nav-container a {
	display:inline-block;
}

.page-nav-container a:hover {
	z-index: 10;
}

@media (max-width: 450px){
   .page-nav-container {
      text-align:center;
   }

  .page-nav-container a {
      display:block;
      width: 200px;
      margin:0 auto;
   }
   .page-nav-container a:not(:last-of-type) {
      margin-bottom:1.2rem;
   }
}