h3 {
    text-align: center;
    margin-bottom: 2em;
    margin-top: 3em;
}

.past-boat-container {
    margin-left: 20%;
    margin-right: 20%;
    display: flex;
}

.past-boat-container img {
    background: url(../images/fleet/blur.png);
    background-size: 91%;
}

.left{
    float: left;
    width: 50%;
    flex: 1;
    padding: 2%;
}
.left img {
    width: 100%;
}

.right {
    float: left;
    width: 50%;
    flex: 1;
    padding: 2%;
}

main{
    box-sizing: border-box;
}

#boatfeatures {
    display: flex;
    width: 100%;
    height: 100%;
}

.leftcolumn, .rightcolumn {
    width: 30%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%;
    flex: 1;
}

.middlecolumn {
    width: 30%;
    float: left;
    flex: 1;
    position: relative;
}

.feature-items {
    width: 100%;
    height: 33%;
    padding: 10px;
}


.feature-items:hover {
    background-color: var(--bg-raised);
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(101, 200, 208, 0.15);
    color: var(--text);
}

.feature-items:hover  p, .feature-items:hover h5 {
    box-shadow: none;
}

.feature-items h5 {
    margin-bottom: 10px;
    margin-top: 10px;
}

main p {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    line-height: 20px;
}

#boatpicmain{
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: url(../images/fleet/blur.png);
    background-size: 110%;
}


.designleft{
    text-align: right;
}

.pagetitle {
    text-align: center;
    height: 5%;
}

.icon {
    width: 15%;
    transition:opacity 0.5s linear;
}

.outer {
    position: relative;
}

.outer .top {
    position: absolute;
    z-index: 1;
}

@keyframes fadeaway
{
  0%   {opacity: 1;}
  5%   {opacity: 0.95;}
  10%   {opacity: 0.9;}
  15%   {opacity: 0.85;}
  20%   {opacity: 0.8;}
  25%   {opacity: 0.75;}
  30%   {opacity: 0.7;}
  35%   {opacity: 0.65;}
  40%   {opacity: 0.6;}
  45%   {opacity: 0.55;}
  50%   {opacity: 0.5;}
  55%   {opacity: 0.45;}
  60%   {opacity: 0.4;}
  65%   {opacity: 0.35;}
  70%   {opacity: 0.3;}
  75%   {opacity: 0.25;}
  80%   {opacity: 0.2;}
  85%   {opacity: 0.15;}
  90%   {opacity: 0.1;}
  95%   {opacity: 0.05;}
  100% {opacity: 0;}
}

@keyframes fadein
{
  0%   {opacity: 0;}
  5%   {opacity: 0.05;}
  10%   {opacity: 0.1;}
  15%   {opacity: 0.15;}
  20%   {opacity: 0.2;}
  25%   {opacity: 0.25;}
  30%   {opacity: 0.3;}
  35%   {opacity: 0.35;}
  40%   {opacity: 0.4;}
  45%   {opacity: 0.45;}
  50%   {opacity: 0.5;}
  55%   {opacity: 0.55;}
  60%   {opacity: 0.6;}
  65%   {opacity: 0.65;}
  70%   {opacity: 0.7;}
  75%   {opacity: 0.75;}
  80%   {opacity: 0.8;}
  85%   {opacity: 0.85;}
  90%   {opacity: 0.9;}
  95%   {opacity: 0.95;}
  100% {opacity: 1;}
}

.feature-items:hover #sailicontop{
    animation-name: fadeaway;
    animation-duration: 0.5s;
    opacity: 0;
}

#sailicontop {
    animation-name: fadein;
    animation-duration: 0.5s;
    opacity: 1;
}

@media (max-width: 700px){

.past-boat-container {
    margin-left: 5%;
    margin-right: 5%;
    display: flex;
}

.feature-items p {
    font-size: 0;

}

.feature-items {
    padding: 0px;
}

.icon {
    width: 50%;
    transition:opacity 0.5s linear;
}

main {
    margin-bottom: 30%;
}

}