@charset "utf-8";
@font-face{
	font-family: "Crimson bold";
	src: url( ../Fonts/Crimson-Roman.otf)
}
@font-face{
	font-family: "Crimson";
	src: url(../Fonts/Crimson-BoldItalic.otf);
}
@font-face{
	font-family: "OpenSans";
	src: url( ../Fonts/Crimson-SemiboldItalic.otf);
}
@font-face{
	font-family: "italic";
	src: url(../Fonts/Crimson-Italic.otf);
}
/* CSS Document */

*{
	padding: 0;
	margin: 0;
}
body,html{
    background-attachment: fixed;
	margin: 0;
	padding: 0;
}
h1{
	font-family: "Crimson";
	font-size: 4.0em;
	color:#005298; 
	text-shadow:-1px -1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,1px 1px 0 #fff;
}
h2{
	font-family: "Crimson";
	font-size: 2.4em;
}
h3{
	font-family: "Crimson";
	font-size: 3.2em;
}
h4{
	font-family: "Crimson";
	font-size: 1.6em;
}
p {
	font-family: "OpenSans";
	font-size: 1.4em;
	text-indent: 25px;
	text-align: left;
}

/***** MENU *****/

.navbar{
	background-color: #3eab34;
}

.navbar-nav li {
	border-right: 1px solid darkgrey;
}
.navbar-nav li a {
	color: white;
	
}
.navbar-nav li a:hover {
	color: #87d1f4;
	border-top: 2px solid #87d1f4;
}
.navbar-toggler-icon{
	background-image: url(../Image/icon/menu.png);
	
}

/**************************************************/

/***** ANASAYFA *****/

.hero {
  display: table;
  position: relative;
  background-image: url( ../Image/Background/anasayfa.png);
  background-size: cover;
  padding: 150px 0;
  color: #fff;
  width: 100%;
  height: 100vh;
	background-attachment: fixed;
}

.hero:after {
  content: '';
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.hero-brand {
  margin-bottom: 75px;
  display: inline-block;
	opacity: 1;
}

/**.hero-brand:hover {
  opacity: 0.8	;
}
**/
.tagline {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-size: 26px;
  margin: 45px 0 75px 0;
 
}

/******************************************/

/***** SUYUN ÖNEMİ *****/

.suyun_onemi {
  display: table;
  position: relative;
  background-image: url( ../Image/Background/suyun_onemi.png);
  background-size: cover;
  padding: 150px 0;
  color: #fff;
  width: 100%;
   background-attachment: fixed;
}

/******************************************/

/***** BELGELERIMIZ & ANALİZLER & GALERI *****/

.belgelerimiz {
  display: table;
  position: relative;
  background-image: url( ../Image/Background/belgelerimiz.jpg);
  background-size: cover;
  padding: 150px 0;
  color: #000;
  width: 100%;
   background-attachment: fixed;
}
.analizler {
  display: table;
  position: relative;
  background-image: url( ../Image/Background/analizler.jpg);
  background-size: cover;
  padding: 150px 0;
  color: #000;
  width: 100%;
   background-attachment: fixed;
}
.galeri {
  display: table;
  position: relative;
  background-image: url( ../Image/Background/galeri.png);
  background-size: cover;
  padding: 150px 0;
  color: #000;
  width: 100%;
   background-attachment: fixed;
}
.su_damlasi {
  margin-bottom: 75px;
  display: inline-block;
	opacity: 0.70;
}

.su_damlasi:hover {
  opacity: 1;
}
.galeri-img {
	opacity: 0.70;
}
.galeri-img a:hover {
	opacity: 5;
}
/******************************************/

/***** URETIM *****/

.uretim {
  
  background-image: url( ../Image/Background/uretim.png);
  background-size: cover;
  padding: 150px 0;
  color: #000;
  width: 100%;
}

/******************************************/

/***** BAYİLİK *****/

.bayilik {
  display: table;
  position: relative;
  background-image: url( ../Image/Background/bayilik.png);
background-repeat: no-repeat;
	background-size: cover;
  padding: 150px 0;
  color: #000;
  width: 100%;
   
}

/******************************************/

/***** İLETİŞİM *****/

.iletisim {
  display: table;
  position: relative;
  background-image: url(../Image/Background/iletisim.jpg);
  background-size: cover;
  padding: 150px 0;
  color: #fff;
  width: 100%;
  background-attachment: fixed;
}
.mapstyle{
width: 600px; 
height:450px; 
frameborder:0; 
border: 0;
}
/******************************************/

/***** FOOTER *****/

.copyright{
	width:100%;
background-color:#3eab34;
	background-size: cover;
	height: auto;
	
}
.copyright p{
	margin: 0;
	padding: 0;
	color:white;
	font-size:18px;
	text-transform:capitalize;
	font-family:Crimson;
	text-align: center;
}

/******************************************/

.scroll-down {
 opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #3eab34;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
 /** -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in; **/
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 3px solid #3eab34;
    border-width: 0px 0 3px 3px;
	
}
@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}	

@media screen and (max-width: 1199px){
	.navbar-nav li a {
	font-size: 0.8em;
}
}


.typewriter h1 {
  color: #005298;
	font-size: 4.0em;
  font-family: "Crimson";
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /** border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .10em; /* Adjust as needed */
	text-shadow:-1px -1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,1px 1px 0 #fff;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}