/* 
Theme Name: Bootstrap 5
Text Domain: Bootstrap 5
Version: 1.0
Description: Bootstrap 5 thema opbouw
Tags: bootstrap-5
Author: Stefanos Tsitsopoulos
Author URI: https://github.com/Stef-Tsi
*/
/* ###################################################
    ctrl+f en dan "deel_x" om css te zoeken
        deel_0  algemeenen css

        deel_1   animatie op scroll

        deel_3   wat wij doen css

        deel_4   header css

        deel_5   onze huidige donaties css

        deel_6   onze actie css

        deel_7   ons team css

        deel_8   card css

        deel_9   contact css


        deel_99   Footer css

######################################################
*/

/* ###################################################
        deel_0   algemeenen css
######################################################
*/
:root {
    --main-bg-color: #FE0000;
    --secondary-bg-color: #000095;
    }
    html {
      scroll-behavior: smooth;
    }
  body{
    font-size: 16px !important;
  }
  
  .main-bg{
    background-color: var(--main-bg-color) !important;
  }
  .second-bg{
    background-color: var(--secondary-bg-color) !important;
  }
  
  .main-color{
    color: var(--main-bg-color) !important;
  }
  .second-color{
    color: var(--secondary-bg-color) !important;
  }
  
  .bg-section{
    background-color: var(--main-bg-color) !important;
  
    margin-top: 5% !important;
    margin-bottom: 5% !important;
  }
  a {
    text-decoration: none !important;
  }
  
  /* ###################################################
        deel_1   animatie op scroll
  ######################################################
  */
  
  .slideanim {visibility:hidden;}
  .slide {
  /* The name of the animation */
  animation-name: slide;
  -webkit-animation-name: slide;
  /* The duration of the animation */
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  /* Make the element visible */
  visibility: visible;
  }
  
  /* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
  @keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
  }
  @-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
  }
  
  /* ###################################################
        deel_3   wat wij doen css
  ######################################################
  */
  
  section .section-title{
  text-align:center;
  color:#2e2e2e;
  
  }
  
  #what-we-do .card{
  padding: 1rem!important;
  border: none;
  -webkit-transition: .5s all ease;
  -moz-transition: .5s all ease;
  transition: .5s all ease;
  background-color: var(--secondary-bg-color);
  }
  #what-we-do .card:hover{
  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  }
  #what-we-do .card .card-block{
  padding-left: 50px;
    position: relative;
  }
  #what-we-do .card .card-block a{
  color: #fff !important;
  font-weight:700;
  text-decoration:none;
  }
  #what-we-do .card .card-block a i{
  display:none;
  
  }
  #what-we-do .card:hover .card-block a i{
  display:inline-block;
  font-weight:700;
  
  }
  #what-we-do .card .card-block:before{
  font-family: FontAwesome;
    position: absolute;
    font-size: 39px;
    color: #fff;
    left: 0;
  -webkit-transition: -webkit-transform .2s ease-in-out;
    transition:transform .2s ease-in-out;
  }
  #what-we-do .card .block-1:before{
    content: "\f0e7";
  }
  #what-we-do .card .block-2:before{
    content: "\f0eb";
  }
  #what-we-do .card .block-3:before{
    content: "\f00c";
  }
  #what-we-do .card .block-4:before{
    content: "\f209";
  }
  #what-we-do .card .block-5:before{
    content: "\f0a1";
  }
  #what-we-do .card .block-6:before{
    content: "\f218";
  }
  #what-we-do .card:hover .card-block:before{
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);	
  -webkit-transition: .5s all ease;
  -moz-transition: .5s all ease;
  transition: .5s all ease;
  }
  
  /* ###################################################
        deel_4   header css
  ######################################################
  */
  
  .header-img-1 {
    min-height: 500px;
  background-image: url('../images/IMG-20210903-WA0006.jpg');
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
  }
  
  .header-img-2 {
    min-height: 500px;
    background-image: url('../images/20170812.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    animation: fadeIn 5s;
      -webkit-animation: fadeIn 5s;
      -moz-animation: fadeIn 5s;
      -o-animation: fadeIn 5s;
      -ms-animation: fadeIn 5s;
    }
  
    .header-img-3 {
      min-height: 500px;
      background-image: url('../images/20210318.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      animation: fadeIn 5s;
        -webkit-animation: fadeIn 5s;
        -moz-animation: fadeIn 5s;
        -o-animation: fadeIn 5s;
        -ms-animation: fadeIn 5s;
      }
  
  @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  /* ###################################################
        deel_8   card section css
  ######################################################
  */
  
  .section .row{
  margin-top: 5%;
  margin-bottom: 5%;
  }
  .section .row .col-md-6{
    background: #eee !important;
  }
  .section h3{
  color: #2e2e2e;
  }
  .section p{
  color: #545b62;
  }
  .section img
  {
  width: 100%;
  }
  
  /* ###################################################
        deel_9   contact css
  ######################################################
  */
  
  .container-footer{
    margin-top: -3.5% !important;
    margin-bottom: 1.5%;
  }
  
  .contact-form-content {
    background: var(--main-bg-color);
    padding: 80px 0;
    padding-left: 80px;
    padding-right: 80px;
  }
  
  .thm-container .title span {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    color: var(--secondary-bg-color);
  }
  
  .thm-container .title h2 {
    color: #fff;
    font-size: 30px;
    line-height: 60px;
    font-weight: bold;
  }
  
  .thm-container .title h2 span{
    color: var(--main-bg-color) !important;
    font-size: 30px;
    line-height: 60px;
    font-weight: bold;
  }
  
  .contact-form input, 
  .contact-form textarea {
    border: none;
    outline: none;
    width: 100%;
    height: 68px;
    border-radius: 35px;
    background: #fff;
    color: #757575;
    font-size: 16px;
    padding-left: 25px;
    margin-bottom: 20px;
    display: block;
  }
  
  .contact-form textarea {
    height: 182px;
    padding-top: 20px;
  }
  
  .contact-info {
    margin-left: -30px;
    border: 2px solid var(--main-bg-color);
    padding-top: 75px;
    padding-bottom: 80px;
  }
  
  .single-contact-info h4 {
    color: #212121;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .contact-info .social a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    line-height: 59px;
    text-align: center;
    line-height: 50px;
    margin-top: 10px;
    display:inline-block;
    font-family: FontAwesome;
    margin:5px;
  }
  
  .contact-info .social a.fa-facebook-f {
    background: #2884C6;
  }
  
  .contact-info .social a.fa-instagram {
    background: #bc2a8d;
  }
  
  @media only screen and (max-width:772px) { 
    .contact-form-content {
      background: var(--main-bg-color);
      padding: 80px 0;
      padding-left: 20px;
      padding-right: 20px;
    }
  
    .contact-info {
      margin-left: 0px;
      border: 2px solid var(--main-bg-color);
      padding-top: 75px;
      padding-bottom: 80px;
    }
  
    }
  
  /* ###################################################
        deel_6   onze acties
  ######################################################
  */
  
  .our-actions-content{
    margin-top: -2.5% !important;
    margin-bottom: -2% !important; 
  }
  .single-our-action{
  background:#fff;
  padding:40px 20px;
  border-radius:5px;
  position:relative;
  z-index:2;
  border:1px solid #eee;
  box-shadow: 0 10px 40px -10px rgba(0,64,128,.09);
  transition:0.3s;
  
  }
  @media only screen and (max-width:480px) { 
  .single-our-action {margin-bottom:30px;}
  }
  .single-our-action:hover{
  box-shadow:0px 60px 60px rgba(0,0,0,0.4);
  z-index:100;
  transform: translate(0, -10px);
  }
  
  .our-actions-head h2 {
  font-weight: 600;
  margin-bottom: 0px;
  font-size: 26px;
  }
  .our-actions {
  font-weight: 500;
  font-size: 50px;
  margin-bottom: 0px;
  }
  .single-our-action{}
  .single-our-action h5 {
  font-size: 14px;
  margin-bottom: 0px;
  text-transform: uppercase;
  }
  
  .single-our-action-white h2{color:#fff;}
  .single-our-action-white h1{color:#fff;}
  .single-our-action-white h5{color:#fff;}
  
  /* ###################################################
        deel_5   huidige donaties css
  ######################################################
  */
  .container-donation{
    margin-top: -6% !important;
    margin-bottom: -6% !important; 
  
    position: relative;  /* Nodig voor ofset voor scrollto */
  }
  
  .container-donation span{ 
    position:absolute; 
    top:-25px;
  }
  
  #our-stats{
  padding: 60px 0;
  }
  
  #our-stats .h1{
    color: var(--main-bg-color)!important;
  }
  
  #our-stats a{
    color: #fff !important;
    text-decoration:none;
  }
  #our-stats i{
    color: #fff !important;
  }
  
  #our-stats .counter {
    background-color: var(--main-bg-color);
    padding: 35px 0;
    border-radius: 5px;
  }
  
  #our-stats .counter i,
  #our-stats .counter .count-title{
    margin-bottom: 15px;
  }
  
  #our-stats .counter p{
    font-style:italic;
    margin-bottom:0;
  }
  
  
  /* ###################################################
        deel_7   ons team css
  ######################################################
  */
  
  #team {
    background-color: var(--main-bg-color) !important;
  
  }
  
  section .section-title {
    text-align: center;
    color: #fff ;
    margin-bottom: 50px;
  }
  
  #team .card {
    border: none;
    background: var(--secondary-bg-color);
  }
  
  .image-flip:hover .backside{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
  }
  
  .flip-0{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  
  .image-flip:hover .frontside{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  
  .flip-180{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  
  .mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
  }
  
  .frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
  }
  
  .backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  }
  
  .frontside,
  .backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
  }
  
  .frontside .card,
  .backside .card {
    min-height: 312px;
  }
  
  .backside .card a {
    font-size: 18px;
    color: #fff !important;
  }
  
  .frontside .card .card-title,
  .backside .card .card-title {
    color: #fff !important;
  }
  
  
  
  .card-body .card-text{
    color: #fff !important;
  }
  
  /* ###################################################
        deel_99   Footer css
  ######################################################
  */
  footer {
  position: relative;
  padding: 50px 0;
  }
  
  footer .logo-footer {
  font-size: 28px;
  }
  
  footer.footer-bar {
  padding: 30px 0;
  background-color: var(--main-bg-color);
  
  }
  
  footer .footer-text {
  color: #fff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
  
  footer .footer-text:hover {
  color: #dee2e6;
  }
  
  footer .footer-link{
    color: var(--secondary-bg-color);
  }