@charset "utf-8";
/* CSS Document */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
/* reference https://motiontheagency.com/ */

	.show-mbl {display: none;}
	.show-dt {display: inherit;}

/* this is how you can add stylings to wrapper, f.e. 
.lightbox-carousel.carousel {
  padding: 1rem;}
.lightbox-carousel.carousel img {
	object-fit: cover!important;
	    margin: auto !important;
	    max-height: 100% !important; }
.carousel-inner .ratio .ratio-16x9 {background-color: aqua!important;}*/
.cite-work {border-top: #000000; line-height: 199%;}
.cite-work-title {font-size: 1.3em; line-height: 105%;}
.cite-work-text {font-size: 1em; line-height: 125%!important;} 

body {background-color: #ffffff;}
html, body { overflow-x: hidden; }
.mt_25 {margin-top: 25px;}
.mt_50 {margin-top: 50px;}
.mt_75 {margin-top: 75px;}
.mt_100 {margin-top: 100px;}
.mb_25  {margin-bottom: 25px;}
.mb_50 {margin-bottom: 50px;}
.mb_75 {margin-bottom: 75px;}
.mb_100 {margin-bottom: 100px;}
.pt_25 {padding-top: 25px;}
.pt_50 {padding-top: 50px;}
.pt_75 {padding-top: 75px;}
.pt_100 {padding-top: 100px;}
.pb_25 {padding-bottom: 250px; }
.pb_50 {padding-bottom: 50px; }
.pb_75 {padding-bottom: 750px; }
.pb_100 {padding-bottom: 100px; }
.neg_m_25 {margin-top: -25px!important;}
.neg_m_50 {margin-top: -50px!important;}
.neg_m_75 {margin-top: -75px!important;}
.spacing-100 {padding: 50px 0;}
.spacing-200 {padding: 100px 0;}
/* 
FONT -------------------------------------------------------------------------*/
.anton-regular { font-family: "Anton", sans-serif!important; font-weight: 400!important; font-style: normal!important;}
.roboto-thin { font-family: "Roboto", sans-serif;  font-weight: 100; font-style: normal;}
.roboto-light {font-family: "Roboto", sans-serif;  font-weight: 300;  font-style: normal;}
.roboto-regular {  font-family: "Roboto", sans-serif; font-weight: 400;  font-style: normal;}
.roboto-medium {  font-family: "Roboto", sans-serif;  font-weight: 500;  font-style: normal;}
.roboto-bold {  font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal;}
.roboto-black {  font-family: "Roboto", sans-serif;  font-weight: 900;  font-style: normal;}
.roboto-thin-italic {  font-family: "Roboto", sans-serif;font-weight: 100;  font-style: italic;}
.roboto-light-italic {  font-family: "Roboto", sans-serif;font-weight: 300;  font-style: italic;}
.roboto-regular-italic {  font-family: "Roboto", sans-serif; font-weight: 400;  font-style: italic;}
.roboto-medium-italic {  font-family: "Roboto", sans-serif; font-weight: 500;  font-style: italic;}
.roboto-bold-italic {  font-family: "Roboto", sans-serif; font-weight: 700;  font-style: italic;}
.roboto-black-italic {  font-family: "Roboto", sans-serif; font-weight: 900;  font-style: italic;}

.h1 {font-size: 8em; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal; line-height: 100%;}
.h1-subtag {  font-size: 1em; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;}
h2 {font-size: 3em; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal;}

h3 {font-size: 2em; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal;}
h4 {font-size: 1.5em; line-height: 150%; }

/* 
HIGHLIGHTING TEXT-------------------------------------------------------------------------*/
.blue-text {color: #63cdfa;}
.grey-text {color:#C1CCCF;}
.black-text {color: #212529!important;}
.btn-text {font-size: .7em;}
.highlight {background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #00cffc 65%); display: inline;}

.hover-1 {  background: linear-gradient(#1095c1 0 0) var(--p, 0) / var(--p, 0) no-repeat;transition: 0.4s, background-position 0s;}
.hover-1:hover {  --p: 100%; color: #fff;}

.underlined-link {  padding-bottom: 5px; text-decoration: none; border-bottom: 1px solid #337ab7;}
.mega-text {font-size: 7em;}

/* 
BUTTONS-------------------------------------------------------------------------*/
.btn-close { font-size: .7em;   width: 10px;  height: 10px;  opacity: 0.75;}

.btn-grey {background-color:#C8C8C8; }
.btn-outline {background-color: #ffffff; outline: solid; border: #494949;}
.btn-outline:hover { background-color: #212529; color: #ffffff;}
.btn-blue { background-color: #63cdfa;}
.btn-black { background-color: #101010; color: #ffffff!important; border-color: #ffffff!important;}


/*------------------------------------ 
MODAL 
-----------------------------------*/
.modal-header {background: #FFFFFF;}
.modal-footer {background: #FFFFFF; justify-content: space-between!important;}

.modal-port-title{font-size: 3em; line-height: 133%; }

.modal-services-title {}

.modal-pull-content-more-left-cuz-i-couldnt-figure-pulls-out {margin-left: -50px;}

.lead {font-size: 1em;}

.process-title { font-size: 1em; letter-spacing: 3px;}

.port-cta-headline { font-size: 1.5em;}

.more-info-link {font-size: .8em; text-transform: uppercase;}
.more-info-link a:hover { color: #306379;}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}




/*------------------------------------ 
TIMELINE
-----------------------------------*/
.timeline { display: flex; flex-direction: column;
  /*width: 50vw;  To Make it fit in the bootstrap col */
  margin: 3% auto;
}
.timeline__event {
max-width: 85%; /* << Added to keep the timeline boxes from stretching the fullwidth b/c it looked weird */
  background: #fff;
  margin-bottom: 20px;
  position: relative;
  display: flex;
  margin: 10px 0;
  border-radius: 8px;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
}
.timeline__event__title {
  font-size: 1rem;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  color: #63cdfa;
  letter-spacing: 1.5px;
}
.timeline__event__content { padding: 20px;}
.timeline__event__phase {
  color: #ffffff; /* << BOx 1 and 4  color*/
  font-size: 1.2rem;
  font-weight: 600;
	letter-spacing: 1px;
  white-space: nowrap;}

.timeline__event__icon {
  border-radius: 8px 0 0 8px;
  background: #63cdfa;  /* << BOx 1 and 4 phase */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 25%;
  font-size: 2rem;
  padding: 10px;}

.timeline__event__icon i {
  position: absolute;
  top: 50%;
  left: -65px;
  font-size: 1.5rem;
  transform: translateY(-50%);
  color: #63cdfa;  /* << BOx 1-4 icon color*/
}
.timeline__event__description {
  flex-basis: 60%;
}
.timeline__event:after {
  content: "";
  width: 2px;
  height: 100%;
  background:#0C996A;
  position: absolute;
  top: 52%;
  left: -3.5rem;
  z-index: -1;
}
.timeline__event:before {  /* << BOx 1 and 4  icon*/
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
 /* background: #f6a4ec;
  border-radius: 100%; */
  left: -6rem;
  top: 50%;
  transform: translateY(-50%);
 /* border: 2px solid #1B1B1B;  */
}
.timeline__event--type2:before {
 /* background: #87bbfe; */     /* << Box 2 - Icon */
 /* border-color: #1B1B1B;  */
}
.timeline__event--type2:after {
}
.timeline__event--type2 .timeline__event__phase {
  color: #ffffff;
}
.timeline__event--type2 .timeline__event__icon {
 background: #50a6ca;   /* << BOx 2 phase */
  color: #1B1B1B;
}
.timeline__event--type2 .timeline__event__title {
  color: #50a6ca;   /* << BOx 2 title text */
}

.timeline__event--type2 .timeline__event__icon i { color:#50a6ca; } /* << BOx 3 icon color */

.timeline__event--type3:before {
  /*background: #aff1b6;
  border-color: #1B1B1B; */    /* << Box 3 - Icon */
}
.timeline__event--type3:after {
}
.timeline__event--type3 .timeline__event__phase {
  color: #ffffff;
}
.timeline__event--type3 .timeline__event__icon {
 background: #306379;   /* << BOx 3 phase */
}
.timeline__event--type3 .timeline__event__title {  color: #306379;   /* << BOx 3 title text */ }

.timeline__event--type3 .timeline__event__icon i { color:#306379; } /* << BOx 3 icon color */

.timeline__event:last-child:after { content: none;}
@media (max-width: 786px) {
  .timeline__event { flex-direction: column;}
  .timeline__event__icon {  border-radius: 4px 4px 0 0;  }
}








/*------------------------------------ 
LOGO SLIDER
-----------------------------------*/
* {margin: 0;  padding: 0; box-sizing: border-box; }
 .logos-slide { animation: 40s slide infinite linear;}
  .logos-slide img { width: 200px; margin: 0 25px; border-radius: 20px;
            /*transform: skewX(7deg);*/
            transition: all 0.7s ease; cursor: pointer;  position: relative;}

.logos-slide img:hover {  transform: skewX(0);  transform: scale(1.1);}

.logos-slide img::before {
            content: attr(data-name);
            width: 100%;   height: 100%;  position: absolute; inset: 0;}

.hero-text {  display: flex;  flex-direction: column; justify-content: center; align-items: center;}

.hero-text img { width: 100px; margin-bottom: 1em;}

.hero-text h2 { font-family: 3em; font-weight: lighter;  text-align: center; color: white; }

.hero-text p { font-family: 1.2em; font-weight: lighter;  text-align: center; color: white; }

@keyframes slide {
            from{
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }








.ABOUT_tagline {font-size: 1.5rem;}
.ABOUT_big-word {font-size: 3.9em;}



/*
 I'm trying to get the font size right for Nav and it has a class names called item.  But i also found that class name below, so now im just fucking around.
.item h4 {font-size: 1.2em!important; color: #ffffff!important;}*/


/*------------------------------------ 
EXPERTISE 
-----------------------------------*/
.expertize {  background-color: black; color: white;}
.expertize .item { padding-top: 50px;}

.expertize .active { background-color: red; color: blue;}

.expertize button {
  background-color: black;
  color: white;
  font-size: 39px;}

.expertize button:hover { color:#00B0E3;}

#expertize { padding-top: 160px; margin-top: -160px;}

button {
  padding: 25px;
  background-color: white;
  border: none;}

button:hover, button:focus, button.active {
  color: #00B0E3;}

.expertise-title {font-size: 2.2em; line-height: 100%;}

.expertise-preview {font-size: .4em; opacity: .7; }

.dots {}

.more {font-size: 1em; line-height: 150%; }
.more-title {font-size: 2em; }

.exp-ex-pad {margin-top: 3%;}








/*------------------------------------ 
MASONRY
-----------------------------------*/

.make-click {cursor: pointer;}


.port-title-card {color: #ffffff; padding: 17px 17px 10px 17px;  }

 .masonry .grid__title {
	 font-size: 3em;  line-height: 111%;
}
 .masonry .grid__author {
	 font-size: 14px;
	 font-weight: 300;
}
 .masonry .grid__link {
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
}

 .masonry .grid__tag {
	/* background-color:#63cdfa; */
	 color: #fff;
	 border-radius: 2px;opacity: .4;
/* 	 padding: 5px 15px;*/
	 margin-bottom: 5px;
	 font-size: .8em;
 font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal;

}

.latest-port  {font-size: 4.7em!important; line-height: 5%!important; margin-top: 20%;  }  


.latest-port-sub  { font-size: .33em!important; letter-spacing: .5px; }



/* Masonry  1st attempt - that's more for a large portfolio	 */

.masonry {
	 columns: 4;
	 column-gap: 16px;
}

.masonry-2 {
	 columns: 2;
	 column-gap: 16px;
}
 @media (max-width: 1200px) {
	 .masonry {
		 columns: 3;
	}
}
 @media (max-width: 992px) {
	 .masonry {
		 columns: 2;
	}
}
 .masonry .grid {
	 display: inline-block;
	 margin-bottom: 16px;
	 position: relative;
}
 .masonry .grid:before {
	 border-radius: 5px;
	 content: '';
	 position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 background-color: rgba(0, 0, 0, .2);
}
 .masonry .grid img {
	 width: 100%;
	 border-radius: 5px;
}

 .masonry .grid__body {
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 padding: 12px 10px;
	 color: #fff;
	 display: flex;
	 flex-direction: column;
}

 .mt-auto {
	 margin-top: auto;
}
 













.tags { /*display: flex;  Kept them in line */ gap: 0.75rem; margin-bottom: 2rem;}
.type-small {  font-size: .7em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2em;/* <<< added to give spacing to the tags in ABOUT */ }
.tags a { border: 1px solid; padding: 0.25rem 0.25rem 0.15rem 0.25rem;  font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal; line-height: 1;  border-radius: 3px; text-decoration: none; color: var(--color-link);   outline: none;  cursor: pointer;  opacity: 1; transition: 0.3s;}

.tags a:hover {background-color:#191919; color: #ffffff; transition: background 0.7s; }
.header-tags a:hover {background-color:#0376A6!important; color: #ffffff; transition: background 0.7s; }

.card-title { font-size: .8em; text-transform: uppercase; color:#181818; letter-spacing: .5px; }

.card-text {}


.card-text a {
  font-size: .8em;
	letter-spacing: 1px;
  text-decoration-color: #1095c1;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}


main { position: relative; z-index: 2; background: #ffffff; /*height: 1500px;*/ margin-bottom: 550px; box-shadow: 3px 2px 2px 0px rgba(51,51,51,0.5);}
/* THIS WAS CHANGING THE COLOR OF THE BODY FONT SO I NULLED IT ALL TO BE SAFE
main p { margin: 0; padding-top: 100px; font-size: 100px; text-align: center;}*/
footer { position: fixed;  bottom: 0; width: 100%; height: 475px; background: #212529!important; font-size: 100px; color: #ffffff;}
footer h2 {line-height: 120%; font-size: .5em;}
footer p {}


.footer-headline {align-content: 5em;}



.footer-IMG {max-width: 30%;}


.form-all { background-color: #212529!important;}



/* ------------
https://www.geeksforgeeks.org/bootstrap-5-cards-masonry/
https://masonry.desandro.com/
https://isotope.metafizzy.co/
http://salvattore.com/
https://bootstrapbrain.com/component-category/free/
https://www.bootstrapcdn.com/
Mason grid*/


#scroll-down {
    display: block;
    position: relative;
    padding-top: 79px;
  text-align:left;
}

#scroll-down-2 {
    display: block;
    position: relative;
    padding-top: 79px;
  text-align:left;
}
.arrow-down {
    display: block;
    margin: 0 auto;
    width: 10px;
    height: 25px;
}/*
.arrow-down:after {
    content: '';
    display: block;
    margin: 0;
    padding: 0;
    width:10px;
    height: 10px;
	
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    behavior: url(-ms-transform.htc);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}*/
.arrow-down-2:after {
    content: '';
 display: block!important;
	margin: auto!important;
	padding: 0;
    width:10px;
    height: 10px;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    behavior: url(-ms-transform.htc);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
	transform: rotate(135deg);}
.arrow-down-1:after {
    content: '';
    display: block;
    margin: 0;
    padding: 0;
    width:10px;
    height: 10px;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    behavior: url(-ms-transform.htc);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
	transform: rotate(135deg);}

#scroll-title {
    display: block;
    text-transform: uppercase;
    color: #63cdfa;
  font-family: Helvetica Neue, Helvetica, Arial;
  font-size:14px;
  font-weight:bold;
  letter-spacing:.1em;
	text-align: left;
}
#scroll-title-2 {
    display: block;
    text-transform: uppercase;
    color: #63cdfa;
  font-family: Helvetica Neue, Helvetica, Arial;
  font-size:14px;
  font-weight:bold;
  letter-spacing:.1em;
	text-align: center;
}
#scroll-down::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Safari 4+ */
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Fx 5+ */
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Opera 12+ */
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* IE 10+, Fx 29+ */
    position: absolute;
    top: 0px;
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #63cdfa;
    content: ' ';
}
#scroll-down-2::before {
    -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Safari 4+ */
    -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Fx 5+ */
    -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* Opera 12+ */
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
    /* IE 10+, Fx 29+ */
    position: absolute;
    top: 0px;
    left: 50%; 
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #000000;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}


#paschka {
  display: block;
  color:white;
  font-family:helvetica neue, helvetica, arial;
  font-size:32px;
  text-decoration: none;
  position: fixed;
  bottom:0px;
  right:0px;
  padding:0px;
  transition: all .1s ease;
  background:#000;
  height:40px;
  line-height:30px;
  vertical-align:middle;
  width:40px;
  text-align:center;
  border-radius: 5%;
  bottom:20px;
  right:20px;
  
  &:hover {
    background:#101010;
    transition:all .1s ease;
    color:#f0f0f0;
  }
}

















.nav-logo { opacity:0; z-index: 1; }



.fade-IN{
  opacity:1;
  transition: 1s all ease-out;
}




















/*Gradient Bar*/
.grad-test    {background: linear-gradient(-45deg,  #0d88c8, #63cdfa); background-size: 400% 400%; animation: gradient 7s ease infinite;}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }}
.grad-test p {color: #ffffff;}

















/* Small devices (landscape phones, 480px and up) */
@media (max-width: 575px) {
    #breakpoints::before {
        content: "Small screens and up (>576px Landscape phones) - 'sm'";
    }
	.h1 {font-size: 3em; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal;}
.h1-subtag {  font-size: 1em; text-transform: uppercase; letter-spacing: 1px;}
h3 {font-size: 2em; font-family: "Anton", sans-serif; font-weight: 400; font-style: normal;}
h4 {font-size: 1.5em; line-height: 150%; }
	.hide-this-on-mobile {display: none!important;}

.nav-h2 {font-size: 1.5em!important; margin-top: 50px!important;}
.nav-bubble {max-width: 30%!important; }
ol, ul { padding-left: 0rem!important; }
	.Nav_COMING-SOON {margin-top: 200px!important;}
	
	.logos-slide img {width: 170px; margin: 0px 15px;}
	
.ABOUT_tagline {font-size: 1.2rem;}
.port-cta-headline {  margin-top: 50px; font-size: 1.7em;}
.modal-port-title{font-size: 1.7em; }

	.mobile-margin-top{margin-top: 30%;}

/*.item h4 {font-size: 1em!important; color: #ffffff!important;}*/
.more {font-size: 1em; line-height: 150%;}

.expertise-title {font-size: 1.9em; line-height: 100%;}
	
.expertize .item {padding-top: 20px;}	
.exp-ex-pad {margin-top: 2%;}


.modal-pull-content-more-left-cuz-i-couldnt-figure-pulls-out {
	margin-left: 10px;}

.timeline__event {margin-left: 17%;}
	
.port-title-card {color: #ffffff; padding: 17px 17px 10px 17px;  }
 .masonry .grid__title {	 font-size: 1em;  line-height: 111%;}
 .masonry .grid__author {font-size: 14px;}
 .masonry .grid__link { position: absolute;left: 0; right: 0;top: 0; bottom: 0;}
 .masonry .grid__tag {
	/* background-color:#63cdfa; */
	 color: #fff;  border-radius: 2px;opacity: .4;
/* 	 padding: 5px 15px;*/
	 margin-bottom: 5px;  font-size: .8em; font-family: "Roboto", sans-serif;font-weight: 700;  font-style: normal;}

	
.latest-port  {font-size: 2.3em!important; line-height: 15%!important;  } 
.latest-port-sub  { font-size: .35em!important; text-transform: uppercase;}
	
.mega-text {font-size: 3.7em;}
	
.port-title-card {  color: #ffffff; padding: 2px 2px 0px 2px!important;}	
	
	
.footer-IMG {max-width: 70%;}
	
	

	.show-mbl {display: inherit;}	
	.show-dt {display: none;}
	
	
	
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #breakpoints::before {
        content: "Small screens and up (>576px Landscape phones) - 'sm'";
    }
.modal-pull-content-more-left-cuz-i-couldnt-figure-pulls-out 
	{margin-left: -40px;}	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #breakpoints::before {
        content: "Medium screens and up (>768px Tablets) - 'md'";
    }
.expertise-title {font-size: 1.8em; line-height: 100%;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #breakpoints::before {
        content: "Large screens and up (>992px Desktops) - 'lg'";}

.modal-pull-content-more-left-cuz-i-couldnt-figure-pulls-out {margin-left: 20px;}
.mega-text {font-size: 4em; line-height: 125%;}

.latest-port  {font-size: 3.5em!important; line-height: 15%!important;  } 
	
.expertise-title {font-size: 1.8em; line-height: 100%;}
}


/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #breakpoints::before {
        content: "Extra Large screens and up (>1200px Large Desktops) - 'xl'";
    }
.mega-text {font-size: 6em; line-height: 105%;}
.latest-port  {font-size: 3.5em!important; } 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    #breakpoints::before {
        content: "Extra Extra Large screens and up (>1400px Larger Desktops) - 'xxl'";
    }
}