@import "https://fonts.googleapis.com/css?family=Nunito|ABeeZee|Raleway";

.pchide {
    display: none
}

.mhide {
    display: block
}

@media(max-width:1000px) {
    .pchide {
        display: block
    }

    .mhide {
        display: none
    }
}

#mainWrite {
    padding-top: 62px;
    font-family: 'Nunito', sans-serif
}

.content {
    padding-top: 0
}

@media (min-width:992px) {
    #mainWrite {
        padding-top: 0
    }

    .content {
        padding-top: 100px
    }
}

@media (min-width:1171px) {
    .content {
        padding-top: 60px
    }
}

#mainWrite section:not(:last-of-type) {
    margin: 0 auto 80px;
    position: relative
}

footer {
    margin: 0
}

#section1 .pchide {
    display: none
}

#section1 .mhide {
    display: block
}

#section1 img {
    width: 100%
}

#section1 .myslider .group {
    position: absolute
}

#section1 .myslider:nth-of-type(1) .group {
    top: 12%;
    left: 5%;
    width: 35%
}

#section1 .myslider:nth-of-type(4) .group {
    top: 12%;
    left: 5%;
    width: 35%
}

#section1 .myslider:nth-of-type(2) .group {
    top: 66%;
    right: 10%;
}

#section1 .myslider .group a {
    padding: 5px 25px;
    color: black !important
}

#section1 .myslider:nth-of-type(1) .group p {
    font-size: 30px
}

#section1 .myslider:nth-of-type(4) .group p {
    font-size: 30px
}

#section1 .slick-dots {
    bottom: 25px
}

#section1 .slick-dots li.slick-active button:before {
    color: #f48127
}

#section1 .slick-dots li button:before {
    opacity: 1;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px
}

@media(max-width:1200px) {
    #section1 .myslider:nth-of-type(1) .group p {
        font-size: 20px
    }

    #section1 .myslider:nth-of-type(4) .group p {
        font-size: 20px
    }

    #section1 .myslider:nth-of-type(2) .group {
        right: 8%;
    }
}

@media(max-width:1000px) {
    #section1 .pchide {
        display: block
    }

    #section1 .mhide {
        display: none
    }

    #section1 .myslider .group a {
        font-size: 20px
    }

    #section1 .myslider:nth-of-type(1) .group {
        top: 5%;
        left: 0;
        width: 80%;
        margin: 0 10%
    }

    #section1 .myslider:nth-of-type(1) .group p {
        font-size: 30px
    }
    #section1 .myslider:nth-of-type(4) .group {
        width: 80%;top: 15%;    
    }
    #section1 .myslider:nth-of-type(4) .group p {
        font-size: 30px;
    }

    #section1 .myslider:nth-of-type(2) .group {
        display: none
    }
}

@media(max-width:750px) {
    #section1 .myslider:nth-of-type(1) .group {
        top: 8%;
        left: 0;
        width: 80%;
        margin: 0 5%
    }

    #section1 .myslider:nth-of-type(1) .group p {
        font-size: 23px;
        margin: 0
    }

    #section1 .myslider:nth-of-type(4) .group p {
        font-size: 23px;
        margin: 0
    }
}

@media(max-width:500px) {
    #section1 .myslider:nth-of-type(1) .group {
        top: 5%
    }

/*
    #section1 .myslider:nth-of-type(4) .group {
        top: 5%
    }
*/

    #section1 .myslider .group a {
        font-size: 13px
    }

    #section1 .myslider:nth-of-type(1) .group p {
        font-size: 13px;
        margin: 0
    }

    #section1 .myslider:nth-of-type(4) .group p {
        font-size: 15px;
        margin: 0
    }
}

.content .w3-container {
    padding: 0
}

#section2 .pchide .w3-button .fa-caret-up {
    display: none
}

#section2 h1,
#section3 h1,
#section4 h1 {
    font-family: 'Nunito', sans-serif
}

@media(max-width:600px) {

    #section2 h1,
    #section3 h1 {
        font-size: 30px
    }
}

#section2 .w3-row {
    margin: 0
}

#section2 .w3-row .w3-quarter {
    position: relative;
    width: 21%;
    margin: 5% 1.5%;
    overflow: hidden
}

#section2 .w3-row .w3-quarter > a .title {
    margin: 0;
    font-size: 20px;
    opacity: 1;
    transform: scale(1, 1);
    transition: .5s
}

#section2 .w3-row .w3-quarter .mask {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 10% 8%;
    opacity: 0;
    transform: scale(2, 2);
    transition: .8s cubic-bezier(0.165, 0.84, 0.44, 1)
}

#section2 .w3-row .w3-quarter > a > .mask h2 {
    color: #fff;
    font-size: 18px
}

#section2 .w3-row .w3-quarter > a > .mask p {
    color: #fff;
    font-size: 12px;
    text-align: left;
    font-family: 'Nunito', sans-serif
}

#section2 .w3-row .w3-quarter img {
    width: 100%;
    max-width: 280px;
    transform: scale(.9, .9);
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1)
}

#section2 .button {
    margin: 5% 0
}

#section2 .button a {
    padding: .5% 3%;
    margin: 0 1%
}

#section2 .button a:first-of-type {
    border: 1px solid #eb751a;
    color: #eb751a
}

#section2 .button a:last-of-type {
    background-color: #eb751a;
    color: #fff
}

@media(max-width:1200px) {
    #section2 .w3-row {
        width: 90%;
        margin: 0 5%
    }

    #section2 .w3-row .w3-quarter {
        width: 46%;
        margin: 5% 2%
    }

    #section2 .w3-row .w3-quarter > a .title {
        font-size: 17px
    }
}

@media(min-width:1000px) {
    #section2 .button a:first-of-type:hover {
        background-color: #eb751a !important;
        color: #fff !important
    }

    #section2 .button a:last-of-type:hover {
        background-color: #fff !important;
        border: 1px solid #eb751a;
        color: #eb751a !important
    }

    #section2 .w3-row .w3-quarter:hover .title {
        opacity: 0;
        text-shadow: 0 0 4px #7c7c7c;
        transform: scale(2, 2)
    }

    #section2 .w3-row .w3-quarter:hover img {
        transform: scale(1.1, 1.1);
        opacity: .3
    }

    #section2 .w3-row .w3-quarter:hover .mask {
        opacity: 1;
        transform: scale(1, 1);
        z-index: 1
    }
}

#section3,
#section4 {
    background-color: #f5f5f5;
    padding-bottom: 2.5%
}

#section3 h1,
#section4 h1 {
    margin: 2% 0
}

#section3 .w3-row {
    width: 90%;
    margin: 4% auto
}

#section3 .w3-row .w3-half {
    width: 46%;
    margin: 0 2%;
    transition: .5s;
    border: #fff
}

#section3 .w3-row .w3-half .imgWrapper,
#section3 .w3-row .w3-half article {
    display: inline-block;
    vertical-align: middle
}

#section3 .w3-row .w3-half .imgWrapper img {
    max-width: 85px
}

#section3 .w3-row .w3-half .imgWrapper {
    width: 19%
}

#section3 .w3-row .w3-half article {
    width: 80%
}

#section3 .w3-row .w3-half article h2 {
    color: #eb751a;
    font-size: 20px
}

@media(max-width:1200px) {

    #section3 .w3-row .w3-half .imgWrapper,
    #section3 .w3-row .w3-half article {
        display: block;
        margin: 0 auto;
        width: 100%
    }

    #section3 .w3-row .w3-half article h2,
    #section3 .w3-row .w3-half article p {
        text-align: center
    }

    #section3 .w3-row .w3-half article h2 {
        font-size: 17px
    }

    #section3 .w3-row .w3-half article p {
        font-size: 15px
    }
}

@media(max-width:999px) {
    #section3 h1 {
        margin: 5% 0 2%
    }

    #section3 .w3-row {
        margin: 2% 5%
    }

    #section3 .w3-row .w3-half {
        width: 96%;
        margin: 2%
    }

    #section3 .w3-row .w3-half .imgWrapper,
    #section3 .w3-row .w3-half article {
        display: inline-block;
        vertical-align: middle
    }

    #section3 .w3-row .w3-half .imgWrapper {
        width: 19%
    }

    #section3 .w3-row .w3-half .imgWrapper img {
        width: 100%
    }

    #section3 .w3-row .w3-half article {
        width: 79%
    }

    #section3 .w3-row .w3-half article h2,
    #section3 .w3-row .w3-half article p {
        text-align: left
    }

    #section3 .w3-row .w3-half article h2 {
        font-size: 17px
    }

    #section3 .w3-row .w3-half article p {
        font-size: 15px
    }
}

@media(max-width:600px) {
    #section3 .w3-row .w3-half {
        width: 96%;
        margin: 5% 2%
    }

    #section3 .w3-row .w3-half article h2 {
        font-size: 13px;
        margin: 0
    }

    #section3 .w3-row .w3-half article p {
        font-size: 12px;
        margin: 0
    }
}

#section2 .pchide {
    width: 90%;
    margin: 0 5%
}

#section2 .pchide .productM .w3-button {
    padding: 1% 0;
    position: relative;
    font-family: 'ABeeZee', sans-serif;
    font-weight: 700;
    font-size: 18px
}

#section2 .pchide .productM .w3-button:hover {
    background-color: transparent !important
}

#section2 .pchide .productM {
    margin: 2% 0
}

#section2 .pchide .productM:not(:last-of-type) {
    border-bottom: 1px solid #eaeaea
}

#section2 .pchide .productM .w3-button span {
    position: absolute;
    right: 5%;
    top: 5%
}

#section2 .pchide .productM .pContainer p {
    font-family: 'Raleway', sans-serif;
    padding-right: 5%;
    font-size: 15px;
    margin: 1% 0
}

#section2 .pchide .productM .pContainer p span {
    font-size: 13px;
    color: #eb751a
}

@media(max-width:600px) {
    #section2 .pchide .productM .w3-button {
        font-size: 16px;
        margin: 2% 0
    }

    #section2 .pchide .productM .pContainer p {
        font-size: 12px
    }
}

.w3-card {
    transition: .5s
}

#section4 .w3-row .w3-third {
    padding: 0 2%
}

#section4 .w3-row .w3-third .imgWrapper {
    /*    width: 60%;*/
    margin: 3% auto;
    text-align: center
}

#section4 .w3-row .w3-third .imgWrapper img,
#section4 .w3-row .w3-third .imgWrapper h3 {
    display: inline-block;
        vertical-align: bottom
}
#section4 .w3-row .w3-third article img{width: 100%;max-width: 280px}
@media(max-width:999px){
    #section4 .w3-row .w3-third .imgWrapper h3 {font-size: 18px;}
    #section4 .w3-row .w3-third .imgWrapper img{width: 20%;}
}
#section4 .w3-row .w3-third:first-of-type .imgWrapper img {}

#section4 .w3-row .w3-third article {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 30px;
    margin: 3% 0
}

#section4 .w3-row .w3-third:first-of-type article h4:first-of-type {
    text-align: left;
    color: #eb751a;
    font-size: 15px
}

#section4 .w3-row .w3-third:first-of-type article p {
    font-size: 18px;
    margin: 0
}

#section4 .w3-row .w3-third article h4 {
    text-align: right;
    color: #eb751a;
    font-size: 13px
}

#section4 .w3-row .w3-third article h3 {
    color: #d84848;
    font-size: 15px
}

#section4 .w3-row .w3-third article p {
    font-size: 12px
}

@media(max-width:1200px) {
    #section4 .w3-row .w3-third {
        padding: 0 2%
    }
}

@media(min-width:1000px) {
    #section4 .w3-row .w3-third article:hover {
        box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.16)
    }
}

@media(max-width:700px) {
    #section4 .w3-row .w3-third {
        width: 90%;
        margin: 0 5%
    }
    
    #section4 .w3-row .w3-third .imgWrapper h3 {font-size: 20px;}
    #section4 .w3-row .w3-third .imgWrapper img{width: 10%;}
}