@charset "UTF-8";

@media (min-width:1921px) {
}

@media (min-width:1680px) {
    header .pp-logo, footer .pp-logo {
        height: 80px;
        transition: all 0.5s;
    }

    .banner-section {
        padding-top: 175px;
        height: 700px;
    }

    .container {
        max-width: 1300px;
    }

    .form-bar-section:after {
        background-position-y: 20%;
    }

    .table-section.col-xl-6 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 250px;
      }

}

@media (max-width:1679px) {
    body {
        font-size: 14px;
    }

    .banner-section .banner-title {
        font-size: 42px;
        line-height:    46px;
    }

    .sub-title {
        font-size: 21px;
    }

    .sub-title[class*="feature-number"] {
        padding-left: 140px;
    }

    .sub-title[class*="feature-number"]:before {
        font-size: 105px;
    }

    .sub-title[class*="feature-number"]:after {
        right: 0px;
        width: 120px;
    }

    .feature-section-1 .images-iphone {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 95%;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 282px;
    }

    .data-content-section .mt-lg-160 {
        margin-top: 100px !important;
    }

    .data-section .blockquote-section .blockquote-default {
        bottom: -25%;
    }

    .banner-section {
        padding-top: 175px;
        height: 700px;
        background-position-x: 75%;
    }

    .banner-section:after {
        width: 0;
    }
    .form-space-top {
        height: 50px;
    }
    .form-space-bottom {
        height: 70px;
    }
}

@media (min-width:1451px) {
    .data-section .blockquote-section .blockquote-content-section {
        left: 62%;
    }

}

@media (max-width:1450px) {
    .data-section .blockquote-section .blockquote-default {
        bottom: -15%;
    }

    .table-section.pl-lg-10 {
        padding-left: 0px !important;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 250px;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width:1200px) {
    .background-feature-section [class^="background-feature"] {
        max-width: 250px;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width:1199px) {
    header .pp-logo, footer .pp-logo {
        height: 70px;
    }

    .banner-section {
        height: 665px;
        text-shadow: 20px 18px 25px #FFF;
    }

    .banner-section .banner-title {
        line-height: 50px;
        margin-top: -120px;
        margin-bottom: 0px;
    }
    
    .banner-content {
        text-shadow: 1px 1px 2px #000;
    }

    .btn-outline-default {
        max-width: 100%;
    }

    .about-feature-3-section {
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .feature-section-1:before {
        top: -6.5%;
        height: 113%;
        left: -18%;
    }

    .data-section .blockquote-section .blockquote-content-section {
        position: absolute;
        display: table;
        margin-top: 0;
        left: 0;
        transform: none;
        bottom: 0;
    }

    .data-section .blockquote-section .blockquote-default {
        margin-bottom: 0;
        max-width: calc(100% - 30px);
        left: 15px;
        bottom: 0;
    }

    _::-webkit-full-page-media, _:future, :root .data-section .blockquote-section .blockquote-default {
        max-width: 100% !important;
    }

    @media not all and (min-resolution:.001dpcm) {
        @media {
            .data-section .blockquote-section .blockquote-default {
                max-width: 100% !important;
            }

        }

    }

    .blockquote-section {
        background-image: none !important;
    }

    .data-section:before {
        width: 100%;
        height: 100%;
    }

    .background-feature-section [class^="background-feature"] .feature-name {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .form-bar-section:after {
        background-size: 120%;
        background-position: right;
    }

    .feature-section-3 .images-section {
        position: relative !important;
    }

    .guide-section [class*="-name"] {
        font-size: 18px;
    }

    .guide-section .blog-content:before, .guide-section .blog-content:after {
        margin: 0px;
    }

    .guide-section .blog-content .blog-detail {
        padding: 0px 0px;
    }

    .guide-section .guide-content .guide-front {
        padding:0px;
    }

    .guide-section .guide-content .guide-back {
        margin: 0px 15px;
    }

    .guide-section .guide-content .guide-back .guide-detail {
        padding: 0px;
    }

    .blog-content, .guide-content{
        min-height: 75%;
    }

    .blog-name{
        font-size: 8px;
    }

    .form-space-top {
        height: 30px;
    }
    .form-space-bottom {
        height: 50px;
    }
    .btn-primary.btn-default.form-download-but{
        height:80px;
        font-size: 24px;
        border-radius:20px;
    }
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width:992px) {
}

/* Medium devices (tablets, less than 992px) */
@media (max-width:991px) {
    header .pp-logo, footer .pp-logo {
        height: 54px;
    }

    .navbar-brand {
        display: block;
        text-align: center;
    }
    
    .banner-title-section {
        text-align: left;
    }
    
    .banner-section {
        height: 1100px;
    }
    
    .banner-section .banner-title {
        font-size: 36px;
        line-height: 38px;
        margin-top: 580px;
        color: #008080;
        text-align: left !important;
    }
    
    .banner-content {
        color:  #000;
        text-shadow: unset;
    }
    
    .report-title {
        font-size:  35px;
        color: #008080;
        text-align: left;
    }
    
    .year-label {
        padding: 0 15px 40px 15px;
        color: #fff;
        background-color: #23ad71;
        font-size: 40px;
        height: 45px;
        margin-top: 0px !important;
        top: 625px;
        line-height: 40px;
    }    

    .aboutus-section .bullet-pt {
        font-size: 12pt;
    }
    h5 {
        font-size: 18px;
    }

    h6, .list-default .list-item {
        font-size: 16px;
    }

    .btn-default {
        padding: 18px 35px;
        font-size: 18px;
    }

    .banner-section {
        background-image: url(../images/PP-ISS-Landing-Page-Mobile-Banner-3.jpg);
        height: 1100px;
        padding-top: 110px;
        background-position-x: center;
        background-position-y: top;
    }

    .background-feature-section:nth-child(even) {
        margin-right: 0px;
    }

    .banner-section .row {
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

    .feature-section-1:before {
        top: -4%;
        height: 85%;
        left: 0;
    }

    .feature-section-1 .images-iphone {
        position: relative;
        top: 55%;
    }

    .form-bar-section:after {
        background-image: none;
    }
    .form-photo {
        display: none;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 330px;
        margin-bottom: 25px;
    }

    .blockquote-default {
        padding: 50px 40px;
    }

    .blockquote-default:before {
        width: 60px;
        height: 50px;
        top: -35px;
        background-size: 100%;
    }

    .guide-section .blog-content {
        height: 418.39px;
    }

    .table-default td, .table-default th {
        line-height: 21px;
        padding: 21px 0 21px 0px;
    }

    .carousel-control-prev {
        left: -30px;
    }

    .carousel-control-next {
        right: -30px;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 250px;
    }

    .background-feature-section [class^="background-feature"] .feature-name {
        font-size: 25px;
    }

    #header-logo-screen, #btn-banner-download-screen{
        display: none;
    }

}

@media (max-width:850px) {
    .banner-section {
        transition: all 0.5s;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width:768px) {
    header.show-in, footer.show-in {
        padding-top: 20px !important;
    }
    .feature-image-section{
        max-width: 90%;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width:767px) {
    .main-title {
        font-size: 28px;
    }

    .sub-title {
        font-size: 20px;
    }

    .btn-outline-default {
        font-size: 18px;
    }

    body, p {
        font-size: 12px;
    }

    .banner-section {
        padding-top: 100px;
        height: 1100px;
    }
    
    .banner-section .banner-title {
        margin-top: 540px;
    }

    .year-label {
        top: 585px;
    }
    
    .sub-title[class*="feature-number"] {
        padding-left: 110px;
        padding-right: 80px;
    }

    .sub-title[class*="feature-number"]:before {
        font-size: 86px;
    }

    .sub-title[class*="feature-number"]:after {
        width: 70px;
    }

    .sub-title.feature-number-3 {
        line-height: 26px;
    }

    [class^="map-point-"] > [class^="point-"] {
        width: 10px;
        height: 10px;
    }

    [class^="map-point-"] > [class^="point-top-"] {
        top: 30px;
    }

    [class^="map-point-"] > [class^="point-bottom-"] {
        top: -20px;
    }

    [class^="map-point-"] > .continent-name {
        padding: 5px 15px;
        font-size: 10px;
    }

    .map-point-the-middle-east {
        top: 39%;
        right: 32%;
    }

    .map-point-africa {
        right: 40%;
    }

    .map-point-asia-pacific {
        right: 9%;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 250px;
    }

    .blockquote-default {
        padding: 30px 40px;
    }

    .blockquote-default:before {
        width: 50px;
        height: 45px;
    }

    .guide-section .blog-content {
        height: 318.8px;
    }

    .table-default td, .table-default th {
        padding: 15px 0 15px 0px;
    }

    .guide-section .btn-default {
        padding: 10px 20px;
        font-size: 14px;
        line-height: 22px;
    }

    .guide-section .blog-content .blog-detail > .btn-default {
        padding: 10px 30px;
    }

    .guide-section [class*="-name"] {
        font-size: 15px;
    }

    .feature-image-section{
        max-width: 100%;
    }
    .btn-outline-collaps {
        max-width: 100%;
    }

    .blockquote-content-section{
        margin-left: 5%;
    }

    .blockquote-end-default:before {
        left:155px;
    }
}

@media (max-width:768px) {
    .form-section-right-bg{
        display:none;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width:576px) {
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width:575px) {
    header .pp-logo {
        height: 50px;
    }

    h4 {
        font-size: 22px;
    }

    .sub-title, h5 {
        font-size: 16px;
    }

    h6, .list-default .list-item {
        font-size: 18px;
    }

    .banner-section .banner-title {
        margin-top: 520px;
        padding-right: 70px;
    }

    .year-label {
        top: 605px;
    }
    
    .btn-outline-default {
        font-size: 15px;
        line-height: 40px;
    }

    .form-bar-section .form-section .form-group .label-default {
        font-size: 15px;
    }

    .sub-title[class*="feature-number"]:before {
        font-size: 60px;
    }

    .sub-title[class*="feature-number"] {
        padding-left: 75px;
        padding-right: 40px;
    }

    .sub-title[class*="feature-number"]:after {
        width: 30px;
    }

    [class^="icon-"] {
        width: 21px;
        height: 21px;
    }

    .background-feature-section {
        margin-right: 0px !important;
    }

    .aboutus-feature-section .images-section .images-shadow:after {
        width: 0;
        opacity: 0;
    }

    .nav-tab-default .nav-item:nth-child(odd) {
        width: calc(100% / 2 - 7.5px);
        margin-right: 15px;
    }

    .nav-tab-default .nav-item:nth-child(even) {
        width: calc(100% / 2 - 7.5px);
        margin-right: 0;
    }

    .background-feature-section [class^="background-feature"] {
        max-width: 250px;
    }

    .map-point-europe {
        top: 15%;
        left: 40%;
    }

    .table-two-column td, .table-two-column th {
        display: block;
    }

    .table-two-column td:last-child .table-default th {
        border-left: 1px solid #E6E6E6;
    }

    .blockquote-default {
        padding: 26px 25px;
    }

    .guide-section .blog-content,.guide-section .guide-content {
        min-height: 350px;
    }

    .chechkbox-default > span:first-child {
        width: 15px;
        height: 15px;
    }

    .chechkbox-default > span:first-child svg {
        width: 13px;
        height: 8px;
    }

    .carousel-control-prev {
        left: 0;
    }

    .carousel-control-next {
        right: 0;
    }

    .fixed-mobile-top .btn-default{
        padding:10px;
    }

    .guide-section .blog-content, .guide-section .blog-content:after, .guide-section .guide-content {
        box-shadow: none;
    }

}

@media (max-width:425px) {
    header .pp-logo {
        height: 45px;
    }

    .main-title {
        font-size: 21px;
    }

    .sub-title {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    h6, .list-default .list-item {
        font-size: 13px;
    }

    [class^="icon-"] {
        left: -8px;
    }
    
    .aboutus-section h5 {
        text-align: left;
    }
    .aboutus-section .bullet-pt {
        text-align: left;
    }

    .form-bar-section .form-section .btn-default {
        font-size: 14px;
    }

    [class^="map-point-"] > [class^="point-"] {
        width: 8px;
        height: 8px;
    }

    .map-point-the-americas {
        left: 6%;
    }

    .map-point-the-middle-east {
        right: 26%;
    }

    .sub-title[class*="feature-number"]:after {
        display: none;
    }

    .sub-title[class*="feature-number"]:before {
        font-size: 52px;
    }

    .sub-title[class*="feature-number"] {
        padding-left: 70px;
        padding-right: 25px;
    }

    .btn-outline-default {
        line-height: 20px;
        padding: 10px 20px 10px 40px;
    }

    .btn-outline-default:after {
        width: 7px;
        height: 9px;
    }

    .collaps-title{
        font-size: 14px;
    }

    .collaps-content{
        padding-left:0px;
    }

    .guide-content {
        margin: 10px 30px;
        padding-top: 5px;
    }

    .form-bar-section{
        min-height: 200px;
    }

    .fixed-mobile-top .btn-default{
        padding:10px 6px;
    }

    .carousel-inner {
        height: 380px;
    }
    .btn-primary.btn-default.form-download-but{
        height:60px;
        font-size: 20px;
        border-radius:18px;
    }

}

@media (max-width:360px) {
    header .pp-logo {
        height: 42px;
    }

    body, p {
        font-size: 13px;
    }

    .sub-title[class*="feature-number"] {
        padding-left: 80px;
        padding-right: 0;
    }

    .sub-title[class*="feature-number"]:before {
        font-size: 62px;
    }

    .map-point-europe {
        top: 9%;
    }

    .map-point-the-americas {
        left: 2%;
    }

    .map-point-asia-pacific {
        right: 5%;
    }

    .map-point-the-middle-east {
        top: 36%;
        right: 24%;
    }

    .map-point-africa {
        bottom: 4%;
        right: 37%;
    }

    [class^="map-point-"] > [class^="point-"] {
        width: 5px;
        height: 5px;
    }

    .guide-section .blog-content {
        min-height: 375px;
    }

}

@media (max-width:320px) {
    .banner-section .banner-title {
        font-size: 32px;
        line-height: 34px;
    }

}

@media (min-width:1441px) and (max-width:1679px) {
    .container {
        max-width: 1200px;
    }

    header .pp-logo, footer .pp-logo {
        margin-left: 20px;
    }

    .banner-section .col-12.col-md-5 {
        margin-left: 20px;
    }

    .guide-section .blog-content{
        min-height: 85%;
    }

}

@media (min-width:1200px) and (max-width:1440px) {
    header .pp-logo, footer .pp-logo {
        margin-left: 0px;
    }

    .banner-section .col-12.col-md-5 {
        margin-left: 20px;
    }

    .guide-section .blog-content{
        min-height: 83%;
    }

}

@media (min-width:992px) and (max-width:1199px) {
    .data-section .container-fluid {
        max-width: 960px;
        padding-left: 0;
        padding-right: 0;
    }

    .guide-section .blog-content{
        margin:0px;
    }

    .guide-section .blog-content{
        min-height: 84%;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .data-section .container-fluid {
        max-width: 720px;
        padding-left: 0;
        padding-right: 0;
    }

}

@media (min-width:576px) and (max-width:767px) {
    .data-section .container-fluid {
        max-width: 540px;
        padding-left: 0;
        padding-right: 0;
    }

}

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
}

@media (max-width:375px) {
}

/*
code by Iatek LLC 2018 - CC 2.0 License - Attribution required
code customized by Azmind.com
*/
@media (min-width:576px) and (max-width:991px) {

    /* Show 3rd slide on sm  if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}

@media (min-width:576px) {
    .carousel-item {
        margin-right: 0;
    }

    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*MD*/
@media (min-width:992px) {

    /* Show 4th slide on md  if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}