/* Colaborate font family */

@font-face{
font-family:"cb";
src:url(fonts/Colaborate/ColabBol.otf);
}

@font-face{
font-family:"cl";
src:url(fonts/Colaborate/ColabLig.otf);
}

@font-face{
font-family:"cm";
src:url(fonts/Colaborate/ColabMed.otf);
}

@font-face{
font-family:"cr";
src:url(fonts/Colaborate/ColabReg.otf);
}

@font-face{
font-family:"ct";
src:url(fonts/Colaborate/ColabThi.otf);
}

/* Bebas font family */

@font-face{
font-family:"bn";
src:url(fonts/Bebas_Neue/BebasNeue.otf);
}

a{
text-decoration:none;
}

.info_top, .info_bottom, .title, #menu, .slider_nav, #services_title, #footer_title, .company_name, #c_cn, .sc, .h_box, .menu_position_on, .menu_copy, .gal_sub{
font-family:"bn", "Tahoam", "Verdana", Sans-serif;
color:#fff;
}

#section_title, #section_open, p, #cn, #cp, #fq, #link_dark, .t_box{
font-family:"ct", "Tahoam", "Verdana", Sans-serif;
color:#414141;
}

a, #link{
font-family:"cr", "Tahoam", "Verdana", Sans-serif;
}

#link{
color:#fff;
}


#footer_contact, #link{
font-family:"cr", "Tahoam", "Verdana", Sans-serif;
}

#section_back_grey, #section_back_white{
background-color:#ededee;
width:100%;
padding:50px 0px 60px 0px;
}

#section_back_white{
background-color:#fff;
}

#services{
float:left;
max-width:420px;
margin:60px 0px 0px 20px;
}

#services_aside{
float:left;
max-width:100px;
margin-right:10px;
}

#services_title{
color:rgb(219, 186, 0);
font-size:25px;
margin-bottom:15px;
}

#services_content_article{
float:right;
max-width:310px;
}

#services_content{
text-align:justify;
}

#building{
width:100px;
height:100px;
background-image:url(../toolbars/building.jpg);
background-position:center center;
background-repeat:no-repeat;
}

#carpentry{
width:100px;
height:100px;
background-image:url(../toolbars/carpentry.jpg);
background-position:center center;
background-repeat:no-repeat;
}

#electrical{
width:100px;
height:100px;
background-image:url(../toolbars/electrical.jpg);
background-position:center center;
background-repeat:no-repeat;
}

#maintenance{
width:100px;
height:100px;
background-image:url(../toolbars/maintenance.jpg);
background-position:center center;
background-repeat:no-repeat;
}

#plumbing{
width:100px;
height:100px;
background-image:url(../toolbars/plumbing.jpg);
background-position:center center;
background-repeat:no-repeat;
}

#project{
width:100px;
height:100px;
background-image:url(../toolbars/project.jpg);
background-position:center center;
background-repeat:no-repeat;
}


#section_title{
margin:auto;
width:500px;
color:rgb(219, 186, 0);
font-size:35px;
text-align:center;
border-bottom: 1px solid rgb(219, 186, 0);
padding:0px 0px 10px 0px;
margin-bottom:10px;
}

#section_open{
margin:auto;
width:500px;
font-size:25px;
text-align:center;
line-height:30px;
}

.title{
font-size:25px;
color:rgb(219, 186, 0);
}

.start{
margin:auto;
width:900px;
}

header#top{
width:100%;
height:150px;
background-image:url(../toolbars/top.png);
background-position:top left;
background-repeat:no-repeat;
background-color:#000;
}

.logo{
width:120px;
height:150px;
float:left;
margin:5px;
background-image:url(../toolbars/logo.png);
background-position:top left;
background-repeat:no-repeat;
margin:0px 0px 0px 10px;
cursor:pointer;
}

.company_name{
float:left;
font-size:30px;
margin:60px 0px 0px 0px;
color:rgb(219, 186, 0);
}

nav#menu{
font-size:20px;
float:right;
color:#fff;
margin:0px 20px 0px 0px;
}

li{
float:left;
margin:0px 0px 0px 15px;
}

.menu_position, .menu_position:hover, .menu_position_on{
cursor:pointer;
line-height:23px;
border-bottom:4px solid rgb(0, 0, 0);
}

.menu_position:hover, .menu_position_on{
color:rgb(219, 186, 0);
border-bottom:4px solid rgb(219, 186, 0);
}

.info_box{
float:right;
background-image:url(../toolbars/phone.png);
background-position:center left;
background-repeat:no-repeat;
padding:0px 0px 0px 35px;
margin:10px 0px 65px 0px;
}

.info_bottom, .info_top{
font-size:20px;
}

.info_bottom{
color:rgb(219, 186, 0);
}

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

.slider{
width:900px;
height:310px;
background-color:#e1e1e1;
background-image:url(../toolbars/slideshow.jpg);
background-position:center center;
background-repeat:no-repeat;
}

.slider_nav{
width:100%;
height:35px;
background-color:#000;
font-size:15px;
text-indent:20px;
line-height:37px;
}

.slidshow_nav{
float:right;
margin:11px 0px 0px 0px;
}

.point_off, .point_on{
float:left;
width:10px;
height:10px;
background-color:#fff;
border:1px solid rgb(219, 186, 0);
margin:0px 0px 0px 5px;
cursor:pointer;
}

.point_on{
float:left;
width:10px;
height:10px;
background-color:rgb(219, 186, 0);
border:1px solid #fff;
}

footer{
clear:both;
margin:auto;
width:100%;
min-height:100px;
background-color:#000;
background-image:url(../toolbars/footer.png);
background-position:top left;
background-repeat:no-repeat;
}

#footer_article, #footer_article_with_line{
float:left;
width:200px;
margin:10px 0px 0px 20px;
}

#footer_article_with_line{
border-left:1px solid #fff;
min-height:80px;
padding-left:10px;
}

#footer_title{
width:200px;
color:rgb(219, 186, 0);
font-size:20px;
}

#footer_contact{
margin:20px 0px 0px 0px;
font-size:15px;
color:#fff;
line-height:20px;
}

#facebook, #twitter, #instagram{
float:left;
width:22px;
height:22px;
margin:20px 20px 0px 0px;
background-image:url(../toolbars/facebook.png);
background-position:center center;
background-repeat:no-repeat;
cursor:pointer;
}

#twitter{
background-image:url(../toolbars/twitter.png);
}

#instagram{
background-image:url(../toolbars/instagram.png);
}

#form{
margin:auto;
width:500px;
margin-top:60px;
}

#cn, #cp, #fq{
border:1px solid rgb(219, 186, 0);
width:488px;
height:30px;
padding:5px;
font-size:20px;
margin-bottom:30px;
}


#fq{
height:250px;
}

#sb{
float:right;
}

#cb{
foat:left;
}

#contact_details{
float:left;
width:250px;
text-align:left;
}

#map{
float:right;
}

#c_cn{
color: rgb(219, 186, 0);
}

#c_ad{
font-size:20px;
line-height:25px;
margin:0px 0px 15px 0px;
}

.f_box{
clear:both;
width:100%;
padding:0px 0px 60px 0px;
}

.o_box{
float:left;
width:200px;
margin:60px 0px 0px 20px;
}

.i_box{
width:200px;
height:115px;
background-color:#eee;
background-repeat:no-repeat;
background-position:center center;
}

.t_box{
border-top:1px solid rgb(219, 186, 0);
border-bottom:1px solid rgb(219, 186, 0);
min-height:110px;
font-size:16px;
line-height:22px;
text-align:center;
padding:5px 0px 5px 0px;
margin:0px 0px 05px 0px;
}

.s_box{
text-align:center;
}

.sc{
margin:auto;
width:60px;
height:18px;
background-image:url(../toolbars/button.png);
background-position:center center;
background-repeat:no-repeat;
padding:3px 0px 0px 0px;
color: rgb(219, 186, 0);
text-align:center;
}

.h_box{
clear:both;
color:rgb(219, 186, 0);
font-size:30px;
text-align:center;
width:100%;
padding:60px 0px 0px 0px;
}

.menu_copy{
width:100%;
text-align:center;
padding:60px 0px 60px 0px;
color:#000;
}

.menu_position_copy{
color:rgb(0, 0, 0);
}

.gal_sub, .gal_sub:hover{
color:rgb(219, 186, 0);
font-size:20px;
padding:10px 0px 10px 0px;
border-bottom:1px solid rgb(219, 186, 0);
cursor:pointer;
}

.gal_sub:hover{
color:#b3b3b3;
}

.left_side{
float:left;
width:200px;
margin:60px 0px 0px 20px;
}

.right_side{
float:right;
width:640px;
min-height:300px;
margin:60px 20px 0px 0px;
/*background-color:#e1e1e1;*/
}

.big_image{
width:100%;
height:auto;
}

.gal_ico{
float:left;
width:116px;
height:116px;
background-color:#cdcdcd;
margin:0px 0px 10px 0px;
overflow:hidden;
cursor:pointer;
border:2px solid #fff;
background-position:center center;
background-repeat:no-repeat;
}

.gal_p{
float:left;
width:10px;
height:100px;
margin:0px 0px 10px 0px;
}

#big{
display:none;
position:fixed;
width:600px;
height:600px;
top:50%;
left:50%;
background-image:url(../toolbars/loading.gif);
background-repeat: no-repeat;
background-position:center center;
margin-top:-300px;
margin-left:-300px;
background-color:#fff;
border:1px solid rgb(219, 186, 0);
overflow:hidden;
}

#foto_gal, #foto_show{
width:600px;
height:600px;
background-repeat: no-repeat;
background-position:center center;
background-color:transparent;
overflow:hidden;
}

#back{
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
-moz-opacity: 0.30;
-khtml-opacity: 0.30;
opacity: 0.30;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
filter:alpha(opacity=30);
}

#close_butt{
background-color:rgb(219, 186, 0);
color:#fff;
padding:15px;
float:right;
cursor:pointer;
}

.nav_bar{
width:100%;
height:50px;
margin-top:47%;
}

#nav_left, #nav_right{
float:left;
cursor:pointer;
background-color:rgb(219, 186, 0);
color:#fff;
padding:20px;
}

#nav_right{
float:right;
}


#slider {
  position: relative;
  overflow: hidden;
  margin:auto;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 900px;
  height: 310px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
display:none;
  border-radius: 0 2px 2px 0;
  opacity: 0.1;
}

a.control_next {
display:none;
  right: 0;
  border-radius: 2px 0 0 2px;
  opacity: 0.1;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

.slide_show{
width:900px;
height:310px;
background-position:center center;
background-repeat: no-repeat;
}