* {
	margin: 0px;
	padding: 0px;
}
body {
	width: 100%;
	height: 100%;
	font-family: 'regular', sans-serif;
}
/*********FONTS**********/
  @font-face {
  font-family: "regular";
  src: url("fonts/Quicksand-Light.ttf");
  }
  @font-face {
  font-family: "headline";
  src: url("fonts/headline.otf");
  }  
   @font-face {
  font-family: "handwritetext";
  src: url("fonts/handwrite.ttf");
  }
  @font-face {
  font-family: "bold";
  src: url("fonts/BebasNeue-Regular.ttf");
  }
#wrapper{
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
}
.main_frame {
	position: fixed;
	border: 1px solid black;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: none;
}
.stripe_0_5 {
	width: 9.8%;
	height: 100%;
	float: left;
}
.stripe_1_0 {
	border-left: 1px solid #ededed;
	width: 20%;
	height: 100%;
	float: left;
}
.logo {
	position: fixed;
	border: 1px solid black;
	width: 80px;
	height: 80px;
	top: 5%;
	left: 2%;
	z-index: 1;
	border: none;
}
.logo img {
	width: 100%;
	height: 100%;
}
.menu_button {
	position: fixed;
	border: 1px solid black;
	width: 30px;
	height: 30px;
	top: 7%;
	right: 6.5%;
	z-index: 2;
	border: none;
}
.menu_button img{
	width: 100%;
	height: 100%;
}
.contact_button {
	position: fixed;
	border: 1px solid black;
	width: 30px;
	height: 30px;
	top: 80%;
	left: 91%;
	border-radius: 50%;
	background: white;
	z-index: 1;
	display: none;
}
.home_frame {
	position: relative;
	border: 1px solid black;
	width: 100%;
	min-height: 100%;
	height: auto;
	border: none;
	z-index: 2;
}
.home_picture {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.home_picture img {
	width: 100%;
	height: 100%;
}
.home_headline {
	position: relative;
	border: 1px solid black;
	width: 50%;
	height: auto;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	border: none;
}

.headline_logo {
	position: relative;
	border: 1px solid black;
	width: 140px;
	height: 140px;
	top: 15px;
	margin-left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	border: none;
}
.headline_logo img {
	width: 100%;
	height: 100%;
} 
.headline_text {
	border: 1px solid white;
	width: 90%;
	margin-top: 10%;
	margin-left: 5%;
	font-family: 'handwritetext';
	font-size: 85px;
	text-align: center;
	color: black;
	border: none;
}
.hashtag_headline {
	position: relative; 
	border: 1px solid white;
	width: 80%;
	margin-top: 55%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;	
	border: none;
	font-size: 35px;
}
.headline {
	position: relative; 
	border-bottom: 1px solid black;
	width: auto;
	margin-top: 50px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	display: inline-block;
	line-height: 120px;
	font-family: 'handwritetext';
	font-size: 110px;
}
.headline_hashtag {
	position: relative; 
	border: 1px solid black;
	margin-top: 30px;
	margin-left: 50%;
	transform: translateX(-50%);
	text-align: center;
	overflow: hidden;
	font-family: 'headline'; 
	font-size: 25px;	
	border: none;
}
.coffeepic_1 {
	position: absolute;
	border: 1px solid black;
	width: 250px;
	height: 250px;
	left: 5%;
	border: none;
}
.coffeepic_1 img{
	width: 100%;
	height: 100%;
}
.coffeepic_2 {
	position: absolute;
	border: 1px solid black;
	width: 250px;
	height: 250px;
	left: 75%;
	border: none;
}
.coffeepic_2 img{
	width: 100%;
	height: 100%;
}
.coffeepic_3 {
	position: absolute;
	border: 1px solid black;
	width: 250px;
	height: 250px;
	top: 30%;
	left: 75%;
	border: none;
}
.coffeepic_3 img{
	width: 100%;
	height: 100%;
}
.coffeepic_4 {
	position: absolute;
	border: 1px solid black;
	width: 250px;
	height: 250px;
	left: 70%;
	border: none;
}
.coffeepic_4 img{
	width: 100%;
	height: 100%;
}
.coffeepic_5 {
	position: absolute;
	border: 1px solid black;
	width: 290px;
	height: 270px;
	left: 70%;
	border: none;
}
.coffeepic_5 img{
	width: 100%;
	height: 100%;
}
.frame {
	border: 1px solid black;
	width: 80%;
	height: auto;
	margin-top: 10%;
	margin-left: 10%;
	overflow: hidden;
	border: none;
}
.frame_headline {
	position: relative;
	border: 1px solid black;
	width: 45%;
	margin-top: 50px;
	font-size: 35px;
	font-family: 'headline'; 
	border: none;
}
.frame_info_1 {
	position: relative;
	border: 1px solid red;
	width: 50%;
	margin-top: 10%;
	vertical-align: top;
	border: none;
}
.frame_info_2 {
	position: relative;
	border: 1px solid red;
	width: 50%;
	margin-top: 7%;
	vertical-align: top;
	border: none;
}
.frame_info_3 {
	position: relative;
	border: 1px solid red;
	width: 50%;
	margin-top: 7%;
	vertical-align: top;
	border: none;
}
.frame_info_4 {
	position: relative;
	border: 1px solid red;
	width: 50%;
	margin-top: 7%;
	vertical-align: top;
	border: none;
}
.num {
	color: gray;
}
.header {
	margin-top: 20px;
	font-size: 22px;
	font-family: 'headline'; 
}
.text {
	margin-top: 30px;
	font-size: 18px;
}
.vendingpic_1 {
	position: absolute;
	border: 1px solid gray;
	width: 45%;
	height: 85%;
	margin-top: -7%;
	margin-left: 45%;
	border: none;
}
.vendingpic_1 img {
	width: 100%;
	height: 100%;
}
.vendingpic_1_mobile {
	display: none;
}
.vendingpic_2_mobile {
	display: none;
}
.hashtag_vertical {
	position: relative;
	border: 1px solid black;
	width: 350px;
	top: -2%;
	left: -130px;
	transform: rotate(270deg);
	font-size: 19px;
	font-family: 'headline'; 
	border: none;
}
.down_frame_logo {
	border: 1px solid red;
	position: relative;
	width: 250px;
	height: 250px;
	margin-left: 50%;
	margin-top: 10%;
	transform: translateX(-50%);
	border: none;
}
.down_frame_logo img {
	width: 100%;
	height: 100%;
}
.hashtag {
	border: 1px solid black;
	position: relative;
	width: 40%;
	margin-top: 70px;
	margin-left: 30%;	
	text-align: center;
	font-size: 40px;
	border: none;
}
.down_frame {
	position: relative;
	border: 1px solid black;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 10%;
	margin-left: 0%;
	background: #191a1e;
	z-index: 3;
	border: none;
}
.down_frame_logo_text {
	position: relative;
	float: left;
	border: 1px solid white;
	width: 17%;
	height: auto;
	left: 5%;
	top: 10%;
	font-family: 'handwritetext';
	color: white;	
	font-size: 60px;
	border: none;
}
.down_frame_options {
	position: relative;
	border-left: 1px solid white;
	width: auto;
	height: auto;
	text-align: left;
	top: 10%;
	margin-left: 5%;

	float: left;
}
ul.down_options {
display: inline-block;
}
ul.down_options li {
	position: relative;
	font-size: 25px;
	font-family: 'headline'; 
	margin: 15px;
	list-style-type: none;
}
ul.down_options a {
	text-decoration: none;
	display:block;
}
ul.down_options li a:link {
	color: white;
}
ul.down_options li a:visited {
	color: white;
}
ul.down_options li:hover > a {
	transition: all 0.5s ease 0s;
	color: #ff9e44;
}
.down_frame_address {
	position: relative;
	border: 1px solid white;
	width: 25%;
	height: auto;
	text-align: left;
	margin-left: 15%;
	float: left;
	border: none;
	top: 10%;
}
ul.down_address {
display: inline-block;
}
ul.down_address li {
	position: relative;
	font-size: 15px;
	margin: 10px;
	list-style-type: none;
	color: white;
}
.down_frame_working_hours {
	position: relative;
	border: 1px solid white;
	width: 20%;
	height: auto;
	text-align: left;
	float: left;
	border: none;
	top: 10%;
}
ul.down_working_hours {
display: inline-block;
}
ul.down_working_hours li {
	position: relative;
	font-size: 15px;
	margin: 10px;
	list-style-type: none;
	color: white;
}
/**OPTIONS**/
.options_frame {
	position: relative;
	border: 1px solid black;
	width: 20%;
	height: auto;
	top: 45%;
	left: 10%;
	transform: translateY(-45%);
	border: none;
}
ul.options {
display: inline-block;
}
ul.options li {
	position: relative;
	font-size: 50px;
	font-family: 'headline'; 
	margin: 10px;
	list-style-type: none;
}
ul.options a {
	text-decoration: none;
	display:block;
}
ul.options li a:link {
	color: black;
}
ul.options li a:visited {
	color: black; 
}
ul.options li:hover > a {
	transition: all 0.5s ease 0s;
	color: #ff9e44;
}
.back_button {
	position: absolute;
	border: 1px solid black;
	width: 50px;
	height: auto;
	top: 5%;
	right: 6.5%;
	background: white;
	z-index: 1;
	border: none;
}
.options_logo {
	border: 1px solid green;
	position: absolute;
	width: 280px;
	height: 280px;
	top: 25%;
	left: 55%;
	border: none;
}
.options_logo img {
	width: 100%;
	height: 100%;
}
/**CATEGORY OPTIONS**/
.category_button {
	position: relative;
	border: 1px solid red;
	width: 20%;
	height: 100%;
	top: 0;
	left: 10%;
	border: none;
    cursor: pointer;
	float: left;
	color: black;
	transition: .5s;
}
.category_button:hover {
	color: white;
}
.category_button_animation {
	width: .1%;
	height: 100%;
	transition: width 1s;
}
.category_button:hover > .category_button_animation{
	background: #f45116;
	color: white;
	width: 100%;
}
.category_list {
	position: absolute;
	border: 1px solid black;
	width: 90%;
	height: 250px;
	text-align: left;
	top: 55%;
	transform: translateY(-55%);
	border: none;
}
.category_list_num {
	font-size: 16px;
}
.category_list_name {
	margin-top: 50px;
	font-family: 'headline'; 
	font-size: 26px;
}
.category_list_detail {
	border: 1px solid black;
	width: 100%;
	margin-top: 60px;
	border: none;
}
/*****************************/
/**CATEGORY **/
.category_headline {
	position: relative; 
	border: 1px solid black;
	width: 70%;
	margin-top: 50px;
	margin-left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-family: 'headline'; 
	font-size: 40px;	
	border: none;
}
.category_description_text {
	position: relative;
	text-align: center;
	font-weight: bold;
}
.category_option_1 {
	position: relative;
	border: 1px solid black;
	width: 18%;
	height: 80%;
	margin-top: 10%;
	margin-left: 20%;
	float: left;
	border: none;
}
.category_option_2 {
	position: relative;
	border: 1px solid black;
	width: 18%;
	height: 80%;
	margin-top: 10%;
	margin-left: 2%;
	float: left;
	border: none;
}
.category_option_3 {
	position: relative;
	border: 1px solid black;
	width: 18%;
	height: 80%;
	margin-top: 10%;
	margin-left: 2%;
	float: left;
	border: none;	
}
.category_option_picture {
	width: 65%;
	height: 70%;
	margin-left: 50%;
	transform: translateX(-50%);
	border: 1px solid black;
	border: none;
}
.category_option_picture img {
	width: 100%;
	height: 100%;
}
.category_option_picture_office {
	width: 90%;
	height: 50%;
	margin-left: 50%;
	transform: translateX(-50%);
	border: 1px solid black;
	border: none;
}
.category_option_picture_office img {
	width: 100%;
	height: 100%;
}
.category_option_name {
	border: 1px solid black;
	font-size: 20px;
	font-family: 'headline'; 
	margin-top: 6%;
	text-align: center;
	border: none;
}
.category_button_frame_mobile {
	display: none;
}
.category_option_button {
	position: relative;
	border: 1px solid black;
	font-size: 15px;
	font-family: 'headline'; 
	margin-top: 15%;	
	text-align: center;
	color: orange;
	z-index: 100;
	border: none;
}
/**CATEGORY PDF FILES**/

/**CONTACT**/
.contact_frame {
	border: 1px solid black;
	width: 80%;
	height: auto;
	margin-top: 15%;
	margin-left: 10%;
	overflow: hidden;
	border: none;
	display: flex;
	flex-direction: row-reverse;
}
#new_project_contact_form {
	position: relative;
	border: 1px solid green;
	width: 50%;
	height: auto;
	left: -15%;
	border: none;
}
.message_form{
	border: 1px solid black;
	width: 50%;
	border: none;
}
.message_form input{
	border: none;
	border-bottom: 1px solid #636363;
	width: 100%;
	height: 30px;
    margin-top: 5px;	
}
.message_form label{
	width: auto;
	height: auto;
}
.message_form label p{
	width: 100%; 
	height: 40px;
}
::placeholder {
	font-size: 14px;
    color: black;
	font-weight: bold;
	font-family: 'font_1', sans-serif;
}

#message{
	border: none;
	width: 100%;
	height: 100px;
	resize: none;
	color: #636363;
}

#send_message {
	margin-top: 1%;
	width: 70px;
	height: 30px;
	font-size: 20px;
	font-family: 'headline'; 
	text-align: left;
	line-height: 35px;
    transition: .6s;
    cursor: pointer;
	color: #f6a444;
}
#contact_header_frame {
	position: relative;
	border: 1px solid red;
	width: 35%;
	color: black;
	padding-top: 5%;
	font-size: 40px;
	font-family: 'headline'; 
	text-align: left;
	border: none;
}
.contact_header{
	position: relative;	
	left: 50%;
	transform: translateX(-50%);
}
/**SERVICE**/








#prozorcic{
	width: 100%;
	height: 100%;
	position: fixed;
	background: white;
	top: 0px;
	left: 0px;
	z-index: 10;
}
#unutrasnji_prozorcic{
	position: relative;
	border: 1px solid black;
	background: white;	
	width: 80%;
	height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: none;
}
#confirmation_message{	
	position: relative;
	border: 1px solid black;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -10%);
	text-align: center;	
	font-size: 35px;
	font-family: 'headline'; 
	border: none;
}
#zatvori{	
	position: relative;
	width: 70px;
	height: 30px;
	font-size: 20px;
	font-family: 'headline'; 
	text-align: left;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -80%);
    transition: .6s;
    cursor: pointer;
	color: #f6a444;
}









/**TABLET**/
@media only screen and (max-width:1100px) {
	/**HOME PAGE**/
	.logo {
		width: 60px;
		height: 60px;
	}
	.home_headline {
		width: 60%;
	}
	.hashtag_headline {
		margin-top: 65%;
	}
	.headline_hashtag {
		width: 100%;
	}
	.coffeepic_1 {
		display: none;
	}
	.coffeepic_2 {
		display: none;
	}
	.headline {
		width: auto;
	}
	.frame_headline {
		width: 70%;
	}
	.frame_info_1 {
		width: 70%;
	}
	.frame_info_2 {
		width: 70%;
	}
	.frame_info_3 {
		width: 70%;
	}
	.frame_info_4 {
		width: 70%;
	}
	.vendingpic_1 {
		display: none;
	}
	.down_frame_logo {
		width: 190px;
		height: 190px;
	}
	.hashtag {
		width: 100%;
		margin-left: 0%;
		font-size: 35px;
	}
	.down_frame_logo_text {
		display: none;
	}
	.down_frame_options {
		border: none;
		
	}
	/**OPTIONS**/
	.options_frame {
		position: relative;
		border: 1px solid black;
		width: 20%;
		height: auto;
		top: 40%;
		left: 10%;
		transform: translateY(-40%);
		border: none;
	}
	ul.options li {
		font-size: 45px;
	}
	.options_logo {
		display: none;
	}
	/**SERVICES**/
	.coffeepic_4 {
		display: none;
	}
	.coffeepic_5 {
		display: none;
	}

	/**CATEGORY**/
	.category_headline {
		width: 90%;
	}
	.category_button {
		display: none;
	}
	.coffeepic_3 {
		display: none;
	}
	.category_button_frame_mobile {
		position: relative;
		border: 1px solid black;
		width: 80%;
		height: auto;
		top: 45%;
		left: 10%;
		transform: translateY(-55%);
		display: block;
		line-height: 40px;
		margin-top: 40px;
		border: none;
	}
	ul.category_button_mobile {
	display: inline-block;
	}
	ul.category_button_mobile li {
		position: relative;
		font-size: 35px;
		font-family: 'headline'; 
		list-style-type: none;
	}
	ul.category_button_mobile a {
		text-decoration: none;
		display:block;
	}
	ul.category_button_mobile li a:link {
		color: black;
	}
	ul.category_button_mobile li a:visited {
		color: black; 
	}
	ul.category_button_mobile li:hover > a {
		transition: all 0.5s ease 0s;
		color: #ff9e44;
	}

	/**CATEGORY 1**/
	.category_option_1 {
		margin-left: 10%;
		width: 23%;
	}
	.category_option_2 {
		width: 23%;
	}
	.category_option_3 {
		width: 23%;
	}
	/**CONTACT**/
	#contact_header_frame {
		position: relative;
		width: 100%;
		
		margin-bottom: 15%;
		text-align: center;
	}
	.contact_frame {
		
		display: block;

	}
	#new_project_contact_form {
		width: 100%;
		left: 0%;
	}

	.menu_button{
		right: 3.5%;
	}

	.main_frame {
		display: none;
	}



}







/**MOBILE**/
@media only screen and (max-width:800px) {
	/**HOME PAGE**/
	.logo {
		width: 40px;
		height: 40px;
		top: 7%;
		left: 3px;
	}
	.vendingpic_1_mobile {
	position: relative;
	border: 1px solid gray;
	width: 45%;
	height: 60%;
	margin-top: 15%;
	margin-left: 50%;
	transform: translateX(-50%);
	border: none;
	display: block;
	}
	.vendingpic_1_mobile img {
		width: 100%;
		height: 100%;
	}
	.vendingpic_2_mobile {
	position: relative;
	border: 1px solid gray;
	width: 45%;
	height: 60%;
	margin-top: 15%;
	margin-left: 50%;
	transform: translateX(-50%);
	border: none;
	display: block;
	}
	.vendingpic_2_mobile img {
		width: 100%;
		height: 100%;
	}
	.hashtag_vertical {
		display: none;
	}
	.home_frame {
		display: none;
	}
	.headline {
		font-size: 70px;
		line-height: 80px;
	}
	.home_headline {
		width: 100%;
	}
	.headline_text {
		margin-top: 20%;
	}
	.frame_headline {
		width: 100%;
		font-size: 30px;
	}
	.frame_info_1 {
		margin-top: 15%;
		width: 100%;
	}
	.frame_info_2 {
		width: 100%;
	}
	.frame_info_3 {
		width: 100%;
	}
	.frame_info_4 {
		width: 100%;
	}
	.header {
		margin-top: 55px;
		font-size: 20px;
	}
	.text {
		margin-top: 35px;
		font-size: 17px;
	}
	.down_frame_logo {
		margin-top: 20%;
		width: 170px;
		height: 170px;
	}
	.hashtag {
		font-size: 30px;
	}
	.down_frame_options {
		width: 100%;
		text-align: center;
		margin-left: 0;
	}
	ul.down_options li {
		display: none;
	}
	.down_frame_address {
		width: 100%;
		margin-left: 0;
		margin-top: 30px;
		text-align: center;
	}
	.down_frame_working_hours {
		width: 100%;
		margin-top: 30px;
		margin-left: 0%;
		text-align: center;
	}
	/**OPTIONS**/


	/**CATEGORY**/
	ul.category_button_mobile li {
		font-size: 30px;
	}

	/**CATEGORY 1**/
	.category_option_picture {
		width: 75%;
		height: 80%;
	}
	.category_description_text {
		text-align: center;
	}
	.category_option_1 {
		width: 50%;
		height: 65%;
		margin-top: 25%;
		margin-left: 25%;
	}
	.category_option_2 {
		width: 50%;
		height: 65%;
		margin-top: 15%;
		margin-left: 25%;
	}
	.category_option_3 {
		width: 50%;
		height: 65%;
		margin-top: 15%;
		margin-left: 25%;
	}
/**CONTACT**/
	#contact_header_frame {
		width: 100%;
		
		font-size: 30px;
	}
	.contact_frame {
		

	}

	.menu_button{
		right: 1.5%;
	}



}