﻿/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@300;400;500;700&display=swap');

html {
    overflow-x: hidden;
    max-width: 100vw;
   
}

body {
    padding-bottom: 3rem;
    color: #5a5a5a;
    font-family: 'Changa', sans-serif !important;
}


h1, h2, h3 {
    font-weight: 700 !important
}

footer {
    font-size: 1rem
}

    footer p {
        margin-bottom: 0px;
    }

    footer .fa {
        font-size: 2rem;
        line-height: 2rem;
        margin-left: 10px;
    }


    .schemaDescr,
    .schemaName {
        width: 100%;
    }

.sitemap a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Changa', sans-serif !important;
    font-size:1.4rem;
}

.text-logo {
    font-weight: 700
}

    .text-logo strong {
        color: #88C425
    }

footer a {
    color: #f7931e;
    text-decoration: none;
    font-weight: 700
}

.modal-header {
    background-color: #68A405 !important;
    border-radius: 6px 6px 0 0;
    padding: 0 15px;
    border-bottom: #68A405
}

.modal-title {
    background-color: #68A405 !important
}

.modal-body {
    background-color: #88C425 !important
}

.modal-footer {
    background-color: #68A405 !important;
    border-radius: 0 0 6px 6px;
    border-top: #68A405
}

.modal-header h4 {
    font-size: 2rem
}

.modal-header .close {
    color: #ffffff;
    text-decoration: none;
}

.btn-close {
    color: #fff
}

.card:hover {
    animation-name: slideInUp;
}
.pattern {
    background: #88C425 url(../../../img/patterns/patttern-corporate.png) !important;
    font-weight: 700;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: 100% auto;
    animation-name: backgroundloop;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
}
@keyframes backgroundloop {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -500px 0;
    }
}
    .pattern i {
        font-size: 15rem
    }

.titles-heading i {
    color: #88C425
}

.titles-heading .line {
    height: 1px;
    z-index: 1;
    background-color: #dedede !important;
    width: 80%;
    left: 10%;
    position: relative;
    top: 48%;
    background: #88C425 !important;
    background-color: #88C425 !important;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    top: 10rem;
    z-index: 10;
    position:absolute;
    top:150px;
}

    .carousel-caption h4 {
        font-size: 1.8rem;
        text-shadow: 3px 3px 0px #000000;
        padding-bottom: 0;
        margin-bottom: 0
    }
    .carousel-caption h3 {
        font-size: 2.7rem;
        text-shadow: 3px 3px 0px #000000;
    }
    .carousel-caption p {
        font-size: 2.4rem;
        text-shadow: 5px 5px 0px #000
    }


/* Declare heights because of positioning of img element */
.carousel-item {
    height: 32rem;
}

    .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 32rem;
    }

.item1{background-color:#f7931e
}
.item2 {
    background-color: #f7931e
}
.item3 {
    background-color: #f7931e
}
.item4 {
    background-color: #f7931e
}
.item5 {
    background-color: #f7931e
}

/* NAVBAR
-------------------------------------------------- */
.navbar {
    border-bottom: 3px solid #71a441;
}

.navbar-brand {
    max-width: 66vw;
}

.nav-link {
    font-size: 2rem;
    color: #ffffff !important;
    font-weight: 700;
}

.dropdown-menu {
    background-color: #212529 !important;
    border: none !important;
    border-bottom: 2px solid #68A405 !important;
    font-size: 1.4rem;
}

.dropdown-item {
    color: #ffffff !important;
}

    .dropdown-item:focus, .dropdown-item:hover {
        color: #1e2125;
        background-color: #68A405 !important;
    }

.contentpage {
    margin-top: 100px;
    height: 100px;
    background-color: #333;
    border-bottom: 2px solid #68A405 !important;
}

.list-group {
    margin-top: 2rem
}

li.list-group-item {
    background-color: #ffffff05;
    color: #efefef;
}

    li.list-group-item a {
        text-decoration: none;
        color: #efefef
    }

.maintext p {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 4rem
}

.maintext h2 {
    font-size: 2.5rem;
}

.maintext a {
    color: #68A405;
    text-decoration: none
}

    .maintext a:hover {
        color: #f7931e;
        text-decoration: none
    }

.contentpage h1 {
    font-size: 3rem;
    line-height: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-group  .fa {
    visibility:hidden
}
.list-group .selected .fa {
    visibility: visible;
    color:#f7931e;
    margin-right:5px

}
/* MARKETING CONTENT
-------------------------------------------------- */
#myCarousel, .carousel-item, .carousel-item img {
    height: auto;
}
/* Center align the text within the three columns below the carousel */
.marketing {
    background-color: #3a3a3a;
    height: 10vh
}

    .marketing p {
        font-weight: 300;
        font-size: 1.2rem;
    }

    .marketing .button {
        background-color: #88C425;
        height: 10vh;
    }

a.cta {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.1rem;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding-left: 0px;
 
    vertical-align:text-top;
}

    a.cta:hover {
        color: #5a5a5a
    }

.marketing .fa-caret-right {
    color: #3a3a3a;
    margin-left: -4px;
    font-size: 4.4rem;
    line-height: 3.4rem;
}

.services .fa-stack {
    float: left;
    font-size: 2.25rem
}

.services .fa-circle {
    color: #f7931e;
    text-shadow: #000 1px 1px 1px;
}

.services .fa-stack-1x {
    text-shadow: #000 1px 1px 1px;
    color: #efefef
}



.services {
    text-align: start;
}

.cogs {
    position: relative;
    right: 0;
    top: 30px;
    font-size: 4rem;
    color: #ffffffaa
}

.services h4, .services h5 {
    margin-left: 5rem;
}

.services h4 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-top: .5rem
}

.services h5 {
    color: #b7ff67;
    font-size: 1rem;
    font-weight: 300
}

.services p {
    margin-left: 5rem;
}


.titles-heading{margin-top:50px}

------------------------- */
.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    /* rtl:remove */
    letter-spacing: -.05rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
 

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}


@media (min-width: 576px) {

    footer  {
        font-size: 2rem;
        line-height: 2rem;
  
    }

    footer .fa {
        font-size: 2rem;
        line-height: 2rem;
        margin-left: 10px;
        float:right
    }


    .schemaDescr,
    .schemaName, .schemaAtr {
        font-size: 1rem;
        line-height: 1.2rem;
        width: 100%;
    }


    .carousel-caption h4 {
        font-size: 2rem;
    }

    .carousel-caption h3 {
        font-size: 3rem;
    }
        .carousel-caption p {
        font-size: 2.7rem;
    }

    .card:hover .services .fa-circle {
        color: #68A405 !important
    }


  



    .marketing p {
        font-size: 2rem;
        font-weight: 500;
    }

    .titles-heading {
        margin-top: 70px
    }

}


@media (min-width: 768px) {

    .titles-heading {
        margin-top: 10px
    }

  
    .marketing p {
        font-size: 1.3rem;
        line-height: 5rem;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 2rem !important;
        padding-left: .5rem;
        font-size:1.3rem
    }

    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

@media (min-width: 992px) {

    .cogs {
 
        font-size: 7rem;
    
    }

    .marketing p {    font-size: 1.7rem;}
    a.cta {
        font-size: 2.3rem;
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 2.5rem !important;
        padding-left: .5rem;
        font-size: 2rem
    }

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

    .carousel-caption h4 {
        font-size:3rem;
    }
    .carousel-caption h3 {
        font-size: 4.5rem;
    }
  

    .marketing p {
        font-size: 2.5rem;
    }
    a.cta {
        font-size: 2.5rem;
    }

}