/* Shared */

.container-header {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    position: relative;
}

span,
.container-successful-projects h5,
.container-logiforce .logiforce-info h5 {
    color: rgb(116, 116, 116);
    font-family: 'Comfortaa', cursive;
    font-weight: bold;
}

.container-successful-projects p,
.container-logiforce p {
    color: rgb(116, 116, 116);
    font-family: 'Comfortaa', cursive;
}

.container-successful-projects .monitor,
.container-successful-projects .laptop,
.container-logiforce .logiforce-monitor .monitor {
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}


/* Extra small */

@media (max-width: 575px) {
    .container-header {
        height: 30vw;
        background-image: url('images/successful-projects/header-mobile-bg.png');
        background-position: bottom;
    }
    .container-successful-projects h1 {
        margin-top: 8vw;
        text-align: center;
        font-size: 10.5vw;
    }
    .container-successful-projects h3 {
        color: rgb(39, 47, 50);
        margin-top: 5vw;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 5.5vw;
    }
    .container-successful-projects span {
        margin-top: -0.5vw;
        display: block;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 2.5vw;
    }
    .container-successful-projects h5 {
        padding-left: 2vw;
        margin-top: 5vw;
        padding-right: 2vw;
        font-size: 3.9vw;
    }
    .container-successful-projects p {
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 3vw;
    }
    .container-successful-projects .monitor {
        background-image: url('images/successful-projects/monitor.png');
        width: 91vw;
        height: 86vw;
        margin-top: 5vw;
    }
    .container-successful-projects .accordion-header {
        width: 77vw;
        margin-left: 7.5vw;
        margin-top: 4vw;
        height: 19vw;
        border-radius: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-successful-projects .accordion-header p {
        font-size: 3vw;
        text-align: center;
    }
    .container-successful-projects .realization {
        margin-top: 8vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 20vw;
        height: 20vw;
        border-radius: 10vw;
        margin: auto;
    }
    .container-successful-projects .realization .realization-time .realization-info {
        margin-top: 4vw;
        text-align: center;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 10vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number,
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 5vw;
        font-weight: bold;
        line-height: 9vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 4vw;
    }
    .container-successful-projects .webportal {
        margin-top: 5vw;
    }
    .container-successful-projects .laptop {
        background-image: url('images/successful-projects/laptop.png');
        width: 91vw;
        height: 86vw;
        margin-top: 5vw;
    }
    .container-successful-projects .webportal h5 {
        padding-left: 2vw;
        margin-top: 5vw;
        padding-right: 2vw;
        font-size: 3.9vw;
    }
    .container-successful-projects .webportal p {
        font-size: 3vw;
    }
    .container-logiforce {
        margin-top: 10vw;
    }
    .container-logiforce h3 {
        color: rgb(39, 47, 50);
        margin-top: 5vw;
        font-size: 5.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce span {
        margin-top: -0.5vw;
        display: block;
        font-size: 2.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-info {
        margin-top: 5vw;
    }
    .container-logiforce .logiforce-info h5 {
        font-size: 3vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-info p {
        font-size: 3vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-monitor .monitor {
        background-image: url('images/successful-projects/logic-force-monitor.png');
        width: 91vw;
        height: 86vw;
        margin-top: 5vw;
    }
    .container-logiforce .realization {
        margin-top: 8vw;
    }
    .container-logiforce .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 20vw;
        height: 20vw;
        border-radius: 10vw;
        margin: auto;
    }
    .container-logiforce .realization .realization-time .realization-info {
        margin-top: 4vw;
        text-align: center;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 10vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number,
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 5vw;
        font-weight: bold;
        line-height: 9vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 4vw;
    }
    .container-logiforce .accordion-header {
        width: 77vw;
        margin-left: 7.5vw;
        margin-top: 10vw;
        height: 19vw;
        border-radius: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-logiforce .accordion-header p {
        font-size: 3vw;
        text-align: center;
    }
    .call-to-action {
        background-image: url('images/successful-projects/calltoaction-mobile.png');
        margin-top: 6vw;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
        height: 120vw;
        margin-bottom: 8vw;
        background-position: center;
        margin-top: 5vw;
    }
    .call-to-action h1 {
        color: #F2F9FA;
        width: 100%;
        padding-top: 16vw;
        font-size: 9.5vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .call-to-action h5 {
        color: #F2F9FA;
        padding: 3vw 2vw 0 2vw;
        font-size: 3.9vw;
        width: 100%;
    }
    .call-to-action button {
        border-radius: 1vw;
        margin-top: 12vw;
        margin-left: 2vw;
    }
    .page-navigation {
        display: none;
    }
}


/* Small */

@media (min-width: 576px) and (max-width: 767px) {
    .container-header {
        height: 30vw;
        background-image: url('images/successful-projects/header-mobile-bg.png');
        background-position: bottom;
    }
    .container-successful-projects h1 {
        margin-top: 8vw;
        text-align: center;
        font-size: 7.5vw;
    }
    .container-successful-projects h3 {
        color: rgb(39, 47, 50);
        margin-top: 5vw;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 3.5vw;
    }
    .container-successful-projects span {
        margin-top: -0.5vw;
        display: block;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 1.5vw;
    }
    .container-successful-projects h5 {
        padding-left: 2vw;
        margin-top: 5vw;
        padding-right: 2vw;
        font-size: 2.5vw;
    }
    .container-successful-projects p {
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 2vw;
    }
    .container-successful-projects .monitor {
        background-image: url('images/successful-projects/monitor.png');
        width: 50vw;
        height: 50vw;
        margin-top: 5vw;
        margin: auto;
    }
    .container-successful-projects .accordion-header {
        width: 77vw;
        margin-left: 7.5vw;
        margin-top: 4vw;
        height: 11vw;
        border-radius: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 2vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-successful-projects .accordion-header p {
        font-size: 2.5vw;
        text-align: center;
    }
    .container-successful-projects .realization {
        margin-top: 8vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 15vw;
        height: 15vw;
        border-radius: 10vw;
        margin: auto;
    }
    .container-successful-projects .realization .realization-time .realization-info {
        margin-top: 4vw;
        text-align: center;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 10vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number,
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 3vw;
        font-weight: bold;
        line-height: 8vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 3vw;
        line-height: 0vw;
    }
    .container-successful-projects .webportal {
        margin-top: 5vw;
    }
    .container-successful-projects .laptop {
        background-image: url('images/successful-projects/laptop.png');
        width: 50vw;
        height: 50vw;
        margin-top: 5vw;
        margin: auto;
    }
    .container-successful-projects .webportal h5 {
        padding-left: 2vw;
        margin-top: 5vw;
        padding-right: 2vw;
        font-size: 2.5vw;
    }
    .container-successful-projects .webportal p {
        font-size: 2vw;
    }
    .container-logiforce {
        margin-top: 10vw;
    }
    .container-logiforce h3 {
        color: rgb(39, 47, 50);
        margin-top: 5vw;
        font-size: 3.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce span {
        margin-top: -0.5vw;
        display: block;
        font-size: 1.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-info {
        margin-top: 5vw;
    }
    .container-logiforce .logiforce-info h5 {
        font-size: 2.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-info p {
        font-size: 2vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-monitor .monitor {
        background-image: url('images/successful-projects/logic-force-monitor.png');
        width: 50vw;
        height: 50vw;
        margin-top: 5vw;
        margin: auto;
    }
    .container-logiforce .realization {
        margin-top: 8vw;
    }
    .container-logiforce .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 15vw;
        height: 15vw;
        border-radius: 10vw;
        margin: auto;
    }
    .container-logiforce .realization .realization-time .realization-info {
        margin-top: 4vw;
        text-align: center;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 10vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number,
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 3vw;
        font-weight: bold;
        line-height: 8vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 3vw;
        line-height: 0vw;
    }
    .container-logiforce .accordion-header {
        width: 77vw;
        margin-left: 7.5vw;
        margin-top: 10vw;
        height: 11vw;
        border-radius: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-logiforce .accordion-header p {
        font-size: 2.5vw;
        text-align: center;
    }
    .call-to-action {
        background-image: url('images/successful-projects/calltoaction-mobile.png');
        margin-top: 6vw;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
        height: 88vw;
        margin-bottom: 8vw;
        background-position: center;
        margin-top: 5vw;
    }
    .call-to-action h1 {
        color: #F2F9FA;
        width: 100%;
        padding-top: 16vw;
        font-size: 7.5vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .call-to-action h5 {
        color: #F2F9FA;
        padding: 3vw 2vw 0 2vw;
        font-size: 2.5vw;
        width: 100%;
    }
    .call-to-action button {
        border-radius: 1vw;
        margin-top: 12vw;
        margin-left: 2vw;
        font-size: 2.5vw;
    }
    .page-navigation {
        display: none;
    }
}


/* Medium */

@media (min-width: 768px) and (max-width: 991px) {
    .container-header {
        height: 30vw;
        background-image: url('images/successful-projects/header-mobile-bg.png');
        background-position: bottom;
    }
    .container-successful-projects h1 {
        margin-top: 8vw;
        text-align: center;
        font-size: 7.5vw;
    }
    .container-successful-projects h3 {
        color: rgb(39, 47, 50);
        margin-top: 5vw;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 3.5vw;
    }
    .container-successful-projects span {
        margin-top: -0.5vw;
        display: block;
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 1.5vw;
    }
    .container-successful-projects h5 {
        padding-left: 2vw;
        margin-top: 5vw;
        padding-right: 2vw;
        font-size: 2.5vw;
    }
    .container-successful-projects p {
        padding-left: 2vw;
        padding-right: 2vw;
        font-size: 2vw;
    }
    .container-successful-projects .monitor {
        background-image: url('images/successful-projects/monitor.png');
        width: 50vw;
        height: 43vw;
        margin: auto;
        margin-top: 5vw;
    }
    .container-successful-projects .accordion-header {
        width: 77vw;
        margin-left: 7.5vw;
        margin-top: 4vw;
        height: 9vw;
        border-radius: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-successful-projects .accordion-header p {
        font-size: 2vw;
        text-align: center;
    }
    .container-successful-projects .realization {
        margin-top: 8vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 20vw;
        height: 20vw;
        border-radius: 10vw;
        margin: auto;
    }
    .container-successful-projects .realization .realization-time .realization-info {
        margin-top: 4vw;
        text-align: center;
        font-size: 2.5vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 10vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number,
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 5vw;
        font-weight: bold;
        line-height: 9vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 4vw;
    }
    .container-successful-projects .webportal {
        margin-top: 5vw;
    }
    .container-successful-projects .laptop {
        background-image: url('images/successful-projects/laptop.png');
        width: 50vw;
        height: 43vw;
        margin: auto;
        margin-top: 5vw;
    }
    .container-successful-projects .webportal h5 {
        padding-left: 2vw;
        margin-top: 5vw;
        padding-right: 2vw;
        font-size: 2.5vw;
    }
    .container-successful-projects .webportal p {
        font-size: 2vw;
    }
    .container-logiforce {
        margin-top: 10vw;
    }
    .container-logiforce h3 {
        color: rgb(39, 47, 50);
        margin-top: 5vw;
        font-size: 3.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce span {
        margin-top: -0.5vw;
        display: block;
        font-size: 1.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-info {
        margin-top: 5vw;
    }
    .container-logiforce .logiforce-info h5 {
        font-size: 2.5vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-info p {
        font-size: 2vw;
        padding: 0 2vw 0 2vw;
    }
    .container-logiforce .logiforce-monitor .monitor {
        background-image: url('images/successful-projects/logic-force-monitor.png');
        width: 50vw;
        height: 43vw;
        margin: auto;
        margin-top: 5vw;
    }
    .container-logiforce .realization {
        margin-top: 8vw;
    }
    .container-logiforce .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 20vw;
        height: 20vw;
        border-radius: 10vw;
        margin: auto;
    }
    .container-logiforce .realization .realization-time .realization-info {
        margin-top: 4vw;
        text-align: center;
        font-size: 2.5vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 10vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number,
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 9vw;
        font-weight: bold;
        line-height: 16vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 4vw;
    }
    .container-logiforce .accordion-header {
        width: 77vw;
        margin-left: 7.5vw;
        margin-top: 10vw;
        height: 7vw;
        border-radius: 2vw;
        padding-left: 1vw;
        padding-right: 1vw;
        font-size: 3vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-logiforce .accordion-header p {
        font-size: 2vw;
        text-align: center;
    }
    .call-to-action {
        background-image: url('images/successful-projects/calltoaction-mobile.png');
        margin-top: 6vw;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
        height: 89vw;
        margin-bottom: 8vw;
        background-position: center;
        margin-top: 5vw;
    }
    .call-to-action h1 {
        color: #F2F9FA;
        width: 100%;
        padding-top: 16vw;
        font-size: 7.5vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    .call-to-action h5 {
        color: #F2F9FA;
        padding: 3vw 2vw 0 2vw;
        font-size: 2.5vw;
        width: 100%;
    }
    .call-to-action button {
        border-radius: 1vw;
        margin-top: 12vw;
        margin-left: 2vw;
        font-size: 2.5vw;
    }
    .page-navigation {
        display: none;
    }
}


/* Large */
@media (min-width: 992px) and (max-width: 1199px) {
    .container-header {
        height: 14vw;
        background-image: url('images/successful-projects/background.png');
    }
    .container-successful-projects {
        height: 7vw;
    }
    .container-successful-projects h1 {
        margin-left: 10vw;
        margin-top: 3vw;
        font-size: 4.5vw;
    }
    .container-successful-projects h3 {
        color: rgb(39, 47, 50);
        margin-left: 10vw;
        margin-top: 5vw;
        font-size: 2.5vw;
    }
    .container-successful-projects span {
        margin-left: 10vw;
        margin-top: -0.5vw;
        display: block;
        font-size: 1vw;
    }
    .container-successful-projects h5 {
        margin-left: 10vw;
        margin-top: 5vw;
        font-size: 1.5vw;
    }
    .container-successful-projects p {
        margin-left: 1.7vw;
        font-size: 1.2vw;
    }
    .container-successful-projects .monitor {
        background-image: url('images/successful-projects/monitor.png');
        width: 30vw;
        height: 30vw;
        margin-top: -6vw;
    }
    .container-successful-projects .accordion-header {
        width: 76vw;
        margin-left: 10.5vw;
        margin-top: 2vw;
        height: 2vw;
        border-radius: 1vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-successful-projects .accordion-header p {
        line-height: 2vw;
        font-size: 1vw;
        text-align: center;
        margin-left: 0;
    }
    .container-successful-projects .realization {
        height: 6vw;
        margin-top: 1vw;
        margin-left: 8.5vw;
        width: 82vw;
    }
    .container-successful-projects .realization .realization-time {
        height: 4vw;
        display: inline-block;
    }
    .container-successful-projects .realization .first {
        width: 33vw;
    }
    .container-successful-projects .realization .second {
        width: 28vw;
    }
    .container-successful-projects .realization .third {
        width: 16vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 5vw;
        height: 5vw;
        border-radius: 3vw;
        float: left;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 3vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number,
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 1.5vw;
        font-weight: bold;
        line-height: 2.8vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 1vw;
        line-height: 0vw;
    }
    .container-successful-projects .realization .realization-time .realization-info {
        display: inline-block;
        line-height: 5vw;
        font-size: 0.9vw;
    }
    .container-successful-projects .webportal {
        margin-top: 5vw;
    }
    .container-successful-projects .laptop {
        background-image: url('images/successful-projects/laptop.png');
        width: 21vw;
        height: 20vw;
        margin-left: 1vw;
        margin-top: -3vw;
    }
    .container-successful-projects .webportal h5 {
        margin-left: -2vw;
        margin-top: 0vw;
        font-size: 1.5vw;
    }
    .container-successful-projects .webportal p {
        margin-left: -2vw;
        font-size: 1.2vw;
    }
    .container-logiforce {
        height: auto;
        margin-top: 3vw;
    }
    .container-logiforce h3 {
        color: rgb(39, 47, 50);
        margin-left: 10vw;
        margin-top: 1vw;
        font-size: 2.5vw;
    }
    .container-logiforce span {
        margin-left: 10vw;
        margin-top: -0.5vw;
        display: block;
        font-size: 1vw;
    }
    .container-logiforce .logiforce-info {
        margin-left: 1.7vw;
        margin-top: 5vw;
    }
    .container-logiforce .logiforce-info h5 {
        font-size: 1.5vw;
    }
    .container-logiforce .logiforce-info p {
        font-size: 1.2vw;
    }
    .container-logiforce .logiforce-monitor .monitor {
        background-image: url('images/successful-projects/logic-force-monitor.png');
        width: 28vw;
        height: 26vw;
        margin-top: 6vw;
    }
    .container-logiforce .realization {
        height: 6vw;
        margin-top: 2vw;
        margin-bottom: -2vw;
        margin-left: 8.5vw;
        width: 82vw;
    }
    .container-logiforce .realization .realization-time {
        height: 4vw;
        display: inline-block;
    }
    .container-logiforce .realization .first {
        width: 33vw;
    }
    .container-logiforce .realization .second {
        width: 28vw;
    }
    .container-logiforce .realization .third {
        width: 16vw;
    }
    .container-logiforce .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 5vw;
        height: 5vw;
        border-radius: 3vw;
        float: left;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 3vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number,
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 2vw;
        font-weight: bold;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 0.8vw;
        line-height: 0;
    }
    .container-logiforce .realization .realization-time .realization-info {
        display: inline-block;
        line-height: 5vw;
        margin-left: 1.7vw;
        font-size: 0.9vw;
    }
    .container-logiforce .accordion-header {
        width: 76vw;
        margin-left: 10.5vw;
        margin-top: 2vw;
        height: 2vw;
        border-radius: 1vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .accordion-header p {
        line-height: 2vw;
        font-size: 1vw;
        text-align: center;
        margin-left: 0;
    }
    .call-to-action {
        background-image: url('images/successful-projects/calltoaction.png');
        height: 34vw;
        margin-top: 6vw;
        margin-bottom: 9vw;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
    .call-to-action h1 {
        color: #F2F9FA;
        width: 57vw;
        margin-left: 11.5vw;
        padding-top: 4vw;
        font-size: 5vw;
    }
    .call-to-action h5 {
        font-size: 1.1vw;
        color: #F2F9FA;
        width: 36vw;
        margin-left: 11.5vw;
        padding-top: 1vw;
    }
    .call-to-action button {
        margin-top: 5vw;
        margin-left: 11.5vw;
        border-radius: 1vw;
        height: 3vw;
    }
    .page-navigation {
        top: 0;
        left: 5vw;
        width: 5vw;
        position: absolute;
        height: 100%;
        z-index: 10;
    }
    .page-navigation .icon {
        position: relative;
        width: 1.8vw;
        height: 1.8vw;
        text-align: center;
        line-height: 1.6vw;
        border-radius: 0.9vw;
        font-size: 0.8vw;
    }
    .page-navigation .light {
        color: #FDFDFD;
        border: 1px #FDFDFD solid;
    }
    .page-navigation .light-line {
        color: #FDFDFD;
        border-left: 1px #FDFDFD solid;
        margin-left: 0.85vw;
    }
    .page-navigation .vert-line {
        width: 1px;
    }
    .page-navigation .home-line {
        margin-top: 0.5vw;
        margin-left: 0.85vw;
        height: 1.5vw;
    }
    .page-navigation .home-icon {
        margin-top: 2vw;
    }
    .page-navigation .dark {
        color: #7CB5C0;
        border: 1px #7CB5C0 solid;
    }
    .dark-line {
        width: 1px;
        margin-left: 0.85vw;
        color: #7CB5C0;
        border-right: 1px solid;
    }
    .page-navigation .successful-projects-line-one {
        margin-top: 2vw;
        height: 10.5vw;
    }
    .page-navigation .successful-projects-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .successful-projects-line-two {
        margin-top: 0.5vw;
        height: 6.3vw;
    }
    .page-navigation .agri-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .agri-line {
        margin-top: 0.5vw;
        height: 84vw;
    }
    .page-navigation .logiforce-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .logiforce-line {
        margin-top: 0.5vw;
        height: 64vw;
    }
    .page-navigation .call-to-action-line-one {
        height: 7vw;
        margin-top: 2.3vw;
    }
    .page-navigation .call-action-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .call-to-action-line-two {
        margin-top: 0.5vw;
        height: 20vw;
    }
    .page-navigation .final-line {
        height: 15vw;
        margin-top: 2vw;
    }
    .page-navigation .agri-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .agri-line {
        margin-top: 0.5vw;
        height: 166vw;
    }
    .page-navigation .logiforce-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .logiforce-line {
        margin-top: 0.5vw;
        height: 72vw;
    }
    .page-navigation .call-to-action-line-one {
        height: 7vw;
        margin-top: 4.3vw;
    }
    .page-navigation .call-action-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .call-to-action-line-two {
        margin-top: 0.5vw;
        height: 20vw;
    }
    .page-navigation .final-line {
        height: 15vw;
        margin-top: 2vw;
    }
    .page-navigation .britanica-line {
        height: 110vw;
        margin-top: 0.5vw;
    }
    .page-navigation .britanica-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .park-school-line {
        height: 101vw;
        margin-top: 0.5vw;
    }
    .page-navigation .park-school-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .zalli-line {
        height: 36vw;
        margin-top: 0.5vw;
    }
    .page-navigation .zalli-line-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .bolan-line {
        height: 37vw;
        margin-top: 0.5vw;
    }
    .page-navigation .bolan-line-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .end-line {
        height: 70.5vw;
        margin-top: 0.5vw;
    }
}


/* Extra large */

@media (min-width: 1200px) {
    .container-header {
        height: 14vw;
        background-image: url('images/successful-projects/background.png');
    }
    .container-successful-projects {
        height: 5vw;
    }
    .container-successful-projects h1 {
        margin-left: 10vw;
        margin-top: 3vw;
        font-size: 4.5vw;
    }
    .container-successful-projects h3 {
        color: rgb(39, 47, 50);
        margin-left: 10vw;
        margin-top: 5vw;
        font-size: 2.5vw;
    }
    .container-successful-projects span {
        margin-left: 10vw;
        margin-top: -0.5vw;
        display: block;
    }
    .container-successful-projects h5 {
        margin-left: 10vw;
        margin-top: 5vw;
        font-size: 0.9vw;
    }
    .container-successful-projects p {
        margin-left: 1.7vw;
        font-size: 0.9vw;
    }
    .container-successful-projects .monitor {
        background-image: url('images/successful-projects/monitor.png');
        width: 30vw;
        height: 20vw;
        margin-top: -6vw;
    }
    .container-successful-projects .accordion-header {
        width: 76vw;
        margin-left: 10.5vw;
        margin-top: 2vw;
        height: 2vw;
        border-radius: 1vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-successful-projects .accordion-header p {
        line-height: 2vw;
        font-size: 0.8vw;
        text-align: center;
        margin-left: 0;
    }
    .container-successful-projects .realization {
        height: 6vw;
        margin-top: 1vw;
        margin-left: 10vw;
        width: 81vw;
    }
    .container-successful-projects .realization .realization-time {
        height: 4vw;
        display: inline-block;
    }
    .container-successful-projects .realization .first {
        width: 33vw;
    }
    .container-successful-projects .realization .second {
        width: 28vw;
    }
    .container-successful-projects .realization .third {
        width: 16vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 4vw;
        height: 4vw;
        border-radius: 2vw;
        float: left;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 2vw;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number,
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 1.4vw;
        font-weight: bold;
    }
    .container-successful-projects .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 0.8vw;
        line-height: 0vw;
    }
    .container-successful-projects .realization .realization-time .realization-info {
        display: inline-block;
        line-height: 4vw;
    }
    .container-successful-projects .webportal {
        margin-top: 5vw;
    }
    .container-successful-projects .laptop {
        background-image: url('images/successful-projects/laptop.png');
        width: 21vw;
        height: 20vw;
        margin-left: 1vw;
        margin-top: -3vw;
    }
    .container-successful-projects .webportal h5 {
        margin-left: -2vw;
        margin-top: 2vw;
        font-size: 0.9vw;
    }
    .container-successful-projects .webportal p {
        margin-left: -2vw;
        font-size: 0.9vw;
    }
    .container-logiforce {
        height: auto;
        margin-top: 0;
    }
    .container-logiforce h3 {
        color: rgb(39, 47, 50);
        margin-left: 10vw;
        margin-top: 5vw;
        font-size: 2.5vw;
    }
    .container-logiforce span {
        margin-left: 10vw;
        margin-top: -0.5vw;
        display: block;
    }
    .container-logiforce .logiforce-info {
        margin-left: 1.7vw;
        margin-top: 5vw;
    }
    .container-logiforce .logiforce-info h5 {
        font-size: 0.9vw;
    }
    .container-logiforce .logiforce-info p {
        font-size: 0.9vw;
    }
    .container-logiforce .logiforce-monitor .monitor {
        background-image: url('images/successful-projects/logic-force-monitor.png');
        width: 28vw;
        height: 18vw;
        margin-top: 2vw;
    }
    .container-logiforce .realization {
        height: 6vw;
        margin-top: 2vw;
        margin-bottom: -3vw;
        margin-left: 10vw;
        width: 81vw;
    }
    .container-logiforce .realization .realization-time {
        height: 4vw;
        display: inline-block;
    }
    .container-logiforce .realization .first {
        width: 33vw;
    }
    .container-logiforce .realization .second {
        width: 28vw;
    }
    .container-logiforce .realization .third {
        width: 16vw;
    }
    .container-logiforce .realization .realization-time .outer-circle {
        background-color: #8AC23A;
        width: 4vw;
        height: 4vw;
        border-radius: 2vw;
        float: left;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle {
        position: relative;
        top: 5%;
        width: 90%;
        left: 5%;
        border: 0.15vw solid #fff;
        height: 90%;
        border-radius: 2vw;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number,
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        text-align: center;
        color: #fff;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .number {
        font-size: 1.4vw;
        font-weight: bold;
    }
    .container-logiforce .realization .realization-time .realization-info {
        display: inline-block;
        line-height: 4vw;
        margin-left: 1.7vw;
        font-size: 0.9vw;
    }
    .container-logiforce .accordion-header {
        width: 76vw;
        margin-left: 10.5vw;
        margin-top: 2vw;
        height: 2vw;
        border-radius: 1vw;
        position: relative;
        border: 1px #7CB5C0 solid;
        cursor: pointer;
        font-family: 'Comfortaa', cursive;
        font-weight: 400;
        color: #777777;
    }
    .container-logiforce .realization .realization-time .outer-circle .inner-circle .period {
        font-size: 0.8vw;
        line-height: 0;
    }
    .container-logiforce .webportal .laptop {
        
    }
    .accordion-header p {
        line-height: 2vw;
        font-size: 0.8vw;
        text-align: center;
        margin-left: 0;
    }
    .call-to-action {
        background-image: url('images/successful-projects/calltoaction.png');
        height: 34vw;
        margin-top: 6vw;
        margin-bottom: 9vw;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
    .call-to-action h1 {
        color: #F2F9FA;
        width: 57vw;
        margin-left: 11.5vw;
        padding-top: 4vw;
        font-size: 5vw;
    }
    .call-to-action h5 {
        font-size: 0.9vw;
        color: #F2F9FA;
        width: 36vw;
        margin-left: 11.5vw;
        padding-top: 1vw;
    }
    .call-to-action button {
        margin-top: 5vw;
        margin-left: 11.5vw;
        border-radius: 1vw;
        height: 3vw;
    }
    .page-navigation {
        top: 0;
        left: 5vw;
        width: 5vw;
        position: absolute;
        height: 100%;
        z-index: 10;
    }
    .page-navigation .icon {
        position: relative;
        width: 1.8vw;
        height: 1.8vw;
        text-align: center;
        line-height: 1.6vw;
        border-radius: 0.9vw;
        font-size: 0.8vw;
    }
    .page-navigation .light {
        color: #FDFDFD;
        border: 1px #FDFDFD solid;
    }
    .page-navigation .light-line {
        color: #FDFDFD;
        border-left: 1px #FDFDFD solid;
        margin-left: 0.85vw;
    }
    .page-navigation .vert-line {
        width: 1px;
    }
    .page-navigation .home-line {
        margin-top: 0.5vw;
        margin-left: 0.85vw;
        height: 1.5vw;
    }
    .page-navigation .home-icon {
        margin-top: 2vw;
    }
    .page-navigation .dark {
        color: #7CB5C0;
        border: 1px #7CB5C0 solid;
    }
    .dark-line {
        width: 1px;
        margin-left: 0.85vw;
        color: #7CB5C0;
        border-right: 1px solid;
    }
    .page-navigation .successful-projects-line-one {
        margin-top: 2vw;
        height: 10.5vw;
    }
    .page-navigation .successful-projects-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .successful-projects-line-two {
        margin-top: 0.5vw;
        height: 6.3vw;
    }
    .page-navigation .agri-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .agri-line {
        margin-top: 0.5vw;
        height: 107vw;
    }
    .page-navigation .logiforce-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .logiforce-line {
        margin-top: 0.5vw;
        height: 72vw;
    }
    .page-navigation .call-to-action-line-one {
        height: 7vw;
        margin-top: 4.3vw;
    }
    .page-navigation .call-action-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .call-to-action-line-two {
        margin-top: 0.5vw;
        height: 20vw;
    }
    .page-navigation .final-line {
        height: 15vw;
        margin-top: 2vw;
    }
    .page-navigation .britanica-line {
        height: 71vw;
        margin-top: 0.5vw;
    }
    .page-navigation .britanica-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .park-school-line {
        height: 67vw;
        margin-top: 0.5vw;
    }
    .page-navigation .park-school-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .zalli-line {
        height: 25vw;
        margin-top: 0.5vw;
    }
    .page-navigation .zalli-line-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .bolan-line {
        height: 26vw;
        margin-top: 0.5vw;
    }
    .page-navigation .bolan-line-icon {
        margin-top: 0.5vw;
    }
    .page-navigation .end-line {
        height: 45.5vw;
        margin-top: 0.5vw;
    }
}