body {
//	background-image: linear-gradient(#4eab9d, #ebf5fc, #ebf5fc);
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family:Helvetica;
	transition: 0.5s;
    	animation: fadein 0.5s;
       -moz-animation: fadein	 0.5s; /* Firefox */
       -webkit-animation: fadein 0.5s; /* Safari and Chrome */
}

.input {
	background-color:transparent;
	border-bottom: 1px solid grey;
	border-radius:10px;
	border-top:none;
	font-weight:normal;
	width:90%;
	padding:5px;
	}
.sil {
position:absolute;margin-top:60px;margin-left:-26px;cursor:pointer;font-weight:bold;opacity:1;transition: 0.5s;border:none;
}

.sil:hover {
	transition: 0.5s;
	background-color:blue;
	color:white;
	opacity:1;
}

.yazdır {
cursor:pointer;font-weight:bold;opacity:1;transition: 0.5s;height:50px;border:none;width:100%;color:blue;
}

.yazdır:hover {
	transition: 0.5s;
	background-color:blue;
	color:white;
	opacity:1;
}

table.photo {
	position: absolute;
	top: 20px;
	right:10%;
	border:1px solid silver;
	border-radius:10px;
	box-shadow: 5px 10px #888888;
}

select {width:100%;background-color:transparent;border-top:none;border-radius:10px;border-bottom: 1px solid grey;height:20px;}
th.başlık {background-color:#1d487e;color:white;}
td.transcript {
	font-weight:bold;
}

.apptable {
	border-radius:10px;
	margin-top: 0%;
	margin-bottom: 10%;
	margin-left: auto;
	margin-right: auto;
	width:80%;
	padding:2px;
	transition: 0.5s;
}

button.kaydet {
	transition: 0.5s;
	width:100%;
	background-color:#a3dcff;
	border:none;
	border-radius:10px;
	font-size:18px;
}

button.kaydet:hover {
	background-color:#0b80c8;
	color:white;
	transition: 0.5s;
	cursor:pointer;
	font-weight:bold;
	}


       /*
        Max width before this PARTICULAR table gets nasty
        This query will take effect for any screen smaller than 760px
        and also iPads specifically.
        */
       @media only screen and (max-width: 680px), (min-device-width: 360px) and (max-device-width: 1024px) {

            /* Force table to not be like tables anymore */
            table, thead, tbody, th, td, tr {
                display: block;
            }
			table {border-right:none;}

                /* Hide table headers (but not display: none;, for accessibility) */
                thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }
td.transcript {
	width:95.5%;
}
td.transcript:hover {
	transition:0.5s;
	background-color:grey;
	color:white;
}

table.photo {
	position: absolute;
	top: 30px;
	right:5%;
	border:1px solid silver;
	border-radius:10px;
	box-shadow: 5px 10px #888888;
}

td.photo:hover {
	transition:0.5s;
	background-color:grey;
	color:white;
}