*,*:after,*:before{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    letter-spacing: 1px;
    word-spacing: 2px;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
}
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #ccc;
    color: #000;
    cursor: default;
    background: url('../content/images/background.jpg') no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Arima Madurai', cursive;
    font-size: 100%;
    position: relative;
}

/* ---------- HEADER - Start ---------- */
	header {
	    width: 100%;
	    min-width: 64em;
	    height: 4em;
	    padding: .2em 10%;
	    position:fixed;
	    top: 0;
	    z-index: 9;
	    background-color: #000;
	    color: #000;
	}
	header * {
	    height: 100%;
	    float: left;
	}
	header #logo img {
		height: 80%;
	    margin: 8% 0 0 1em;
        cursor: pointer;
	}
	header #companyname {
	    height: 85%;
	    margin-top: .3em;
	    font-weight: 800;
        cursor: pointer;
	}
	#companyname1 {
		margin: 0 .2em;
		padding: 0 .2em;
	    font-size: 35px;
	    color: #EDEDED;
	    letter-spacing: 2.5px;
	    text-shadow: -1px 1px 2px #aaa;
	    border-right: 1.5px solid #EDEDED;
	}
	#companyname2 {
	    font-size: 22px;
	    padding: .3em 0 0 .1em;
	    color: #C31F1F;
	}
	header #companyphone {
		height: 60%;
		margin: .6em 1em 0 0;
	    float: right;
	}
	#companyphone1 {
		margin: .4em .4em 0 0;
	}
	#companyphone1:link, #companyphone1:visited, #companyphone1:hover, #companyphone1:active {
	    color: #EDEDED;
	    text-decoration: none;
	}
    #playmutebuttonplace {
        width: 0px;
        height: 0px;
        position: relative;
        float: right;
        z-index: 100;
    }
    #playmutebutton {
        position: absolute;
        float: right;
        bottom: 50px;
        right: 35px;
        cursor: pointer;
    }
/* ---------- HEADER - End ---------- */

/* ---------- Initialize - Start ----------*/
    #body-in {
        width: 64em;
        min-height: 550px;
        margin: 0 auto;
        padding-top: 3.9em;
        position: relative;
        background-color: rgba(255,255,255,.7);
    }
    #menu {
        width: 1000px;
        height: 3em;
        margin: 2px 12px 0;
        background-color: #fff;
        text-align: center;
        position: fixed;
        z-index: 10;
        border-top: 3px solid #A1CB2F;
        border-bottom: 2px solid #000;
        overflow: hidden;
    }
    .menutab { /* 135x6 tabs + 12x5 spaces + 77 right + 77 left = 1024px = 64em */ 
        height: 100%;
        float: left;
        padding-top: 10px;
        padding-left: 17.6px;
        padding-right: 17.6px;
        font-weight: 800;
        color:#000;
    }
    .menutab:link, .menutab:visited, .menutab:hover, .menutab:active {
        color:#000;
        text-decoration: none;
    }
    .tab1 {
        margin-right: 6px;
    }
    .tab2, .tab3, .tab4, .tab5, .tab6 {
        margin: 0 6px;
    }
    .tab7 {
        margin-left: 6px;
    }
    .selected {
        background-color: #EDEDED;
        border-bottom: 3px solid #C31F1F;
    }
    .selected * {
        color: #C31F1F;
    }
    .bannerfield {
        position: relative;
        margin: 0 auto;
        top: 0px;
        left: 0px;
        width: 1024px;
        height: 500px;
        overflow: hidden;
        visibility: hidden;
    }
    #banner1text {
        position: absolute;
        top: 90px;
        left: 130px;
        display: inline-block;
        min-width: 400px;
        z-index: 0;
        font-size: 28px;
        text-align: right;
        color: #000;
        line-height: 45px;
        border: 3px solid #fff;
        padding: .5em;
        background-color: rgba(255,255,255,.7);
    }
    footer {
        position:fixed;
        bottom: 0;
        background-color: #000;
        width: 100%;
        height: 1.5em;
        text-align: center;
        color: #fff;
        z-index: 9;
    }
/* ---------- Initialize - END ----------*/

/* PAGES - Start*/
    .pagerbody {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #pager {
        width: 100%;
        height: 100%;
        border: none;
        border: 0;
        margin: 0;
        padding: 0;
    }





    .page_inner {
        display: inline-block;
        width: 100%;
        margin: 3em auto;
        padding: 1.5em 0;
        font-size: 115%;
    }
    #hakkimizda_pic {
        width: 400px;
        height: 400px;
        border: 3px solid #ccc;
        border-radius: 10px;
        float: left;
        margin: 0 2em;
        overflow: hidden;
    }
    #hakkimizda_pic img, .hizmet_pic img, #proje_pic img {
        width: 100%;
        height: 100%;
    }
    #hakkimizda_text {
        width: 550px;
        height: 530px;
        float: left;
        border-left: 3px solid #ccc;
        padding-left: 2em;
    }
    #hakkimizda_text div:first-child, #proje_text div:first-child, #iletisim_text div:first-child, #hizmet_title, #proje_title, #galeri_title  {
        font-size: 25px;
        font-weight: 800;
    }
    #hizmet_title, #proje_title, #galeri_title {
        padding-left: 1em;
        border-bottom: 3px solid #ccc;
        margin-bottom: .8em;
    }
    #proje_pic {
        width: 450px;
        height: 300px;
        border: 3px solid #ccc;
        border-radius: 20px;
        float: left;
        margin: 0 2em 2em 6em;
        overflow: hidden;
    }
    #proje_title {
        margin-top: 15em;
    }
    #proje_text {
        width: 400px;
        height: 300px;
        float: left;
        border-left: 3px solid #ccc;
        padding: 1.5em 0 0 2em;
    }
    .proje_ref_left {
        width: 60%;
        padding: 0 1em;
        display: inline-block;
        float: left;
        font-size: 16px;
    }
    .proje_ref_right {
        width: 40%;
        padding: 0 1em;
        display: inline-block;
        float: left;
        font-size: 16px;
    }
    .hizmet_pic {
        width: 150px;
        height: 150px;
        border: 3px solid #ccc;
        border-radius: 10px;
        float: left;
        margin: 0 1em 0 3em;
        overflow: hidden;
    }
    .hizmet_text {
        height: 150px;
        padding-top: 1em;
    }
    #page_galeri {
        padding-left: 1em; 
    }
    #iletisim_left {
        width: 300px;
        height: 400px;
        margin: 0 2em 0 5em;
        float: left;
    }
    #gmaps {
        width: 100%;
        height: 300px;
        border: 3px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: .5em; 
    }
    #gmaps_link {
        width: 100%;
        padding: .35em 0;
        border: 3px solid #fff;
        border-radius: 5px;
        background-color: #fff;
        text-align: center;
    }
    #iletisim_text {
        width: 550px;
        height: 400px;
        border-left: 3px solid #ccc;
        padding-left: 2em;
        float: left;
    }
    .iletisim_component {
        height: 30px;
        margin: 1em 0;
    }
    .iletisim_component img{
        width: 30px;
        height: 30px;
        float: left;
        margin-right: 1em;
    }
    .i_address img {
        margin-bottom: 30px;
    }
    .contactlinks:link, .contactlinks:visited, .contactlinks:hover, .contactlinks:active {
        color: #000;
        text-decoration: none;
    }

    .gallery {
        background-image: url("../content/images/none.png");
        background-repeat: no-repeat;
        background-position: center top;
        display: inline-block;
        margin: 0 5px 5px 0;
        float: left;
    }
    .gallerysmall {
        width: 160px;
        height: 160px;
    }
    .gallerymedium {
        width: 182px;
        height: 182px;
    }
    .galleryspec {
        margin-top: 5px;
        width: 90px;
        height: 90px;
    }
    .gallerylarge {
        width: 100%;
        height: 100%;
    }
    .galeri_types {
        width: 100%;
        display: inline-block;
        padding-left: 1.5em;
        padding-bottom: .5em;
        margin-bottom: .5em;
        border-bottom: 2px #ccc solid;
    }
    .galeri_typenames {
        width: 150px;
        float: left;
        display: inline-block;
        font-size: 20px;
        font-weight: 800;
    }
    .galeri_specinfo {
        padding-left: .5em;
        font-size: 16px;
    }
    .galeri_inside {
        width: 825px;
        float: left;
        display: inline-block;
    }
    .typeproje {
        width: 100%;
        float: left;
        display: inline-block;
    }
    .type2 {
        min-height: 350px;
    }

/* PAGES - END*/

/* BANNER */
.jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('../content/images/banner/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        .jssora22l.jssora22lds      (disabled)
        .jssora22r.jssora22rds      (disabled)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('../content/images/banner/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }
        .jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
        .jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
/* BANNER */

/*-------------------------*/
.radius-5
{
    border-radius: 5%;
    -moz-border-radius: 5%;
    -webkit-border-radius: 5%;
}
.radius-50
{
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.solidbottomshadow
{
    box-shadow:         0px 3px 5px 1px #777;
    -moz-box-shadow:    0px 3px 5px 1px #777;
    -webkit-box-shadow: 0px 3px 5px 1px #777;
}
.animate
{
    -moz-transition     : all .5s ease-out;
    -o-transition       : all .5s ease-out;
    -webkit-transition  : all .5s ease-out;
    transition          : all .5s ease-out; 
}
.animateSlow
{
    -moz-transition     : all 1s ease-out;
    -o-transition       : all 1s ease-out;
    -webkit-transition  : all 1s ease-out;
    transition          : all 1s ease-out; 
}
.invisible 
{
    display: none;
}
.scaleZero {
    -webkit-transform: scale(0);
    -moz-transform:    scale(0);
    -ms-transform:     scale(0);
    -o-transform:      scale(0);
    transform:         scale(0);
}
.scaleNormal  {
    -webkit-transform: scale(1);
    -moz-transform:    scale(1);
    -ms-transform:     scale(1);
    -o-transform:      scale(1);
    transform:         scale(1);
}



@media only screen  and (min-device-width: 320px)  and (max-device-width: 1024px)  and (-webkit-min-device-pixel-ratio: 1) {

    html, body {
        font-family: Arial, Helvetica, sans-serif !important;
    }
    .menutab { 
        padding-left: 12px;
        padding-right: 12px;
    }
    
}

/*
@media only screen and (min-width :1024px) {
    html, body {
        font-family: Arial, Helvetica, sans-serif !important;
    }
    .menutab { 
        padding-left: 5px;
        padding-right: 5px;
    }

}

*/