@charset "utf-8";
/* CSS Document */


@font-face {
	font-family: "BrittiSans-Bold";
	src: url("britti-sans-bold/webfonts/britti-sans-bold.eot");
	src: url("britti-sans-bold/webfonts/britti-sans-bold.eot?#iefix") format('embedded-opentype'),
         url("britti-sans-bold/webfonts/britti-sans-bold.woff2") format('woff2'),
	     url('britti-sans-bold/webfonts/britti-sans-bold.woff') format('woff'),
	     url('britti-sans-bold/webfonts/britti-sans-bold.ttf') format('truetype'),
	     url('britti-sans-bold/webfonts/britti-sans-bold.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "BrittiSans-BoldItalic";
	src: url('britti-sans-bold-italic/webfonts/britti-sans-bold-italic.eot');
	src: url('britti-sans-bold-italic/webfonts/britti-sans-bold-italic.eot?#iefix') format('embedded-opentype'),
         url('britti-sans-bold-italic/webfonts/britti-sans-bold-italic.woff2') format('woff2'),
	     url('britti-sans-bold-italic/webfonts/britti-sans-bold-italic.woff') format('woff'),
	     url('britti-sans-bold-italic/webfonts/britti-sans-bold-italic.ttf') format('truetype'),
	     url('britti-sans-bold-italic/webfonts/britti-sans-bold-italic.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "BrittiSans-Light";
	src: url('britti-sans-light/webfonts/britti-sans-light.eot');
	src: url('britti-sans-light/webfonts/britti-sans-light.eot?#iefix') format('embedded-opentype'),
         url('britti-sans-light/webfonts/britti-sans-light.woff2') format('woff2'),
	     url('britti-sans-light/webfonts/britti-sans-light.woff') format('woff'),
	     url('britti-sans-light/webfonts/britti-sans-light.ttf') format('truetype'),
	     url('britti-sans-light/webfonts/britti-sans-light.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "BrittiSans-LightItalic";
	src: url('britti-sans-light-italic/webfonts/britti-sans-light-italic.eot');
	src: url('britti-sans-light-italic/webfonts/britti-sans-light-italic.eot?#iefix') format('embedded-opentype'),
         url('britti-sans-light-italic/webfonts/britti-sans-light-italic.woff2') format('woff2'),
	     url('britti-sans-light-italic/webfonts/britti-sans-light-italic.woff') format('woff'),
	     url('britti-sans-light-italic/webfonts/britti-sans-light-italic.ttf') format('truetype'),
	     url('britti-sans-light-italic/webfonts/britti-sans-light-italic.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "BrittiSans-Regular";
	src: url('complete_family_BRITTI-SANS_webfont/britti-sans-regular/webfonts/britti-sans-regular.eot');
	src: url('complete_family_BRITTI-SANS_webfont/britti-sans-regular/webfonts/britti-sans-regular.eot?#iefix') format('embedded-opentype'),
         url('complete_family_BRITTI-SANS_webfont/britti-sans-regular/webfonts/britti-sans-regular.woff2') format('woff2'),
	     url('complete_family_BRITTI-SANS_webfont/britti-sans-regular/webfonts/britti-sans-regular.woff') format('woff'),
	     url('complete_family_BRITTI-SANS_webfont/britti-sans-regular/webfonts/britti-sans-regular.ttf') format('truetype'),
	     url('complete_family_BRITTI-SANS_webfont/britti-sans-regular/webfonts/britti-sans-regular.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "BrittiSans-RegularItalic";
	src: url('complete_family_BRITTI-SANS_webfont/britti-sans-regular-italic/webfonts/britti-sans-regular-italic.eot');
	src: url('complete_family_BRITTI-SANS_webfont/britti-sans-regular-italic/webfonts/britti-sans-regular-italic.eot?#iefix') format('embedded-opentype'),
         url('complete_family_BRITTI-SANS_webfont/britti-sans-regular-italic/webfonts/britti-sans-regular-italic.woff2') format('woff2'),
	     url('complete_family_BRITTI-SANS_webfont/britti-sans-regular-italic/webfonts/britti-sans-regular-italic.woff') format('woff'),
	     url('complete_family_BRITTI-SANS_webfont/britti-sans-regular-italic/webfonts/britti-sans-regular-italic.ttf') format('truetype'),
	     url('complete_family_BRITTI-SANS_webfont/britti-sans-regular-italic/webfonts/britti-sans-regular-italic.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
    margin: 0;
  	padding: 0;
  	box-sizing: border-box;
 }

body {
	background-color: #FFFEF9;
	font-family: "BrittiSans-Light";
}

@media only screen and (max-width: 1200px) {
    body {
        background-color: #231F20;
    }
}

/*--GRID-DESKTOP-SCREEN-SIZES----------------------------------------------------------------*/
.grid {
    display: grid;
    grid-template-columns: fit-content(10%) fit-content(15%) fit-content(15%) 15% 5% 20% 20%;
    grid-auto-flow: row dense;
    grid-template-rows: 20% 70% 10%; 
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
}

@media only screen and (max-width: 821px) {
    div.grid{
        display: none;
    }
}

.item {
	background-color: #FFFEF9;
}

.colSpanTwo {
	grid-column: auto / span 2;
	position: relative;
}

.colSpanThree {
	grid-column: auto / span 3;
	position: relative;
}

.rowSpanThree {
	grid-row: auto / span 3;
	position: relative;
	overflow: hidden;
	background-color: #231F20;
}

/*--GRID-DESKTOP-SCREEN-SIZES-END------------------------------------------------------------*/

/*--ROW-SPAN-3-MARGIN------------------------------------------------------------------------*/
#sideways {
	font-size: 15vw;
	color: #FFFEF9;
	font-family: "BrittiSans-BoldItalic";
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(-180deg);
	overflow: hidden;
}

/*--TOP-LEFT-LOGO----------------------------------------------------------------------------*/

#logoTL {
	width: 65%;
	height: auto;
	padding-left: 30px;
	padding-top: 30px;
}

@media only screen and (max-width: 1400px) and (min-width: 821px) {
    div.topLeftLogo #logoTL {
        width: 270px;
    }
}

/*--LINKS------------------------------------------------------------------------------------*/
.Nav {
	text-align: left;
	padding-top: 40%;
	font-size: 1.7vw;
	padding: 120px 0px 20px;
	
}

@media only screen and (max-width: 1100px) and (min-width: 821px) {
    div.Nav {
        font-size: 18px;
    }
}

a {
	font-family: "BrittiSans-Light";
	text-decoration: none;
	color: #231F20;
}

a:hover {
	background-color: none;
   	color: #00FA9A;
	font-family: "BrittiSans-LightItalic";
}

/*--LINKS-END--------------------------------------------------------------------------------*/


/*--PARAGRAPHS-/-BODY-TEXT-------------------------------------------------------------------*/
/*--SERVICES-TITLE---------------------------------------------------------------------------*/

#containerTitle {
	height: 100%;
	width: fit-content(100%);
}

#paraTitle {
	font-size: 17vw;
	left: 1%;
	font-family: "BrittiSans-LightItalic";
	line-height: 0.8;
	position: absolute;
 	top: 190px;
}

@media only screen and (max-width: 1600px) and (min-width: 821px) {
    div#containerTitle #paraTitle {
        top: 140px;
    }
}


.breakOne::after{  /*--SPAN------------------------------------------------------------------*/
    content: "\a";
    white-space: pre;
}

.breakTwo::before{  /*--SPAN-----------------------------------------------------------------*/
    content: "\a";
    white-space: pre;
}

/*--SERVICES-STATEMENT-----------------------------------------------------------------------*/

#containerParaStat {
	width: 100%;
	height: 120%;
	position: absolute;
	background-color: #FFFEF9;
}

#containerParaStat {
	
	-moz-animation: cssAnimation 0s ease-in 3s forwards;
			/* Firefox */
	-webkit-animation: cssAnimation 0s ease-in 3s forwards;
			/* Safari and Chrome */
	-o-animation: cssAnimation 0s ease-in 3s forwards;
			/* Opera */
			animation: cssAnimation 0s ease-in 3s forwards;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}

#aboutStatement {
	font-family: "BrittiSans-Light";
	position: absolute;
	left: 50px;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-top: 15%;
	font-size: 3.3vw;
	line-height: 1.1;
}

@media only screen and (max-width: 1300px) and (min-width: 821px) {
    div.colSpanThree #servicesStatement {
        padding-top: 90px;
		padding-right: 50px;
    }
}

.highlight {  /*--SPAN-----------------------------------------------------------------------*/
	background-color: #00FA9A;
	padding-left: 5px;
	padding-right: 5px;
}

.next {  /*--SPAN----------------------------------------------------------------------------*/
	font-size: 4vw;
}

/*--SERVICES-DETAILS-------------------------------------------------------------------------*/

#containerParaDet {
	width: 100%;
	height: 100%;
	background-color: #FFFEF9;
	z-index: 9; /*---------------:hover-show/hide----------------------------------------
	opacity: 0.0; 
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out; */
}

#ContainerParaDet {animation: fadeIn 5s;}

@keyframes fadeIn{
    0% {opacity: 0; }
    75% {opacity: 0 }
    100% {opacity: 1; }
}

#aboutDetails {
	font-family: "BrittiSans-Light";
	font-size: 1.8vw;
	line-height: 1.4;
	padding-left: 50px;
	padding-right: 2px;
	padding-top: 50px;
}

@media only screen and (max-width: 1000px) and (min-width: 821px) {
    div.colSpanThree #containerParaDet {
        padding-top: 40px;
    }
}

.detBodyTextTwo {
	background-color: #00FA9A;
}

.detBodyTextTwo::before {  /*--SPAN----------------------------------------------------------*/
	content: "\a";
    white-space: pre;
}

.detBodyTextThree::before {  /*--SPAN--------------------------------------------------------*/
	content: "\a";
    white-space: pre;
}



/*--SERVICES-HOVER---------------------------------------------------------------------------
.colSpanThree:hover > #containerParaDet {
  opacity: 1.0;
}

.colSpanThree:hover > #containerParaStat {
  opacity: 0;
}

--PARAGRAPHS-/-BODY-TEXT-END---------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------*/

/*--GRID-MOBILE-SCREEN-SIZES-601px-300px-----------------------------------------------------*/
.gridMobile {
    display: none;
    grid-template-columns: 15% 70% 15%;
    grid-auto-flow: row dense;
    grid-template-rows: fit-content(20%) fit-content(5%) fit-content(8%) fit-content(20%) fit-content(45%) fit-content(2%); 
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
}

@media only screen and (max-width: 601px) and (min-width: 300px) {
    div.gridTablet {
        display: grid;
    }
}

.mobitem {
	width: 100%;
	height: 100%;
	background-color: #231F20;
}

/*--LOGO-------------------------------------------------------------------------------------*/

.mobScreenLogo {
	width: 100%;
	height: 100%;
	margin-top: 30px;
	padding: 2px;
}

#mobLogo {
	height: 80px;
	width: auto;
	position: relative;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);	
}

/*--LINKS------------------------------------------------------------------------------------*/

.servicesLinkMobile {
	width: 100%;
	height: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.contactLinkMobile {
	width: 100%;
	height: 100%;
	padding-top: 10px;
	padding-bottom: 30px;
}

.aStyleMobile {
	color: #FFFEF9;
	font-size: 3vw;
}

/*--TITLE------------------------------------------------------------------------------------*/

#mobContainerTitle {
	background-color: #FFFEF9;
	width: 100%;
	height: 100%;
	padding: 50px 30px 15px;
}

#mobParaTitle {
	font-size: 15.5vw;
	line-height: 0.4;
}

/*--BODY-TEXT--------------------------------------------------------------------------------*/

.mobileBodyText {
	background-color: #FFFEF9;
	width: 100%;
	height: 100%;
	padding: 20px;
	position: relative;
}

/*--Statement--------------------------------------------------------------------------------*/
#mobContainerParaStat {
	width: fit-content(100%);
	height: auto;
	position: absolute;
}

#mobContainerParaStat { 
	-moz-animation: cssAnimation 0s ease-in 3s forwards;
			/* Firefox */
	-webkit-animation: cssAnimation 0s ease-in 3s forwards;
			/* Safari and Chrome */
	-o-animation: cssAnimation 0s ease-in 3s forwards;
			/* Opera */
			animation: cssAnimation 0s ease-in 3s forwards;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}

#mobAboutStatement {
	position: relative;
	text-align: left;
	padding: 15px;
	font-size: 4.5vw;
	line-height: 1.1;
}

/*--Details----------------------------------------------------------------------------------*/
#mobContainerParaDet {animation: fadeIn 5s;}

@keyframes fadeIn{
    0% {opacity: 0; }
    75% {opacity: 0 }
    100% {opacity: 1; }
}

#mobContainerParaDet {
	width: 100%;
	height: 100%;
	background-color: #FFFEF9;
	z-index: 9; 
}

#mobAboutDetails {
	text-align: left;
	font-size: 3vw;
	line-height: 1.4;
	padding: 15px;
}

/*--GRID-MOBILE-SCREEN-END-------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------*/

/*--GRID-TABLET-SCREEN-SIZES-820px-602px-----------------------------------------------------*/

.gridTablet {
    display: none;
    grid-template-columns: 15% 70% 15%;
    grid-auto-flow: row dense;
    grid-template-rows: fit-content(20%) fit-content(5%) fit-content(5%) fit-content(20%) fit-content(45%) 5%; 
    margin: 0px;
    padding: 0px;
    height: 100vh;
    width: 100vw;
}

@media only screen and (max-width: 820px) and (min-width: 602px) {
    div.gridTablet {
        display: grid;
    }
}

.tabitem {
	width: 100%;
	height: 100%;
	background-color: #231F20;
}

/*--LOGO-------------------------------------------------------------------------------------*/

.tabScreenLogo {
	width: 100%;
	height: 100%;
	margin-top: 30px;
	padding: 2px;
}

#tabLogo {
	height: 120px;
	width: auto;
	position: relative;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);	
}

/*--LINKS------------------------------------------------------------------------------------*/

.servicesLinkTablet {
	width: 100%;
	height: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.contactLinkTablet {
	width: 100%;
	height: 100%;
	padding-top: 10px;
	padding-bottom: 20px;
}

.aStyleTablet {
	color: #FFFEF9;
	font-size: 3vw;
}

/*--TITLE------------------------------------------------------------------------------------*/

#tabContainerTitle {
	background-color: #FFFEF9;
	width: 100%;
	height: 100%;
	padding: 50px 30px 15px;
}

#tabParaTitle {
	font-size: 15.5vw;
	line-height: 0.4;
}

/*--BODY-TEXT--------------------------------------------------------------------------------*/

.tabletBodyText {
	background-color: #FFFEF9;
	width: 100%;
	height: 100%;
	
	padding: 20px;
	position: relative;
}

/*--Statement--------------------------------------------------------------------------------*/
#tabContainerParaStat {
	width: fit-content(100%);
	height: auto;
	position: absolute;
}

#tabContainerParaStat { 
	-moz-animation: cssAnimation 0s ease-in 3s forwards;
			/* Firefox */
	-webkit-animation: cssAnimation 0s ease-in 3s forwards;
			/* Safari and Chrome */
	-o-animation: cssAnimation 0s ease-in 3s forwards;
			/* Opera */
			animation: cssAnimation 0s ease-in 3s forwards;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}

#tabAboutStatement {
	position: relative;
	text-align: left;
	padding: 15px;
	font-size: 4.5vw;
	line-height: 1.1;
}

/*--Details----------------------------------------------------------------------------------*/
#tabContainerParaDet {animation: fadeIn 5s;}

@keyframes fadeIn{
    0% {opacity: 0; }
    75% {opacity: 0 }
    100% {opacity: 1; }
}

#tabContainerParaDet {
	width: 100%;
	height: 100%;
	
	background-color: #FFFEF9;
	z-index: 9; 
}

#tabAboutDetails {
	text-align: left;
	font-size: 3vw;
	line-height: 1.4;
	padding: 15px;
}