/* reset some thangs */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas,video{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

body, h1 {
	transition: all .5s ease-in;
	
}
.copyright {
	
	text-align: center;
	padding-bottom: 15px;
}
/*======================================================================================================*/
/*======================================================================== WAY BACK NAV  - Now has it's own CSS Sheet ===================*/
/*======================================================================================================*/

.wayback {


    z-index: 9999 !important;

}
.timeline button {

    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
}

/*======================================================================================================*/
/*======================================================================== STRUCTURE ===================*/
/*======================================================================================================*/

.parent {
	display: grid;
	grid-template-columns: 230px 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}



column-content {
	position: relative;
}


.slide {
	min-height: 100vh;
	max-width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 4;
	overflow-x: hidden;
}


.slide-content {
  z-index: 2;
}

#about, #services, #client-experience, #work, #contact {
	background-color: transparent;
}


#hero-video {
  position: fixed;
  right: 0;
  bottom: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

.mw-service-modal,{
	width: 90%;
	height: 90%;
    border: none;
    border-radius: 0px;
    padding: 60px;
    padding-left: 120px;
    padding-right: 120px;
    background: #fff;
    color: #000;
}
dialog[data-mw-modal] {
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
  color: #000;
  
}

/*======================================================================================================*/
/*======================================================================== NAVIGATION BAR ==============*/
/*======================================================================================================*/

.navigation {
	display: flex;
	align-items: center;
	height: 100vh;
	position: fixed;
	left: 0;
	z-index: 444;
	color: transparent;
	overflow-x: scroll;
}



.navigation li a {
	padding:	60px;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	display: block;
	color: transparent;
}



/* Slide Out Menu */


.nav-mobile {
	display: none;
}




.toggle-button {
	position: absolute;
	width: 50px;
	height: 40px;
	top: 25px;
	right: 25px;
	padding: 4px;
	transition: .25s;
	z-index: 125;
}

.toggle-button:hover {
	cursor: pointer;
}

.toggle-button .menu-bar {
	position: absolute;
	border-radius: 2px;
	width: 80%;
	transition: .5s;
}

.toggle-button .menu-bar-top {
	border: 4px solid #000;
	border-bottom: none;
	top: 0;
}

.toggle-button .menu-bar-middle {
	height: 4px;
	background-color: #000;
	margin-top: 7px;
	margin-bottom: 7px;
	top: 4px;
	width: 90%;
}

.toggle-button .menu-bar-bottom {
	border: 4px solid #000;
	border-top: none;
	top: 22px;
}

.button-open .menu-bar-top {
	border-color: #FFFFFF;
	transform: rotate(45deg) translate(8px, 8px);
	transition: .5s;
}

.button-open .menu-bar-middle {
	transform: translate(230px);
	transition: .1s ease-in;
	opacity: 0;
}

.button-open .menu-bar-bottom {
	border-color: #FFFFFF;
	transform: rotate(-45deg) translate(8px, -7px);
	transition: .5s;
}

.menu-wrap {
	background-color: #fff;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	right: -100vw;
	font-size: 1em;
	font-weight: 700;
	overflow: auto;
	transition: .5s;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.menu-show {
	right: 0;
	box-shadow: 4px 2px 5px 1px rgba(0,0,0,0.15);
}

.menu-wrap img {
	width: 250px;
	margin-bottom: 30px;
}

.nav-top-mobile {
	text-align: center;
	margin-bottom: 30px;
}

.nav-top-mobile li {
	display: block;
	color: #fff;
	font-size: 1.5em;
	letter-spacing: 0px;
	padding: 15px;
}

.nav-top-mobile li a {
	color: #fff;
	text-decoration: none;
}

.mobile-menu-logo {
	text-align: center;
	margin: auto;
	width: 235px;
	margin-bottom: 15px;
}

.grid-slidemenu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	
}






.card-skill:hover {
	cursor: pointer;
}






.card-services ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.card-services li {
	display: block;
	height: auto;
	margin-bottom: 30px;
	background-position: center top;
	background-size: 150px;
	background-repeat: no-repeat;
	padding-top: 160px;
}



.card-clients {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 15px;
	grid-row-gap: 15px;

}

.card-clients img {
	width: 100%;
}


.card-clients li {
	display: block;
}


/*=====================================================================================================*/
/*======================================================================== WORK slide =================*/
/*=====================================================================================================*/

.card-work {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap:15px;
	grid-row-gap: 15px;
}

.card-work li {
	display: block;
}
.card-work li a {
	/*
	display: flex;
	width: 400px;
	height: 400px;
	text-align: center;
	justify-content: center;
	*/
}
.card-work li a img {
	max-width: 100%;
}





.card-contact {

}


/*=====================================================================================================*/
/*======================================================================== MODALS Serives/work =================*/
/*=====================================================================================================*/



#mw-service-modal h2, #mw-work-modal h2 {
	font-size: 5em;
	
	font-weight: 300;

	text-align: left;
	line-height: 1em;
	margin-bottom: 30px;
	
}
#mw-service-modal h3, #mw-work-modal h3 {

	font-size: 1.5em;
	line-height: 1em;
	margin-bottom: 15px;
	font-weight: bold;

}
#mw-work-modal h3:not(:first-of-type) {
  margin-top: 60px;
}
#mw-service-modal ul, #mw-work-modal ul {
	margin-left: 30px;
	margin-bottom: 30px;

}
#mw-service-modal ul li, #mw-work-modal ul li {

	margin-bottom: 15px;
	list-style-type: square;

}

#mw-work-modal ul.mw-work-gallery {

margin-left: 0;

}
#mw-work-modal ul.mw-work-gallery li {
	list-style-type: none;
}

.grid-workoverview {
	display: grid;
	grid-template-columns:1fr  300px ;
	grid-column-gap: 30px;
	margin-bottom: 30px;

}

.column-metacontent {
	order: 2; /* Moves to the left */

}

.column-column-workcontent {
	order: 1; /* Moves to the right */
}




.mw-work-role span, .mw-work-industry span, .mw-work-services span, .mw-work-platform span   {
	display: block;
}

/*=====================================================================================================*/
/*======================================================================== FORM slide =================*/
/*=====================================================================================================*/


/* Targets <input type="text"> */
input[type="text"], input[type="name"]  {
  height: 40px;
  width: 100%;
  box-sizing: border-box;
}



/* Targets <input type="checkbox"> */
input[type="checkbox"] {
  margin: 10px;
} 

.frm_opt_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.form-field {
	padding-bottom: 15px;
}

.frm_error {
	color: red;
}
.frm_message {
font-size: 2em;	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */

.nav-mobile {
	display: none; /*maybe one day we can put a mobile menu */
}


/*======================================================================================================*/
/*======================================================================== STRUCTURE ===================*/
/*======================================================================================================*/

.parent {
	display: grid;
	grid-template-columns: 1fr;
}



column-content {
	position: relative;
}


.slide {
	min-height: 100vh;
	max-width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 4;
	overflow-x: hidden;
}


.slide-content {
  z-index: 2;
 width: 100%;
}

#about, #services, #client-experience, #work, #contact {
	
}


#hero-video {
  position: fixed;
  right: 0;
  bottom: 0;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}



.card-services ul {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.grid-workoverview {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 0px;
	margin-bottom: 30px;

}





.column-metacontent {
	order: 1; /* Moves to the left */
	margin-bottom: 30px;
}

.column-column-workcontent {
	order: 2; /* Moves to the right */
}








/* End Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px)
and (max-device-width : 480px) {
/* Styles */

/* End Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */



/* End Styles */
}


 
 
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {



/* Styles */
}


/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */





}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {





/* Styles */
}







/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
/* Styles */


}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: ""; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #e1e1e1; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  .search-module, .full-bar-nav, .where, #crumbs, .brochure, .social-set, #footernav, .nav-sticky, .noprint { display: none !important; }
  .logo-purple-print, .logo-ngyp-print { display: inline !important; }
  .header { height: 90px !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }