@charset "utf-8";
/* CSS Document */

/* GENERAL STUFF */
html, body {
	margin:0px;
	padding:0px;
	font-family:"Arial", sans-serif;
	height:100%;
	width:100%;
	color:#E1E1E1;
	
	background:linear-gradient(to bottom, #959595 0px, #454545 300px);
	background-color:#454545;
	background-attachment:fixed;
	background-repeat:no-repeat;
}

a, a:visited, a:hover, a:active
{
	color:#E1E1E1;
	font-weight:bold;
}

.outerContainer
{
	width:1000px;
	margin:10px auto;
	position:relative;
	display:flex;
	min-height:100%;
	flex-wrap:wrap;
	align-content:flex-start;
}

#header
{
	position:relative;
	width:100%;
	height:300px;
	color:#454545;
}
.contact
{
	position:absolute;
	width:250px;
	right:0px;
	font-family:"Arial Black", sans-serif;
	z-index:100;
}

.contact div
{
	border:dashed 1px yellow;	
	margin-bottom:15px;
	font-size:16px;
	font-weight:bold;
	background-color:#f8fe43;
	color:#454545;
	padding:10px;
}

.contact #callBtn { display:none; }

.contact #label_callback
{
	font-size:12px;
	position:relative;
	margin:5px;
	margin-top:5px;
	margin-left:20px;
	margin-bottom:20px;
}

.contact #phone span
{
	font-size:20px; 
}

.contact input[type="checkbox"]
{
	display:none;
	position:absolute;
}

.contact #label_callback:before
{
	content:"";
	width:16px;
	height:16px;
	background-color:#3f676d;
	position:absolute;
	left:-20px;
}

.contact input[type="checkbox"]:checked + #label_callback:after
{
	content:"";
	width:5px;
	height:12px;
	position:absolute;
	border:none ;
	border-bottom:3px solid #E1E1E1;
	border-right:3px solid #E1E1E1;
	transform:rotate(45deg);
	left:-16px;
	top:-2px;
}

#message 
{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;	
}
#message input[type="text"], input[type="tel"], input[type="email"], textarea
{
	width:100%;
	margin:3px 0px;
	height:20px;
	font-weight:bold;
}

#message textarea
{
	height:100px;
	font-family:"Arial", sans-serif;
	margin-bottom:15px;
}

#message input[type="button"], input[type="reset"]
{
	height:30px;
	background-color:#3f676d;
	border:1px solid #E1E1E1;
	flex-grow:1;
	font-weight:bold;
	color:#E1E1E1;
	margin:0px 2px;
}

#content 
{
	width:705px;
	min-height:455px;
	padding:15px;
	margin-bottom:15px;
	position:relative;
}

#menu
{
	width:100%;
	position:relative;
}

#menu.scrolled
{
	position:fixed;
	top:0px;
	left:0px;
	z-index:999;
}

#menu.scrolled ul
{
	border-bottom:1px solid #E1E1E1;
}

#menu ul
{
	display:flex;
	height:40px;
	padding:0px;
}

#menu ul a
{
	list-style-type:none;
	border-right:2px solid #E1E1E1;
	flex-grow:1;
	text-align:center;
	line-height:40px;
	background-color:#454545;
	color:#E1E1E1;
	cursor:pointer;
}

#menu ul a
{
	color:#E1E1E1;
	text-decoration:none;
	background-color:#656565;
}

#menu ul a:hover
{
	list-style-position:inside;
	color:rgba(50, 50, 100, 1);
	background-color:#E1E1E1;
}

#menu ul a:active, a:visited
{
	color:rgba(50, 50, 100, 1);
}


#menu ul a:nth-child(1)
{
	border-left:2px solid #E1E1E1;
}

#menu #menuToggleBtn { display:none; }

#footer 
{
	height:20px;
	position:relative;
	bottom:0px;
	text-align:center;
	background:#656565;
	width:100%;
	font-size:12px;
	padding-top:4px;
	color:#E1E1E1;
	border-top:1px solid #E1E1E1;
}

#footer a, a:visited, a:hover
{
	color:#E1E1E1;
}

.infoContainer
{
	position:relative; 
	width:300px; 
	border:5px solid #E1E1E1; 
	border-radius:15px; 
	padding:15px; 
	background-color:#656565; 
	color:#E1E1E1; 
	margin:15px; 
	box-shadow: 8px 8px 15px rgba(225,225,225,0.40)
}

.infoContainer h4
{
	border-bottom:1px solid #E1E1E1;
}

#menufloater
{
	width:1000px;
	height:40px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

#banner
{
	position:relative;
	width:100%;
	background-color:#E1E1E1;
	padding-left:30px;
	margin-bottom:15px;
	margin-top:10px;
	color:#454545;
}
/* LIST OF SERVICES */
#serviceList
{
	list-style-type:none;
	width:100%;
}

#serviceList li
{ 
	position:relative;
	font-size:13px;
	line-height:20px;
	margin:0px;
	margin-bottom:5px;
	padding:0px;
	width:100%;
}

#serviceList .infoContainer
{
	height:20px;
	overflow:hidden;
	transition:0.15s linear height;	
	width:80%;	
}

#serviceList .infoContainer.openedServiceListItem
{
	height:80px;	
}

#serviceList .infoContainer.openedServiceListItemBig
{
	height:380px;	
}

#serviceList li h4
{
	font-size:14px;
	margin:5px;
	margin-left:15px;
	cursor:pointer;
	border-bottom:1px solid #E1E1E1;
}

#serviceList .infoContainer:after
{
	content:"";
	height:0px;
	width:0px;
	position:absolute;
	border:6px solid transparent;
	border-left-color:#E1E1E1;
	transform:rotate(0deg);
	transform-origin:25% 50% 0;
	top:25px;
	left:12px;
	
	transition:0.15s linear transform;
}

#serviceList .infoContainer.openedServiceListItem:after
{
	transform:rotate(90deg);
}

#serviceList .infoContainer.openedServiceListItemBig:after
{
	transform:rotate(90deg);
}

/* CONTACT STUFF */

.contactFlexContainer
{
	display:flex; 
	position:relative; 
	width:300px; 
	flex-direction:column; 
	align-content:space-between; 
	flex-wrap:wrap;
}

.innerFlexContainer
{
	display:flex;
	flex-direction:row;
	flex-wrap:no-wrap;
}

.innerFlexContainer div
{
	flex-shrink:0;
	flex-grow:0;
}

.innerFlexContainer div:nth-child(odd)
{
	width:80px;
}

.innerFlexContainer div:nth-child(even)
{
	width:150px;
}

/* GALERY STUFF */

#galery
{
	overflow:hidden;
	width:600px;
	height:150px;
	position:relative;
	margin:10px auto;
}

.galeryMoveNode
{
	position: absolute;
	display: inline;
	width:200%;
}
.galeryMoveNode img
{
	display:inline;
}

#mainImage
{
	display:none;
	z-index:1001;
	max-height:80%;
}

.controlBtn
{
	width:40px;
	height:40px;
	background:url(../../footage/controls.png);
	cursor:pointer;
}

#closeBtn
{
	position:absolute;
	right:0px;
	background-position:0px 40px;
}

#prevBtn, #nextBtn
{
	position:relative;
	margin-right:10px;
	float:left;
}

#prevBtn
{
	background-position:0px -40px;
}

#mainImageContainer
{	
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.60);
	position:fixed;
	display:none;
	z-index:1000;
	align-items:center;
	justify-content:center;
}

#imageControls
{
	position:relative;
	width:100%;
	overflow:hidden;
}

#imageControlContainer
{
	max-width:70%;
	max-height:70%;
}