/* Mohunkys Repsonsive Framework V4.2 RWD Stylesheet  */

/* ========================================================

Created by Mohunky on behalf of Chocolate6 via Evry Creative

- This style sheet should contain everything to make
  the website work on smaller devices.
- Only minor typographic overrides should be in this sheet.
- All @media queries should be in this document.
- No @font-face rules should be in this document.
- All my CSS flows in the following order
  .classOrID {   display:; position/float:; width:; height:; margin:; padding:; border:; background:; text/font styles:;   }

======================================================== */

/* ======== COLOURS =====================================

  Primary Blue   - #00205b
  Light Blue     - #96b6e5
  Grey           - #6d6e70

======================================================== */


/* ==================== GENERAL LAYOUT ==================== */
article                 {      } 
section                 {      }
div.row                 {   position:relative;   }
header#contacthdr       {   padding:0em; background-color:#6d6e70; color:#ffffff; text-align:right;   }
header#contacthdr p     {   float:right; margin:0.125em 1em 0em 0em; font-size:1.5em; font-weight:700;   }
header#contacthdr a     {   color:#ffffff;   }
header#mainhdr          {   padding:0.5em 0em; background-color:#ffffff;   }
header#mainhdr .strapline   {   color:#96b6e5; font-size:1.250em;   }
footer#mainftr          {   background:#6d6e70; color:#ffffff;    }
header article,
footer article          {   overflow:visible;   }
iframe                  {   display:block; width:100%; border:none; margin:0 auto;   }
#logo                   {      }

#btntotop               {   display:block; position:fixed; right:1em; bottom:1em; width:2.25em; height:2.25em; margin:0; padding:0; z-index:100; background:#00205b url('/images/up.png') center no-repeat; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;   }
#btntotop:hover         {   background-color:#6d6e70;   }
#btntotop.hidden        {   opacity:0;   }

.downarrow              {   width:100%; height:34px; background-position:center; background-repeat:no-repeat;   }
.downarrow.drkblue      {   background-image:url('/images/down-dark-blue.png');   }
.downarrow.lgtblue      {   background-image:url('/images/down-light-blue.png');   }
.downarrow.white        {   background-image:url('/images/down-white.png');   }

article#herospace       {   padding:17em 0em 4em 0em; background:url('/images/herospace-fallback.jpg') center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.herospace-fallback.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/herospace-fallback.jpg', sizingMethod='scale')";   }

/* -------- TEAM TABS -------- */
.teamtabs ul            {   margin:0; padding:2em 0em; list-style:none;   }
.teamtabs ul li         {   float:left; margin:0.250em 0.5em 0.250em 0em; padding:0em 0.5em 0em 0em; border-right:1px solid #00205b; font-size:1.750em; color:#00205b; font-family:'OpenSansCondensed', Helvetica, Arial, sans-serif; line-height:1em;   }
.teamtabs ul li.current {   color:#ffffff;   }
.teamtabs ul li:hover   {   text-decoration:underline; cursor:pointer;   }
.tab-content            {   display:none;   }
.tab-content.current    {   display:block;   }

/* -------- GLOBAL REACH -------- */
#global h2 img          {   margin-top:0.125em; width:230px;   }
#global header          {   position:absolute; top:3em; left:0;   }
#global footer          {   position:absolute; bottom:1em; left:0; width:31.500%;   }

/* -------- PORTFOLIO -------- */
#portolio header        {   padding:0em 0em 3em 0em; background:url('/images/portfolio-banner.jpg') no-repeat center;   }

#portfolioitems         {   margin:0; padding:0; list-style:none;   }
#portfolioitems li      {   float:left; width:31.500%; margin:0% 0% 2.75% 2.75%   }
#portfolioitems li:nth-child(3n+1)  {   margin-left:0;   }
#portfolioitems li .thumb           {   position:relative; overflow:hidden;   }
#portfolioitems li .thumb img       {   display:block;   }
#portfolioitems li .thumb .overlay  {   display:flex; align-items:center; position:absolute; top:100%; right:0; bottom:0; left:0; height:100%; background-color:rgba(29,40,88,0.8); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;   }
#portfolioitems li .thumb a:hover .overlay {   top:0;   }
#portfolioitems li .thumb a         {   color:#ffffff;   }
#portfolioitems li .thumb .altcontent {   box-sizing:border-box; width:100%; padding:2em; text-align:center; vertical-align:middle;   }
#portfolioitems .modal  {   display:none;   }

/* -------- MODAL -------- */
.lg-prev                    {   width:34px; height:60px; background:url('/images/left-white.png') center no-repeat; text-indent:999em; overflow:hidden;   }
.lg-next                    {   width:34px; height:60px; background:url('/images/right-white.png') center no-repeat; text-indent:999em; overflow:hidden;   }
#lg-counter                 {   display:none;   }
#lg-download                {   display:none;   }
.lg-close                   {   display:block; width:44px; height:44px; background:url('/images/close-white.png') center no-repeat; text-indent:999em; overflow:hidden;   }
.lg-sub-html p              {   font-size:1em;   }

/* ==================== NAVIGATION ===================== */
/* -------- PRIMARY NAV -------- */
#rwd-menu                 {   display:none;   }
nav#master                {   position:absolute; right:0; bottom:0; padding:0em;   }
nav#master ul             {   max-width:none; padding:0;   }
nav#master li             {   display:block; position:relative; float:left;   }
nav#master ul li a        {   display:block; padding:0em 0em 0em 0.750em; color:#96b6e5; font-size:1.500em;   }
nav#master ul li a:hover  {   outline:none; color:#00205b; text-decoration:none;   }  

/* -------- SOCIAL NAV -------- */
ul.socialnav                {   float:right; display:inline; height:44px; margin:0; padding:0; list-style:none;   }
ul.socialnav li             {   display:inline;   }
ul.socialnav a.button           {   width:44px; height:44px; margin:0; padding:0; text-indent:999em; overflow:hidden;   }
ul.socialnav a.button.twitter   {   background:url('/images/icn-twitter.png') no-repeat center;   }
ul.socialnav a.button.facebook  {   background:url('/images/icn-facebook.png') no-repeat center;   }
ul.socialnav a.button.linkedin  {   background:url('/images/icn-linkedin.png') no-repeat center;   }

/* ==================== CONTACT FORM =================== */
.formrow                    {   padding-bottom:0.750em;   }
label                       {   display:inline-block; margin-bottom:0.250em; font-size:1.250em;   }
input[type=text]            {   box-sizing:border-box; width:100%; padding:0.5em; border:1px solid #ffffff; outline:none; background-color:#00205b; color:#ffffff;   }
button				        {   box-sizing:border-box; width:100%; padding:0.5em; border:1px solid #ffffff; outline:none; background:#00205b url('/images/submit-white.png') right center no-repeat; font-size:1.6em; color:#ffffff; text-align:left;   }
textarea                    {   box-sizing:border-box; width:100%; padding:0.5em; border:1px solid #ffffff; outline:none; background-color:#00205b; color:#ffffff;   }

input[type=checkbox]		{   display:inline;   }
label.checboxLabel			{   display:inline;   }
label.error					{   color:#F01F15;   }

/* ==================== OVERRIDES ===================== */
.tablet-only    {   display:none;   }
.mobile-only    {   display:none;   }
.micro-only     {   display:none;   }


/* ======================================================== */
/* ======================================================== */
/* ==================== SMALLER SCREENS =================== */
/* ================= LESS THAN 1200PX WIDE ================ */
/* ======================================================== */
/* ======================================================== */
@media only screen and (max-width: 1200px) {

	/* ==================== BASE LAYOUT ==================== */


	/* ==================== NAVIGATION ===================== */
	/* -------- PRIMARY NAV -------- */

	/* -------- SUB NAV -------- */


	/* ==================== OVERRIDES ===================== */


}

/* ======================================================== */
/* ======================================================== */
/* ==================== TABLET DEVICES ==================== */
/* ================= LESS THAN 1024PX WIDE ================ */
/* ======================================================== */
/* ======================================================== */
@media only screen and (max-width: 1023px) {

    /* ==================== GLOBAL OVERRIDES ==================== */
    p {   font-size:1.250em;   }

	/* ==================== GENERAL LAYOUT ==================== */
    header#mainhdr .strapline   {   font-size:1em;   }
    header#mainhdr #logo        {   max-width:270px;   }
    .teamtabs ul li             {   font-size:1.500em;   }
    #global footer              {   width:35%;   }

    /* -------- PORTFOLIO -------- */
    #portfolioitems li .thumb .altcontent h4 {   font-size:1.250em;   }
    #portfolioitems li .thumb .altcontent p  {   font-size:1em;   }

	/* ==================== NAVIGATION ===================== */
	/* -------- PRIMARY NAV -------- */
    nav#master ul li a          {   font-size:1.250em;   }

	/* -------- SUB NAV -------- */


	/* ==================== OVERRIDES ===================== */
	.tablet-hide {   display:none;   }
	.tablet-only {   display:block;   }

}

/* ======================================================== */
/* ======================================================== */
/* ==================== MOBILE DEVICES ==================== */
/* ================= LESS THAN 777PX WIDE ================= */
/* ======================================================== */
/* ======================================================== */
@media only screen and (max-width: 777px) {

	/* ==================== BASE LAYOUT ==================== */
	footer#mainftr              {   text-align:center;    }
	footer#mainftr .madeforall  {   text-align:center;   }
    header#contacthdr p         {   margin:0.675em 1em 0em 0em; font-size:1em;   }
    #global header              {   position:relative; top:auto; width:100%;   }
    #global footer              {   position:relative; bottom:auto; width:100%;   }

    /* -------- PORTFOLIO -------- */
    #portfolioitems li                  {   width:48.625%;   }
    #portfolioitems li:nth-child(3n+1)  {   margin-left:2.75%;   }
    #portfolioitems li:nth-child(2n+1)  {   margin-left:0;   }

	/* ==================== NAVIGATION ===================== */
	/* -------- PRIMARY NAV -------- */
	#rwd-menu                   {   display:block;   }
	#rwd-toggle                 {   display:block; position:absolute; top:2.875em; right:1em; height:1.125em; width:auto; padding:0.6125em 1.000em 0.500em 2.250em; background:#00205b url('/images/menu.png') center left no-repeat; font-size:1.000em; font-weight:700; line-height:1.125em; text-transform:uppercase; text-decoration:none; color:#ffffff; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;   }
	#rwd-toggle:hover           {   cursor:pointer; background-color:#96b6e5;   }

	nav#master                    {   display:none;   }
	nav#rwd-master                {   padding:0.500em 0em;	   }
	nav#rwd-master ul             {   display:none; height:auto; clear:both; margin:0;  padding:0; overflow:hidden; list-style:none;   }
	nav#rwd-master li             {   display:block; position:relative; float:left; width:100%; padding:0.125em 0em; text-align:center;   }
	nav#rwd-master ul li a        {   display:block; padding:0.750em; background-color:#00205b; font-size:1.000em; font-weight:700; color:#ffffff; text-transform:uppercase; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;   }
	nav#rwd-master ul li a:hover  {   outline:none; text-decoration:none; background-color:#96b6e5; color:#00205b;   }

	/* -------- SUB NAV -------- */


	/* ==================== OVERRIDES ===================== */
	.mobile-hide   {   display:none;   }
	.mobile-center {   text-align:center;   }
	.mobile-only   {   display:block;   }

}

/* ======================================================== */
/* ======================================================== */
/* ==================== MOBILE DEVICES ==================== */
/* ================= LESS THAN 520PX WIDE ================= */
/* ======================================================== */
/* ======================================================== */
@media only screen and (max-width: 520px) {

    /* ==================== GLOBAL OVERRIDES ==================== */
    p   {   font-size:1em;   }
    h1  {   font-size:2.500em;   }
    h2  {   font-size:2em;   }

    /* ==================== GENERAL LAYOUT ==================== */
    header#contacthdr p         {   margin-top:0; font-size:0.875em;   }
    header#mainhdr #logo        {   max-width:200px;   }
    header#mainhdr .strapline   {   font-size:0.750em;   }
    .teamtabs ul li             {   font-size:1.250em;   }

    /* -------- PORTFOLIO -------- */
    #portfolioitems li          {   width:98%; margin:0em auto 1em auto;   }

    /* ==================== NAVIGATION ===================== */
    #rwd-toggle {   top:1.750em;   }

    /* ==================== OVERRIDES ===================== */
    .micro-hide     {   display:none;   }
	.micro-only     {   display:block;   }



}



/* ======================================================== */
/* ======================================================== */
/* ==================== MOBILE DEVICES ==================== */
/* ================= LESS THAN 350PX WIDE ================= */
/* ======================================================== */
/* ======================================================== */
@media only screen and (max-width: 350px) {

    /* ==================== GENERAL LAYOUT ==================== */
    header#contacthdr p         {   margin-top:0.375em; font-size:0.750em;   }
    header#mainhdr #logo        {   max-width:180px;   }

    /* ==================== NAVIGATION ===================== */
    #rwd-toggle {   top:0.250em; right:0; padding:0.6125em 1.250em; background-position:center center; text-indent:-999em; overflow:hidden;   }

}