@import "../font/fonts.css";

.bg-koyumavi { background: #03326c; }
.bg-mor { background: #7b0041; }
.bg-acikmavi { background: #009fe3; }
.bg-kirmizi { background: #cf132e; }
.bg-gri { background: #f0eeee; }
.bg-sari { background: #f4ca77; }
.bg-sari2 { background: #f2cd67; }
.bg-kahve { background: #553836; }
.bg-kahve2 { background: #79402e; }

.text-kahve { color: #553836; }

.mt-6 { margin-top: 4rem; }
.mt-7 { margin-top: 5rem; }
.mt-85 { margin-top: 8.5rem; }

.pb-8 { padding-bottom: 6rem; }
.pb-7 { padding-bottom: 5rem; }
.pb-6 { padding-bottom: 4rem; }


.oddie-logo {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='katman_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 62.8 103.1' style='enable-background:new 0 0 62.8 103.1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bclip-path:url(%23SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:%23E30613;%7D .st2%7Bclip-path:url(%23SVGID_2_);fill:%23FFFFFF;%7D%0A%3C/style%3E%3Crect class='st0' width='62.8' height='57.4'/%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1_' width='62.8' height='103.1'/%3E%3C/defs%3E%3CclipPath id='SVGID_2_'%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible;'/%3E%3C/clipPath%3E%3Cpath class='st1' d='M8,0H0v9C1.4,4.7,4.2,1.7,8,0'/%3E%3Cpath class='st1' d='M23.4,0c5.5,1.8,11.9,5.4,18,11.5c4.5,4.5,8.3,9.9,10.4,14.7c2.5,5.5,3.9,10.9,3.7,15.8 c-0.4,7.6-3.9,14.1-12,13.6c-6.4-0.4-14-4.6-19.7-10.8c-9.5-10.2-11.9-24.3-5.6-30.4c4.3-4.2,12.5-4.7,20.3,0.4 c3.6,2.3,6.5,6.7,7.3,10c0.5,2,0.2,4.7-2.4,4.5c-2.6-0.1-6-3.3-9.1-2.5c-4.6,1.3-4.5,8.2,0.8,13.3c8.7,8.2,19.4,6,19-4.3 C53.6,25.1,43,10.2,31.5,4.6C17-2.5,5.3,4.2,3.9,15.7C2,30.6,14.5,49.4,31.9,56.9c-8.4-2.7-16.2-8.2-22.2-15.1 C5.1,36.5,1.7,30.4,0,24.2v78.9h62.8V0H23.4z'/%3E%3Crect x='43.1' y='68.1' class='st2' width='1.8' height='27.3'/%3E%3Cpolygon class='st2' points='50.1,93.7 50.1,81.5 55.7,81.5 55.7,79.8 50.1,79.8 50.1,69.8 56.1,69.8 56.1,68.1 48.4,68.1 48.4,95.4 56.1,95.4 56.5,93.7 '/%3E%3Cpath class='st2' d='M11.1,67.7c-3.2,0-4.8,2.2-4.8,6.5V89c0,4.6,1.5,6.7,4.8,6.7c4.3,0,4.8-3.6,4.8-6.8V74.2 C15.9,69.8,14.3,67.7,11.1,67.7 M11.1,94c-2.2,0-3-1.5-3-5.2V74.4c0-4.5,1.6-5,3-5c2.2,0,3,1.4,3,5v14.7C14.1,92.7,13.3,94,11.1,94 '/%3E%3Cpath class='st2' d='M22.5,68.1h-3.7v27.3h3.3c3.6,0,6-1.3,6-7.8V75C28,70.1,26.4,68.1,22.5,68.1 M22.1,93.7h-1.6V69.8h2 c3.1,0,3.7,1.8,3.7,5.7v12.7C26.3,92.8,24.7,93.7,22.1,93.7'/%3E%3Cpath class='st2' d='M34.7,68.1H31v27.3h3.3c3.6,0,6-1.3,6-7.8V75C40.2,70.1,38.5,68.1,34.7,68.1 M34.3,93.7h-1.6V69.8h2 c3.1,0,3.7,1.8,3.7,5.7v12.7C38.4,92.8,36.8,93.7,34.3,93.7'/%3E%3C/g%3E%3C/svg%3E%0A");
	width: 3.875rem;
	height: 6.438rem;
	background-repeat: no-repeat;
	background-color: #e30613;
}

.navbar-brand {
  background-color: #e30613;
  padding-top: 3.25rem;
  position: absolute;
  top: 0;
  z-index:999;
}

#hazelnut a {
	background: #d5c9b9;
	color: #4c2c24;
	padding: 0.9rem 1.6rem;
	text-decoration: none;
	font-family: 'Nexa';
	font-size: 0.7rem;
	font-weight: bold;
	display: block;
}

#almond a {
	background: #4c2c24;
	color: #d5c9b9;
	padding: 0.9rem 1.6rem;
	text-decoration: none;
	font-family: 'Nexa';
	font-size: 0.7rem;
	font-weight: bold;
	display: block;
}




.hovereffect {
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative;
	text-align:center;
	cursor:default;
}

.hovereffect .overlay {
	position:absolute;
	overflow:hidden;
	top:80%;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out
}

 #hazelnut .hovereffect .overlay {
	right: 10%;
}

 #almond .hovereffect .overlay {
	left: 10%;
}

.hovereffect img {
	display:block;
	position:relative;
	-webkit-transition:all .5s linear;
	transition:all .5s linear;
}

.hovereffect:hover img {
	-ms-transform:scale(1.1);
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}

.hovereffect:hover .overlay {
	opacity:1;
	filter:alpha(opacity=100);
}

.baslik {
	background: url('../img/sweeties-back.jpg') no-repeat center center;
	font-size: 2.688rem;
	color: #553836;
    font-weight: normal;
    font-style: normal;
    padding: 6.08rem 0;
}

.tekli {
	background: rgb(2,0,36);
	background: linear-gradient(72deg, rgba(2,0,36,1) 0%, rgba(127,73,58,1) 0%, rgba(75,43,34,1) 100%);
}

.uclu {
	background: rgb(242,205,102);
	background: linear-gradient(72deg, rgba(242,205,102,1) 0%, rgba(247,226,154,1) 100%);
}

.tekli img {
    left: 15% !important;
    top: 37% !important;
    position: absolute;
}

.uclu img {
    right: 5% !important;
    top: -36% !important;
    position: absolute;
}

.tekli .siparis-ver, .tekli .siparis-ver:hover, .poset .siparis-ver, .poset .siparis-ver:hover, .siparis-ver, .siparis-ver:hover { color: #553836; }
.uclu .siparis-ver, .uclu .siparis-ver:hover, .karton .siparis-ver, .karton .siparis-ver:hover { color: #f4ca77; }

.siparis-ver {
	padding: 0.6rem 2rem 0.4rem 2rem;
	display: inline-block;
	font-family: 'Nexa';
	font-weight: bold;
	text-decoration: none;
	font-size: 0.8rem;
}

#karton500 {
	padding: 9rem 0 0 0;
	background: url('../img/sweeties-sari-back.jpg') no-repeat center top #fcf5e1;
}

.sosyalicon a {
	padding: 1.7rem 0 1.5rem 0;
	width: 100%;
	height: 100%;
	display: inline-block;
}


#footer {
	margin-top: 2rem;
	font-family: 'Verdana';
	font-size: 0.75rem;
}


#alt-header {

}

.hazelnut {
	background: #4c2c24;
    height: 6.438rem;
    line-height: 6.438rem;
    width: 100%;
}

.almond {
	background: #d5c9b9;
    height: 6.438rem;
    line-height: 6.438rem;
    width: 100%;
}

.caramel_chocolate {
	background: #aa6d57;
    height: 6.438rem;
    line-height: 6.438rem;
    width: 100%;
}


.hazelnut a {
    color: #d5c9b9;
    width: 100%;
    text-decoration: none;
}

.almond a {
    color: #4c2c24;
    width: 100%;
    text-decoration: none;
}

.caramel_chocolate a {
    color: #fff8ef;
    width: 100%;
    text-decoration: none;
}

.hazelnut a:hover {
    color: #d5c9b9;
}

.almond a:hover {
    color: #4c2c24;
}

.caramel_chocolate a:hover {
    color: #fff8ef;
}

#mobilogo{
	display:none;
}

#anasayfa-buyuk-ekran{
	display:block;
}

#anasayfa-kucuk-ekran{
	display:none;
}



#accordion {
  width: 100%;
  height: 450px;
  overflow: hidden;
  margin: 0px auto;
}

#accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

#accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 450px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 1000ms ease-in-out;
}

#accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

#accordion ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  /*filter: invert(100%);*/
  text-decoration: none;
  transition: all 300ms ease-in-out;
}

#accordion ul li div a * {
  opacity: 1;
  
  margin: 0 0 0 10px;
  width: 100%;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}
#accordion ul li div a h2 {
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 240px;
}
#accordion ul li div .title {
  text-overflow: clip;
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 210px;
  color:#ffffff;text-shadow: 1px 1px 2px #000;
  left:5%;
  position:absolute;
  opacity:1;
}
#accordion ul li div a p {
  top: 240px;
  font-size: 15px;
  padding-left: 0;
  text-align:center;
}

#accordion ul li:nth-child(1) { 
  background-image: url("../img/sld1.jpg"); 
  background-position: 50% 30%;
}

#accordion ul li:nth-child(2) { 
background-image: url("../img/sld2.jpg"); 
 background-position: 50% 0%;
}

#accordion ul li:nth-child(3) { 
background-image: url("../img/sld3.jpg"); 
background-position: 50% 50%;
}

#accordion ul li { background-size: cover; }
#accordion ul:hover li { width: 10%; }
#accordion ul:hover li:hover { width: 90%; }


#accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
#accordion ul:hover li:hover .title * {
  opacity: 0;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

 @media screen and (max-width: 680px) {
  
  body { margin: 0; }
  #accordion { height: auto; }

  #accordion ul li,
  #accordion ul li:hover,
  #accordion ul:hover li,
  #accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
  #accordion ul li div a * {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
 
}



/* Media < 1200 */

@media (max-width: 1200px) {


}


/* Media < 992 */

@media (max-width: 992px) {
	
	.navbar-brand2{
		display:none;
	}
	#mobilogo{
		display:block;
		width: 100%;
		background: #e30613;
		padding:5px;
	}
	
	 #accordion ul li div a {
	height:435px;
  }
	#accordion ul li div a p {
		top:375px;
	}
	
}


/* Media < 768 */

@media (max-width: 768px) {	

	.tekli img {
	    left: 5% !important;
	    top: 17% !important;
	}

	.uclu img {
	    right: 5% !important;
	    top: 20% !important;
	}


}


/* Media < 576 */

@media (max-width: 576px) {
	
	#anasayfa-buyuk-ekran{
		display:none;
	}

	#anasayfa-kucuk-ekran{
		display:block;
	}

	.tekli img {
	    position: static;
	}

	.uclu img {
	    position: static;
	}

	#karton500 .urun-ozel {
		padding-left: 1.6rem !important;
	}

	#header {
	  background: #e30613;
	}

	#giris img {
		max-width: 100%;
	}

	.navbar-brand {
	  background-color: #e30613;
	  position: static;
	  padding-top: 0;
	  margin-right: auto!important;
      margin-left: auto!important;
	}
	
	.oddie-logo {
		width: 2.775rem;
		height: 4.438rem;
	}

	.hovereffect:hover img {
		-ms-transform:none;
		-webkit-transform:none;
		transform:none;
	}

	.hovereffect .overlay {
		position:static;
	}
	
	.sosyalicon img {
		width:30px;
	}


}