body {
    /*font-family: 'Karla' !important;*/
}
h1, h2, h4, h5 {
    font-family: "roboto-regular";
}
h1 > span {
    text-decoration: underline;
}
span {
    white-space: pre-wrap;
}
footer {
    padding: 2em;
    padding-top: 3em;
    padding-bottom: 1em;
}

section{
    font-family: "opensans-regular";
}

.h2_home {
    font-size: min(4vw, 2.2rem) !important;
    margin-bottom: 0px;
}

.h3_home {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.justify-content-center{
    display: flex;
    justify-content: center;
}
/* HEAD SECTION */

.main-row {
    display: flex;
    justify-content: center;
}

.main-section {
    width: 100%;
    padding: 4em;
}

.main-section > * {
    text-align: center;
}

.main-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    text-align: center;
}

/* KIOSK // API SECTION */
#main_selectors {
    padding: 0;
}

.grid-container {
	display: grid;
	/* min-height: 80vh; */
	/*grid-template-areas:
	  "one one one one one one two two two two two two"
		"three three three three three three three three three three three three"
		"four four four four five five five five six six six six";*/
	grid-template-areas:
	  "one one two two four four five five six six";
	/*grid-template-rows: 3fr 1fr 3fr;*/
}

.grid-item-one {
	grid-area: one;
}
.grid-item-two {
	grid-area: two;
}
.grid-item-three {
	grid-area: three;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px 10px;

	@media (max-width: 1000px) {
		display: none;
	}
}
.grid-item-four {
	grid-area: four;
}
.grid-item-five {
	grid-area: five;
}
.grid-item-six {
	grid-area: six;
}

.grid-item {
	position: relative;
	margin: 0.25em;
    border: 1px solid #999999;
}

.grid-image {
    /*
	width: 100%;
	height: 100%;
	*/
    width: 100%;
    height: 35em;
	object-fit: cover;
}

.grid-overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    /* top: 20%; */
    /* top: 40%; */
    height: 50%;
    /* min-width: 55%; */
    /* max-width: 75%; */
    padding: 4%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    bottom: 1px;
    width: 100%;
}

.clickable {
    cursor: pointer;
}

.grid-overlay > h2 { 
  font-size: min(5vw, 2.8rem);
}

.grid-overlay > p {
  font-size: min(4vw, 2rem);
}

.grid-overlay > a > button {
  font-size: min(2vw, 2rem);
}

.kiosk-div {
    padding: 0;
}

.api-div {
    padding: 0;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.img-responsive-home {
    border: black 0px solid;
    cursor: pointer;
}
.img-responsive-home:hover{
    opacity: 72%;
}

.tag {
    float: left;
    position: absolute;
    left: 0;
    top: 40%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1em;
    color: #FFFFFF;
    font-weight: bold;
    margin:-35px -35px 0 0;
    cursor: pointer;
}
.div-kiosk-text{
    padding: 0;
}
.first-line{
    font-size: 1.6vw;
    margin-bottom: 1%;
    display: inline-block;
    font-family: "roboto-regular";
    font-weight: bold;
}
.first-kiosk-line{
       color: var(--main-green);

}
.first-api-line{
     color: #f09530;

}
.second-line{
    font-size: 1.2vw;
    margin-top: 0;
    margin-bottom: 9%;
    color: white;
    display: inline-block;
    font-family: "roboto-regular";
    font-weight: bold;
}
.div-readmore-btn {
    margin-bottom: 5%;
}

.btn-read-more {
    color: white;
    background: var(--main-green);
    font-family: "roboto-regular";
    font-weight:bold;
}

.btn-read-more:hover{
    background: white;
}

.kiosk-extend-div{
    background-color: var(--main-green);
    color: black;
   /* height: 9em;*/
    min-height: 11em;
}
.api-extend-div{
    background-color: #f09530;
    color: black;
    /*font-family: 'Karla' !important;*/
   /* height: 9em;*/
    min-height: 11em;
}
.div-icons-text{
    padding: 0px !important;
}
.div-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
        padding: 0;

}

.col-half-offset{
    margin-left:4.166666667%
}

.icon-order{
    width: 28%;
    display: inherit !important;
        margin-top: 16%;
}
.div-icon-text{
    font-size: 1em;
    font-family: "opensans-regular";
    font-weight: bold;
}

/* WHY US SECTION */
.why-us-div {
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}

/* TEAM SECTION */
.team-general-div {
    justify-content: center;
    display: flex;
    margin-bottom: 4%;
}
.team-name {
    color: #545353;
    font-size: 20px;
    margin-bottom: 2% !important;
}

.team-position {
    color: #545353;
    font-size: 12px;
    margin-bottom: 5% !important;
}
.img-team{
    border-radius: 1%;
}

.image-transition {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

/* SIZE OF -SM-  ( max width -MD- */
@media only screen and (max-width: 991px) {
    .second-main-text {
        font-size: 12px;
    }
    .tag {
        padding: .5em;
        top: 26%;
    }

    .second-line {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .first-line {
        margin-bottom: 0;
    }

    .btn-api-more {
        width: 49% !important;
        font-size: 11px;
    }
        .btn-kiosk-more {
        width: 49% !important;
        font-size: 11px;
    }

    .div-readmore-btn {
        margin-bottom: 2%;
        display: flex;
        justify-content: center;
    }

    .div-kiosk-text {
        text-align: center;
    }
    .col-half-offset {
    margin-left: 0;
    }
    .div2center{
        margin-left: 15.66666%;
    }

    span{
        white-space: inherit !important;
    }
    h3 {
    font-size: 4.6vw;
    }
    .api-extend-div{
        height: auto;
    }
    .kiosk-extend-div{
        height: auto;
    }

    .grid-container {
		grid-template-areas:
			"one"
			"two"
			"four"
			"five"
			"six";
		grid-template-rows: auto;
    }

}

@media only screen and (max-width: 768px) {
    .tag {
        top: 18%;
    }
}

@media only screen and (max-width: 1400px) and (min-width: 992px) {
    .tag {
        top: 36%;
    }
}
@media only screen and (max-width: 760px) {
    .team-general-div {
        display: block;
    }

    .main-text {
        font-size: 15px;
    }
}

.grayscale-filter {
    filter: grayscale(100%);
}

/*.icon-container {*/
/*    !*display: flex;*!*/
/*    !*justify-content: center;*!*/
/*    !*align-items: center;*!*/
/*}*/

.container-main {
    margin-top: 3em;
    margin-bottom: 3em;
}

.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9em;
    min-width: 14em;
}

.icon-size-limiter {
    /*height: 3em;*/
    max-height: 8em;
    margin: 0 auto;
    max-width: 11em;
}

.section-title-div {
    margin-bottom: 3em;
}

.title-text {
    height: 2em
}

.whyus-text {
    font-size: 1em;
}


.green {
    color: var(--main-green);
}

.orange {
    color: var(--main-orange);
}

.selectors-mid {
    padding: 5px;
}

.mid-text-top, .mid-text-bot {
    text-align: center;
}

.case_studies_button{
    font-family: "opensans-regular";
    font-weight: bold;
    font-size: 2em;
    height: 2em;
}