/* GLOBAL STYLES
-------------------------------------------------- */
body {
	position: relative;
	margin-top:0;
	padding-top:100px;
}

/* Overrides   
-------------------------------------------------- */
.navbar {
	border:0; 
}
.navbar .navbar-nav {
	margin-top:1px;
}
.navbar .navbar-nav .selected {
	color:#dbdbdb;
}
.navbar-header .collapsed:active, .navbar-header .collapsed:focus, .navbar-header .collapsed:hover {
	background-color: rgba(255,255,255,0.3);
}	
.navbar-toggle {
	border:0;
	margin-top: 10px;
}
.navbar-brand {
	padding: 6px 15px;
}

.navbar-default { background:#ffffff; }
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { background-color:#ffffff; font-weight:bold; }

.navbar-inverse { background:#2c3e50; padding-top:10px; padding-bottom:10px; }
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { background-color:#2c3e50; font-weight:bold; }


.btn { 
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
#about img { margin-bottom:20px; }
#about h1 {
	/* padding-top:20px; */
	font-family:Montserrat, 'Trebuchet MS';
	font-size:600%;
	font-weight:400;
	color: rgba(0,0,0,0.6);
	letter-spacing: -4px;  
}
h1,h2,h3,h4,h5,.header-font {
	font-family:Montserrat, 'Trebuchet MS'; 
	font-weight:400;
}

#content-background {
	margin-top:68px;
}

.big-grad {
	color: rgba(0,0,0,0.8); 
	background: -webkit-linear-gradient(purple, #e74c3c); 
	background-color: #e74c3c; 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent;
	font-family:Montserrat;
}

.proj-desc {
	text-align:center;
}
.proj-url { 
	text-align:left;
}
.proj-tasks {
	text-align:right;
}

.nav-tabs>li>a {
	border-radius: 0 0 0 0;
}
.tab-pane p {
	margin:20px 0 0 0;
}
.quote-text {
	font-size:22px;
}

.btn-free {
	background:transparent; 
	border:2px #ddd solid; 
	color:#666;
}

.btn-quote {
    color: #fff;
    background-color: transparent;
	border:2px #fff solid;
}

.btn-quote:hover, .btn-quote:focus, .btn-quote:active, .btn-quote.active,
.open .dropdown-toggle.btn-quote {
    color: #ccc;
    background-color: transparent;
	border:2px #ccc solid;
}

.btn-quote:active, .btn-quote.active, .open .dropdown-toggle.btn-quote {
    background-image: none
}

/* FOOTER 
-------------------------------------------------- */
.footer {

}
.footer ul {
	list-style-type: none;
	margin:0 10px 0 0;
	padding:0 0 0 0;
}	

/* THEME COLORS
-------------------------------------------------- */

.bg-bluegreen-lt { background-color:#1abc9c; }
.bg-bluegreen-dk { background-color:#16a085; }
.bg-green-lt { background-color:#2ecc71; }
.bg-green-dk { background-color:#27ae60; }
.bg-blue-lt { background-color:#3498db; }
.bg-blue-dk { background-color:#2980b9; }
.bg-purple-lt { background-color:#9b59b6; }
.bg-purple-dk { background-color:#8e44ad; }
.bg-bluegrey-lt { background-color:#34495e; }
.bg-bluegrey-dk { background-color:#2c3e50; }
.bg-yellow-lt { background-color:#f1c40f; }
.bg-yellow-dk { background-color:#f39c12; }
.bg-orange-lt { background-color:#e67e22; }
.bg-orange-dk { background-color:#e67e22; }
.bg-red-lt { background-color:#d35400; }
.bg-red-dk { background-color:#e74c3c; }
.bg-grey-lt { background-color:#ecf0f1; }
.bg-grey-dk { background-color:#7f8c8d; }
.bg-greyblue-lt { background-color:#95a5a6; }
.bg-greyblue-dk { background-color:#2c3e50; }
.bg-white-font { background-color:#fff; }
.bg-white { background-color:#fff; }

.bluegreen-lt { color:#1abc9c; }
.bluegreen-dk { color:#16a085; }
.green-lt { color:#2ecc71; }
.green-dk { color:#27ae60; }
.blue-lt { color:#3498db; }
.blue-dk { color:#2980b9; }
.purple-lt { color:#9b59b6; }
.purple-dk { color:#8e44ad; }
.bluegrey-lt { color:#34495e; }
.bluegrey-dk { color:#2c3e50; }
.yellow-lt { color:#f1c40f; }
.yellow-dk { color:#f39c12; }
.orange-lt { color:#e67e22; }
.orange-dk { color:#e67e22; }
.red-lt { color:#d35400; }
.red-dk { color:#e74c3c; }
.grey-lt { color:#ecf0f1; }
.grey-dk { color:#bdc3c7; }
.greyblue-lt { color:#95a5a6; }
.greyblue-dk { color:#2c3e50; }
.white-font { color:#ffffff; text-shadow: 0 0 0 rgba(0,0,0,.0); text-decoration:none; }
.blue-grad {
    color: rgba(0, 0, 0, 0.6);
    background: -webkit-linear-gradient(#3498db, #9b59b6);
    background-color: #3498db;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* FULL SCREEN MODAL STYLES
-------------------------------------------------- */
.fullscreen .modal-dialog {
  margin:0 0 0 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color:#333;
}
.fullscreen .modal-content {
  height: 100%;
  border-radius: 0;
  color:#333;
  background: rgba(255,255,255,0.97);
}
.fullscreen .modal-body ul {
	padding:100px 0 0 0;
	overflow:auto;
}
.fullscreen .modal-body li {
	padding:10px 0 10px 0 ;
}
.fullscreen .modal-body a {
  color:#333;
  font-size:300%;
}

.fullscreen .modal-dialog {
	margin: 0 0 0 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 0;
	color: #333;
}

.fullscreen .modal-content {
	height: 100%;
	min-height: 100%;
	border-radius: 0;
	color: #333;
	background: rgba(255, 255, 255, 0.97);
	overflow:auto;
}

.fullscreen .modal-body ul {
	padding: 100px 0 0 0;
}

.fullscreen .modal-body li {
	padding: 10px 0 10px 0 ;
}

.fullscreen .modal-body a {
	color: #333;
	font-size: 300%;
}

@media (max-width: 480px){
	.fullscreen .modal-body ul {
		padding: 30px 0 0 0;
		overflow: auto;
	}

	.fullscreen .modal-body li {
		padding: 4px 0 4px 0 ;
	}

	.fullscreen .modal-body a {
		color: #333;
		font-size: 200%;
		text-transform: uppercase;
		font-weight: 700;
	}
}

/* LABELS
-------------------------------------------------- */

.label { line-height:2.2em; }

@media (min-width: 980px) {
	body.fixed { padding-top:80px; }
	#projects { margin-top:0; padding-top:80px; }
}
@media (min-width: 768px) and (max-width: 979px) {
	body.fixed {
	  margin:0 0 0 0;
	  padding:0 0 0 0;
	}
	#projects { margin-top:0; padding-top:60px; }
}
@media (min-width: 481px) and (max-width: 767px) {
	body.fixed {
		margin:0 0 0 0;
		padding:0 0 0 0;
	}
	#projects { margin-top:0; padding-top:40px; }
}


/* BROWSER WRAPPER W/FONTAWESOME
-------------------------------------------------- */

.browser {
	border: 3px #999 solid;
	padding: 0 0 0 0;
	max-width:800px;
	margin:auto;
}
.browser-bar {
	background: rgba(255,255,255,0.96);
	border-bottom: 3px #999 solid;
	padding: 0 0 2px 0;
	margin: 0 0 0 0;
	height:40px;
}
.browser-bar .fa {
	color:#999;
}
.browser-tab {
	padding:8px 10px 10px 10px;
}


/* RESPONSIVE STYLES
-------------------------------------------------- */

@media (min-width: 991px) {
	
	.avatar { 
		width:160px;
		height:160px;
	}
	.homepage-block {
		position: relative;
	}
	#mainProject {
		overflow:auto;
	}
	.homepage-block-item {
		min-height:100px;
		border:0;
		border-bottom:1px #3498db solid;
	}
	.big {
		font-size:420%;
		line-height:1.1em;
		letter-spacing: 0px;
	}
	
}

@media (max-width: 990px) {

	.avatar { 
		width:140px;
		height:140px;
	}

	.big {
		font-size:300%;
		line-height:1.1em;	
	}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	body {
		margin:0 0 0 0;
		padding:0 0 0 0;
	}
	.navbar .brand {
		margin-left:10px;
		margin-right:14px;
	}
	.brand .icon-3x {
		font-size:40px;
	}
    .navbar .btn-navbar {
    	margin-top: 14px;
    	margin-right: 10px;
    }
   	.mainProject-wrap {
		padding-top:10%;
	}

	.avatar { 
		width:120px;
		height:120px;
		float:right;
	}
	.big {
		font-size:300%;
		line-height:1.1em;	
	}

}

/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
	body {
		margin:0 0 0 0;
		padding:0 0 0 0;
	}
	.navbar .navbar-nav li {
		border:2px #323232 solid;
		text-align:center;
		margin:auto;
	}
	.navbar .navbar-nav li {
		margin:8px 20px 0 20px;
	}
	.navbar .brand {
		margin-left:10px;
		margin-right:14px;
	}
	.brand .icon-3x {
		font-size:40px;
	}
    .navbar .btn-navbar {
    	margin-top: 14px;
    	margin-right: 10px;
    }
	.mainProject-wrap {
		padding-top:8%;
	}

	#about h1 {
		font-size:500%;
		letter-spacing: -2px;
	}	
	.navbar { padding-bottom:2px; }
	.big {
		font-size:300%;
		line-height:1.1em;	
	}

}

/* Landscape phones and down */
@media (max-width: 480px) {

	body {
		padding-top:0;
	}
	.navbar .navbar-nav li {
		border:2px #323232 solid;
		text-align:center;
		margin:auto;
	}
	.navbar .navbar-nav li {
		margin:8px 20px 0 20px;
	}
	
	.avatar { 
		width:160px;
		height:160px;
	}

	#about h1 {
		/* padding-top:14px; */
		font-size:360%;
		letter-spacing: -1px;
		text-align:left; 
	}
	#about h2 {
		margin:4px 0 0 0;
		padding:0 0 0 0;
		text-align:left;
	}	

	.modal-body ul {
		padding:30px 0 0 0;
		overflow:auto;
	}
	.modal-body li {
		padding:4px 0 4px 0 ;
	}
	.modal-body a {
	  color:#333;
	  font-size:200%;
	  text-transform: uppercase;
	  font-weight: 700;
	}
	.navbar { padding-bottom:2px; }

	.avatar { 
		width:120px;
		height:120px;
	}
	.big {
		font-size:220%;
		line-height:1.1em;	
	}
	#ha h2, #mis h2 {
		font-size:190%;
	}

}

@media (max-width: 320px) {

	.avatar { 
		width:120px;
		height:120px;
		margin:auto;
	}

	#about h1 {
		/* padding-top:14px; */
		font-size:280%;
		letter-spacing: -1px;
		text-align:left; 
	}

	.big {
		font-size:180%;
		line-height:1.1em;	
	}
	#ha h2, #mis h2 {
		font-size:150%;
	}
	
}