@media only screen and (max-width: 810px) {

    body {font-size: 14px;}

    .welcome .txt h2 {font-size: 28px; margin-bottom: 28px;}

    .banSlider ul li .caption h2 {font-size: 24px;}

    .banSlider ul li .caption h1 {font-size: 32px;}

    .form h2 {font-size: 20px; padding: 40px 6px;}

    .form .container {padding: 24px 24px 24px calc(35px + 24px)}

    .form {width: 242px;}

    .courses h2, .whyChoose h2, .placement h2, .bod h2, .stuReview h2, .industrySpeak h2, .showreel h2 {font-size: 28px; margin-bottom: 28px;}

    .courses .list ul li h4 {font-size: 17px;}

    .courses .list ul li .info {padding: 6px;}

    .placement .list .box {width: calc(48% - 4px);}

    .placement .list .box:nth-child(3n+2) {margin: 0 0 32px;}

    .placement .list .box:nth-child(2n) {margin-left: 4%;}

    .stuReview .speak, .stuReview .by {font-size: 16px;}

    .indSpeak .box {width: 100%;}

    .indSpeak .box:nth-child(2) {margin-left: 0;}

}

@media only screen and (max-width: 680px) {

    .welcome .txt, .courseWrap .pic {width: 100%; margin-bottom: 20px;}

    .welcome .pic, .courseWrap .txt {width: 100%; margin: 0 ;}

    footer .pic {width: 128px;}

    footer .address {width: calc(100% - 128px - 8px - 20px); margin-left: 20px;}

    footer h4 {font-size: 20px; margin-bottom: 12px;}

    footer p {font-size: 12px; margin-bottom: 8px;}

    header {padding: 8px 0;}

    header .logo {width: 154px;}

    header .contact {width: calc(100% - 154px - 8px);}

    

    .form {position: relative; transform: none; width: 100%; margin: 0 auto;}

    .banSlider ul li .caption h2 {font-size: 18px;}

    .banSlider ul li .caption h1 {font-size: 24px;}

    .banSlider ul li {height: 300px;}

    .banSlider ul li img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: auto;}

    .form .container {padding: 0;}

    .form h2 {position: static; width: 100%; height: auto; padding: 8px; text-align: center; margin: 0; border: 0;}

    .form h2 br {display: none;}

    .form form {padding: 20px; border: 1px solid #fd2727;}

    

    .welcome, .courses, .whyChoose, .placement, .bod, .stuReview, .industrySpeak, .showreel {padding: 40px 0;}

    

    .courses .list ul {display: block;}

    .courses .list ul li, .courses .list ul li:nth-child(2) {width: 100%; margin: 0 0 20px;}

    .whyChoose .wrap {display: inline; margin-bottom: 0;}

    .whyChoose .box {width: calc(50% - 4% - 4px); margin-bottom: 12px; min-height: 132px;}

    .placement .list .box {width: calc(50% - 4px); padding: 0 8px;}

    .placement .list .box:nth-child(2n) {margin-left: 0;}

    .placement .list .box .img {width: 100%; display: block; margin-bottom: 4px;}

    .placement .list .box .txt {width: 100%; margin: 0; padding: 0;}

    .whyChoose .celebWrap .box {width: calc(50% - 4px); vertical-align: top; margin: 0;}

    .bod .box {padding: 0; width: calc(50% - 4px - 4%); margin-bottom: 20px;}

    .stuReview .user {width: 100%; text-align: center; margin-bottom: 12px;}

    .stuReview .user img {max-width: 136px;}

    .stuReview .speak {width: 100%; margin: 0;}

    .stuReview .speak, .stuReview .by {font-size: 14px;}

    .indSpeak .box, .indSpeak .box:nth-child(2) {width: calc(50% - 4px - 4%); margin: 0 2% 12px;}

    .indSpeak .box .user {/*width: calc(128px - 4px);*/ width: 100%;}

    .indSpeak .box .txt {/*width: calc(100% - 128px - 4px); padding: 0 12px;*/ width: 100%; padding: 12px; min-height: 200px;}

    .indSpeak .box .txt .speak {font-size: 12px; margin-bottom: 8px;}

}