/* unbordered */
ul.portfolio-footer{
  display: none;
}
.infotext {
  margin: 0;
}
section{
  background-color: #fff;
}
.portfolio-text-wrap {
    background-color: #fff;
  }

.portfolio-text-wrap {
  padding-bottom:0!important;
}
  ::-webkit-scrollbar {
      width: 15px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
      background: #fff;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
      background: #59ABE3;
      border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      background: #59ABE3;

  }

iframe{
  width: 100%;
  height: 500px;
}
body{
	overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

a{
  cursor: pointer;
}

p, h1, h2, h3, h4, h5{
  margin:0;
  padding:0;
  color: #8a8a91;
}

h1, h2, h3{
  font-family: Montserrat Alternates, Arial, Helvetica;
  font-weight: 700;
}

h1{
  font-size: 32px;
  margin-bottom: 30px;
}

h2{
  font-size: 20px;
  margin-bottom: 15px;
}

h3{
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 400;
}

p, h4{
  font-family: Lato, Arial, Helvetica;
  font-size: 16px;
  font-weight: 500;
	line-height: 1.75;
  color:#8a8a91;
}

h4{
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin: 15px auto;
  color: #fff;
}

a, a:hover, a:active, a:focus {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
  color:#22A7F0;!important
  text-decoration: none;!important
}



html {
    box-sizing: border-box;
  }

*, *:before, *:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #000807;
    color: #F4FAFF;
    font-family: "Comic Sans MS"
  }

H1{
    color:
}


.white{
    color:#FFF;
}
.grey{
	color:#ecf0f1;
}
.blue{
    font-weight: 700;
    color: #59ABE3;
}
section{
	line-height: 1.5em;
	font-size: 0.9em;
	margin: 0 auto;
	padding-bottom: 40px;
}

.page-scroll-margin {
    display: block;
    width: 100%;
    height: 60px;
}

.whitebg{
    background: #fff;
}

.greybg{
	background: #ecf0f1;
}

.blackbg{
	background: #2e2d32;
}

.heading{
	text-align: center;
	margin: 40px 0;
}

.infotext{
    text-align: center;
    margin: 0 0 120px 0;
}

.sub-heading{
    text-align: center;
    margin: 20px 0;
}


.center{
	text-align: center;
}

.title{
    text-align: center;
    padding: 20px;
}

.title title-white{
    text-align: center;
    padding: 20px;
    color:#FFF;
}

.btn:hover{
    background: #2ecc71;
    text-decoration: none;
    color: #fff;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.border-box{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* menu */

/* .arrowcontainer{
    text-align: center;
} */

.arrowdown{
    display: inline-block;
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 200px;
    left: 50%;
    margin-left:-30px;
    border-radius: 100%;
    border: 2px solid white;
z-index: 10000;
font-size: 50px;
color: #fff;
line-height: 50px;
padding: 0;
text-align: center;
-moz-animation: arrow 4s infinite;
-webkit-animation: arrow 4s infinite;
     -o-animation: arrow 4s infinite;
        animation: arrow 4s infinite;
        box-shadow: 0 3px 15px rgba(0,0,0,.2);
        -webkit-box-shadow: 0 3px 15px rgba(0,0,0,.2);
        -moz-box-shadow: 0 3px 15px rgba(0,0,0,.2);
}
.arrowdown i{
    box-shadow: 0 3px 15px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 3px 15px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 15px rgba(0,0,0,.2); 
}

@keyframes arrow {
    0%  {line-height: 50px;}
    50% {line-height: 70px;}
    100%  {line-height: 50px;}
  }

.page-scroll-margin{
    display: block;
    width: 100%;
    height: 60px;
}

.navbar-default{
    position: fixed;
    top: 0;
    padding: 15px;
    z-index: 10000;
    width: 100%;
    background-color: transparent;
    overflow: hidden;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.navbar-shrink{
    padding: 0 15px 0 0;
    background-color: #2e2d32;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.35);
}

.navbar-default .logo{
    width: 100px;
    height: 100px;
    float: left;
    z-index: 10000;
    background: rgba(0, 0, 0, .3);
    background-image: url("../img/logo.png");
    background-size: 60px;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.navbar-shrink .logo{
    width: 60px;
    height: 60px;
    background-color: transparent;
    background-size: 30px;
}

.navbar-default ul{
    background: rgba(0, 0, 0, .3);
}

.navbar-shrink ul{
    background: transparent;
}
body{
    margin: 0;
    padding: 0;
}

html a{
    text-decoration: none;
    color: #22A7F0;
}
nav ul{
    float: right;
    overflow: hidden;
    color: white;
    padding: 0; margin: 0;
    opacity: 1.0;
    list-style: none;
    -webkit-transition: max-width 0.3s ease;
    -ms-transition: max-width 0.3s ease;
    -moz-transition: max-width 0.3s ease;
    -o-transition: max-width 0.3s ease;
    transition: max-width 0.3s ease;
}

nav ul li{
    font: 1em Montserrat Alternates, helvetica, arial, sans-serif;
    display: inline-block;
    padding: 15px 20px 20px 20px;
    border-top: 5px solid transparent;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
nav ul li:hover, nav ul li:active, nav ul li:focus, {
    border-top: 5px solid #59ABE3;!important
    color: #59ABE3;!important
}
nav a{
    color: #fff;
}
.handle{
    position: fixed;
    top: 0; right: 0;
    float: right;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    background: #2e2d32;
    cursor: pointer;
    color: white;
    display: none;
    text-align: center;
    z-index: 10001;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.handle i{
    font-size: 20px;
    line-height: 50px;
    z-index: 10001;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.closenav{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    z-index: 8;
    display: block;
}

.menucontact{
    background: #2e2d32;
    padding: 30px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: none;
}

/* banner */

.banner-info{
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    bottom: 0;
    padding:40px 0;
    z-index: 2;
    height: 150px;
}

header{
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    bottom: 0;
    padding:40px 0;
    z-index: 2;
    height: 150px;
}

header h1{
    font-size: 36px;
    margin: 0;
    position: absolute;
    width: 100%;
    top: 30px;
}
header h3{
    margin: 0;
    position: absolute;
    width: 100%;
    bottom: 52px;
}
.banner-info h1{
    font-size: 36px;
    margin: 0;
    position: absolute;
    width: 100%;
    top: 30px;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.banner-info h1:hover{
    font-size: 40px;
    top: 28px;
    color: #59ABE3;
    cursor: pointer;

}
.banner-info h3{
    margin: 0;
    position: absolute;
    width: 100%;
    bottom: 52px;
}
.banner-container{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
}
.banner-left{
    width: 15%;
    position: absolute;
    bottom: 0;
    left: 20%;
    z-index: 2;
    height: 150px;
    color: #fff;
    text-align: center;
    font-size: 60px;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    cursor: pointer;
}
.banner-left i{
    line-height: 150px;
}
.banner-right{
    width: 15%;
    position: absolute;
    bottom: 0;
    right: 20%;
    z-index: 2;
    height: 150px;
    color: #fff;
    text-align: center;
    font-size: 60px;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    cursor: pointer;
}
.banner-right:hover{
    font-size: 80px;
    color: #59ABE3;
}
.banner-right i{
    line-height: 150px;
}
.banner-left:hover{
    font-size: 80px;
    color: #59ABE3;
}

.vhcontainer{
	width: 100%;
    height: 100vh;
}

#banner{
	height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    background-color: black;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.glyphicon-chevron-left, .glyphicon-chevron-right {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
}

.arrow{
	position: absolute;
	top: 50%;
	width: 14px;
	height: 22px;
}

.carousel-indicators{
        width: 100%;
        padding: 0;
        margin: 0;
        bottom: 15px;
        z-index: 9999;
        left: 0;
    }

    .carousel-indicators li {
        width: 15px;
        height: 15px;
        background: #fff;
        border: none;
    }

    .carousel-indicators .active {
        width: 15px;
        height: 15px;
        background-color: #59ABE3;
        margin: 1px;
    }

    .carousel-control {
        opacity: .2;
    }

/* carousel fade */

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
}
.item:nth-child(1) {
  background: #74C390;
}
.item:nth-child(2) {
  background: #51BCE8;
}
.item:nth-child(3) {
  background: #E46653;
}


/* portfolio */

.container {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#filters {
    margin:1%;
    padding:0;
    list-style:none;
    text-align: center;
    font-family: Montserrat Alternates, Arial, Helvetica;
    font-weight: 400;
    font-size: 16px;

}

    #filters li {
        display: inline-block;
    }

    #filters li span {
        display: block;
        padding:10px 20px;
        text-decoration:none;
        border-radius: 3px;
        color:#666;
        cursor: pointer;
        margin-bottom: 5px;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }

    #filters li span:hover {
        background: #59ABE3;
        color:#fff;
    }

    #filters li span.active {
        background: #59ABE3;
        color:#fff;
    }


.portfoliolist img{
    margin-bottom: 30px;
    width: 100%;
}

#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:23%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;
        -webkit-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .portfolio-wrapper:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }


    .portfolio img {
        max-width:100%;
        position: relative;
    }


    .portfolio .label {
        position: absolute!important;
        display: block!important;
        width: 100%;
        height:100%;
        bottom:-100%;
    }

        .portfolio .label-bg {
            background: rgba(0, 0, 0, .5);
            width: 100%;
            height:100%;
            position: absolute!important;
            top:0;
            left:0;
        }

        .portfolio .label-text {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            z-index:500;
            padding:5px 8px;
        }

        .portfolio .text-category {
            display:block;
            font-size:9px;
        }

/* toon meer */

.toonminder{
    height: 1600px;
    overflow: hidden;
    position: relative;
}
.toonmeer{
    height: 1600px;
    overflow: hidden;
    position: relative;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
.meer{
    height: 100%;
}
.toonmeerbtn{
    margin-top: 40px;
    z-index: 11;
}
.toonmeerGradient{
    z-index: 10;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: block;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.99) 99%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 99%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}


/* over */

.canvas {
    display: block;
    position: relative;
    overflow: hidden;
}

#about li{
    display: inline-block;
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    background: #8a8a91;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    text-align: center;
    vertical-align: bottom;
    margin: 5px;
}

.portret{
    margin-bottom: 40px;
    width: 100%;
}

.portret1{
    width: 31%;
    margin: 1%;
    float: left;
}
.portret2{
    width: 31%;
    float: left;
    margin: 1%;
}
.portret3{
    width: 31%;
    float: left;
    margin: 1%;
}

#hoe{
    overflow: hidden;
}

#hoe img{
    height: 150px;
}

#hoe .btn{
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom:0;
}

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;

}

.flexbox .col-centered {
  flex: 1;
  position: relative;
  text-align: center;
  padding-bottom: 50px;
}

.bottom{
    height: 60px
}

#wie h1{
    margin: 0;
}

#about h3{
    margin-top: 15px;
}

.skill{
    width: 100%;
    height: 5px;
    background: #8a8a91;
}

.skill-fill{
    height: 5px;
    background: #59ABE3;
    margin: auto 0;
}



/* bootstrap overwrite */

.btn{
    padding: 10px 20px;
    background: #59ABE3;
    color: #fff;
    font-size: 16px;
    font-family: Montserrat Alternates, Arial, Helvetica;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.modal-content{
    border: none;
    border-radius: 0;
    box-shadow: 0 3px 15px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 3px 15px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 15px rgba(0,0,0,.2);
}

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.container{
    overflow-x:hidden;
}


/* modal */

.modal-exit{
    position: fixed;
    top: 0; right: 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #fff;
    background: #2e2d32;
    text-align: center;
    z-index:999;
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.modal-exit:hover{
    color: #59ABE3;
    font-size: 30px;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.modalinfo{
    padding: 30px 0;
    color: #8a8a91;
    background: #ecf0f1;
    margin-bottom: 30px;
    overflow: visible;
}


/* contact */

.col-md-2 .form-group{
    margin-left: -15px;
}
.col-sm-4 .form-group{
    margin-left: -15px;
}

.contactinfo{
    margin: -10px 0 30px 0;
    width: 100%;
    text-align: center;
}
.contactinfo h2{
    line-height: 30px;
}
.social{
    padding: 0;
    margin: 40px 0 0 0;
    text-align: center;
    list-style: none;
}

.social li{
    display: inline-block;
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    background: #8a8a91;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    text-align: center;
    vertical-align: bottom;
    margin: 1%;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.social li:hover{
    cursor: pointer;
    background: #59ABE3;
    font-size: 25px;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.social li.mobile-only{
    display: none;
}

/* footer */

footer .info{
    background: #242328;
    padding: 20px 0;
}
footer .info p{
    text-align: center;
    color: #ecf0f1;
}
footer .info a{
    color: #ecf0f1;
}
footer .copyright{
    color: #8a8a91;
    text-align: center;
    padding: 15px 0;
    background: #1d1d1f;
}
footer .copyright p{
    font-size: 14px;
    color: #8a8a91;
}
footer .copyright a{
    color: #8a8a91;
}
footer .col-xs-6{
    margin-bottom: 20px;
}

/* algemene voorwaarden modal */

.modal-dialog {
    width: 80%;
    height: 80%;
    margin: 10%;
    overflow-y: scroll;
    position: fixed;
    border-radius: 3px;
}
.modal-dialog .modal-exit{
    position: absolute;
    }
.modal-footer{
    text-align: center;
}
.modal-body{
    font-family: Lato, Arial, Helvetica;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #8a8a91;
}

/* portfolio */
.height-wrap-images{
    height: 100%;
}
.height-wrap-images2{
    height: 100%;
}
.height-wrap-text{
    height: 100%;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.height-wrap-text2{
    height: 100%;
}
.portfolio-images-wrap{
    position: absolute;
    width: 100%;
    display: block;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    background: #2e2d32;
}
.portfolio-images img{
    width: 100%;
    margin-bottom: 15px;
}

.portfolio-text-wrap{
    position: absolute;
    width: 100%;
    display: block;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 120px;
    box-shadow: 0 3px 15px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 3px 15px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 15px rgba(0,0,0,.2);

}

.portfolio-footer{
    position: fixed;
    width: 41.66666667%;
    padding: 40px 0;
    margin: 0;
    text-align: center;
    list-style: none;
    background: #2e2d32;
    bottom: 0;
    overflow: hidden;
    margin-top: 40px;
    z-index: 2000;
    display: block;
}

.portfolio-footer li{
    display: inline-block;
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    background: #8a8a91;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100%;
    text-align: center;
    vertical-align: bottom;
    margin: 1%;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.portfolio-footer li.infotextbtn{
    display: none;
}
.portfolio-footer li:hover{
    cursor: pointer;
    background: #59ABE3;
    font-size: 25px;
    -webkit-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}
.infotextbtn{
    display: none;!important
}

.portfolio-text-wrap img{
    width: 100%;
    margin-bottom: 30px;
}

/* usp */

.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0,0,0,0.2);
    @percentage-color: #97a71d;
    @percentage-font-size: 22px;
    @percentage-text-width: 57px;

    margin: 50px;
    width:  @circle-size;
    height: @circle-size;

    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width:    @circle-size;
            height:   @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
            border-radius: 50%;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width:       @inset-size;
        height:      @inset-size;
        position:    absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top:  (@circle-size - @inset-size)/2;

        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
        .percentage {
            height:   @percentage-font-size;
            width:    @percentage-text-width;
            overflow: hidden;

            position: absolute;
            top:      (@inset-size - @percentage-font-size) / 2;
            left:     (@inset-size - @percentage-text-width) / 2;

            line-height: 1;
            .numbers {
                margin-top: -@percentage-font-size;
                transition: width @transition-length;
                span {
                    width:          @percentage-text-width;
                    display:        inline-block;
                    vertical-align: top;
                    text-align:     center;
                    font-weight:    800;
                    font-size:      @percentage-font-size;
                    font-family:    "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
                    color:          @percentage-color;
                }
            }
        }
    }

    @i: 0;
    @increment: 180deg / 100;
    .loop (@i) when (@i <= 100) {
        &[data-progress="@{i}"] {
            .circle {
                .mask.full, .fill {
                    -webkit-transform: rotate(@increment * @i);
                    -ms-transform: rotate(@increment * @i);
                    transform: rotate(@increment * @i);
                }
                .fill.fix {
                    -webkit-transform: rotate(@increment * @i * 2);
                    -ms-transform: rotate(@increment * @i * 2);
                    transform: rotate(@increment * @i * 2);
                }
            }
            .inset .percentage .numbers {
                width: @i * @percentage-text-width + @percentage-text-width;
            }
        }
        .loop(@i + 1);
    }
    .loop(@i);
}