.tazarim {
	background: url(../images/bg/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

	color: #fff;
}

#main-wrapper {
	    margin-left: 30px;
    margin-right: 30px;
}

#Menu {
background: rgba(173, 64, 0, 0.8);
padding: 15px;
}

#TasarimAlanAyarContainer {

background: rgba(173, 64, 0, 0.8);
padding-bottom: 15px;
}

#TasarimAlani {

text-align: center;

/* 
	genişlik: 345px;
	genişlik: 550px;
*/
padding-bottom: 15px;

width: 100%;
	max-width: 100%;
	overflow: hidden;
	float: left;
}


#TasarimAyarlar {
	padding-bottom: 15px;

	width: 100%;
	max-width: 100%;
	overflow: hidden;
	float: left;
}

#full {
	width: 232px;
	height: auto;
}


.btn-group label {width:50%; display: block; text-align: left; padding: 6px 40px;}


 /* HIDE RADIO */
#kaleciler input { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin-right:10px;
}



/* IMAGE STYLES */
#kaleciler input + img {
  cursor: pointer;
  border: 3px solid #000;
}

/* CHECKED STYLES */
#kaleciler input:checked + img {
  outline: 7px solid #f00;
}


.formaTekrar {
	background: rgba(0, 0, 0, .6);
	border-radius: 10px;
	padding: 30px 10px 0 10px;
	margin: 5px;

}

@keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: .8; }
    to   { opacity: 1; }
}

.formaTekrar:hover {
	background: rgba(255, 255, 255, .6);


    -webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 1.5.1 */
       -moz-animation: fadein .5s; /* Firefox < 16 */
        -ms-animation: fadein .5s; /* Internet Explorer */
         -o-animation: fadein .5s; /* Opera < 1.5.1 */
            animation: fadein .5s;
}
.formaTekrar a {
	color:#fff;
}

.formaTekrar a:hover {
	color:#fff;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

#TasarimAlani {
	width: 345px;
	max-width: 345px;
	overflow: hidden;
	float: left;
}
#TasarimAyarlar {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	float: left;
}


} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

#TasarimAlani {
	width: 345px;
	max-width: 345px;
	overflow: hidden;
	float: left;
}
#TasarimAyarlar {
	width: calc(100% - 345px);
	max-width: calc(100% - 345px);
	overflow: hidden;
	float: left;
	flex: 100%;
}

} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

#TasarimAlani {
	width: 345px;
	max-width: 345px;
	overflow: hidden;
	float: left;
}
#TasarimAyarlar {
	width: calc(100% - 345px);
	max-width: calc(100% - 345px);
	overflow: hidden;
	float: left;
	flex: 100%;
}


} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {


#TasarimAlani {
	width: 580px;
	max-width: 580px;
	overflow: hidden;
	float: left;
}
#TasarimAyarlar {
	width: calc(100% - 580px);
	max-width: calc(100% - 580px);
	overflow: hidden;
	float: left;
	flex: 100%;
}

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {


#TasarimAlani {
	width: 580px;
	max-width: 580px;
	overflow: hidden;
	float: left;
}
#TasarimAyarlar {
	width: calc(100% - 580px);
	max-width: calc(100% - 580px);
	overflow: hidden;
	float: left;
	flex: 100%;
}

}