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

/*General Styles*/
body{margin:0em;}
#home{background-image:url(../images/blur-close-up-computer-9046.jpg); background-size:cover;}
article, aside{
    background-color: whiteSmoke;
    display: inline-block;
	opacity:0.8;
	margin:1em;
	padding:1em;
}
#about{background-image:url(../images/internet-3484137.jpg); background-size:cover;}
#about article{max-width:30%;}
#web{background-image:url(../images/bright-bulb-close-up-459718.jpg); background-size:cover;}
#java{background-image:url(../images/blur-close-up-code-546819.jpg); background-size:cover;}
#other{background-image:url(../images/hands-1167612.jpg); background-size:cover;}
#badges{background-image:url(../images/hands-1167618.jpg); background-size:cover;}
section{min-height:20em; opacity:0.8; background-attachment:fixed; overflow:auto;}
#java article, #about article, aside.right{float:right;}
aside.left{float:left;}
#home article{
    width: 50%;
    vertical-align: middle;
}
section.break{min-height:2em !important;}
nav {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e69de+0,3690f0+49,54a3ee+50,6db3f2+100 */
	background: rgb(30,105,222); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(30,105,222,1) 0%, rgba(54,144,240,1) 49%, rgba(84,163,238,1) 50%, rgba(109,179,242,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(30,105,222,1) 0%,rgba(54,144,240,1) 49%,rgba(84,163,238,1) 50%,rgba(109,179,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(30,105,222,1) 0%,rgba(54,144,240,1) 49%,rgba(84,163,238,1) 50%,rgba(109,179,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e69de', endColorstr='#6db3f2',GradientType=0 ); /* IE6-9 */
    /*background: linear-gradient(red, yellow);*/
    padding-bottom: 0px;
    margin-bottom: 0px;
    position: fixed;
    display: block;
    top: 0px;
    width: 100%;
	z-index:1;
	color:white;
	font-weight:bold;
  padding-top:0.75em;
}
#logo{font-size:2em; margin-left:1em; margin-right:1em;}
#footerMenu{display:block;}
#copy{text-align:center; display:block;font-size: 0.85em;color: grey;}
#breadcrumbs{margin-top:3em;}

/*Fonts*/
@font-face{font-family:Ipanema Secco; src: url(../fonts/Ipanema%20Secco.ttf);}
@font-face{font-family:neo latina;src: url(../fonts/neo-latina-demo-FFP.ttf);}
@font-face{font-family:breve;src: url(../fonts/BREVE2.ttf);}
@font-face{font-family:horizon outline;src: url(../fonts/Horizon-Outlinetwo.otf);}
@font-face{font-family:lintel;src: url(../fonts/Lintel-Regular.otf);}
@font-face{font-family:fancy;src: url(../fonts/Fancy-Light.otf);}

/*Font styles*/
h2{font-family:Ipanema Secco; font-size:3em; text-shadow:3px 3px 3px #888;}
h2.item-title, h3{font-family:neo latina; font-size:3em; text-align:center; color:navy; text-shadow:3px 3px 3px #888;}
p{font-size:1.2em;}
p#create{
    font-family: breve;
    font-size: 5em;
    font-weight: bolder;
    color: deeppink;
    margin-left: 0.75em;
    margin-right: 0.75em;
	text-shadow:3px 3px 3px #888;
  	line-height:5em;
}
p#innovate {
    font-family: lintel;
    font-size: 4em;
    color: orangered;
    font-weight: bolder;
    margin-left: 1em;
    margin-right: 1em;
	text-shadow:3px 3px 3px #888;
  	line-height:5em;
}

p, span{font-family:"Comic Sans MS", arial;}
p.top{text-align:center;}
nav p{margin-top:0px; margin-bottom:0px;}
nav ul li a{text-decoration:none; color:floralwhite;}
nav ul li a:active, nav p a:hover{}
h3.hidden{display:none;}

/*menu*/
nav ul{display:inline-block;}
nav ul li{display:inherit; border-right:2px solid white; padding-right:1em; padding-left:1em;}
nav ul li#contact,nav ul li:last-child{border-right:none;}
#logo, #topMenu{display:inline-block; vertical-align:top;}
.myTopMenu{padding-left:0px;}
#footerMenu .nav li{display:inline-block;}
#footerMenu .nav li:not(:last-child) {
	margin-right: 1em;
	border-right: 1px solid silver;
	padding-right: 1em;
}
menu_button menu_icon{display:none;}

/*search*/
#searchBar{padding:0px; float:right; background:transparent;margin-top:0em;margin-bottom:0em;}
#searchBar form label{color:ghostwhite;}
#searchBar form input{border: 1px silver;}

/*Breadcrumbs*/
#breadcrumbs .breadcrumb li{display:inline; list-style-type:none;}

/*content*/
#picon{width: auto; display:inline-block; min-height:auto; vertical-align:top; text-align:center;}
#intro{max-width:65%; display:inline-block; float:right; margin-right:10em;}

/*Animations*/
@keyframes animatepicon{
	0%{
		opacity:0;
		transform:scale(0);
		transform-origin:center center;
		width:0%;
	}
	50%{
		opacity:0.5;
		transform:scale(-1);
		transform:rotate(360deg) scale(-1);
		transform-origin:center center;
		width:0%;
	}
	100%{
		opacity:1;
		transform:scale(1);
		transform-origin:center center;
	}
}
#picon{
	animation-name: animatepicon;
	animation-duration:2s;
}
/*Images*/
#php{height:2.7em;}
#mysql{height:3.2em;}
#html5{height:6em;}
#javalogo{height:4.5em;}
#xml{height:4.2em;}


/*Styling for mobile devices*/
 /* Add a black background color to the top navigation */
.myTopMenu{overflow:hidden;}

/* Add an active class to highlight the current page */
nav.active {
    background-color: transparent;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.myTopMenu .icon {
    display: none;
}
/*Media Queries*/

@media screen and (max-width: 360px){
	#home article{width:82% !important;}	
	aside.left, aside.right {width: 82% !important;}
	p#create {margin-left: 0.3em!important; margin-right: 0.3em!important;}
	p#innovate {margin-left: 0.1em !important;	margin-right: 0.1em !important;}
	.navicon-line {height: 4px !important; margin-bottom: 3px !important; width: 20px !important;}
	.menu_button {background: transparent !important; padding: 8px 8px 8px 8px !important; width: 20px !important; cursor: pointer !important;}
	#top{margin-top:2em;}
	ul.first-ul li {width: 100%;}
}
@media screen and (max-width: 640px) and (min-width:361px) {
	#home article{width:85% !important;}
	aside.left, aside.right {width: 85% !important;}
	p#create {margin-left: 0.3em!important; margin-right: 0.3em!important;}
	p#innovate {margin-left: 0.1em !important;	margin-right: 0.1em !important;}
	.navicon-line {height: 4px !important; margin-bottom: 3px !important; width: 20px !important;}
	.menu_button {background: transparent !important; padding: 8px 8px 8px 8px !important; width: 20px !important; cursor: pointer !important;}
	#top{margin-top:2em;}
	ul.first-ul li {width: 100%;}
}
@media screen and (max-width: 800px) and (min-width:641px) {
	.menu_button{display:block !important;background: transparent !important; padding: 8px 8px 8px 8px !important; width: 20px !important; cursor: pointer !important;}
	ul.first-ul li {width: 100%;}
}
@media screen and (max-width: 1024px) and (min-width:801px) {
	.menu_button{display:block !important;background: transparent !important; padding: 8px 8px 8px 8px !important; width: 20px !important; cursor: pointer !important;}
	ul.first-ul li {width: 100%;}
}
@media screen and (max-width: 1280px) and (min-width:1025px) {}
@media screen and (max-width: 1600px) and (min-width:1281px) {}
@media screen and (max-width: 1920px) and (min-width:1601px) {}
/* When the screen is less than 979 pixels wide, hide all links*/
@media screen and (max-width: 979px) {
  .myTopMenu li, .dropdown .dropbtn {
    display: none;
  }
  .myTopMenu li a.icon {
    float: right;
    display: block;
  }
  #logo {
    font-size: 2em;
    margin-left: 1em;
    margin-right: 0em;
	}
	#breadcrumbs{display:none;}
	#home article {
		width: 87%;
		vertical-align: middle;
	}
	#picon {
		max-width: 100%;
		display: block;
		min-height: auto;
		vertical-align: top;
		text-align: center;
		margin-top:0em;
		float:right;
		width:100% !important;
	}
	#html5 {
		height: 6em;
	}
	#mysql {
		height: 3.2em;
	}
	#php {
		height: 2.7em;
	}
	#javalogo {
		height: 4.5em;
	}
	#xml {
		height: 4.2em;
	}
	#intro{max-width:100%; display:block;width:100%;margin-right:0px;}
	#about article {
		max-width: 100%;
	}
	aside.left, aside.right{width:87%; float:left;}
	section {
		min-height: 10em;
		opacity: 0.8;
		background-attachment: fixed;
		overflow: auto;
	}
	section.break {
		min-height: 1em !important;
	}
  #footerMenu{display:hidden;}
  menu_button menu_icon{display:inline-block;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 979px) {

  .myTopMenu.responsive {position: relative;}
  .myTopMenu.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .myTopMenu.responsive li {
    float: none;
    display: block;
    text-align: left;
	border:none;
  }
  .myTopMenu.responsive .dropdown {float: none;}
  .myTopMenu.responsive .dropdown-content {position: relative;}
  .myTopMenu.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  /*Mobile Menu*/
  #dj-megamenu113mobile {
      display: inline-block;
  }
  .dj-megamenu-select-dark .dj-mobile-open-btn, .dj-megamenu-offcanvas-dark .dj-mobile-open-btn, .dj-megamenu-accordion-dark .dj-mobile-open-btn {
	display: inline-block;
	cursor: pointer;
	margin: 0 auto;
	width: auto;
	height: 24px;
	font-size: 24px;
	line-height: 1;
	padding: 3px 8px;
	background: transparent;
	color: #434343;
	text-align: center;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out;
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
} 
/* Jacob Lett - https//BootstrapCreative.com - Reference / Refresh / Repetition */

.modal-header {
  border-bottom: none;
}

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-backdrop {
background-color:#fff;
  opacity:1!important;
    border: 10px solid rgba(136, 136, 136, .4);
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.modal-body {
  text-align: center;
}

.modal-body form {
  margin: 0 auto;
  float: none;
  width: 300px;
}

.modal-content .close {
  opacity: 1;
  font-size: 30px;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border: none;
}


/*Cookie Hint Styles*/
#redim-cookiehint .cookiebuttons .btn {
	padding: 5px 10px !important;
	color: black;
	background-color: #333;
	font-size: 12px;
	line-height: 14px;
	margin-top: 2px;
	margin-bottom: 2px;
	cursor: pointer;
}
div.cookiecontent{
  max-width:90%;
}
/*breadcrumbs*/
.breadcrumb{margin:0em;padding:0em;}

/*Search*/
.search{margin-bottom:0em;}

/* Menu*/
.mobMenu, #mainMenu{display:inline-block;}
div#mainMenu ul.mainMenu,div#mainMenu ul.mainMenu li.maximenuck.level1:hover, div#mainMenu ul.mainMenu li.maximenuck.level1.active{background:none !important;}
div#mainMenu ul.mainMenu li.maximenuck.level1 > a, div#mainMenu ul.mainMenu li.maximenuck.level1 > span.separator{padding:unset;}


/*tzPortfolio Styling*/
.tp_extrafield-item{overflow:auto;}
.tp_extrafield-label, .tp_extrafield-value{display:inline-block;}
.tp_extrafield-value{width:20%;}
.tpItemPage .tp_plnk .tpPortfolioLink a {background-color:darkblue;}
.tp_intro{padding-top:1em;}