body, html {
  height: 100%;
}

.wrapper{position:relative; display:inline-block; float:left; width:100%; height:auto;  margin:0 0 0 0; padding:0 0 0 0; background-color:transparent; color:#000; font-family: 'Vollkorn', serif; text-align:center;}
.logo_new_1{position:absolute; top:15px; left:50%; margin-left:-30px;}



#quote{position:relative; display:inline-block; clear:both; margin:0 auto 0 auto; width:auto; height:auto; color:#474747;
	  font-size:20px; letter-spacing:6px; line-height:32px; color:#fff; border:none; font-family: 'Montserat'}
.under-quote{position:relative; display:inline-block; clear:both; margin:0px auto 0 auto; height:auto; 
			 font-size:16px; color:#797979; line-height:27px; }
.rights-bottom-white{z-index:33; position:absolute; bottom:20px; left:20px; color:#909090; font-size:10px; letter-spacing:1px;}
.bottom-menu{position:absolute; bottom:40px; left:50%; width:900px; margin-left:-450px; border:0px solid #fff;}
.bottom-menu-item{position:relative; display:inline-block; font-family: Montseratl; font-weight:bold; font-size:14px; color:rgba(255,255,255,0.4);letter-spacing:3px; text-decoration:none;}
.bottom-menu-item:hover{color:#fff;}
.stars-white-circle{position:relative; display:inline-block; margin:10% auto 0 auto; width:40px; height:40px; border-radius:500px; background:#fff;}
.stars-white-circle:hover{background:#00d6ab;}

	
/** INDEX **/
#main_title{position:relative; display:inline-block; color:#fff; font-family: 'Montserat'; letter-spacing:2px; z-index:33; border:0px solid #fff;}
.main_title{margin-bottom:0px; font-family: 'Montserat'}	
.ideal-i-create{color:#1ac996; text-shadow:0px 0px 0px rgba(255,255,255,0.0); letter-spacing:0px;}
#main_button_container{position:relative; display:block;}
#main_button{position:relative; height:40px; padding-top:10px; font-size:18px; color:#7a7a7a; background-color:transparent; font-weight:normal; letter-spacing:2px; float:left; margin-left:5%;width:auto; font-family: Montseratl;}
	#main_button:hover{color:#1d1d1d; cursor:pointer;}
.explore-plus{font-size:24px; font-weight:bold; color:#1d1d1d;}
.topp-button{}
.main_untertitle{z-index:33; position:relative; display:block; color:#cecece; letter-spacing:1px; font-weight:normal;}
.down-arrow-black{position:absolute; bottom:50px; left:50%; margin-left:-10px;}
.down-arrow-black:hover{opacity:0.2;}
#main_button2{position:relative; float:left; width:200px;border:1px solid #efefef; height:30px; color:#b7b7b7; margin-left:30px; padding-top:15px; padding-left:13px; padding-right:13px; letter-spacing:1px; font-size:14px;}
#main_button2:hover{color:#1d1d1d; border-color:#00d6ab}
.woman{position:absolute; right:0px; bottom:0px; width:30%;}
.one-side-image{position:absolute; z-index:5000; top:0px; right:0px; width:35%; height:100%; background:url(../pictures/roses2.jpg); background-size:cover;}
.one-side-image-button{position:absolute; bottom:15%; left:50%; margin-left:-120px; width:240px; padding-top:15px; height:32px; border:2px solid #fff; color:#fff; font-size:18px; letter-spacing:2px;}
.one-side-image-button:hover{background:#00d6ab; border-color:#00d6ab; color:#fff;}

.gradientoo{z-index:150 !important; opacity:0.2;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a58c+0,00d6ab+100 */
background: #00a58c; /* Old browsers */
background: -moz-linear-gradient(-45deg, #00a58c 0%, #00d6ab 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #00a58c 0%,#00d6ab 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #00a58c 0%,#00d6ab 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a58c', endColorstr='#00d6ab',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}


#design_text_holder{height:auto; height:auto; border:0px solid #000;}
#design_text_title{position:relative; display:inline-block; font-family: 'Montserat'; color:#1c1c1c;}
.design_text_subtitle{position:relative; display:inline-block;   font-size:16px; color:#00d6ab; margin-top:2%;}
.design_text_text{position:relative; display:inline-block; font-size:16px; line-height:27px; color:#797979; clear:none; vertical-align:top;}
#backToTop{display:none; z-index:10000; position:fixed; bottom:20px; right:20px; width:40px; height:35px; padding-top:5px; text-align:center; border:2px solid transparent; border-radius:400px;}
#backToTop:hover{border:2px solid #d7d7d7; cursor:pointer;}
.dsgnt-holder{display:inline-block; float:left; margin-top:-20px; margin-bottom:100px; width:100%; height:auto;}

.portfo-spodi{display:inline-block; width:100px; height:8px; background-color:#00d6ab; margin:0px 0 40px 0;}
.portfo-spodi2{line-height:24px;}

#developement_text_holder{display:inline-block; min-height:340px; float:left; border:0px solid #fff;}
#dev_text_box_holder{display:inline-block; width:60%; height:auto; border:0px solid #fff;}
.first-contact{

}

.brand-block{display:inline-block; margin-top:80px; margin-bottom:0px; width:100px; height:8px; background:#f5f5f5;}
.brand-definition{font-family:didot; font-weight:bold; font-size:16px; letter-spacing:3px;}
.brand-underquote{float:left; margin-top:50px; font-style: italic; letter-spacing: 0px; color:#1d1d1d; font-size:28px; line-height:36px; width:100%; }

.dev_text_box_break{display:inline-block; width:100px; height:8px; background:#00d6ab; margin-right:20px; margin-top:20px;}
#developement_more_buttom{display:inline-block; margin-top:38px; width:150px; height:26px; padding-top:10px; font-size:16px; text-align:center; border-radius:0px; letter-spacing:1px;}
.dmb_color{background:#fff; color:#000; border:2px solid #00d6ab;}
.dmb_color2{background:transparent; color:#fff; border:2px solid #00d6ab}
.dmb_color:hover, .dmb_color2:hover{color:#000; background:#00d6ab;}
#dev_code_image{display:inline-block; background:url(../pictures/developement2.png); background-size:100% 100%;}
.web_tri_holder{position:relative; display:inline-block; float:left; min-height:450px; text-align:center;}
.web_tri_image{position:relative; display:block; margin:40px auto 0px auto;}
.web_tri_title{display:block; margin:20px auto 30px auto; font-family: 'Montserat'; color:#fff; font-size:30px; letter-spacing:2px;}
.web_tri_text{display:block; margin:30px auto 30px auto; width:60%; color:#00a76a; line-height:22px;}
.web_tri_button{display:block; margin:20px auto 40px auto; width:150px; height:32px; padding-top:15px; border:1px solid #fff; color:#fff;   letter-spacing:1px;}
.web_tri_button:hover{background:#fff; color:#000;}
.first-contact{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#424242+0,000000+100 */
background: #424242; /* Old browsers */
background: -moz-linear-gradient(45deg,  #424242 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#424242), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #424242 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #424242 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #424242 0%,#000000 100%); /* IE10+ */
background: linear-gradient(45deg,  #424242 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.bottom-title{display:inline-block; margin-top:100px; font-family:'Montserat'; font-size:60px; color:#fff; letter-spacing:4px;}
.bottom-brake{display:inline-block; width:100px; height:8px; background-color:#00d6ab; margin:50px 0 40px 0;}

.mnenja-holder{position:relative; display:inline-block; margin:50px auto 50px auto; width:70%; border:0px solid #fff;}
.mnenje-mnenje{position:relative; display:inline-block; float:left; vertical-align:top; text-align:center;}
.mnenje-text{font-size:18px; line-height:25px; font-style:italic; color:#636363;}
.mnenje-person{margin-top:12px; font-size:14px; color:#fff;   font-style:normal;}


/* LATER ADDED */
.greet{position:relative; display:inline-block; margin-bottom:30px; color:#fff; font-family:didot;}
.load-1{opacity:0; line-height:0px; letter-spacing:2px; color:#6c6c6c;}
.load-2{opacity:0; margin-top:30px; line-height:0px; letter-spacing:2px;}
.load-3{opacity:0; margin-top:14px; line-height:0px;   color:#ebebeb;}
.green-dot{opacity:0; margin-top:2%; width:10px; height:10px; background:#34b992; border-radius:400px;}
.lauda{z-index:9000; position:fixed; top:0px; bottom:0px; left:0px; right:0px; background:#1b1b1b; text-align:center;}

.squares-holder{position:relative; margin:auto; background:#fff; width:100%;}
.squares-square{position:relative; float:left; width:42%; padding:4%; background:#00d6ab; text-align: left;}
.squares-top-text{position:relative; font-size:12px; letter-spacing: 4px; font-family: montseratl; color:#fff;}
.squares-title{position:relative; margin-top:70px; font-size:42px; line-height:50px; letter-spacing: 1px; font-family: Montserat; color:#fff;}
.squares-text{position:relative; margin-top:50px; font-size:16px; letter-spacing: 0px; line-height:26px; color:#fff; font-family: Crimson;}



.naslovnica{z-index:10; position:fixed; top:0px; left:0px; right:0px; bottom:0px;}
.naslovnica, .podnaslovnica{
background: rgb(0,132,92); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(0,132,92,1) 0%, rgba(29,231,181,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(0,132,92,1) 0%,rgba(29,231,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(0,132,92,1) 0%,rgba(29,231,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00845c', endColorstr='#1de7b5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.naslovnica-kvadrat{position:absolute; width:460px; left:50%; margin-left:-265px;}
.podpis2{position:absolute; bottom:-80px; right:-150px;}


.logo_n8{position:absolute; left:50%; top:0px; margin-left:-50px;}


.portfolio-chapter{padding-bottom:50px; padding-top:50px; border-top:0px solid #d0d0d0;}
.web-chapter-text{color:#797979; font-size:18px; line-height:27px; margin-top:70px;}

.index-contact-holder{position:relative; display:inline-block; margin:0px auto 0px auto; padding:100px 0 0 0; height:auto; border:0px solid #fff;}
.index-contact-input{display:inline-block; margin-top:10px; height:40px; width:100%; color:#fff; text-indent:10px; background:#0e0e0e; outline:none; border:1px solid #2d2d2d;}
.error-display{display:inline-block; margin-top:20px; min-height:20px; width:100%; color:#12bf92;}
.contact-submit{display:inline-block; margin-top:10px; width:200px; height:40px; outline:none; border:1px solid #12bf92; color:#fff; background:transparent;}
.contact-submit:hover{background:#12bf92; cursor:pointer;}
.contact-brand{display:inline-block; margin-top:180px; font-family:didot; font-size:20px; color:#fff; letter-spacing:4px;}
.contact-email{display:inline-block; margin-top:10px; color:#636363; font-size:16px; letter-spacing:1px;}
.contact-rights{display:inline-block; margin-top:20px; color:#262626; font-size:14px;}


.side-menu-line{display:block; margin:35px auto 0 auto; width:80%; height:1px; background:#313131;}
.side-menu-x{position:absolute; top:10px; right:15px; color:#626262; font-size:20px;  }
.side-menu-x:hover{color:#fff; cursor:pointer;}

.podnaslovnica{z-index:5; position:fixed; top:0px; left:0px; right:0px; bottom:0px;}
.podnaslovnica-title{color:#fff; font-family: 'Montserat'; letter-spacing:3px; font-weight:bold;}
.podnaslovnica-button{display:inline-block; margin:40px auto 0 auto; width:270px; height:31px; padding-top:16px; color:#fff; border:2px solid #00d6ab; letter-spacing:0px;}
.podnaslovnica-button:hover{border-color:#fff;}
.michel-hold{display:inline-block; width:90%;}

.pen{position:absolute; z-index:55;}
.busscard{position:absolute; z-index:50; top:0%;}
.top-top-title{position:absolute; top:30px; right:30px; font-size:10px; font-weight:normal; color:#848484; letter-spacing:5px; font-family: Montseratl;}
.top-top-est{position:absolute; top:50px; right:150px; font-size:10px; color:#777777; letter-spacing:1px;}

.brand-square-down{position:absolute; top:46%; left:10%; width:80px; height:80px; border:1px solid #00d6ab;}
.brand-square-down-plus{position:absolute; top:23px; left:23px; width:34px; height:34px; font-size:30px; border:0px solid #000; color:#cecece;}
.brand-square-down:hover .brand-square-down-plus{ 
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(360deg);
	color:#1d1d1d;
	}
	
.menu-lines{z-index:20000; position:fixed; top:30px; left:30px; width:30px; height:28px; padding:15px; background:#1d1d1d; border:0px solid #000;}
.menu-line{position:relative; margin-top:5px; width:100%; height:4px; background:#fff;}

.menu-lines:hover .menu-line{background:#00d6ab;}
.menu-lines:hover{cursor:pointer;}

#dev-text-quote{position:absolute; padding-left:5%; top:0px; left:0px; bottom:0px; width:13%; background:#303030; text-align:left;}

.who-title{display:inline-block; float:left; color:#6e6e6e; font-size:36px; letter-spacing:2px; font-family: Montserat;}
.who-subtitle{display:inline-block; margin-top:15px; margin-bottom:70px; float:left; clear:both; color:#969696; font-size:16px; letter-spacing:0px;}
.who-what{display:inline-block; font-family: Montserat; text-align:left; font-size:20px; float:left; height:auto; color:#525252; border:0px solid #000;}
.por-tit{}

.squaress{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,ffffff+100 */
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f7f7f7 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
.whatwedo{position:absolute; top:10%; left:120px; width:300px; height:400px; border:1px solid #ebebeb; overflow:hidden;}
.whatwedoitem{position:relative; float:left; clear: both; margin-top:20px; margin-left:20px; font-family: Montserat; font-size:28px; color:#1d1d1d;}
.po-butto{margin-bottom: 15% !important;} 
.feature-div{position:relative; width:100%; float:left; background:url(../pictures/bonaefidei-polo-jacket.jpg); background-size:cover; min-height:700px;}bonaefidei-polo-jacket-responsive.jpg