html,
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    background-color: #2e3131;
    overflow: auto;
    margin: 0px;
}

.header {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    color: #ffffff;
    letter-spacing: 2px;
    background-color: #044F67;
    text-align: center;
    box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.5);
    z-index: 898;
    transform: scale(1.02);
    border: none;
}

.welcome-header {
    animation: headerCover 2s, headerShrink 2s ease 2s 1 normal none;
}

.textlogo {
    z-index: 999;

}

.textlogo-welcome {
    animation: zoomOutAnfFadeIn 4s ease 0s 1 normal none;
}



.main {
    margin-top: 8rem;
    margin-bottom: 84px;
    z-index: 100;
    position: relative;
    color: #BDC3C7;
}

#myVideo {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    margin-left: -1rem;
    border-radius: 5px;
    z-index: 1;
}

#myImg {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.gif {
    background-image: url("../assets/bg3.gif");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
}

.fab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: solid #95a5a6 1px;
    background-color: #044F67;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
    z-index: 901;
}

.welcome-fab {
    animation: fadeIn 4s ease 0s 1 normal none;
}

.welcome-fab-item {
    animation: fadeInLast 4s ease 0s 1 normal none;
}

.fab:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);
}

.fab:active {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
}

.fab>img {
    width: 2rem;
}

.menu {
    position: fixed;
    bottom: 48px;
    right: 48px;
    height: 0px;
    width: 0px;
    color: #BDC3C7;
    z-index: 900;
}

.menu-item {
    position: absolute;
    bottom: -49px;
    right: -49px;
    text-align: center;
    text-decoration: none;
    line-height: 3.7;
    padding: 0.5rem;
    margin: 1rem;
    height: 48px;
    width: 48px;
    color: #BDC3C7;
    background-color: #044F67;
    font-size: small;
    border: solid #BDC3C7 1px;
    border-radius: 50%;
    box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.5);
    z-index: 901;
    transition: 0.5s;
    transform: scale(0.8);
}

.menu-item>a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-decoration: none;
    color: #BDC3C7;
}

.menu>:nth-child(1) {
    transition-delay: 0s;
}

.menuOpen>:nth-child(1) {
    position: absolute;
    bottom: -49px;
    right: 100px;
    transition: 0.5s;
    transition-delay: 0s;
    transform: scale(1.2);
}

.menu>:nth-child(2) {
    transition-delay: 0.5s;
}

.menuOpen>:nth-child(2) {
    position: absolute;
    bottom: 60px;
    right: 60px;
    transition: 0.5s;
    transition-delay: 0.5s;
    transform: scale(1.2);
}

.menu>:nth-child(3) {
    transition-delay: 1s;
}

.menuOpen>:nth-child(3) {
    position: absolute;
    bottom: 100px;
    right: -49px;
    transition: 0.5s;
    transition-delay: 1s;
    transform: scale(1.2);

}

.menu-link {
    z-index: 900;
}

.open {
    position: fixed;
    height: 0px;
    width: 0px;
}

.content {
    overflow-x: hidden;
}

.intro {
    border: #044F67 10px solid;
    padding-top: 5vh;
    padding-bottom: 15vh;
    padding-left: 15vw;
    width: 80vw;
    margin-left: auto;
    margin-right: -5vh;
    margin-top: 10vh;
    transform: skewX(3deg);
    border-radius: 25px;


}

.welcome-intro {
    animation: fadeInFromRightwithSkewX3 6s ease;
}

.intro>h2,
.intro>div {
    transform: skewX(-3deg);
    width: 90%;
}

.intro-text-1-welcome {
    animation: fadeIn 8s ease;
}

.final-intro-phrase {
    margin-top: 1rem;
}

.intro-text-2-welcome {
    animation: fadeIn 9.5s ease;
}

.intro-text-3-welcome {
    animation: fadeIn 11s ease;
}

.intro-text-4-welcome {
    animation: fadeIn 12.5s ease;
}

.consultations {
    /* background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 95%); */
    background-color: rgba(4, 79, 103, .3);
    border: #044F67 solid 5px;
    padding-top: 1vh;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 90vw;
    margin-top: 90vh;
    transform: skewX(-3deg) translate(1rem,0rem);
    border-radius: 0px 25px 25px 0px;
}

.consultations-text {
    width: 90%;
    margin-left: auto;
    margin-right: 1rem;
}

.consultations>div>h2,
.consultations>div>p {
    transform: skewX(3deg) translate(1rem, 0rem);
}

.internet {
    /* background: linear-gradient(90deg, rgba(4, 79, 103, 1) 1%, rgba(3, 166, 120, 0) 95%); */
    background-color: rgba(4, 79, 103, .3);
    border: #044F67 solid 5px;
    padding-top: 1vh;
    padding-bottom: 1rem;
    padding-left: 3rem;
    padding-right: 2rem;
    margin-top: 90vh;
    margin-left: auto;
    max-width: 90vw;
    transform: skewX(3deg) translateX(97%);
    border-radius: 25px 0px 0px 25px;
}

.internet>h2,
.internet>div,
.internet>ul {
    transform: skewX(-3deg) translate(-1rem, 0rem);
}

.analytics {
    /* background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(3, 166, 120, 0) 95%); */
    background-color: rgba(4, 79, 103, .3);
    border: #044F67 solid 5px;
    padding-top: 1vh;
    padding-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 3rem;
    max-width: 90vw;
    margin-top: 90vh;
    transform: skewX(-3deg);
    border-radius: 0px 25px 25px 0px;
}

.analytics>h2,
.analytics>div {
    transform: skewX(3deg) translate(1rem, 0rem);
    width: 90%;
    margin-left: auto;
    margin-right: 0rem;
}



.recentProjects {
    position: relative;
    margin-top: 60vh;
    margin-bottom: 10vh;

}

.recentProjects>h2 {
    text-align: center;
}

.recentProjects>div {
    text-align: center;
}

.recentProjects>div>div>a {
    padding: 1rem;
}

/* .recentProjects>div>div {
    border: solid #fff 1px;
} */

.recentProjects>div>button {
    background-color: rgba(0, 0, 0, 0);
    height: 100%;

}

.recentProjects>div>button>img {
    background-color: rgba(4, 79, 103, .6);
    border: #044F67 solid 2px;
    border-radius: 25px;
}

.card {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding: 1rem;
    padding-top: 1rem;
    color: white;
    border-radius: 25px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.grad {
    background: rgb(4, 79, 103, 0.4);
    background: linear-gradient(170deg, rgba(4, 79, 103, 0.8) 26%, rgba(3, 166, 120, 0.8) 100%);
}

.about {
    width: 75%;
    color: #dadfe1;
    padding: 1rem;
}

#gallery {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 85%;
}

.project {
    margin: 1rem;
    width: 90%;
    background-color: #2e3131;
}

.project>a {
    display: block;
    text-decoration: none;
    color: #BDC3C7;
}

.card-title {
    text-align: center;

}

.card-text>p {
    margin-top: 1.5rem;

}

.contact {
    max-width: 500px;
}

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


.form-title>h3 {
    line-height: 0.25;
}



/* .form-group>label,
input,
textarea {
    margin-right: auto;
    margin-left: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: block;
    width: 90%;
    border-radius: 5px;
} */

/* .form-group>label {
    padding: 0rem;
    font-size: 1.25rem;
    margin-bottom: 0px;
} */

/* .form-group>input {
    padding: 0.5rem 1rem 0.5rem 1rem;

    margin-top: 0.25rem;
    font-size: 1rem;
    border: solid #bdc3c7 1px;
    background-color: #2e3131;
    color: #ffffff;
    border-radius: 25px;
} */

/* .form-group>textarea {
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin-top: 0.25rem;
    height: 3rem;
    font-size: 1rem;
    border: solid #bdc3c7 1px;
    background-color: #2e3131;
    color: #ffffff;
    border-radius: 25px;
} */

.form-group {
    position: relative;
    text-align: center;
    position: relative;
    margin: 1.5rem;
    padding: 1.5rem;
}

.form-group>label {
    position: absolute;
    bottom:0px;
    left:12%;
    z-index: 400;
    font-size: 1.25rem;
    font-weight: 400;
    transition: 1s;
    transform: scale(1);   
}

.form-group > .focused {
    font-weight: 400;
    transform: translate(-20%,-140%) scale(0.7);
    transition: 1s;
}

.form-group.textarea {
    margin-top: 2.5rem;
}

.form-group.textarea > .focused {
    font-weight: 400;
    transform: translate(-20%,-230%) scale(0.7);
    transition: 1s;
}

.form-group > input, .form-group > textarea {
    position: absolute;
    bottom:0px;
    left:50%;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    border-bottom: solid 1px #e8e8e8;
    color: #e8e8e8;
    font-size: 1rem;
    z-index: 950;
    width: 80%;
    transform: translate(-50%,0%);
    font-size: 1.25rem;
}

.warning {
    position: absolute;
    bottom: -1rem;
    color: red;
    font-size: small;
    font-weight: bold;
    margin-left: 1rem;
}

.btn {
    font-size: 1.5rem;
    border-radius: 50px;
    width: 200px;
    padding: 1rem;
    border: solid #95a5a6 1px;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    background-color: #044F67;
    margin-top: 1rem;
}

.btn:hover {
    box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.5);
}

.btn:active {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
}

.carousel {
    position: relative;
    height: 50vh;
    z-index: 10;
}

.carousel-content {
    height: 100%;
    display: inline-flex;
    overflow: hidden;
    transform: translateX(0px);
    transition: transform 0.3s ease-out;
    cursor: grab;

}



.carousel-item {
    position: relative;
    max-height: 100%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* border: solid white 1px; */
    user-select: none;
    align-items: center;
    z-index: 700;
}

.carousel-item-content {
    position: relative;
    width: 80%;
    min-height: 50vh;
    margin-right: auto;
    margin-left: auto;
}

.project-preview>img {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100%;
    width: auto;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    z-index: 50;
}

.inner-carousel-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 90%;
    height: 75%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.carousel-card-front,
.carousel-card-back {
    position: absolute;
    top: 0%;
    
    width: 100%;
    height: 100%;
    
    border-radius: 10px;
    border: solid #044F67 5px;
    /* padding:1rem; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.carousel-card-front {
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: rgba(4, 79, 103, 0.65);
    transition: 0.5s;
}

.flip-front {
    transform: translate(-50%, -50%) rotateY(180deg);
}

.carousel-card-back {
    left: 50%;
    transform: rotateY(180deg)translate(50%, 0%);
    background-color: rgba(4, 79, 103, 0.9);
    transition: 0.5s;
}

.flip-back {
    transform: rotateY(0deg);
}

.carousel-card-desc {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 80%;
    background-color: #044F67;
    opacity: 0.90;
    transform: translate(-50%, -50%);
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}

.carousel-item-content {
    max-width: 450px;
}

.carousel-item-content h3 {
    position: relative;
    opacity: 1;
    font-size: 1.5rem;
}

.carousel-item-content p {
    position: relative;
    opacity: 1;
}

.carousel-item-links {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    

}

.carousel-item-links>a {
    color: #dadfe1;
    border: solid #dadfe1 1px;
    padding: 1rem;
    border-radius: 10px;
    text-decoration: none;
    background-image: linear-gradient(to right, transparent 50%, #2e3131 50%);
    background-size: 200%;
    background-position: 0%;
    background-color: #044F67;
    opacity: 1;
    margin: 0.5rem;
    width: 45px;
    display: inline-block;

}

.carousel-item-links>a:hover {
    /* background-color: #044F67; */
    color: #dadfe1;
    /* border: solid #dadfe1 1px; */
    background-position: 100%;
    transition: 0.2s ease-in;
}

.carousel-item-links>a:active {
    background-image: none;
    background-color: #dadfe1;
    color: #2e3131;
    border: #2e3131;
    background-size: 100%;

}

#slide-indicator-container {
    margin-right: auto;
    margin-left: auto;
}

.slide-indicator {
    display: inline-block;
    width: 5px;
    height: 5px;
    border: solid #dadfe1 1px;
    margin: 10px;
    border-radius: 2px;
    background-color: #2e3131;
}

.slide-indicator-selected {
    background-color: #dadfe1;
    transition: 0.5s ease-in-out;
}

.rnd-btn {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: solid #95a5a6 1px;
    background-color: #044F67;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
}

.left-btn-elem {
    position: absolute;
    top: 25%;
    left: 0px;
    height: 50%;
    z-index: 800;
}

.left-btn-elem>button {
    opacity: 100;
    border: none;
    z-index: 800;
}

.right-btn-elem>button {
    opacity: 100;
    border: none;

}

.right-btn-elem {
    position: absolute;
    top: 25%;
    right: 0px;
    height: 50%;
    z-index: 800;
}

.home {
    position: relative !important;
    max-width: 750px;
}

.home>h2,
h3 {
    z-index: 10;
    position: relative;
}

.grecaptcha-badge {
    position: fixed;
    bottom: 24px;
    left: -187px;
    transition: 0.5s;
}

.grecaptcha-badge:hover {
    position: fixed;
    bottom: 24px;
    left: 5px;
    transition: 0.5s;
}

.grecaptcha-badge:active {
    position: fixed;
    bottom: 24px;
    left: 5px;
    transition: 0.5s;
}

.red-outline {
    border-bottom: solid 1px red !important;
}

.green-outline {
    border-bottom: solid 1px green !important;
}

.hidden {
    display: none !important;
}

.loadingModal,
.msgSuccessModal,
.msgErrorModal {
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translate(50%,50%); */
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 890;
}

.msgErrorModal {
    /* width: 50vw;
    height: 50vh;
    transform: translate(50%, 50%);
    background-color: #044F67; */
    z-index: 890;
}

.crossContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    transform: translate(-50%,-50%) rotate(45deg);
    opacity: 0.6;
}

.rightLegContainer {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translate(0%,-50%);
    width: 100px;
    height: 20px;
    /* border: solid 1px green; */
}

.rightLeg {
    height: 100%;
    width: 100%;
    background-color: red;
    border-radius:25px;
    animation: rightLeg 0.5s linear;
}
@keyframes rightLeg {
    0% {
        width: 10%;
    }

    100% {
        width: 100%;
    }

}

.leftLegContainer {
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translate(0%,-50%) rotate(180deg);
    width: 100px;
    height: 20px;
    /* border: solid 1px green; */
}

.leftLeg {
    height: 100%;
    width: 100%;
    background-color: red;
    border-radius:25px;
    animation: leftLeg 0.5s linear;
}

@keyframes leftLeg {
    0% {
        width: 10%;
    }

    100% {
        width: 100%;
    }

}

.topLegContainer {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%,0%) rotate(180deg);
    width: 20px;
    height: 100px;
    /* border: solid 1px green; */
}

.topLeg {
    height: 100%;
    width: 100%;
    background-color: red;
    border-radius:25px;
    animation: topLeg 0.5s linear;
}

@keyframes topLeg {
    0% {
        height: 10%;
    }

    100% {
        height: 100%;
    }

}

.bottomLegContainer {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%,0%);
    width: 20px;
    height: 100px;
    /* border: solid 1px green; */
}

.bottomLeg {
    height: 100%;
    width: 100%;
    background-color: red;
    border-radius:25px;
    animation: bottomLeg 0.5s linear;
}

@keyframes bottomLeg {
    0% {
        height: 10%;
    }

    100% {
        height: 100%;
    }

}

.errorMsg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e8e8e8;
    font-size: 2rem;
    z-index: 800;
    text-align: center;
    padding: 0px;
    animation: fadeInMsg 3s;
}



.loader {
    position: relative;
    /* top: 0px;
    left:0px;
    transform: translate(50%,50%); */
    margin-top: 35vh;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;

}

.loader svg {
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translate(50%,50%); */
    width: 100%;
    height: 100%;
}

.loader svg circle {
    fill: none;
    stroke-width: 40px;
    stroke: #000;
    stroke-dasharray: 503;
    stroke-linecap: round;
    /* stroke-dashoffset: calc(503 - (503*50) / 100); */
    stroke: rgba(4, 79, 103, .8);;
    transition: 0.5s;
    animation: loadEffect;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

.loadMsg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e8e8e8;
    font-size: 1.5rem;
}

.successMsg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #e8e8e8;
    font-size: 3rem;
    z-index: 800;
    text-align: center;
    padding: 0px;
    animation: fadeInMsg 3s;
}

@keyframes fadeInMsg {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }

}

@keyframes loadEffect {

    0% {
        stroke-dashoffset: 250%;
    }

    50% {
        stroke-dashoffset: 1%;
    }

    100% {
        stroke-dashoffset: -250%;
    }


    /* calc(503 - (503*100) / 100) */
}





#modal {
    display: none;
}

#modal.open {
    display: block;
    z-index: 850;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.modal-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 860;
}

#modal-dialogue {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px rgba(4, 79, 103, 0.8);
    background-color: rgba(4, 79, 103, 0.8);

    border-radius: 25px;
    padding: 1rem;
}



.msg-status-cont {
    height: 300px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.check {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    /* border: solid 1px green; */
    transform: translate(-50%,-50%);
    opacity:0.8;
    
}

.check .shortLegContainer {
    position: absolute;
    top:100.5px;
    left:54px;
    width: 20px;
    height: 100px;
    transform: rotate(-45deg);
    /* background-color: #4BB543; */
    /* border: solid 1px black; */
    /* animation: shortCheck 3s ;  */
}

.check .longLegContainer {
    position: absolute;
    bottom:34px;
    left:47px;
    width: 20px;
    height: 200px;
    transform: translate(100px,0px) rotate(-135deg);
    /* background-color: #4BB543; */
    /* border: solid 1px black; */
    /* animation: longCheck 6s;  */
}

.shortLeg {
    width: 20px;
    height: 100px;
    background-color: rgb(75, 181, 67,1);
    animation: shortCheck 0.4s linear; 
    border-radius: 25px;
    
}

.longLeg {
    width: 20px;
    height: 200px;
    background-color: rgb(75, 181, 67,1);
    animation: longCheck 0.85s linear; 
    border-radius: 25px;
    
}

@keyframes shortCheck {

    0% {
        height: 0px;
    }

    100% {
        height: 100px;
    }

}

@keyframes longCheck {

    0% {
        height: 0px;
    }

    50% {
        height: 0px;
    }
    
    100% {
        height: 200px;
    }

}



.before {
    content: '';
    position: absolute;
    top: 69%;
    left: 22%;
    height: 15%;
    border-radius: 20px;
    background: #4BB543;
    animation: short .3s ease-in forwards;
}

.after {
    content: '';
    position: absolute;
    top: 84%;
    left: 52%;
    height: 15%;
    border-radius: 20px;
    background: #4BB543;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    animation: long .3s ease-out .3s forwards;
}

.success-message {
    text-align: center;
    color: rgb(17, 253, 0);
    animation-name: bulge;
    animation-duration: 1s;
    animation-delay: 0.2s;
    font-size: 64px;
    font-weight: 900;
    z-index: 350;
    padding: 1rem;
    /* border-radius: 25px; */
}

.error-msg {
    position: absolute;
    top: 40%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: rgb(255, 0, 0);
    animation-name: bulge;
    animation-duration: 0.7s;
    animation-delay: 0.2s;
    font-size: 64px;
    font-weight: 900;
    z-index: 350;
}

.error-detail {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 300px;
    text-align: center;
    transform: translate(-50%, -50%);
    color: rgb(255, 0, 0);
    animation-name: bulge;
    animation-duration: 0.7s;
    animation-delay: 0.2s;
    font-size: 24px;
    font-weight: 900;
    z-index: 350;
}

.cross {
    height: 100%;
    transform: rotate(45deg);
}

.top {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 20px;
    height: 10%;
    width: 75%;
    background: rgb(150, 0, 20);
    animation-name: grow1;
    animation-duration: .3s;
    transform: translate(-50%, -50%);
    z-index: 300;
}

.bottom {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 20px;
    height: 10%;
    width: 75%;
    background: rgb(150, 0, 20);
    animation-name: grow2;
    animation-duration: .3s;
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 300;
}

.flex {
    display: flex;
}

.img1 {
    position: absolute;
    width: 25%;
}

.space1 {
    height: 1px;
}

.anim-1 {
    margin-top: 10vh;
}

.anim-2 {
    margin-top: 100vh;
}

.anim-3 {
    margin-top: 70vh;
}

.anim-4 {
    margin-top: 70vh;
    margin-bottom: 40vh;
}

.vidText {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
}

.vidText>img {
    width: 82vw;
    height: auto;

}

.vidBG>video {
    position: absolute;
    top: 5px;
    left: 2px;
    width: 80vw;
    height: auto;
    z-index: 0;
}

#map {
    width: 80vw;
    height: auto;
}

@keyframes zoomOutAnfFadeIn {

    0% {
        transform: scale(12);
        margin-top: 45vh;

    }

    50% {
        transform: scale(1.02);
        margin-top: 45vh;
    }

    100% {
        opacity: 100;

    }
}

@keyframes headerCover {
    from {
        padding-bottom: 100vh;
    }

    to {
        padding-bottom: 100vh;
    }
}

@keyframes headerShrink {
    from {
        padding-bottom: 100vh;
    }

    to {
        height: normal;
    }
}

@keyframes fadeInFromLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 100;
    }
}

@keyframes fadeInFromRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 100;
    }

}

@keyframes fadeInFromRightwithSkewX3 {
    0% {
        transform: translateX(25px) scale(1.1) skewX(3deg);
        opacity: 0;
    }

    50% {
        transform: translateX(25px) scale(1.1) skewX(3deg);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) scale(1) skewX(3deg);
        opacity: 100;
    }

}

@keyframes moveInFromLeft {
    0% {
        /* opacity: 0; */
        margin-left: -500px;
        background-color: rgba(4, 79, 103, 1);
    }

    100% {
        margin-left: 0px;
        background-color: rgba(4, 79, 103, 1);
    }
}

@keyframes fadeEffectLeft {

    0% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 220%);
    }

    1% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 218%);
    }

    2% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 216%);
    }

    3% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 214%);
    }

    4% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 212%);
    }

    5% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 210%);
    }

    6% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 208%);
    }

    7% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 206%);
    }

    8% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 204%);
    }

    9% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 202%);
    }

    10% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 200%);
    }

    11% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 198%);
    }

    12% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 196%);
    }

    13% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 194%);
    }

    14% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 192%);
    }

    15% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 190%);
    }

    16% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 188%);
    }

    17% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 186%);
    }

    18% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 184%);
    }

    19% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 182%);
    }

    20% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 180%);
    }

    21% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 178%);
    }

    22% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 176%);
    }

    23% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 174%);
    }

    24% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 172%);
    }

    25% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 170%);
    }

    26% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 168%);
    }

    27% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 166%);
    }

    28% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 164%);
    }

    29% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 162%);
    }

    30% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 160%);
    }

    31% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 158%);
    }

    32% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 156%);
    }

    33% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 154%);
    }

    34% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 152%);
    }

    35% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 150%);
    }

    36% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 148%);
    }

    37% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 146%);
    }

    38% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 144%);
    }

    39% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 142%);
    }

    40% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 140%);
    }

    41% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 138%);
    }

    42% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 136%);
    }

    43% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 134%);
    }

    44% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 132%);
    }

    45% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 130%);
    }

    46% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 128%);
    }

    47% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 126%);
    }

    48% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 124%);
    }

    49% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 122%);
    }

    50% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 120%);
    }

    51% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 118%);
    }

    52% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 116%);
    }

    53% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 114%);
    }

    54% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 112%);
    }

    55% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 110%);
    }

    56% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 108%);
    }

    57% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 106%);
    }

    58% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 104%);
    }

    59% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 102%);
    }

    60% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 100%);
    }

    61% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 98%);
    }

    62% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 96%);
    }

    63% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 94%);
    }

    64% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 92%);
    }

    65% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 90%);
    }

    66% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 88%);
    }

    67% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 86%);
    }

    68% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 84%);
    }

    69% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 82%);
    }

    70% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 80%);
    }

    71% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 78%);
    }

    72% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 76%);
    }

    73% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 74%);
    }

    74% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 72%);
    }

    75% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 70%);
    }

    76% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 68%);
    }

    77% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 66%);
    }

    78% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 64%);
    }

    79% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 62%);
    }

    80% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 60%);
    }

    81% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 58%);
    }

    82% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 56%);
    }

    83% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 54%);
    }

    84% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 52%);
    }

    85% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 50%);
    }

    86% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 48%);
    }

    87% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 46%);
    }

    88% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 44%);
    }

    89% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 42%);
    }

    90% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 40%);
    }

    91% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 38%);
    }

    92% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 36%);
    }

    93% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 34%);
    }

    94% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 32%);
    }

    95% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 30%);
    }

    96% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 28%);
    }

    97% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 26%);
    }

    98% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 24%);
    }

    99% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 22%);
    }

    100% {
        background: linear-gradient(270deg, rgba(4, 79, 103, 1) 0%, rgba(0, 0, 0, 0) 20%);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0%;
    }

    75% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }

}

@keyframes fadeInLast {
    0% {
        opacity: 0%;
    }

    99% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }

}

@keyframes grow1 {
    0% {
        width: 0px;
        transform: translate(-50%, -50%);
    }

    100% {
        width: 200px;
        transform: translate(-50%, -50%)
    }
}

@keyframes grow2 {
    0% {
        width: 0px;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    100% {
        width: 200px;
        transform: translate(-50%, -50%)rotate(90deg);
    }
}

@keyframes crossBulge {
    0% {
        transform: scale(1.0) rotate(45deg);
    }

    50% {
        transform: scale(1.5) rotate(45deg);
    }

    100% {
        transform: scale(1.0) rotate(45deg);
    }
}


@keyframes bulge {
    0% {
        transform: translate(-50%, -50%) scale(1.0);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.0);
    }
}

@keyframes poin {
    0% {
        transform: rotate(45deg) scale(1)
    }

    50% {
        transform: rotate(50deg) scale(1.7)
    }

    100% {
        transform: rotate(45deg) scale(1)
    }
}

@keyframes short {
    0% {
        width: 0;
    }

    100% {
        width: 45%;
    }
}

@keyframes long {
    0% {
        width: 0;
    }

    100% {
        width: 75%;
    }
}

@keyframes checkStart {
    0% {
        transform: translate(-20%, -50%) rotate(-45deg) scale(0.2);
    }

    100% {
        transform: translate(-20%, -50%) rotate(-45deg) scale(1);
    }
}

@keyframes checkEnd {
    0% {
        width: 0
    }

    100% {
        width: 200px
    }
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (min-width: 500px) {
    .right-btn-elem {
        margin-right: 0.5rem;
    }

    .left-btn-elem {
        margin-left: 0.5rem;
    }

    .warning {
        margin-left: 2rem;
    }
}

@media (min-width: 600px) {
    .fab {
        top: 0.5rem;

    }

    .menu {
        top: 0.5rem;
    }

    .menu-item {
        position: absolute;
        top: -15px;
        left: -49px;
    }

    .menuOpen>:nth-child(1) {
        position: absolute;
        top: 75px;
        left: -49px;
        transition: 0.5s;
        transition-delay: 0s;
        z-index: 899;
    }

    .menuOpen>:nth-child(2) {
        position: absolute;
        top: 163px;
        left: -49px;
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .menuOpen>:nth-child(3) {
        position: absolute;
        top: 250px;
        left: -49px;
        transition: 0.5s;
        transition-delay: 1s;
    }

    .closed {
        position: absolute;
        top: -17px !important;
        left: -49px !important;
        transform: scale(0.8);
    }



    /* .menu-title{
        position:absolute;
        top:0.25rem;
        left:2rem;
    } */

    /* .menu-links{
        margin-top: 85px!important;
        border-top: solid black 1px;
    } */

    .project {
        margin: 1rem;
        width: 34%;
        background-color: #2e3131;
    }

    .right-btn-elem {
        margin-right: 1rem;
    }

    .left-btn-elem {
        margin-left: 1rem;
    }

    .warning {
        margin-left: 2.5rem;
    }

    .right-btn-elem {
        height: 50%;
    }

    .left-btn-elem {
        height: 50%;
    }

}


@media (min-width: 850px) {

    .fab {
        display: none;
    }

    .menu-item {
        display: block;
        text-align: center;
        line-height: 2.5;
        width: auto;
        height: auto;
        text-decoration: none;
        margin: 1rem;
        color: #BDC3C7;
        background-color: inherit;
        z-index: 901;
        border: none;
        box-shadow: none;
        font-size: large;
    }

    .menu>:nth-child(1) {
        position: absolute;
        top: 0px;
        left: -335px;
        transition: 0.5s;
        transition-delay: 0s;
        z-index: 899;
    }

    .menu>:nth-child(2) {
        position: absolute;
        top: 0px;
        left: -195px;
        transition: 0.5s;
        transition-delay: 0.5s;
    }

    .menu>:nth-child(3) {
        position: absolute;
        top: 0px;
        left: -49px;
        transition: 0.5s;
        transition-delay: 1s;
    }

    .menu {
        top: 1rem !important;
        right: 8vw;
    }



}



@media (min-width: 990px) {
    .warning {
        margin-left: 3.5rem;
    }
}

@media (min-width: 1200px) {
    .project {
        margin: 1rem;
        width: 20%;
        background-color: #2e3131;
    }

    .right-btn-elem {
        margin-right: 1.5rem;

    }

    .left-btn-elem {
        margin-left: 1.5rem;

    }

    .warning {
        margin-left: 4rem;
    }
}