/*
Template Name: Project First
Author: Creative Pencil LTD - www.creativepencil.co.uk
    Designer - Julie Paun - juliepaun@creativepencil.co.uk
    Developer: Valentina Mirea - valentina.mirea@creativepencil.co.uk
Version: 1.0.0

/*** ==========================  TABLE OF CONTENTS  ============================
01- Google Fonts
02- General Variables
03- General Styling
    03.1- Paddings
    03.2- Margins
04- Menu style
05- Hero style
06- Lean Construction Management at a Glance style
07- Lean Construction Management - Our Approach style
07- Planning style
08- Contact style
09- Back to Top Button style
10- Pop-up images style
11- Privacy Policy style
12- Legal Information style
13- Blog style
14- Media queries


/*** =========================================================================*/

/*** ==========================  01- Google Fonts  ===========================*/
/* import link for google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*** ==========================  02- General Variables =======================*/

:root {
  --color1: #f1b71c;
  --color2: #144da1;
  --color3: #326EB6;
  --color4: #071E3F;
  --color5: #fbfbfb;
  --color6: #FFFFFF;
}
.bg-color1 {background-color:var(--color1);}
.bg-color2 {background-color:var(--color2);}
.bg-color3 {background-color:var(--color3);}
.bg-color4 {background-color:var(--color4);}
.bg-color5 {background-color:var(--color5);}
.bg-color6 {background-color:var(--color6);}
.bg-hover-c5 {-webkit-transition: 0.5s ease; transition: 0.5s ease;}
.bg-hover-c5:hover {transform: translate(0, -10px);}
.text-color1{color:var(--color1);}
.text-color2{color:var(--color2);}
.text-color3{color:var(--color3);}
.text-color4{color:var(--color4);}
.text-color6{color:var(--color6);}


.border-left {border-left: 1px solid rgba(50, 110, 182,0.1);}
.border-blue-light {border: 1px solid var(--color2)!important;}

/*** ==========================  03- General Styling =========================*/

body {
  /* set the font */
  font-family: "Poppins",Arial,Helvetica,sans-serif;
  width: 100%;
  max-width: 100%;
  margin: auto;
}
.wrapper {padding: 0 10%;margin: auto;}
.wrapper-footer {padding: 0 10%;margin: auto;}
.vcenter-item { display: flex;  align-items: center}
h1,h2,h3,h4,h5,h6 {
  /* set the font */
  font-family: "Poppins",Arial,Helvetica,sans-serif;
  color: var(--color1);
  font-weight: bold;
}


.text-center {text-align: center;}
.section-title {font-size: 40px;line-height:70px;}
.section-sub-title {font-size: 30px;line-height:50px;}
.title1 {font-size: 24px;line-height:32px;}
.text-extra-small {font-size: 14px;line-height: 17px;}
.text-small {font-size: 16px;line-height: 24px;}
.text-medium {font-size: 18px;line-height: 26px;padding-top: 5px;}
.text-large {font-size: 20px;line-height: 28px;}
.number {font-size: 60px;line-height: 66px;font-weight: 600;}
.p-2 {font-size: 12px;line-height: 16px;}
.shape-r {width: 10px;height: 20px;background-color: #FFF;float: left;margin-right: 5px;-ms-transform: skewX(30deg); transform: skewX(30deg);}
.wrapper-5shapes {width: 75px;height: 20px;position: absolute;left: 0;right: 0;bottom: 0;margin: auto;}
.wrapper-img {width: 95%;margin: auto;}
.wrapper-img2 {width: 70%;margin: auto;}
.wrapper-img img {width: 100%;margin: auto;}

/* ----------------------------  03.1- Paddings ------------------------------*/
.pt-10 {padding-top: 10px;}
.pb-10 {padding-bottom: 10px;}
.pt-15 {padding-top: 15px;}
.pb-15 {padding-bottom: 15px;}
.pt-20 {padding-top: 20px;}
.pb-20 {padding-bottom: 20px;}
.pb-26 {padding-bottom: 26px;}
.pt-30 {padding-top: 30px;}
.pb-30 {padding-bottom: 30px;}
.pt-40 {padding-top: 40px;}
.pb-40 {padding-bottom: 40px;}
.pt-50 {padding-top: 50px;}
.pb-50 {padding-bottom: 50px;}
.pb-52 {padding-bottom: 52px;}
.pt-60 {padding-top: 60px;}
.pb-60 {padding-bottom: 60px;}
.pt-70 {padding-top: 70px;}
.pb-70 {padding-bottom: 72.5px;}
.pb-78 {padding-bottom: 78px;}
.pt-80 {padding-top: 80px;}
.pb-80 {padding-bottom: 80px;}
.pb-90 {padding-bottom: 90px;}
.pb-100 {padding-bottom: 100px;}
.pt-100 {padding-top: 100px;}
.pb-30-cer {padding-bottom: 30px;}
.pb-100 {padding-bottom: 100px;}
.pb-special {padding-bottom: 180px;}
.pb-special2 {padding-bottom: 315px;}
.pl-10 {padding-left: 10px;}
.pr-10 {padding-right: 10px;}
.pl-20 {padding-left: 20px;}
.pr-20 {padding-right: 20px;}
.pl-30 {padding-left: 30px;}
.pr-30 {padding-right: 30px;}
.pl-40 {padding-left: 40px;}
.pr-40 {padding-right: 40px;}
.pl-50 {padding-left: 50px;}
.pr-50 {padding-right: 50px;}
.pl-100 {padding-left: 100px;}
.plr-25 {padding-right: 25px;padding-left: 25px;}
.plr-10 {padding-right: 10px;padding-left: 10px;}
.ptrbl-10 {padding: 10px;}
.ptrbl-30 {padding: 30px;}
.no-padd {margin-top: -20px;}
.ptrbl-50 {padding: 50px;}
.plr-50 {padding-right: 50px;padding-left: 50px;}
.col-12.col-md-6.col-lg-6, .col-12.col-md-4.col-lg-4,.col-12.col-md-1.col-lg-2,.col-12.col-md-4.col-lg-2,.col-12.col-md-3.col-lg-3, .col-12.col-md-3.col-lg-2 {padding-left: 0; padding-right:0}

/* ----------------------------  03.2- Margins ------------------------------*/

.row {margin-left: 0;margin-right: 0;}
.col-12.col-md-3.col-lg-3,.col-12.col-md-6.col-lg-6{margin-left: 0;margin-right: 0;}
.mb-50 { margin-bottom: 50px;}
.mb-30{ margin-bottom: 30px;}
.mb-100{ margin-bottom: 100px;}
.mr-10 {margin-right:10px;}
.mr-30 {margin-right:30px;}
.ml-10 {margin-left: 10px;}
.mb-mobile-10{margin-bottom:0;}

/*** ==========================  04 - Menu style =============================*/
nav ul li {text-align: center;}
nav ul li a,nav ul li a:after,nav ul li a:before {transition: all .5s;}
nav ul li a:hover {color: #FFF;}
nav.fill ul li a {position: relative;}
nav.fill ul li a:after {position: absolute;bottom: 0;left: 0;right: 0;margin: auto;width: 0%;content: '';color: transparent;background: var(--color2);height: 1px;}
nav.fill ul li a {transition: all 2s;}
nav.fill ul li a:hover {color: #fff;z-index: 1;text-decoration: none;margin: auto;}
nav.fill ul li a:hover:after {z-index: -10;animation: fill 1s forwards;-webkit-animation: fill 1s forwards;-moz-animation: fill 1s forwards;opacity: 1;}
/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: var(--color2);
  }
}

/*** ==========================  05- Hero style ==============================*/

.certificated {width: 200px; float:right;}
.certificated-apps {width: 150px;}
.certificated img {width: 100%;}
.certificated-apps img {width: 100%;}
.headline {font-size: 135px;line-height: 161px;margin-top: 315px;}
.headline-privacy {font-size: 135px;line-height: 161px;margin-top: 350px;}
.secondline {font-size: 80px;line-height: 130px;letter-spacing: 0px;opacity: 1;}
.action:hover {background-color: var(--color1);}
.action:hover .text-color1 {color: #fff;}
.wrapper-about {width: 100%;}
.count-number-mobile{display: none;}
#home{
  position:relative;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/hero.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#imprint-home {
  margin-top: 80px;
  padding-bottom: 16px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/hero_imprint.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh
}

#home-legal {
  padding-bottom: 100px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/hero_privacy.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh
}

#home-term-of-use {
  padding-bottom: 100px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img/Terms_of_service.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh
}


/*** ============== 06- Lean Construction Management at a Glance style =======*/

.lcmGItem {margin: 0 10px;padding: 30px;width: 100%; -webkit-transition: 0.5s ease;transition: 0.5s ease; max-height: 100%;}
.lcmGItem:hover {transform: translate(0, -10px);}
.lcmGDetail {width: 100%;}
.lcmG-italic {margin: 10px 10px;font-style: italic;padding-left: 15px;}

/*** =============  07- Lean Construction Management - Our Approach style ====*/

.lcmAItem {margin: 0 10px;padding: 30px 30px 10px 30px;-webkit-transition: 0.5s ease;transition: 0.5s ease;}
.lcmAItem:hover{transform: translate(0, -10px);}
.lcmADetail {width: 100%;}
.icon-img {height: 50px;}
.icon-img img {height: 100%;}
.lcmA-title {padding: 10px 0;}

/*** ==========================  07- Planning style ==========================*/

.line-h {height: 10px;width: 125px;margin:auto;}
#lcmG .row > [class*='col-lg-2'],
#lcmG .row > [class*='col-lg-6'],
#lcmA .row > [class*='col-lg-2'],
#Planning .row .col-12.col-md-12.col-lg-6 .row > [class*='col-lg-4'],
#Planning .row > [class*='col-lg-6'],
#Workforce .row .col-12.col-md-6.col-lg-6 .row > [class*='col-lg-4'],
#Workforce .row > [class*='col-lg-6'],
#Analytics .row > [class*='col-lg-6'],
#Apps .row > [class*='col-lg-6'],
#home .col-lg-3 {display: flex;}
.row [class*='col-md-4'] ,
#Execution .row [class*='col-lg-6'],
#Execution .row [class*='col-lg-3'] {display: flex;}
footer {border-top: 1px solid rgba(20, 77, 161, 0.3);}
.footer-logo {width: 100px;height: auto;}
.member-of  {width: 150px; height: auto;}
.footer-logo img, .member-of img {width: 100%; height: auto;}
.nav-footer {flex-flow: row nowrap;-ms-flex-pack: start;justify-content: space-between;}
.footer-top .row .col-sm-12.col-md-6.col-lg-6{padding: 0;}
.footer-top .col-6,.footer-top .col-2,.footer-top .col-4 {padding: 0;}
.fab {font-size: 26px;}

/*** ==========================  08- Contact style ===========================*/

.input-wrapper {padding-left: 20px;padding-right: 20px;}
input[type=text],input[type=email],input[type=submit],textarea {width: 100%; border: 1px solid rgba(20, 77, 161, 0.3);}
textarea {height: 100px;}
::-webkit-input-placeholder {text-transform:uppercase;}
:-ms-input-placeholder {text-transform:uppercase;}
::placeholder {text-transform:uppercase;}
input[type=submit] {text-transform:uppercase;font-weight: bold; border-color: transparent}
.error {color: #f15e22; padding-left: 20px;font-size: 14px;line-height: 1.2;font-weight: normal;}
#success, #errorEmail {display: none;}

/*** ==========================  09 - Back to Top Button style ===============*/

#back-to-top-button {display: inline-block;width: 50px;height: 50px;text-align: center;position: fixed;bottom: 30px;right: 30px;transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;opacity: 0;visibility: hidden;z-index: 1000;border: 1px solid #144DA1;}
#back-to-top-button::after {content: "\005E";font-size: 2em;line-height: 50px;color: var(--color2);}
#back-to-top-button:hover {cursor: pointer;}
#back-to-top-button.show {opacity: 1;visibility: visible;}

/*** ==========================  10 - Pop-up image style =====================*/
.lightbox{
  cursor: pointer;
}
.img-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(38, 40, 52, 0.8);
    text-align: center;
    display: none;
    z-index: 9999999999999;
    animation: pop-in;
    animation-duration: 0.5s;
    -webkit-animation: pop-in 0.5s;
    -moz-animation: pop-in 0.5s;
    -ms-animation: pop-in 0.5s;
}

.img-popup img {
    position: absolute;
    top: 50%;
    max-width: 100%;
    max-height: 90vh;
    display: inline-block;
    transform: translate(-50%, -50%);
}

.close-lightbox {
    position: absolute;
    top: 45px;
    right: 10%;
    padding: 0px 15px;
    color: #fff;
    font-size: 35px;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
}
.lightboxfadeout{
    animation: fadeout;
    animation-duration: 0.5s;
    -webkit-animation: fadeout 0.5s;
    -moz-animation: fadeout 0.5s;
    -ms-animation: fadeout 0.5s;
}

@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes pop-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes pop-in {
    0% {
        opacity: 0;
        -moz-transform: scale(0.1);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@keyframes fadeout {
    100% {
        opacity: 0;
        transform: scale(0.1);
    }
    0% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes fadeout {
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes fadeout {
    100% {
        opacity: 0;
        -moz-transform: scale(0.1);
    }
    0% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}


/*** ==========================  11- Privacy Policy style ====================*/

#table-of-content ol li {padding: 5px 0;border-bottom: 1px solid rgba(20, 77, 161, 0.3);}
.border-bottom-blue {border-bottom: 1px solid rgba(20, 77, 161, 0.1);}
.gdpr-logo {width: 250px;margin: auto;}
em {font-weight: 500;}
.gdpr-logo img {width: 100%;}

/*** ==========================  12- Legal Information style =================*/

#imprint .row .col-6.col-md-6.col-lg-6 {padding-left: 0;padding-right: 0;}

/*** ==========================  13 - Blog style =============================*/
.big-article{
  position: relative;
  padding-top: 100%;
  border-radius: 8px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  height: 650px;
}

.big-article .back-half {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(3, 3, 3, 0.9), rgba(3, 3, 3, 0.32) 20%, rgba(1, 1, 1, 0));
}

.big-article .big-article__info {
    position: absolute;
    left: 35px;
    top: 45px;
    z-index: 2;
    padding-right: 35px;
}

.big-article img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.big-article:hover img {
  transform: scale(1.1);
}

.small-article {
    overflow: hidden;
    border-radius: 8px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.small-article .for-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 17px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.for-image {
  width: 100%;
}
.for-image img {
  width: 100%;
  transition: 0.3s;
}

.small-article:hover img {
  transform: scale(1.1);
}

.post-read-more:hover{
  color: var(--color1)
}

.other-article {
  transition: 0.4s;
  display: inline-block;
  height: 31px;
  border-radius: 18px;
  border: solid 1px rgba(151, 151, 151, 0.52);
  color: #5d5d5d;
  padding: 0px 15px;
  line-height: 29px;
  margin-right: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}

.single-article .post-image {
    margin: 0px;
    width: 100%;
    height: 577px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

.wrapper-image{
  width: 100%;
}

.wrapper-image img {
  width: 100%;
}

.col-12.col-md-6.col-lg-8,.col-12.col-md-12.col-lg-12 {
  padding-left:0;
}

.col-12.col-md-6.col-lg-4 {
  padding-right: 0;
}

/*** ==========================      Video lightbox ==========================*/

#playme {
  font-size: 45px;
  z-index: 99;
  font-size: 18px;
  line-height: 26px;
  outline: none; /* Ditch the annoyning blue outline on click */
  cursor: pointer;
  background-color: transparent;
}

#playme > i {
  position: relative;
  margin-top: 4px;
}

#video-wrapper,
#video-wrapper2,
.video-wrapper {
  position: absolute;
  top: 50%!important;
  left: 50%!important;
  z-index: 99;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
}

iframe {
  width: 960px;
  height: 540px;
}

/*** ==========================  14- Media queries ===========================*/

@media only screen and (max-width: 700px) {
  .wrapper {padding-left: 5%; padding-right: 5%}
  .navbar-brand {display: block; width: 100px; }
  .navbar-brand img {width: 100%;}
  .navbar-collapse {height: 100vh;}
  .navbar-right .nav-item {padding-top: 10%; padding-bottom: 10%; border-bottom: 1px solid rgba(20, 77, 161, 0.3);}
  nav.fill ul li a:hover:after {animation: none;-webkit-animation: none;-moz-animation: none; animation-play-state: paused}
  #home{padding-bottom: 0px; background-image: url(../img/hero-mobile.png);}
  #home-legal{background-image: url(../img/Privacy_mobile.png);}
  #imprint-home{background-image: url(../img/Imprint_mobile.png);}
  #home-term-of-use{background-image: url(../img/Terms_of_service_mobile.png);}
  .section-title {font-size: 26px;line-height:30px;}
  .section-sub-title{font-size: 24px;line-height:30px;}
  .title1 {font-size: 20px;line-height:20px;}
  .text-medium {font-size: 18px;line-height: 20px;padding-top: 5px;}
  .text-extra-small {font-size: 16px;line-height: 17px;}
  .text-small {font-size: 16px;line-height: 18px;}
  .text-large {font-size: 18px;line-height: 20px;}
  .number {font-size: 24px;line-height: 30px;font-weight: 600;}
  .certificated {width: 100px; margin: auto;}
  .headline {font-size: 40px; line-height: 60px; margin-top: 80px;}
  .headline-privacy {font-size: 40px; line-height: 60px; margin-top: 250px;}
  .secondline {font-size: 24px;line-height: 30px;}
  .pt-100 {padding-top: 30px;}
  .pb-100 {padding-bottom: 30px;}
  .ptrbl-50 {padding: 20px;}
  .mb-mobile-10 {margin-bottom: 10px;}
  .mt-mobile-20 {margin-top: 20px;}
  .pb-mobile-10 {padding-bottom: 10px;}
  .pb-80, .pb-26,.pb-30 {padding-bottom: 10px;}
  .mb-100 {margin-bottom: 30px;}
  .lcmGItem {width: 100%;}
  .ml-10 {margin-left: 0px;}
  .mr-10 {margin-right:0;}
  .page-footer,.footer-bottom {text-align: center;}
  .page-footer .wrapper .row .col-12 {padding-top: 20px;}
  .pt-40 {padding-top: 10px;}
  .footer-logo,.no-padd  {margin: auto;}
  .nav-footer {flex-flow:column; align-items: center}
  .text-right {text-align: center!important}
  .justify-content-end{justify-content:center!important;}
  #back-to-top-button {display: none;}
  .big-article{ height: 450px; margin-bottom: 30px;}
  .pr-20 {padding-right: 0}
  .small-article {margin-bottom: 30px}
  .pl-20 {padding-left: 0}
  .m-center {justify-content: center; text-align: center;}
  .single-article {display: none;}
  .count-number{display: none;}
  .count-number-mobile{display: block;}
  iframe {width: 300px;height: 168px;}
  #playme, #playme2 {padding-top: 20px; padding-bottom: 20px;}
  img {max-width: 100%;}
  .wrapper-img2 {width: 95%;margin: auto;}
}

@media only screen and (min-width: 700px) and (max-width: 1023px) {
  .wrapper {padding-left: 5%; padding-right: 5%}
  .navbar-brand {display: block; width: 100px; }
  .navbar-brand img {width: 100%;}
  .navbar-collapse {height: 100vh;}
  .navbar-right .nav-item {padding-top: 10%; padding-bottom: 10%; border-bottom: 1px solid rgba(20, 77, 161, 0.3);}
  nav.fill ul li a:hover:after {animation: none;-webkit-animation: none;-moz-animation: none; animation-play-state: paused}
  #home{padding-top:100px; height: 100vh; background-image: url(../img/hero_tablet.png);}
  #home-legal{padding-bottom: 0; background-image: url(../img/Privacy_tablet.png);}
  #imprint-home{margin-top: 0;background-image:url(../img/Imprint_Tablet.png);}
  #home-term-of-use{background-image: url(../img/Terms_of_service_tablet.png);}
  .wrapper-privacy, .wrapper-imprint, .wrapper-term-of-use, .wrapper-home {position: relative; top: 50%; transform: translateY(-50%); }
  .secondline{padding-bottom: 100px;}
  .section-title {font-size: 24px;line-height:30px;}
  .section-sub-title {font-size: 20px;line-height:30px;}
  .title1 {font-size: 18px;line-height:20px;}
  .text-medium {font-size: 15px;line-height: 20px;padding-top: 5px;}
  .text-extra-small {font-size: 10px;line-height: 17px;}
  .text-small {font-size: 12px;line-height: 18px;}
  .text-large {font-size: 18px;line-height: 20px;}
  .number {font-size: 20px;line-height: 30px;font-weight: 600;}
  .certificated {width: 250px;}
  .headline {font-size: 40px; line-height: 60px; margin-top: 70px;}
  .headline-privacy {font-size: 40px; line-height: 60px; margin-top: 50px;}
  .secondline {font-size: 24px;line-height: 30px;}
  .pt-100 {padding-top: 30px;}
  .pb-30-cer {padding-bottom: 30px;}
  .pt-20-t {padding-top: 20px;}
  .pb-100 {padding-bottom: 30px;}
  .ptrbl-50 {padding: 10px;}
  .ptrbl-30 {padding: 20px 10px;}
   .pb-26 {padding-bottom: 10px;}
  .mb-100 {margin-bottom: 30px;}
  .mb-tablet {margin-bottom: 30px;}
  .mt-tablet-10{margin-top: 10px;}
  .mt-tablet{margin-top: 30px;}
  #lcmG .col-12.col-md-2.col-lg-2, #lcmA .col-12.col-md-2.col-lg-2, .col-12.col-md-4.col-lg-4, .col-12.col-md-6.col-lg-6{padding-right: 3px; padding-left:3px;}
  .lcmG-italic {padding-left: 0px; margin: 10px 0px;}
  .col-12.col-md-5.col-lg-5 {padding-left: 0; padding-right:0;}
  .no-padd {display: flex!important;justify-content: flex-end!important;}
  .lcmGItem {width: 100%;}
  .ml-10 {margin-left: 0px;}
  .mr-10 {margin-right:0;}
  .lcmGItem {margin: 0;padding: 10px 5px;}
  .lcmAItem {padding: 10px 5px;}
  .text-right {text-align: center!important}
  .justify-content-center{justify-content:flex-end!important;}
  .tablet-footer {margin-top: 30px; border-top: 1px solid rgba(20, 77, 161, 0.3); padding-top: 20px;}
  #back-to-top-button {display: none;}
  .big-article {height: 500px}
  .single-article {display: none;}
  .count-number{display: none;}
  .count-number-mobile{display: block;}
  .member-of {height: 59px;}
  .member-of img {width: 100%; height: 100%}
  iframe {
    width: 650px;
    height: 365px;
  }
  .wrapper-img2 {width: 95%;margin: auto;}
}

@media only screen and (min-width: 1024px) and (max-width: 1500px) {
  .wrapper {padding-left: 3%; padding-right:3%}
  #home{height: 100vh; padding-top: 50px;}
  .wrapper-home {position: relative; top: 60%; transform: translateY(-50%); }
  .pb-80{padding-bottom: 0;}
  .plr-25 {padding-right: 15px;padding-left: 15px;}
  .headline {font-size: 80px;line-height: 90px;margin-top:100px;}
  .title1 {font-size: 18px;line-height:20px;}
  .secondline {font-size: 50px;line-height: 80px;}
  .section-title {font-size: 30px;line-height:30px;}
  .section-sub-title {font-size: 24px;line-height:30px;}
  .text-extra-small {font-size: 10px;line-height: 17px;}
  .number {font-size: 30px;line-height:30px;}
  .text-medium {font-size: 14px;line-height: 20px;padding-top: 5px;}
  .text-small {font-size: 14px;line-height: 18px;}
  .action:hover {top: 0%;height: 100%;background-color: var(--color1);}
  .lcmGItem { margin: 0 10px; padding: 20px 10px;}
  .lcmAItem {margin: 0 10px; padding: 30px 10px }
  .ptrbl-30 {padding: 20px 5px;}
  .ptrbl-50{padding: 20px;}
  .col-md-12 {padding-left: 0;padding-right: 0;}
  .mr-10 {margin-right: 5px;}
  .single-article .post-image {height: 250px;}
  #back-to-top-button::after {font-size: 1em;line-height: 10px;}
  #back-to-top-button {width: 20px;height: 20px;right: 5px;}
  iframe {
    width: 900px;
    height: 506px;
  }
  .wrapper-img2 {width: 95%;margin: auto;}
}

@media only screen and (min-width: 1501px) and (max-width: 1919px) {
  .wrapper {padding-left: 5%; padding-right:5%}
  .ptrbl-30 {padding: 30px 15px;}
  .text-extra-small {font-size: 12px;line-height: 17px;}
  .single-article .post-image {height: 350px;}
  .wrapper-home {position: relative; top: 60%; transform: translateY(-10%); }
}

@media only screen and (min-width: 1921px) {
  .headline {font-size: 135px;line-height: 161px;margin-top: 500px;}
  #home{height: 100vh}
  .wrapper-home {position: relative; top: 50%; transform: translateY(-50%); }
  iframe {
    width: 1500px;
    height: 843px;
  }
}