.Alla {background-color: #00775e;
    padding: 80px 50px 80px 50px;
    }
    .All1 {background-color: #00aa86;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    padding:50px 5px 50px 5px;
    }
    .All2 {background-image: url("http://www.quinl.com/CompanyImages/Images/2108/1627977233_46656.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }
    .All3 {background-image: url("http://www.quinl.com/CompanyImages/Images/2108/1627974845_91856.png");
    background-position: center;
    padding:40px 20px 0px 20px;
    background-size: cover;
    height: 250px;
    }
    .Bll {background: rgba(0,0,0,0.7);
    padding: 80px 50px 80px 50px;
    }
    .pic1{border: 3px solid #fff;}

    .A {color: #00775e;
    font-size: 50px;
    font-family: 'Kanit', sans-serif;
    font-weight: bold;
    padding:0px 10px 20px 10px;
    }
    .B {color: #00775e;
    font-size: 30px;
    font-family: 'Kanit', sans-serif;
    font-weight: bold;
    padding:0px 10px 5px 30px;
    }
    .B1 {color: #000000;
        font-size: 19px;
        text-shadow: 1px 1px 0 #ffffff;
        font-family: 'Kanit', sans-serif;
        padding: 10px 40px 0px 50px;
        letter-spacing: 1px;
    }
    .B11 {color: #000000;
    font-size: 19px;
    text-shadow: 1px 1px 0 #ffffff;
    font-family: 'Kanit', sans-serif;
    letter-spacing: 2px;
    padding: 10px 0 5px 30px;
    }
    .B2 {color:#fff;
    font-size: 23px;
    font-family: 'Kanit', sans-serif;
    padding:10px 0px 0px 0px;
    }
    .B3 {color:#fff;
    font-size: 23px;
    text-shadow: 1px 1px 0 #000;
    font-family: 'Kanit', sans-serif;
    padding:0px 0px 50px 0px;
    }
    .B3a {color:#fff;
    font-size: 80px;
    text-shadow: 1px 1px 0 #000;
    font-family: 'Kanit', sans-serif;
    padding:60px 0px 25px 0px;
    }
    .B3b {color:#fff;
    font-size: 30px;
    text-shadow: 1px 1px 0 #000;
    font-family: 'Kanit', sans-serif;
    padding:60px 0px 25px 0px;
    }
    .C1 {background: rgba(0,0,0,0.5);
    padding: 30px;
    margin: 20px;
    }

    .C2 {color: #ff8800;
    font-size: 30px;
    padding: 0 0 5px 0;
    font-family: 'Kanit', sans-serif;
    }

    .C3 {color: #f4f4fc;
    font-size: 16px;
    line-height: 30px;
    }

    .C4 img{width: 92%;
    margin: 20px 20px 20px 10px;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
    display: inline-block;
    }

    .C4 img:hover {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
    box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    -webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
    }
    .E2 {width: 65%;
    background: #2ec12f;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    }

    #E2 {color: #ffffff;
    font-size: 18px;
    padding:10px 10px 10px 10px;
    font-family: 'Pridi', serif;
    }

    .E2:hover{background: #00aa86;
    }
    .EE {
    width: 23%;
    background: #fff;
    padding: 5px 5px 5px 5px;
    margin: 10px 10px 10px 10px;
    text-align: center;
    display: inline-block;
    }

    .EE img{width: 100%;display: inline-block;
    }
    .Ea {position: relative;
    text-align: center;
    display: inline-block;
    }
    .Ea:hover .Ea-overlay {
            opacity: 1;
            
        }
        .Ea-overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0%;
            right: 0;
            height: 97%;
            width: 100%;
            opacity: 0;
    border-radius: 0%;
            transition: .5s ease;
            background: rgba(0, 0, 0, 0.54);
        }

        .Ea:hover .Ea-overlay {
            opacity: 1;
            
        }

        .A-img {display: inline-block;
    width: 100%;
    height: 375px;
    object-fit: cover;
    object-position: center;}

    @media only screen and (max-width: 900px) {
    .All1 {padding:20px;
    }
    .All {font-family: Athiti;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    padding:10px 10px 10px 10px;
    }
    .A {color: #00775e;
    font-size: 30px;
    font-family: 'Kanit', sans-serif;
    font-weight: bold;
    padding:0px 10px 20px 10px;
    }
    .B {color: #00775e;;
    font-size: 30px;
    font-family: 'Kanit', sans-serif;
    font-weight: bold;
    padding:0px 10px 0px 10px;
    }
    .B1 {color:#000000;
    font-size: 20px;
    text-shadow: 1px 1px 0 #ffffff;
    font-family: 'Kanit', sans-serif;
    padding:5px 20px 0px 10px;
    }
    .B11 {color: #000000;
    font-size: 18px;
    text-shadow: 1px 1px 0 #ffffff;
    font-family: 'Kanit', sans-serif;
    padding: 7px 0;
    text-indent: 5%;
    }
    .B2 {color:#fff;
    font-size: 23px;
    font-family: 'Kanit', sans-serif;
    padding:10px 0px 0px 0px;
    }
    .B3 {color:#fff;
    font-size: 23px;
    text-shadow: 1px 1px 0 #000;
    font-family: 'Kanit', sans-serif;
    padding:0px 0px 10px 0px;
    }
    .B3a {color:#fff;
    font-size: 80px;
    text-shadow: 1px 1px 0 #000;
    font-family: 'Kanit', sans-serif;
    padding:20px 0px 10px 0px;
    }
    .All2 {background-image: url("http://www.quinl.com/contentImages/images/2108/1627981629_85634.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }
    .E2 {width: 50%;
    background: #2ec12f;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    }

    #E2 {color: #ffffff;
    font-size: 15px;
    padding:10px 10px 10px 10px;
    font-family: 'Pridi', serif;
    }

    .E2:hover{background: #00aa86;
    }
    .A-img {height: auto;}
    }