html

/* RESET */
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: #212121;}:focus{outline:0;}body{line-height:1;color:#000;background:#faf9f5;}ol,ul{list-style:none;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}
html{ height: 100%; overflow-x: hidden;}
body {overflow-x: hidden;font-family: 'Open Sans', 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);}

.preload * {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation: none !important;
  opacity: 0 !important;
}



.blackbk {overflow: hidden;opacity: .9;left: -50%;position: absolute; background-color: #212121; z-index: 99999; width: 100%; height: 100vh;-webkit-transform: skew(35deg) translate3d(-200%,0,0);
	   -ms-transform: skew(35deg) translate3d(-200%,0,0); transform: skew(35deg) translate3d(-200%,0,0);animation: blackbk-a linear 2s .0001s;}
@keyframes blackbk-a {0% {transform:  skew(35deg) translate3d(0,0,0);} 10% {transform:  skew(35deg) translate3d(0,0,0);} 100% {transform: skew(35deg) translate3d(-200%,0,0);}}

.redbk {overflow: hidden;opacity: .9;left: 50%;position: absolute; background-color: #a32323; z-index: 99999; width: 100%; height: 100vh;-webkit-transform: skew(35deg) translate3d(200%,0,0);
	   -ms-transform: skew(35deg) translate3d(200%,0,0); transform: skew(35deg) translate3d(200%,0,0);animation: redbk-a linear 2s .0001s;}
@keyframes redbk-a {0% {transform: skew(35deg) translate3d(0,0,0);} 10% {transform:  skew(35deg) translate3d(0,0,0);} 100% {transform: skew(35deg) translate3d(300%,0,0);}}

.blackbk-i {overflow: hidden;opacity: .1;left: -20%;position: absolute; background-color: #212121; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(-300%,0,0);
	   -ms-transform: skew(35deg) translate3d(-300%,0,0); transform: skew(35deg) translate3d(-300%,0,0);animation: blackbk-i-a linear 3s .0001s;}
@keyframes blackbk-i-a {0% {transform: skew(35deg) translate3d(0,0,0); opacity: .1;} 50% {opacity: .05;} 100% {transform: skew(35deg) translate3d(-300%,0,0); opacity: .05;}}
.redbk-i {overflow: hidden;opacity: .1;left: 50%;position: absolute; background-color: #a32323; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(300%,0,0);
	   -ms-transform: skew(35deg) translate3d(300%,0,0); transform: skew(35deg) translate3d(300%,0,0);animation: redbk-i-a linear 3s .0001s;}
@keyframes redbk-i-a {0% {transform: skew(35deg) translate3d(0,0,0); opacity: .1;} 50% {opacity: .05;}  100% {transform: skew(35deg) translate3d(300%,0,0); opacity: .05;}}
.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;	position: fixed;height: 73px;top: 0px;z-index: 9999; max-width: 100%;  }
#menuline {font-family: 'Raleway', sans-serif;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: 'Raleway', sans-serif;position: relative;font-size: 20px;line-height: 20px;  color: #a32323; border-bottom: 5px solid #212121;
transition: color .2s linear .1s, border-bottom 1s linear .2s;}
.logo2 {transition: color .2s linear .1s, border-bottom 1s linear .2s;font-family: 'Raleway', sans-serif;position: relative;font-size: 20px; line-height: 20px;  top: 5px;  border-bottom: 5px solid #a32323;}
#logo p {-webkit-margin-before: 0px;padding-bottom: 5px; margin-top: 10px;}
#logo:hover .logo {color: #212121;border-bottom: 5px solid #a32323;}
#logo:hover .logo2 {color: #a32323;border-bottom: 5px solid #212121;}
.telephone, .telmobile{font-family: 'Raleway', sans-serif;width: 100%;color: #212121;width: 100%;position: relative;text-align: left;font-size: 16px !important;
	line-height: 16px;}
/*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%;}
.mainmenu-u > ul > li {display: inline-block;}
.mainmenu-u > ul > li > a {padding: 10px 10px 42px 10px;color: #212121;font-size: 18px;display: inline-block;}
.mainmenu-u > ul > li.cbp-hropen, .mainmenu-u > ul > li > a:hover   {color: #212121;background: #ffe28c;}
.menuarrow:after {content: " \25bc"; font-size: 12px;}/*downarrow initially*/
.cbp-hropen .menuarrow:after{content: " \25b2"; font-size: 12px;}/*uparrow*/

/* sub-menu */
.mega1, .mega2 {visibility: hidden; width: 100%; height: 100vh; left: 0%; position: absolute; opacity: .1;}
.mega1 {overflow: hidden;opacity: .6;left: -33%;position: absolute; background-color: #212121; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(-300%,0,0);
	   -ms-transform: skew(35deg) translate3d(-300%,0,0); transform: skew(35deg) translate3d(-300%,0,0);}
.mega2 {overflow: hidden;opacity: .6;left: 63%;position: absolute; background-color: #a32323; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(300%,0,0);
	   -ms-transform: skew(35deg) translate3d(300%,0,0); transform: skew(35deg) translate3d(300%,0,0);}
.cbp-hropen .mega1 {visibility: visible; width: 100%; animation: mega1a 21.1s .0001s; }
.cbp-hropen .mega2 {visibility: visible; width: 100%; animation: mega2a 21.1s .0001s;}
@keyframes mega1a {0% {transform: skew(35deg) translate3d(0,0,0);}  14% {transform: skew(35deg) translate3d(-300%,0,0);}  100% {transform: skew(35deg) translate3d(-300%,0,0);}}
@keyframes mega2a {0% {transform: skew(35deg) translate3d(0,0,0);}  14% {transform: skew(35deg) translate3d(300%,0,0);}  100% {transform: skew(35deg) translate3d(300%,0,0);}}
.megamenu {z-index: 998; position: absolute; display: block; width: 100%; top: 70px;left: 0%; visibility: hidden;
	background-color: #ffe28c;padding-bottom: 0%; overflow: hidden; transition: visibility 0s ease 0s;}
.cbp-hropen .megamenu {display: block; visibility: visible;animation: megamenua 21.1s .0001s;}
@keyframes megamenua {0% {opacity: 0;} 1% {opacity: 1;} 100% {opacity: 1;}}
.megamenu-i {padding: 5% 0% 5% 0%;position: relative; width: 100%;background: #ffe28c;}	
.megamenu-inner {width: 88%;margin: 0% 6% 0% 6%; padding: 3% 2% 3% 2%;	background: #ffe28c; z-index: 9; position: relative; }
.megamenu-inner2 {width: 100%;  z-index: 9; position: relative; }
.megamenu ul li {float: left; display: inline;}
/*.mainmenu-u > ul > li.cbp-hropen a,
.mainmenu-u > ul > li.cbp-hropen > a:hover {color: #212121; display: block;}
.mainmenu-u > ul > li.cbp-hropen > a:hover {color: #212121;background: #ffe28c;}*/
.menu-trapezoid {visibility: hidden; position: absolute;width: 30%;  height: 100%;background: #212121; z-index: 1; }
.cbp-hropen .megamenu .menu-trapezoid {left: 0%; visibility: visible; animation: menu-trap 21.1s linear .0001s; }
@keyframes menu-trap {0% {transform: translate3d(-200%,0,0);} 3% {transform: translate3d(-200%,0,0);}  10% {transform:  translate3d(0,0,0);}  100% {transform:  translate3d(0,0,0);}}
.menu-trapezoid::after {visibility: hidden; content: ""; position: absolute; left: 100%;
    top: 0;  border-left: 29.9vw solid #212121;  border-top: 60vw solid transparent;  border-bottom: 60vw solid transparent;
  width: 0;  height: 100%;transition: visibility 0s;}
.cbp-hropen .megamenu .menu-trapezoid:after {visibility: visible;}
.menu-triangle {-webkit-transition: border .6s ease  .25s, visibility 0s; transition:  border .6s ease .25s, visibility 0s; visibility: hidden;content: ""; position: absolute; bottom: 0px; right: 0px; width: 0; height: 0; border-bottom: 580px solid #212121;
    border-left: 720px solid transparent; z-index: 1; opacity: .8;}
.cbp-hropen .megamenu .megamenu-i .menu-triangle {visibility: visible; border-bottom: 380px solid #212121;
    border-left: 220px solid transparent;  border-bottom: 380px solid #212121;}
.navfooter-colour {background-color: #a32323; opacity: .9;  width: 100%; height: 9000px; position: absolute; z-index: 9;}
.navfooter-image {max-width: 100%; overflow: hidden; text-align: left;background-color: #ffe28c;z-index: 8;font-size: 1px; background-repeat: repeat; position: relative; width: 100%; }


.bk-image1 {position: relative; width: 100%; margin-bottom: 200px; overflow: hidden; z-index: 7;}
.bk-image1bk, .bk-image1bk2, .bk-image1bk3 {position: absolute; width: 100%; z-index: 3; text-align: left;}
.bk-image1bk{ animation: bk-image1bk 50.1s infinite linear .0001s; }
@keyframes bk-image1bk {0% {transform: translate3d(0,0,0); opacity: 1;} 33.333% {transform: translate3d(100%,0,0); opacity: 1;}  33.3331% {opacity: 0;} 33.32 {transform: translate3d(-100%,0,0); opacity: 0;} 66.666% {transform: translate3d(-100%,0,0); opacity: 1;} 100%{transform: translate3d(0,0,0); opacity: 1;}}
.bk-image1bk2{ animation: bk-image1bk2 50.1s infinite linear .0001s; }
@keyframes bk-image1bk2 {0% {transform: translate3d(-100%,0,0); opacity: 1;}  33.333% {transform: translate3d(0,0,0); opacity: 1;} 66.666% {transform: translate3d(100%,0,0); opacity: 1;} 66.6661% {opacity: 0;} 100% {transform: translate3d(-100%,0,0); opacity: 0;} }
.bk-image1bk3{ animation: bk-image1bk3 50.1s infinite linear .0001s; }
@keyframes bk-image1bk3 {0% {transform: translate3d(100%,0,0); opacity: 0;z-index: 0;} 1%{transform: translate3d(-100%,0,0); opacity: 0;}  33.333% {transform: translate3d(-100%,0,0); opacity: 1; z-index: 7;}  100% {transform: translate3d(100%,0,0); opacity: 1;}}

/*services icons home + menu icons*/
.trapezoid-link {visibility: hidden;  -webkit-transition: width 300ms linear 0s; transition: width 300ms linear 0s;
line-height: 0px; position: absolute;	width: 62%;	height: 100%;opacity: 0;background-color: #ffdd75;}
.trapezoid-link:after { position: absolute;content: ""; position: absolute; left: 100%;
    top: 0;  border-left: 25.3vw solid #ffdd75;  border-top: 35vw solid transparent;  border-bottom: 60vw solid transparent;
  width: 0;  height: 100%;}
[class^=m-svs]:hover .trapezoid-link, [class^=m-prices]:hover .trapezoid-link  {width: 75%; opacity: .95 !important; visibility: visible;}
.linkarrow-l, .linkarrow-m {position: absolute;top: 6.5%; right: 5%;opacity: 0;z-index: 9;	-webkit-transition: all 300ms linear 0s;
	transition: all 300ms linear 0s;background-repeat: no-repeat;}
.linkarrow-m {width: 4%;}
[class^=m-svs]:hover .linkarrow-l, [class^=m-svs]:hover .linkarrow-m, [class^=m-prices]:hover .linkarrow-m {opacity: 1;}

/*services icons menu*/
[class^=m-svs]:hover .m-svs-link {font-weight: bold;}
.m-svs-1:hover, .m-svs-2:hover, .m-svs-3:hover,.m-svs-4:hover,  .m-svs-5:hover,  .m-svs-6:hover, .m-svs-7:hover , .m-prices-1:hover, .m-prices-2:hover {background-color: #212121;}
.m-svs-1:hover .m-svs-link, .m-svs-2:hover .m-svs-link, .m-svs-3:hover .m-svs-link,.m-svs-4:hover .m-svs-link, 
 .m-svs-5:hover .m-svs-link,  .m-svs-6:hover .m-svs-link, .m-svs-7:hover .m-svs-link, .m-prices-1:hover .m-svs-link, .m-prices-2:hover .m-svs-link {font-weight: normal;}
[class^=m-svs], [class^=m-prices] {overflow: hidden;}
.m-svs-link {width: 100%; text-align: center; padding: 3%; font-size: 16px;}
[class^=m-svs] {position: relative; text-align: center;}
[class^=menu-icon] {position: relative; width: 100%; opacity: .8;}
.m-svs-7 {margin-right: 0%;}
.icon-relative {margin-top: 5%;	position: relative;        width: 100%;}
.filler-icon img {position: relative; width: 100%; opacity: .2;}
.top-block-b, .left-block-b, .line-1-b, .line-2-b, .line-3-b, .line-4-b, 
.top-block-res, .left-block-res, .line-1-res, .line-2-res, .line-3-res, .line-4-res, .mobile-icon-res, 
.top-block-b-res, .line-1b-res, .line-2b-res, .line-3b-res, .line-4b-res
 {-webkit-transition: all .6s ease .15s; transition: all .6s ease .15s;}
 
/*services*/
.m-services-inner-menu {position: relative; padding: 5% 20% 5% 20%; width: 60%; height: 100%;}
.m-svs-1, .m-svs-2, .m-svs-3, .m-svs-4 {width: 11.71429%; margin-left: 10.62857%; margin-right: 0%; opacity: 0;}
.m-svs-5, .m-svs-6, .m-svs-7 {width: 9%; margin: 1% 0% 0% 13%; opacity: 0;}
.m-svs-1, .m-svs-2, .m-svs-3, .m-svs-4 {margin-left: 0; opacity: 0;}
.cbp-hropen .megamenu  .m-svs-1, .cbp-hropen .megamenu  .m-svs-2, .cbp-hropen .megamenu  .m-svs-3, .cbp-hropen .megamenu  .m-svs-4  {width: 19%;margin-left: 4.8%;opacity: 1;}
.cbp-hropen .megamenu  .m-svs-5, .cbp-hropen .megamenu  .m-svs-6, .cbp-hropen .megamenu  .m-svs-7 {width: 16%;margin-left: 13%;opacity: 1;}
.m-svs-5, .m-svs-6, .m-svs-7 {margin-left: 0; opacity: 0;}
/*.cbp-hropen .megamenu  .m-svs-5 {margin: 2% 0% 0% 25%;}*/
/*prices*/
[class^=m-prices] {position: relative; width: 24%; text-align: center; opacity: 0;}
.m-prices-1 {margin-left: 1%;}
.m-prices-2  {margin-left: 1%;}
.cbp-hropen .megamenu  .m-prices-1 {margin-left: 21.33333333%;opacity: 1;}
.cbp-hropen .megamenu  .m-prices-2  {margin-left: 9.33333333%;opacity: 1;}

/*brochure*/
.top-block-b, .top-block-c  {background-position: center;	background-image: url('../images/general-images/menu/top-pic.jpg');
	position: absolute;	top: 14%; width: 70%;	margin-left: 15%;height: 15%;	background-color: #212121;	opacity: .4;}
.left-block-b, .left-block-res {background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 33%; width: 30%; margin-left: 15%;height: 25%; background-color: #212121; opacity: .4;}
.left-block-b2, .left-block-w2, .left-block-res2 {background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 40%; width: 30%; margin-left: 15%;height: 11%; background-color: #212121; opacity: 0;}
.left-block-b, .left-block-res {-webkit-transition: all .6s ease .15s; transition: all .6s ease .15s;}
.left-block-b2, .left-block-res2 {-webkit-transition: all .6s ease .45s; transition: all .6s ease .45s;}
.line-1-b, .line-1-w {position: absolute; top: 33%; height: 4%; width: 25%; margin-left: 50%; background-color: #212121; opacity: .4;}
.line-2-b, .line-2-w {position: absolute; top: 40%; height: 4%; width: 25%; margin-left: 50%; background-color: #212121; opacity: .4;}
.line-3-b, .line-3-w {position: absolute;top: 47%;height: 4%;width: 25%;	margin-left: 60%;background-color: #212121;	opacity: .4;}
.line-4-b, .line-4-w {position: absolute; top: 54%; height: 4%; width: 25%; margin-left: 60%; background-color: #212121; opacity: .4;}
.m-svs-1:hover .top-block-b  {opacity: 1;background-position: right;}
.m-svs-1:hover .left-block-b2{opacity: 1; background-position: center;top: 40%; width: 30%; margin-left: 50%;}
.m-svs-1:hover .line-1-b, .m-svs-1:hover .line-4-b {opacity: 1;width: 70%; margin-left: 15%;}
.m-svs-1:hover .line-2-b, .m-svs-1:hover .line-3-b {opacity: 1; margin-left: 20%;}
.m-svs-1:hover .left-block-b, .m-svs-2:hover .left-block-w, .m-svs-4:hover .left-block-res  {opacity: 0;top: 40%; height: 11%; top: 40%;}

/*wordpress*/
.line-1-w,  .line-2-w,  .line-3-w,  .line-4-w  {width: 35%; margin-left: 50%;}
.top-block-w  {background-position: center;	background-image: url('../images/general-images/menu/top-pic.jpg');
	position: absolute;	top: 14%; width: 30%; margin-left: 15%;height: 44%;	background-color: #212121;	opacity: .4;}
.left-block-w {background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 14%; width: 35%; margin-left: 50%;height: 15%; background-color: #212121; opacity: .4;}
.brush-w {position: absolute; z-index: 5555; margin-top: -40%; margin-left: 80%; width: 24%; height: 30%; opacity: 1 ! important;}
.brush-w img {width: 100%; height: auto;}
.m-svs-2:hover .brush-w {margin-top: -60%; margin-left: 40%; -ms-transform: rotate(17deg); -webkit-transform: rotate(17deg); transform: rotate(17deg);}
.m-svs-2:hover .top-block-w {opacity: 1;background-position:  center;margin-left: 50%; width: 35%;}
.m-svs-2:hover .left-block-w {opacity: 1; background-position: center;top: 31%; width: 30%; margin-left: 15%;}
.m-svs-2:hover .line-1-w, .m-svs-2:hover .line-4-w, .m-svs-2:hover .line-2-w, .m-svs-2:hover .line-3-w {opacity: 1;width: 30%; margin-left: 15%;}
.m-svs-2:hover .line-1-w {top: 14%;}
.m-svs-2:hover .line-2-w {top: 21%;}
.brush-w {-webkit-transition: margin-top .5s ease .15s, margin-left .5s ease .15s, transform .5s ease .45s; transition: margin-top .5s ease .15s, margin-left .5s ease .15s, transform .5s ease .45s;}
.line-1-w, .line-2-w, .line-3-w, .line-4-w, .left-block-w, .top-block-w, .left-block-w2 
 {-webkit-transition: all .6s ease .85s; transition: all .6s ease .85s;}

/*redesign*/
.eye {position: absolute;  width: 50%; height: 30%; margin-top: -73%; margin-left: 25%; opacity: .4;}
.eye img{width: 100%; height: auto;}
.top-block-r {opacity: 0;background-position: center;	background-image: url('../images/general-images/menu/top-pic.jpg');
	position: absolute;	top: 14%; width: 70%;	margin-left: 15%;height: 15%;	background-color: #212121;	}
.left-block-r {opacity: 0;background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 33%; width: 30%; margin-left: 15%;height: 11%; background-color: #212121;}
.line-1-r {opacity: 0;position: absolute; top: 33%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; }
.line-2-r {opacity: 0;position: absolute; top: 40%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; }
.line-3-r {opacity: 0;position: absolute;top: 47%;height: 4%;width: 35%;	margin-left: 50%;background-color: #212121;	}
.line-4-r {opacity: 0;position: absolute; top: 54%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121;}
.m-svs-3:hover .top-block-r {opacity: 1;background-position: right;}
.m-svs-3:hover .left-block-r {opacity: 1; background-position: center;top: 40%; max-height: 11%; width: 30%; margin-left: 15%;}
.m-svs-3:hover .line-1-r, .m-svs-3:hover .line-4-r {opacity: 1;width: 70%; margin-left: 15%;}
.m-svs-3:hover .line-2-r, .m-svs-3:hover .line-3-r {opacity: 1; margin-left: 50%;}
.m-svs-3:hover .eye {opacity: 0;}
.eye {-webkit-transition: all .6s ease .15s; transition: all .6s ease .15s;}
.line-1-r, .line-2-r, .line-3-r, .line-4-r, .left-block-r, .top-block-r 
 {-webkit-transition: all .6s ease .55s; transition: all .6s ease .55s;}

/*responsive*/
.top-block-res {background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: center;
	position: absolute;	top: 13%;	width: 70%;	margin-left: 15%;height: 16%;	background-color: #212121;	opacity: .4;}
.line-1-res {position: absolute; top: 34%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; opacity: .4;}
.line-2-res {position: absolute; top: 41%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; opacity: .4;}
.line-3-res {position: absolute;top: 48%;height: 4%;width: 25%;	margin-left: 60%;background-color: #212121;	opacity: .4;}
.line-4-res {position: absolute; top: 55%; height: 4%; width: 25%; margin-left: 60%; background-color: #212121; opacity: .4;}
.mobile-icon-res  {z-index: 4; position: relative; width: 22%; margin-top: -35%; margin-left: 78%; }
.mobile-icon-res img {width: 100%; height: auto;opacity: 0;}
.top-block-b-res {z-index: 5;background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg');background-position: center;
	position: absolute;	top: 17%;	width: 70%;	margin-left: 15%;height: 16%;	background-color: #212121;	opacity: .4;}
.line-1b-res {z-index: 5;position: absolute; top: 37%; height: 5%; width: 70%; margin-left: 15%; background-color: #212121; opacity: .4;}
.line-2b-res {z-index: 5;position: absolute; top: 45%; height: 5%; width: 70%; margin-left: 15%; background-color: #212121; opacity: .4;}
.line-3b-res {z-index: 5;position: absolute;top: 53%;height: 5%;width: 50%;	margin-left: 35%;background-color: #212121;	opacity: .4;}
.line-4b-res {z-index: 5;position: absolute; top: 60%; height: 5%; width: 50%; margin-left: 35%; background-color: #212121; opacity: .4;}
.left-block-b-res {z-index: 5;background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg');
position: absolute; top: 69%; width: 70%; margin-left: 15%;height: 10%; background-color: #212121; opacity: .4;}
.m-svs-4:hover .top-block-res {opacity: 1; background-position: right;}
.m-svs-4:hover .line-1-res {opacity: 1;width: 50%; margin-left: 15%;}
.m-svs-4:hover .line-2-res, .m-svs-4:hover .line-3-res {opacity: 1; margin-left: 15%; width: 35%;}
.m-svs-4:hover .line-4-res {opacity: 1; margin-left: 55%; width: 30%;}
.m-svs-4:hover .line-1b-res  {opacity: 1; width: 70%;}
.m-svs-4:hover .line-2b-res  {opacity: 1; width: 50%; margin-left: 15%;}
.m-svs-4:hover .line-3b-res {opacity: 1; top: 53%;width: 50%; margin-left: 15%;}
.m-svs-4:hover .left-block-b-res {opacity: 1; top: 61%;background-position: center; -webkit-transition: all .5s ease .15s; transition: all .5s ease .15s;}
.m-svs-4:hover .left-block-res2 {opacity: 1; background-position: center;top: 40%; width: 30%; margin-left: 55%;}
.m-svs-4:hover .line-4b-res {opacity: 1;top: 74%;margin-left: 55%; width: 30%;}

/*copywriting*/
.glass {position: absolute; width: 36%; margin-left: 77%;margin-top: -43%; }
.glass img{width: 100%; height: auto;}
.left-block-c {	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 47%; width: 45%; margin-left: 15%;height: 11%; background-color: #212121; opacity: .4;}
.glass {-webkit-transition: all .6s ease .15s;-moz-transition: all .6s ease .15s; -o-transition: all .6s ease .15s; -ms-transition: all .6s ease .15s; transition: all .6s ease .15s;}
.line-1-c {position: absolute; top: 33%; height: 4%; width: 70%; margin-left: 15%; background-color: #212121; opacity: .4;}
.line-2-c {position: absolute; top: 40%; height: 4%; width: 70%; margin-left: 15%; background-color: #212121; opacity: .4;}
.line-3-c {position: absolute;top: 47%;height: 4%;width: 20%;	margin-left: 65%;background-color: #212121;	opacity: .4;}
.line-4-c {position: absolute; top: 54%; height: 4%; width: 20%; margin-left: 65%; background-color: #212121; opacity: .4;}
.m-svs-5:hover .glass {margin-top: -59.5%; margin-left: 60%;}
.m-svs-5:hover .line-3-c, .m-svs-5:hover .line-4-c  {background-color: #a32323; opacity: 1;}
.glass, .line-1-c, .line-2-c, .left-block-c, .top-block-c  {-webkit-transition: all .6s ease .15s; transition: all .6s ease .15s;}
.line-4-c, .line-3-c {-webkit-transition: all .6s ease .65s; transition: all .6s ease .65s;}
.m-svs-5:hover .line-1-c, .m-svs-5:hover .line-2-c, .m-svs-5:hover .top-block-c, .m-svs-5:hover .left-block-c {opacity: 1;}
.m-svs-5:hover .left-block-c {background-position: left;}
.m-svs-5:hover .top-block-c {background-position: right;}

/*seo*/
.s-line-1, .s-line-2, .s-line-3, .s-line-4, .s-line-5, .s-line-6 {width: 5%; position: absolute; background-color: #212121; opacity: .4;}
.s-line-1 {height: 5%; margin-left: 35%; margin-top: -40.2%;}
.s-line-2 {height: 10%; margin-left: 45%; margin-top: -44.5%;}
.s-line-3 {height: 20%; margin-left: 55%; margin-top: -54.5%;}
.s-line-4 {height: 30%; margin-left: 65%; margin-top: -63.5%;}
.s-line-5 {height: 40%; margin-left: 75%; margin-top: -73.5%;}
.s-line-6 {height: 50%; margin-left: 85%; margin-top: -82.5%; background-color: #a32323;}
.m-svs-6:hover [class^=s-line] {opacity: 1;} 

.s-line-1 {-webkit-transition: opacity .6s ease-in .05s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s; 
transition: opacity .6s ease-in .05s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s;}
.s-line-2 {-webkit-transition: opacity .6s ease-in .15s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s; 
transition: opacity .6s ease-in .15s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s;}
.s-line-3 {-webkit-transition: opacity .6s ease-in .25s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s; 
transition: opacity .6s ease-in .25s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s;}
.s-line-4 {-webkit-transition: opacity .6s ease-in .35s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s; 
transition: opacity .6s ease-in .35s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s;}
.s-line-5 {-webkit-transition: opacity .6s ease-in .45s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s; 
transition: opacity .6s ease-in .45s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s;}
.s-line-6 {-webkit-transition: opacity .6s ease-in .55s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s; 
transition: opacity .6s ease-in .55s, width .6s ease-in .65s, margin-left .6s ease-in .65s, height .6s ease-in .65s, margin-top .6s ease-in .65s;}
.s-line-7 {-webkit-transition: opacity .6s ease-in-out 1.15s, width 0s ease .1s, padding-left 0s ease .1s; transition: opacity .6s ease-in-out 1.15s, width 0s ease .1s, padding-left 0s ease .1s;}
.m-svs-6:hover .s-line-1, .m-svs-6:hover .s-line-2, .m-svs-6:hover .s-line-3, .m-svs-6:hover .s-line-4, .m-svs-6:hover .s-line-5, .m-svs-6:hover .s-line-6
{opacity: 1; background-color: #a32323; width: 10%; margin-left: 45%; height: 30%; margin-top: -63.5%;} 
.s-line-7 { float:left;margin:0.5%; top: 20%; margin-left: 40%; position: absolute;    width: 0%; z-index: 9999; opacity: 0;
    height: 0;  padding-left:0%; padding-bottom: 10%; overflow: hidden; }
.s-line-7:after {content: ""; display: block; width: 0; height: 0; margin-left:-500px; border-left: 500px solid transparent;
    border-right: 500px solid transparent; border-bottom: 500px solid #a32323;}
.m-svs-6:hover .s-line-7 {opacity: 1;width: 10%;padding-left:10%;}

/*hosting*/
.cloud {opacity: .4; width: 60%; height: 40%;margin-top: -82%; margin-left: 20%; overflow: hidden;position: absolute;z-index: 9;}
.cloud-1{background-color: #212121; border-radius: 60%; position: relative;width: 100%; height: 60%; margin-top: 30%;}
.cloud-2{background-color: #212121; border-radius: 90%; position: relative;width: 50%; height: 50%; margin-top: -52%; margin-left: 10%;}
.cloud-3{background-color: #212121; border-radius: 90%; position: relative;width: 40%; height: 40%; margin-top: -32%; margin-left: 44%;}
.m-svs-7:hover .cloud {margin-top: -76%;}
.m-svs-7:hover .cloud-3 {opacity: 0;}
.m-svs-7:hover .cloud-1 {border-radius: 0%; height: 10%; margin-top: -30%;}
.m-svs-7:hover .cloud-2 {border-radius: 0%; float:left; margin:0.5%; margin-left:0%;
width: 380%; margin-top: -10%; height: 40%; padding-left:50%; padding-top: 55%;overflow: hidden;}
.m-svs-7:hover .cloud-2:after {content: ""; display: block; width: 0; height: 0; margin-left:-500px;
    margin-top:-500px; border-left: 500px solid transparent;border-right: 500px solid transparent; border-top: 500px solid #fff;}
.m-svs-7:hover .cloud {margin-top: -78%;}
.m-svs-7:hover .emails {opacity: 1; z-index: 20; visibility: visible;}
.cloud, .cloud-1, .cloud-2, .cloud-3 {-webkit-transition: all .5s ease .15s; transition:  all .5s ease .15s, visibility 0s ease 0s;}
.emails{-webkit-transition: opacity .7s ease .85s,  width .7s ease .55s, margin-left .7s ease .55s, visibility 0s ease 0s; transition: opacity .7s ease .85s,  width .7s ease .55s, margin-left .7s ease .55s, visibility 0s ease 0s;}
.emails {position: absolute;   width: 20%; margin-left: 40%; height: 30%; margin-top: -80%; opacity: 0; visibility: hidden;}
.emails img{width: 100%; height: auto;}

/*home + prices*/
.vlinkarrow, .vlinkarrow2 {line-height: 75px;
position: absolute;top: 6.5%; right: 5%;opacity: 0;z-index: 9;	-webkit-transition: all 300ms linear 0s;
	transition: all 300ms linear 0s;background-repeat: no-repeat;}
[class^=m-svs]:hover .linkarrow-l, [class^=m-svs]:hover .linkarrow-m, [class^=m-prices]:hover .linkarrow-m {opacity: 1;}
/*normal prices*/
.business {position: absolute;  width: 45%; height: 28%; margin-top: -80.5%; margin-left: 25%; opacity: .4;}
.business img{width: 100%; height: auto;}
.m-prices-1:hover .business {opacity: 0;}
.top-block-pb {opacity: 0;background-position: center;	background-image: url('../images/general-images/menu/top-pic.jpg');
	position: absolute;	top: 14%; width: 70%;	margin-left: 15%; height: 44%;	background-color: #212121;	}
.left-block-pb {opacity: 0;background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 33%; width: 30%; margin-left: 15%;height: 11%; background-color: #212121;}
.line-1-pb {opacity: 0;position: absolute; top: 33%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; }
.line-2-pb {opacity: 0;position: absolute; top: 40%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; }
.line-3-pb {opacity: 0;position: absolute;top: 47%;height: 4%;width: 35%;	margin-left: 50%;background-color: #212121;	}
.line-4-pb {opacity: 0;position: absolute; top: 54%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121;}
.m-prices-1:hover .top-block-pb {opacity: 1;background-position: center; margin-left: 50%; width: 35%;}
.m-prices-1:hover .left-block-pb {opacity: 1; background-position: center;top: 31%; width: 30%; margin-left: 15%;}
.m-prices-1:hover .line-1-pb, .m-prices-1:hover .line-2-pb {opacity: 1;width: 20%; margin-left: 15%;}
.m-prices-1:hover .line-4-pb, .m-prices-1:hover .line-3-pb {opacity: 1;width: 20%; margin-left: 25%;}
.m-prices-1:hover .line-1-pb {top: 14%;}
.m-prices-1:hover .line-2-pb {top: 21%;}
.business {-webkit-transition: all .6s ease-in .15s; transition: all .6s ease-in .15s;}
.line-1-pb, .line-2-pb, .line-3-pb, .line-4-pb, .left-block-pb, .top-block-pb 
 {-webkit-transition: all .6s ease .55s;-moz-transition: all .6s ease .55s; -o-transition: all .6s ease .55s; -ms-transition: all .6s ease .55s; transition: all .6s ease .55s;}

/*charity prices*/
.charity {position: absolute;  width: 45%; height: 28%; margin-top: -79%; margin-left: 26%; opacity: .4;}
.charity img{width: 100%; height: auto;}
.m-prices-2:hover .charity {opacity: 0;}
.top-block-r {opacity: 0;background-position: center;	background-image: url('../images/general-images/menu/top-pic.jpg');
	position: absolute;	top: 14%; width: 70%;	margin-left: 15%;height: 15%;	background-color: #212121;	}
.left-block-r {opacity: 0;background-position: right;	background-image: url('../images/general-images/menu/top-pic.jpg'); background-position: top left;
position: absolute; top: 33%; width: 30%; margin-left: 15%;height: 11%; background-color: #212121;}
.line-1-r {opacity: 0;position: absolute; top: 33%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; }
.line-2-r {opacity: 0;position: absolute; top: 40%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121; }
.line-3-r {opacity: 0;position: absolute;top: 47%;height: 4%;width: 35%;	margin-left: 50%;background-color: #212121;	}
.line-4-r {opacity: 0;position: absolute; top: 54%; height: 4%; width: 35%; margin-left: 50%; background-color: #212121;}
.m-prices-2:hover .top-block-r {opacity: 1;background-position: right;}
.m-prices-2:hover .left-block-r {opacity: 1; background-position: center;top: 40%; max-height: 11%; width: 30%; margin-left: 15%;}
.m-prices-2:hover .line-1-r, .m-prices-2:hover .line-4-r {opacity: 1;width: 70%; margin-left: 15%;}
.m-prices-2:hover .line-2-r, .m-prices-2:hover .line-3-r {opacity: 1; margin-left: 50%;}
.charity {-webkit-transition: opacity .6s ease-in .15s; transition: opacity .6s ease-in .15s;}
.line-1-r, .line-2-r, .line-3-r, .line-4-r, .left-block-r, .top-block-r 
 {-webkit-transition: all .6s ease .55s;transition: all .6s ease .55s;}

/*masthead- home & areas*/
#masthead-wide {background-color: #faf9f5;width: 100%;position: relative;	margin: 0px; z-index: 1;padding: 0%;font-size:0px; line-height: 0px; overflow: hidden;}
.m-trapezoid, .m-trapezoid2 {position: absolute; height: 100%;background: #212121; opacity: .2;}
.m-trapezoid::after, .m-trapezoid2::after {content: ""; position: absolute; left: 100%;
     border-left: 25.3vw solid #212121;  border-top: 35vw solid transparent;  border-bottom: 60vw solid transparent;
  width: 0;  height: 100%;}
.m-trapezoid {width: 53.4%;transform: translate3d(-150%,0,0); opacity: .95; z-index: 6; animation: m-trapezoid-a 9s linear 2s;}/*keep out after initial; allow m-trapezoid2 to change on hover after initial animation*/  
@keyframes m-trapezoid-a {0% {transform: translate3d(-150%,0,0);} 16% {transform: translate3d(0,0,0);} 80% {transform: translate3d(0,0,0);}  96% {transform: translate3d(-150%,0,0);}}
@keyframes m-red-l-a {0% {transform: translate3d(-101.7%,0,0); } 16% {transform: translate3d(0,0,0); } 80% { transform: translate3d(0,0,0);} 96% {transform: translate3d(-101.7%,0,0);} 100% {transform: translate3d(-101.7%,0,0);}}
@keyframes m-white-l-a {0% {transform: translate3d(-101.7%,0,0); } 16% {transform: translate3d(0,0,0); } 80% { transform: translate3d(0,0,0);} 96% {transform: translate3d(-101.7%,0,0);} 100% {transform: translate3d(-101.7%,0,0);}}

.m-trapezoid2 {transform: translate3d(0,0,0); opacity: 1; z-index: 1; width: 10%; animation: m-trapezoid2-a 14.24s linear .0001s;}
@keyframes m-trapezoid2-a {0% {transform: translate3d(-400%,0,0);} 76% {transform: translate3d(-400%,0,0);}  88% {transform: translate3d(0,0,0);} 100% {transform: translate3d(0,0,0);}}
.m-filler {position: relative; width: 100%; z-index: 6;}  
.m-black-bk {position: absolute;width: 50%; height: 50%;background: #212121;transform: translate(-100%,0);animation: m-black-bk-a 20.1s  linear .0001s;}
.m-white-bk {top: 50%; left: 0;position: absolute; width: 50%; height: 50%;background-color: #faefe7;}
.m-white-bk2 {top: 50%; left: 0;position: absolute; width: 100%; height: 50%;background-color: #faefe7;}
.m-red-l {top: 0; left: 0;z-index: 6;position: absolute;width: 78.7%; height: 50%;background: #a32323; transform: translate3d(-200%,0,0);  animation: m-red-l-a 9s linear 2s;}
.m-white-l  {top: 50%;left: 0;z-index : 17 ;position: absolute;width: 78.7%; height: 50%; background-color: #faeee4; transform: translate3d(-36.45%,0,0); animation: m-white-l-a 9s linear 2s;}
.m-red-r  {top: 50%; left: 0%; z-index: 1;clear: both; width: 50%; transform: translate(100%,0);height: 50%; position: absolute; background-color: #a32323;animation: m-red-r-a 12.2s  linear .0001s;}

.m-red-l2  {left: 0; top: 0; transform: translate(0,0);z-index: 6;position: absolute;	width: 50%; height: 50%;background: #a32323; animation: m-red-l2-a 18s 1 linear .0001s;}
.m-black-r {left: 50%;top: 50%; z-index : 1;clear: both; width: 50%; height: 50%; position: absolute;transform: translate3d(0,0,0);background-color: #212121;animation: m-black-r-a 18s linear .0001s;}
@keyframes m-red-l2-a {0% {transform: translate(-200%,0)} 65% {transform: translate(-200%,0)} 75% {transform: translate(0,0)} 100% {transform: translate(0,0)}}
@keyframes m-black-r-a {0% {transform: translate3d(-1900%,0,0);}  72% {transform: translate3d(-150%,0,0);}  82% {transform: translate3d(0,0,0);} 100% {transform: translate3d(0,0,0);}}
@keyframes m-black-bk-a {0% {transform: translate(-200%,0);} 33% {transform: translate(-200%,0);} 33.01% {transform: translate(0,0);}  100% {transform: translate(-0,0);}}
@keyframes m-red-r-a {0% {transform: translate(-1900%,0);} 10% {transform: translate(-1900%,0);} 11% {transform: translate(-200%,0); } 31% {transform: translate(100%,0);}  100% {transform: translate(100%,0);}}

.m-triangle {position: absolute; top: 0%; right: 0%;width: 0;height: 0;border-top: 200px solid #ffc107; opacity: .4; 
	border-left: 147px solid transparent; z-index: -1;}
.m-triangle {animation: m-triangle-a 20.1s linear .0001s;}
.m-inner {position: relative; z-index: 2; } 
.m-left {position: relative; overflow: hidden;font-size: 0px; line-height: 0px; z-index: 1;}    
.m-img-l {width: 47.67%;  margin: 1.60% 1.56255% 1.59% 1.56255%;  position: relative; z-index: 3; font-size: 0px; line-height: 0px; animation-name: m-img-l-a1, m-img-l-a2; animation-duration: 8s, 20.1s; animation-timing-function: linear, linear; animation-delay: .001s, .001s;} 
.m-img-l-img {line-height: 0px; font-size: 0px !important; display: block;}
.m-img-r1 {width: 19.356%; transform:  translate3d(0%,0,0); left: 50.79%;  top: 3.773%; position: absolute; opacity: 1; z-index: 1 !important; animation-name: m-img-r1-a1, m-img-r1-a2; animation-duration: 8s, 20.1s; animation-timing-function: linear, linear;  animation-delay: .001s, .001s;} 
.m-img-r2 {width: 26.85%; transform:  translate3d(0%,0,0); left: 71.65%; top: 3.773%; position: absolute; opacity: 1; z-index: 1 !important; animation-name: m-img-r2-a1, m-img-r2-a2; animation-duration: 8s, 20.1s; animation-timing-function: linear, linear;  animation-delay: .001s, .001s;} 
.m-img-r3 {width: 26.85%; transform:  translate3d(0%,0,0); left: 50.79%; top: 47.56%; position: absolute; opacity: 1;  z-index: 1 !important; animation-name: m-img-r3-a1, m-img-r3-a2; animation-duration: 8s, 20.1s; animation-timing-function: linear, linear; animation-delay: .001s, .001s;}
.m-img-r4 {width: 19.356%; transform:  translate3d(0%,0,0); left: 79.15%; top: 47.56%; position: absolute; opacity: 1; z-index: 1 !important; animation-name: m-img-r4-a1, m-img-r4-a2; animation-duration: 8s, 20.1s; animation-timing-function: linear, linear;  animation-delay: .001s, .001s;} 
/*if move from large to small screens*/
.m-img-1b {transform:  translate3d(0%,0,0); left: 0%;width: 0%;position: absolute;display: block; margin: 3% 3% 3% 3%; z-index: 3; font-size: 0px; line-height: 0px;animation-name: m-img-1b-a1, m-img-1b-a2; animation-duration: 8s, 20.1s; animation-timing-function: linear, linear; animation-delay: .001s, .001s;} 
.m-words1 {font-family: 'Raleway', sans-serif; font-weight: 900;text-align: left; margin-left: 0;left: 1.59%; transform: translate3d(-300%,0,0); float: left; width: 100%;position: absolute; top: 20%;  color: #faf9f5; font-size: 110px; line-height: 110px; z-index: 10; animation: m-words-1-a 9s linear 2s;}
.m-words2 {font-family: 'Raleway', sans-serif; white-space: nowrap;  overflow: hidden; margin-left: 0; left: 1.59%; transform: translate(-300%,0); width: 0%;text-align: left; float: left;  position: absolute; top: 50%; color: #faf9f5; font-size: 70px; line-height: 70px; z-index: 10; animation: m-words-2-a 9s linear 2s;}


@keyframes m-triangle-a {0% {right: -200px;} 42% {right: -200px;} 54% {right: 0;} 100% {right: 0;}}
@keyframes m-words-1-a {0% {transform: translate3d(0,0,0);} 40% {transform: translate3d(0,0,0);} 80% {transform: translate3d(0,0,0);} 100% {transform: translate3d(-300%,0,0)}}
@keyframes m-words-2-a {0% {transform: translate(0,0); } 14% {width: 0px;}  20% {  width: 0px;} 46% {transform: translate(0,0); width: 30em;}  80% {transform: translate(0,0);} 100% {transform: translate(-300%,0);}}

@keyframes m-img-r1-a1 {0% {opacity: 0; transform: translate3d(-30%,0,0); z-index: 1;}  74.28571% {opacity: 0; transform: translate3d(-40%,0,0); z-index: 1;} 88.57143% {transform:  translate3d(0,0,0); opacity: 1;} 100% {opacity: 1; transform: translate3d(0,0,0); z-index: 1;}}
@keyframes m-img-r2-a1 {0% { z-index: 1; opacity: 0;}  62.85714% {opacity: 0; transform: translate3d(-40%,0,0);} 77.14286% {opacity: 1; transform: translate3d(0,0,0);}    100% {opacity: 1; transform: translate3d(0,0,0);}}
@keyframes m-img-r3-a1 {0% { z-index: 1; opacity: 0;}  80% {opacity: 0; transform: translate3d(-40%,0,0);} 94.28571% {opacity: 1; transform: translate3d(0,0,0);}   100% {opacity: 1; transform: translate3d(0,0,0)}}
@keyframes m-img-r4-a1 {0% { z-index: 1; opacity: 0;}  68.57143% {opacity: 0; transform: translate3d(-40%,0,0);} 82.85714% {opacity: 1; transform: translate3d(0,0,0);}  100% {opacity: 1; transform: translate3d(0,0,0);}}
@keyframes m-img-l-a1 {0% {transform: translate3d(-150%,0,0);} 85.71429% {transform: translate3d(-150%,0,0);} 100% {transform: translate3d(0,0,0);}}
@keyframes m-img-1b-a1 {0% {left: -100%; opacity: 0; } 65.71429% {left: -100%; opacity: 0;} 82.85714% {left: 0%; opacity: 1;} 100% {opacity: 1;}}

@keyframes m-img-r1-a2 {0% { -webkit-filter: grayscale(100%); filter: grayscale(100%);}   66% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  86% {-webkit-filter: grayscale(0%); filter: grayscale(0%);} }
@keyframes m-img-r2-a2 {0% { -webkit-filter: grayscale(100%); filter: grayscale(100%);}/* 51% {z-index: 1;} */66% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  86% {-webkit-filter: grayscale(0%); filter: grayscale(0%);} }
@keyframes m-img-r3-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} /*51% {z-index: 1;}*/  66% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  86% {-webkit-filter: grayscale(0%); filter: grayscale(0%);} }
@keyframes m-img-r4-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  /* 51% {z-index: 1;}*/ 66% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  86% {-webkit-filter: grayscale(0%); filter: grayscale(0%);}}
@keyframes m-img-l-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}/* 51% {z-index: 1;}*/ 53% {z-index: 3;} 66% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  86% {-webkit-filter: grayscale(0%); filter: grayscale(0%);}}
@keyframes m-img-1b-a2 {0% {z-index: 1;} 55% {z-index: 1;} 56% {z-index: 3;} 100% {z-index: 3;}}


.h1line1 {background-color: #999; position: relative; z-index: 999; display: block;
	width: 150px; border-bottom: solid 45px #212121;}
.h1line2 {background-color: #999; position: relative; z-index: 999; display: block;
	margin-left: 150px; width: 150px; border-bottom: solid 45px #a32323;}
h1, h1 > .nobreak {font-family: 'Raleway', sans-serif;  padding-bottom: 3%; font-weight: bold;font-size: 70px; line-height: 80px; text-align: left;color: #a32323;z-index: 5;  }
.h1small, .h1small .nobreak {font-family: 'Raleway', sans-serif; font-size: 30px; line-height: 30px; color: #a32323; z-index: 5; padding-bottom: 3%; }
.with-s {padding-bottom: 0px !important;}
h2 {font-family: 'Raleway', sans-serif;font-size: 34px;text-align: left;color: #a32323;padding-bottom: 5px;padding-top: 1.7%;margin-bottom: 35px;}
.h2large, .h2large1 {font-size: 60px !important;  font-weight: 900; text-align: center !important;  padding: 5% 0% 5% 0%; margin-bottom: 0px;}
.h2large1 {padding: 0% 0% 5% 0%;}
h3 {font-size: 18px; color: #212121; font-weight: bold; padding: 1% 0% 1% 0%; margin-bottom: 1.5%; }
h4 {padding: 2%; text-align: center; font-size: 30px; line-height: 35px;}
p, strong, .listitem, .bold, .content-wide a {font-size: 20px; color: #212121; text-indent: 0px; z-index: 6; padding-bottom: 15px; line-height: 1.5}
.content-wide a {font-style: italic; padding-bottom: 0px;}
.content-wide a:hover {background-color: #ffe28c;}

.p-large {font-size: 28px; line-height: 36px;  padding-bottom: 2.5%; }
.logo {font-family: 'Raleway', sans-serif;position: relative;font-size: 20px;line-height: 20px;  color: #a32323; border-bottom: 5px solid #212121;
transition: color .3s linear .1s, border-bottom 1s linear .2s;}
.logo2 {transition: color .3s linear .1s, border-bottom 1s linear .2s;font-family: 'Raleway', sans-serif;position: relative;font-size: 20px; line-height: 20px;  top: 5px;  border-bottom: 5px solid #a32323;}
#logo p {padding-bottom: 5px;}
#logo:hover .logo {color: #212121;border-bottom: 5px solid #a32323;}
#logo:hover .logo2 {color: #a32323;border-bottom: 5px solid #212121;}
.telephone, .telmobile{font-family: 'Raleway', sans-serif;width: 100%;color: #212121;width: 100%;position: relative;text-align: left;font-size: 16px !important;
	line-height: 16px;}
strong, .bold  {font-weight: 700;}
.centered {text-align: center !important;}
.listitem  {padding-left: 3%; padding-bottom: 1.1%; line-height: 1.5; font-size: 20px;color: #212121; z-index: 6; list-style: none; }
.p-heading-white {font-size: 70px; line-height: 70px; font-weight: 900; color: #faf9f5; text-align: center; padding: 0% 5% 3% 5%;}
.p-white  {font-size: 24px; color: #ede9de; text-align: center; line-height: 30px; padding: 1% 5% 1% 5%;}
.f-p, .f-content a {font-size: 16px; text-decoration: none; text-align: left; z-index: 19;}
.f-content a:hover {background-color: #ffdd75; color: #212121;}
a, a img {text-decoration: none; border:0;}
.quotation { padding-bottom: 20px !important; font-style: italic; font-size: 18px; color: #212121; text-indent: 0%; -webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; }
.quotation-person {font-size: 16px; color: #212121; padding-right: 1%;-webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important;}

/* divs */
.topcontent {background-color: #FAEEE4; width: 100%;position: relative;height: auto;padding: 4% 0% 4% 0%;}
.topborder {position: relative; clear: both; height: 8px; width: 100%;background-color: #faf9f5;}
.red4px {position: absolute;width: 25%;top: 0px; height: 4px; left: 25%; background-color: #a32323;}
.black4px {position: absolute;width: 25%; top: 4px; left: 50%;height: 4px; background-color: #212121;}
.white4px {position: absolute;top: 0px;width: 100%; left: 0%;height: 4px; background-color: #faefe7;}

.left-coloured {width: 50%;  margin-top: 2%;background-color: #FAEEE4;float: left;}
.right-coloured {float: right; margin-top: 7%;width: 50%;background-color: #EDC5A7;}
.colour1 {background-color: #F1D3BE;width: 100%;position: relative;	height: auto;}
.images {position: relative; width: 100%; margin-bottom: 4%;}/*as absolute images 4% top margin*/
.coloured-inner {width: 90%; padding: 5%;}
.coloured-inner2 {width: 96.8%; padding: 5% 1.56255% 5% 1.56255%;}
.leftborder, .rightborder, .colour1border {position: relative; clear: both; height: 4px; width: 100%;background-color: #faf9f5;}
.red2px {position: absolute;width: 25%;top: 0px; height: 2px; left: 25%; background-color: #a32323;}
.black2px {position: absolute;width: 25%; top: 2px; left: 50%;height: 2px; background-color: #212121;}
.white2px {position: absolute;top: 0px;width: 100%; left: 0%;height: 2px; background-color: #faefe7;}
.orange2px {position: absolute;top: 0px;width: 100%; left: 0%;height: 2px; background-color: #EDC5A7;}
.orangel-2px {position: absolute;top: 0px;width: 100%; left: 0%;height: 2px; background-color: #F1D3BE;}

.content-wide{z-index: 2;width: 100%; background-color: #faf9f5; height: 100%; position: relative; padding: 4% 0% 0% 0%;}

/*portfolio, redesign, area featured*/
.p-right {text-align: right;}
.notes-r {background-color: #212121;z-index: 3; position: relative; width: 75%; margin-left: 12%; margin-bottom: 7%; padding: 4%;  border: 1px solid #212121; text-align: center;}
.notes-l {background-color: #212121;z-index: 3; position: relative; width: 75%;margin-left: 5%; padding: 4%; left: 0%; border: 1px solid #212121; text-align: center;}
.portfolio-p {color: #faf9f5;}
.url-l, .url-r  {font-size: 14px; line-height: 14px; padding-bottom: 20px !important;}
.url-r {text-align: right;}
.h2-p-l, .h2-p-r  {margin-bottom: 0px; font-family: 'Raleway', sans-serif; padding-bottom: 0px !important;
    font-size: 34px; color: #a32323; line-height: 51px;}
.h2-p-r {text-align: right;}
/*mobile toggle*/
[id^=mobile-toggle], [id^=r-mobile-toggle] {display: none;}
.mobile-con-l, .mobile-con-r {display: none;}
.mobile-text {color: #faf9f5; text-align: center; padding: 40px 0px 40px 0px; font-size: 20px; line-height: 20px;}
.mobile-text:after {content: " \25bc"; font-size: 12px;}/*downarrow initially*/
[id^=mobile-toggle]:checked + .mobile-text:after, [id^=r-mobile-toggle]:checked + .mobile-text:after{content: " \25b2"; font-size: 12px;}/*uparrow*/

.ourwork {margin-top: 4%;background-color: #faf9f5; height: auto; width: 100%;position: relative; top: 0px; padding:0%; overflow:hidden; max-width: 100%;}  
.ourwork-l {float: left;position: absolute; bottom: 0; width: 50%; height: 60px; background-color: #a32323; z-index: 9;}
.ourwork-r {float: right;position: relative; width: 50%; height: 60px; background-color: #a32323; z-index: 9;}
.testimonial {overflow :hidden; opacity: .97;	width: 100%;position: relative;	padding: 4% 0 4% 0;top: 0;}  
.testimonials {position: relative; z-index: 8;}	
.ourwork-bk  {line-height: 0px; position: absolute; padding: 0px; opacity: .9 !important;  background-color: #212121;z-index: 1;
    left: 0px;  top: 0px;  width: 100%;  height: 100%;  margin: 0% !important; z-index: 8;}
    
.bk-image1wk {position: absolute; width: 100%; margin-bottom: 200px; overflow: hidden; z-index: 7;}
.nobk { position: relative; 	height:auto; margin-left: auto;  margin-right: auto; width: 96.8%; max-width: 1920px;}
.nobkpadding {position: relative; z-index: 9; padding: 15% 5% 15% 5%; }
.link-outer {position: relative; height:auto;  width: 100%; text-align: center; padding:  5% 0% 0% 0%; }
.link-inner {margin: 10px 0px 0px 0px;padding: 20px 0px;font-size: 60px; text-align: center !important; font-weight: 800;}
.ourwork-link {position: relative; border: #faf9f5 1px solid; padding: 10px 20px 10px 20px; font-size: 40px; color: #faf9f5; font-weight: 800;}
.ourwork-link:hover {color: #212121;}
.ourwork-link: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;}
.ourwork-link:hover:after {position: absolute; content: ''; top:0; left: 0; width: 100%; height: 100%; background-color: #ffe28c;
  transform-origin:left; transition:width 0.25s ease; z-index:-1;}
.map {position: relative; max-width: 400px; margin-left: auto; margin-right: auto;}

.line1-d {margin-top: 0px;background-color: #999; position: relative; z-index: 999; display: block;
	width: 50%; border-bottom: solid 20px #212121;}
.line2-d {background-color: #999; position: relative; z-index: 999; display: block;
	margin-left: 50%; width: 50%; border-bottom: solid 20px #a32323;}
.divider-lines {margin-left: auto; margin-right: auto; position: relative; width: 80%; margin-top: 4%; margin-bottom: 4%;}



/*footer*/
#footer-wide {background-color: #212121;width: 100%;position: relative;	margin: 0px; z-index: 1;padding: 0%;font-size:0px; line-height: 0px; overflow: hidden;}
.f-inner {position: relative; z-index: -2; } 
.f-left {position: relative; overflow: hidden;font-size: 0px; line-height: 0px; z-index: -2;}    
.f-img-l {width: 47.67%;  margin: 1.60% 1.56255% 1.59% 50.76745%;  position: relative; z-index: -1;} 
.f-img-r1 {width: 19.356%;  left: 1.56255%; top: 12%;   position: absolute; opacity: 1; z-index: -1;} 
.f-img-r2 {width: 26.85%;  left: 22.38255%; top: 12%;   position: absolute; opacity: 1; z-index: -1;} 
.f-img-r3 {width: 26.85%;  left: 1.56255%; top: 56%;   position: absolute; opacity: 1;  z-index: -1;}
.f-img-r4 {width: 19.356%;  left: 29.87655%; top: 56%;   position: absolute; opacity: 1; z-index: -1;} 
.f-img-l img, .f-img-r1 img, .f-img-r2 img, .f-img-r3 img, .f-img-r4 img  {-webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .1;}
.f-left:hover img, .f-img-r1:hover img, .f-img-r2:hover img, .f-img-r3:hover img, .f-img-r4:hover img   {-webkit-filter: grayscale(1%); filter: grayscale(1%);}
.copyright {color: #ffe28c;	font-size: 12px;line-height: 12px;	text-align: center;	padding: 2% 2% 1% 2%;
	background-color: #2E2E2E;	width: 91.5%;margin-left: 3%;}
.f-content {position: absolute; padding: 20px 10% 0% 10%; width: 80%; top: 0; z-index: 19;}
.f-p, .f-content a {color: #ffe28c;}
.f-red-line {position: absolute;width: 50%; height: 50%;background: #a32323; top: 50%; left: 50%;}
.f-red-line2 {position: absolute;width: 50%; height: 50%;background: #a32323; top: 50%; left: 0%;}

.f-black-line {position: absolute;width: 50%; height: 50%;background: #212121; top: 0; left: 0;}
.f-white-line {position: absolute;width: 50%; height: 50%;background: #faf9f5; top: 0; left: 50%;}
.f-black-line2 {position: absolute;width: 50%; height: 50%;background: #212121; top: 0; left: 50%;}

.f-white-line2 {position: absolute;width: 50%; height: 50%;background: #faf9f5; top: 50%; left: 50%;}
.f-faded-line {position: absolute;width: 50%; height: 50%;background: #212121; top: 0%; left: 0%;}
.hidden-footer {overflow:hidden; max-width: 100%;position: relative; z-index: -9; width: 100%;background-color: #2E2E2E;}
.hidden-footer-inner {position: fixed;  bottom: 0; left: 0; z-index: -1; width: 100%;}
.hidden-footer-inner-rel {position: relative; width: 60%; margin-left: 20%; overflow: hidden;background-color: #faf9f5;}
.bk-image1ft {width: 100%;z-index: 7;position: relative;}
.bk-imagerel {position: relative; opacity: 0; width: 60%;}
.content-no-notes  {position: relative; overflow: hidden; padding: 0px; margin: 0px; width: 100%; height: 100%; }
.content-image{z-index: 2;position: absolute; width: 100%; height: auto; left: 0%; top: 0%; text-align: center; 
    -webkit-transition: left 300ms ease-in-out, top 300ms ease-in-out, width 300ms ease-in-out, visibility 0s ease 0s; 
    transition: left 300ms ease-in-out, top 300ms ease-in-out, width 300ms ease-in-out, visibility 0s ease 0s; }
.m-content-image{z-index: 2;position: absolute; width: 100%; height: auto; left: 0%; top: 0%; text-align: center; 
    -webkit-transition: left 300ms ease-in-out .5s, top 300ms ease-in-out .5s, width 300ms ease-in-out .5s, visibility 0s ease 0s; 
    transition: left 300ms ease-in-out .5s, top 300ms ease-in-out .5s, width 300ms ease-in-out .5s, visibility 0s ease 0s; }
.content-no-notes:hover .content-image, .content-no-notes:hover .m-content-image {position: absolute; width: 105%; opacity: 1; height: auto; top: -5%; left: -2.5%;}
.img-filler{opacity: 0;position: relative; z-index: 1; width: 100%; height: auto; left: 0%; top: 0%; text-align: center; }
/*.content-no-notes:hover .img-filler {opacity: 0;position: relative; width: 100%; height: auto; left: 0%; top: 0%; text-align: center; }*/
.content-hover  {position: absolute; height: 90%; width: 100%; z-index: 9;}
.content-hover-p, .content-hover-p-s  {opacity: 0 !important;text-align: left;z-index: 99999;margin: 0% 2% 4% 8%;width: 86%;
	padding-bottom: 0%;	color: #FFECB0;	-webkit-transition: all 200ms linear;	transition: all 200ms linear;}
.content-hover-p, .content-hover-p-s {-webkit-transition: all 200ms linear; transition: all 200ms linear;}
.content-hover-p {font-size: 18px; line-height: 18px;}
.content-hover-p-s  {font-size: 14px; line-height: 18px; padding-bottom: 15px;}
.content-hover-heading, .content-hover-heading-s {opacity: 0 !important; z-index: 7; text-align: left;  margin: 8% 2% 5px 8%; width: 86%;  color: #ffc107;}
.content-hover-heading {font-size: 30px; line-height: 30px; color: #ffc107;}   
.content-hover-heading-s {font-size: 20px; line-height: 20px;}
.content-no-notes:hover .content-hover-heading, .content-no-notes:hover .content-hover-heading-s, .content-no-notes:hover .content-hover-p, .content-no-notes:hover .content-hover-p-s 
{opacity: 1 !important; z-index: 99; visibility: visible !important;}
.content-no-notes:hover .content-topline, .content-no-notes:hover .content-bottomline,
.content-no-notes:hover .content-leftline, .content-no-notes:hover .content-rightline 
{opacity: .1 !important; visibility: visible !important;}
.content-topline {width:92%; margin: 4% !important; position: absolute; height: 1px; border-bottom: #ffc107 1px solid; z-index: 6; opacity: 0 !important;}
.content-bottomline{width:92%; margin: 4% !important; position: absolute; bottom: 0%; height: 1px; border-bottom: #ffc107 1px solid; z-index: 6; opacity: 0 !important;}
.content-leftline {width:1px;  height: 86%;margin: 4.5% 4% 4.5% 4% !important; position: absolute; top: 0; left: 0;  border-right: #ffc107 1px solid; z-index: 6; opacity: 0 !important;}
.content-rightline {width:1px;  height: 86%;margin: 4.5% 4% 4.5% 4% !important; position: absolute;top: 0; right: 0;  border-right: #ffc107 1px solid; z-index: 6; opacity: 0 !important;}
.images-1, .images-4 {width: 29%; padding: 0; line-height: 1px;}
.images-2, .images-3 {width: 19%; padding: 0; line-height: 1px;}
.images-1 {position: relative;}
.images-2 {position: absolute; top: 0; left: 30%;}
.images-3 {position: absolute; top: 10%; left: 50%}
.images-4 {position: absolute; top: 10%; left: 71%;}


.trapezoid-l-m, .m-trapezoid-l-m  {z-index: 6;visibility: hidden; transition: width  300ms  linear  0s;
line-height: 0px;z-index: 6; position: absolute;	width: 62%;	height: 100%;opacity: 0;background: #212121;}
.trapezoid-l-m:after, .m-trapezoid-l-m:after {z-index: 6; position: absolute;content: ""; position: absolute; left: 100%;
    top: 0;  border-left: 25.3vw solid #212121;  border-top: 35vw solid transparent;  border-bottom: 60vw solid transparent;
  width: 0;  height: 100%;}
.content-no-notes:hover .trapezoid-l-m, .content-no-notes:hover .m-trapezoid-l-m  {width: 82%; opacity: .95 !important; visibility: visible;}
/*masthead images*/
#masthead-wide .triangle-r-s, #masthead-wide .content-topline, #masthead-wide .content-bottomline, 
#masthead-wide .content-leftline, #masthead-wide  .content-rightline, #masthead-wide .content-hover-heading-s, #masthead-wide .content-hover-p-s {opacity: 0; visibility: hidden;
	transition: opacity 300ms linear .5s, visibility 0s ease 0s;}
.m-trapezoid-l-m {opacity: 0; width: 15%;transition: opacity 300ms linear .5s, width 300ms ease-in-out .5s, visibility 0s ease 0s;}
.leftcol, .leftcol-top {left: 0px; width: 45%; float: left; text-align: left; padding: 0% 5% 3% 0%; }
.rightcol, .rightcol-small, .rightcol-top, .rightcol-bottom  {float: right; width: 50%; padding: 4% 0%; text-align: left;}
.rightcol-bottom {padding-bottom: 0%;}
.rightcol-top {padding: 4% 0% 0% 0%}
.leftcol-top {padding: 0% 5% 0% 0%;}
.rightimg-60 {float: right;width: calc(100% - 60px); position: relative; margin: 3% 60px 60px 0%;}
.rightimg-60:after {content: "";  position: absolute; bottom: -60px; right: -60px;width: 0;height: 0;border-bottom: 16vw solid #FFE28C;
	border-left: 27vw solid transparent; z-index: 1; opacity: 1;}
.leftimg-60 {float: left;position: relative; width: calc(100% - 60px); margin: 5% 0px 60px 60px;}
.leftimg-60:after {content: "";  position: absolute; bottom: -60px; left: -60px;width: 0;height: 0;border-bottom: 16vw solid #FFE28C;
	border-right: 27vw solid transparent; z-index: 1; opacity: 1;}
.featured-image, .featured-image-l {width: calc(73% - 30px); margin-bottom: 10%; margin-left: auto; margin-right: auto; position: relative; z-index: 2;}	
.featured-image:after {content: "";  position: absolute; bottom: -30px; right: -30px;width: 0;height: 0;border-bottom: 16vw solid #ffc107;
	border-left: 27vw solid transparent; z-index: 1; opacity: .5;}
.featured-image-l:after {content: "";  position: absolute; bottom: -30px; left: -30px;width: 0;height: 0;border-bottom: 16vw solid #ffc107;
	border-right: 27vw solid transparent; z-index: 1; opacity: .5;}	

/* ---------------------- css styles for slider ---*/
* { margin: 0; padding: 0; }
.sliderouter {padding: 3% ;z-index: 2;background-color: #faefe7;	position: relative;}
.sliderborder {/*margin-bottom: 30px;*/padding: 60px; overflow: hidden;	position: relative;}
.testimonial-triangle {content: "";  position: absolute; bottom: 0px; right: 0px;width: 0;height: 0;border-bottom: 220px solid #ffe28c;
	border-left: 220px solid transparent; z-index: -2; }	
.testimonial-trapezoid {transition: width 2s  linear  .5s;
 z-index: 1;top: 0px; left: 0px; position: absolute; width: 14.5%; height: 100%;background: #212121;}
.testimonial-trapezoid:after {z-index: 1; position: absolute; content: ""; left: 100%;
    top: 0;  border-left: 23.5vw solid #212121;  border-top: 30vw solid transparent;  border-bottom: 20vw solid transparent;
  width: 0;  height: 100%;}
.description {position: absolute; top: 0; left: 0; width: 100%;  z-index: 1000;}
.description-text {float: left; padding: 2% 0%; width: 88%; z-index: 4; transition: opacity .2s;}
.quoteleft {width: 5%;float: left;font-size: 90px; color: #212121; line-height: 90px; z-index: 9;}
.quoteright {float: right; width: 5%; text-align: right; vertical-align: bottom; font-size: 90px; color: #212121; line-height: 90px; z-index: 9;}
.sliderinner {width: 100%;height: 100%;overflow: hidden;position: relative; z-index: 2;}
.sliderinner>ul {list-style: none;height: 100%;width: 500%; overflow: hidden; position: relative; left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);}
.sliderinner>ul>li {width: 20%; float: left; position: relative;}
.slider input[type=radio] {position: absolute;left: 50%; bottom: 15px; z-index: 100; visibility: hidden;}
.slider label {position: absolute; left: 50%; bottom: 15px; z-index: 100; width: 12px; height: 12px; background-color:#faf9f5;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    transition: background-color .2s;}
.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #212121; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #212121; }
.slider input[type=radio]#control3:checked~label[for=control3] { background-color: #212121; }
.slider input[type=radio]#control4:checked~label[for=control4] { background-color: #212121; }
.slider input[type=radio]#control5:checked~label[for=control5] { background-color: #212121; }
.slider label[for=control1] { margin-left: -36px }
.slider label[for=control2] { margin-left: -18px }
.slider label[for=control4] { margin-left: 18px }
.slider label[for=control5] { margin-left: 36px }
.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }
 
/*tabs css*/
ul.tabs {position: relative;width: 100%;overflow: hidden;margin: 2% 0% 2% 0%;font-weight: 300;
background-color: #212121;margin: 0%;	padding: 1px 1px 0px 1px;	float: left;list-style: none;height: 72px;width: calc(50% - 2px);}
.redblock {position: relative; background-color: #a32323; width: calc(50% - 2px); margin-left: 50%; height: 72px; padding: 1px 1px 0px 1px;}
ul.tabs li {float: left;margin: 0;cursor: pointer;padding: 0px 10px 0px 10px;height: 72px;line-height: 52px; font-size: 20px;	border-top: 1px solid #212121;
	border-left: 1px solid #212121;	border-bottom: 1px solid #212121;background-color: #212121;	color: #faf9f5;
	position: relative;border-right: 1px dotted rgba(255,255,255, 0.3); padding: 8px 15px 10px 15px;}
.tabstext {background-color: #212121;color: #faf9f5;height: 72px;line-height: 52px;font-size: 20px; margin-left: 30px;}
ul.tabs li:hover, ul.tabs li:hover .tabstext {background-color: #ffe28c; color: #212121;}
ul.tabs li.active, ul.tabs li.active .tabstext {background-color: #faf9f5;color: #212121;border-bottom: 1px solid #faf9f5;}
ul.tabs li.active {display: block;}
.tab_last { border-right: 1px solid #212121;}
.tab_container {padding: 1% 0% 0% 0%;position: relative;border-top: none;clear: both;float: left;width: 100%; /*overflow: hidden;*/}/*changed from auto*/
.tab-content {padding: 4% 0 0 0;	display: none;}
.tab_container h2 {	position: absolute; top: -75px; z-index: 9; font-size: 35px; line-height: 35px;}

.accordion { display: none; } 
.circles:before{content: "\29BF";}
.tick:before {content: "\2713";}
.plus:before {content: "\2b";}
 
 /* -----------smaller pc screens View----------- */ 
@media
	screen and (max-width:1700px) {
.m-words1 {font-size: 100px; line-height: 100px;}
.m-words2 {font-size: 70px; line-height: 70px;}
.footer-r {margin-top: 80px; width: 40%; padding: 2% 9% 1% 1%;}

}/*end1700px*/ 
 
 /* -----------smaller pc screens View----------- */ 
@media
	screen and (max-width:1600px) {
.m-words1 {font-size: 90px; line-height: 90px;}
.m-words2 {font-size: 65px; line-height: 65px;}
.featured-image, .featured-image-l {width: calc(85% - 30px);}
.linkarrow:after {right: 10px; padding-top: 3%;	font-size: 20px;}
.hidden-footer-inner-rel {width: 80%; margin-left: 10%;} 
.bk-imagerel {width: 80%;}
.featured-image-p{width: calc(90% - 30px); margin-bottom: 30px; margin-left: 10%;}	
.featured-image-p:after  {bottom: -30px; right: -30px;}
.featured-image-p-r{width: calc(90% - 30px); margin-bottom: 30px; margin-left: 30px;}	
.featured-image-p-r:before  {bottom: -30px; left: -30px;}

}/*end1600px*/ 

/* -----------Menus for smaller pc screens View----------- */ 
@media
	screen and (max-width:1400px) {
.m-words1 {font-size: 80px; line-height: 80px;}
.m-words2 {font-size: 50px; line-height: 50px;}
.content-hover-p-s { margin: 0% 2% 2% 8%;  font-size: 11px; line-height: 12px;}
.content-hover-heading-s { margin: 8% 2% 3% 8%; font-size: 13px; line-height: 14px;}
.content-hover-heading {font-size: 25px; line-height: 25px;}   
.ourwork-link, .ourwork-link:hover {font-size: 20px;}
.link-inner {margin: 0px; padding: 10px 0px 0px 0px; font-size: 50px;}
.featured-image, .featured-image-l {width: calc(90% - 30px);}
.f-p, .f-content a {font-size: 14px; line-height: 18px;}
.f-content-l {width: 48%; padding-right: 2%; float: left;}
.f-content-r {width: 48%; padding-left: 2%; float: right;}
.images-1, .images-4 {width: 58%;}
.images-2, .images-3 {width: 38%;}
.images-1 {position: relative;}
.images-2 {position: absolute; top: 0%; left: 62%;}
.images-3 {position: relative; margin-top: 4%; left: 0%}
.images-4 {position: absolute; top: 52.42%; left: 42%;}

}

/* -----------Menus for smaller pc screens View----------- */ 
@media
	screen and (max-width:1200px) {
	
.megamenu-i {padding: 5% 0% 5% 0%;}	
.megamenu-inner {width: 88%; margin: 0% 4% 0% 4%; padding: 5% 2% 5% 2%;}
.cbp-hropen .megamenu .m-svs-5, .cbp-hropen .megamenu .m-svs-6, .cbp-hropen .megamenu .m-svs-7 {margin-top: 7%;}	
.m-words1 {font-size: 70px; line-height: 70px;}
.m-words2 {font-size: 50px; line-height: 50px;}
.rightimg-60 {margin: 3% 40px 40px 0%;}
.rightimg-60:after {bottom: -40px; right: -40px;border-bottom: 16vw solid #FFE28C;border-left: 27vw solid transparent; }
.leftimg-60 {margin: 5% 0px 40px 40px;}
.leftimg-60:after {bottom: -40px; left: -40px;border-bottom: 16vw solid #FFE28C;	border-right: 27vw solid transparent; }
.m-triangle, .m-triangle-i {border-top: 150px solid #ffc107;border-left: 110px solid transparent;}
#masthead-wide:hover .m-triangle, #masthead-wide:hover .m-triangle-i {border-top: 70px solid #ffc107; border-left: 52px solid transparent;}
}

/* -----------Menus for smaller pc screens View----------- */ 
@media
	screen and (max-width:1168px) {
.p-large {font-size: 22px; line-height: 30px; z-index: 99;}
h1, h1 .nobreak {font-size: 44px; line-height: 44px;}
h1 {padding-bottom: 3%;}
.h1small, .h1small .nobreak {font-size: 34px;}
.h1line1 {width: 130px; border-bottom: solid 35px #212121;}
.h1line2 {margin-left: 130px; width: 130px; border-bottom: solid 35px #a32323;}
.social {background: #ffe28c;}
#footer .nobk {width: 98.4%; padding-left: 1.6%;}
.hidden-footer-inner-rel {width: 100%; margin-left: 0%;} 
.bk-imagerel {width: 100%;}
.f-p, .f-content a, .copyright {font-size: 13px; line-height: 13px;}
.f-content h2 {font-size: 20px; line-height: 20px; margin-bottom: 10px !important;}
.f-content a {line-height: 28px;}
}
@media
	screen and (max-width:1094px) 
{
ul.tabs {height: 42px;}
.redblock {height: 42px;}
ul.tabs li {padding: 2px 15px 10px 15px;}
ul.tabs li {height: 32px;line-height: 32px; font-size: 14px;}
.tab_container h2 {top: -42px; font-size: 22px; line-height: 22px;}
.tabstext {height: 42px; line-height: 32px;font-size: 14px; margin-left: 10px;}
.m-svs-link {padding: 3%; font-size: 12px;}
.linkarrow:after {right: 5px; padding-top: 3%;	font-size: 18px;}
}/*end 1094*/


/* -----------Smaller pc screens View----------- */ 
@media
	screen and (max-width:1068px) {
/*smaller size android 1024 x 49*/
.cbp-hropen .megamenu .megamenu-i .menu-triangle {border-bottom: 280px solid #212121;
    border-left: 220px solid transparent;}
.megamenu-i {padding: 4% 0% 4% 0%;}	
.megamenu-inner {width: 88%; margin: 0% 4% 0% 4%; padding: 5% 2% 5% 2%;}
.m-svs-5, .m-svs-6, .m-svs-7 {margin-top: 5%;}	
/*#logo {	width: 30%;}*/
p, strong, .listitem, .bold, .content-wide a {font-size: 16px;  padding-bottom: 12px; line-height: 18px;}
.content-wide a {padding-bottom: 0px;}
.logo, .logo2  {font-size: 18px; line-height: 18px;}
.telephone, .telmobile{font-size: 14px !important;	line-height: 16px; padding-top: 8px;}
.mainmenu-u > ul > li > a {padding: 10px 10px 42px 10px; font-size: 16px;}
h1, h1 .nobreak {font-size: 36px; line-height: 36px;}
.h1small, .h1small .nobreak {font-size: 25px; line-height: 25px; }
.p-heading-white {font-size: 30px; line-height: 30px; padding-bottom: 10px;}
.p-white { font-size: 16px;  padding-top: 2%; line-height: 22px;}
.p-large {font-size: 20px; line-height: 26px; z-index: 99;}
#masthead-wide:after {border-bottom: 100px solid #ffc107;	border-left: 100px solid transparent;}
.m-words1 {font-size: 60px; line-height: 60px;}
.m-words2 {font-size: 40px; line-height: 40px;}
.content-hover-p {font-size: 16px; line-height: 16px;}
.content-hover-heading {font-size: 25px; line-height: 25px;}   
.featured-image, .featured-image-l {width: calc(90% - 20px);}
.featured-image:after {border-bottom: 20vw solid #ffc107;border-left: 32vw solid transparent;}	
.featured-image-l:after {border-bottom: 20vw solid #ffc107;border-right: 32vw solid transparent;}
.rightcol-small {width: 100%; padding-right: 0%;}
.url-r {font-size: 12px; line-height: 12px;}
.mobile-text {padding: 30px 0px 30px 0px; font-size: 16px;line-height: 16px;}
[id^=r-mobile-toggle]:checked ~ .mobile-con-r {top: 128px;}
[id^=mobile-toggle]:checked ~ .mobile-con-l {top: 128px;}

}/*end smaller pc */
@media
	screen and (max-width:1024px) {
/*ipad landscape*/
@keyframes m-red-l2-a {0% {opacity: 0;)} 65% {opacity: 0;} 75% {opacity: 1;} 100% {opacity: 1;}}
@keyframes m-black-r-a {0% {opacity: 0;}  72% {opacity: 0;}  82% {opacity: 1;} 100% {opacity: 1;}}
@keyframes m-red-r-a {0% {opacity: 0;} 30% {opacity: 0;} 46% {opacity: 1;} 100% {opacity: 1;}}
}


/* -----------Menus for smaller pc screens View----------- */ 
@media
	screen and (max-width:968px) {
.m-words1 {top: 22%;font-size: 50px; line-height: 50px;}
.m-words2 {top: 54%;font-size: 30px; line-height: 30px;}
/*.menu-trapezoid {width: 38%;}*/
p, strong, .listitem, .bold, .content-wide a, .service-p {font-size: 16px;  line-height: 1.3}
.p-large {font-size: 20px; line-height: 24px; z-index: 99;}
.image-l {	width: 50%; border: #212121; border-width: .2%; border-style: solid;}
h2 { font-size: 28px; padding-bottom: 2.5%; padding-top: 1.4%;}
#footer h2 {margin-bottom: 10px;}
.images1, .images2, .images3, .images4, .images5, .images6 {width: 80%; margin: 1% 10% 0% 10%; padding: 0; line-height: 1px;}
.images2 .img-filler, .images3 .img-filler  { margin: -15% auto;}
.images2 .content-image {top: -17%;}
.images2 > .content-no-notes:hover  .content-image {top: -22%;}
.images3 .content-image {top: -22%;}
.images3 > .content-no-notes:hover  .content-image {top: -27%;}
.featured-image, .featured-image-l {margin-bottom: 40px;}
.testimonial-trapezoid:after {border-left: 23.5vw solid #212121; border-top: 70vw solid transparent; border-bottom: 20vw solid transparent;}
.testimonial-triangle {border-bottom: 320px solid #212121;border-left: 180px solid transparent;}
.quoteleft, .quoteright {font-size: 70px; line-height: 70px;}
.m-svs-link {padding: 3%; font-size: 12px;}
.linkarrow:after {right: 4px; padding-top: 3%;	font-size: 15px;}
.f-content h2 {font-size: 16px; line-height: 16px; margin-bottom: 0; padding-top: 0%;}
.f-content {padding: 10px 10% 0% 10%;}
.f-p, .f-content a, .copyright {font-size: 12px; line-height: 12px;}
.f-content a {line-height: 28px;}

}/*end smaller pc */

/* -----------Tablet View----------- */ 
@media
	screen and (max-width:768px) {
.only768 {display: block;}	
.pc-only {display: none;}
#menuwide{width: 100%;position: relative;}
#menuline {width: 100%; margin: 0%;}	
/*#logo {width: 80%;}*/
.nonmobilemenu {display: none;}
.tablet-mob {display: block;}
.toggle {display: block;  color: #212121; 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: #212121; 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: #212121; 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: #212121; 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: #212121; 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: #a32323;}
.menulines:hover .open[class^=line] {background-color: #a32323;}
.menulines .open.line1, .menulines .open.line3b {z-index: 9999;background: #212121; -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
.menulines .open.line1b,.menulines .open.line3 {z-index: 9999;background: #212121; -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: #212121; }
.menulines .open.line2b {left: 100%; opacity: 0; background: #212121; }
.menulines .open.line3 {margin-left: 0%; width: 50%;left: 8px; top: 29px;background: #212121; }
.menulines .open.line3b {left: calc(50% + 1px); top: 29px;background: #212121; }
.mainmenu {text-align: right;font-size: 20px; line-height: 40px; float: right; width: 50px; height: 42px;}

.menubk-triangle {opacity: 0;position: absolute; top: 0%; right: 0%;width: 0;height: 0;border-top: 200px solid #faf9f5;  
	border-left: 112px solid transparent; transition: opacity .2s, visibility 0s; z-index: 9998; visibility: hidden;}
[id^=drop]:checked + ul ~ .menubk ~ .menubk-triangle {opacity: 1;visibility: visible; z-index: 9998; animation: loadtri .25s;}	
@keyframes loadbk1 {0% {transform: translate3d(-100%,0,0);} 100% {transform: translate3d(0,0,0);}}
@keyframes loadbk2 {0% {transform: translate3d(-100%,0,0);} 100% {transform: translate3d(0,0,0);}}
@keyframes loadbk3 {0% {transform: translate3d(-100%,0,0);} 100% {transform: translate3d(0,0,0);}}
@keyframes loadbk4 {0% {transform: translate3d(-100%,0,0);} 100% {transform: translate3d(0,0,0);}}
@keyframes loadtri {0% {opacity: 0;} 100% {opacity: 1;}}

[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-color: #ffe28c;display: block; opacity: 1; visibility: visible; overflow: visible; animation: ul-a 21.2s;}/*open main menu*/
@keyframes ul-a {0% {opacity: 0;} 1% {opacity: 1;} 100% {opacity: 1;}}
.mainmenu-u > ul {padding: 20% 0% 0% 0%;}
.mainmenu-u {overflow: hidden; width: 97%; padding: 0% 3% 0% 0%;}
/*
.navfooter-image {margin-top: 10%; width: 0%; -webkit-transition: width .5s, visibility 0s ease 0s; transition: width .5s, visibility 0s ease 0s;}
[id^=drop]:checked + ul .navfooter-image {width: 100%; overflow: hidden;}
*/
.navfooter-image {animation: navfootera 6s 1.1s;margin-top: 10%; width: 100%; transform: translate3d(0,0,0); transition: visibility 0s ease 0s;}
[id^=drop]:checked + ul .navfooter-image {overflow: hidden; transform: translate3d(0,0,0); animation: navfootera .6s;}
@keyframes navfootera {0% {transform: translate3d(-100%,0,0);} 100% {transform: translate3d(0,0,0);}}
.navfooter-border-r {position: relative;float: right; width: 50%; height: 30px; background-color: #ffe28c; z-index: 10;}
.navfooter-border-l  {position: relative;float: left; width: 50%; height: 30px; background-color: #a32323; z-index: 10; }
.navfooter-border-rl  {position: absolute;float: right; width: 50%; height: 30px; background-color: #212121; z-index: 90 !important; top: 30px; left: 50%; opacity: 1;}
.menunav li:nth-child(7) {margin-bottom: 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: #212121; z-index: 99999; width: 70%; height: 100vh;-webkit-transform: skew(35deg) translate3d(-300%,0,0);
	   -ms-transform: skew(35deg) translate3d(-300%,0,0); transform: skew(35deg) 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(35deg) translate3d(300%,0,0);
	   -ms-transform: skew(35deg) translate3d(300%,0,0); transform: skew(35deg) translate3d(300%,0,0);}
[id^=drop]:checked + ul ~ div ~ div {visibility: visible;}	
[id^=drop]:checked + ul ~ .menubk  {display: block;}	
[id^=drop]:checked + ul ~ .menubk > .menubk1 {visibility: visible; width: 100%; animation: menubk1-a 21.1s; }	
[id^=drop]:checked + ul ~ .menubk > .menubk2 {visibility: visible; width: 100%; animation: menubk2-a 21.1s;}	
@keyframes menubk1-a {0% {transform: skew(35deg) translate3d(0,0,0);}  14% {transform: skew(35deg) translate3d(-300%,0,0);}  100% {transform: skew(35deg) translate3d(-300%,0,0);}}
@keyframes menubk2-a {0% {transform: skew(35deg) translate3d(0,0,0);}  14% {transform: skew(35deg) translate3d(300%,0,0);}  100% {transform: skew(35deg) translate3d(300%,0,0);}}
@keyframes menu-trap {0% {transform: translate3d(-200%,0,0);}   4% {transform:  translate3d(0,0,0);}  100% {transform:  translate3d(0,0,0);}}
.mainmenu-u > ul > li > a {margin: 2% 0px 2% 40%; padding: 2%; font-size: 28px; overflow: hidden;}
.menunav > li > div{top: 0px; left: 0%; padding-bottom: 0%;}/*stops overwriting next option*/




.menu-trapezoid {width: 20%;}





.megamenu {visibility: hidden; }
.cbp-hropen .megamenu .megamenu-i .menu-triangle {border-bottom: 260px solid #212121; border-left: 151px solid transparent;}
.cbp-hropen .megamenu {position: relative !important; margin-left: 0%;}
.m-svs-link {font-size: 11px; line-height: 11px;}
.megamenu .m-svs-1, .megamenu .m-svs-2, .megamenu .m-svs-3, .megamenu .m-svs-4 {width: 42.5%; visibility: hidden;}
.m-svs-3, .m-svs-4 {margin-top: 7%; visibility: hidden;}
.cbp-hropen .megamenu .m-svs-1 {visibility: visible; width: 42.5%; margin: 0% 5% 0% 5%;}
.cbp-hropen .megamenu .m-svs-2 {visibility: visible; width: 42.5%; margin: 0% 5% 0% 0%;}
.cbp-hropen .megamenu .m-svs-3 {visibility: visible; width: 42.5%; margin: 7% 5% 0% 5%;}
.cbp-hropen .megamenu .m-svs-4 {visibility: visible; width: 42.5%; margin: 7% 5% 0% 0%;}
.cbp-hropen .megamenu .m-svs-5 {visibility: visible; width: 42.5%; margin: 7% 5% 0% 5%;}
.cbp-hropen .megamenu .m-svs-6 {visibility: visible; width: 42.5%; margin: 7% 5% 0% 0%;}
.cbp-hropen .megamenu .m-svs-7 {visibility: visible; width: 42.5%; margin: 7% 5% 0% 5%;}
/*prices*/
[class^=m-prices] {position: relative; width: 42.5%; text-align: center;}
.cbp-hropen .megamenu .m-prices-1, .m-prices-1 {width: 42.5%; margin: 0% 5% 0% 5%;}
.cbp-hropen .megamenu .m-prices-2, .m-prices-2 {width: 42.5%; margin: 0% 5% 0% 0%;}
.cbp-hropen .megamenu .megamenu-i .menu-triangle {border-bottom: 200px solid #212121; border-left: 116px solid transparent;}
.m-svs-link {font-size: 12px; line-height: 12px;}
#logo {margin-left: 3%;}
.nobk {width: 94%;}
.bk-image1 {margin-bottom: 0px;}
/*main masthead*/
.m-words1 {font-size: 40px; line-height: 40px; margin-left: 1.41%;}
.m-words2 {font-size: 25px; line-height: 25px; top: 46%;margin-left: 1.41%;}
.m-triangle, .m-triangle-i {border-top: 120px solid #ffc107;border-left: 88px solid transparent;}
.m-triangle, .m-triangle-i {border-top: 190px solid #ffc107; border-left: 63px solid transparent;}

#masthead-wide:hover .m-triangle {border-top: 60px solid #ffc107; border-left: 44px solid transparent;}
#masthead-wide:hover .m-triangle {border-top: 140px solid #ffc107; border-left: 46px solid transparent;}
.m-trapezoid::after, .m-trapezoid2::after { border-left: 25.3vw solid #212121;  border-top: 75vw solid transparent;  border-bottom: 60vw solid transparent;}
.m-black-bk {width: 42.5%;}
.m-red-l, .m-white-l {width: 76.6%;}
.m-white-l {transform: translate3d(-44.5%,0,0);animation: m-white-l-a 9s 2s linear;}
.m-white-l {transform: translate3d(-44.5%,0,0);animation: m-white-l-a 9s 2s linear;}
.m-black-r {left: 13.5%;top: 50%;width: 86.5%;}
.m-red-r {width: 57.4%;transform: translate3d(74%,0,0);}

@keyframes m-red-l-a {0% {transform: translate3d(-105%,0,0);} 16% {transform: translate3d(0,0,0);} 80% { transform: translate3d(0,0,0);} 96% {transform: translate3d(-105%,0,0);} 100% {transform: translate3d(-101.7%,0,0);}}
@keyframes m-white-l-a {0% {transform: translate3d(0,0,0);} 80% { transform: translate3d(0,0,0);} 96% {transform: translate3d(-105%,0,0);}  100% {transform: translate3d(-44.5%,0,0);}}
@keyframes m-red-r-a {0% {transform: translate3d(-100%,0,0);} 9.6% {transform: translate3d(-100%,0,0);} 33.6% {transform: translate3d(74%,0,0);} 100% {transform: translate3d(74%,0,0);}}
@keyframes m-red-l2-a {0% {transform: translate3d(-200%,0,0)} 64% {transform: translate3d(-200%,0,0)} 74% {transform: translate3d(0,0,0)} 100% {transform: translate3d(0,0,0)}}
@keyframes m-black-r-a {0% {transform: translate3d(-1900%,0,0);} 67% {transform: translate3d(-200%,0,0)} 78% {transform: translate3d(0,0,0)}; 100% {transform: translate3d(100%,0,0);}}

.m-filler-img {width: 230%;}
.m-img-r1, .m-img-r3 {left: -50%; width: 0%; z-index: -1;}/*hide behind larger image; so will show if enlarge screen*/
.m-img-l {z-index: 1;display: block;width: 38%;  margin: 3% 3% 3% 3%;  position: relative; animation-name: m-img-l-a1, m-img-l-a2; animation-duration: 7s, 20.1s; animation-timing-function: linear, linear;} 
.m-img-l-img {line-height: 0px; font-size: 0px !important; display: block;}
.m-red-l2 {width: 42.5%;}
.m-img-1b {z-index: 1;width: 52.9%;position: relative;left: 0%; animation-name: m-img-1b-a1, m-img-1b-a2; animation-duration: 7s, 20.1s; animation-timing-function: linear, linear;} 
.m-img-lb-img {transform:  translate3d(0%,0,0);line-height: 0px; font-size: 0px !important; display: block;}
.m-img-r2 {z-index: 1;width: 52.9%; top: 43.6%; left: 41.1%; margin: 2.60% 3% 2.6% 3%; animation-name: m-img-r2-a1, m-img-r2-a2; animation-duration: 7s, 20.1s; animation-timing-function: linear, linear;} 
.m-img-r4 {z-index: 1;width: 38.1%; left: 58.9%; top: 3.5%; animation-name: m-img-r4-a1, m-img-r4-a2; animation-duration: 7s, 20.1s; animation-timing-function: linear, linear;} 

@keyframes m-img-1b-a1 {0% {transform: translate3d(-100%,0,0); opacity: 0;} 65.71429% { transform:  translate3d(-100%,0,0); opacity: 0;} 82.85714% { transform:  translate3d(0,0,0); opacity: 1;} 100% {opacity: 1;}}
@keyframes m-img-1b-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);}  63% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 69% {-webkit-filter: grayscale(0%); filter: grayscale(0%);}}
@keyframes m-img-r2-a1 {0% {opacity: 0;} 77.14286% {opacity: 0;  transform:  translate3d(-20%,0,0);} 91.42857% {opacity: 1;  transform:  translate3d(0,0,0);} 100% {opacity: 1;  transform:  translate3d(0,0,0);}}
@keyframes m-img-r2-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 63% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 69% {-webkit-filter: grayscale(0%); filter: grayscale(0%);}}
@keyframes m-img-r4-a1 {0% {opacity: 0;} 71.42857% {opacity: 0;  transform:  translate3d(-20%,0,0);} 85.71429% {opacity: 1;  transform:  translate3d(0,0,0);} 100% {opacity: 1;  transform:  translate3d(0,0,0);}}
@keyframes m-img-r4-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 63% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 69% {-webkit-filter: grayscale(0%); filter: grayscale(0%);} }

@keyframes m-img-l-a1 {0% {transform: translate3d(-100%,0,0); opacity: 0;} 88.57143% { transform:  translate3d(-100%,0,0); opacity: 0;} 100% { transform:  translate3d(0,0,0); opacity: 1;} 100% {opacity: 1;}}
@keyframes m-img-l-a2 {0% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 63% {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 69% {-webkit-filter: grayscale(0%); filter: grayscale(0%);}}


/*end masthead*/
.f-img-l {width: 94%;  margin: 3%; position: relative;} 
.f-img-r1 {width: 45.5%;  left: 3%; top: 5.9%; position: absolute;} 
.f-img-r2 {width: 45.5%;  left: 51.5%; margin-top: 3%; position: relative;} 
.f-img-r3 {width: 45.5%;  left: 3%; top: 56%; position: relative;}
.f-img-r4 {width: 45.5%;  left: 51.5%; top: 80.24%; position: absolute;} 
.copyright {margin-left: 6%; width: 86.5%; margin-top: 5%; font-size: 10px; line-height: 10px;}
.f-content {padding: 10% 10% 0% 10%;}
.f-content h2 {	font-size: 26px; line-height: 26px; margin-bottom: 10px;}
.f-p, .f-content a {font-size: 16px; line-height: 18px;}
.f-content a {font-size: 16px; line-height: 28px;}

.link-inner {font-size: 40px; font-weight: 800;}
.ourwork-link, .ourwork-link:hover {font-size: 22px;font-weight: 600;}
.h1line1 {width: 110px; border-bottom: solid 25px #212121;}
.h1line2 {margin-left: 110px; width: 110px; border-bottom: solid 25px #a32323;}
h1, h1 .nobreak{font-size: 32px;}
.h1small, .h1small .nobreak {font-size: 26px; padding-bottom: 10px;}
h1{padding: 2% 0% 2% 0%;}
.telephone, .telmobile{font-size: 14px !important;	line-height: 16px;}
p, strong, .listitem, .bold, .content-wide a, .service-p{padding-bottom: 2%; font-size: 16px;}
.content-wide a {padding-bottom: 0px;}
.listitem {font-size: 16px;	padding-left: 5%; padding-bottom: 2%;}
.p-heading-white {font-size: 30px; line-height: 30px; padding-bottom: 10px;}
.p-white { font-size: 16px;  padding-top: 2%; line-height: 22px;}
h2 {font-size: 26px;}
#footer h2 {text-align: left; margin-bottom: 10px;}
.h2large, .h2large1 {font-size: 35px !important;}
h4 {padding: 2%; text-align: center; font-size: 30px;}
.quotation { font-size: 14px; line-height: 16px;}
.quotation-person {font-size: 14px;}
#masthead-wide:after {border-bottom: 80px solid #ffc107;	border-left: 80px solid transparent;}
.rightcol {padding: 6% 0%;}
.rightcol-bottom {padding: 6% 0% 0% 0%;}
.quoteleft, .quoteright {font-size: 50px;  line-height: 50px;}
.description-text {padding-top: 3%;}
.sliderborder {padding: 40px;}
.rightimg-60 {width: calc(100% - 30px); margin: 3% 30px 30px 0%;}
.rightimg-60:after {bottom: -30px; right: -30px;border-bottom: 16vw solid #FFE28C;border-left: 27vw solid transparent; }
.leftimg-60 {width: calc(100% - 30px); margin: 5% 0px 30px 30px;}
.leftimg-60:after {bottom: -30px; left: -30px;border-bottom: 16vw solid #FFE28C;	border-right: 27vw solid transparent; }
.ourwork-r, .ourwork-l, .footer-border-l, .footer-border-r, .footer-border-r1 {height: 50px;}
.footer-r {margin-top: 30px; padding: 0% 10% 1% 1%; width: 39%;}
.tabstext {display: none;}
.url-r  {left: 10%;}
.h2-p-l, .h2-p-r {font-size: 30px !important;}
.mobile-text {padding: 20px 0px 20px 0px; font-size: 16px;line-height: 16px;}
[id^=r-mobile-toggle]:checked ~ .mobile-con-r {top: 108px;}
[id^=mobile-toggle]:checked ~ .mobile-con-l {top: 108px;}
label[for=mobile-toggle], label[for=mobile-toggle2], label[for=mobile-toggle3] {width: 25%; top: 50px;}
label[for=r-mobile-toggle], label[for=r-mobile-toggle2], label[for=r-mobile-toggle3] {width: 25%; top: 50px;}
[id^=mobile-toggle]:checked ~ .mobile-con-l {width: 25%; }
[id^=r-mobile-toggle]:checked ~ .mobile-con-r {width: 25%;}

}/*end 768 tablet */

/* -----------small screen View----------- */ 
@media
	screen and (max-width:660px) 
	{
.only660 {display: block;}
.above660 {display: none;}
/*#masthead-wide:after{border-bottom: 60px solid #ffc107;	border-left: 60px solid transparent;}*/
.m-words1 {font-size: 35px; line-height: 35px; top: 30%;}

h1, h1 .nobreak {font-size: 22px;}
.h1small, .h1small .nobreak {font-size: 19px;}
h1 { padding: 2% 0% 2% 0%;  }
.rightimg-60 {width: calc(100% - 20px); margin: 3% 20px 20px 0%;}
.rightimg-60:after {bottom: -20px; right: -20px;border-bottom: 16vw solid #FFE28C;border-left: 27vw solid transparent; }
.leftimg-60 {width: calc(100% - 20px); margin: 5% 0px 20px 20px;}
.leftimg-60:after {bottom: -20px; left: -20px;border-bottom: 16vw solid #FFE28C;	border-right: 27vw solid transparent; }
.ourwork-r, .ourwork-l, .footer-border-l, .footer-border-r, .footer-border-r1 {height: 40px;}
.content-hover-heading-s {margin: 8% 2% 3% 8%; font-size: 10px;  line-height: 10px;}
.content-hover-p-s {margin: 0% 2% 2% 8%; font-size: 10px;line-height: 10px;}
.left-coloured, .right-coloured  {width: 100%;}

/*tabs*/
.accordion { display: block; }
.tab_container button {-webkit-transition: all .4s .15s; transition: all .4s .15s;display: block;  position: relative;background-color: #474747; margin-bottom: 5%;}
.tabs, .redblock {display: none;}
.tab_container button.accordion {position: relative;cursor: pointer; padding: 0px; width: 100%;  border: none;
    text-align: left; outline: none;  font-size: 15px;  transition: 0.4s;}
.tab_container button::after {-webkit-transition: all .4s .15s; transition: all .4s .15s;position: absolute; right: 0;  top: 10px;
    display: block; width: 3em; height: 60px; line-height: 60px; text-align: center;color: #faf9f5;
    -webkit-transition: all .35s; transition: all .35s;}
.tab_container button::after {content: "\25bc";}
.tab_container button.active::after {content: "\25b2";}/*uparrow when open*/
.redblock1 {display: block;width: 50%; height: 10px; margin-left: 50%; background-color: #a32323;}
.redblock2 {display: block;width: 50%; height: 10px; background-color: #a32323;}
.redblock1, .redblock2 {-webkit-transition: all .4s .15s; transition: all .4s .15s;}
.tab_container h2 {top: 20px; position: relative; font-size: 30px; line-height: 30px;}
div.panel {padding: 0 18px; display: none;}
.vtabcontentinner {width: calc(100% - 36px); padding: 0% 18px; margin: 5% 0%;}
.tab_container .tabs-button-icon {position: relative;  -webkit-transition: all .4s .15s; transition: all .4s .15s;color: #faf9f5; font-size: 20px; line-height: 60px; text-align: left; width: calc(80% - 3em); left: 10%;}
.tab_container button:hover .tabs-button-icon, button:hover:after{color: #212121;}
.tab_container button:hover {background-color: #ffe28c;}
button:hover .redblock1 {background-color: #212121; margin-left: 0%;}
button:hover .redblock2 {background-color: #212121; margin-left: 50%;}
.tab_container .button-text {color: #faf9f5;height: 60px; line-height: 60px;font-size: 20px; margin-left: 20px;}
.tab_container button:hover .button-text {color:#212121;}
.divider-lines {margin-bottom: 10%;}
.mobile-text { padding: 15px 0px 15px 0px; font-size: 14px;line-height: 16px;}
[id^=r-mobile-toggle]:checked ~ .mobile-con-r {top: 76px;}
[id^=mobile-toggle]:checked ~ .mobile-con-l {top: 76px;}
label[for=mobile-toggle], label[for=mobile-toggle2], label[for=mobile-toggle3] {width: 25%; top: 30px;}
label[for=r-mobile-toggle], label[for=r-mobile-toggle2], label[for=r-mobile-toggle3] {width: 25%; top: 30px;}
.mobile-text:after {font-size: 10px;}
[id^=mobile-toggle]:checked + .mobile-text:after, [id^=r-mobile-toggle]:checked + .mobile-text:after{font-size: 10px;}
.new-image-outer {width: calc(100% - 20px);}
.new-image-outer-r {width: calc(100% - 20px); padding-left: 20px;}
.featured-image-p {width: calc(90% - 20px); margin-bottom: 20px;}	
.featured-image-p:after  {bottom: -20px; right: -20px;}
.featured-image-p-r{width: calc(90% - 20px); margin-bottom: 20px; margin-left: 20px;}	
.featured-image-p-r:before  {bottom: -20px; left: -20px;}
}

/* -----------small screen View----------- */ 
@media
	screen and (max-width:600px) 
	{
.rightcol, .rightcol-top {width: 100%;}
.leftcol, .leftcol-top {width: 100%; padding-right: 0%;}
.h1line1 {width: 100px; border-bottom: solid 18px #212121;}
.h1line2 {margin-left: 100px; width: 100px; border-bottom: solid 18px #a32323;}
#masthead-wide:after {border-bottom: 60px solid #ffc107;	border-left: 60px solid transparent;}
.m-words1 {font-size: 30px; line-height: 30px; top: 30%;}
.m-words2 {font-size: 20px; line-height: 20px; top: 46%;}
.p-large {font-size: 20px; line-height: 27px;}
.quoteleft, .quoteright {width: 8%;}
.description-text {width: 82%;}
.triangle-l-l {border-bottom: 80px solid #ffc107;border-right: 80px solid transparent;}	
.center-lines {width: 150px;}
.rightimg-60 {width: calc(100% - 30px); margin: 3% 30px 30px 0%;}
.rightimg-60:after {bottom: -30px; right: -30px;border-bottom: 32vw solid #FFE28C;border-left: 54vw solid transparent; }
.leftimg-60 {width: calc(100% - 30px); margin: 5% 0px 30px 30px;}
.leftimg-60:after {bottom: -30px; left: -30px;border-bottom: 32vw solid #FFE28C;	border-right: 54vw solid transparent; }
.f-content {padding: 10px 5% 0% 10px; width: calc(100% - 20px);}
.f-content h2 {	font-size: 20px; line-height: 20px; margin-bottom: 10px;}
.f-p, .f-content a {font-size: 12px; line-height: 12px;}
.f-black-line2 {display: none;}
.f-faded-line {width: 100%;}
.copyright {margin-top: 3%; width: 90%; margin-left: 3%; background-color: transparent;}
}
/* -----------Mobile View----------- */ 
@media
	screen and (max-width:480px) 
	{
.mainmenu-u > ul {padding: 30% 0% 0% 0%;}
.menu-triangle {border-bottom: 240px solid #212121;}
.linkarrow-m {top: 8%;}
.cbp-hropen .megamenu .megamenu-i .menu-triangle {border-bottom: 150px solid #212121; border-left: 87px solid transparent;}
.mobile {display: block; }
.telmobile {display: block; }
.telephone {display: none; }
.logo  {font-size: 15px; line-height: 15px;}
.logo2 {font-size: 15px; line-height: 15px;}
.m-triangle, .m-triangle-i {border-top: 140px solid #ffc107; border-left: 46px solid transparent;}
#masthead-wide:hover .m-triangle {border-top: 100px solid #ffc107; border-left: 33px solid transparent;}
.m-words1 {font-size: 25px; line-height: 25px;}
.m-words2 {font-size: 15px; line-height: 15px;}
.h1line1 {width: 80px; border-bottom: solid 15px #212121;}
.h1line2 {margin-left: 80px; width: 80px; border-bottom: solid 15px #a32323;}
h1, h1 .nobreak{font-size: 24px; line-height: 24px; z-index: 1;}
.h1small, .h1small .nobreak {font-size: 20px;}
h2 {font-size: 20px; padding-bottom: 2%;}
.h2large, .h2large1 {font-size: 25px !important;}
h3 {font-size: 14px; margin-bottom: 1.5%;}
h4 {font-size: 13px; color: #212121; margin-bottom: 1.5%; }
p, strong, .listitem, .bold, .content-wide a, .service-p {	 font-size: 13px; padding-bottom: 20px; line-height: 1.2}
.content-wide a {padding-bottom: 0px;}
.listitem {background-position: 0px -3px;font-size: 13px;	padding-left: 8%; padding-bottom: 2.8%;}
.content-hover-heading{margin: 8% 2% 3% 8%; font-size: 12px; line-height: 12px;padding-bottom: 0px !important;}
.content-hover-p {margin: 0% 2% 2% 8%;font-size: 10px;line-height: 10px;}
.f-content h2 {	font-size: 15px; line-height: 15px; margin-bottom: 6px;}
.f-p, .f-content a {font-size: 11px; line-height: 11px; padding-bottom: 10px;}

.listitem {	padding-left: 8%;}
.quotation { font-size: 13px; }
.quotation-person {font-size: 11px; 	 padding-left: 2%; padding-right: 1%;-webkit-margin-before: 0px !important; -webkit-margin-after: 0px !important; }
.sliderinner>ul>li {height: 250px;}
.bold {  font-weight: bold;  font-size: 13px;}
.image-l {	width: 99%; border: #212121; border-width: .5%; border-style: solid;}
.link-inner {font-size: 18px; font-weight: 800;}
.ourwork-link, .ourwork-link:hover {font-size: 14px; font-weight: 600;    padding: 5px 20px 5px 20px;}
.p-heading-white{font-size: 18px; line-height: 18px; padding-bottom: 5px;}
.p-white { font-size: 14px;  padding-top: 2%; line-height: 16px;}
#masthead-wide:after {border-bottom: 40px solid #ffc107;	border-left: 40px solid transparent;}
.p-large {font-size: 18px;line-height: 22px;}
.quoteleft, .quoteright {font-size: 40px; line-height: 40px;}
.sliderborder {padding: 20px;} 
.testimonial-triangle {border-bottom: 200px solid #212121; border-left: 120px solid transparent;}
.featured-image, .featured-image-l {width: calc(90% - 30px);}
.featured-image:after {bottom: -30px; right: -30px; }
.featured-image:after {border-bottom: 30vw solid #ffc107; border-left: 48vw solid transparent;}
.trapezoid-r-l {width: 80%;right: -60%;}
.ourwork-r, .ourwork-l, .footer-border-l, .footer-border-r, .footer-border-r1 {height: 30px;}
.center-lines {width: 100px;}
.nobkpadding {padding: 15% 5% 15% 5%;}
.spacer-60 {height: 40px;}
.line1-d { border-bottom: solid 10px #212121;}
.line2-d {border-bottom: solid 10px #a32323;}
.tab_container h2 {font-size: 20px;line-height: 20px;}
.h2-p-l, .h2-p-r {font-size: 20px !important;}
.url-r, .url-l {font-size: 11px; line-height: 11px;}
.mobile-text {padding: 10px 0px 10px 0px; font-size: 10px;line-height: 10px;}
[id^=r-mobile-toggle]:checked ~ .mobile-con-r {top: 60px;}
[id^=mobile-toggle]:checked ~ .mobile-con-l {top: 60px;}
.portfolio-p {font-size: 11px !important; padding-bottom: 0px ! important;}
.images-1, .images-4, .images-2, .images-3 {width: 100%; position: relative; margin: 0% 0% 4% 0%; left: 0; top: 0;}

 }   /* end 480 */

/* -----------Mobile View----------- */ 
@media
	screen and (max-width:380px) 
	{
.linkarrow-m {top: 9%; width: 4.5%;}
.menubk-triangle {border-top: 150px solid #faf9f5;	border-left: 80px solid transparent; }
.tabs-button-icon {width: calc(92% - 3em); left: 8%;font-size: 14px;}
.button-text {color: #faf9f5;height: 90px; line-height: 90px;font-size: 14px; margin-left: 10px;}
.m-svs-5 {width: 20%; margin: 6% 0% 0% 10%;}
.m-svs-6 {width: 20%; margin: 6% 10% 0% 10%;}
.m-svs-7 {width: 20%; margin: 6% 10% 0% 0%;}
.menu-trapezoid {width: 10%;}
.menu-trapezoid::after {border-left: 35.9vw solid #212121;  border-top: 140vw solid transparent;  border-bottom: 140vw solid transparent;}
.cbp-hropen .megamenu .megamenu-i .menu-triangle {border-bottom: 170px solid #212121; border-left: 98px solid transparent;}
.mainmenu-u > ul > li > a {margin: 2% 0px 2% 30%; font-size: 20px; line-height: 20px;}
.m-words1 {font-size: 20px; line-height: 20px;}
.m-words2 {font-size: 15px; line-height: 15px;}
.p-large {font-size: 16px;line-height: 18px;}
.p-white {font-size: 12px; line-height: 14px;}
.testimonial-trapezoid:after {border-top: 170vw solid transparent; border-bottom: 10vw solid transparent;}
.featured-image:after, .featured-image-l:after {bottom: -20px; right: -20px;}
.ourwork-link, .ourwork-link:hover {font-size: 14px; font-weight: 400;}
.trapezoid-r-l {width: 80%;right: -70%;}
.h1line1 {margin-top: 0px;width: 50px; border-bottom: solid 15px #212121;}
.h1line2 {margin-left: 50px; width: 50px; border-bottom: solid 15px #a32323;}
h1, h1 .nobreak{font-size: 20px; line-height: 20px;}
.h1small, .h1small .nobreak {font-size: 16px; line-height: 16px;}
.content-wide {padding-top: 10px;}
.ourwork-r, .ourwork-l, .footer-border-l, .footer-border-r, .footer-border-r1  {height: 20px;}
.rightimg-60 {width: calc(100% - 20px); margin: 3% 20px 20px 0%;}
.rightimg-60:after {bottom: -20px; right: -20px;border-bottom: 32vw solid #FFE28C;border-left: 54vw solid transparent; }
.leftimg-60 {width: calc(100% - 20px); margin: 5% 0px 20px 20px;}
.leftimg-60:after {bottom: -20px; left: -20px;border-bottom: 32vw solid #FFE28C;	border-right: 54vw solid transparent; }
.footer-r2, .footer-l2 {width: 100%; margin: 0; padding: 2% 0% 0% 0%;}
.f-img-r1 {width: 94%;  left: 0%; margin: 6% 3% 6% 3%;; position: relative; overflow: hidden;}
.f-img-r3 {width: 94%;  left: 0%; margin: 6% 3% 6% 3%; position: relative; overflow: hidden;} 
.f-img-r4 {width: 94%;  left: 0%; margin: 6% 3% 6% 3%; position: relative; overflow: hidden;} 
.only380 {display: block;}
.f-img-r1 .r1img2, .f-img-r2 .r2img2, .f-img-r3 .r3img2, .f-img-r4 .r4img2  {width: 100%; position: relative; opacity: 0;height: 100px;}
.f-img-r2 .r2img2 {height: 150px;}
.f-img-r1 .r1img1, .f-img-r2 .r2img1, .f-img-r3 .r3img1, .f-img-r4 .r4img1  { opacity: .1; position: absolute; margin-top: -20%;}
.f-img-r2 .r2img1 {margin-top: 0%;}
.f-p {line-height: 16px;}
.f-r1bk{width: 100%; position: absolute;background-image: url('../images/web-design/charity/amsr-m.jpg');}
.f-img-r2 {width: 94%;  left: 0%; margin: 6% 3% 6% 3%; position: relative; overflow: hidden;}
.copyright {margin-top: 0%; padding-top: 0;}
label[for=mobile-toggle], label[for=mobile-toggle2], label[for=mobile-toggle3] {top: 15px;}
label[for=r-mobile-toggle], label[for=r-mobile-toggle2], label[for=r-mobile-toggle3] {top: 15px;}
[id^=r-mobile-toggle]:checked ~ .mobile-con-r {top: 45px;}
[id^=mobile-toggle]:checked ~ .mobile-con-l {top: 45px;}
.mobile-text:after {font-size: 9px;}
[id^=mobile-toggle]:checked + .mobile-text:after, [id^=r-mobile-toggle]:checked + .mobile-text:after{font-size: 9px;}
.h2-p-l, .h2-p-r {font-size: 15px !important;}
.notes-r, .notes-l { margin-bottom: 10%;}
.new-image-outer {width: calc(100% - 10px);}
.new-image-outer-r {width: calc(100% - 10px); padding-left: 10px;}
.featured-image-p{width: calc(90% - 10px); margin-bottom: 10px;}	
.featured-image-p:after {bottom: -10px; right: -10px;}
.featured-image-p-r{width: calc(90% - 10px); margin-bottom: 10px; margin-left: 10px;}	
.featured-image-p-r:before  {bottom: -10px; left: -10px;}
.portfolio-p {font-size: 10px !important;}
}/* end mobile 380*/


/* -----------Mobile View----------- */ 
@media
	screen and (max-width:320px) 
	{
.not320 {display: none;}
.m-svs-link {padding: 3%; font-size: 10px;}
#menuwide {height: 90px;}
.m-words1 {font-size: 15px; line-height: 15px;}
.m-words2 {font-size: 12px; line-height: 12px;}
.sliderborder {padding: 10px;}    
h1, h1 .nobreak{font-size: 18px; line-height: 20px;}
.h1small {font-size: 14px; line-height: 18px; padding-bottom: 5px;}
.h1small .nobreak {font-size: 14px; line-height: 18px;}
}/* end mobile 380*/

@media
	screen and (max-width:320px) 
	{
.f-content a {padding-bottom: 5px;}
.f-content-l2 {width: 48%; padding-right: 2%; float: left;}
.f-content-r2 {width: 48%; padding-left: 2%; float: right;}
}

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