@charset "utf-8";

/* base */
html, body{
	height: 100%;
	width: 100%;
}
html, body, header, footer, div, section, nav, p, ul, ol, li, h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 100%;
}
body{
	font-family: 'Raleway', sans-serif;
	color: #000000;
	font-size: 18px;
}
h1, h2, h3{ font-family: 'Raleway', sans-serif;}
h1, .h1{	font-size: 3.0em; }
h2, .h2{	font-size: 2.0em; }
h3, .h3{	font-size: 1.5em; }
ol, ul{ list-style: none; }
	ol.list-numbered{
		margin-left: 20px;
		list-style: decimal;
	}
		ol.list-numbered li{
			margin-bottom: 15px;
		}
	ul.list-bullet{
		margin-left: 20px;
		list-style: disc;		
	}
a{ text-decoration: none; }
	a:hover{ text-decoration: underline; }
	a img{ border: none; }
p{ margin-top: 1.0em; }

.headline{
	width: 100%; 
	border-bottom: 1px solid black;
	padding-bottom: 5px;
}

section.container, section.container-fluid{
	padding: 70px 0 25px 0;
}

.wrapper{
	background-color: #f4f5f6;
	border-bottom: 3px double #A9A9A9;
}

.modal-full{
	width: 95%;
}

.modal-header{
	color: #ffffff;
	background-color: rgba(59, 59, 59, 0.75);
}
	.modal-header button.close{
		font-size: 35px;
		line-height: .75;
		color: rgba(19, 175, 240, 1.00);
		opacity: 1.0;
		text-shadow: none;
		border: 1px solid black;
		border-radius: 5px;
		padding: 0 5px 5px 5px;
	}
	.modal-header button.close:hover{
		background-color: rgb(135, 135, 135);
	}

.modal-body .img-responsive{
	max-width: 90%;
}	

.bg-dark{
	background-color: rgb(34, 34, 34);
	padding: 20px 0;
}	

/* menu */
.navbar{
	background-color: #3B3B3B; /* fix for IE lameness */
	background-color: rgba(59, 59, 59, 0.95);
}

.navbar-default{ 
	border: none;
}

.navbar.navbar-default ul > li > a{
	color: white;
	margin: 10px 0;
}
	.navbar.navbar-default ul > li > a:hover{
		color: black;
		background-color: white;
		border-radius: 20px;
	}
	.nav.navbar-nav{
/*		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);*/			
	}

/* header */
header{
	background-image: url("../images/bg-opt.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
	height: 95%;
	width: 100%;   
}	
	.header-button{
		display: block;
		background-color: white;
		border-radius: 20px;
		border: 3px solid transparent;
		padding: 10px 20px;
		margin-top: 0px;
		text-align: center;
		width: 25%
	}
		.case-button:hover{
			color: white;
			background-color: transparent;
			border: 3px solid white;
			text-decoration: none;
		}

.opening{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);	
	color: rgba(255,255,255,1.00);
	padding: 15px;
	background-color: rgba(67,67,67,0.75);	
}	
	.intro-button{
		background-color: white;
		color: black;
		border-radius: 20px;
		border: 3px solid transparent;
		padding: 10px 20px;
		margin-top: 20px;
		text-align: center;
		font-size: 1.75em;
	}
		.intro-button:hover{
			color: white;
			background-color: transparent;
			border: 3px solid white;
			text-decoration: none;
		}


/* about section */
ul.skills-list{
	margin-top: 1.0em;
}

ul.skills-list li{
	display: block;
	padding: 5px 10px;
	margin-bottom: 15px;
}
.skill1{
	background-color: red;
	width: 80%;
}
.skill2{
	background-color: red;
	width: 60%;
}
.skill3{
	background-color: red;
	width: 40%;
}
.skill4{
	background-color: red;
	width: 50%;
}
.skill5{
	background-color: red;
	width: 60%;
}

/* process */
.process-icon{
	display: block;
	max-width: 100%;
	height: auto;
}
.circle {
	border-radius: 50%;
	width: 40px;
	height: 40px; 
	margin: 0 auto 15px auto;
	background-image: radial-gradient(#696969, black);
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    border: 3px solid black;
}
ul.process{
	list-style: disc;
	margin-left: 20px;
}

/* case */
.case-wrapper{
	background: rgb(21,4,57);
	background: linear-gradient(90deg, rgba(21,4,57,1) 0%, rgba(48,10,129,1) 100%); 
	color: #ffffff;	
	padding-top: 100px;
}
	.case-wrapper .headline{
		border-color: #ffffff;
	}
	.case-left{
		margin: 50px 0;
		background: rgb(194,213,223);
		background: linear-gradient(90deg, rgba(194,213,223,1) 0%, rgba(194,213,223,1) 50%, rgba(188,205,219,0) 51%, rgba(48,10,129,0) 100%); 	
	}
	.case-right{
		margin: 50px 0;
		background: rgb(194,213,223);
		background: linear-gradient(90deg, rgba(194,213,223,0) 0%, rgba(188,205,219,0) 49%, rgba(223,215,240,1) 50%, rgba(223,215,240,1) 100%);
	}	
	.case-study{
		padding: 50px 0;
		background: rgb(194,213,223);
		background: linear-gradient(90deg, rgba(194,213,223,1) 0%, rgba(223,215,240,1) 100%); 
		border-radius: 20px;
	}
	.case-image{
		width: 100%;
		max-width: 495px;
	}

	.case-desc{
		color: black;
		line-height: 1.75em;
	}
		a:hover .case-desc{
			text-decoration: underline;
		}
			
	.case-button{
		background-color: black;
		color: white;
		border-radius: 20px;
		border: 3px solid transparent;
		padding: 10px 20px;
		margin-top: 20px;
		text-align: center;
	}
		a:hover .case-button{
			color: black;
			background-color: transparent;
			border: 3px solid black;
			text-decoration: none;
		}

/* portfolio */
.portfolio-wrapper{
	background-color: #d6e6ff;
}
#portfolio .gallery{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#portfolio .gallery .project{
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 50%;
	display: inline-block;
	float: left;
	position: relative;
	border: 1px solid #C1D5F2;
}
#portfolio .gallery .project .img-responsive{
	width: 100%;
}

/* contact */		
.contact-wrapper{
	background: rgb(194,213,223);
	background: linear-gradient(90deg, rgba(194,213,223,1) 0%, rgba(223,215,240,1) 100%); 
}

/* portfolio image hover effect */
.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.hovereffect .overlay {
    width: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 4.75em;
	background: rgba(59, 59, 59, 0.75);
	color: #3c4a50;
	text-align: center;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.hovereffect img {
    display: block;
    position: relative;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.hovereffect:hover img {
-webkit-transform: translate3d(0,-10%,0);
	transform: translate3d(0,-10%,0);
}

.hovereffect h2 {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
	float: left;
	margin: 0px;
	display: inline-block;
}

.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	margin: 50px 0 0 0;
	background-color: transparent;
}
.hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
}


.hovereffect p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

.hovereffect:hover p.icon-links a:hover,
.hovereffect:hover p.icon-links a:focus {
	color: #252d31;
}

.hovereffect h2,
.hovereffect p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

.hovereffect p.icon-links a span:before {
	display: inline-block;
	padding: 8px 10px;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.hovereffect:hover .overlay,
.hovereffect:hover h2,
.hovereffect:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.hovereffect:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.hovereffect:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.hovereffect:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.hovereffect:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

@media (min-width: 640px){
	#portfolio .gallery .project{ width: 33.333333%; }
}	


/* mobile only */
@media (max-width: 767px){
	body{ font-size: 16px; }
	.opening{ margin-top: 40px;}
	.process-icon{
		max-width: 50%;
		margin: 0 auto 15px auto;
	}	
	.modal-full{
		width: 100%;
		margin: 10px 0;
	}

}
@media (max-width: 991px){
	body{ font-size: 16px; }
	.opening{ margin-top: 60px;}
}
@media (max-width: 390px){
	body{ font-size: 16px; }
	.opening{ margin-top: 140px;}
}


/* tablet only */
@media (min-width: 768px){
	#portfolio .gallery .project{ width: 25%; }
}
/* desktop small */
@media (min-width: 992px){
	#portfolio .gallery .project{ width: 25%; }
}
/* desktop large */
@media (min-width: 1200px){
	#portfolio .gallery .project{ width: 16.666667%; }
}
/* desktop x-large */
@media (min-width: 1920px){
	#portfolio .gallery .project { 
		width: 14.285714286%; 
	}
}

@media (max-width: 1199px){
	.project-description{ margin-top: 20px; }
}	

.button{
		display: block;
		background-color: black;
		color: white;
		border-radius: 20px;
		border: 3px solid transparent;
		padding: 10px 20px;
		margin-top: 20px;
		text-align: center;
	}
		.button:hover{
			color: black;
			background-color: transparent;
			border: 3px solid black;
			text-decoration: none;
		}

.button-secondary{
		display: block;
		border-radius: 20px;
		background-color: transparent;
		color: black;
		border: 3px solid black;
		padding: 10px 20px;
		margin-top: 20px;
		text-align: center;
	}
		.button-secondary:hover{
			color: black;
			background-color: transparent;
			border: 3px solid black;
			text-decoration: underline;
		}		

footer{
	color: white;
	background-color: black;
}
	.foot-btn{
		background-color: white;
		border-radius: 15px;
		border: 3px solid white;
		color: black;
		font-size: 20px;
	}
		.foot-btn:hover{
			border: 3px solid white;
			background-color: black;
			color: white;
		}
	.icons{
		font-size: 25px;
	}

#embedbsky-com-timeline-embed .postcontainer{
	background: transparent !important;
}