/* CSS Cards */

.CSSCardContainer {
    margin: auto;
    text-align: center;
}


.CSSCard {
    width: 300px;
    min-height: 550px;
    display: inline-block;
    border: 1px solid gray;
    border-radius: 0px 0px 15px 15px;
    padding: 5px;
    margin: 5px;
    overflow: hidden;
}


.CSSCardBanner {
    width: 800px;
    min-height: 550px;
    display: inline-block;
    border: 1px solid gray;
    border-radius: 0px 0px 15px 15px;
    padding: 5px;
    margin: 5px;
    /*overflow: hidden;*/
}


    .CSSCard:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }


.CSSCard-Container {
    padding: 10px;
    min-height: 400px;
    overflow: hidden;
    text-align: left;
    background-color: #EEEEEE;
}


.CSSCard-ButtonContainer {
    padding: 10px;
    width: 100%;
    align-self: center;
    text-align: center;
}











.myButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #f29c93;
    -webkit-box-shadow: inset 0px 1px 0px 0px #f29c93;
    box-shadow: inset 0px 1px 0px 0px #f29c93;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
    background: -moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: -webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: -o-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: -ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%);
    background: linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
    background-color: #fe1a00;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #d83526;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial !important;
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 11px 28px !important;
    text-decoration: none;
    text-shadow: 0px 1px 0px #b23e35;
}

    .myButton:hover {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
        background: -moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
        background: -webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
        background: -o-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
        background: -ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%);
        background: linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0);
        background-color: #ce0100;
    }

    .myButton:active {
        position: relative;
        top: 1px;
    }





.ConsoleIcon {
    width:100px;
    cursor:pointer;
}

.cardContainer {
    margin-top: -75px;
}

.label-black {
    color:#000 !important;
}

.card-top {
    margin-top: -125px !important;
}

.file-field.big .file-path-wrapper {
	height: 3.2rem;
}

	.file-field.big .file-path-wrapper .file-path {
		height: 3rem;
	}
.file-field {
	position: relative;
}
	.file-field .file-path-wrapper {
		overflow: hidden;
		padding-left: 10px;
		height: 2.5rem;
	}

.badge-primary {
	color: #ffffff;
	background-color: #2196f3;
}

	.badge-primary[href]:hover, .badge-primary[href]:focus {
		color: #ffffff;
		text-decoration: none;
		background-color: #0c7cd5;
	}

.badge-secondary {
	color: #ffffff;
	background-color: #6c757d;
}

	.badge-secondary[href]:hover, .badge-secondary[href]:focus {
		color: #ffffff;
		text-decoration: none;
		background-color: #545b62;
	}

.badge-success {
	color: #ffffff;
	background-color: #4caf50;
}

	.badge-success[href]:hover, .badge-success[href]:focus {
		color: #ffffff;
		text-decoration: none;
		background-color: #3d8b40;
	}

.badge-info {
	color: #ffffff;
	background-color: #00bcd4;
}

	.badge-info[href]:hover, .badge-info[href]:focus {
		color: #ffffff;
		text-decoration: none;
		background-color: #008fa1;
	}

.badge-warning {
	color: #212529;
	background-color: #ffeb3b;
}

	.badge-warning[href]:hover, .badge-warning[href]:focus {
		color: #212529;
		text-decoration: none;
		background-color: #ffe608;
	}

.badge-danger {
	color: #ffffff;
	background-color: #f44336;
}

	.badge-danger[href]:hover, .badge-danger[href]:focus {
		color: #ffffff;
		text-decoration: none;
		background-color: #ea1c0d;
	}

.badge-light {
	color: #212529;
	background-color: #f8f9fa;
}

	.badge-light[href]:hover, .badge-light[href]:focus {
		color: #212529;
		text-decoration: none;
		background-color: #dae0e5;
	}

.badge-dark {
	color: #ffffff;
	background-color: #343a40;
}

	.badge-dark[href]:hover, .badge-dark[href]:focus {
		color: #ffffff;
		text-decoration: none;
		background-color: #1d2124;
	}


.required-border {
	padding: .2em .25em .15em;
	border: solid .08em red;
	border-radius: .1em;
}


#resume {
	padding: 100px 0;
	/*background-color: #bdbec0;
	background-color: #f6f6f6;*/
}

.timeline {
	position: relative;
	padding: 0;
	list-style: none;
}

	.timeline:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 40px;
		width: 2px;
		margin-left: -1.5px;
		background-color: #eee;
	}

	.timeline > li {
		position: relative;
		/**/margin-bottom: 50px;*/
		min-height: 50px;
	}

		.timeline > li:before, .timeline > li:after {
			content: " ";
			display: table;
		}

		.timeline > li:after {
			clear: both;
		}

		.timeline > li .timeline-panel {
			float: right;
			position: relative;
			width: 100%;
			padding: 0 20px 0 100px;
			text-align: left;
		}

			.timeline > li .timeline-panel:before {
				right: auto;
				left: -15px;
				border-right-width: 15px;
				border-left-width: 0;
			}

			.timeline > li .timeline-panel:after {
				right: auto;
				left: -14px;
				border-right-width: 14px;
				border-left-width: 0;
			}

		.timeline > li .timeline-image {
			z-index: 100;
			position: absolute;
			left: 0;
			width: 25px;
			height: 25px;
			margin-left: 0;
			border: 1px solid #eee;
			border-radius: 100%;
			text-align: center;
			background: #71bd46;
		}

			.timeline > li .timeline-image h4 {
				margin-top: 20px;
				font-size: 14px;
				text-transform: uppercase;
			}

		.timeline > li.timeline-inverted > .timeline-panel {
			float: right;
			padding: 0 20px 0 100px;
			text-align: left;
		}

			.timeline > li.timeline-inverted > .timeline-panel:before {
				right: auto;
				left: -15px;
				border-right-width: 15px;
				border-left-width: 0;
			}

			.timeline > li.timeline-inverted > .timeline-panel:after {
				right: auto;
				left: -14px;
				border-right-width: 14px;
				border-left-width: 0;
			}

		.timeline > li:last-child {
			margin-bottom: 40px;
		}

	.timeline .timeline-heading h4 {
		margin-top: 0;
		text-transform: uppercase;
		font-size: 16px;
	}

	.timeline .timeline-heading h2 {
		margin-top: 30px;
	}

	.timeline .timeline-heading h4.subheading {
		text-transform: none;
		color: #71bd46;
		font-size: 20px;
	}

	.timeline .timeline-body > p, .timeline .timeline-body > ul {
		margin-bottom: 0;
	}

.skills-hr {
	height: 4px;
	width: 70px;
	text-align: center;
	position: relative;
	background: #71bd46;
	margin: 0 auto;
	margin-bottom: 30px;
	border: 0;
}


/* Media Queries */
@media(min-width:768px) {


	.timeline:before {
		left: 50%;
	}

	.timeline > li {
		/*margin-bottom: 100px;
		min-height: 100px;*/
	}

		.timeline > li .timeline-panel {
			float: left;
			width: 41%;
			padding: 0 20px 20px 30px;
			text-align: right;
		}

		.timeline > li .timeline-image {
			left: 50%;
			width: 70px;
			height: 70px;
			margin-left: -50px;
		}

			.timeline > li .timeline-image h4 {
				/*margin-top: 16px;*/
				line-height: 18px;
				font-weight: 400;
			}

		.timeline > li.timeline-inverted > .timeline-panel {
			float: right;
			padding: 0 30px 20px 20px;
			text-align: left;
		}
}

@media(min-width:992px) {

	.timeline > li {
		/*min-height: 150px;*/
	}

		.timeline > li .timeline-panel {
			padding: 0 20px 20px;
		}

		.timeline > li .timeline-image {
			width: 75px;
			height: 75px;
			margin-left: -75px;
		}

			.timeline > li .timeline-image h4 {
				/*margin-top: 30px;*/
				font-size: 18px;
				line-height: 26px;
			}

		.timeline > li.timeline-inverted > .timeline-panel {
			padding: 0 20px 20px;
		}
}

@media(min-width:1200px) {
	.timeline > li {
		/*min-height: 170px;*/
	}

		.timeline > li .timeline-panel {
			padding: 10px 20px 20px 100px;
		}

		.timeline > li .timeline-image {
			width: 70px;
			height: 70px;
			margin-left: -75px;
		}

			.timeline > li .timeline-image h4 {
				/*margin-top: 40px;*/
				font-weight: 400;
			}

		.timeline > li.timeline-inverted > .timeline-panel {
			padding: 10px 100px 20px 20px;
		}
}