/*
   _      _            _                             
  / \  __| |__ _ _ _ _| |   __ __ __ __     ___ __ _ 
 / ^ \/ _` / _` | ' ' | |__/ _ \ V / -_) _ / __/ _` |
/_/ \_\__,_\__,_|_|_|_|____\___/\_/\___|(_)\___\__,_|

Adam Love - Web Development Portfolio
 
*/


/*-------- global --------*/

/* Bootstrap overrides */
a.btn, button.btn {
	padding-top: .9rem;
}



#site-container {
	width: 100%;
	height: 100%;
	font-family: Roboto, Arial, sans-serif;
	font-size: 1rem;
	background: #1f242a url(../images/geometric-abstraction2.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.container {
	margin: 50px;
}
.modal-dialog.works {
	min-width: 90%
}
html [type=button] {
	-webkit-appearance: inherit !important;
}

.site-width {
	max-width: 1140px;
    margin: auto;
}
.margin-top {
	margin-top: 40px;
}

#section-top {
	min-height: 100vh;
	padding: 20px 0 80px 0;
}
#section-top a {
	margin-top: 14px;
	transition: all 0.25s;
}
.button-hover-round:hover {
	border-radius: 2rem;
	color: #fff !important;
	border-color: #fff !important;
}

#section-top-title h1 {
	max-height: 80px;
	word-spacing: 8px;
	color: #fff;
	font-family: 'Reem Kufi';
	font-size: 4.6rem;
	background: linear-gradient(to left,  #FC606F 0%, #b93d84 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#section-top-info {
	position: relative;
	height: 80px;
}
#section-top-info h2 {
	font-family: 'Reem Kufi';
	word-spacing: .1875rem;
	font-size: 1.9375rem;
	text-align: right;
	padding-top: 5px;
	background: linear-gradient(to left, #c11bf1 0%, #5edfff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Messenger scrambled text */
#messenger {
	position: absolute;
	bottom: -6px;
	right: 15px;
	text-align: right;
	color: #995cff;
	transform: translate(0%, -50%);
	font-family: 'Reem Kufi';
	font-size: 1.25rem;
	word-spacing: .1875rem;
	white-space: nowrap;
	text-shadow: 0 2px 2px rgba(#000, 0.9);
}


.lead-title {
	text-transform: uppercase;
	margin-bottom: 40px;
	background: linear-gradient(to left,  #FC606F 0%, #b93d84 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.lead-section {
	padding: 150px 0;
	color: #fff;
}
.lead-section.bg-black {
	background: #1f242a;
}

.lead-section-text {
	padding: 0 20%;
	color: #fff;
	text-align: center;
    font-size: 2.8125rem;
	font-family: 'Reem Kufi';
	word-spacing: .1875rem;
	line-height: 1.1em;
}
.lead-section-text p:not(.lead-title) {
	text-shadow: 0px 0px 13px rgba(0, 0, 0, 1);
}
.lead-section-text.intro {
	margin-top: 20vh;
}
.lead-section-text p span {
	display:inline-block; /* for animations */
	color: #03c7e8;
}

#section-need {
	background: url(../images/architecture.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#web-design-icon {
	background: url(../images/web-design-icon.png) no-repeat center center;
	margin-top: 60px;
	width: 100%;
	height: 200px;
	background-size: contain;
}


/*-------- Skills --------*/
#section-skills {

}
.skills {
	text-align: center;
}
.skills h3 {
	padding-top: 12px;
	color: #03c7e8;
	text-shadow: 0px 0px 13px rgba(0, 0, 0, 1);
}
.skills p {
	padding: 10px 20px 20px 20px;
	font-size: 1.3rem;
	text-shadow: 0px 0px 13px rgba(0, 0, 0, .6);
}

.hex-wrapper {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 20px;
	text-align: center;
}

.hex {
	display: inline-block;
	height: 100%;
	width: calc(100% * 0.57735);
	background-color: #fff;
}

.hex:before {
	position: absolute;
	top: 0;
	right: calc((100% / 2) - ((100% * 0.57735) / 2));
	background-color: inherit;
	height: inherit;
	width: inherit;
	content: '';
	transform: rotateZ(60deg);
}
.hex:after {
	position: absolute;
	top: 0;
	right: calc((100% / 2) - ((100% * 0.57735) / 2));
	background-color: inherit;
	height: inherit;
	width: inherit;
	content: '';
	transform: rotateZ(-60deg);
}
.hex-icon {
	position: absolute;
	top: 17px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #242424;
}

.hex-icon .fa-rocket {
	padding-right: 10px;
	background: linear-gradient(80deg, #b93d84 0%, #FC606F 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hex-icon .fa-mobile {
	background: linear-gradient(40deg, #901EC6 0%, #1B7FD1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hex-icon .fa-trophy {
	background: linear-gradient(40deg, #f5d060 0%, #db9b3f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*-------- Experience --------*/
#section-experience {
	min-height: 100vh;
	background: url(../images/architecture.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#section-experience .lead-section-text p {
	text-shadow: 0px 0px 13px rgba(139, 76, 2, 1);
}
.card-row {
	position: relative;
	padding: 10px;
}
.card-wrapper {
	position: relative;
	width: 225px;
	height: 225px;
	margin: 0 auto 40px auto;
	padding: 0;
	color: #fff;
}
.card {
	position: relative;
    height: 100%;
	width: 100%;
	margin: 0 0 40px 0;
    word-wrap: break-word;
    background-color: transparent;
	background-clip: border-box;
	border: 0;
	box-shadow: none;
}

.card-front,
.card-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	margin: auto;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	box-shadow: 7px 7px 40px 0px rgba(50, 50, 50, 0.39);
}
.card-front {
	border-radius: 50%;
}
.card-front i.tile-icon, .card-front img {
	display: block;
	margin: 10px auto 20px auto;
	text-align: center;
}
.card-front h4 {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 10px 0;
	text-align: center;
}
.card-front p.detail {
	font-size: 1.125rem;
	font-weight: normal;
	margin: 0;
	text-align: center;
}

.bg-purple {
	background: linear-gradient(to left,  #FC606F 0%, #b93d84 100%);
}
.bg-blue {
	background: linear-gradient(to left,  #1171bb 0%, #1d4491 100%);
}
.bg-black {
	background: linear-gradient(to left,  #555 0%, #333 100%);
}
.bg-white {
	background: linear-gradient(to left,  white 0%, white 100%);
}
.bg-violet {
	background-color: #58008C;
}

.voices-logo {text-align: center;
	width: 100%;
	display: inline-block;
	font-size: 2.8625rem;
	font-weight: 900;
}
.fa-circle {
	color: #FFBF13;
}
.fa-graduation-cap {
	color: #1d4491;
	background: linear-gradient(to right,  #901EC6 0%, #1B7FD1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.card-back {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.card-back p.title {
	margin-top: 4px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
}
.card-back p.desc {
	color: #fff;
	text-align: center;
}
.card-back p.link {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.25rem;
}
.card:hover .card-front {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.card:hover .card-back {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}

.end-section-text {
	margin-top: 40px;
	text-align :center;
}
#contact-me {
	margin-top:40px;
}

/* TAB PANE */
.tab-content img {
background-size: contain;
	max-width: 100%;
	border: 1px solid #ccc;
    padding: 10px;
}
.tab-overview {

}
.tab-desc {
	margin: 20px 0;
}

/* NAV TABS */
.nav-tabs {
	border-bottom: 1px solid #dee2e6;
	border: 0;
	padding: .7rem;
	margin-bottom: -20px;
	background-color: #2bbbad;
	z-index: 2;
	position: relative;
	border-radius: 2px;
}
.nav-tabs .nav-link {
	color: #fff;
}
.nav-tabs a {
	white-space: nowrap;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border: none;
	color: #5edfff;
	border-radius: 2px;
}
.nav-tabs .nav-item.open .nav-link, .nav-tabs .nav-link.active {
    background-color: rgba(255,255,255,.2);
    color: #fff;
    -webkit-transition: all .5s;
	transition: all .5s;
	border: none;
    border-radius: 2px;
}
.nav-tabs-footer {
	text-align:	right;
	padding: 1rem 0;
	border-top: 1px solid #e9ecef;
}

.card .text-blue {
  color: #056CD1 !important;
}

@media (max-width: 991px) {
	#section-top-info h2 {
		text-align: left;
	}
	#section-top-info #messenger {
		right: auto;
		left: 16px;
	}
}
@media (max-width: 767px) {
	#section-top-title, #section-top-info h2 {
		text-align: center;
	}
	#section-top-info #messenger {
		right: auto;
		left: auto;
		padding: 0 1.8125rem 0 0;
		text-align: center;
		width: 100%;
	}
	.lead-section-text {
		padding: 0 10px;
		font-size: 2rem;
		line-height: 1.4em;
	}
	.lead-section-text.intro {
		margin-top: 10vh;
	}
}
@media (max-width: 575px) {
	#section-top-title h1 {
		font-size: 3.2rem;
	}
	#section-top-info h2 {
		font-size: 1.6rem;
	}
}