html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* reset ------------- */


 /*GENERAL ------------------------------------------- */

body {
  font-family: 'Roboto';
}

h1 {
  font-family: 'Roboto_thin';
  font-weight: normal;
  font-style: normal;
  
}

h2 {
  font-weight: normal;
  font-style: normal;
  margin-bottom: 50px;
  text-transform: uppercase;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto_thin';
    src: url('Roboto/Roboto-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto_light';
    src: url('Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto_bold';
    src: url('Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.inner {
  margin-left: 20vw;
  margin-right: 20vw;
  height: 100%;
}

.hash {
  position: absolute;
  font-size: 70px;
  margin-left: -70px;
  margin-top: 5px;
  color: #C5C5BB;
  font-family: 'Roboto_thin';
}

.content {
  clear: both;
  padding-top: 50px;
  padding-bottom: 70px;
}

/*HEAER ------------------------------------------- */

header {
  background-image: url(../graphic/wall.jpg);
  background-position: center;
  width: 100%;
}

#header_index {
  height: 570px;
}

#header_foto {
  height: 370px;
}

#header_ref {
  height: 370px;
}

/*NAV ------------------------------------------- */

nav {
	height: 70px;
	width: 100%;
	background-color: black;
	position: fixed;
	z-index: 1000;
}

nav ul {
	list-style: none;
	float: right;
}

nav ul li {
	float: left;
	text-align: center;
	color: white;
	line-height: 70px;
}

nav ul li a {
	color: white;
	text-decoration: none;
	display: block;
	padding-left: 30px;
	padding-right: 30px;
}

nav ul li a:hover {
	color: #66CC66;
}

#nav_foto {
  padding-right: 0px !important;
}

#chosen a {
	color: #66CC66;
}


/*INDEX ------------------------------------------- */

#index_top {
  clear: both;
  height: 500px;    
	padding-top: 70px;
  background: radial-gradient(rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.65));
}

#index_top_left {
  width: 50%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#index_top_left h1 {
  font-size: 70px;
  text-transform: uppercase;
  color: #C5C5BB; 
  line-height: 80px;
}

#index_top_left span {
  color: #66CC66;
}

#index_top_left img {
  display: none;
}

#index_top_left p {
  clear: both;
  padding-top: 140px;
  color: #C5C5BB;
  font-size: 26px;
  font-family: 'Roboto_thin';
}

#index_top_right {
  width: 50%;
  height: 100%;
  float: left;      
  line-height: 100%; 
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#index_top_right img {
  padding-right: 10%;
}

#index_content ul {
  list-style: none;
  width: 70%;
  font-size: 18px;
  font-family: 'Roboto_light';
}

#index_content li {
  line-height: 30px;
  margin-bottom: 35px;
  padding-top: 0px;
}

.index_list_img {
  position: absolute;
  margin-left: -30px;
  margin-top: 3px;
}

#index_linkedin {
  clear: both;
  margin-top: 70px;
}

/*REFERENCE ------------------------------------------- */

#ref_top {
  clear: both;
  height: 300px;   
	padding-top: 70px;
  background: radial-gradient(rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.65));
}

#ref_top_left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#ref_top_left h1 {
  font-size: 70px;
  text-transform: uppercase;
  color: #C5C5BB; 
  line-height: 80px;
}

#ref_top_left span {
  color: #66CC66;
}

#ref_top_left p {
  clear: both;
  padding-top: 60px;
  color: #C5C5BB;
  font-size: 26px;
  font-family: 'Roboto_thin';
}

.reference {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
  margin-bottom: 40px;
}

.reference_left {
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center; 
  width: 35%;
  height: 100%;
  font-size: 26px;   
  padding-bottom: 40px;
  padding-right: 15%;
  line-height: 30px;
}

.reference_right {
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;  
  width: 50%;    
  height: 100%;
  border-bottom: 1px solid #C5C5BB;
  padding-bottom: 40px;
}

.reference_right ul {
  list-style: none;
  font-size: 18px;
  font-family: 'Roboto_light';
}

.reference_right li {
  line-height: 30px;
  margin-bottom: 10px;
}

.reference_right img {
  position: absolute;
  margin-left: -30px;
  margin-top: 3px;
}

.reference_right a {
  color: black;
  text-decoration: none;
}

.reference_right a:hover {
  text-decoration: underline;
}

/*FOTO ------------------------------------------- */

#foto_top {
  clear: both;
  height: 300px;   
	padding-top: 70px;
  background: radial-gradient(rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.65));
}

#foto_top_left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#foto_top_left h1 {
  font-size: 70px;
  text-transform: uppercase;
  color: #C5C5BB; 
  line-height: 80px;
}

#foto_top_left span {
  color: #66CC66;
}

#foto_top_left p {
  clear: both;
  padding-top: 60px;
  color: #C5C5BB;
  font-size: 26px;
  font-family: 'Roboto_thin';
}

#foto_source {
  padding-bottom: 60px;;
}

#foto_source p {
  width: 50%;
  float: left;
  line-height: 20px;
}

#foto_source p a {
  text-decoration: none;
  color: black;
}

#foto_source p a:hover {
  text-decoration: underline;
}

#foto_source p:last-child {
  text-align: right;
}


#kolaz {
  margin-bottom: 50px;
  clear: both;
}

#kolaz section{
  display: flex;
  flex-wrap: wrap;
}

#kolaz div{
  flex-grow: 1;
  margin: 2px;
  background-color: white;
  height: 160px;
}

#kolaz img{
  height: 160px;
  object-fit: cover;
  max-width: 100%;
  min-width: 100%;
  vertical-align: bottom;
}

#kolaz div:last-child {
  max-width: 20%;
}

/*FOOTER ------------------------------------------- */

footer {
  clear: both;
  height: 300px;
  background-image: url(../graphic/wall.jpg);
  background-position: center;
  width: 100%;
}

#footer_upper {
  height: 230px;
  background: radial-gradient(rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.65));
}


.footer_upper_div {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 20%;   
  height: 100%;  
}

#footer_upper_middle {
  width: 60%;
}

.footer_div_header {
  font-family: 'Roboto_light';
  color: #66CC66;  
  font-size: 20px;
  margin-bottom: 15px; 
}

.footer_div_text {
  clear: both;  
  float: left;
  color: white;
}

#copyright {
  height: 70px;
  color: white;
  background-color: rgba(0,0,0,0.75);
}

#copyright p {
  line-height: 70px;
  float: right;
  font-size: 15px;
}

#copyright span {
  color: #66CC66;  
}


/* LESS STYLES -----------------------------------------------------*/

@media screen and (max-width: 1300px) {
  @import "screen_1300.less";
}

@media screen and (max-width: 1000px) {
  @import "screen_1000.less";
}

@media screen and (max-width: 800px) {
  @import "screen_800.less";
}