/* GENERAL STYLING */

body {
	background: var(--gray_matte) var(--gray_matte_img);
}


/* HEADER */

#header {
	background: var(--blue_header_matte) var(--blue_header_matte_img);
}
.header-title {
	background: var(--blue_header);
	border-top-color: var(--blue_header_bevel_dark);
	border-bottom-color: var(--blue_header_bevel_light);
	box-shadow: 0px 3px 6px var(--brown_content_shadow);
}


/* HEADER - LOGO */

.header-logo::after {
	box-shadow: 3px 3px 6px var(--brown_content_shadow);
}
.header-logo {
	background: url(../_style/rf_logo.png);
	box-shadow: -1px -2px var(--blue_header_bevel_light) inset;
}
.header-title a:hover .header-logo {
	background: url(../_style/rf_logo_h.png);
}
.header-logo, 
.header-title a:hover .header-logo {
	background-size: 100% 100%;
	width: 70px;
	height: 70px;
}


/* HEADER - SIG */

.header-sig {
	background: url(../_style/rf_sig.png);
	background-size: 100% 100%;
	width: 168px;
	height: 48px;
	color: var(--blue_text_lighter);
}


/* HEADER - SUB TITLE */

#header h2, 
#header h2 a {
	color: var(--blue_text_darkest);
}
@media (hover: hover) and (pointer: fine) {
	#header .back-top h2:hover span {
		color: var(--blue_text_light);
		transition-duration: 0s;
	}
}
.back-top h2:active span {
	color: var(--blue_text_light);
	transition-duration: 0s;
}
#btn_top {
	border-color: var(--blue_text_dark);
}
#btn_top::before {
	border-right-color: var(--blue_text_dark);
}


/* HEADER - HAMBURGER BUTTON */

.menu-button > span, 
.menu-button > span::before, 
.menu-button > span::after {
	background-color: var(--blue_text_lighter);
}


/* MENU */

.menu-box {
	background: rgba(var(--blue_menubox_rgb), 0.9);
	border-color: var(--blue_menubox_bevel_light);
	box-shadow: -2px 2px 9px var(--blue_menubox_shadow), 0px 2px 4px var(--blue_menubox_shadow) inset;
	box-shadow: -2px 2px 9px var(--brown_content_shadow), 0px 2px 4px var(--blue_menubox_shadow) inset;
}
.menu-box-inset {
	border-color: var(--blue_menubox_bevel_light);
}
.menu-box ul {
	background: var(--blue_menubox_inset);
	opacity: .9;
	border-left-color: var(--blue_menubox_inset_bevel_dark);
	border-top-color: var(--blue_menubox_inset_bevel_dark);
	border-right-color: var(--blue_menubox_inset_bevel_light);
	border-bottom-color: var(--blue_menubox_inset_bevel_light);
	
}
.menu-item {	
	color: var(--blue_text_mid);	
}
.menu-box li:hover .arrow, 
.selected .arrow {
	border-color: transparent transparent var(--blue_text_mid) var(--blue_text_mid);
	box-shadow: -3px 1px 2px var(--blue_menubox_shadow);
}
.menu-item:hover, 
.selected .menu-item {
	color: var(--blue_text_lighter);
    text-shadow: 2px 2px 1px var(--blue_menubox_shadow);
}



/* SIZE SLIDER */

#toggle_radio {
	background: var(--blue_header_inset);
	border-color: var(--blue_header_bevel_light);
	box-shadow: 1px 1px 2px var(--blue_header_bevel_dark) inset;
}
#toggle_radio label span {
	cursor: pointer;
	color: var(--blue_text_darker);
}
.toggle_option_slider {
	background: var(--blue_text_light);
	border-color: var(--blue_text_mid);
	box-shadow: 1px 1px 2px var(--blue_header_bevel_dark);
}


/* CONTENT */

#matte {
	background: var(--brown_content_bg) var(--brown_content_bg_img);
	border-color: var(--gray_matte_bevel_light);
	box-shadow: 0px -4px 8px var(--brown_content_shadow) inset;
}


/* FOOTER */

#footer {
	color: var(--gray_text_mid);
	text-shadow: 0px 0px 2px black;
}
#footer li a {
	color: var(--gray_text_light);
}
#footer li a:hover {
	color: var(--gray_text_lighter);
}


/* GALLERY - EXPAND BUTTON */

.gallery-content .expand-bar {
	background-color: var(--brown_gallery_footer);
	background-image: linear-gradient(to bottom, rgba(20, 5, 10, .4), rgba(20, 5, 5, .3)), var(--brown_gallery_bg_img);
	background-image: linear-gradient(to bottom, rgba(var(--brown_gallery_footer_overlay_rgb), .4), rgba(var(--brown_gallery_footer_overlay_rgb), .3)), var(--brown_gallery_bg_img);
	border-color: var(--brown_gallery_bevel_dark);
	border-top-color: var(--brown_gallery_footer_bevel_light);
	box-shadow: 0px -1px 2px var(--brown_gallery_footer_bevel_dark) inset;
}
.gallery-content .expand-button {
	border-color: var(--brown_text_darkest);
	box-shadow: -1px 0 0 var(--brown_text_shadow);
}
@media (scripting: none) {
    /* Styles applied when JavaScript is disabled */
	.gallery-content .expand-bar {
		cursor: default;
	}
	.gallery-content .expand-button {
		display: none;
	}
}
.expand-button {
	border-color: var(--brown_text_mid);
	box-shadow: 0px -2px 0 var(--brown_text_shadow);
}


/* GALLERY - HEADER */

.gallery-head {
    background: var(--brown_gallery_header) var(--brown_gallery_header_img);
	border-color: var(--brown_gallery_header_bevel_dark);
	box-shadow: 1px 1px 0px var(--brown_gallery_header_bevel_light) inset; 
	border-radius: 12px 4px 0 0;
}
.gallery-head .logo-bg {
	background: var(--brown_gallery_header) var(--brown_gallery_header_logo);
	background-size: 50px;
	width: 50px;
	height: 50px;
	box-shadow: -1px -1px 0 0px var(--brown_gallery_header_bevel_dark);
}

.gallery-head-title h2 {
	color: var(--brown_text_light);
	text-shadow: 1px 1px var(--brown_text_shadow);
}
.gallery-head-title p {
	color: var(--brown_text_dark);
}


/* GALLERY - CONTENT */

.gallery {
	box-shadow: 0px 0px 0 2px var(--brown_gallery_bevel_light);
}
.gallery-content {
	background: var(--brown_gallery_bg) var(--brown_gallery_bg_img);
	border-color: var(--brown_gallery_bevel_dark);
	box-shadow: 0px 1px 3px 1px var(--brown_gallery_shadow) inset;
}
.gallery-item:not(.video) a {
	background-color: var(--brown_text_dark);
	border-color: var(--brown_gallery_item_bevel_lighter) var(--brown_gallery_item_bevel_dark) var(--brown_gallery_item_bevel_dark) var(--brown_gallery_item_bevel_light);
	border-radius: 6px;
	box-shadow: 1px 2px 6px var(--brown_gallery_shadow);
}
.gallery-image {
	border-color: var(--brown_gallery_bg);
	border-radius: 5px;
}


/* GALLERY VIDEO */

.gallery-item.video p {
	color: var(--brown_text_light);
}
video,
.gallery-app,  
.gallery-item.video p.video-error {
	border-color: var(--brown_info_bevel_dark);
	border-radius: 15px;
	box-shadow: 0px 0px 2px 2px var(--brown_gallery_item_bevel_light);
}
.gallery-item.video p.video-error {
	background-color: var(--brown_info_bg);
	background-image: linear-gradient(to bottom, rgba(var(--brown_info_bg_rgb), .5), rgba(var(--brown_info_bg_rgb), .6)), var(--brown_gallery_bg_img);
	color: var(--brown_text_mid);
}
.gallery-item.video .gallery-video p a {
	color: var(--brown_text_lightest);
	color: yellow;
}


/* GALLERY - INFO */

.info-block:not(.no-bg) {
	background-color: var(--brown_info_bg);
	background-image: linear-gradient(to bottom, rgba(var(--brown_info_bg_rgb),.5), rgba(var(--brown_info_bg_rgb), .6)), var(--brown_gallery_bg_img);
	border-color: var(--brown_info_bevel_dark) var(--brown_info_bevel_light) var(--brown_info_bevel_light) var(--brown_info_bevel_dark);
	border-radius: 8px;
}
.info-block, 
.info-block a {
	color: var(--brown_text_mid);
}
.info-block p a {
	color: var(--brown_text_light);
}

	/* Info block headers */

.info-block h3 {
	color: var(--brown_text_light);
	background-color: var(--brown_info_bg);
	border-color: var(--brown_info_bevel_light);
	border-radius: 4px;
	box-shadow: 1px 1px 2px var(--brown_info_shadow);
}
.info-block h4,
.info-block h5 {
	color: var(--brown_text_lighter);
}
.info-block h5, 
.info-block ul ul li i,
.info-block b {
	color: var(--brown_text_light);
}
.info-block h4 i,
.info-block ul ul li span {
	color: var(--brown_text_dark);
}

	/* Info block logo list */

.date {
	color: var(--brown_text_dark);
}

	/* Info block media */
	
.info-image {
	border-color: var(--brown_info_bevel_dark) var(--brown_info_bevel_light) var(--brown_info_bevel_light) var(--brown_info_bevel_dark);
	border-radius: 5px;
}



/* TIMELAPSE SLIDER */

.timeline-container {
	background-color: var(--brown_content_shadow);
	border-radius: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #010101 var(--brown_gallery_item_bevel_light) var(--brown_gallery_item_bevel_light) #010101;
}
.timeline-thumbnails img {
	background-color: var(--brown_gallery_bg);
	border-color: var(--brown_gallery_bg);
	border-style: solid;
	border-width: 4px;
	border-radius: 5px;
}

.timelapse-image img {
	border-color: var(--brown_info_bevel_dark) var(--brown_info_bevel_light) var(--brown_info_bevel_light) var(--brown_info_bevel_dark);
}
.timeline-container img:first-child {
	border-radius: 12px 0 0 12px;
}
.timeline-container img:last-child {
	border-radius: 0 12px 12px 0;
}
.timelapse-image, 
.timelapse-image img {
	border-radius: 12px;
}

	/* Slider */

.timelapse-slider::-webkit-slider-thumb,
.timelapse-slider::-moz-range-thumb {
	background-color: rgba(170, 170, 200, 0.2);
	border-color: var(--blue_text_lighter);
	border-radius: 6px;
	box-shadow: 4px 4px 12px;
}


/* GALLERY - COLLAPSED */

.expand-button-toggle:checked ~ .gallery-head .expand-button {
	border-color: var(--brown_text_darker);
	border-color: var(--brown_text_darker);
}
.expand-button-toggle:checked ~ .gallery-head h2 {
	color: var(--brown_text_dark);
	text-shadow: 1px 1px var(--brown_text_shadow);
}
.expand-button-toggle:checked ~ .gallery-head p {
	color: var(--brown_text_darker);
}
.expand-button-toggle:checked ~ .gallery-content {
	background-color: var(--brown_gallery_bg_collapsed);
	background-image: linear-gradient(to bottom, rgba(var(--brown_gallery_header_rgb), .5), rgba(var(--brown_gallery_header_rgb), .6)), var(--brown_gallery_bg_img);
	border-color: var(--brown_gallery_header_bevel_dark);
}
.expand-button-toggle:checked ~ .gallery-content:not(.info) .gallery-item {
	border-left-color: var(--brown_gallery_header_bevel_dark);
}
.expand-button-toggle:checked ~ .gallery-content:not(.info) div:last-of-type {
	box-shadow: 2px 0 0 var(--brown_text_shadow);
}

	/* Info block collapse */

.expand-button-toggle:checked ~ .gallery-content.info .info-block {
	border-color: var(--brown_gallery_header_bevel_dark);
	box-shadow: 0px 1px 3px 0 var(--brown_text_shadow) inset;
}
.expand-button-toggle:checked ~ .gallery-content.info h4 {
	color: var(--brown_text_mid);
}
.expand-button-toggle:checked ~ .gallery-content.info h3, 
.expand-button-toggle:checked ~ .gallery-content.info h5 { 
	color: var(--brown_text_dark);
}


/* GALLERY - ANIMATION */

.gallery-item a:hover .gallery-image {
	border-color: var(--brown_text_lightest);
}


/* END */