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

html, body { margin:0; padding:0;}
	
.wrapper {
  margin: 0 auto;
  /*max-width: 1160px;*/
  width:100%;
  padding: 0px;
  border: 0px;
  
}	
.menuToggle{display:none!important;}
	
.resizeHdr {display:block; width: 100%; height: auto;}
.resizeHdr600 {display:none;}
.resizeHdr850 {display:none;}	


.sticky {
  position: sticky;
  position: -webkit-sticky;
  background: #ffffff;
  height: 150px;
  top: 0;
  font: 13px/60px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}	
	
.content {
  background-color: #eee;
  height:3600px;
}
nav {
	position: fixed;
	background: #ffffff;
	top: 0;
	left: 0px; /*0*/
	right: 20px;
	width: 100%;
	height: 150px;
	font: 13px/60px;
	/*padding: 10px 100px;*/
	font-family: 'Poppins', sans-serif;
  	text-transform: uppercase;
 	letter-spacing: 1px;
  	color: #fff;
 	text-align: center;
	box-sizing: border-box;
	transition: .5s;	
}
.emptyImgNav img{
	width:52px; height:10px;
}

.navGroup {
	/*background-color:#F36;*/
	clear:both;
	width:650px;
	height:150px;
	padding-top: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

nav.black .emptyImgNav img {height:5px;}
		
nav.black{
	background: rgba(255,255,255,.95); /*black color: rgba(0,0,0,.8)*/
	height: 80px;
	/*padding: 10px 50px;*/
	font: 13px;
	line-height:24px;
}	
nav.black .sticky{
	height: 80px;
}
nav.black .logo img {
	height: 80px;
}	
nav.black ul li a {
	color: #949CA1;
	/*line-height: 60px;*/
	
	display: block;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
}		
nav.black .navGroup {
	/*background-color: #338;*/
	height: 80px;
	width: 502px;
	
}

nav.black .navGroup ul {
	/*background-color: #987;*/
	padding-top:28px;
	margin-top:0px;
	
}	
		
nav.black li {
	list-style-type: none;
	margin-top: -10px;
	padding-top: 10px;
}

nav.black li a {
  /*padding: 5px 18px;*/
}		




/* old style look at this.navGroup {
	clear:both;
	width:650px;
	height:150px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}*/

.logo {
	/*width:180px;*/
	/*background-color:#CCC;*/
	float:left;
}
nav .logo img {
	height: 150px;
	transition: .5s;
}

/*nav {
	width:100%;
	float: center;
	/*background-color:#F00;
	padding-top: 0px;
}*/

nav ul {
	float: left;
	margin: 0;
	padding: 0;
	/*overflow: hidden;*/
	display:flex;
  /*background-color: #333;*/
}

nav li {
	list-style-type: none;
	padding-top: 70px;
}

nav ul li a {
	/*line-height: 80px;*/
	display: block;
	color: #949CA1;
	text-align: center;
	padding: 15px 18px;
	text-decoration: none;
	transition: .5s;
	font-family: 'Poppins', sans-serif;
}


/* Change the link color to #111 (black) on hover */
nav ul li a:hover {
	background-color: #005596;
	color: #ffffff;
}	
	
	
/* mobile nav */
.topnav {
	display:none!important;
	 /*overflow: hidden;
	background-color: #333;
	position: relative;*/
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks { display: none; }

/* Style navigation menu links */
.topnav a {
	color: white;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	display: block;
	font-family: Raleway, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}		
		
a {color: #005596; /*font-weight: bold;*/}


/*services*/
.services {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 3%;
	padding-bottom: 3%;
	background-color: #ffffff; /*#E9DCEC*/
}
	
#servicesWrapper{width: 80%; height: auto; margin: 0 auto; display:table;}	
#servicesWrapper .col { display: table-cell; }		
	
.createServices {width: 45%; float: left; padding-left: 2%; /*padding-right: 10%;*/}
.createServices h1 {font-family: 'Poppins', sans-serif; color: #005596; font-weight: 400; font-size: 33px; line-height: 35px; margin: 0px; padding-bottom: 10px;}
.createServices h2 {font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 26px; line-height: 35px; margin: 0px; padding-top: 10px; padding-bottom: 10px;}
.createServices p {font-family: 'Poppins', sans-serif; font-weight: 200; font-size: 18px; line-height: 28px; margin: 0px; padding-bottom: 15px;}

.createSpcr {width: 10%; float: left;}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px 20px;
  background-color: #ffffff;
  padding: 2px; /*10px*/
}

.grid-container > div {
  /*background-color: #080303;*/
  text-align: center;
  padding: 20px 0;
  font-family: 'Poppins', sans-serif; font-weight:300; font-size: 18px; line-height: 25px; margin: 0px;
  color: #ffffff;
}

.item1 {
  grid-row: 1 / 2;
  background-color: #32a6a6;
}
.item1:hover {background-color: #237373;}
.item2 {
  grid-row: 1 / 2;
  background-color: #005596;
}
.item2:hover {background-color: #003b68;}

.item3 {
  grid-row: 3 / 4;
  background-color: #808080;
}
.item3:hover {background-color: #585858;}

.item4 {
  grid-row: 3 / 4;
  background-color: #92278f;
}
.item4:hover {background-color: #651b63;}

.typeCServices {width: 45%; float: right; padding-left: 0%; background-color: aquamarine;  /*padding-right: 10%;*/ }
.typeCServices h1 {font-family: 'Poppins', sans-serif; font-weight: bold; font-size: 18px; line-height: 24px; margin: 0px; padding-bottom: 0;}
.typeCServices h1 a {color: #ffffff;}
.typeCServices p {font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 20px; padding-top: 4px; margin: 0px; padding-bottom: 8px;}

.graphicDesign {width: 25%; float: right;}


/*quote*/

.quote {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 5%;
	padding-bottom: 5%;
	/*background-color: #575757; E9DCEC*/
	background-image: url("http://www.caritadesign.com/images/bkg-hearts-1400x575.png");
}	

#quoteWrapper{width: 80%; height: auto; margin: 0 auto; display:table;}	
#quoteWrapper .col { display: table-cell; }

.quoteIcon {width: 10%; float: left; padding-left: 2%; /*padding-right: 10%;*/}

.quoteIcon img{
	width: 90px;
	height: 60px;
	text-align: left;
	display: block;
	float: left;
	margin-left: 15px;
	margin-right: 25px;
	/*margin-left: auto;
	margin-right: auto;*/
	/*padding-top: 4%;*/
}

.quoteText {width: 84%; float: right; padding-left: 0%; /*padding-right: 10%;*/}
.quoteText p {font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 300; font-size: 20px; line-height: 30px; margin: 0; padding-left: 0px!important; padding-bottom: 15px;}
.quoteText h3 {font-family: 'Poppins', sans-serif; color: #ffffff; font-weight: 200; font-size: 16px; line-height: 18px; margin: 0; padding-top: 12px; padding-left: 0px!important; padding-bottom: 15px;}

/*work projects - homepage*/
.workProjects {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 3%;
	padding-bottom: 3%;
	background-color: #005596;
}	
#moreWork {font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 20px; text-align: right;padding-top: 28px; margin: 0px; padding-bottom: 8px; color: #ffffff;}
#moreWork a {color: #ffffff;}
#workProjectWrapper {width: 80%; margin: 2rem auto; }
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}
		
.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 5vw);
    grid-gap: 20px;
}	
.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	display: block;
}

.gallery__item--1 h1 {font-family: 'Poppins', sans-serif; color: #005596; font-weight: bold; font-size: 33px; line-height: 35px; padding-top: 15px; padding-left: 10%; padding-bottom: 1%; margin: 0px;} /*font-weight: 400; */		
	
.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
	background-color: #ffffff;
}
	
.gallery__item--2 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 4;
}
	
.gallery__item--3 {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 7;
}	
	
.gallery__item--4 {
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 4;
    grid-row-end: 7;
}

.gallery__item--5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 7;
}	

/*connect*/
.connect {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding-top: 3%;
	padding-bottom: 3%;
	background-color: #ffffff; /*#E9DCEC*/
}	
	
#connectWrapper{width: 90%; height: auto; margin: 0 auto; display:table;}	
#connectWrapper .col { display: table-cell; }	

.connectImg {width: 35%; float: left; padding-left: 5%; /*padding-right: 10%;*/ }
	
.connectTitle {width: 13%; float: left; padding-left: 5%; /*padding-right: 10%;  92278F*/ }
.connectTitle h1 {font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 33px; line-height: 35px; margin: 0px;}	

.connectSpcr {width: 5%; float: left;}
.connectContent {width: 60%; float: left; padding-left: 0%;}
.connectContent p {font-family: 'Poppins', sans-serif; font-weight: 200; font-size: 18px; line-height: 25px; margin: 0px; padding-bottom: 18px;}	
.connectContent h1 {font-family: 'Poppins', sans-serif; color: #005596; font-weight: bold; font-size: 33px; line-height: 35px; padding-top: 15px; padding-bottom: 12px;}

/*footer*/	
	
#footer {background-color: #92278F; width: 100%; float: left; clear: both;}
		
#footer p{
	margin-left: 11%;
	text-align: left;
	color: #E9DCEC;/*#FFFFFF*/
	font-size: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Poppins', sans-serif;
}