@charset "utf-8";
/* CSS Document */
html {
	font-family: Arial, Helvetica, sans-serif;
	
}

body {
	margin: 0;
	color: #0719A6;
	font-size: 16px;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

footer{
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 2.5rem;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	font-size: 18px;
}

ul li {
	background-color: #83e7e5;
	text-decoration: none;
	width: auto;
	padding: 0px 10px;
	border-radius: 10px;
	padding-bottom: 2px;
	margin-bottom: 5px;
	display: block;
	text-align: center;
	border-bottom: 2px #3197A5 solid;
	border-right: 2px #3197A5 solid;
}

ul li a {
	text-decoration: none;
	color: #0719A6;
	text-align: center;
}

ul li.active-page {
	background-color: #001cf0;
	border-bottom: 2px #000D76 solid;
	border-right: 2px #000D76 solid;
}
ul li a.active-page {
	color: #E8FFFE;
}

main p {
	text-align: center;
	line-height: 0.3;
	color: #0719A6;
	font-size: 16px;
}

/* GLOBAL/MOBILE VIEW */

	.logo {
		max-width: 180px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.headerbox {
		position: relative;
    	border-top: 0px solid transparent;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid transparent;
    	border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
        background-image: url("images/cc-background.jpg");
		background-size: cover;
        background-clip: padding-box;
   		padding: 10px;
		text-align: center;
	}
	.headerbox::after {
    	position: absolute;
        top: 0px; bottom: -10px;
        left: -6px; right: -6px;
        background: linear-gradient(to bottom, #001cf0, #83e7e5);
        content: '';
        z-index: -1;
        border-bottom-left-radius: 20px;
    	border-bottom-right-radius: 20px;
	}

	.footerbox {
		position: relative;
    	border-top: 0px solid transparent;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid transparent;
    	border-top-left-radius: 20px;
		border-top-right-radius: 20px;
        background-image: url("images/cc-background.jpg");
		background-size: cover;
        background-clip: padding-box;
   		padding: 10px;
		text-align: center;
	}

	.footerbox::after {
		position: absolute;
        top: -10px; bottom: 0px;
        left: -6px; right: -6px;
        background: linear-gradient(to top, #001cf0, #83e7e5);
        content: '';
        z-index: -1;
        border-top-left-radius: 20px;
    	border-top-right-radius: 20px;
	}

.containermain {
  margin: 15px;
  text-align: center;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.columncontainer {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.column {
  background-color: #D8E9F4;
  height: 150px;
}

.mailbutton {
	background-color: #83e7e5;
	text-decoration: none;
	color: #0719A6;
	width: auto;
	padding: 40px 10%;
	border-radius: 30px;
	border-bottom: 4px #3197A5 solid;
	border-right: 4px #3197A5 solid;
}

.uploadbutton {
	background-color: #83e7e5;
	text-decoration: none;
	color: #0719A6;
	width: auto;
	padding: 20px 5%;
	border-radius: 30px;
	border-bottom: 4px #3197A5 solid;
	border-right: 4px #3197A5 solid;
	text-align: center;
	margin: auto;
}

.mobile {display:block;}
.tabletpc {display:none;}
.tablet {display:none;}
.pc {display:none;}

.container {
  width: 80%;
  margin: 30px 10%;
}

button.accordion {
  width: 100%;
  background-color: #D8E9F4;
  border: none;
  outline: 1px solid #698190;
  text-align: center;
  padding: 15px 20px;
  font-size: 18px;
  color: #444;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button.accordion:hover {
  background-color: #698190;
}

button.accordion.is-open {
  background-color: #698190;
}

.accordion-content {
  background-color: #D8E9F4;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.accordion-content.is-open {
	max-height: 100px;
}

#binding {}
#engineering {}
#laminating {}
#specialty {}
#graphicdesign {}
#printing {}


.flexcontainer {
	display: inline-block;
	width: 80%;
	flex-wrap: nowrap;
}
.flexrow {
	display: flex;
	width: 100%;
	flex-wrap: nowrap;
}
.flexrowcontent {
	display: flex;
	justify-content: center;
	width: 100%;
	flex-wrap: nowrap;
}

.formbox {
	padding: 20px; 
	background-color: #B1C9D8; 
	width: 80%; 
	margin: 1% auto; 
	border-radius: 20px;
}

fieldset {
	margin: auto;
	border: none;
}

.submit {
	color: #0719A6;
	font-size: 16px;
	background-color: #83e7e5;
	text-decoration: none;
	width: auto;
	padding: 5px 20px;
	border-radius: 10px;
	padding-bottom: 6px;
	margin-bottom: 10px;
	margin: auto;
	display: block;
	text-align: center;
	border: none;
	border-bottom: 3px #3197A5 solid;
	border-right: 3px #3197A5 solid;
}




/* TABLET VIEW */
@media (min-width: 768px) {
	
.mobile {display:none !important;}
.tabletpc {display:block !important;}
.tablet {display:block !important;}
.pc {display:none !important;}


	ul {
		display: inline-block;
	}
	
	ul li {
		display: inline-block;
	}
	
	.formbox {
		width: 60%;
	}
	
}

/* DESKTOP VIEW */
@media (min-width: 1024px) {
	
.tabletpc {display:block !important;}
.tablet {display:none !important;}
.pc {display:block !important;}	

}