@charset "UTF-8";
/* Desktop / Global View */

/* Photo Grid DESKTOP---------------------------------------------------------------*/
  img {
	width: 100%;
  }
  .photo-grid-container {
	column-count: 5;
	column-width: 300px;
  }
  .photo-grid-item {
	margin: 0 auto 15px;
	max-width: 400px;
	width: 100%;
  }
.img-adjust {
	opacity:1;
	transition:opacity .3s ease;
  }
.img-adjust:hover {
opacity:0.5;
  }


/* Footer ---------------------------------------------------------------*/
footer {
	line-height: 30x;
	text-align: center;
	background: rgba(28, 32, 36, 1);
	width: auto;
	height: 230px;
	padding-top:10px;
	padding-bottom:30px;
	color: white;
	margin-left: 0;
	margin-right: 0;
}
footer a:link {
	color: white;
  }
footer a:visited {
	color: white;
  }
footer a:hover {
	color: skyblue;
	text-decoration: none;
 }

.footer-logo {
	display:block;
	text-align: center;
	margin-top: 20px;
	margin-bottom: -25px;
}
/* Containers ---------------------------------------------------------------*/
.containerBox {
	text-align: center;
	width: auto;
	height: auto;
	padding-top:10px;
	padding-bottom:5px;
}
.containerBox2 {
	text-align: center;
	width: auto;
	height: auto;
	margin-bottom:50px;
	padding-top:10px;
	padding-bottom:5px;
}

.btnVisitPort {
	border: none; /* Remove borders */
	color: black; /* Add a text color */
	font-weight: bold;
	font-size: 1rem;
	text-decoration: none;
	background-color: white; /* Add a background color */
	padding: 14px 28px; /* Add some padding */
	cursor: pointer; /* Add a pointer cursor on mouse-over */
	border-radius: 10rem;
}

h1 {
	font-size: 40px;
	margin-bottom: -10px;
}

.center-button {
	padding-top:150px;
	display: none;
	text-align: center;
}

.add-skills {
	text-align: left;
	color: white;
}
/* Navigation ---------------------------------------------------------------*/
.topnav {
	border-radius: 0px;
	overflow: hidden;
	margin-top: 50px;
	background-color: #0b0813;
	text-align: right;
  }
  
.menuitem {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding-top: .8rem;
	padding-right: 1rem;
	padding-bottom: .8rem;
	padding-left: 2rem;
	text-decoration: none;
	font-size: 17px;
	margin-top: 15px;
	border-radius: 10rem;
}

.menuitemport {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding-top: .8rem;
	padding-right: 2rem;
	padding-bottom: .8rem;
	padding-left: 2rem;
	text-decoration: none;
	font-size: 17px;
  margin: 15px 0px 0px 180px;
 
  line-height: 1.618rem;
	}

.menuhome {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.toplogo {
	padding: 0px 0px 0px 0px;
	float: none;
	display: block;
	fill: #FFFFFF;
  }

.toplogo:hover {
	fill: #0059a4;
  }

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  text-decoration: underline;
  color: #0072cf;
  text-align: right;
}


.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* MENU TABLET VIEW---------------------------------------------------------------*/

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
	display: none;
  }
  .topnav a.icon {
	float: right;
	display: block;
  }
 .menuitemport {
	margin: 15px 0px 0px 180px;
}
}
/*---------------------------------------------------------------*/

.active {
	background-color: #04AA6D;
	color: white;
}

hr {
	width: 90%;
	height: 2px;
	margin-left: 0px;
	margin-right: 50px;
	background-color: #b7d0e2;
	border: 0 none;
}

/* BarCharts---------------------------------------------------------------------- */
.page-container-about-us {
	width:100%;
	margin-left: 15px;
	margin-right: 15px;
}
.containerAllSkills {
	width:100%;
	margin-left: -15px;
}
.containerSkills {
	width:300px;
	padding:15px;
	padding-bottom:80px;

}
.containerSkills-col-01{
	margin-top: 10px;
	width:50%;
	float: left;
	color:#fff;
}
.containerSkills-col-02{
	margin-top: 10px;
	width:50%;
	float: left;
	color:#fff;
}
.icos {
	float: left;
	width:50px;
	height:50px;
	margin-top: 5px;
	margin-left: -5px;
	padding:5px;

}
.barname{
	margin-top: 10px;
	width:50%;
	float: left;
	color:#fff;
}
.additionalSkills {
	width: 100%;
	color:#fff;
	margin-top:150px;
	margin-bottom:-5px
}
.additionalSkillsDetails {
	width: 90%;
	color:#fff;
	margin-top:5px;
	margin-bottom:-5px
}
.wrapperBars{
	display: inline-block
}
.Bar25 {
	float: left;
	width: 70%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}
.Bar23 {
	float: left;
	width: 67%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}

.Bar18 {
	float: left;
	width: 57%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}

.Bar7 {
	float: left;
	width: 25%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}

.Bar2 {
	float: left;
	width: 15%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}

.Bar3 {
	float: left;
	width: 20%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}
.Bar0 {
	float: left;
	width: 13%;
	margin-left: 0px;
	margin-top: 15px;
	margin-right: -10px;
	padding-top: 10px;
	padding-left: 10px;
	height:30px;
	background: #fff
}

/* HTML BODY ------------------------------------------------------*/ 
#grad1 {
	background-color: #201a30; /* For browsers that do not support gradients */
	background-image: linear-gradient(#000f2d, #001339);
}

body {
	font-family: 'Open Sans', sans-serif;
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
}
.col {
	float: left;
	padding: 0;
}

.col-lg {
		width: 33.3%;
	}

.col-lg img {
	width: 100%;
	height: auto;
	display: block;
}

.portcaption {
	text-align:center;
	color:#fff;
	font-size:15px;
	padding: 10px;
}

.portcaption-left {
	text-align:left;
	color:#fff;
	font-size:15px;
	padding: 10px;
}

.privacy {
	color: fff;
	
}

.terms {
	color: fff;
	
}




.heading-terms-copy {
	color: #fff;
	margin-top: 50px;
}

header {

		padding-top: 10px 20px 20px 20px;
}

.hero {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 52px 0px 80px 72px;
	background-size: cover;
}

.heroPrivacy {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 52px 72px 100px 72px;
	background-size: cover;
	color: #fff;
}
.heroTerms {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 52px 72px 100px 72px;
	background-size: cover;
	color: #fff;
}

.featured {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 52px 0px 100px 25px;
	background-size: cover;
}

.heroContact {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 52px 0px 52px 92px;
	background-size: cover;
	;
}

.heroPrintPortfolio {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 50px 40px;
	background-size: cover;
}

.mograph-Portfolio {
	width:100%;
}

.heroLogos {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 1650px 40px;
	background-size: cover;
}


.heroAnimation {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 4500px 62px;
	background-size: cover;
}

.heroMotionPortfolio{
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 50px 62px;
}
.heroWebPortfolio{
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 100px 62px;
	background-size: cover;
}
.hero3Ddesign {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 5300px 62px;
	background-size: cover;
}

.heroEditorial {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 9500px 62px;
	background-size: cover;
}
.heroPoster {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 2800px 62px;
	background-size: cover;
}

.heroPackage {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 800px 62px;
	background-size: cover;
}

.heroSafepipe {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 1800px 62px;
	background-size: cover;
}

.heroChadwick {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 1800px 62px;
	background-size: cover;
}
.heroGrafxstop {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 1800px 62px;
	background-size: cover;
}

.heroTshirt {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 2000px 62px;
	background-size: cover;
}
.heroBranding {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 4000px 62px;
	background-size: cover;
}

.heroWebsite {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 3500px 62px;
	background-size: cover;
}
.aboutme {
	background-image:
    linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73));
	padding: 52px 0px 72px 52px;
	background-size: cover;
}

.contactMe {
	background-image:
    linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73));
	padding: 52px 0px 80px 50px;
	background-size: cover;
}

.subheading {
	color: #fff;
	font-weight: 800;
	font-size: 33px;
	margin-bottom: -35px;
}

.barheading {
	color: #fff;
	font-size: 33px;
	margin-bottom: -54px;
}


h1 {
	color: #fff;
	font-weight:300;
	font-size: 40px;
	margin-bottom: 10px;
}

.circular--square {
	width:250px;
	height:250px; 
	border-radius: 50%;
}

.whatido {
	color: #fff;
	font-weight:400;
	font-size: 30px;
	display:block;
	float: left;
	margin: 0px 0px 0px 0px;
}

.center {
	text-align:center;
	margin-left: -50px;
  }
  
.centerAboutTitle {
	text-align:center;
	display: block;
	margin-left: -52px;
  }

.whoiam {
	color: #fff;
	font-weight:400;
	font-size: 30px;
	display:block;
	margin: 0px 0px 0px 0px;
	;
}

.heading-body-copy {
	color: #fff;
	margin-right: 5%;
	margin-bottom: 20px;
}

.heading-body-copy-02 {
	color: #fff;
	font-size:30px;
	margin-right: 20%;
	margin-bottom: 20px;
}

.heading-thank-you {
	color: #fff;
	font-size:50px;
	margin-right: 20%;
	margin-bottom: 20px;
}

.green-boxy {
	padding:50px;
	background-color: rgb(54, 178, 54);
	border: 1px solid rgba(0, 128, 0, 0.733);
	opacity:0.6;
	margin-right: 20%;
	filter:alpha(opacity=40); /* For IE8 and earlier */
  }

.about-body-copy {
	color: #fff;
	margin-right:150px;
	margin-right:50px;
	margin-bottom:30px;
}
.lets-talk {
	background-color: #df9e10;
	padding: 8px 30px ;
	font-style: bold;
	text-decoration: none;
	color: #fff;
}

.lets-talk-green {
	background-color: #4ba61a;
	padding: 8px 30px ;
	font-style: bold;
	text-decoration: none;
	color: #fff;
}
.logo {
	float:left;
	background-color: none;
}

/* Form ------------------------------------------------*/
.msg {
	margin: 15px;

}

.msg p {
	margin:0;
	padding: 15px;
}

.msg .success {
	background: #3bb056;
	border: 1px solid  #c3e6cb;
}

.msg .error {
	background: #b23b45;
	border: 1px solid  #f5c6cb;
}

.inputwrapper {
	margin-bottom: 30px;
}

input[type=text], input[type=email], textarea  {
	padding: 12px 20px;
	width: 80%;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.85rem;
}

.newline {
	display: block;
	margin-bottom: 15px;
	margin-bottom: -25px;
	color: #fff;
}

form {
	margin: 10px 0px;
}

.center-button {
	display:none;
	text-align: center;
}

.center-button-port {
	display:block;
	padding-top:800px;
	text-align: center;
}
.btn {
	border: none; /* Remove borders */
	color: white; /* Add a text color */
	padding: 14px 28px; /* Add some padding */
	cursor: pointer; /* Add a pointer cursor on mouse-over */
  }
  
  .btnSubmit {
	border: none; /* Remove borders */
	color: black; /* Add a text color */
	font-weight: bold;
	font-size: 1rem;
	background-color: white; /* Add a background color */
	padding: 14px 28px; /* Add some padding */
	cursor: pointer; /* Add a pointer cursor on mouse-over */
	border-radius: 10rem;
}

a.site_link {
	color: rgb(255, 255, 255); /* Add a text color */
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer; /* Add a pointer cursor on mouse-over */
}

a.site_link:visited {
	color: rgb(255, 255, 255); /* Add a text color */
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer; /* Add a pointer cursor on mouse-over */
}

a.site_link:hover {
	color: rgb(15, 144, 199); /* Add a text color */
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer; /* Add a pointer cursor on mouse-over */
}

.btnSubmit:hover {
	background-color: #000000;
	color: white; /* Add a text color */
	font-weight: bold;
}
.btnBackTop {
	border: none; /* Remove borders */
	color: black; /* Add a text color */
	font-weight: bold;
	font-size: 1rem;
	text-decoration: none;
	background-color: white; /* Add a background color */
	padding: 14px 28px; /* Add some padding */
	cursor: pointer; /* Add a pointer cursor on mouse-over */
	border-radius: 10rem;
}



.success {
	background-color: #04AA6D;
	width: 80%;
  }
 
.success:hover {
	background-color: #46a049;
  }

.success2 {
	background-color: #04AA6D;
  }


/* Tablet View -----------------------------------------*/
@media screen and (max-width: 1000px) {
	.menuitemport {
		margin: 15px 0px 0px 0px;
		  }

}

.body {
	max-width: 100%;
}

.design-section {
	color: #fff;
	display: grid;
	padding: 2rem;
	grid-template-columns: 300px 1fr;
	gap: 1rem;
	align-items: center;
	max-width: 800px;
	margin: 0 auto;
	font: 500 100%/1.5 system-ui;
  }
/********************************************************************************
*********************************************************************************
********************************************************************************* 
Mobile View ----------------------------------------------*/
@media screen and (max-width: 800px) {
.body {
	max-width: 100%;
}
.centerAboutTitle {
	text-align:center;
	margin-left: 0px;
  }
  .center {
	text-align:center;
	margin-left: 50px;
  }
.aboutme {
	background-image:
    linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73));
	padding: 52px 0px 72px 22px;
	background-size: cover;
}
.footer-logo {
	display:block;
	text-align: center;
	margin-top: 22px;
	margin-bottom: -25px;
}
/* Photo Grid MOBILE---------------------------------------------------------------*/
img {
	width: 100%;
  }
  .photo-grid-container {
	column-count: 5;
	column-width: 300px;
  }
  .photo-grid-item {
	margin: 0 -7px -5px;
	max-width: 621px;
	width: 109%;
  }

h1 {
	color: #fff;
	font-weight:300;
	font-size: 30px;
	margin-bottom: 10px;
}
.design-section {
		display: block;
		font-size: 80%;
}

.design-section.p {
		position: relative;
		margin: -3rem 0 2rem 1rem;
		padding: 1rem;
		background: rgba(white, 0.8);
}

.heroPortfolio {
	padding: 5px 10px 1650px 10px;
}
.heroAnimation {
	padding: 5px 40px 3000px 62px;
}
.center-button {
	padding-top:150px;
	display: block;
	text-align: center;
}

.hero3Ddesign {
	padding: 5px 40px 550px 62px;
}

.heroBranding {
	padding: 5px 40px 350px 62px;
}
.heroLogos {
padding: 5px 40px 400px 40px;
}
.heroEditorial {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 300px 62px;
	background-size: cover;
}

.contact-button {
text-align:center;
padding-right:50px;
}

.green-boxy {
	padding:15px;
	background-color: rgb(54, 178, 54);
	border: 1px solid rgba(0, 128, 0, 0.733);
	margin-right: 5%;
  }

.heroAnimation {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 300px 62px;
	background-size: cover;
}

.heroBranding {
	background-image: linear-gradient(to bottom, #0b0813, rgba(1, 120, 212, 0.73)), url('');
	padding: 5px 40px 1300px 62px;
	background-size: cover;
}

.heroPoster {
	padding: 5px 40px 400px 62px;
}

.heroPortfolio {
	padding: 25px 15px 650px 15px;
}

.heroVideo {
	padding: 25px 40px 1250px 72px;
}

.topnav {
	margin-top: 0px;
	border-radius: 0px;
	}
.topnav a:not(:first-child), .dropdown .dropbtn {
	  display: none;
	}
/* On icon click Show Mobile Nav -------------------------------------*/
.topnav a.icon {
	  margin-right: 5%;
	  margin-top: 3%;
	  float: right;
	  display: block;
	  text-decoration: none;
	  color: white;
	  padding: 10px;

	}

.topnav.responsive {position: relative;}
.topnav.responsive .icon {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
.topnav.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
	  display: block;
	  width: 100%;
	  text-align: left;
	}

.circular--square {
		width:200px;
		height:200px; 
		margin-right:60px;
		border-radius: 50%;
		 }

.hbar {
		margin-left:-30px;
	}
.menuitemport {
	  margin: 0px;
	  border-radius: 0px 0px 0px 0px;
}

.menuitem {
	margin-top: 15px;
	border-radius: 0px 0px 0px 0px;
}
.portcaption {
	padding-bottom:10%;
}
.col-sm {
		width: 100%;
	}
	
.col {
		padding: 0;
	}
.hero {
		padding: 32px 0px 42px 42px;
		;
	}
.subheading {
		margin-bottom: -25px;
	}
}