.project-section{
    margin-top: 10px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.project-section-items{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.boxes{
    height:100px;
    width: 150px;
    background-color: coral;
    margin:5px 10px;
    cursor: pointer; 
    transition: all 1s;  /* lets make it smooth */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: white;
    padding: 10px;
}

.change-bgcolor:hover{
    cursor: pointer;
    transition: all 1s;
}

.change-font-color:hover{
    transition: all 1s;
    color:blue;
}

.move-right:hover{
    cursor: pointer;
    transition: all .5s;
    transform : translateX(10px);
}

.move-left:hover{
    cursor: pointer;
    transition: all .5s;
    transform : translateX(-10px);
}
.move-up:hover{
    cursor: pointer;
    transition: all .5s;
    transform : translateY(-10px);
}

.move-down:hover{
    cursor: pointer;
    transition: all .5s;
    transform : translateY(10px);
}

.zoom-in:hover{
    cursor: pointer;
    transition: all .5s;
    transform: scale(1.1);
}

.zoom-out:hover{
    cursor: pointer;
    transition: all 1s;
    transform: scale(.5);
}


.change-radius:hover{
    cursor: pointer;
    transition: all 1s;
    border-radius: 50%;
}

.expand-left-right:hover{
    cursor: pointer;
    transition: all 1s;
    transform : scaleX(1.5);
}

.expand-up-down:hover{
    cursor: pointer;
    transition: all 1s;
    transform : scaleY(1.5);
}

.rotate-clockwise:hover{
    cursor: pointer;
    transition: all 1s;
    -webkit-transform: rotateZ(10deg);
        -ms-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
}

.rotate-anti-clockwise:hover{
    cursor: pointer;
    transition: all 1s;
    -webkit-transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
}

.rotate-360-clockwise:hover{
    cursor: pointer;
    transition: all 1s;
    -webkit-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
}

.rotate-360-anticlockwise:hover{
    cursor: pointer;
    transition: all 1s;
    -webkit-transform: rotateZ(-360deg);
        -ms-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
}

.filip-horizontal:hover{
    cursor: pointer;
    transition: all 2s;
    -webkit-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
}

.filip-horizontal-mirror:hover{
    cursor: pointer;
    transition: all 2s;
    -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
}

.filip-vertical:hover{
    cursor: pointer;
    transition: all 2s;
    -webkit-transform: rotateX(-360deg);
        -ms-transform: rotateX(-360deg);
        transform: rotateX(-360deg);
}

.filip-vertical-mirror:hover{
    cursor: pointer;
    transition: all 2s;
    -webkit-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        transform: rotateX(180deg);
}

.inset-box-shadow:hover{
    cursor: pointer;
    transition: all 1s;
    box-shadow: inset 0 0 0 20px #2f2f2f;
    font-size: 25px;
}

.offset-box-shadow:hover{
    cursor: pointer;
    transition: all 1s;
    box-shadow: 0 0 0 20px #2f2f2f;
}

.smooth-offset-box-shadow:hover{
    cursor: pointer;
    transition: all 1s;
    box-shadow: 0 0 20px 20px #2f2f2f;
}

.smooth-inset-box-shadow:hover{
    cursor: pointer;
    transition: all 1s;
    box-shadow: inset 0 0 20px 20px #2f2f2f;
}

.gradient-color-box{
    width: 100%;
    height: 100px;
    background-image: linear-gradient(to right, lightgreen , darkgreen);
    transition: all 1s;
    cursor: pointer;
    border: 3px solid aqua;
    color: white;
    text-align: center;
    padding-top: 10px;
}

.gradient-color-box:hover{
    transition: all 1s;
    background-image: linear-gradient(to right, darkgreen , lightgreen);
}

.yvanaplaceholder{
  display: flex;
  text-align: center;
  justify-content: center;
}

.yvana{
  color: darkgreen;
  text-decoration: none;
 }

.name{
  color: crimson;
}


/* Shine */
.shine figure {
    position: relative;
    overflow: hidden;
}
.shine figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
.shine figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}



.social-circle li a {
    display:inline-block;
    position:relative;
    margin:0 auto 0 auto;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    text-align:center;
    width: 40px;
    height: 40px;
    font-size:20px;
}
.social-circle li i {
    margin:0;
    line-height:40px;
    text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms--transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}
.social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}

.social-circle li a {
 background-color: #3d91c1;   
}


/* footer social icons */
.social-network a.icoRss:hover {
    background-color:#f5812f;
}
.social-network a.icoFacebook:hover {
    background-color:#d67809;
}
.social-network a.icoTwitter:hover {
    background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
    background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
    background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
    background-color:#007bb7;
}


/* footer social icons */
.social-network a.icoRss:hover {
    background-color:#f5812f;
}
.social-network a.icoFacebook:hover {
    background-color:#d67809;
}
.social-network a.icoTwitter:hover {
    background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
    background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
    background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
    background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
    color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
    color:#44BCDD;
}

/* ============================================================== 
     # flip-card
=================================================================== */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
    width: 100%;
    height: 326px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  /*background-color: #bbb;*/
  /*padding: 25px 10px;*/
}

/* Style the back side */
.flip-card-back {
  /*background-color: dodgerblue;*/
  color: white;
  transform: rotateY(180deg);

}

 /* ============================================================== 
     # circle effect
=================================================================== */

.ih-item.circle {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
}

.ih-item.circle.effect16.left_to_right .img {
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    transform-origin: 95% 40%;
}

.ih-item.circle.effect16 .img {
    z-index: 11;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.ih-item.circle .img {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
}

.ih-item.circle.effect16 .info {
    background: #1770a8;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;

}

.ih-item.circle .info {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 180px;
    height: 180px;
}

.ih-item.circle.effect16 .info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 16px;
    margin: 0 10px;
    /*padding: 55px 0 0 0;*/
    /* height: 87px; */
    text-shadow: 0 0 1px white, 0 1px 2px rgb(0 0 0 / 30%);
}

.ih-item.circle.effect16 .info p {
    color: #bbb;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;   
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    line-height: 12px;
}

.ih-item.circle.effect16.left_to_right a:hover .img {
    -webkit-transform: rotate(-120deg);
    -moz-transform: rotate(-120deg);
    -ms-transform: rotate(-120deg);
    -o-transform: rotate(-120deg);
    transform: rotate(-120deg);
}

.ih-item.circle .img:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /*box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);*/
  
    box-shadow: inset 0 0 0 16px rgb(23 112 168 / 23%), 0 1px 2px rgb(245 129 47 / 63%);
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

.ih-item.circle.effect16.left_to_right .img:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(240 135 60);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
}

h6.small-heading {
    font-size: 26px;
}

/* //course section */

/* SLIDE DOWN DELAY */

.slide-up-delay .course-overlay{
  background-color: #1770a8;
  /*line-height: 200px;
  color: #fff;*/
  transform: translateY(100%);
  -webkit-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  z-index: 9;
}

.slide-up-delay .course-box:hover .course-overlay{
  transform: translateY(0);
}

.slide-up-delay .course-overlay i{
  transform: translateY(80%);
  opacity: 0;
  -webkit-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  -o-transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
  transition: transform 0.5s linear, opacity 0.5s linear 0.5s;
}

.slide-up-delay .course-box:hover .course-overlay i{
  transform: translateY(0);
  opacity: 1;
}

.course-box {
      display: block;
    width: 100%;
    /* height: 200px; */
    overflow: hidden;
/*    background-color: #bbb;*/
    text-align: center;
    position: relative;
}

.course-overlay{
  width: 100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}