@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro&subset=latin,cyrillic);

body {
    font-family: "Anonymous Pro", monospace;
}

.white {
    background-color: white;
    color: black;
	text-align: center;
}

.black {
	background-color: black;
	color: white;
	text-align: center;
}

p.skills {
	color: #808080;
}

.white,
.black {
	padding: 25px 35px;
}

a {
	cursor: pointer;
}

.centered {
	vertical-align: middle;
	display: table-cell;
}

.heading {
	width: 100vw;
	height: 100vh;
}

.heading h1 {
	font-size: 28pt;
	padding-bottom: 15px;
}

.heading h4 {
	font-size: 18pt;
	color: #666;
}
.heading h4 a {
	color: #999;
	transition: color .5s;
}
.heading h4 a:hover {
	color: #666;
	text-decoration: none;
}

.glyphicon-menu-down {
	color: #666;
	font-size: 14pt;
	transition: color .5s;
}
.glyphicon-menu-down:hover {
	color: black;
}

h2 {
	margin-top: 25px;
}

h3 {
	margin: 10px;
}

.list-inline {
	margin-bottom: 35px;
}

.list-inline li a {
	color: #666;
	transition: color .5s;
}

.fa-2x {
	font-size: 1.9em !important;
}

a.link-vk:hover {
	color: #45668e;
}

a.link-fb:hover {
	color: #3b5998;
}

a.link-tw:hover {
	color: #55acee;
}

a.link-yt:hover {
	color: #cd201f;
}

a.link-ig:hover {
	color: #e1306c;
}

a.link-in:hover {
	color: #0077b5;
}

a.link-gh:hover {
	color: #000;
}

.title {
	font-size: 40pt;
	margin: 15px 0 40px;
}

p {
	font-size: 16pt;
	padding: 0 10px;
}

.btn {
	margin: 15px 5px;
}

.btn-lg {
	font-size: 14pt;
}

.btn-white {
	color: black;
	background-color: white;
	border: 2px solid black;
	border-radius: 0;
	transition: background-color .5s;
}
.btn-white:hover {
	background-color: #ddd;
	color: black;
}

.btn-black {
	color: white;
	background-color: black;
	border: 2px solid white;
	border-radius: 0;
	transition: background-color .5s;
}
.btn-black:hover {
	background-color: #555;
	color: white;
}

.btn-modal {
	margin: 5px !important;
	font-size: 14pt;
}

.close {
	font-size: 22pt;
	opacity: .5;
	margin-top: 0 !important;
}

.modal-title {
	font-size: 24px;
}

.modal-header,
.modal-body,
.modal-footer {
	padding: 10px;
}

.modal-body p {
	font-size: 13pt;
}

.modal-content {
	border-radius: 0;
}

.modal-header,
.modal-footer {
	text-align: center !important;
}

img {
	margin: 5px;
}

.thumbnail {
	padding: 0;
	border: none;
	border-radius: 0;
	transition: opacity .5s;
	background-color: transparent;
}

.thumbnail:hover {
	opacity: .6;
}

.footer p {
	margin: 0 !important;
}



/*================================ TABLETS (sm) ================================*/

@media (min-width: 768px) {

	.white,
	.black {
		padding: 30px 50px;
	}

	.heading h1 {
		font-size: 48pt;
		padding-bottom: 30px;
	}

	.list-inline {
		margin-bottom: 75px;
	}

	.fa-2x {
		font-size: 2.5em !important;
	}

	.heading h4 {
		font-size: 24pt;
	}

	.glyphicon-menu-down {
		font-size: 20pt;
	}

	h2 {
		margin-top: 40px;
	}

	h3 {
		margin: 20px;
	}

	.title {
		font-size: 64pt;
		margin: 15px 0 55px;
	}

	p {
		font-size: 18pt;
	}

	.btn {
		margin: 25px 5px;
	}

	.btn-lg {
		font-size: 18pt;
	}

	.btn-modal {
		font-size: 16pt;
	}

	.modal-header,
	.modal-body,
	.modal-footer {
		padding: 15px;
	}

	.modal-body p {
		font-size: 16pt;
	}

	img {
		margin: 10px;
	}

	.row {
		padding: 10px;
	}

	.footer {
		padding: 15px !important;
	}
}

/*================================ DESKTOPS (md) ================================*/

@media (min-width: 992px) {

	.fa-2x {
		font-size: 2em !important;
	}

	.heading h4 {
		font-size: 20pt;
	}

	.glyphicon-menu-down {
		font-size: 16pt;
	}

	h2 {
		margin-top: 30px;
	}
}

/*================================ LARGE DESKTOPS (lg) ================================*/

@media (min-width: 1200px) {

	.list-inline {
		margin-bottom: 60px;
	}

	h3 {
		margin: 5px;
	}

	h2 {
		margin-top: 40px;
	}

	p {
		margin-bottom: 15px;
	}

}

/*================================ MODERN DESKTOPS (>1800) ================================*/
@media (min-width: 1800px) {

	.white,
	.black {
		padding: 25px 100px;
	}
}