@charset "utf-8";

body {font-family: "Roboto", sans-serif}

header {
  background:url("../kepek/4873736040_c86ee36c92_cust_2200x100.jpg") no-repeat;
	box-shadow: 0 5px 5px -5px #333;
}

/*
a:link, a:visited {
  text-decoration: none;
}

a:hover, a:active {
  text-decoration: underline;
}
*/

/* Custom styles for Blueimp Gallery */
/* !!! Must be placed after the standard Blueimp Gallery styles !!! */
.blueimp-gallery {
  background: rgba(0, 0, 0, 1);
}

.blueimp-gallery > .close {
 	font-size: 35px;
  line-height: 20px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
}

.blueimp-gallery > .close:hover {
  background: #cc0000;
}

.blueimp-gallery > .description,
.blueimp-gallery > .counter {
  position: absolute;
  left: 15px;
  color: #fff;
  font-size: 15px;
  color: #fff;
  opacity: 0.8;
  display: none;
}

.blueimp-gallery > .counter {top: 3px;}
.blueimp-gallery > .title {top: 40px;}
.blueimp-gallery > .description {top: 60px;}

.blueimp-gallery-controls > .description,
.blueimp-gallery-controls > .counter {
  display: block;
}

#logo {display:flex;justify-content:center;align-items:center;}

header, #logo {
	height:100px;
}

#mySideNav {
	background-color: #666666;
	height: 100vh;
}

#dynamicPageContent {padding-top:110px;}

.chapter {margin-bottom:48px;}

.brand_name {color:#336600;}

.illustration {border:4px solid #697959; border-radius:5px; background-color:#697959; text-align:center;}
.illustration img {border-radius:5px;}

.center {float: none; margin: 0 auto;}
.left {float: left; margin: 0 20px 20px 0;}
.right {float: right; margin: 0 0 20px 20px;}

.justify {text-align:justify; text-justify:inter-word;}

.width_10percent {width:10%;}
.width_20percent {width:20%;}
.width_30percent {width:30%;}
.width_40percent {width:40%;}
.width_50percent {width:50%;}
.width_60percent {width:60%;}
.width_70percent {width:70%;}
.width_80percent {width:80%;}
.width_90percent {width:90%;}

.width_10percent,
.width_20percent,
.width_30percent,
.width_40percent,
.width_50percent,
.width_60percent,
.width_70percent,
.width_80percent,
.width_90percent {height:auto;}

.width_10percent img,
.width_20percent img,
.width_30percent img,
.width_40percent img,
.width_50percent img,
.width_60percent img,
.width_70percent img,
.width_80percent img,
.width_90percent img {width:100%; height:auto;}

.setAspectRatio {
	width: 100%;
	padding-bottom: 75%; /* aspect ratio 4:3 */
	position: relative;
}

.setAspectRatio > img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.w3-teal strong {color:#ffff00!important}

.w3-row p {margin:0 0 1% 0}

.box_wrap {
	overflow: hidden;
	margin: 10px;
}

.box_width_20 {width: 20%;}
.box_width_25 {width: 25%;}

.box_height_15 {padding-bottom: 15%;}
.box_height_20 {padding-bottom: 20%;}

.box {
	float: left;
	width: 20%;
	padding-bottom: 15%;
	margin:10px;
}

.overlay_container {
display: block;
}

.box, .overlay_container {
  position: relative;
}

.boxInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 85%;
	overflow: hidden;
	background: black;
}

.boxInner img, .overlay_container img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.boxInner .overlay, a.overlay_container .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.2);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.box_wrap a:hover .overlay, a.overlay_container:hover .overlay {
  height: 100%;
}

.boxCaption {
  text-align: center;
	position: absolute;
	top: 85%;
	left: 0;
	width: 100%;
	height: 15%;
	padding: 2% 0 0;
}

.box_wrap a:hover .boxCaption {
	background-color:#666;
	color:#fff;
}

.slideShowMainContainer {position: relative;}

div.slideShowImgContainer img {
  position: absolute;
  top: 0;
  left: 0;
	transition: opacity 1s linear;
  opacity: 0;
  z-index: -1;
}

div.slideShowImgContainer img,
div.w3-third div.w3-card-4.w3-display-container a img,
div.w3-twothird div.w3-card-4.w3-display-container a img,
div.w3-row-padding div.w3-card-4.w3-display-container a img,
div.w3-half a img {
	width:100%;
}

div.slideShowImgContainer img.slideCurrent, div.slideShowImgContainer.slideCurrent img {
  opacity: 1;
  z-index: 1;
}

div.slideShowImgContainer img.slidePrevious {
  opacity: 0;
  z-index: 2;
}

div.w3-display-topleft.open_gallery {
	padding:4px 0 0 5px;
	z-index: 10;
}


div.w3-display-topleft.open_gallery span {
	margin: 0 0 12px 0;
	font: 18px/1.5 Helvetica,Arial,sans-serif;
	background: rgba(0,0,0,0.7);
	float:right;
	border: 2px solid #eee;
	height: 30px;
	width: 30px;
	overflow: hidden;
	display: block;     
	transition: All 0.5s ease;
}

div.w3-display-topleft.open_gallery span:hover {
	width: 325px;
}

div.w3-display-topleft.open_gallery span i.material-icons {
	font-size: 24px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}	

h1.w3-teal.w3-section {padding:0 16px}

.kepalairas {text-decoration:none}

.imageList {display:none}

@media only screen and (max-width : 480px) {
	/* Smartphone view: 1 tile */
	.box {
		width: 100%;
		padding-bottom: 100%;
	}
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
	/* Tablet view: 2 tiles */
	.box {
		width: 50%;
		padding-bottom: 50%;
	}
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
	/* Small desktop / ipad view: 3 tiles */
	.box {
		width: 33.3%;
		padding-bottom: 33.3%;
	}
}

@media only screen and (max-width : 1290px) and (min-width : 1051px) {
	/* Medium desktop: 4 tiles */
	.box {
		width: 25%;
		padding-bottom: 25%;
	}
}

/***************************************************************************/
/*Flex items*/
/*
Forrás:
An equal height grid using Flexbox, by Charlotte Jackson, 15th April 2015
https://clearleft.com/posts/an-equal-height-grid-using-flexbox
Example on CodePen:
https://codepen.io/lottejackson/pen/PwvjPj
*/

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
	display: flex; 
	width: 100%;
}

.flex_cards ul li {
	margin:0;
	padding:0;
}

ul.feature_list li {
	border:0;
}

.list-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.list-content p {
	flex: 1 0 auto;
}

@media all and (min-width: 601px) {
  .list-item {
    width: 33.33333%;
  }
}
@media all and (min-width: 993px) {
  .list-item {
    width: 33.33333%;
  }
}
/***************************************************************************/