a, a:active, a:focus { outline: 0; } 
*:focus {  outline: none}
a { text-decoration: none; transition: all .3s ease-out; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out }
.clearfix:after, .clearfix:before { content: " "; visibility: hidden; display: block; height: 0; clear: both; }
body { margin: 0; padding: 0; font-family: 'noto_sansregular'; overflow-x: hidden;}
html { overflow-x: hidden;}
select::-ms-expand { display: none;}
ul{list-style-type: none; margin: 0; padding: 0;}

@font-face {
    font-family: 'noto_sansregular';
    src: url('../fonts/notosans-regular-webfont.woff2') format('woff2'),
         url('../fonts/notosans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/NotoSans-Bold.woff2') format('woff2'),
        url('../fonts/NotoSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.desk { display: block; }
.mob { display: none; }

.header { display: flex;align-items: center;justify-content: space-between; padding: 10px; max-width: 1300px; margin: 0 auto; background-color: #ffffff; border-radius: 5px;position: absolute; top: 10px; left: 0; right: 0; z-index: 2;}
.logo > img {width: 150px;}

.nav { display: flex; align-items: center;}
.nav > ul { display: flex; align-items: center; justify-content: space-between;}
.nav > ul > li {font-family: 'noto_sansregular'; font-size: 18px; color: #2b2b2b; margin-right: 50px;}
/*.nav > ul > li:last-child { margin-right: 0;}*/
.nav > ul > li > a { color: #2b2b2b;}
.headerForm { position: relative;}
.gitFormWrap {display: none; position: absolute; right: -10px; top: 80px; width: 350px; background-color: #fafaf9; padding: 50px; border-radius: 15px;}
.gitFormWrap:after {content: "";position: absolute;bottom: 100%;right: 20px;margin-left: -10px;border-width: 16px 12px 16px 12px;border-style: solid;border-color: transparent transparent #ffffff transparent;}
.gitFormWrap ul > li { margin-bottom: 30px; }
.gitFormWrap ul > li > input {font-family: 'noto_sansregular'; font-size: 16px; color: #000000; background-color: transparent; width: 100%; border: none; border-bottom: 1px solid #b9b9b9; padding: 5px 10px 10px 5px; }
.gitFormWrap ul > li > select {font-family: 'noto_sansregular'; font-size: 16px; color: #000000; background-color: transparent; width: 100%; border: none; border-bottom: 1px solid #b9b9b9; padding: 5px 10px 10px 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/down_arrow.png) no-repeat right 15px;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #000000;}
::-moz-placeholder { /* Firefox 19+ */color: #000000;}
:-ms-input-placeholder { /* IE 10+ */color: #000000;}
:-moz-placeholder { /* Firefox 18- */color: #000000;}
.error {font-size: 12px; display: none; color: #ea2a22;}
.gitFormWrap form { margin-bottom: 0; }
.formBtn {display: flex; position: absolute; margin: 0; bottom: -60px; left: 50%; transform: translateX(-50%); margin: 0;}
/*.formBtn > a {font-family: 'noto_sansregular'; font-size: 20px; color: #ffffff; background-color: #ea2a22; padding: 20px 50px; display: inline-block; border-radius: 5px; -webkit-box-shadow: 0px 0px 50px 0px rgba(167,167,167,1);*/
.formBtn > button {font-family: 'noto_sansregular'; font-size: 20px; color: #ffffff; background-color: #ea2a22; padding: 20px 50px; display: inline-block; border-radius: 5px; -webkit-box-shadow: 0px 0px 50px 0px rgba(167,167,167,1); -moz-box-shadow: 0px 0px 50px 0px rgba(167,167,167,1); box-shadow: 0px 0px 50px 0px rgba(167,167,167,1); border: none;}
.gitbtn {font-family: 'noto_sansregular'; font-size: 18px; color: #ffffff; background-color: #ea2a22; padding: 10px 15px; border-radius: 5px; display: flex; align-items: center;cursor: pointer;}
.gitbtn > span > img { vertical-align: middle; margin-left: 15px;}
.formSubmit { display: none; position: absolute;
    right: -100px;
    bottom: 30px;}
.formSubmit > img { width: 60px; }

.toggle-mnu {display: none;}


.spotlight { position: relative; }
.spotlight > img { width: 100%; }
.spotlightCopy { position: absolute; left: 0; bottom: 150px; max-width: 800px; background-color: #2c2c2c; padding: 40px 125px 40px 100px; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: space-between;}
.spotlightCopy > h1 {font-family: 'Noto Sans'; font-size: 36px; line-height: 38px;letter-spacing: 1; margin: 0; color: #ffffff; text-transform: uppercase; }
.spotlightCopy > .spotBtn {font-family: 'Noto Sans'; font-size: 22px; line-height: 22px; color: #ffffff; position: absolute; right: -70px; background-color: #ea2a22; padding: 25px; border-radius: 5px;}
.spotlightCopy > .spotBtn > a { color: #ffffff;}

.packshot { position: relative; }
.packshot > img { width: 100%; }
.packshot > h2 {font-family: 'Noto Sans'; font-size: 32px; line-height: 34px; color: #ffffff;  position: absolute; top: 50px; left: 0; right: 0;max-width: 1000px; text-align: center; width: 100%; margin: 0 auto;}


.benefitOne {position: absolute; top: 25%; left: 23%; text-align: right; z-index: 1;}
.benefitTwo {position: absolute; top: 25%; right: 23%; z-index: 1;}
.benefitThree {position: absolute; top: 48%; left: 16%; text-align: right; z-index: 1;}
.benefitFour {position: absolute; top: 48%; right: 16%; z-index: 1;}
.benefitFive {position: absolute; top: 72%; left: 23%; text-align: right; z-index: 1;}
.benefitSix {position: absolute; top: 72%; right: 12%; z-index: 1;}

.benefitNumber {font-family: 'Noto Sans'; font-size: 126px; line-height: 100px; color: #cd1f2c; opacity: 1;}
.benefitNumber > span { opacity: 0.4; z-index: -1;}
.benefitCopy {font-family: 'noto_sansregular'; font-size:32px; line-height: 30px; color: #ffffff; z-index: 1; position: relative; margin-right: 20px;margin-top: -18px;}
.benefitTwo .benefitCopy, .benefitFour .benefitCopy, .benefitSix .benefitCopy {margin-left: 10px; margin-right: 0;}

.leafWrap {opacity: 1; transition: all 0.2s ease-in-out;}
.leafOne {position: absolute; top: 18%; left: 0;}
.leafTwo {position: absolute; top: 5%; right: 7%;}
.leafThree {position: absolute; top: 51%; left: 26%;}
.leafFour {position: absolute; bottom: -47px; left: 0;}
.leafFive {position: absolute; bottom: 9%; left: 46%;}
.leafSix {position: absolute; bottom: 15%; right: 0;}
/*#benefitWrap { overflow-x: hidden; overflow-y: overlay;}*/

.aboutUsWrap { max-width: 1200px; width: 100%; margin: 80px auto; text-align: center; }
.aboutUsWrap .aboutUsTitle {font-family: 'Noto Sans'; font-size: 40px; line-height: 42px; color: #272727; }
.aboutUsWrap p {font-family: 'noto_sansregular'; font-size: 22px; line-height: 32px; color: #6b6b6b;}

.vapour { background-color: #ea2a22; padding: 80px 0; }
.vapourWrap { max-width: 1200px; width: 100%; margin: 0 auto; text-align: center;}
.vapourWrap .vapourTitle {font-family: 'Noto Sans'; font-size: 40px; line-height: 42px; color: #ffffff; text-transform: uppercase;}
.vapourWrap  p {font-family: 'noto_sansregular'; font-size: 22px; line-height: 32px; color: #ffffff;}
.vapourWrap ul {display: flex;align-items: flex-start;justify-content: center; max-width: 1200px; width: 100%; margin: 0 auto;}
.vapourWrap ul > li {margin-right: 20px;}
.vapourWrap ul > li:last-child {margin-right: 0;}
.vapourWrap ul > li > img { width: 100%; }
.vapourWrap ul > li > p { margin: 0; margin-top: 10px; }

.pyriofenone { background-color: #f7f7f7; padding: 80px 0; }
.pyriofenoneWrap { max-width: 1200px; width: 100%; margin: 0 auto; text-align: center;}
.pyriofenoneWrap .pyriofenoneTitle {font-family: 'Noto Sans'; font-size: 40px; line-height: 42px; color: #272727; text-transform: uppercase;}
.pyriofenoneWrap  p {font-family: 'Noto Sans'; font-size: 22px; line-height: 32px; color: #6b6b6b;}
.pyriofenoneWrap ul {display: flex;align-items: center;justify-content: center;}
.pyriofenoneWrap ul > li {margin-right: 20px;}
.pyriofenoneWrap ul > li:last-child {margin-right: 0;}
.pyriofenoneWrap ul > li > img { width: 100%; }
.pyriofenoneWrap ul > li > p {font-family: 'Noto Sans'; font-size: 22px; line-height: 32px; color: #272727;}

.application { padding: 80px 0;}
.applicationWrap { text-align: center; }
.applicationWrap .applicationTitle {font-family: 'Noto Sans'; font-size: 40px; line-height: 42px; color: #272727; text-transform: uppercase;}
.applicationWrap p {font-family: 'Noto Sans'; font-size: 22px; line-height: 32px; color: #ea2a22; position: relative; text-transform: uppercase;border-bottom: 3px solid #ea2a22; display: inline-block;}
.applicationWrap p:after {box-sizing: border-box;content: "";position: absolute; bottom: -10px; left: 46%;height: 15px;width: 15px;border-style: solid;border-color: #ea2a22;border-width: 0px 3px 3px 0px;transform: rotate(45deg);transition: border-width 150ms ease-in-out;background-color: #ffffff;}
.applicationCopy { max-width: 1200px; width: 100%; margin: 20 auto 0 auto; padding: 40px 0; display: flex; align-items: flex-start; background-color: #ffffff; border-radius: 15px;  -webkit-box-shadow: 0px 0px 50px 0px rgba(167,167,167,1); -moz-box-shadow: 0px 0px 50px 0px rgba(167,167,167,1);
box-shadow: 0px 0px 50px 0px rgba(167,167,167,1);}
.applicationDetail { margin-left: 50px; }
.applicationDetail  p {font-family: 'Noto Sans'; font-size: 22px; line-height: 32px; color: #272727; margin-bottom: 30px; margin-top: 0;}
.applicationDetail  p > span { padding-right: 20px;}
.applicationDetail ol { list-style-type: none; padding: 0; margin: 0; }
.applicationDetail ol > li { background: url(../images/bullet_circle.png) left 0px top 8px no-repeat; padding-left: 28px;font-family: 'noto_sansregular'; font-size: 20px; line-height: 28px; color: #6b6b6b; margin-bottom: 20px;}
.applicationDetail ol > li:last-child { margin-bottom: 45px; }

.footer { background-color: #000000; padding: 30px; display: flex; align-items: center; justify-content: center;}
.footer .webLink {font-family: 'noto_sansregular'; font-size: 18px; line-height: 20px; color: #e02935;}
.footer .webLink > a { color: #e02935;}
.footer .webLink > a:hover { color: #ffffff;}
.footer ul { display: flex; align-items: center;}
.footer .footerLinks ul > li { font-family: 'noto_sansregular'; font-size: 18px; line-height: 20px; color: #ffffff; margin-right: 25px; padding-right: 25px; border-right: 1px solid #fff;}
.footer .footerLinks ul > li:last-child {margin-right: 0; padding-right: 0; border-right: none;}
.footer .footerLinks ul > li > a { color: #ffffff;}
.footer .socialIconLinks ul > li { margin-right: 10px; }
.footer .socialIconLinks ul > li:last-child { margin-right: 0; }


@media screen and (max-width:1400px) {
	.benefitOne {left: 19%;}
	.benefitTwo {right: 19%;}
	.benefitThree {left: 14%}
	.benefitFour {right: 14%;}
	.benefitFive {left: 19%;}
	.benefitSix {right: 6%;}
	.benefitNumber {font-size: 106px; line-height: 85px;}
	.benefitCopy { font-size: 30px; line-height: 28px; margin-right: 15px;}

    .leafTwo {right: 4%;}
    .leafFour {bottom: -38px;}
    .leafFour > img {width: 220px;}
    .leafFive {bottom: 7%;}
    .pyriofenoneDetail2 > p { margin-bottom: 0; }
	
}
@media screen and (max-width:1280px) {
    .spotlightCopy {padding: 40px 115px 40px 70px;}
    .spotlightCopy > h1 {font-size: 34px; line-height: 36px;}
    .gitFormWrap {right: 0; padding: 35px;}
    .leafTwo {right: 3%; top: 7%;}
    .leafThree {left: 28%;}
    .leafThree > img {width: 130px;}
}
@media screen and (max-width:1200px) {
	.header {width: 92%;}
	.gitFormWrap {width: 320px; padding: 30px;}
	.formBtn > button {padding: 20px 40px;}
	.spotlightCopy {bottom: 80px; padding: 30px 100px 30px 60px;}
	
	.benefitThree {left: 14%}
	.benefitFour {right: 14%;}
	.benefitNumber { font-size: 100px; line-height: 80px; }
	.benefitCopy { font-size: 25px; line-height: 23px; margin-right: 10px;}
	.leafTwo {right: 0%; top: 18%;}
    .leafTwo > img { width: 190px; }
	.leafFour > img { width: 170px; }
	.aboutUsWrap, .vapourWrap, .pyriofenoneWrap, .applicationCopy { width: 90%; margin: 60px auto;}

    .footer { padding: 20px; }
    .footer .webLink, .footer .footerLinks ul > li { font-size: 15px; }
    .footer .footerLinks ul > li { margin-right: 12px; padding-right: 12px; }
	
}
@media screen and (max-width:1024px) {
    .nav > ul > li {margin-right: 30px; }
    .spotlightCopy {padding: 30px 90px 30px 40px;}
    .spotlightCopy > h1 {font-size: 28px; line-height: 32px;}
    .spotlightCopy > .spotBtn {font-size: 20px; line-height: 20px; padding: 20px;}
    .gitFormWrap {width: 290px; padding: 20px;right: -10px;}
    .formBtn > button {padding: 15px 30px;}
    .aboutUsWrap, .vapourWrap, .applicationCopy { margin: 60px auto;}
    .vapourWrap, .pyriofenoneWrap { margin: 30px auto;}
    .vapour, .pyriofenone, .application {padding: 30px 0;}
    .leafThree {left: 27%;}
    .leafThree > img { width: 120px; }
    .leafFour {bottom: -30px;}
	.leafFive {bottom: 3%;left: 45%;} 
    .leafSix {bottom: 9%;} 
    
    .packshot > h2 { top: 25px; }
    .benefitNumber { font-size: 85px; line-height: 75px;}  
    .benefitCopy {font-size: 20px; line-height: 19px;}
       
}

@media screen and (max-width:991px) {	
    .desk { display: none; }
    .mob { display: block; }
    .nav > ul > li {margin-right: 20px; }
    .spotlightCopy { bottom: 40px; padding: 20px 100px 20px 40px; }
    .spotlightCopy > h1 {font-size: 30px;}
    .spotlightCopy > .spotBtn {font-size: 20px; padding: 20px;}
	.vapourWrap ul > li > p { font-size: 18px; line-height: 22px; }
	.pyriofenoneWrap ul > li > p { font-size: 18px; line-height: 22px; }
	.applicationCopy {display: block; padding-top: 0; border-radius: 30px;}
    .applicationImg img { width: 100%;}
    .applicationDetail { margin-left: 20px;  margin-top: 30px;}
    .leafTwo {top: 16%;}
    .leafTwo > img { width: 140px; }    
    .leafFour {bottom: -32px;}
    .leafFour > img { width: 180px;}

    .aboutUsWrap, .vapourWrap, .applicationCopy { margin: 50px auto;}
    .vapourWrap, .pyriofenoneWrap { margin: 25px auto;}
    .vapour, .pyriofenone, .application {padding: 25px 0;}
    .logo > img {width: 130px;}
    
}

@media screen and (max-width:768px) {
    .header {width: 100%; top: 0; position: relative; padding: 10px 0;}
    .logo { padding-left: 20px;}
    .nav { display: block; position: fixed; right: 0; margin-right: -100%; max-width: 220px; background-color: #f3f3f3; padding: 25px; padding-top: 70px; top: 0; transition: all 0.8s;}
    .nav.active { margin-right: 0%; }
    .nav > ul {display: block;}
    .nav > ul > li {margin-right: 0; margin-bottom: 12px;}
    .toggle-mnu {display: block;width: 28px;height: 28px; padding-right: 20px;/*margin-top: 14px;*/}
    .toggle-mnu span:after, .toggle-mnu span:before {content: "";position: absolute;left: 0;top: 9px;}
    .toggle-mnu span:after {top: 18px;}
    .toggle-mnu span {position: relative;display: block;}
    .toggle-mnu span, .toggle-mnu span:after, .toggle-mnu span:before {width: 100%;height: 3px;background-color: #6a6a6a;transition: all 0.3s;backface-visibility: hidden;border-radius: 2px;}
    .toggle-mnu.on span {background-color: transparent;}
    .toggle-mnu.on span:before {transform: rotate(45deg) translate(-1px, 0px);}
    .toggle-mnu.on span:after {transform: rotate(-45deg) translate(6px, -7px);}

    .benefitOne {left: 25%; top: 49%;}
    .benefitTwo {right: 25%; top: 54%;}
    .benefitThree {left: 27%; top: 60%;}
    .benefitFour {right: 27%; top: 68%;}
    .benefitFive {left: 24%; top: 75%;}
    .benefitSix {right: 6%; top: 82%;}
    .benefitNumber {font-size: 106px; line-height: 85px;}
    .benefitCopy { font-size: 27px; line-height: 27px; margin-right: 10px;}

    .leafThree {left: 1%;}
    .leafFive {bottom: 60%;}
    .leafSix {bottom: 35%;}

    .footer {padding-bottom: 50px; justify-content: center; position: relative;}
    .footer .webLink {margin-right: 40px;}
    .footerLinks {position: absolute; bottom: 18px; }

}
@media screen and (max-width:767px) {
    .logo > img {width: 100px;}
    .nav {padding: 50px 20px 10px 20px;}
    .nav > ul > li { font-size: 15px; }
    .gitbtn { font-size: 15px; padding: 7px 12px;justify-content: center;}
    .gitbtn > span > img {width: 22px;}
    .gitFormWrap {width: 280px; padding: 15px; top: 62px;}
    .gitFormWrap ul > li { margin-bottom: 20px;}
    .gitFormWrap ul > li > input {font-size: 14px; padding: 5px 8px 8px 0;}    
    .formBtn > button { font-size: 16px;padding: 10px 30px;}

    .spotlightCopy {border-radius: 5px; right: 0; max-width: 360px; width: 100%; margin: 0 auto; text-align: center; bottom: 60px; padding: 20px 10px 50px 10px; }
    .spotlightCopy > h1 { font-size: 18px; line-height: 26px; width: 100%;}
    .spotlightCopy > .spotBtn { right: 0; left: 0; bottom: -30px; max-width: 100px; width: 100%; margin: 0 auto; text-align: center; font-size: 16px; padding: 12px;}

    .vapourWrap, .applicationCopy { margin: 40px auto;}
    .aboutUsWrap { margin: 20px auto 40px auto;}
    .vapourWrap, .pyriofenoneWrap { margin: 20px auto;}
    .vapour, .pyriofenone {padding: 20px 0;}
    .aboutUsWrap .aboutUsTitle, .vapourWrap .vapourTitle, .pyriofenoneWrap .pyriofenoneTitle, .applicationWrap .applicationTitle {font-size: 24px; line-height: 28px;}
    .aboutUsWrap p, .vapourWrap p, .pyriofenoneWrap p, .applicationWrap p, .applicationDetail p {font-size: 15px; line-height: 22px;}
    .vapourWrap ul {display: block;}
    .vapourWrap ul > li {    margin-right: 0px;  margin-bottom: 20px;}

    .packshot > h2 {top: 20px; font-size: 22px; line-height: 25px; width: 90%; margin: 0 auto;}
    .benefitOne { top: 45%;}
    .benefitTwo { top: 50%;}
    .benefitThree { top: 57%;}
    .benefitFour { top: 65%;}
    .benefitFive { top: 72%;}
    .benefitSix {right: 9%; top: 80%;}
    .benefitNumber { font-size: 90px;line-height: 78px;}
    .benefitCopy { font-size: 20px; line-height: 20px;}

    .leafThree {left: 1%;}
    .leafFive {bottom: 60%;}
    .leafSix {bottom: 35%;}

    .pyriofenoneWrap ul { display: block; }
    .pyriofenoneWrap ul > li {margin-right: 0px;}
    .pyriofenoneDetail2 > ul { display: flex; }
    .pyriofenoneDetail2 > ul > li {margin-right: 20px;}

    .applicationWrap p {padding-bottom: 4px;}
    .applicationDetail p {margin-bottom: 15px;}
    .applicationDetail ol > li {font-size: 14px; line-height: 18px; margin-bottom: 15px;}
    .applicationDetail ol > li:last-child { margin-bottom: 25px;}
    .applicationCopy {box-shadow: 0px 10px 25px 0px rgba(167,167,167,1); -webkit-box-shadow: 0px 10px 25px 0px rgba(167,167,167,1);-moz-box-shadow: 0px 10px 25px 0px rgba(167,167,167,1);}
    .applicationWrap p:after {left: 44%;}

    .footer {padding: 10px; padding-bottom: 40px;}
    .footer .webLink {margin-right: 20px; font-size: 14px;}
    .footer .socialIconLinks ul > li {margin-right: 8px;}
    .footer .footerLinks ul > li { font-size: 12px; margin-right: 10px; padding-right: 10px;}

    .formSubmit { right: -80px; bottom: 20px;}
    .formSubmit > img { width: 45px;}

    .formBtn { position: relative; bottom: 0; left: 0; transform: none; margin: 0 auto; right: 0;}
    .gitFormWrap ul > li.formBtn { margin-bottom: 10px; }
}

@media screen and (max-width:639px) {
    .packshot > h2 {top: 20px; font-size: 20px; line-height: 24px;}
    .benefitOne {left: 20%; top: 45%;}
    .benefitTwo {right: 20%; top: 50%;}
    .benefitThree {left: 25%; top: 57%;}
    .benefitFour {right: 25%; top: 65%;}
    .benefitFive {left: 21%; top: 72%;}
    .benefitSix {right: 4%; top: 80%;}
    .benefitNumber { font-size: 70px;line-height: 62px;}
    .benefitCopy { font-size: 16px; line-height: 16px;}
    .pyriofenoneWrap ul > li > p, .pyriofenoneWrap p { height: 30px; }
    .pyriofenoneWrap p, .pyriofenoneWrap ul > li > p {font-size: 12px; line-height: 15px;}
    .packshotWrap { padding-bottom: 22px; }
}

@media screen and (max-width:480px) {
    .logo > img {width: 90px;}
    .packshot > h2 {top: 12px; font-size: 17px; line-height: 22px;}
    .benefitOne {left: 19%; top: 42%;}
    .benefitTwo {right: 20%; top: 48%;}
    .benefitThree {left: 22%; top: 55%;}
    .benefitFour {right: 24%; top: 65%;}
    .benefitFive {left: 16%; top: 72%;}
    .benefitSix {right: 1%; top: 80%;}
    .benefitTwo .benefitCopy, .benefitFour .benefitCopy, .benefitSix .benefitCopy { margin-left: 0px; margin-right: 0;}
    .spotlightCopy { max-width: 320px; }
    
    .leafThree > img { width: 80px;}
    .leafOne > img { width: 70px;}
    .leafTwo > img { width: 100px; }
    .leafFour > img { width: 130px;}
    .leafFive {bottom: 58%;}
    .leafFive  > img { width: 85px;}
    .leafFour { bottom: -20px;}
    .leafSix > img { width: 110px;}

    
    .applicationCopy {margin: 20px auto;}
    .footer .footerLinks ul > li { margin-right: 7px; padding-right: 7px;}

}
@media screen and (max-width:375px) {
    .footer .footerLinks ul > li { font-size: 11px;}
    .footer .footerLinks ul > li { margin-right: 5px; padding-right: 5px;}
}
@media screen and (max-width:360px) {
    .spotlightCopy { max-width: 280px; padding: 15px 5px 40px 5px;}
    .spotlightCopy > .spotBtn {font-size: 14px; padding: 8px;}
    .packshot > h2 {top: 10px; width: 94%;}
    .gitFormWrap {width: 260px; padding: 20px;}

}
@media screen and (max-width:320px) {
    .spotlightCopy { max-width: 260px; }
    .spotlightCopy > h1 { font-size: 15px; line-height: 24px;}
    .packshot > h2 {font-size: 15px; line-height: 20px;}

    .footer .webLink {margin-right: 10px; font-size: 14px;}
    .footer .socialIconLinks ul > li {margin-right: 3px;}
    .footer .footerLinks ul > li { font-size: 9px; }

}