@charset "UTF-8";
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@import url("https://fonts.googleapis.com/css?family=Shrikhand");
@import url("https://fonts.googleapis.com/css?family=Rubik:400");
@import url("https://fonts.googleapis.com/css?family=Quicksand");
body {
  margin: 0;
  overflow: scroll;
  font-family: 'Quicksand', sans-serif; }

.headerContainer {
  width: 100%;
  height: 80vh;
  display: block;
  overflow: hidden;
  background-image: linear-gradient(135deg, #acb6e5 30%, #86fde8 100%);
  max-height: 400px;
}
  .headerContainer .inner-container {
    width: 90%;
  margin: 0 auto; }
  .headerContainer .title {
    position: relative;
    display: block; }
    .headerContainer .title h1 {
      font: normal 3.6rem 'Shrikhand', Helvetica, sans-serif;
      color: #fff;
      letter-spacing: 0.05em;
      text-align: center;
      text-shadow: 0 0 20px rgba(168, 210, 249, 0.9), -5px -5px 0 rgba(194, 183, 254, 0.5), 5px 5px 0 rgba(149, 169, 255, 0.6); }

.underline {
text-decoration: underline;
}
.button {
  font-size: 17px;
  color: black;
  background-color: rgba(255, 255, 255, 0.75);
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 1.5em 1em;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  display: block;
  position: relative;
  max-width: 300px;
  z-index: 100;
  text-transform: uppercase;
  transition: ease-in 0.3s; }
  .button:hover {
    background-color: #fff;
    box-shadow: 0px 10px 14px -3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    text-decoration: none;
    color: black; }

.hero_btn {
  width: 190px;
  padding: 5px;
  margin-top: 13px;
  color: #87b0d0;
}
.hero_btn:hover {
  color: #87b0d0;
}

.shape {
  margin: 0 auto;
  position: relative;
  margin-top: -10%; }

.random-shape:after {
  font-family: FontAwesome;
  content: "\f005"; }

@keyframes shape-1 {
  0% {
    transform: translate3d(0, 0, 0) rotate(3deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(363deg); } }
.shape-container--1 {
  animation: shape-1 48s linear infinite; }
  .shape-container--1 .random-shape:after {
    margin: 2rem;
    color: #FFF;
    opacity: .6;
    font-size: 0.8rem;
    content: ""; }

@keyframes shape-2 {
  0% {
    transform: translate3d(0, 0, 0) rotate(237deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(597deg); } }
.shape-container--2 {
  animation: shape-2 50s linear infinite; }
  .shape-container--2 .random-shape:after {
    margin: 9rem;
    color: #FFF;
    opacity: .6;
    font-size: 3.6rem;
    content: ""; }

@keyframes shape-3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(317deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(677deg); } }
.shape-container--3 {
  animation: shape-3 45s linear infinite; }
  .shape-container--3 .random-shape:after {
    margin: 7rem;
    color: #FFF;
    opacity: .6;
    font-size: 2.8rem;
    content: ""; }

@keyframes shape-4 {
  0% {
    transform: translate3d(0, 0, 0) rotate(236deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(596deg); } }
.shape-container--4 {
  animation: shape-4 47s linear infinite; }
  .shape-container--4 .random-shape:after {
    margin: 5rem;
    color: #FFF;
    opacity: .6;
    font-size: 2rem;
    content: ""; }

@keyframes shape-5 {
  0% {
    transform: translate3d(0, 0, 0) rotate(192deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(552deg); } }
.shape-container--5 {
  animation: shape-5 44s linear infinite; }
  .shape-container--5 .random-shape:after {
    margin: 5rem;
    color: #FFF;
    opacity: .6;
    font-size: 2rem;
    content: ""; }

@keyframes shape-6 {
  0% {
    transform: translate3d(0, 0, 0) rotate(24deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(384deg); } }
.shape-container--6 {
  animation: shape-6 42s linear infinite; }
  .shape-container--6 .random-shape:after {
    margin: 10rem;
    color: #FFF;
    opacity: .6;
    font-size: 4rem;
    content: ""; }

@keyframes shape-7 {
  0% {
    transform: translate3d(0, 0, 0) rotate(305deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(665deg); } }
.shape-container--7 {
  animation: shape-7 44s linear infinite; }
  .shape-container--7 .random-shape:after {
    margin: 7rem;
    color: #FFF;
    opacity: .6;
    font-size: 2.8rem;
    content: ""; }

@keyframes shape-8 {
  0% {
    transform: translate3d(0, 0, 0) rotate(121deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(481deg); } }
.shape-container--8 {
  animation: shape-8 47s linear infinite; }
  .shape-container--8 .random-shape:after {
    margin: 2rem;
    color: #FFF;
    opacity: .6;
    font-size: 0.8rem;
    content: ""; }

@keyframes shape-9 {
  0% {
    transform: translate3d(0, 0, 0) rotate(341deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(701deg); } }
.shape-container--9 {
  animation: shape-9 45s linear infinite; }
  .shape-container--9 .random-shape:after {
    margin: 3rem;
    color: #FFF;
    opacity: .6;
    font-size: 1.2rem;
    content: ""; }

@keyframes shape-10 {
  0% {
    transform: translate3d(0, 0, 0) rotate(64deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(424deg); } }
.shape-container--10 {
  animation: shape-10 48s linear infinite; }
  .shape-container--10 .random-shape:after {
    margin: 10rem;
    color: #FFF;
    opacity: .6;
    font-size: 4rem;
    content: ""; }

@keyframes shape-11 {
  0% {
    transform: translate3d(0, 0, 0) rotate(321deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(681deg); } }
.shape-container--11 {
  animation: shape-11 50s linear infinite; }
  .shape-container--11 .random-shape:after {
    margin: 9rem;
    color: #FFF;
    opacity: .6;
    font-size: 3.6rem;
    content: ""; }

@keyframes shape-12 {
  0% {
    transform: translate3d(0, 0, 0) rotate(268deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(628deg); } }
.shape-container--12 {
  animation: shape-12 42s linear infinite; }
  .shape-container--12 .random-shape:after {
    margin: 10rem;
    color: #FFF;
    opacity: .6;
    font-size: 4rem;
    content: ""; }

@keyframes shape-13 {
  0% {
    transform: translate3d(0, 0, 0) rotate(64deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(424deg); } }
.shape-container--13 {
  animation: shape-13 50s linear infinite; }
  .shape-container--13 .random-shape:after {
    margin: 5rem;
    color: #FFF;
    opacity: .6;
    font-size: 2rem;
    content: ""; }

@keyframes shape-14 {
  0% {
    transform: translate3d(0, 0, 0) rotate(75deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(435deg); } }
.shape-container--14 {
  animation: shape-14 42s linear infinite; }
  .shape-container--14 .random-shape:after {
    margin: 10rem;
    color: #FFF;
    opacity: .6;
    font-size: 4rem;
    content: ""; }

@keyframes shape-15 {
  0% {
    transform: translate3d(0, 0, 0) rotate(102deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(462deg); } }
.shape-container--15 {
  animation: shape-15 46s linear infinite; }
  .shape-container--15 .random-shape:after {
    margin: 7rem;
    color: #FFF;
    opacity: .6;
    font-size: 2.8rem;
    content: ""; }

@keyframes shape-16 {
  0% {
    transform: translate3d(0, 0, 0) rotate(71deg); }
  100% {
    transform: translate3d(0, 0, 0) rotate(431deg); } }
.shape-container--16 {
  animation: shape-16 49s linear infinite; }
  .shape-container--16 .random-shape:after {
    margin: 4rem;
    color: #FFF;
    opacity: .6;
    font-size: 1.6rem;
    content: ""; }




.stop-shape {
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

.logoImg {
  margin-left: auto;
  margin-right: auto;
  max-width: 400px; }

.logoContainer {
  padding-top: 166px; }

.introContainer {
  margin-top: 90px; }

.sexy_line {
  width: 100px;
  margin-top: 5px;
  margin-bottom: 20px;
  display: block;
  border: none;
  color: white;
  height: 3px;
  background: black;
  background: linear-gradient(90deg, #48A1F3 0%, #87d3d6 100%); }

.sexy_line.white {
  background: #FFF; }

.pImg {
  max-width: 55%;
  padding-top: 25px;
  margin-left: auto;
  margin-right: auto; }

.vis {
  margin-top: 15px;
  margin-bottom: 15px;
  max-width: 115px;
  margin-left: auto;
  margin-right: auto; }

.center-text {
  text-align: center; }

.height-equal {
  min-height: 150px; }

.shrinkDiv {
  margin-left: 15px;
  margin-right: 15px;
  max-width: 275px; }

#vis-icon {
  padding-top: 26px; }

#dev-icon {
  max-width: 150px; }

.container {
  padding-top: 80px;
  padding-bottom: 80px; }

.center {
  margin-left: auto;
  margin-right: auto; }

.grad-bg {
  background-image: linear-gradient(135deg, #acb6e5 30%, #86fde8 100%);
}

.white {
  color: #FFF; }

.hvr-box {
  position: relative;
}
.hvr-box {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  background: black;
  border-radius: 5px;
  transition: ease-in 0.4s;
}
.middle {
  transition: .5s ease;
 opacity: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 text-align: center;
}
.portfolio-img-text {
background-color: #87d3d6;
border-radius: 35px;
color: white;
font-size: 16px;
padding: 16px 32px;

transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.hvr-portfolio-img:hover {
  opacity: .6;
}


 .hvr-grow-shadow:hover .portfolio-img-text {
   opacity: 1;
 }


.hvr-grow-shadow {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  border: solid 3px #87d3d6;
  border-radius: 5px;
  color:white;
 }

.hvr-grow-shadow.white-border {
  border-color: #FFF; }

.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  background-color: black;
 }

 .hvr-grow-shadow.no-black:hover, .hvr-grow-shadow.no-black:focus, .hvr-grow-shadow.no-black:active{
   background-color: white;
 }

.portfolio-img-container {
  position: relative;
}
.portfolio-img-container:hover .portfolio-img{
  opacity: .3;
}
.portfolio-img-container:hover .portfolio-btn{
  opacity: 1;
}
.portfolio-img-container-bg {
  background: black;
  border-radius: 5px;
}
.portfolio-img{
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.portfolio-btn {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.portfolio-btn-text {
  background-color: #87d3d6;
  border-radius: 35px;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.bullet-1{
  background: url('../img/bullet_1.svg') no-repeat left center;
}
.bullet-2{
  background: url('../img/bullet_2.svg') no-repeat left center;
}
.bullet-3{
  background: url('../img/bullet_3.svg') no-repeat left center;
}

.skills {
  font-size: 17px;
  margin-top: -5px;
  margin: 24px 0 3px 0;
  vertical-align: middle;
  list-style: none;

  padding-left: 49px;
}



#extra-b-marg {
  margin-bottom: 75px; }

.spaceToGrow {
  width: 50%;
  max-width: 400px;
  margin-left: 30px;
  margin-right: 30px; }

.extra-b-pad {
  padding-bottom: 45px; }

.extra-b-pad-sm {
  padding-bottom:15px;
}
.container-remove-b-pad {
  padding-bottom: 0px;
}

.bc {
  max-width: 133px; }

.navbar-brand {
  padding: 5px 15px; }

.logoImgNav {
  width: 135px; }

.navbar {
  margin-bottom: 0px;
  border-radius: 0px; }

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #87d3d6;
  border-radius: 35px;
  transition: ease-in 0.3s; }

.nav-tabs > li {
  text-align: center; }

.nav-tabs, .nav-tabs:focus, .nav-tabs:active, .nav-tabs:hover {
  border: none; }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: #fff;
  cursor: default;
  background-color: #acb6e5;
  border: none;
  border-bottom-color: none;
  border-radius: 30px; }

.nav-tabs > li > a:hover {
  border: none;
  border-radius: 30px;
  background-color: #87d3d6 ;
  color: white; }

.shape.sub {
  margin-top: 0px; }

.headerContainer .inner-container.sub {
  width: 100%; }

.headerContainer.sub {
  max-height: 250px; }

.headerContainer.contact-container {
  max-height: 100vh;
  height: 100vh;
}
.smaller {
  max-width: 270px; }

.lilSmaller {
  max-width: 500px; }

li > a {
  color: black; }

.noExtraPad {
  padding-top: 0px; }

.neg-margin-top {
  margin-top: -140px; }

.lilTopPad {
  padding-top: 12px; }

.container-fluid {
  padding-right: 15%;
  padding-left: 15%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: auto;
  margin-left: auto; }

.navbar-default {
  background-color: rgba(248, 248, 248, 0.72);
  border-color: transparent; }

.navbar-default .navbar-nav > li > a {
  color: black; }

@media (min-width: 320px) and (max-width: 1024px) {
  h2 {
    text-align: center; }

  .sexy_line {
    margin-right: auto;
    margin-left: auto; }

  .spaceToGrow {
    width: 80%;
    margin-left: auto;
    margin-right: auto; }

  .shrinkDiv {
    margin-left: auto;
    margin-right: auto; }

  .white {
    text-align: center; }

  .nav-tabs > li {
    width: 96%; } }


.container.port-header {
  padding-bottom: 30px;
}
.port-role-border {
  border: solid 1px #bfbfbf;
    padding: 20px;
    border-radius: 5px;
}
.img1{
  margin-top: 32px;
  margin-bottom: 32px;
}
.img-bg {
  background-image: url:("assets/img/slik/slik-showcase.png");
}
.boldy{
  font-weight:900;
}