:root {
	
  --container-width: 70em;
	
  --main-width: 70%;
  --main-padding: 4em;
  --main-wrapper-width:90%;
  --main-wrapper-half-height:6em;
  --main-wrapper-height:25em;
  
  --main-text-width:55%;
  --main-margin-left-right:5%;
  
  --main-media-width:40%;
  --main-media-img-width-height:90%;

  --main-border-size:2px;
  --main-border-color:gray; 
  
  --main-background-color:#2B2B2B;
  --main-font-color:#e6e6e6;
  --main-footer-color: var(--main-font-color);
  --main-title-font-size:1.4em;
  
  --main-margin: 2em;
  
  
  --special-wrapper-width:100%;
  
  
  --button-padding:0.5em;
  --button-width:10em;
  --button-space:20%;
  --button-round-width:3em;
  
  --button-border-radius:0.4em;
  
  
  --button-main-color:#E5D9CF;
  --button-hover-color:#d9d9d9;
  --button-font-color: var(--main-font-color);
  
  --button-not-available-font-color:#595959;
  --button-not-available-color:#d9d9d9;
  
  
  --header-margin:0em;
  --header-elem-margin: 0.25em;
  --header-padding: 1em;
  
  
  --footer-wrapper-height:10em;
  --footer-wrapper-half-height:2.5em;
  --footer-font-color:#E5D9CF;

  
  --divider-width:100%;
  --divider-color:gray;
  --divider-height:1px;
  --divider-margin:1em;
  
    
  --center-width:100%;
  --center-height:35em;
  
 
  --project-object-background:#fcfcfc;
  --project-font-color: #575757;
  --projects-padding: 1em;
  --project-object-border-radius: 0.5em;
  --project-image-border-radius: 0.4em;
  
  --gallery-padding: 2em;
}

/*==============================================
 * MAIN
 *============================================*/

body {
	background-color:var(--main-background-color);
	font-family: Raleway, Helvetica, sans-serif;
	font-size:16px;
	margin:auto;
	color:var(--main-font-color);
	line-height: 1.6;
}

a {
	text-decoration: none;
}

a:link {
	color: #c6d2e6;
}

a:visited {
	color: #c6d2e6;
}

a:hover {
	color: #acc6f2;
}

a:active {
	color: #8fbaff;
}

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.3em;
}

h3 {
	font-size: 1.15em;
}

h1, h2, h3, h4, h5 {
	/*font-family: Segoe UI;*/
	margin: 0em;
	padding: 0em;
	font-weight: normal;
}

#container {
	max-width: var(--container-width);
	margin:auto;
	height: 150em;
}

.wrapper {
	width:var(--main-wrapper-width);
	margin:auto;
	padding-top:var(--main-padding);
	padding-bottom:var(--main-padding);
	

	align-items:center;
}

.special-wrapper {
	width:var(--special-wrapper-width);
	margin:auto;
}

.divider {
	width:var(--divider-width);
	border-bottom:var(--divider-height) var(--divider-color) solid;
	margin-left:auto;
	margin-right:auto;
	margin-top: var(--divider-margin);
	margin-bottom: var(--divider-margin);
	
}

.icon {
	width: 1.1em;
	padding-left: 0.2em;
	color:var(--main-footer-color);
	text-decoration:none;
}

.clear {
	width:100%;
	clear:both;
}

#main-content {
	background-color:var(--main-background-color);
	padding-bottom:var(--main-margin);
	float:right;
	width: var(--main-width);
}

/*==============================================
 * MAIN MEDIA
 *============================================*/

.text {
	width:var(--main-text-width);
}

.media {
	width:var(--main-media-width);
}

.media img {
	width:var(--main-media-img-width-height);	
}

/*==============================================
 * MAIN TEXT
 *============================================*/

.title {
	font-size:var(--main-title-font-size);
	text-transform:uppercase;
	text-align:center;
}

.title::after {
	background: var(--divider-color);
	content: '';
	display: inline-block;
	height: var(--divider-height);
	margin-top: 1em;
	margin-bottom: 1em;
	width: 5em;
}

.phone-title{
	display:none !important;
}

.regular-title {
	display:block;
}

/*==============================================
 * HEADER
 *============================================*/

#header {
	width:19em;
	float:left;
	position:fixed;
	
	color:(--footer-font-color);
	margin-top:var(--header-margin);
	margin-bottom:var(--header-margin);
}

#header-body {
	padding-top: var(--header-padding);
	/*
	background-color:rgba(0,0,0,0.4);
	padding-top: var(--header-padding);
	padding-bottom: var(--header-padding);
	border-radius:1em;
	*/
}

.header-elem {
	margin-bottom: var(--header-elem-margin);
}

.header-text {
	font-size:1.1em;
	/*text-transform:uppercase;*/
}

#header-media {
	border-radius:2em;
	width:10em;
	margin-bottom:3em;
}

#header-media img {
	width: 100%;
	border-radius:100%;
	border:none;
}


/*==============================================
 * FOOTER
 *============================================*/
 
 #footer {
	float:right;
	width: var(--main-width);
	text-align:center;
	color:var(--footer-font-color);
}
 
 #footer .wrapper {
	height:var(--footer-wrapper-height);	
 }
 
 #footer-content {
	margin-top:var(--footer-wrapper-half-height);
 }
 
 #footer-icons {
	display:none;
 }
 
 #copyright {
	margin-top:var(--main-margin); 
 }
 
 .social-media {
	font-size:2em;
 }
 
 
/*==============================================
 * PROJECTS
 *============================================*/
 
.projects {
	margin-top:var(--main-margin);
}

.projects img {
	border-top-left-radius: var(--project-image-border-radius);
	border-top-right-radius: var(--project-image-border-radius);
	width:100%;
}

.project-row {
	width:50%;
	float:left;
}

.project-object {
	background:var(--project-object-background);
	color:var(--project-font-color);
	margin-left: 2.5%;
	margin-right: 2.5%;
	margin-bottom: 5%;
	padding-bottom:var(--projects-padding);
	
	border-radius: var(--project-object-border-radius);
}

.project-object a {
	color:var(--project-font-color);
	text-decoration:none;
}

.project-object .text-wrapper {
	width:86%;
}

.project-object .text {
	padding:7%;	
	text-align:left;
}
 
.project-object .title {
	font-size:1em;
	font-weight:bold;
	text-align:left;
}

.project-object .title::after {
	background: var(--divider-color);
	height: var(--divider-height);
	width:100%;
}

.project-row-divider {
	width:100%;
	clear:both;
}



/*==============================================
 * GALLERY
 *============================================*/
 
.gallery {
	width:100%;
	margin:auto;
}
 
.gallery td {
	align-items:center;
	text-align:center;
	padding:var(--gallery-padding);
	height:100%;
}

.gallery img {
	width:100%;
}


/*==============================================
 * BUTTONS
 *============================================*/
 
.button-wrapper {
	width:100%;
	margin:auto;
	margin-top:var(--main-margin);
} 
 
.button-row {
	text-align:center;
}

.button {
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
	 
	border-radius:var(--button-border-radius);
	border:var(--main-border-size) var(--main-border-color) solid;
	
	color:var(--button-font-color);
	
	text-transform:uppercase;
	
	float:left;
	width:var(--button-width);
	padding: var(--button-padding) 0px;
	text-align:center;
}

.button-right {
	margin-left: var(--button-space);
}

.button:hover {
	background:var(--button-hover-color);	
}

.not-available {
	color:var(--button-not-available-font-color);
	background:var( --button-not-available-color);
}

.not-available:hover {
	background:var(--button-not-available-color);
}


/*==============================================
 * RIGHT ROWS
 *============================================*/

.right {
	height:none;
	text-align:justify;
}

.right .text {
	float:right;
	margin-left:var( --main-margin-left-right);
}

.right .media {
	float:left;
	text-align:left;
}

.right .title {
	display:block;
	text-align:left;
}

/*==============================================
 * LEFT ROWS
 *============================================*/

.left {
	height:none;
}

.left .text {
	float:left;
	text-align:justify;
	margin-right:var( --main-margin-left-right);
}

.left .media {
	float:right;
	text-align:right;
}

.left .title {
	display:block;
	text-align:right;

}

/*==============================================
 * CENTER ROWS
 *============================================*/

.center {
	text-align:center;
	margin:auto;
}

.center .text {
	width:var(--center-width);
}

.center .media {
	width:none;
	height:none;
}

.center .title {
	display:block;
}


@media only screen and (max-width:1000px) {
	body{
		font-size: 14px;
	}
	
	#container {
		max-width: 800px;
	}
	
	#header{
		width: 16em;
	}
	
	#header-media {
		width: 8em;
	}
	
}


@media only screen and (max-width:800px) {
  /* For mobile phones: */
  
  #header {
	float:none;
	position: static;
	width: 100%;
	margin-left: 8%;
	margin-right: 8%;
  }
  
  #header-body {
	height: 7em;
	width:100%;
	padding-left:0em !important;
	padding-right:0em !important;
  }
  
  #header-sub-text {
	display:none;
  }
  
  .header-elem {
	margin-right: 8%;
	margin-bottom: 0em;
	float: left;
  }
  
  .header-text {
	margin-top: 2.5em;
	text-align: center;
  }
  
  #footer {
	float:none;
	margin: auto;
	width: 100%;
  }
  
  #footer-icons {
	display:block;
  }
  
  #main-content {
	float: none;
	margin: auto;
	width: 95%;
  }
  
  .wrapper {
	width: 100%;
  }
  
  .text {
	width:80%;
	float:none !important;
	margin:auto !important;
  }
  
  .media {
	width:60%;
	float:none !important;
	margin:auto !important;
	margin-bottom:var(--main-margin) !important;
  }
  
  .phone-title{
	display:block !important;
  }
  
  .regular-title {
	display:none !important;
  }
  
  .regular-title .title::after {
	width:0em;
	display:none;
  }
  
  .title, .media {
	text-align:center !important;
  }
  
  .special-wrapper {
	width:90%;
	float:none;
  }
  
  .button-right {
	float:none !important;
  }
  
  .button-wrapper {
	text-align:center;
  }
  
  .button {
	width:80% !important;
	float:none !important;
	margin:auto !important;
	margin-bottom:var(--main-margin) !important;
  }
  
  .project-row {
	width:75%;
	margin:auto;
	float:none;
  }
  
  .project-object {
	margin-bottom:var(--main-margin) !important;
  }
  
  .right, .left, .center {
	width:100%;
	float:none;
  }
  
  .divider {
	width:0%;
  }
}

@media only screen and (max-width:600px) {
  .header-elem {
	margin-right: 5%;
  }
  
  .text {
	width:100%;
  }
  
  .project-row {
	width:100%;
  }
  
  .media {
	width:70%;
  }
}

@media only screen and (max-width:500px) {
  .header-elem {
	margin-right: 3%;
  }
}

@media only screen and (max-width:300px) {
  .text, .wrapper {
	width:100% !important;
  }
  
  .media {
	width:90%;
  }
	
}