@charset "utf-8";
/* CSS Document */

body{ background:#f2f2f2; font-family:Arial, Helvetica, sans-serif; font-size:62.5%; color:#666666; }
.page-wrap{ font-size:1.2rem; }

/* Head Section */
header{ background:#323232; height:50px; font-size:1.3rem; }
.container{ max-width:1000px; }

/* Header Section */
.logo{ margin:8px 0; }
nav a{ color:#999999; line-height:20px; padding:15px 10px; display:block; }
nav a:hover, nav a:active{ color:#fff; text-decoration:none; background:#000; }

/* Content Section */
section.tab-section{ font-size:1.2rem; margin:15px 0; }
section.tab-section .nav-tabs{ border-bottom:1px solid #fa6900; }
section.tab-section .nav-tabs > li{ margin-bottom:0; }
section.tab-section .nav-tabs > li > a{ background:#e3e3e3; border:none; color:#666666; }
section.tab-section .nav-tabs > li > a:hover, section.tab-section .nav-tabs > li > a:focus{ background:#dddddd; color:#000; }
section.tab-section .nav-tabs > li.active > a, section.tab-section .nav-tabs > li.active > a:hover, section.tab-section .nav-tabs > li.active > a:focus{ background:#fa6900; border:none; color:#fff; }

/* Portfolio Section */
.element{ background:#fff; width:220px; height:210px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; margin:0 22px 22px 0; box-shadow:1px 1px 1px rgba(0,0,0,0.2); float:left; }
.element-padd{ padding:10px; }
/*#portfolio .element:nth-child(4n){ margin:0 0 30px 0; }*/
.element-detail .pro-name{ height:30px; width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:3rem; }
.pro-bar-bg{ height:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; background:#f2f2f2; width:100%; margin-bottom:5px; }
.pro-bar{ height:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; background:#fa6900; width:85%; }
.modal-body{ padding:0; }

/* Portfolio */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}


/* Footer Section */
/* Sticky Footer */
html, body { height: 100%; }
.page-wrap { min-height: 100%; margin-bottom: -45px; }
.page-wrap:after { content: ""; display: block; }
.page-wrap:after { height: 45px; }

footer{ background:#fff; border-top:1px solid #dddddd; color:#666666; font-size:1.2rem; }
.copyright{ line-height:20px; padding:12px 0; }

@media (max-width: 480px){
.glyphicon{ display:none; }
.element{ width:130px; height:102px; margin:0 15px 15px 0; }
.element img{ width:110px; height:auto; }
.element-detail{ display:none; }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {  }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {  }
@media (min-width: @screen-lg-min) {  }