/*
 * This CSS contains all style informations for the tiles on the main page (first page)
 * (CSS style for small screens is on the bottom of this file)
 */

.flip-box-container-main
{
    display: flex;

    justify-content: center
}

.flip-box-container
{
    margin-top: 15px;

    display: flex;

    justify-content: center
}

.flip-box
{
  width: 250px;
  height: 250px;

  margin-left: 5px;
  margin-right: 5px;

  background-color: transparent;

  perspective: 1000px;
}

.flip-box-inner
{
  transition: transform 1.2s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner
{
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back
{
  position: absolute;

  backface-visibility: hidden;
}

.flip-box-front > img,
.flip-box-back > img
{
  width: 250px;
  height: 250px;
}

.flip-box-back
{
  width: 250px;
  height: 250px;

  color: white;
  text-align: center;

  transform: rotateY(180deg);
}

.flip-box-back-text-container-energy
{
    background: rgb(200,210,11);
}

.flip-box-back-text-container-heat
{
    background: rgb(231,84,25);
}

.flip-box-back-text-container-engineering
{
    background: rgb(127,127,127);
}

.flip-box-back-text-container-mgt
{
    background: rgb(240,148,46);
}

.flip-box-back-text-container-battery
{
    background: rgb(49,79,111);
}

.flip-box-back-text-container-photovoltaic
{
    background: rgb(0,176,240);
}

.flip-box-back-text-three
{
    margin-top: 46px;
}

.flip-box-back-text-four
{
    margin-top: 34px;
}

.flip-box-back-text-six
{
    margin-top: 19px;
}

.flip-box-back-text-three:hover,
.flip-box-back-text-four:hover,
.flip-box-back-text-six:hover
{
    cursor: pointer;
    color: white;
}

@media only screen and (max-width: 1400px)
{
    .flip-box-container-main
    {
        display: block;
    }
}

@media only screen and (max-width: 570px)
{
    .flip-box-container
    {
        display: block;
    }
    .flip-box
    {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
}