h2{
	color: #02b1d9;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 3vw;
	
}	

h3{
	color: #02b1d9;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 2vw;
}

h4{
	color: white;
	text-shadow: 2px 2px 4px #000000;
	font-weight: bold;
	font-family: sans-serif;
}

	

p{
	font-size: 20px;
	font-family: sans-serif;
}
	
*{
	box-sizing: border-box;
}	

body{
	margin: 0;
	padding: 0;
	height: 100%;
}	

header{
	width: 100%;
	height: 53px;
	max-height: auto;
	position: fixed;
	background-color: #333;
	top: 0;
	z-index: 2;/*was 2*/

}

#site_header {
	position: fixed;
	height: 50px;
	background: #fff;
	top: 0;
	width: 100%;
	z-index: 100;
	transition: all .3s ease;
	box-shadow: 0 1px 25px rgba(0,0,0, .1);
}
#site_header.hide {
	top: -53px;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
  width: 100%;
  max-width: auto;
  height: 3px;
  background-color: #737373;
}

.wrapper{
	width: 100%;
	height: 100%;
	max-height: auto;
	max-width: auto;
	background-color: white;
	/*min-height: 100vh;*/
}	



/*---NAV BAR---*/
.navBar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #333;
	color: white;
}	

.brand_title{
	font-size: 1.5rem;
	margin: .5rem;
}	

.navBar_links ul{
	margin: 0;
	padding: 0;
	display: flex;
	background-color: #333;
}	

.navBar_links li{
	list-style: none;
}	

.navBar_links li a{
	text-decoration: none;
	color: white;
	padding: 1rem;
	display: block;
}	

.navBar_links li:hover{
	background-color: #555;/*Will Change*/
}

.navBar_links li a:hover{
	background-color: #555;/*Will Change*/
}

.toggle_button{
	position: absolute;
	top: .75rem;
	right: 1rem;
	display: none;/*was flex*/
	flex-direction: column;/*Was Column*/
	justify-content: space-between;
	width: 30px;
	height: 21px;
}

.toggle_button .bar{
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;
}	

/* For Laptops */
@media screen and (min-width: 980px)/*was 980px*/{
	

}
/*For Mobile*/
@media screen and (max-device-width: 600px)/*was 980px*/{
	
	
	.toggle_button{
		display: flex;
	}	
	
	.navBar_links{
		display: none;
		width: 100%;
	}	
	
	.navBar{
		flex-direction: column;
		align-items: flex-start;
	}	
	
	.navBar_links ul{
		width: 100%;
		flex-direction: column;
	}	
	
	.navBar_links li{
		text-align: center;
	}	
	
	.navBar_links li a{
		padding: .5rem 1rem;
	}	
	
	.navBar_links.active{
		display: flex;
	}

	.Row{
		width: 100%;
		flex-direction: column;
	}
	
	.Row2{
		width: 100%;
		flex-direction: column;
	}
	
	.col_img{
		margin-right: auto;
		margin-left: auto;
		width: 100%;
	}
	
	.col_1{
		width: 100%;
		flex: column;
		margin-right: auto;
		margin-left: auto;
	}
	
	.col_2{
		width: 100%;
		flex-direction: column;
		font: 45px;
	}
	
	.col_1{
		width: 100%;
		flex-direction: column;
	}
	
	.My_Title{
	height: auto;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	
	.modal{
		width: 100%;
	}
	
	.modal_content{
		width:100%;
	}
	
	.col_4{
		width: 100%;
		flex-direction: column;
	}
	
	.column{
		width: 100%;
		max-width: 50%;
		align-items: center;
		
	}
	
	.cont_image{
		width: 100%;
		max-width: 100%;
		
	}
	
	.projects{
		width: 100%;
		align-items: center;
	}
	/*-Footer--*/
	.Row_2{
		width: 100%;
		flex-direction: column;
	}
	.col_5{
		width: 100%;
		flex-direction: column;
	}
	.col_6{
		width: 100%;
		flex-direction: column;
	}
	.col_22{
		width: 100%;
		flex-direction: column;
	}
}

/*For Tablet : portrait and landscape */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
	
	
	
	.toggle_button{
		display: flex;
	}	
	
	.navBar_links{
		display: none;
		width: 100%;
	}	
	
	.navBar{
		flex-direction: column;
		align-items: flex-start;
	}	
	
	.navBar_links ul{
		width: 100%;
		flex-direction: column;
	}	
	
	.navBar_links li{
		text-align: center;
	}	
	
	.navBar_links li a{
		padding: .5rem 1rem;
	}	
	
	.navBar_links.active{
		display: flex;
	}
	
}

/*----FIXED BANNER---*/
.banner_area{
	background-image: url(Images/CDWLogo2.jpg);/*was BannerSoon*/
	background-size: auto;
	background-position: center top;
	background-repeat: no-repeat;
	height: 100%;/*was 100%*/
	width: 100%;
	position: fixed;
	

}

/*.banner_area:after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #535353;/*#130f40
	opacity: .7;
	z-index: -1;
}*/



.content_wrapper{
	height: auto;
	min-height: 100vh;
	width: 100%;
	position: relative;
	top: 700px;
	z-index: 1;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/*------CONTENT SECTIONS-----*/
.about_section,
.projects_section,
.history_section,
.contact_section,
.img_section,
.footer_setion{
	height: 100%;
	display: flex;
	align-items: center;
	padding: 5px;
	
}	

.about_section{
	background-color: white;/*#dbfbf4;*/
}	

.projects_section{
	background-color: white;/*#cfd6f9;*/
}	

.history_section{
	background-color: white;/*#d6f9cf;*/
}

.contact_section{
	background-color: white;/*#ffccff;*/
}

.footer_section{
	background-color: blue;
}

.container{
	width: 100%;
	height: auto;
	align-items: center;
}

/*--------ABOUT SECTION---------*/

.Row{
	width: 100%;
	height: auto;
	max-width: auto;
	max-height: auto;
	background-color: white;
	display: flex;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 15px;
	
}


.Row:after{
	content: "";
	display: flex;
	clear: both;
	flex-wrap: wrap;
}

.col_img{
	height: 300px;
	width: 300px;
	max-width: 100%;
	background-color: black;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	
}

.col_img>img{
	height: 300px;
	width: 300px;
}

.col_1{
	width: 100%;
	height: auto;
	display: column;
	padding: 3px;
}

.My_Title{
	height: auto;
	width: 100%;
	background-color: none;
}

.col_2{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	background-color: white;
	color: #333;
	font-size: 20px;
	font-family: sans-serif;
}

.col_2:after{
	content: "";
	display: table;
	clear: both;
}

.col_2 ul{
	margin: 0;
	padding: 0;
	display: column;
}

.col_2 li{
	list-style: none;
}


.col_2 li a{
	text-decoration: none;
	color: black;
	padding: 1rem;
	display: column;
}

.col_2 li a:hover{
	color: #02b1d9;/*Will Change*/
}

.res_link{
	width: 100%;
	height: auto;
}

.res_btn{
	position: relative;
	width: 40%;
	background-color: #222;
	border-radius: 4px;
	border-style: none;
	box-sizing: box;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	max-width: none;
	min-height: 44px;
	min-width: 10px;
	outline: none;
	overflow: hidden;
	padding: 9px 20ox 8px;
	text-align: center;
	text-transform: none;
	user-select: none;
	-webkit-user-selection: none;
	touch-action: manipulation;
}

.res_btn:hover,
.res_btn:focus{
	opacity: .75;
}

/*-------PROJECT SECTION-------*/

.projects_1{
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.Row2{
	margin: 8px;
	
}

.Row2:after{
	content: "";
	display: flex;
	clear: both;
	flex-wrap: wrap;
}

.Row2,
.Row2 > .col_3{
	padding: 8px;
}

.column{
	float: left;
	width: 33.33%;/*Was 100%*/
	height: auto;
	display: none;
	/*display: table;/*Table*/
	/*justify-content: space-between;*/
	/*align-items: center;*/
	/*padding: 3px;*/
	/*margin-right: auto;*/
	/*margin-left: auto;*/
}

/*.col_3:after{
	content: "";
	display: column;
	clear: both;
}*/

.show{
	display: block;
}

.col_22{
	width: 100%;
	max-width: 50%;
	height: auto;
	display: table;/*Table*/
	justify-content: space-between;
	align-items: center;
	padding: 3px;
	margin-right: auto;
	margin-left: auto;
}

.col_22:after{
	content: "";
	display: column;
	clear: both;
}

.cont_image{
	width: 100%;
	height: auto;
	/*border-left: 7px  #b1f7fa groove;*/
	/*border-bottom: 7px #b1f7fa ridge;*/
	position: relative;
	padding: 5px;
	margin: 0;
}

.cont_image>img{
	height: 300px;
	width: 100%;
}

.img_btn{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #222;
	border-radius: 4px;
	border-style: none;
	box-sizing: box;
	color: #fff;
	cursor: pointer;
	display: inline-block;/*was inline-block*/
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	max-width: none;
	min-height: 44px;
	min-width: 10px;
	outline: none;
	overflow: hidden;
	padding: 9px 20ox 8px;
	text-align: center;
	text-transform: none;
	user-select: none;
	-webkit-user-selection: none;
	touch-action: manipulation;
		
}

.img_btn:hover,
.img_btn:focus{
	opacity: .75;
}

/*--Filter Gallery----*/
.show{
	display: block;
}

.btn{
	border: none;
	outline: none;
	padding: 12px 16px;
	background-color: #222;
	border-radius: 4px;
	color: #fff;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 700;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
}

.btn:hover{
	opacity: .75;
}

.btn.active{
	background-color: #02b1d9;
	color: #fff;
}

/*---List for Link Button---*/
.My_Links{
	display: none;
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	
}


.My_Links ul{
	position: absolute;
	bottom: 0;
	padding: 0;
	margin: 0;
	display: flex;
	width: 100%;
	align-items: center;
	text-align: center;
}

.My_Links li{
	list-style: none;
	align-items: center;
	width: 100%;
	height: auto;
}

/*-----MODAL-----*/

#my_img{
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
	color: black;
	font-weight: bold;
}

#my_img:hover + .My_Links, .My_Links:hover{
	display: inline-block;
	
}




.modal{
	display: none;/*Hidden by Defult*/
	position: fixed;/*Stay in Place*/
	z-index: 1100;/*Stays on Top*/
	padding-top: 100px;/*Location of the Box*/
	left: 0;
	top: 25px;/*Doesnt Hide Behind Nav Bar*/
	width: 100%;/*Full Width*/
	height: 100%;/*Full Height*/
	overflow: auto;/*Gives Scroll if Needed*/
	background-color: rgb(0, 0, 0);/*Fallback Color*/
	background-color: rgba(0, 0, 0, 0.5);/*Black with Opacity*/
}

.modal_content{
	margin: auto;
	display: block;
	width: 100%;
	max-width: 700px;/*Change if needed for Mobile_Was 700*/
	z-index: 1100;
}

#caption{
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;/*Change if Needed for Mobile_Was700*/
	text-align: center;
	color: #ccc; /*May change #ccc*/
	padding: 10px 0;
	height: 150px;
}

.modal_content, 
#caption{
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}

.close{
	position: absolute;
	top: 15px;
	right: 35px;
	color: red;/*Color X  #f1f1f1*/
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	z-index: 110;/*Might Need This*/
}

.close:hover,
.close:focus{
	color: #bbb;/*Hover Color X #bbb*/
	text-decoration: none;
	cursor: pointer;
}

/*----History Section----*/


/*-----RESUME SLIDE------*/
	


/* Slideshow container */
.slideshow-container {
  width: 100%;
  max-width: 980px;
  height: auto;/*was 500px*/
  position: relative;
  margin: auto;
  /*z-index: 1;*/

}

/* Hide the images by default */
.mySlides {
  display: none;
}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  color: black;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #05f4fc;
}

/* Caption text */
.text {
  color: black;/*Was #333333*/
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;/*Was #f2f2f2*/
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #05f4fc;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*--Skills Bars--*/
.skill_bars{
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}


.col_4{
	width: 100%;
	height: auto;
	display: table;/*Table*/
	justify-content: space-between;
	align-items: center;
	padding: 3px;
	margin-right: auto;
	margin-left: auto;
}

.col_4:after{
	content: "";
	display: column;
	clear: both;
}

.my_skills{
	
	text-align: left;
	font-size: 12px;
	padding: 5px;
	color: black;
	/*border-left: 7px #b1f7fa groove;*/
	/*border-bottom: 7px #b1f7fa ridge;*/
	width: 100%;/*was425px*/
	max-width: auto;
	height: auto;
	
}

.skills_cont{
	width: 100%;
	max-width: 100%;
	height: 20px;
	background-color:#05f4fc;
	box-shadow: 3px 3px 15px 3px gray;
	align-items: center;
}

/*-----FRONT END---*/
.html{
	width: 90%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}	

.css{
	width: 90%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.js{
	width: 70%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.jqr{
	width: 70%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}
/*-----BACK END---*/

.Csharp{
	width: 45%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.Cplus{
	width: 50%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.Linux{
	width: 60%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.Flash{
	width: 60%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

/*-----SOFTWARE----*/
.photoshop{
	width: 75%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.illustrator{
	width: 70%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.indesign{
	width: 75%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.mOffice{
	width: 80%;
	height: 20px;
	background-color: #b1f7fa;
	padding: 3px;
}

.MySkills{
	width: 100%;
	height: auto;
}	

/*---------------Contact---------------*/

/*-------------Contact Form---------------*/

/*Style inputs with type="text", select elements and textareas*/

input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container4 {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/*----------------FOOTER-----------------*/

.footer_section{
	background-color:#26272b;
	padding:45px 0 20px;
	font-size:15px;
	line-height:24px;
	color:#737373;
	align-items: center;
	
}

.footer_section hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.footer_section hr.small
{
  margin:20px 0
}
.footer_section h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.footer_section a
{
  color:#737373;
  text-decoration: none;
}
.footer_section a:hover
{
  color:#3366cc;
  text-decoration:none;
}

.container_1{
	width: 100%;
	height: auto;
	align-items: center;
	background-color:#26272b;
}

.Row_2{
	width: 100%;
	height: auto;
	max-width: auto;
	max-height: auto;
	background-color: #26272b;
	display: flex;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	/*box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 15px;*/
}

.Row_2:after{
	content: "";
	display: flex;
	clear: both;
	flex-wrap: wrap;
}

.col_5{
	width: 100%;
	max-width: auto;
	height: auto;
	display: table;/*Table*/
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	margin-right: auto;
	margin-left: auto;
	
}

.col_5:after{
	content: "";
	display: column;
	clear: both;
}

.col_6{
	width: 100%;
	max-width: auto;
	height: auto;
	display: table;/*Table*/
	justify-content: space-between;
	align-items: center;
	padding: 3px;
	margin-right: auto;
	margin-left: auto;
	
}

.col_6:after{
	content: "";
	display: column;
	clear: both;
}

.footer_links
{
  padding-left:0;
  list-style:none;
}
.footer_links li
{
  display:block;
}
.footer_links a
{
  color:#737373;
}
.footer_links a:active,.footer_links a:focus,.footer_links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer_links.inline li
{
  display:inline-block;
}
.site_footer .social_icons
{
  text-align:right;
}
.site_footer .social_icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d;
}

/*---SOCIAL ICONS----*/

.social_icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none;
}
.social_icons li
{
  display:inline-block;
  margin-bottom:4px;
}
.social_icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px;
}
.social_icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear;
}
.social_icons a:active,.social_icons a:focus,.social_icons a:hover
{
  color:#fff;
  background-color:#29aafe;
}
.social_icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px;
}
.social_icons a.facebook:hover
{
  background-color:#3b5998;
}
.social_icons a.twitter:hover
{
  background-color:#00aced;
}
.social_icons a.linkedin:hover
{
  background-color:#007bb6;
}
.social_icons a.dribbble:hover
{
  background-color:#ea4c89;
}




/*----Image Decriptions---*/

.img_section{
	background-color: white; 
}

.img_description{
	width: 100%;
	height: auto;
	max-width: 300px;
	max-height: auto;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	align-items: center;
	font-size: 20px;
	
	
}

table{
	width: 100%;
	height: auto;
	text-align: left;
}

.img_about{
	width: 100%;
	height: auto;
	max-width: 980px;
	max-height: auto;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	margin-left: auto;
	margin-right: auto;
	font-size: 25px;
}

.img_about a{
	color: #333;
}

.img_about a:link{
	text-decoration: none;
	
}

.img_about a:hover{
	color: #02b1d9;
}

.return{
	width: 100%;
	height: auto;
	max-width: auto;
	max-height: auto;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 15px;
	margin-left: auto;
	margin-right: auto;
	font-size: 25px;
	text-align: right;
	padding: 5px;
	font-family: sans-serif;
	
}

.return_btn{
	background-color: transparent;/*Was #b1f7fa*/
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
    outline: none;
	color: #333333;/*Was #05f4fc*/
	padding: 2px;
	font-size: 20px;
	font-family: sans-serif;
	border: white;
}

.return_btn:hover{
	color: #02b1d9;
}