html, body {margin:0;padding:0;height:100%;font-family: "Open Sans"; }
 .fullicerik{ position: relative;  width: 100%; min-height: 100%; color: #fff;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
   font-family:'datahavuz-Slabo';src:url(font/font-slabo.otf);
  font-style: normal;
  font-weight: 400;
  src: local('datahavuzSlabo'), local('datahavuzSlabo-Regular'), url(font/font-slabo.woff) format('woff');
  }

.clearfix:after { 	/*float dolayisiyla height problemi oldugunda parent div e ata.*/
   content: " ";
   display: block; 
   height: 0px;
   width:0px; 
   clear: both;
}
a{ text-decoration: none;}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}
#sayac{
    margin: 0 auto;  max-width: 200px; font-size: 12px;
}
.siteharita{ margin-left:15px;}
.mapSite{ list-style:none; }
.mapAltUL{ margin-left:25px}
.mapSite li{  margin:4px}
.mapLi{ font-weight:bold}
.mapAltUL a{ color: #fda443;}
.mapLi a{ font-weight: bold; color: #FFF;}
.stars, .twinkling, .clouds {
  position:absolute;

  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
 
}

.stars {
  background:#000 url(../img//stars.png) repeat top center;
  z-index:-900;

}

.twinkling{
  background:transparent url(../img/twinkling.png) repeat top center;
  z-index:-800;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(../img/clouds3.png) repeat top center;
    z-index:-500;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}
 #ustkısım{border-bottom: 5px solid #2fd2ff; width: 100%;}
#menubar{ text-align: right;}
.ermuziklogo{ width: 212px; height: 166px; background: url(../img/ermuzik-logo.jpg) no-repeat; background-size: 100%; float: left; }


.tekbuton{ margin-bottom: 1px; font-size: 12px; display: inline-block; min-width: 180px; height: 32px; background-color: rgba(255, 0, 0, 0.5);padding: 4px 10px; line-height: 32px; color: #FFF;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; 
text-align: left;
}
 a.tekbuton:hover{background-color: rgba(255,255,255,.6); color: #FFF;}
.sahnetxt{ color: #6f6f6f; font-weight: bold; text-shadow: -1px 1px 0px #FFF; font-size: 18px; 
           display: inline-block; height: 42px; line-height: 42px;
}
.telefonTop{ display: inline-block; color: #fff;  line-height: 42px; margin-left: 20px;
}
.ilerigit, .gerigit{ cursor: pointer;}

.ortaucgen{
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top-width: 25px;
  border-top-style: solid;
  border-top-color: #2FD2FF;
  margin: 0 auto;
  
    }
.hg_metni{ color: #FFF; border-top: 6px solid #2FD2FF;border-bottom: 1px solid rgba(47,210,255,.5); background-color: rgba(0,0,0,.6); margin-top: 25px;
}
.hg_baslik{ font-size: 20px; font-weight: bold; text-shadow: -1px 1px 0px #114F60 ; text-align: center; height: 50px; 
}
.kutuicimetin{ text-shadow: -1px 1px 0px #000; text-align: justify; padding: 5px 1%; }
.kutuicimetin p{ margin-bottom:5px; }
.yuvarlaklar {
    text-align: center; width: 50%; margin: 0 auto; display: table;
}
.yuvarla_wrap {
	 width: 15%; position: relative; display: table-cell;  text-align: center;
}

.yuvarlak {
    
	width: 100%;
	height:0;
	padding-bottom: 100%;
    border-radius: 50%;
    border: 2px solid #ff6a00;
    overflow:hidden;
    box-shadow: 0 0 3px gray;
}
.yuv_bosluk{ width: 4%; display: table-cell;  vertical-align: middle; text-align: center; }
.yuv_bosluk span{ text-align: center;  color: rgba(255, 255, 255, 1); opacity: .8;font-size: 5vw; margin: 10px;}
.sosyalwrap{ position: relative; width: 100%; margin-bottom: 10px; }
.sosyalikonlar{position:  absolute;width: 100%; text-align: center}
.sosyalikonlar a {
    opacity: 0.6;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
.sosyalikonlar a:hover {opacity: 1;}
#sosyalMedyaAkisi{ width: 100%; height: 210px; text-align: center;  overflow: auto; 
 
                   
}
#sosyalMedyaAkisi *{ text-shadow: none;}
#sosyalMedyaAkisi::-webkit-scrollbar-track{	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);	background-color: #F5F5F5;}
#sosyalMedyaAkisi::-webkit-scrollbar{	width: 10px;	background-color: #2fd2ff;}
#sosyalMedyaAkisi::-webkit-scrollbar-thumb{	background-color: rgb(47, 210, 255);	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .6) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .6) 50%,
											  rgba(255, 255, 255, .6) 75%,
											  transparent 75%,
											  transparent)
}
 

 
.jssora02l, .jssora02r {
                display: block;
                position: absolute;
                /* size of arrow element */
                width: 55px;
                height: 55px;
                cursor: pointer;
                background: url(../img/a02.png) no-repeat;
                overflow: hidden;
            }
            .jssora02l { background-position: -3px -33px; }
            .jssora02r { background-position: -63px -33px; }
            .jssora02l:hover { background-position: -123px -33px; }
            .jssora02r:hover { background-position: -183px -33px; }
            .jssora02l.jssora02ldn { background-position: -3px -33px; }
            .jssora02r.jssora02rdn { background-position: -63px -33px; }
.jssort03 {
                position: absolute;
                /* size of thumbnail navigator container */
                width: 100%;
                height: 70px;
            }

                .jssort03 .p {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100px;
                    height: 68px;
                }

                .jssort03 .t {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: none;
                }

                .jssort03 .w, .jssort03 .pav:hover .w {
                    position: absolute;
                    width: 98px;
                    height: 66px;
                    border: white 1px dashed;
                    box-sizing: content-box;
                }

                .jssort03 .pdn .w, .jssort03 .pav .w {
                    border-style: solid;
                }

                .jssort03 .c {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100px;
                    height: 68px;
                    background-color: #000;
                    filter: alpha(opacity=45);
                    opacity: .45;
                    transition: opacity .6s;
                    -moz-transition: opacity .6s;
                    -webkit-transition: opacity .6s;
                    -o-transition: opacity .6s;
                }

                .jssort03 .p:hover .c, .jssort03 .pav .c {
                    filter: alpha(opacity=0);
                    opacity: 0;
                }

                .jssort03 .p:hover .c {
                    transition: none;
                    -moz-transition: none;
                    -webkit-transition: none;
                    -o-transition: none;
                }

                * html .jssort03 .w {
                    width /**/: 100px;
                    height /**/: 68px;
                }
.ustsosyalSpan{color: #fff; font-size: 18px;  }
.ustsosyalLink {
    display: inline-block;
    background-color: rgba(0,0,0,0.3);
    transition: all .3s ease-in-out;
    width: 32px;

    text-align: center;
}
.ustsosyalLink:hover{ background-color: #000;}
.sosyaller{
    /* üst menü - sosyal ikonların bulunduğu yer.*/
}

 
.footerarea {
    position: relative;
    bottom: 0;
     width: 100%;
   
    margin:0px auto ;
    height: 200px;
}
.footer{ width: 100%; background-color: #363839; min-height: 220px; clear: both; position: relative; bottom: 0;border-color: #4b4c4d;}
.footer-logo{  margin:0; border: none; background: url(../img/beyaz-logo.png) no-repeat; background-size: 100%; width: 180px; height: 50px;
}
.footerAlan{height: 50px; background: #282A2B;border-top: 1px solid #4b4c4d;}
.cpr{ text-align: center; color: rgb(160, 206, 78); font-size: 12px;} 
.dhimza{ color: rgba(200,200,200,0.5);}
.footersosyal{ text-align: right; padding-right: 20px;}
.footersosyal a {
    font-size: 32px; margin-left: 15px;
    line-height: 50px;
    color: #999;
    opacity: 0.5;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
}
.footersosyal a:hover{ opacity: 1; color: #fda443}

.boxtable{  display:table; width:100%;
 }
.boxsatir{ 
display:table-row;



 }
.boxcell{ display:table-cell; vertical-align:middle; }

.harita{ width: 70%; background: red }
.adresvetel{ width: 30%; background: blue}
.solBlok{ width: 69%; float: left;}
.sagBlok{ width: 30%; float: left; margin-left: 1%;}
.contactForm2{float:none; background-color: rgba(0, 0, 0,.5); width: 100%; }

.contactForm2 .zorunlualanlar{ font-size: 12px; color: #FFF; width: 94%; padding: 3%; background-color: #57b3d6; margin: 10px 0px; }
.contactForm2 input, .contactForm2 textarea {
   
    width: 210px;
    height: 30px;
    line-height: 30px;
    
    padding-left: 10px;
  
}
.contactForm2 textarea{
  height: 120px; width: 90%; min-width: 320px; line-height: 24px;
}
.contactForm2 .formSubmitter{
   display: block;
    background-color: #22455B; color: #FFF; float: right; margin-right: 3%; padding: 4px; text-align: center;   
    height: 40px; line-height: 28px;
    cursor: pointer; margin-bottom: 10px;
   
}


.contactForm2 .formSubmitter:hover{ background-color: #4585ad}
 
.basvuruyuGonder2{ min-width:200px;
padding: 10px;
  line-height: 20px;color: #FFF;
  background-color: #a0ce4e;
  cursor:pointer; display: inline-block;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.5);    
  -webkit-transition: background-color 0.4s ease-in-out;
    -moz-transition: background-color 0.4s ease-in-out;
    -o-transition: background-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out;

  }
.basvuruyuGonder:hover{background-color: #65ce6a;}
.kirmiziborder{
    border: 1px solid #FF4444;
}
.kirmiziihtar{ text-align:center; display: none; }
#errmsg{ background-color: #eeeded; color: #c33636}
.content-box,.content-box-blue,.content-box-green,.content-box-orange,.content-box-yellow,.content-box-red,.content-box-gray,.content-box-brown{
  display:block;

  padding:5px 25px 5px 38px;
   text-shadow:1px 1px 1px #FFF;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-border-radius:7px;
  -khtml-border-radius:7px
}
.content-box-green{
  color:#648434;
  border:solid 1px #87D226;
  background:#CDEFA6;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E7f3D8', endColorstr='#CDEFA6');
  background:-moz-linear-gradient(50% 0%,#E7f3D8 0%,#CDEFA6 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#E7f3D8),color-stop(1,#CDEFA6));
  background:-o-linear-gradient(270deg,#E7f3D8 0%,#CDEFA6 100%)
}
.content-box-red{
  color:#E03638;
  border:solid 1px #FFACAD;
  background-color:#FFD5D5;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8ECEC', endColorstr='#FFD5D5');
  background-color:-moz-linear-gradient(50% 0%,#F8ECEC 0%,#FFD5D5 100%);
  background-color:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#F8ECEC),color-stop(1,#FFD5D5));
  background-color:-o-linear-gradient(270deg,#F8ECEC 0%,#FFD5D5 100%)
}

.content-box-blue{
	color:#1C6B9B;
  border:solid 1px #6ABCE2;
  background:#BDDAEB;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5EEF3', endColorstr='#BDDAEB');
  background:-moz-linear-gradient(50% 0%,#E5EEF3 0%,#BDDAEB 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#E5EEF3),color-stop(1,#BDDAEB));
  background:-o-linear-gradient(270deg,#E5EEF3 0%,#BDDAEB 100%);
	}
	.content-box-orange{
color:#C76E34;
  border:solid 1px #FFBB65;
  background:#FFE0B6;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF4E4', endColorstr='#FFE0B6');
  background:-moz-linear-gradient(50% 0%,#FFF4E4 0%,#FFE0B6 100%);
  background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0,#FFF4E4),color-stop(1,#FFE0B6));
  background:-o-linear-gradient(270deg,#FFF4E4 0%,#FFE0B6 100%);
	}

.listebaslik{ text-shadow: -2px 1px 0px rgba(0,0,0,0.8); background: rgba(34, 69, 91, 0.91); padding: 4px;}

.kucuknot{ font-size: 13px; font-family: 'Open Sans'; color: #c7ef7c; text-shadow: -2px 1px 0px rgba(39, 71, 91,0.8);}
.cam_kutu{
 
  border-width: 1px;
  border-color: rgba(255,255,255,.4);
  border-top-width: 3px;
  border-top-color: rgba(87, 179, 214, 0.6);
  border-style: solid;
  padding: 1px;
  min-height:120px; 
  
}
.camicerik h2{ font-size: 16px; color: #fda443; text-shadow: 2px -1px 1px #000; display: block; padding: 2px; }
.kutubaslik{ padding: 4px 15px; color: #ffffff; background-color: rgb(87, 179, 214); display: inline-block;text-shadow: -1px -1px 0px #000;}
.kutubas_son{padding: 4px 10px; width: 20px; height: inherit; background: rgb(87, 179, 214); display: inline-block;
 -ms-transform: matrix(1, 0, -0.8, 1, -12, 0); /* IE 9 */
    -webkit-transform: matrix(1, 0, -0.8, 1, -12, 0); /* Safari */
    transform: matrix(1, 0, -0.8, 1, -12, 0); /* Standard syntax */
}
.linkbuton{ display: inline-block; padding: 2px; margin-bottom: 4px; background-color: #ff0000; color: #FFF; min-width: 150px}

@media only screen and (min-width : 1200px) {
.openmenuTXT{ display: none;}
.menubar{position: relative;  transition: all .2s ease-in-out;  list-style: none;  margin: 0;  padding: 0; width: 600px;    margin-left:auto;  margin-right:auto;}
.menubar  li a.pasifmenu, .menubar  li a.aktifmenu, .altmenu{margin-left: 12px;}
.menubar li{ display: block; margin: 0; padding: 0;  float: left;}
.menubar > li > a{z-index: 50; padding: 0px 10px; text-decoration: none;height: 45px; display: block;background-color: #57b3d6 ; color: #FFF;border-bottom: 3px solid transparent;font:bold 14px/42px "Open Sans";text-shadow: -1px 1px 0px #000;}
.menubar li a.aktifmenu{border-bottom: 3px solid  #a5ffee; }
a.pasifmenu:hover{border-bottom: 3px solid  #a5ffee; text-shadow: -1px 1px 0px rgba(0,0,0,.4); }
 
 
}


@media only screen and (min-width : 1045px) and (max-width : 1199px) {
    .tekbuton {
        font-size: 11px;
   
        min-width: 160px;
        height: 30px;
      
        padding: 1px 6px;
        line-height: 30px;
   
    }
#menubar > div{ font-size: 14px;}
}

@media only screen and (max-width : 1044px) { /* mobile doğru ...*/
.ustiletisimbilgi{ margin-top: 48px;
                   
}
 
    .solBlok, .sagBlok {
        clear: both;
        float: none;
        width: 100%;
    }



    .footerAlan .boxcell {
        display: block;
        text-align: center;
        width: 100%;
    }

    .ermuziklogo {
    position: fixed;
    top: 0; left: 0;
       margin: 0;
    border: none;
    background: url(../img/beyaz-logo.png) no-repeat;
    background-size: 100%;
    width: 170px;
    height: 48px;
    z-index: 999;
    }

    .ustalan {
        margin-top: 48px;
    }

    .openmenuTXT {
        position: fixed;
        font-size: 48px;
        line-height: 48px;
        z-index: 888;
        top: 0px;
        right: 0px;
        width: 100%;
        text-align: right;
        height: 48px;
        cursor: pointer;
        background: #57b3d6;
        color: #FFF;
    }


    .menuListesi {
        position: fixed;
        z-index: 999;
        width: 100%;
        list-style: none;
        width: 100%;
        right: -100%;
        top: 48px;
    }
    .tekbuton {
        font-size: 11px;
        display: inline-block;
        min-width: 160px;
        height: 30px;
        background-color:rgba(126, 27, 27, 0.96);
        padding: 1px 6px;
        line-height: 30px;
        color: #FFF;
    }
 a.tekbuton:hover{background-color: #4b4c4d;}

}
@media only screen and (min-width : 320px) and (max-width : 767px) {
.tekbuton {
        font-size: 11px;
        display: inline-block;
        min-width: 150px;
        height: 30px;
        background-color:rgba(126, 27, 27, 0.96);
        padding: 1px 4px;
        line-height: 30px;
        color: #FFF;
    }
    .fullicerik, .fullicerikWrap{ margin: 0; width: 100%;}
 
    .social-feed-element {
      width: 98%;
 
    }
 .social-feed-element .media-object {
    display: block;
    width:30px;
    border-radius:50%;
}
  
}