@charset "utf-8";

/*@font-face
{
    font-family: rubikLight;
    src: url(../css/fonts/Rubik/Rubik-Light.ttf);
}

@font-face
{
    font-family: rubikReg;
    src: url(../css/fonts/Rubik/Rubik-Regular.ttf);
	font-weight: bold;
}*/
@font-face
{
    font-family: monThin;
    src: url(../css/fonts/Montserrat/Montserrat-Thin.ttf);
}

@font-face
{
    font-family: monLight;
    src: url(../css/fonts/Montserrat/Montserrat-Light.ttf);
}

@font-face
{
    font-family: monReg;
    src: url(../css/fonts/Montserrat/Montserrat-Regular.ttf);
	font-weight: bold;
}
:root
{
/*    --gray_dark: rgba(46, 51, 58, 1);*/
    --lite_blue: rgba(19, 187, 240, 1);
    --dark_blue_op_6: rgba(36, 42, 45, 0.6);
    --dark_blue: rgba(36, 42, 45, 1);
    --darker_blue: #121516;
}

body
{
	background-color:var(--dark_blue);
	color: #ffffff;
	font-family: monLight;
	margin: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}
/****************** PRELOADER ******************/
#preloader
{
	display: flex;
	grid-template: 100% / 100%;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	align-content: center;
	font-size: 26px;
	font-family: monLight;
	background-color:var(--dark_blue);
	position: fixed;
	text-align: center;
	z-index: 200000;
}
/******************* HEADER *******************/
#header-container
{
	width: 100%;
    position: fixed;
	z-index: 100000;
	background-color:rgba(0,0,0,0);
}
.header
{
	
}
#logo_bar
{
	/*display: grid;
	grid-template: 1fr / 1fr 1fr;
	padding: 10px;*/
	display: flex;
    justify-content: space-between;
    padding: 40px 30px 10px 30px;
	background: var(--darker_blue);
}
#logo
{
	justify-self: start;
	align-self: center;
	cursor: pointer;
	font-size: 30px;
	letter-spacing: -2px;
}
#logo>span
{
	color: var(--lite_blue);
	pointer-events: none;
}
#logo_icon
{
    align-self: center;
	background-image: url("../assets/ui/SVG/rr_logo_e.svg");
	background-repeat: no-repeat;
	width: 180px;
	height: 130px;
    transform: scale(0.5);
    margin-top: 11px;
	display: none;
}
#menu
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: rgba(0,0,0,0.01);
	padding: 0px 0px 0px 20px;
}
#search_icon
{
	background-image: url(../assets/ui/SVG/magnifier.svg);
}
#menu_icon
{
	pointer-events: none;
	background-image: url(../assets/ui/SVG/sandwich.svg);
}
#search_icon, #menu_icon
{
	justify-self: end;
	align-self: center;
	width: 12px;
	height: 12px;
	cursor: pointer;
	background-size: cover;
}
.menu-item, .menu-item-mobile
{
	font-size: 16px;
	user-select: none;
	cursor: pointer;
	margin-left: 10px;
}
.menu-item:active,
.menu-text-mobile:active
{
	transform: scale(0.96);
}
.menu-item:hover
{
	opacity: 1;
/*	filter: brightness(0.5);*/
    transition: 0.05s;
}
#menu_mobile
{
	display: grid;
	height:0px;
    grid-template: auto / 100vw;
	justify-items: end;
	margin: -15px 0px 0px 0px;
	background: var(--darker_blue);
	padding: 0px 0px 26px 0px;
	overflow: hidden;
}
#container
{
	display:flex;
	flex-wrap: wrap;
	padding: 86px 0px 0px 0px;
	overflow-x: hidden;
	justify-content: center;
}
#video_container
{
	position: relative;
	display:flex;
	flex-wrap: wrap;
	padding: 0px 0px 0px 0px;
	overflow-x: hidden;
	width: 100%;
    justify-content: center;
	
}
#video_controls
{
	position: absolute;
	opacity: 0.3;
	width: 100%;
	height: 100%;
	z-index: 1000;
	justify-content: center;
	cursor: pointer;
}
.thumb
{
	cursor: pointer;
	background-size:cover;
	background-repeat: no-repeat;
  	background-position: center;
	overflow: hidden;
}
.thumb-title-holder
{
	display: flex;
	justify-content: center;
	height: 100%;
	opacity: 0;
	background-color: var(--dark_blue_op_6); 
	transition: 0.2s;
	overflow: hidden;
}
.thumb-title-holder:hover
{
	opacity: 1;
	transform: scale(1.2);
}

.thumb-title-underline, .thumb-title-underline-2
{
	height: 2px;
    width: 100px;
/*	transform:scaleX(0);*/
    background-color: var(--lite_blue);
    border-radius: 2px;
    display: inline-flex;
    margin-bottom: 7px;
}
.thumb-title-underline-2
{
	background-color: white;
	
}
/*.thumb-title-underline:hover
{
	animation-name: underline;
  	animation-duration: 0.2s;
	animation-delay: 0.05s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.thumb-title-underline-2:hover
{
	animation-name: underline;
  	animation-duration: 0.2s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes underline 
{
  0%   {width: 0px;}
  100% {width: 90px;}
}*/


.thumb-title
{
	align-self: center;
	text-align: center;
	height: auto;
	font-size: 20px;
/*	font-family: rubikReg;*/
	width: 80%;
	pointer-events: none;
}
.thumb-item-grow-1
{
/*	background-color: black;*/
	height: 300px;
	flex:1;
	margin: 0px;
}
.thumb-item-grow-2
{
/*	background-color: red;*/
	height: 300px;
	flex:2;
	margin: 0px;
}
.thumb-item-grow-3
{
/*	background-color: green;*/
	height: 300px;
	flex:3;
	margin: 0px;
}
.thumb-item-grow-100
{
/*	background-color: blue;*/
	height: 300px;
	flex-basis:100%;
	margin: 0px;
}
#play, #pause, #loader
{
	width: 60px;
	height: 60px;
	pointer-events: none;
	position: absolute;
	align-self: center;
}
#play
{
	opacity: 0.3;
	background-image: url(../assets/ui/SVG/play.svg);
	background-repeat: no-repeat;
}
#pause
{
	opacity: 0;
	background-image: url(../assets/ui/SVG/pause.svg);
	background-repeat: no-repeat;
}
#loader
{
	
	background-image: url(../assets/ui/SVG/loader.svg);
	background-repeat: no-repeat;
}
.video-pics-container
{
	display: flex;
/*    padding: 24px;*/
	justify-content: center;
	flex-wrap: nowrap;
}
.video-pic
{
	overflow: hidden;
    width: 50vh;
    height: 50vh;
    background-position: center;
    background-size: cover;
}
.similar-pic
{
	width: 30vh;
    height: 30vh;
}
.p-title
{
	font-size: 30px;
    font-family: monLight;
    color: white;
    text-align: center;
    padding: 70px 20px 30px 20px;
    opacity: 0.9;
    letter-spacing: 1px;
}
.p-desc
{
	font-size: 20px;
    font-family: monThin;
    color: white;
    opacity: 0.5;
    text-align: center;
    padding: 0px 26px 50px 26px;
    line-height: 28px;
}
.p-similar
{
	font-size: 20px;
    font-family: monLight;
    color: white;
    opacity: 0.5;
    text-align: center;
    padding: 30px 26px 20px 26px;
    line-height: 28px;
	width: 100vw;
	text-decoration: underline;
}

.divider
{
	margin: 40px 0px 40px 0px;
    border-top: 0.3px solid gray;
    opacity: 0.3;
	width: 100%;
}
/******************* FOOTER *******************/
#footer-container
{
	z-index: 100000;
/*	background-color:var(--darker_blue);*/
	height: 200px;
	margin: 0px 0px 0px 0px;
	text-align: center;
}
#footer_line_A, #footer_line_B
{
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
}
#footer_line_A
{
	padding-top: 60px;
	font-size: 18px;
}
#footer_line_B
{
	margin-top: 10px;
}
#footer_line_B>img
{
	padding: 0px 10px 0px 10px;
    height: 18px;
	cursor: pointer;
}

/* GLOBAL CLASSES*/
.hidden
{
	display: none !important;
}

/* ABOUT */
#about-title
{
	font-family: monLight;
}
a, a:link
{
	color:var(--lite_blue);
	text-decoration: none;
}
.h-spacer
{
	padding: 0px 6px 0px 6px;
}

#container.about
{
	display: block;
	padding: 60px 240px 20px 240px;
	color: rgba(255, 255, 255, 0.4);
}
#about-title
{
	font-size: 28px;
	color: var(--lite_blue);
	padding: 40px 0px 20px 0px;
}
#about-desc
{
	font-size: 24px;
}
#about-subtitle
{
	font-size: 20px;
	color: var(--lite_blue);
	padding: 40px 0px 20px 0px;
}
.worker
{
	padding: 00px 0px 20px 0px;
}
a#email
{
	font-size: 16px;
}

/* SMALL SCREEN */
@media (max-width: 989.99px) and (orientation: portrait)
{
	#preloader
	{
		font-size: 30px;
	}
	#menu_icon
	{
		margin: 38px 20px 40px 0px;
		width: 22px;
    	height: 14px;
	}
	.menu-text
	{
		display: none;
	}
	.menu-text-mobile
	{
		font-size: 16px;
    	padding: 7px 30px 0px 10px;
	}
	#logo
	{
		display: none;
	}
	#logo_icon
	{
		display:initial;
		transform: scale(0.2);
    	margin: 2px 0 0 -54px;
	}
	#logo_bar
	{
		height: 50px;
		padding: 10px 12px 0px 12px;
	}
	#container
	{
		padding: 60px 0px 0px 0px;
	}
	.thumb-title
	{
		font-size:20px;
	}
	.thumb-item-grow-100
	{
		height: 50vh;
	}
	.thumb-item-grow-1, .thumb-item-grow-2,.thumb-item-grow-3
	{
		 min-width: 25vw;
	}
	
	#video_container
	{
		overflow-x: hidden;
	}
	.similar-pic
	{
		width: 100vw;
    	height: 100vw;
		margin: 0px 24px 0px 24px;
	}
	.video-pics-container
	{
		padding: 0px;
		flex-wrap: wrap;
	}
	.video-pic
	{
		width:90vw;
		height:90vw;
		margin: 0px 24px 0px 24px;
	}
	/*	ABOUT  */
	#container.about
	{
		display: block;
		padding: 60px 20px 20px 20px;
		color: rgba(255, 255, 255, 0.4);
	}
	#about-title
	{
		font-size: 28px;
		color: var(--lite_blue);
		padding: 40px 0px 20px 0px;
	}
	#about-desc
	{
		font-size: 24px;
	}
	#about-subtitle
	{
		font-size: 20px;
		color: var(--lite_blue);
		padding: 40px 0px 20px 0px;
	}
	.worker
	{
		padding: 00px 0px 20px 0px;
	}
	a#email
	{
		font-size: 16px;
	}
}

@media (max-width: 989.99px) and (orientation: landscape)
{
	#preloader
	{
		font-size: 30px;
	}
	#logo_bar
	{
		height:40px;
		padding: 10px 30px 10px 30px;
	}
	#logo
	{
		display: none;
		font-size: 30px;
		letter-spacing: -2px;
		margin-top: 0px;
	}
	#logo_icon
	{
		display:initial;
		height: 130px;
		transform: scale(0.25);
    	margin: 5px 0px 0px -50px;
	}
	#menu_icon
	{
		width: 22px;
		height: 14px;
		margin: 12px 16px 8px 0px;
	}
	.menu-text
	{
		display: none;
	}
	.menu-text-mobile
	{
		font-size: 18px;
    	padding: 7px 44px 0px 10px;
	}
	#container
	{
		padding: 60px 0px 0px 0px;
	}
	#menu_mobile
	{
		margin: 0px;
	}
	.thumb-title
	{
		font-size:20px;
	}
	.thumb-item-grow-100
	{
		height: 100vh;
	}
	.similar-pic
	{
		width: 50vh;
   	 	height: 50vh;
	}
	
	/*	ABOUT  */
	#container.about
	{
		display: block;
		padding: 60px 20px 20px 20px;
		color: rgba(255, 255, 255, 0.4);
	}
	#about-title
	{
		font-size: 28px;
		color: var(--lite_blue);
		padding: 40px 0px 20px 0px;
	}
	#about-desc
	{
		font-size: 24px;
	}
	#about-subtitle
	{
		font-size: 20px;
		color: var(--lite_blue);
		padding: 40px 0px 20px 0px;
	}
	.worker
	{
		padding: 00px 0px 20px 0px;
	}
	a#email
	{
		font-size: 16px;
	}
}

/* BIG SCREEN */
@media (min-width: 990px)
{
	#logo_bar
	{
		background: rgba(36,42,45,0.7);
	}
	#menu_icon, #menu_mobile
	{
		display: none;
	}
	.thumb-item-grow-100
	{
		height: 60vh;
		background-size: cover;
	}
	.thumb-item-grow-1
	{
		height: 50vh;
    	min-width: 30vw;
	}
	.thumb-item-grow-2
	{
		height: 50vh;
		min-width: 40vw;
	}
	.thumb-item-grow-3
	{
		height: 50vh;
		min-width: 50vw;
	}
	.p-title
	{
		width:100%;
	}
	.p-desc
	{
		padding: 0px 20vw 50px 20vw;
	}

}