.subBanner { width: 100%; height: 200px; background: url(../images/contact_b.jpg) ; background-repeat: no-repeat; background-size: cover; background-position: 100% 50%; }//end of subBanner .contactContainer { position: relative; width: 100%; >.contactInfo { position: absolute; top: 250px; right: 20px; width: 350px; height: 330px; background-color: #595959; z-index: 5000; >ul { padding: 20px; >li { width: 100%; margin: 20px 0; color: #fff; font-size: 13px; >a { color: #fff; } &:nth-child(1) { font-size: 20px; font-weight: 600; } &:nth-child(2) { line-height: 1.5em; font-size: 14px; } &:nth-child(3) { width: 80%; height: 35px; padding-left: 45px; line-height: 35px; background: url(../images/email_ico.png); border-spacing: 0 0; background-size: contain; background-repeat: no-repeat; } &:nth-child(4) { width: 80%; height: 35px; padding-left: 45px; line-height: 35px; background: url(../images/tel_ico.png); border-spacing: 0 0; background-size: contain; background-repeat: no-repeat; } &:nth-child(5) { width: 80%; height: 35px; padding-left: 45px; line-height: 35px; background: url(../images/print_ico.png); border-spacing: 0 0; background-size: contain; background-repeat: no-repeat; } } } }//end of contactInfo >p { position: relative; width: 1200px; margin: 80px auto 0; text-align: center; font-size: 23px; font-weight: 600; color: #000; text-transform: uppercase; &:after { position: absolute; bottom: -25px; left: 50%; width: 100px; margin-left : -50px; height: 5px; background-color: #000; content: ""; } } >.mapContainer { margin-top: 100px; } }//end of contactContainer @media screen and (max-width:768px) { .subBanner { width: 100%; height: 250px;// 350 background: url(../images/contact_1.jpg) ; background-repeat: no-repeat; background-size: cover; background-position: 100% 50%; }//end of subBanner .contactContainer { position: relative; width: 100%; >.contactInfo { position: inherit; top: 100px;// 250px right: 0px;//20px width: 100%;//350px height: 330px;//450px background-color: #595959; z-index: 5000; >ul { padding: 20px; >li { margin: 20px 0; color: #fff; >a { color: #fff; } &:nth-child(1) { font-size: 25px; font-weight: 600; } &:nth-child(2) { line-height: 1.5em; } &:nth-child(3) { width: 35px; height: 35px; padding-left: 45px; line-height: 35px; background: url(../images/email_ico.png); border-spacing: 0 0; background-size: contain; background-repeat: no-repeat; } &:nth-child(4) { width: 35px; height: 35px; padding-left: 45px; line-height: 35px; background: url(../images/tel_ico.png); border-spacing: 0 0; background-size: contain; background-repeat: no-repeat; } &:nth-child(5) { width: 35px; height: 35px; padding-left: 45px; line-height: 35px; background: url(../images/print_ico.png); border-spacing: 0 0; background-size: contain; background-repeat: no-repeat; } } } }//end of contactInfo >p { position: relative; width: 100%;//1200px margin: 80px auto 0; text-align: center; font-size: 23px; font-weight: 600; color: #000; text-transform: uppercase; &:after { position: absolute; bottom: -25px; left: 50%; width: 100px; margin-left : -50px; height: 3px; background-color: #000; content: ""; } } >.mapContainer { margin-top: 100px; } }//end of contactContainer .mapContainer { height: 400px; overflow: hidden; } }//media Query