@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');



.topnav {
  background-color: #e83c3f;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 90%;
}

/* Style the links inside the navigation bar */
.topnav a {
  display: block;
  color: white;
  text-align: left;
  padding: 12px 13px;
  text-decoration: none;
  font-size: 17px;
  background-color: #e83c3f;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #8c7c72;
  color: white;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Add an active class to highlight the current page */
.active {
  background-color: white;
  color: black;
  width: 100%;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

#kisalt
{
  overflow: hidden; /* taşanları gizle */
  white-space: nowrap; /* alt satıra hiç inme */
  text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
  width: 80%;
}

.kategori{
 margin-left:0px;
}

.kategoriAlt{
margin-left:15px;
}

.kategoriAltAlt{
  margin-left:30px;
}

/*

.kategori, .kat_submenu
{
   font-size: 16px;
}

.kategori li
{
   margin-top: 8px;
}

.kat_submenu li
{
   margin-left: 25px;
}

.kategori li i, .kat_submenu li i
{
   color: black;
   font-size: 19px;
   font-weight: bold;
}

.kategori li a, .kat_submenu li a
{
   color: black;
   font-size:15px;
   padding: 10px;
   top: 25px;
   text-decoration: none;

   overflow: hidden; taşanları gizle
   white-space: nowrap; alt satıra hiç inme
   text-overflow: ellipsis;
   width: 80%;
}

.kategori li a:hover, .kat_submenu li a:hover
{
   margin-left: 10px;
   transition-delay: 0.1s;
   text-decoration: underline;
}
*/

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}

/* STANDART --> CSS-LER */
.sifirla
{
   margin: 0px;
   padding: 0px;
}

.boyutla
{
   width: 100%;
   height: auto;
}

#boyutla
{
   width: 100%;
   height: auto;
}
/* STANDART --> CSS-LER */

/* ÖZEL --> CSS-LER */
.Mobil_Menu
{
  padding: 10px;
}

.Ana_Renk, .Ana_Renk:hover
{
	color: #75777b;
}
/* ÖZEL --> CSS-LER */


/* FONT-YAZI --> CSS-LERÄ° */
#Rajdhani
{
    font-family: 'Rajdhani', sans-serif;
}

.Rajdhani
{
    font-family: 'Rajdhani', sans-serif;
}

.yazi_300
{
   font-weight: 300;
}

.yazi_400
{
   font-weight: 400;
}

.yazi_500
{
   font-weight: 500;
}

.yazi_600
{
   font-weight: 600;
}

.yazi_700
{
   font-weight: 700;
}
/* FONT-YAZI --> CSS-LERÄ° */

/* HÄ°ZALAMA --> CSS-LERÄ° */
.left
{
  float: left;
}

.right
{
  float: right;
}
/* HÄ°ZALAMA --> CSS-LERÄ° */

/* MARGÄ°N & PADDÄ°NG --> CLASS-LARI */
.margin-top-10
{
   margin-top: 10px;
}

.margin-bottom-10
{
   margin-bottom: 10px;
}

.padding-top-10
{
   padding-top: 10px;
}

.padding-bottom-10
{
   padding-bottom: 10px;
}

.margin-top-20
{
   margin-top: 20px;
}

.margin-bottom-20
{
   margin-bottom: 20px;
}

.padding-top-20
{
   padding-top: 20px;
}

.padding-bottom-20
{
   padding-bottom: 20px;
}

.margin-top-30
{
   margin-top: 30px;
}

.padding-top-30
{
   padding-top: 30px;
}

.margin-bottom-30
{
   margin-bottom: 30px;
}

.padding-bottom-30
{
   padding-bottom: 30px;
}

.margin-top-40
{
   margin-top: 40px;
}

.padding-top-40
{
   padding-top: 40px;
}

.margin-bottom-40
{
   margin-bottom: 40px;
}

.padding-bottom-40
{
   padding-bottom: 40px;
}


.margin-top-50
{
   margin-top: 50px;
}

.padding-top-50
{
   padding-top: 50px;
}

.margin-bottom-50
{
   margin-bottom: 50px;
}

.padding-bottom-50
{
   padding-bottom: 50px;
}

.margin-top-60
{
   margin-top: 60px;
}

.padding-top-60
{
   padding-top: 60px;
}

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

.padding-bottom-60
{
   padding-bottom: 60px;
}
/* MARGÄ°N & PADDÄ°NG --> CLASS-LARI */

.ourworks-box{
	width: 60%;
	justify-content: center;
	text-align: center;
}

.our-works-head{
	font-size: 30px;
	font-weight: 400;
	color: black;
}
.introduce{
	height: 250px;
	background-color:white;
	box-shadow: 0 3px 10px black;
	border-bottom: 4px solid black;
	color: black;
}

.introduce:hover{
	box-shadow: 0 3px 15px black;
	border-bottom: 4px solid black;
	color: black;
	text-decoration: none;
}
.flex-column-1{
	height: 70%;
	width: 100%;

}
.flex-column-2{
	height: 30%;
	width: 100%;
	align-items:center;
}
.text-gray{
	color: gray;
}
.pic{
    height: 70px;
    width: 70px;
    margin-left: 20px;
    border-radius: 50%;
    transition: all .2s ease-in-out;
}

.introduce:hover .pic{
	transform: scale(1.1);
}
.carousel-indicators .active{
	background-color: black;
}
.carousel-indicators li{
	background-color: black;
}
.carousel-indicators{
	bottom: -50px;
}
.p1{
	background-image: url("http://lorempixel.com/150/150/nature");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.p2{
	background-image: url("http://lorempixel.com/150/150/people");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}
.p3{
	background-image: url("http://lorempixel.com/150/150/cats");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}