/* ==========================================================================
   Base styles
   ========================================================================== */

html {color: #fff; font-size: 1em; line-height: 1.4; height: 100%; margin: 0;}

::-moz-selection {background: #b3d4fc; text-shadow: none;}
::selection {background: #b3d4fc; text-shadow: none;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
fieldset {border: 0; margin: 0; padding: 0;}
textarea {resize: vertical;}
a {text-decoration: none; color: #fff;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


/* Wrapper*/

body {background: #000; position: relative; height: 100%; min-height: 100%; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight: 300; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

#footer {background: #000; width: 100%; height: 30px; flex: 0 0 auto; font-size: 0.550em; text-transform: uppercase; letter-spacing: 1px; text-align: center; line-height: 30px; color: #989898;}

.footerinside {margin-bottom: 60px; padding-bottom: 60px;}

/*Navigation*/

#nav_wrap {float: right; position: relative; font-size: 0.750em; text-transform: uppercase; letter-spacing: 2px; height: 80px; margin-right: 5%; z-index: 20000;}
#nav_wrap ul {list-style:none; position:relative; float:left; margin:0; padding:0;  }
#nav_wrap ul li {position: relative; display: inline-block; padding: 0 1em; background: #000; line-height: 80px; text-align: center; cursor: pointer; float:left; }
#nav_wrap ul li.current-item {color:#FF0033;}
#nav_wrap ul li:hover {background:#556270; }
#nav_wrap ul ul {display:none; position:absolute; top:100%; left:0; background:#ffffff; padding:0; }
#nav_wrap ul ul li {float:none; width:160px; line-height: 50px; display: block; }
#nav_wrap ul ul a {line-height:100%; padding:0px 0px; }
#nav_wrap ul li:hover > ul {display:block;}

/* Header*/

#header {background: #000; width: 100%; height: 80px; flex: 0 0 auto; z-index: 9999;}

#logo {display: inline-block; left: 0; top: 0; width: 200px; height: 80px; background:url(../img/logo.svg); background-repeat: no-repeat; background-size: 200px 80px; text-indent: -9999px; margin-left: 5%; }
#main-menu {float: right; position: relative; font-size: 0.750em; text-transform: uppercase; letter-spacing: 2px; height: 80px; margin-right: 5%;}

.mm-parent-item {position: relative; display: inline-block; padding: 0 0.5em; background: #000; line-height: 80px; text-align: center; cursor: pointer; }
.hvr-underline-from-center {display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden;}
.hvr-underline-from-center:before {content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #00bcd4;
  height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {left: 0; right: 0; }


/* Banner */

.banner-split {background: #444; display:flex; flex-direction:row;}
.banner-split > div {width:100%; height: auto; min-height: 40vh; overflow: hidden; background-size: cover;}

.banner-split > div > a > span { width: 100%; height: 40vh; display: flex; display: -ms-flexbox; display: -webkit-flex; justify-content: center; flex-direction: column; text-align: center; font-size: 4.000em; align-items: center; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-self: center;}

.main-ban {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/home/one.jpg) no-repeat center center; }
.sub-ban {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/home/two.jpg) no-repeat center center; }
.main-ban-row2 {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/home/three.jpg) no-repeat center center; }
.sub-ban-row2 {background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/home/four.jpg) no-repeat center center; }





/* Contact */

#contact {background: #000; width: 100%; height: 80px; flex: 0 0 auto; letter-spacing: 0.8px; text-align: center; line-height: 50px; float: left;}

.cf-box {width: 25%; height: 100px; float: left; text-align: center;}
.cf-head {width: 100%;  line-height: 40px; font-weight: 500; margin: 0 auto; text-transform: uppercase; font-size: 0.750em;}
.cf-info {width: 80%; line-height: 12px; height: 40px; margin: 0 auto; color: #989898; font-size: 0.688em;}
.cf-short {display: none; line-height: 40px; font-weight: 500; margin: 0 auto; text-transform: uppercase; font-size: 0.750em;}
.cf-short a:hover {color: #FF0033;}



/* About */

.about-split {width: 100%; height: auto; min-height: 500px;}
.about-split .part-one {width: 50%; float: left;}
.about-split .part-two {width: 50%; float: left;}
.exim-logo-holder {width: 100%;}
.exim-logo {width: 220px; height: 200px; background:url(../img/about/exim_logo.svg); background-repeat: no-repeat; background-size: 220px 200px; text-indent: -9999px; margin-left: 5%; margin: 5% auto;}
.oldcicak-logo {width: 300px; height: 150px; background:url(../img/about/cicaklogo_old.jpg); background-repeat: no-repeat; background-size: 300px 150px; text-indent: -9999px; margin-left: 5%; margin: 5% auto;}
.about-info {width: 100%; height: auto; margin-top: 10%;}
.about-info .about-part {width: 100%; height: auto; padding: 15px 0;}
.about-info .about-part .about-title {width: 100%; text-align: center; font-size: 1.200em; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; line-height: 2.3em;}
.about-info .about-part .about-desc {width: 100%; text-align: center; font-size: 0.850em; font-weight: 500; line-height: 1.5em; color: #a6a6a6;}


/* Products */

#item-holder {max-width: 100%; width:100%; height: 100%; margin: 0 auto; overflow: auto;}
.fullpage {background: #000; width: 100%; height: auto; text-align: center; margin: 0 auto; }
.productpage-header {text-align: center; font-size: 2.000em; text-transform: uppercase; font-weight: 700; letter-spacing: 5px; padding: 20px 0;}


/* ---- input ---- */
input[type="text"] {font-size: 20px; color: #555;}

/* ---- button ---- */
.button {display: inline-block; padding: 10px; margin-bottom: 5px; border: none; color: #fff; font-size: 14px; line-height: 16px; cursor: pointer; background: #000; text-transform: uppercase; font-weight: 500; }
.button:hover {background: #00bcd4; color: #fff; }
.button.is-checked {color: #fff; background: #FF0033; }

/* ---- button-group ---- */
.button-group:after {content: ''; display: block; clear: both;}
.button-group .button {float: left; border-radius: 0; margin: 0; }
.filter-button-group{width: 100%; margin: 0 auto; text-align: center; background: #000;}

/* ---- isotope ---- */
.grid {padding: 0px; padding-top: 0px; overflow:hidden;}
.grid:after {content: ''; display: block; clear: both; }

/* ---- .element-item ---- */
.element-item {position: relative; float: left; width: 19%; height: auto; margin: 0.5%; color: #888; }
.element-item > * {margin: 0; padding: 0;}
.element-item .pic a > img  {width: 100%; height: 100%; left: 0px; top: 0px;}
.element-item .name {text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: normal; line-height: 15px; padding: 5px 0;}

::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); } 
::-webkit-scrollbar-thumb {background: rgba(51,51,51,1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); }
::-webkit-scrollbar-thumb:window-inactive {background: rgba(51,51,51,0.8); }


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media all and (max-width:60em) {
  /* Products */
  .element-item {width: 32%;}
}

@media all and (max-width:48em) {
  /* Wrapper*/
  #footer {font-size: 0.50em;}
  .footerinside {margin-bottom: 50px; padding-bottom: 50px;}

  /* Banner */
  .banner-split { flex-direction: column; }
  .banner-split > div { display:flex; min-height: 20vh; }
  .banner-split > div > a > span {height: 20vh; font-size: 2.500em;}

  /* Header*/
  #header {height: 50px;}
  #logo { width: 50px; margin: 0; background:url(../img/logo_small.svg); background-repeat: no-repeat; background-size: 50px 50px;}
  #nav_wrap {font-size: 0.650em; height: 50px; letter-spacing: 1px; margin-right: 25%; }
  #nav_wrap ul li {padding: 0 0.75em; height: 50px; line-height: 50px; }
  #main-menu {height: 50px;}

  /* Contact */
  #contact {height: 40px;}
  .cf-long {display: none;}
  .cf-short {display: block; text-align: center; }

  /* About */
  .about-split .part-one, .about-split .part-two {width: 100%;}
  .exim-logo {margin: 2% auto 0 auto;}
  .about-info {height: auto; margin: 0 auto 10% auto;}
  .about-info .about-part {padding: 10px 0;}
  .contact-page-none {display: none;}
  .about-info .about-part .about-desc {width: 90%; font-size: 0.750em; margin: 0 auto;}

  /* Products */
  .element-item {width: 49%;}
  .productpage-header {font-size: 1.650em; letter-spacing: 3px; padding: 10px 0;}

  /* ---- button ---- */
  .button {padding: 5px 10px; font-size: 10px; line-height: 16px; margin-bottom: 2px;}


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Products */
  .element-item {width: 49%;}
}