html

/* RESET */
.red {
	color: #FF00FF;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,dl,dt,dd,ol,ul,li,
fieldset,form,label,input,button,legend,table,caption,tbody,tfoot,thead,tr,th,td{	margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 18px;font-family: inherit;vertical-align: top;
	color: #263238;}:focus{outline:0;}body{line-height:1;color:#000;background:#faf9f5;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}
html{ height: 100%; overflow-x: hidden;}
.main-wrapper {position: relative;animation: main-wrapper-a 3s ;}
@keyframes main-wrapper-a {0% {opacity: 0;} 100% {opacity: 1;}}

.preload {opacity: 1; animation: none !important;   -webkit-animation: none !important;  -moz-animation: none !important; -ms-animation: none !important;
  -o-animation: none !important;   animation-play-state: running !important;
}
.whitebkpreload.endwhitebkpreload {transform: translate(200%,0);}


body {overflow-x: hidden;font-family: 'Lato', sans-serif; position: relative; z-index: 0;}

.wrapper {overflow: hidden !important; background-color: #faf9f5; z-index: 1;}
.whitebk {position: relative;background-color: #faf9f5; z-index: 1; overflow: hidden; transform: translate3d(0,0,0);}
.curtain-l {opacity: .4;overflow: hidden;left: -20%;position: absolute; background: linear-gradient(to right, rgba(191,54,3,1), rgba(245,127,23,.4)); z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(-300%,0,0);
	   -ms-transform:  translate3d(-300%,0,0); transform:  translate3d(-300%,0,0);animation: curtain-l-a linear 3s ;}
@keyframes curtain-l-a {0% {transform:  translate3d(0,0,0);} 100% {transform: translate3d(-300%,0,0);}}
.curtain-r{opacity: .4;overflow: hidden;left: 50%;position: absolute; background: linear-gradient(to right, rgba(245,127,23,.4), rgba(191,54,3,1)); z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(300%,0,0);
	   -ms-transform:  translate3d(300%,0,0); transform:  translate3d(300%,0,0);animation: curtain-r-a linear 3s ;}
@keyframes curtain-r-a {0% {transform: translate3d(0,0,0);}  100% {transform:  translate3d(300%,0,0);}}

.only660, .only768, .only380 {display: none;}
.clearboth {clear:both;}
.spacer30 {height: 30px;}
.spacer40percent {margin-bottom: 4%;}
img {width: 100%; height: auto;}
.nobreak {white-space: nowrap;}
.nonmobilemenu {height: 100px; position: relative;}
.telmobile, .tablet-mob {display: none;}
[id^=drop] { display: none;}/*don't display checkbox for mobile menu*/
#menuwide{width: 100%;	background-color: #faf9f5; background: linear-gradient(to right, rgba(191,54,3,.6), rgba(191,54,3,.6));	position: fixed;height: 69px;top: 0px;z-index: 9999; max-width: 100%;  }
#menuline {width: 100%; height: auto; overflow: visible; position: relative; z-index: 999; max-width: 1920px;}
#logo {margin-left: 1.56255%; position: absolute; z-index: 99991;}
.logo {font-family: 'Baloo Bhaijaan', cursive;position: relative;font-size: 49px;line-height: 49px; color: #fff;
  background: linear-gradient(to right, #fff, #f3b79c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
#logo p {-webkit-margin-before: 0px;padding-bottom: 5px; margin-top: 10px;    color: #bf3603;}
.logo:hover {background: linear-gradient(to right, #f3b79c, #fff);
-webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

/*main menu*/
.menunav {float: left;text-align: right; }
.mainmenu-u {width: 100%;}
.mainmenu-u ul {margin: 0;	padding: 0;	list-style-type: none;}
.mainmenu-u > ul {width: calc(96.8749% + 10px);margin: 0 auto; padding-left: 1.56255%; list-style: none;}
.mainmenu-u > ul > li {display: inline-block;}
.mainmenu-u > ul > li > a {padding: 11px 10px 42px 10px;color: #fff;font-size: 30px; line-height: 30px;display: inline-block;}
.mainmenu-u > ul > li > a:hover {color: #673ab7;}


/*masthead*/
.masthead-img {width: 100%; height: 100%;position: relative;}
#masthead-menu-wide {background-color: #faf9f5;width: 100%;position: relative;	margin: 0px; z-index: 1;padding: 0%;font-size:0px; line-height: 0px; overflow: hidden;}
.m-img1, .m-img2 {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.m-filler {width: 100%; height: 100%; position: relative; opacity: 0;}
.m-img1 {animation: m-img1-a linear 14s infinite;}
@keyframes m-img1-a {0% {opacity: 1;} 46% {opacity: 1;} 50% {opacity: 0;}  96% {opacity: 0;} 100% {opacity: 1;}}
.m-img2 {transform: translate3d (-100%,0,0); animation: m-img2-a linear 14s infinite;}
@keyframes m-img2-a {0% {opacity: 0;} 46% {opacity: 0;} 50% {opacity: 1;} 96% {opacity: 1;} 100% {opacity: 0;}}
.masthead {height: auto; width: 100%;position: relative;}  
.masthead-bk  {line-height: 0px; position: absolute; padding: 0px;   
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.4),  rgba(255,255,255,.7), rgba(255,255,255,.8));	
z-index: 1;     left: 0px;  top: 0px;  width: 100%;  height: 100%;  margin: 0% !important; z-index: 2;}
.masthead-inner-h {width: 90%;position: absolute; top: 26%; right: 0%;  margin: 0 1.56255% 0 0; z-index: 10;}

.masthead-inner {width: 90%;position: absolute; top: 35%; right: 0%;  margin: 0 1.56255% 0 0; z-index: 10;}
.m-text {float: right;}
.masthead-text {font-family: 'Baloo Bhaijaan', cursive;font-size: 96px; line-height: 96px; color: #263238; position: relative;  right: 1.56255%; z-index: 3; text-align: center;}
.link-outer {position: relative; float: right; top: 60%; height:auto;  width: 100%; text-align: center; padding:  5% 0% 0% 0%; z-index: 4; }
.link-inner {margin: 10px 0 0px 0px;padding: 20px 0px;text-align: right !important; }
.masthead-link1, .masthead-link2 {margin-right: 6%;position: relative; border: #263238 1px solid; padding: 10px 20px 10px 20px; font-size: 40px; color: #263238; font-weight: 800;}
.masthead-link2 {margin-right: 0%;}
.masthead-link1:hover, .masthead-link2:hover {color: #fff;}
.masthead-link1:after, .masthead-link2:after {position: absolute;  content: ''; top:0;  left: 0; width: 0; height: 100%; background-color: white;
  transform-origin:left; transition:width 0.25s ease; z-index:-1;}
.masthead-link1:hover:after, .masthead-link2:hover:after {position: absolute; content: ''; top:0; left: 0; width: 100%; height: 100%; background-color: #673ab7;
  transform-origin:left; transition:width 0.25s ease; z-index:-1;}

/*top content*/
.topcontent {position: relative;background-color: #fff; background: linear-gradient(to right, #bf3603, #f57f17);
	width: 74%; margin: -5% 10% 0% 10%; padding: 3%; z-index: 112;}

/*main content*/
.content-wide{z-index: 2;width: 100%; background-color: #faf9f5; height: 100%; position: relative; padding: 4% 0% 0% 0%;}
.nobk { position: relative;	height:auto; margin-left: auto;  margin-right: auto; width: 96.8%; max-width: 1920px;}
.nobkpadding {position: relative; z-index: 9; padding: 10% 0% 10% 0%;margin-left: auto;  margin-right: auto; width: 96.8%; max-width: 1920px; }
.overlay {position: relative;background-color: #fff;width: 80%; margin: -5% 10% 0% 10%; padding: 3%; z-index: 112;}

/*testimonial*/
.testimonial-wide {margin: 4% 0% 0% 0%;background-color: #faf9f5; height: auto; width: 100%;position: relative; top: 0px; padding:0%; overflow:hidden; max-width: 100%;}  
.testimonial-bk1  {line-height: 0px; position: absolute; padding: 0px; 
    left: 0px;  top: 0px;  width: 100%;  height: 100%;  margin: 0% !important; z-index: 1;
  background: linear-gradient(to right, rgba(191,54,3,1), rgba(245,127,23,.4)); animation: testimonial-bk1 linear 8s infinite;}
.testimonial-bk2  {line-height: 0px; position: absolute; padding: 0px;  
    left: 0px;  top: 0px;  width: 100%;  height: 100%;  margin: 0% !important; z-index: 1;
  background: linear-gradient(to right, rgba(245,127,23,.4), rgba(191,54,3,1)); animation: testimonial-bk2 linear 8s infinite;}
  
@keyframes testimonial-bk1{0% {opacity: 0;} 50% {opacity: 1;}  100% {opacity: 0;}}
@keyframes testimonial-bk2{0% {opacity: 1;} 50% {opacity: 0} 100% {opacity: 1;}}
.handshake {z-index: 2; width: 40%;opacity: .4;right: -10%; bottom: 0; position: absolute; vertical-align: middle;}  
.quoteleft {z-index: 3;position: relative;float: left; width: 5%; font-family: 'Baloo Bhaijaan', cursive; color: #e64a19; font-size: 90px; line-height: 90px; font-weight: bold;}  
.quoteright {z-index: 3;position: relative;float: right; text-align: right;width: 5%; font-family: 'Baloo Bhaijaan', cursive; color: #e64a19;  font-size: 90px; line-height: 90px; font-weight: bold;}  
.quotemiddle {z-index: 3;position: relative;float: left; width: 90%;}
.testimonial {z-index: 3; padding-bottom: 20px !important; font-style: italic; font-size: 38px; line-height: 58px; color: #fff; text-indent: 0%; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; }
.testimonial-person {z-index: 3;font-size: 26px; color: #fff; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important;}

/*customers*/
.customer-left {float: left; width: 31.333%; padding: 0% 1% 0% 1%;}
.customer-middle {float: left; padding: 0% 3% 0% 0%;width: calc(30.333% - 8px); border-right: solid 4px #bdbdbd; border-left: solid 4px #bdbdbd;}
.customer-right {float: left; width: 31.333%; padding: 0% 1% 0% 1%;}
.customer-logo-1 {float: left; width: 50%;text-align: center;}
.customer-logo-2 {float: left; width: 50%;   text-align: center;}
.customer-logo-3 {float: left; width: 50%; text-align: center;}
.customer-logo-4 {float: left; width: 50%;   text-align: center;}
.customer-logo-5 {float: left; width: 50%; text-align: center;}
.customer-logo-6 {float: left; width: 50%;    text-align: center;}

h1 { padding-bottom: 3%; font-weight: bold;font-size: 70px; line-height: 80px; text-align: center;color: #fff;z-index: 5;  }
.h1small{font-size: 30px; line-height: 30px; color: #fff; z-index: 5; padding-bottom: 3%; text-align: center; }
.with-s {padding-bottom: 0px !important;}
h2 {font-family: 'Baloo Bhaijaan', cursive;font-size: 59px; line-height: 66px;text-align: left; padding-bottom: 6%;padding-top: 1.7%;}
h3 {font-family: 'Baloo Bhaijaan', cursive; text-align: center; font-size: 69px; line-height: 69px; color: #263238; font-weight: bold; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {padding: 2% 0% 6% 0%; text-align: center; font-size: 46px; line-height: 46px; color: #757575;}
h5 {color: #fff; font-size: 46px; line-height: 46px; padding-bottom: 8%;}
h6 {color: #fff; font-size: 30px; line-height: 46px; padding-bottom: 4%;}
.content-wide ul {list-style: disc; margin-left: 5%;}
#footer-wide p, #footer-wide a {color: #fff; font-size: 20px; line-height: 20px; padding-bottom: 8%;}
#footer-wide a:hover {color: #673ab7;}
.strong {font-weight: 700;}
.content-wide a {font-style: italic; padding-bottom: 0px;}
.content-wide a:hover {color: #673ab7;}

.p-large {text-align: center;font-size: 50px; line-height: 70px;  padding-bottom: 2.5%; font-weight: 700;width: 80%; margin-left: 10%;}
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 30px; line-height: 50px; padding-bottom: 2.5%;}
strong, .bold, .f-strong  {font-weight: 700;}

a, a img {text-decoration: none; border:0;}
/*footer*/
#footer-wide {margin-top: 3%; background: linear-gradient(to right, rgba(191,54,3,1), rgba(245,127,23,.8));width: 100%;position: relative; z-index: 1;padding: 3% 0% 3% 0%;font-size:0px; line-height: 0px; overflow: hidden;}
.footer-left {float: left; width: 31.333%; padding: 0% 2% 0% 0%; }
.footer-middle {float: left; width: calc(29.333% - 8px); padding: 0% 2% 0% 2%; border-right: solid 4px #bdbdbd; border-left: solid 4px #bdbdbd;}
.footer-right {float: left; width: 31.333%; padding: 0% 0% 0% 2%;}
.footer-middle-l {float: left; width: 46%; padding: 0% 1.5% 0% 0%; }
.footer-middle-r {float: left; width: 46%; padding: 0% 0% 0% 1.5%;}
.copyright {text-align: center; margin-top: 2%; padding-bottom: 0% !important;}


.cookie-outer{margin-top: 20px;z-index: 9999;position: relative; text-align: center; color: #fff; padding:  10px 0% 20px 0%;}
.cookie-inner { margin: 10px 0px 0px 0px;font-size: 40px; color: #fff; text-align: center !important; font-weight: 800;}
.cookie-text {padding: 10px 30px 10px 30px;border: 1px solid #fff;}
.cookie-text .cookie-policy {visibility: hidden;   width: 80%; margin-left: 10%; margin-top: -10%;
    background: linear-gradient(to right, rgba(191,54,3,1), rgba(245,127,23,1));     color:#fff;    text-align: center;   border-radius: 6px;   padding: 5px 0;
    position: absolute; top: 0px; left: 0%;   z-index: 1;}
.cookie-text:hover .cookie-policy {visibility: visible; padding: 2%;}

/*contact*/
.div-l {width: 49%; margin-right: 1%; float: left; margin-top: 8%;}
.div-r {width: 49%; margin-left: 1%; float: right; margin-top: 8%;}

/*hidden footer*/
.hidden-footer {padding: 2% 0%;overflow:hidden; max-width: 100%;position: relative; z-index: -9; width: 100%;background: linear-gradient(to right, rgba(191,54,3,.8), rgba(245,127,23,.5));}
.hidden-footer-inner {position: fixed;  bottom: 0; left: 0;  width: 100%;}
.hidden-footer-inner-rel {position: relative; width: 60%; margin-left: 20%; overflow: hidden;background: linear-gradient(to right, rgba(191,54,3,.9), rgba(245,127,23,.5));}
.bk-image1ft {width: 100%;z-index: 7;position: relative;}
.bk-imagerel {position: relative; opacity: 0; width: 60%;}


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

.masthead-inner-h {top: 23%;}	

}

/* -----------small pcs----------- */ 
@media
	screen and (max-width:1400px) {
.masthead-text {font-size: 80px; line-height: 80px;}
.masthead-link1, .masthead-link2  {padding: 10px 20px 10px 20px; font-size: 30px;}
h1 {padding-bottom: 3%; font-size: 60px; line-height: 70px;}
.h1small{font-size: 30px; line-height: 30px; padding-bottom: 3%;}
h2 {font-size: 54px; line-height: 60px;}
h3 {font-size: 50px; line-height: 50px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 46px; line-height: 46px;}
h5 {font-size: 46px; line-height: 46px; padding-bottom: 8%;}
h6 {font-size: 25px; line-height: 25px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.strong {font-weight: 700;}
.content-wide a:hover {background-color: #ffe28c;}
.p-large {font-size: 40px; line-height: 60px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 30px; line-height: 50px; padding-bottom: 2.5%;}
.testimonial {font-size: 30px; line-height: 50px;}
.testimonial-person {font-size: 22px;}
.logo {font-size: 40px; line-height: 40px;}
.mainmenu-u > ul > li > a {padding: 11px 10px 42px 10px; font-size: 25px; line-height: 30px;}
}

/* -----------small pcs----------- */ 
@media
	screen and (max-width:1200px) {
.masthead-inner {top: 35%;}		
.masthead-text {font-size: 65px; line-height: 70px;}
.masthead-link1, .masthead-link2 {padding: 10px 20px 10px 20px; font-size: 20px;}
h1 {padding-bottom: 3%; font-size: 50px; line-height: 60px; font-weight: normal;}
.h1small{font-size: 30px; line-height: 30px; padding-bottom: 3%;}
h2 {font-size: 44px; line-height: 44px;}
h3 {font-size: 40px; line-height: 40px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 40px; line-height: 66px;}
h5 {font-size: 36px; line-height: 46px; padding-bottom: 8%;}
h6 {font-size: 25px; line-height: 25px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.strong {font-weight: 700;}
.content-wide a:hover {background-color: #ffe28c;}
.p-large {font-size: 30px; line-height: 50px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 25px; line-height: 35px; padding-bottom: 2.5%;}
.testimonial {font-size: 28px; line-height: 44px;}
.testimonial-person {font-size: 22px;}
.logo {font-size: 40px; line-height: 40px;}
.mainmenu-u > ul > li > a {padding: 11px 10px 42px 10px; font-size: 20px; line-height: 30px;}
}

@media
	screen and (max-width:1080px) {
.masthead-inner-h {top: 28%;}		
.masthead-text {font-size: 62px; line-height: 68px;}
.masthead-inner-h .masthead-text {font-size: 68px; line-height: 74px;}
.masthead-link1, .masthead-link2 {padding: 10px 20px 10px 20px; font-size: 24px;}
}



/* -----------small pcs----------- */ 
@media
	screen and (max-width:960px) {
.masthead-inner-h {top: 31%;}
.masthead-inner {top: 40%;}	
	
.masthead-text, .masthead-inner-h .masthead-text {font-size: 52px; line-height: 55px;}
.masthead-link1, .masthead-link2 {padding: 10px 20px 10px 20px; font-size: 20px;}
h1 {padding-bottom: 3%; font-size: 40px; line-height: 50px; font-weight: normal;}
.h1small{font-size: 26px; line-height: 30px; padding-bottom: 3%;}
h2 {font-size: 36px; line-height: 36px;}
h3 {font-size: 40px; line-height: 40px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 25px; line-height: 56px;}
h5 {font-size: 36px; line-height: 46px; padding-bottom: 8%;}
h6 {font-size: 25px; line-height: 25px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.strong {font-weight: 700;}
.content-wide a:hover {background-color: #ffe28c;}
.p-large {font-size: 25px; line-height: 40px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 20px; line-height: 30px; padding-bottom: 2.5%;}
.testimonial {font-size: 24px; line-height: 34px;}
.testimonial-person {font-size: 20px;}
.logo {font-size: 34px; line-height: 40px;}
.mainmenu-u > ul > li > a {padding: 11px 8px 42px 8px; font-size: 16px; line-height: 30px;}
.customer-logo-1, .customer-logo-2, .customer-logo-3, .customer-logo-4, .customer-logo-5, .customer-logo-6 {width: 80%; margin-left: 10%;; text-align: center;}
.customer-middle {  padding: 0% 1% 0% 1%; width: calc(31.333% - 8px);}
.quoteleft, .quoteright {width: 10%;}
.quotemiddle {width: 80%;}
}



/* -----------Tablet View----------- */ 
@media
	screen and (max-width:768px) {
.only768 {display: block;}	
.pc-only {display: none;}
#menuwide{width: 100%;/*position: absolute;*/ height: 60px;}
#menuline {width: 100%; margin: 0%;}	
/*#logo {width: 80%;}*/
.nonmobilemenu {display: none;}
.tablet-mob {display: block;}
.toggle {display: block;  color: #263238; text-decoration: none;  border: none; z-index: 999999;}
.toggle + a {display: none !important;}/* use label for mobile menus*/
/*top menu lines*/
.menulines{display:inline-block;    z-index: 9999; width: 40px; height: 45px; position: relative; -webkit-transform: rotate(0deg);
 transform: rotate(0deg);  -webkit-transition: .5s ease-in-out;  transition: .5s ease-in-out; cursor: pointer;}
.menulines .line1, .menulines .line1b, .menulines .line2, .menulines .line2b, .menulines .line3, .menulines .line3b {
  display: block; position: absolute; height: 5px; width: 50%; background: #fff; opacity: 1;
  -webkit-transform: rotate(0deg); transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;transition: .25s ease-in-out;}
.menulines .line1, .menulines .line1b, .menulines .line2b, .menulines .line3b  {display: block; position: absolute; height: 2px; width: 50%; background: #fff; opacity: 1;
  -webkit-transform: rotate(0deg);  transform: rotate(0deg);
   transition: .25s ease-in-out;}
 .menulines .line2  {display: block; position: absolute; height: 2px; width: 30%; margin-left: 20%; background: #fff; opacity: 1;
  -webkit-transform: rotate(0deg);  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.menulines .line3 {display: block; position: absolute; height: 2px; width: 10%; margin-left: 40%; background: #fff; opacity: 1;
  -webkit-transform: rotate(0deg); transform: rotate(0deg);
   transition: .25s ease-in-out;}.menulines .line1b, .menulines .line2b, .menulines .line3b {left: 50%; border-radius: 0 7px 7px 0;}
.menulines .line1, .menulines .line2, .menulines .line3 {left:0px; border-radius: 7px 0 0 7px;}
.menulines .line1, .menulines .line1b {top: 10px;}
.menulines .line2, .menulines .line2b {top: 22px;}
.menulines .line3, .menulines .line3b {top: 34px;}
.menulines:hover [class^=line] {background-color: #673ab7;}
.menulines:hover .open[class^=line] {background-color: #fff;}
.menulines .open.line1, .menulines .open.line3b {z-index: 9999;background: #673ab7; -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
.menulines .open.line1b,.menulines .open.line3 {z-index: 9999;background: #673ab7; -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);}
.menulines .open.line1 {left: 9px; top: 17px;}
.menulines .open.line1b {left: 50%; top: 17px;}
.menulines .open.line2 {left: -50%; opacity: 0;background: #673ab7; }
.menulines .open.line2b {left: 100%; opacity: 0; background: #673ab7; }
.menulines .open.line3 {margin-left: 0%; width: 50%;left: 8px; top: 29px;background: #673ab7; }
.menulines .open.line3b {left: calc(50% + 1px); top: 29px;background: #673ab7; }
.mainmenu {text-align: right;font-size: 20px; line-height: 40px; float: right; width: 50px; height: 42px; padding-top: 8px;}
[id^=drop] + ul {z-index: 999;position: absolute;text-align: left;/*width: 100%;*/visibility: hidden; transition: visibility 0s;transform: translate3d(0,0,0);}/* main menu before opening*/
[id^=drop]:checked + ul {background: linear-gradient(to right, #bf3603, #f57f17); display: block; opacity: 1; visibility: visible; overflow: visible; animation: ul-a 21.2s; padding-bottom: 2000px;}/*open main menu*/
@keyframes ul-a {0% {opacity: 0;} 1% {opacity: 1;} 100% {opacity: 1;}}
.mainmenu-u > ul {padding: 20% 20% 0% 20%; width: 60%;}
.mainmenu-u {overflow: hidden; width: 97%; padding: 0 3% 0% 0%;}
.mainmenu-u > ul > li {display: block; }
.menubk {position: absolute; height: 100vh; width: 100%; display: none;overflow: hidden;}/*so doesn't block drop downs for tabs*/
.menubk1, .menubk2 {visibility: hidden; width: 100%; height: 100vh; left: 0%; position: absolute; opacity: .1;}
.menubk1{overflow: hidden;opacity: .6;left: -33%;position: absolute; background-color: #263238; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(20deg) translate3d(-300%,0,0);
	   -ms-transform: skew(19deg) translate3d(-300%,0,0); transform: skew(19deg) translate3d(-300%,0,0);}
.menubk2 {overflow: hidden;opacity: .6;left: 63%;position: absolute; background-color: #a32323; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(20deg) translate3d(300%,0,0);
	   -ms-transform: skew(19deg) translate3d(300%,0,0); transform: skew(19deg) translate3d(300%,0,0);}
[id^=drop]:checked + ul ~ div ~ div {visibility: visible;}	
[id^=drop]:checked + ul ~ .menubk  {display: block;}	
.menunav > li > div{top: 0px; left: 0%; padding-bottom: 0%;}/*stops overwriting next option*/
.mainmenu-u > ul > li > a {padding: 11px 8px 32px 8px; font-size: 30px; line-height: 30px;}
#logo {margin-left: 3%;}
.nobk, .nobkpadding {width: 94%;}
.bk-image1 {margin-bottom: 0px;}
.ourwork-link, .ourwork-link:hover {font-size: 22px;font-weight: 600;}
.link-outer {top: 60%; padding: 3% 0% 0% 0%;}
.masthead-inner {top: 40%; margin-right: 3%;}
.masthead-inner-h {margin-right: 3%; top: 28%;}
.masthead-text {font-size: 42px; line-height: 48px;}
.masthead-inner-h .masthead-text {font-size: 48px; line-height: 52px;}

.masthead-link1, .masthead-link2 {padding: 10px 10px 10px 10px; font-size: 18px;}
h1 {padding-bottom: 3%; font-size: 34px; line-height: 40px; font-weight: normal;}
.h1small{font-size: 25px; line-height: 30px; padding-bottom: 3%;}
h2 {font-size: 36px; line-height: 36px;}
h3 {font-size: 33px; line-height: 33px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 30px; line-height: 46px;}
h5 {font-size: 30px; line-height: 36px; padding-bottom: 8%;}
h6 {font-size: 22px; line-height: 22px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.strong {font-weight: 700;}
.content-wide a:hover {background-color: #ffe28c;}
.p-large {font-size: 25px; line-height: 40px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 20px; line-height: 30px; padding-bottom: 2.5%;}
.testimonial {font-size: 24px; line-height: 34px;}
.testimonial-person {font-size: 20px;}
.div-l {width: 100%; margin-right: 0%; float: left; margin-top: 12%;}
.div-r {width: 100%; margin-left: 0%; float: right; margin-top: 12%;}
#form1 {width: 74%; margin:0 10% 5% 10%;}

}/*end 768 tablet */

/* -----------small tablet----------- */ 
@media
	screen and (max-width:670px) 
	{
#menuwide {height: 50px;}
.mainmenu {padding-top: 2px;}	
.mainmenu-u > ul > li > a {padding: 11px 8px 32px 8px; font-size: 20px; line-height: 30px;}
.logo {font-size: 24px;  line-height: 30px;}	
.masthead-inner-h .masthead-text {font-size: 40px; line-height: 50px; padding: 0;}
.masthead-text {font-size: 32px; line-height: 48px; padding: 0;}
.masthead-link1, .masthead-link2 {padding: 8px; font-size: 18px;}
h1 {padding-bottom: 3%; font-size: 28px; line-height: 34px; font-weight: normal;}
.h1small{font-size: 20px; line-height: 25px; padding-bottom: 3%;}
h2 {font-size: 36px; line-height: 36px;}
h3 {font-size: 33px; line-height; 33px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 20px; line-height: 36px;}
h5 {font-size: 22px; line-height: 26px; padding-bottom: 8%;}
h6 {font-size: 20px; line-height: 22px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.strong {font-weight: 700;}
.content-wide a:hover {background-color: #ffe28c;}
.p-large {font-size: 22px; line-height: 34px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 18px; line-height: 26px; padding-bottom: 2.5%;}
.testimonial {font-size: 24px; line-height: 30px;}
.testimonial-person {font-size: 20px; line-height: 24px;}
.handshake {width: 50%;  right: -10%;}
.link-outer {padding:  0%;}
.cookie-policy{margin-top: -20%; font-size: 11px !important; line-height: 11px !important; }
.cookie-text .cookie-policy{ width: 100%; margin-left: 0; margin-right: 0;}

 }   /* end 670 */

@media
	screen and (max-width:600px) 
	{
.masthead-inner-h {top: 34%;}	
.masthead-inner {top: 45%;}
.masthead-text, .masthead-inner-h .masthead-text {font-size: 30px; line-height: 32px; padding: 0;}
.masthead-link1, .masthead-link2 {padding: 8px; font-size: 16px;}
h1 {font-size: 24px; line-height: 28px;}
.h1small{font-size: 18px; line-height: 22px; padding-bottom: 3%;}
h2 {font-size: 36px; line-height: 36px;}
h3 {font-size: 33px; line-height: 33px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 30px; line-height: 36px;}
h5 {font-size: 30px; line-height: 36px; padding-bottom: 8%;}
h6 {font-size: 24px; line-height: 24px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.strong {font-weight: 700;}
.content-wide a:hover {background-color: #ffe28c;}
.p-large {font-size: 22px; line-height: 30px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 18px; line-height: 26px; padding-bottom: 2.5%;}
.testimonial {font-size: 24px; line-height: 30px;}
.testimonial-person {font-size: 20px; line-height: 24px;}
.quoteleft, .quoteright {font-size: 70px; line-height: 70px;}
.handshake {width: 150%;  right: -90%;}
.customer-left, .customer-middle, .customer-right, .footer-left, .footer-middle, .footer-right {width: 100%; padding: 2% 0% 3% 0%;}
.customer-left, .customer-middle, .footer-left, .footer-middle {border-bottom:  solid 4px #bdbdbd;}
.customer-middle, .footer-middle {border-left: none; border-right: none;}
.customer-logo-1, .customer-logo-2, .customer-logo-3, .customer-logo-4, .customer-logo-5, .customer-logo-6 {
    width: 50%;  margin-left: 0%;}
}


/* -----------Mobile View----------- */ 
@media
	screen and (max-width:480px) 
	{
#menuwide {height: 37px;}	
.mainmenu-u > ul > li > a {padding: 11px 8px 32px 8px; font-size: 20px; line-height: 30px;}
.logo {font-size: 24px;  line-height: 30px;}
#logo p { margin-top: 2px;}	
.menulines .line1, .menulines .line1b {top: 5px;}
.menulines .line2, .menulines .line2b {top: 15px;}
.menulines .line3, .menulines .line3b {top: 25px;}
.menulines {height: 35px;}
.menulines .open.line1 {top: 10px;}
.menulines .open.line1b {top: 10px;}
.menulines .open.line3 {top: 22px;}
.menulines .open.line3b {top: 22px;}
.masthead-link1, .masthead-link2 {padding: 6px; font-size: 14px;}
.masthead-text {font-size: 24px; line-height: 28px;}

h1 {font-size: 26px; line-height: 28px;}
.h1small{font-size: 16px; line-height: 18px; padding-bottom: 3%;}
h2 {font-size: 30px; line-height: 30px;}
h3 {font-size: 33px; line-height: 33px; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {font-size: 30px; line-height: 36px;}
h5 {font-size: 30px; line-height: 36px; padding-bottom: 8%;}
h6 {font-size: 24px; line-height: 24px;}
#footer-wide p, #footer-wide a {font-size: 16px; line-height: 16px; padding-bottom: 6%;}
.p-large {font-size: 18px; line-height: 24px;  padding-bottom: 2.5%; }
.p-centre, p, .strong, .listitem, .bold, .content-wide a {font-size: 16px; line-height: 22px; padding-bottom: 2.5%;}
.testimonial {font-size: 20px; line-height: 25px;}
.testimonial-person {font-size: 16px; line-height: 20px;}

 }   /* end 480 */


/* -----------Mobile View----------- */ 
@media
	screen and (max-width:380px) 
	{
.masthead-inner-h {top: 28%;}	
.link-outer {top: 0%; padding: 3% 0% 0% 0%;}
.link-inner {padding: 0;}
.masthead-inner-h .masthead-text {font-size: 22px; line-height: 24px;}
.masthead-text {font-size: 20px; line-height: 23px;}
.masthead-link1 {float: right; margin-bottom: 2%;padding: 5px; font-size: 13px; line-height: 13px; margin-right: 0%;}
.masthead-link2 { clear:both; float: right;padding: 5px; font-size: 13px;line-height: 13px;}
.p-large {font-size: 16px; line-height: 20px;}
.cookie-text .cookie-policy{margin-top: -40%;}

}


/* -----------Mobile View----------- */ 
@media
	screen and (max-width:320px) 
	{
.mainmenu-u > ul > li > a {padding: 11px 8px 32px 8px; font-size: 18px; line-height: 30px;}
.masthead-inner-h .masthead-text {font-size: 18px; line-height: 20px;}

.masthead-text {font-size: 18px; line-height: 20px;}
.masthead-link1 {float: right; margin-bottom: 3%;padding: 3px; font-size: 11px; line-height: 11px; }
.masthead-link2 { clear:both; float: right;padding: 3px; font-size: 11px;line-height: 11px; }
.link-inner {margin: 10px 0 0px 0px;padding: 0px 0px;}
.link-outer {padding: 0%;}
	
 }   /* end 480 */

@media
	screen and (max-height:380px) 
	{
#menuwide{width: 100%;position: absolute; height: 60px;}
}

<style type="text/css">
</style>