/*@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
@import url("https://fonts.googleapis.com/css?family=Sansation");*/

@font-face {
    font-family: 'Sansation';
    src: url('fonts/sansation-regular-webfont.woff2') format('woff2'),
         url('fonts/sansation-regular-webfont.woff') format('woff'),
		 url('fonts/Sansation-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('fonts/sansation-italic-webfont.woff2') format('woff2'),
         url('fonts/sansation-italic-webfont.woff') format('woff'),
		 url('fonts/Sansation-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Sansation';
    src: url('fonts/sansation-bold-webfont.woff2') format('woff2'),
         url('fonts/sansation-bold-webfont.woff') format('woff'),
		 url('fonts/Sansation-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('fonts/sansation-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/sansation-bolditalic-webfont.woff') format('woff'),
		 url('fonts/Sansation-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Sansation';
    src: url('fonts/sansation-light-webfont.woff2') format('woff2'),
         url('fonts/sansation-light-webfont.woff') format('woff'),
		 url('fonts/Sansation-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('fonts/sansation-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/sansation-lightitalic-webfont.woff') format('woff'),
		 url('fonts/Sansation-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

:root {
	--body-bg: #002B36;
	--nav-bg: #020E16;
	--default-text: #839496;
	--link: #2AA198;
	--link-hover: #66D4CB;
	--card-outline: #2AA198;
	--quote-bg: #020E16;
	--modal-bg: #151517;
}
body {
	overflow-x: hidden;
	background-color: var(--body-bg);
	font-family: "Sansation",sans-serif;
	font-weight: 500;
	color: var(--default-text);
}
.navbar {
	padding: 0.5rem 1rem;
	position: fixed;
	width: 100%;
	z-index: 10;
	background-color: var(--nav-bg) !important;
}
.navbar-nav .nav-link {
	/*mobile only*/
	padding-left: .9rem;
}
.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:hover {
	color: #FFF;
	text-decoration: none;
}
.steam-button {
	border: 5px solid #10d7b2; 
	border-radius: 8px; 
	margin-bottom: 3rem;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.steam-button:hover {
	border: 5px solid #FFF;
	transform: scale(1.06)
}
h1 {
	font-size: calc(30px + 1.5vw);
	font-weight: 300;
	opacity: .87;
}
h4 {
	/*color: red;*/
	font-weight: 300;
}/*
h5 {
	color: green;
	font-weight: 30;
}*/
.quote {
	font-weight: 300;
}
.card {
	background-color: transparent;
	border: 0;
}
.card-outline {
	border: 1px solid var(--card-outline);
}
.card-title {
	margin-bottom: 0.75rem;
}
a {
	color: var(--link);
	text-decoration: none;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
a:hover {
	color: var(--link-hover);
	text-decoration: none;
}
.btn-success {
	color: #fff;
	background-color: var(--link);
	border-color: var(--link);
}
.btn-success:hover {
	background-color: #22837b;
	border-color: #22837b;
	text-decoration: none;
}
.btn-success:not([disabled]):not(.disabled):active, .btn-success:not([disabled]):not(.disabled).active, .show > .btn-success.dropdown-toggle {
	color: #fff;
	background-color: #1f7972;
	border-color: #1d6e68;
}
.text-shadow {
	text-shadow: 1px 1px 1px #111;
}
.trailer-vid {
	box-shadow: 0px 0 5px #000; 
	border-radius: 20px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	max-width:750px; 
	margin:20;
	padding:0;
	z-index:5;
	overflow:hidden;
}
.img-thumbnail {
	border: 0px solid var(--link);
	background-color: transparent;
	padding: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.img-thumbnail:hover {
	border-color: var(--link-hover);
	transform: scale(1.03);
	box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.33);
}
.screenshot-gallery figure {
	margin-bottom: 0;
}
/*.screenshot-gallery img {
	margin: 10px 0px;
}*/
.modal-dialog {
	top: 0;
}
@media (min-width: 1601px) {.modal-dialog{max-width: 768px}}
@media (min-width: 1921px) {.modal-dialog{max-width: 1024px}}
.modal-header {
	border-bottom-color: #333;
}
.modal-content {
	background-color: var(--modal-bg);
}
.modal-content p {
	margin-top: .25rem;
	margin-bottom: .25rem
}
.modal-footer {
	border-top-color: #333;
}
.pswp__caption__center {
	font-size: .8em;
	text-align: center;
	max-width: 720;
	margin-top: .5rem;
	margin-bottom: .5rem;
}
.pswp__caption__center h5 {
	margin-bottom: .25rem;
}
.pswp__caption__center p {
	margin-bottom: 0;
	opacity: .54;
}
.social-link {
	margin: 5px 30px 0px 30px; 
	opacity: 0.26;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.social-link:hover {
	opacity:0.54
}
@media (max-width: 576px) {.back-button {display: none}}
@media (min-width: 1550px) {.back-button {padding-left: 0.85rem; padding-right:1.0rem}}
#back-top {
	visibility: hidden;
	width: 3.125rem;
	height: 3.125rem;
	font-size: 1.5em;
	color: white;
	background-color: #000;
	border-radius: 15%;
	border: none;
	position: fixed;
	right: 0;
	bottom: 75px;
	opacity: 0.4;
	z-index: 900;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}
@media (max-width: 576px) {#back-top {bottom: 55px; right:15px;}}
#back-top:hover {
	opacity: 1.0 !important;
}
/*overflow detection
div {border: 1px solid #0f0 !important;}*/
.lazyframe {
	background-color: transparent !important;
}
.lazyframe__title::before {
	height: 80%;
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), transparent) !important;
}
.lazyframe__title {
	text-align: left;
	font-weight: 400;
	text-shadow: 0 0 2px rgba(0,0,0,.5) !important;
}
.anchor {display: block; content: " "; border-top: 75px solid transparent; margin-top: -75px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; visibility: hidden}
.parallax-1 {background-attachment: fixed !important; background-position: 50% 0; background-repeat: no-repeat;}
.parallax-2 {background-attachment: fixed !important; background-position: 50% 0; background-repeat: no-repeat; background-size: cover !important; height:200px !important"}