body {
    background: #F7F7F9;
}

.header-full {
    margin: auto;
    display: block;
    height: 100px;
    width: 95%;
    background-image: url(resources/Optimum-women-full.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
}

.ar {
    animation-direction: reverse;
}

.header-full-ar {
    margin: auto;
    display: block;
    height: 100px;
    width: 95%;
    background-image: url(resources/Optimum-women-Arabic.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: auto 100%;
}

.logo-pic {
    width: 100px;
}

.logo {
    width: 300px;
}

.bg-optimum-light {
    background: #D67AB3;
}

.bg-optimum-dark {
    background: #492D3F;
}

.bg-optimum {
    background: radial-gradient( circle at 20%, #D67AB3 0%, #492D3F 35%);
}

.bg-optimum-blue {
    background: linear-gradient(to bottom right, #4090A9, #7EBCC9)
}

.bg-orange-gradient {
    background: linear-gradient(#FBDA61, #F76B1C);
    color: #492E00;
}

.bg-faded-blue {
    background: linear-gradient(to bottom,  #f7f7ff, #dcdce4);
}


.no-padding {
    padding: 0;
    margin: auto;
}

.text-optimum-light {
    color: #D67AB3;
}

.text-optimum-dark {
    color: #492D3F;
}

.icon {
    width: 40px;
    height: auto;
}

.header-logo {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.header-canvas {
    z-index: -1;
}
/*

.rotating-photo {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
    height: 325px;
    display: block;
    margin: auto;
}

.rotating-photo:hover .front, .rotating-photo:hover .back {
    transition: transform 2s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.rotating-photo:hover .front {
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}

.rotating-photo:hover .back {
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}

.front {
    transform: rotateY(0deg);
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: calc(50% - 150px);
    transition: transform 2s;
    

    
}

.back {
    transform: rotateY(-180deg);
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: calc(50% - 150px);
    transition: transform 2s;
}
*/

.profile-photo {
    width: 300px;
    height: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
    margin-bottom: 25px;
    margin-top: 75px;
}

.display-section {
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    display: block;
    border-radius: 15px;
    box-shadow: 2px 2px 7px rgba(73,45,63,0.75);
    background: #E7E7E9;
}

.display-img {
    padding: 10px;
}

.space {
    height: 2rem;
}

.tab-button {
    border-radius: 10px;
    padding: 1rem;
}

.header {
    padding: 2rem;
}

.expandible-buttons-container {
    height: 600px;
    width: 95%;
    padding-top: 200px;
    display: block;
    margin: auto;
}

.blue-logo {
    width: 200px;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    cursor: pointer;
    z-index: 1;
    transition: transform .75s;
}

.optimum-button {
    width: 150px;
    height: auto;
    position: absolute;
    cursor: pointer;
    transition: transform .75s;
    z-index: -1;
    top: 25px;
    left: 25px;
    
}

.blue-logo:hover .pointer {
    visibility: hidden;
}

.blue-logo:hover {
    transform: rotate(360deg);
}
.blue-logo:hover #ivf-button {
    transform: translate(0, -175px); 
}

.blue-logo:hover #pharmacy-button {
    transform: translate(-166px, -54px );
}

.blue-logo:hover #team-work-button {
    transform: translate(166px, -54px );
}

.blue-logo:hover #operating-theatre-button {
    transform: translate(-103px, 142px );
}

.blue-logo:hover #general-lab-button {
    transform: translate(103px, 142px );
}


/***********************************************************************/
.container{
    transform-style: preserve-3d;
    perspective: 1000px;
    margin-bottom: 25px;
}

.inner-photo {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
}

.front,
.back{
    background-size: cover;
    background-position: center;
    
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    backface-visibility: hidden;
    text-align: center;
    height: 300px;
    border-radius: 10px;
    color: #fff;
    font-size: 1.5rem;
}

.back{
/*
  background: #cedce7;
  background: linear-gradient(to left, #3261B9 -16%, #000066 100%);
*/
}

.front:after{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
/*    background-color: #000;*/
    backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    
    transform: translateY(-50%) translateX(-50%)translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 50%;
    width: 300px;
    height: 300px;
/*    padding: 2rem;*/
/*    box-sizing: border-box;*/
    outline: 1px solid transparent;
    perspective: inherit;
    z-index: 2;
    border-radius: 10px;
}

.container .back{
    
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}

.container .front{
    
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}

.container:hover .back{
  
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}

.container:hover .front{
  
    transform: rotateY(-180deg);
    transform-style: preserve-3d;
}

.front .inner p{
    font-size: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

.changing-img {
    width: 90%;
    margin: 0;
    height: auto;
    position: absolute;
    
    left: calc(5%);
    transition: transform 2s;
  
    
}

.changing-container {
    display: block;
    margin: auto;
    position: relative;

    
}
.scroll-img {
    width: 4%;
    height: auto;
    position: absolute;
}

.previous {
    left: 0;
}

.next {
    right: 0;
}

.hex-photo {
    width: 75%;
    height: auto;
    border-radius: 10px;
    backface-visibility: hidden;
    transition: transform 2s;
    position: absolute;
/*    top: -100%;*/
    transform: rotateY(-100deg);
    transform-style: preserve-3d;
    left: 0;
    top: 5%;
    visibility: hidden;
}

.rotating-hexagon {
    position: relative;
    width: 100%;
    
    left: 0;
    perspective: 1000px;
    transform-style: preserve-3d;
    background-image: url(resources/Welcome%20to%20Optimum.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
        
}

.rotating-hexagon-ar {
    position: relative;
    width: 100%;
    
    left: 0;
    perspective: 1000px;
    transform-style: preserve-3d;
    background-image: url(resources/welcome-arabic.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
        
}

/* .hex-photo:first-child {
    transform:  translateZ(100px) rotateX(0deg);
    animation: presentPicture 5s;    
}*/

@keyframes present {
    from {
        left: 0;
        transform: rotateY(-60deg);
    }
    
    to {
        left: 283px;
        transform: rotateY(0deg) translateZ(100px);
        
    }
    
}

@keyframes next {
    from {
        left: 283px;
        transform: rotateY(0deg) translateZ(100px);
    }
    
    to {
        left: 917px;
        transform: rotateY(60deg) translateZ(0px);
    }
}

@keyframes presentPicture {
    0% {
        left: -40%;
        transform: rotateY(-60deg); 
        visibility: visible;
    }
    
    20% {
        left: 12.5%;
        transform: rotateY(0deg) translateZ(100px);
    }
    
    80% {
        left: 12.5%;
        transform: rotateY(0deg) translateZ(100px);
    }
    
    100% {
        left: 65%;
        transform: rotateY(60deg) translateZ(0px);
        visibility: hidden;
    }
}