* {
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: #fff;
  line-height: 0px;

}


body{

  font-family: 'Work Sans', sans-serif;
  color: black;
  opacity: 0;
  -webkit-animation: fadeout 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
  opacity: 1;

}





@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

div{
  border: 0px solid transparent;
  line-height: 0px;


}

#navgrad{
  background: #5433ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}


.heroone {
  background: #5433ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 5px;
  padding-bottom: 5px;
  background-size: cover;
  background-blend-mode: normal;

  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;

}

.herotwo{
    background: #5433ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-size: cover;
    background-blend-mode: normal;
    overflow: hidden;
    object-fit: contain;
    font-family:  "Work Sans", sans-serif;
    font-color: #202020;


}

.herothree{
    background: #5433ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 5px;
    background-size: cover;
    background-blend-mode: normal;
    overflow: hidden;
    object-fit: contain;
    font-family:  "Work Sans", sans-serif;
    font-color: #202020;


}

.herofour{
    background: #5433ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 5px;
    background-size: cover;
    background-blend-mode: normal;
    overflow: hidden;
    object-fit: contain;
    font-family:  "Work Sans", sans-serif;
    font-color: #202020;


}

.herofive {
  background: #5433ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 5px;
  padding-bottom: 0px;
  background-size: cover;
  background-blend-mode: normal;

  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;

}

.homespaces{
  background: #7b4397;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #dc2430, #7b4397);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #dc2430, #7b4397); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

padding: 5px;
  padding-top: 5px;
  background-size: cover;
  background-blend-mode: normal;
  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;

}


.rescue{
  background: #36D1DC;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  padding-top: 5px;
  background-size: cover;
  background-blend-mode: normal;
  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;
}

.gstar{
  background: #FF5F6D;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  padding-top: 5px;
  background-size: cover;
  background-blend-mode: normal;
  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;
}

.spotify{
  background: #11998e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  padding-top: 5px;
  background-size: cover;
  background-blend-mode: normal;
  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;
}


.indifilm{
  background: #4568DC;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #B06AB3, #4568DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  padding-top: 5px;
  background-size: cover;
  background-blend-mode: normal;
  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;
}


.showkali{
  background: #1c92d2;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  padding-top: 5px;
  background-size: cover;
  background-blend-mode: normal;
  overflow: hidden;
  object-fit: contain;
  font-family:  "Work Sans", sans-serif;
  font-color: #202020;
}



.fab {

   border: 0px;
   display: grid;
   padding-right: 100%;

}

#fontawe{
  color: grey;
}

.navbar{

  padding: 5px;



}



/*
.navbar > .container{
  color: black;
  background-color: black;
  text-color: white;
}

.navbar-brand {
  text-align: center;
  align-items: center;
  align-content: center;
  align-self: center;
  background-color: black;
  text-color: white;
}
.navbar-item, .navbar-menu, .navbar-end{
  background-color: black;
  text-color: white;
}

.navbar-burger{
  background-color: black;
  color: white;
}
*/
.subtitle {

  color: rgb(34, 34, 34);
  font-weight: 300;

}

.title  {
  color:rgb(0,0,0);
  font-weight: 600;
}


.hero-body {
  align-items: center;
  align-self: center;
  align-content: center;
  background: url("assets/BG.png");

}

.container .box {
align-items: center;
display: grid;
justify-content: center;
flex-wrap: wrap;
align-content: center;
   width: 100%;
/* padding: 250px; */
box-sizing: border-box;
border-color: white;

}



.content{

}

.card{
  align-content: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px black;
  max-width: 100%;
   height: auto;
  /* -webkit-box-shadow: 7px 10px 20px -10px rgba(0,0,0,0.81);
 box-shadow: 7px 10px 20px -10px rgba(0,0,0,0.81); */

}


.image{
/*  -webkit-box-shadow: -7px 10px 20px -10px rgba(0,0,0,0.81);
  box-shadow: -7px 10px 20px -10px rgba(0,0,0,0.81); */
}

.card-content {
  text-align: justify;

}

.card-content > subtitle, .card-content > .card-header-title {
  text-align: justify;
  color: rgb(33,37,41);

}



.card-header .card-header-title{
  align-content: justify;
  justify-content: justify;
  text-align: justify;
  background-color: rgb(33,37,41);
  color: rgb(33,37,41);
}

.btn-container{

  text-align:justify;
}

.button{
  align: center;
  margin-left: auto;
  margin-right: auto;

}

.portcard{
  padding-bottom: 2em;
  border-width: medium;
  background-color: rgba(255, 0, 0, 0.0);
}


.portcard1{
  border-width: medium;
  background-color: rgba(255, 0, 0, 0.0);

}

.portcard1 > div, .portcard1 > figure , .portcard1 > .image{

  background-color: rgba(255, 0, 0, 0.0);

}

.content-p{
justify-content: center;
align-content: center;
margin-bottom: auto;
margin-top: auto;
  background-color: rgba(255, 0, 0, 0.0);
}

.columns{

  display: grid;
  line-height: 15px;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding:0px;
}
.column{
  display: grid;
  line-height: -5px;
  margin-bottom: 0px;
  margin-top: -10px;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 20px;

}
/*
.columns{
  justify-content: center;
  align-content: center;
  height: 80%;
  width: 80%;

}
*/
/*
.box{
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
  mix-blend-mode: normal;
  margin: auto;
  max-width: 60%,
  max-height: 60%;
}
*/

/* OVERLAY EFFECTS */

/*.overlay {
  position: absolute;

  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}
*/
/*
.container:hover .overlay {
  opacity: 1;
}
*/

.portimg1{
  display: grid;
  padding: 0px;
  margin: 0px;
  align-self: center;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-color: black;
  border:0px solid transparent;
  visibility: hidden;
  opacity: 0.0;
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
  opacity: 1;
  visibility: visible;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px 0px 0px 0px;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000;
  box-shadow: 0 0 10px #000000;
  max-width: 100%;
   height: auto;
}

.portimg:hover
	{
    background-color: black;
    opacity: 0;
    transition-delay: 2ms;
    -webkit-transition: background-color 2ms ease-in;
    -moz-transition: background-color 2ms ease-in;
    -o-transition: background-color 2ms ease-in;
    transition: background-color 2ms ease-in;

    opacity: 1;

    background-color: #00CC9950;
    border-radius: 2px;
    border: 1px solid #00CC9950;
    cursor: pointer;
    -moz-box-shadow: 20 20 20px #00CC9950;
    -webkit-box-shadow: 20 20 20px #00CC9950;
    box-shadow: 20px 20 20px #00CC9950;

	}

  .portimg2{
    display: grid;
    padding: 0.5em;
    margin: 0em;
    align-self: center;
    align-content: center;
    align-items: center;
    justify-content: center;

    border:0px solid transparent;
    visibility: hidden;
    opacity: 0.0;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 3s; /* Firefox < 16 */
          -ms-animation: fadein 3s; /* Internet Explorer */
           -o-animation: fadein 3s; /* Opera < 12.1 */
              animation: fadein 3s;
    opacity: 1;
    visibility: visible;


    max-width: 100%;
     height: auto;
  }

  .footer, .footer > div, .footer > i, .footer > .fab, .footer > img{
    background-color:rgb(33,37,41);
    color: rgb(33,37,41);

  }

  .footerhigh{
      color: #00CC99;
      background-color:rgb(33,37,41);
  }

  .footerp {
  background-color:rgb(33,37,41);
    padding: 0.3em;
  }

.footerimg{
  background-color: rgb(33,37,41);
  color: rgb(33,37,41);
  width: 3em;
  padding: 0.3em;

  background-blend-mode: luminosity;
  border:0px solid transparent;
}

  .p {
    font-size: 24px;
    margin: 20px;
  }

  .hovereffect {
    width: 100%;
     height: 100%;
     float: left;
     overflow: hidden;
     position: relative;
     text-align: center;
     cursor: default;
     background: #42b078;
}

.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: auto;
  top: auto;
  opacity: 0.8;
/*  background-color: white; */

  /*border-bottom: 3px solid white;
  border-top: 3px solid white; */
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);


}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img  {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.9);
  -webkit-filter: brightness(0.9);
  opacity: 0.4;
}


.hovereffect: hover h1 {
  font-family: 'Work Sans';
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 84px;
  background-color: transparent;
  color: black;
  padding: 2em;
  opacity: 0;
  filter: alpha(opacity=0.9);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect h2 {
  font-family: 'Archivo';
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 24px;
  background-color: transparent;
  color: black;
  padding: 2em;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}

.hovereffect p {
  color: black;
    background-color: transparent;
  padding: 2em;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect a{
  color: #00CC99;
    background-color: rgba(0, 0, 0, 0.92);
  padding: 1em;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2, .hovereffect:hover h1 {
  opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}