.featured-header{background-color:#004f75;font-family: 'Mada', sans-serif;color:#b4b4b4;padding: 60px 0;overflow:hidden;}
.featured-text h2{font-size:30px;text-transform:uppercase;}
.featured-text p{font-size:16px;font-style:italic;}
.featured-icons{overflow:hidden;}
.featured-icons ul li{}
.featured-icons ul li a{display:inline-block;margin-top: 2px;}
.featured-icons ul li a:hover{text-decoration:none;}
.featured-icons ul li a .thumb{border:transparent;display: block;padding: 30px 45px;position:relative;z-index:35;margin-bottom: 15px;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.featured-icons ul li a .thumb > img:first-child{visibility:visible;display:block;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.featured-icons ul li a .thumb > img:last-child{visibility:hidden;display:none;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.featured-icons ul li a span{font-size:18px;font-weight:300;text-transform:uppercase;z-index:32;position:relative;color:#b4b4b4;}
.featured-icons ul li a:hover .thumb{background-color:#fff;transform:scale(1.05);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.featured-icons ul li a:hover .thumb > img:first-child{visibility:hidden;display:none;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.featured-icons ul li a:hover .thumb > img:last-child{visibility:visible;display:block;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.featured-icons ul li a:hover span{font-weight:700;}

@media screen and (min-width:992px){
.flex{display:flex;}
.flex > li{display:flex;}
}




/*  */
.thumb-outer{position:relative;}
.thumb-outer:before {
    position: absolute;
    width: 0;
    height: 2px;
    content: '';
    background: #fff;
    top: -2px;
    left: -2px;
   -webkit-animation: borderPlayWidth 3s infinite ease forwards;
            animation: borderPlayWidth 3s infinite ease forwards;
}
.thumb-outer:after {
    position: absolute;
    width: 2px;
    height: 0;
    content: '';
    background: #fff;
    top: -2px;
    right: -2px;
    -webkit-animation: borderPlayHeight 3s infinite ease forwards;
            animation: borderPlayHeight 3s infinite ease forwards;;}
.thumb-outer .thumb:after {
    position: absolute;
    width: 0;
    height: 2px;
    content: '';
    background: #fff;
    bottom: -2px;
    right: -2px;
    -webkit-animation: borderPlayWidth 3s infinite ease forwards;
            animation: borderPlayWidth 3s infinite ease forwards;
}
.thumb-outer .thumb:before {
    position: absolute;
    width: 2px;
    height: 0;
    content: '';
    background: #fff;
    bottom: -2px;
    left: -2px;
    -webkit-animation: borderPlayHeight 3s infinite ease forwards;
            animation: borderPlayHeight 3s infinite ease forwards;
}

.thumb-outer:before {
    width: calc(100% + 2px);
    transition: 100ms width ease 0ms;
    -web-kit-transition: 100ms width ease 0ms;
}
.thumb-outer:after {
    height: calc(100% + 2px);
    transition: 100ms height ease 100ms;
    -web-kit-transition: 100ms height ease 100ms;
}
.thumb-outer .thumb:after {
    width: calc(100% + 2px);
    transition: 100ms width ease 200ms;
    -web-kit-transition: 100ms width ease 200ms;
}
.thumb-outer .thumb:before {
    height: calc(100% + 2px);
    transition: 100ms height ease 300ms;
    -web-kit-transition: 100ms height ease 300ms;
}


@-webkit-keyframes borderPlayWidth {
    0% {width: 2px;-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
    50% {width:calc(100% + 2px);-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
    100% {width: 2px;-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
}
@-moz-keyframes borderPlayWidth {
	0% {width: 2px;-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
    50% {width:calc(100% + 2px);-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
    100% {width: 2px;-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
}
@keyframes borderPlayWidth {
    0% {width: 2px;-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
    50% {width:calc(100% + 2px);-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
    100% {width: 2px;-web-kit-transition: 50ms width ease 0ms;transition: 50ms width ease 0ms;}
}

@-webkit-keyframes borderPlayHeight {
    0% {height: 2px;-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
    50% {height:calc(100% + 2px);-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
    100% {height: 2px;-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
}
@-moz-keyframes borderPlayHeight {
	0% {height: 2px;-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
    50% {height:calc(100% + 2px);-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
    100% {height: 2px;-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
}
@keyframes borderPlayHeight {
    0% {height: 2px;-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
    50% {height:calc(100% + 2px);-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
    100% {height: 2px;-web-kit-transition: 50ms height ease 0ms;transition: 50ms height ease 0ms;}
}