/*
1. RESET
2. BASIC ELEMENTS
3. GENERIC CLASSES
4. BASIC LAYOUT
    a. HEADER
    b. CONTENT
    c. FOOTER
5. OTHER CLASSES
*/

/*----- RESET -----*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
 u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*----- BASIC ELEMENTS -----*/

html{
    overflow-y: scroll;
    height: 100%;
    width: 100%
}

body{
    color:#000000;
    width: 100%;
    height: 100%;
    font-family: 'HRegular';
    font-size: 100%;
        
}

div.logo{
    background:#e6e6e6 url('../web-construction.png') center center no-repeat;
    height: 100%;
    width: 100%;
}

div.addresss{
    margin: 0 auto;
    text-align: center;
    position: relative;
    bottom: 200px;
    font-size: 15px;
    
}

div.addresss p{
    margin-bottom: 10px;
}

h1{
    font-family: 'HBold';
    text-align: center;
    padding-top:6%;
}

h1{
    font-size:136px;
}

h2{
    font-size:24px;
    font-family: 'HRegular';
}

h3{
    font-size:20px;
}

h4{
    font-size:18px;
	text-align: left;
}

a img, table, img{ 
    border:none; 
}

a, a:hover, a:active, a:visited{
    color:inherit;
    text-decoration:none;
}





/*----- GENERIC CLASSES -----*/

.fl{ float: left; }
.fr{ float: right;}
.clear{ float:none; clear: both;}
.hidden{ display:none; }
.block{ display:block; }
.inline{ display:inline;}
/* Box Shadow (Use rgba() for shadow opacity)*/
.shadowBox{    
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff;
          box-shadow: 0px 0px 4px 0px #ffffff;
}

/* Text Shadow (Use rgba() for shadow opacity)*/
.shadowedText{
     text-shadow: 1px 1px 3px #888;
}
/* Transition Effect */
.transition {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
.rc{
  -webkit-border-radius: 2px;
          border-radius: 2px;

  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}

.roundbox{
    border:1px solid #E6E7E8;
    background-color: #FFFFFF;
    -webkit-border-radius: 2px;
          border-radius: 2px;

  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}

.clear{ float:none; clear: both;}
.clear10{ float:none; clear: both; height:10px;}
.clear20{ float:none; clear: both; height:20px;}
.clear30{ float:none; clear: both; height:30px;}


/*----- BASIC LAYOUT -----*/

.page{
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    min-height: 100%;
}

.wrapper{
    width: 68%;
    margin: 0 auto;
}

.wrapper-large{
    width: 90%;
    margin: 0 auto;
}

.menu{
    position: fixed;
    width: 100%;
    height: 11%;
    z-index: 123124;
    border-bottom: 1px solid #c5c5c5;
}

.menu .salt{
    float:left;
    font-size: 58px;
    font-family: 'HBold';
    margin-left: 4.5%;
    padding-top: 1%;
    padding-bottom: 1%;
    
}
.menu ul{
    list-style-type: none;
    float: right; 
    margin-right: 1%;
    display: block;
    width: 66%;
    height: 100%;
}

.menu ul li{
    float:left;
    width: 14%;
    margin-bottom: 2px;
    text-align: center;
    cursor: pointer;
    font-size:24px;
    /*text-shadow: 0px 0px 1px #888;*/
    position: relative;
    height: 100%;
    display: block;
}


.menu ul li:hover{
    margin-bottom: 0;
    border-bottom: 2px solid #d71d24;
}

.menu ul li a{
    width: 100%;
    height: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
    padding-top: 25%;
}





.spot{
    font-family: 'LLight';
    font-size:32px;
    line-height: 40px;
    margin-top: 3%;
    margin-bottom: 5%;
    text-align: center;
    /*text-shadow: 0px 0px 1px #888888;*/
}

.gridus{
    width: 25%;
    margin-right: 12.5%;
    float:left;
    margin-bottom: 12.5%;
    
}

.gridus img{
    width: 100%;
    height: auto;
    margin-bottom: 14%;
}

.gridus img.ver{
    width:44%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.job h2,
.gridus h2{
    text-align: center;
   /*text-shadow: 0px 0px 1px #888888;*/
    margin-bottom: 4%;
}


.job .seperator,
.gridus .seperator{
    width: 30%;
    margin: 0 auto;
    height: 2px;
    background-color: #d11d24;
    margin-bottom: 4%;
}

.job .text,
.gridus .text{
    font-family: 'LLight';
    font-size:18px;
    line-height: 24px;
    /*text-shadow: 0px 0px 1px #888888;*/
    text-align: center;

}

.gridus .icon{
    width: 40%;
    display: block;
    margin: 0 auto;
}



.header{
    width: 100%;
    padding: 1% 0 1% 0;
    text-align: center;
    margin-bottom: 20px;
}

/*
.header h2{
    font-family: 'LLight';
    display: table-cell;
    padding:10% 11% 10% 10%;
    font-size:72px;
}
*/

.header h2{
    font-family: 'LLight';
    display: inline;
    padding: 0% 1% 0% 1%;
    font-size: 72px;
    margin-bottom: 20px;
}

.showcase{
    margin-bottom: 40px;
}

.showcase ul{
    height: auto;
    overflow: hidden;
    margin-bottom: 40px;
}

.showcase div.sitem,
.showcase ul li{
    width: 31%;
    margin-right: 3.5%;
    float:left;
    position: relative;
    display: table-cell;
    margin-bottom: 5%;
}

.sitem2
{
    width: 15%;
    margin-right: 3.5%;
    float:left;
    position: relative;
    display: table-cell;
    margin-bottom: 5%;
}


.showcase div.sitem img,
.showcase ul li img{
    width: 100%;
    position: relative;
    z-index: 2;
}


.showcase div.sitem img.ver,
.showcase ul li img.ver{
    width: 70%;
    display: block;
    margin: 0 auto;
}

.showcase ul li .hoverver,
.showcase div.sitem .hoverver{
    position: absolute;
    bottom: -10%;
    left: 15%;
    opacity: 0.0;
    background: #03a696;
    color: #ffffff;
    width: 70%;
    height: 110%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: 1;
    border-bottom: none;
}

.showcase div.sitem img.ver2,
.showcase ul li img.ver2{
    width: 50%;
    display: block;
    margin: 0 auto;
}
.showcase ul li .hoverver2,
.showcase div.sitem .hoverver2{
    position: absolute;
    bottom: -10%;
    left: 25%;
    opacity: 0.0;
    background: #03a696;
    color: #ffffff;
    width: 50%;
    height: 110%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: 1;
    border-bottom: none;
}

.showcase div.sitem  .hover,
.showcase ul li .hover{
    position: absolute;
    bottom: -20%;
    opacity: 0.0;
    background: #03a696;
    color: #ffffff;
    width: 100%;
    height: 120%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: 1;
    border-bottom: none;
}


.showcase div.sitem .hoverver2 span,
.showcase ul li .hoverver2 span,
.showcase div.sitem .hoverver span,
.showcase ul li .hoverver span,
.showcase div.sitem .hover span,
.showcase ul li .hover span{
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 16px;
}


.showcase div.sitem:hover .hoverver2,
.showcase ul li:hover .hoverver2,
.showcase div.sitem:hover .hover,
.showcase ul li:hover .hover,
.showcase div.sitem:hover .hoverver,
.showcase ul li:hover .hoverver{
    opacity: 0.7;
}

.showcase-item{
    width:100%;
    float:left;
}

.showcase-grid{
    width: 31%;
    margin-right: 3.5%;
    float:left;
    position: relative;
    display: table-cell;
}

.showcase-grid img{
    width: 100%;
    height: auto;
}

.showcase-grid img.browser{
    width: 100%;
    height: auto;
}

.browserhead img{
    width:100%;
    /*background: url('../images/browser.png') no-repeat center top;*/
}

.button-next{ cursor:pointer; background: url('../images/arr-right.png') no-repeat center; width: 30px; height:100%; position: absolute; z-index: 1; top:0px; right: -40px; }
.button-prev{ cursor:pointer; background: url('../images/arr-left.png') no-repeat center; width: 30px; height:100%; position: absolute; z-index: 1; top:0px; left: -40px; }

.references{
    width: 90%;
    margin:0 auto;
}

.references ul{
    list-style-type: none;
    overflow:hidden;
    width: 100%;
}

.references ul li{
    width: 12%;
    float:left;
    margin-right: 10%;
    margin-bottom: 4%;
    position: relative;
}

.references ul li .nohover, .references ul li .referencehover{
    width: 100%;
    height: auto;
          

}
.references ul li.last{
    margin-right: 0px;
}


.references ul li .referencehover{
    opacity: 0;
        position: absolute;
    top:0px;
    left:0px;
    -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
.references ul li:hover .referencehover{
    opacity: 1;
}

.references ul li:hover .nohover{
    opactiy: 0;
}

.last, .showcase ul li.last,.showcase div.last{
    margin-right: 0;
}



.loadmore{
    background-color: #dfdfdf;
    color:#000000;
    font-family: 'HRegular';
    text-align: center;
    font-size: 18px;
    padding: 10px;
    margin-bottom: 40px;
    cursor: pointer;
}

.loadmore:hover{
    color: #03a696;
}

.loadmore:active{
    box-shadow: inset 1px 1px #c5c5c5;
}
/*----- OTHER CLASSES -----*/

.altcolor{
    color: #d71d24;
}

.bg1{
    background:#e6e6e6;
}

.bg2{
    background:#dfdfdf;
}

.bg3{
    background:url('../images/pattern1.jpg');
}

.bg4{
    background:url('../images/pattern2.png') repeat-x center left;
}

.arti-wrapper{
    position: relative;
    width: 100%;
    max-height: 100%;
    height: 431px;
    background:url('../images/pattern1.jpg');
    

}

.arti{
    background:url('../images/arti-01.png') #d71d24 center center no-repeat;
    position: absolute;;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-size: 100% 70%;
    top:50%;
    left:50%;
    margin-top: -75px;
    margin-left: -75px;
    cursor:pointer;
    border: 0px solid #03a696;
    
  -webkit-transition: all 0.1s ease-out; 
     -moz-transition: all 0.1s ease-out; 
       -o-transition: all 0.1s ease-out; 
          transition: all 0.1s ease-out; 

}

.arti-wrapper:hover .arti{
    border: 10px solid #03a696;
    margin-top: -85px;
    margin-left: -85px;
}

.arti-wrapper span{
    position: absolute;
    top: 50%;
    margin-top: 95px;
    left: 50%;
    margin-left: -70px;
    font-size: 29px;
    color: #ffffff;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out;
}

.arti-wrapper:hover span{
    opacity: 1;
}

/*
@font-face {
    font-family: 'HRegular';
    src: url('fonts/helveticaneue_0.eot');
    src: url('fonts/helveticaneue_0.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneue_0.woff') format('woff'),
         url('fonts/helveticaneue_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}*/
@font-face {
    font-family: 'HRegular';
    src: url('HelveticaNeue.eot');
    src: url('HelveticaNeue.eot?#iefix') format('embedded-opentype'),
         url('HelveticaNeue.woff') format('woff'),
         url('HelveticaNeue.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'HBold';
    src: url('helveticaneue-bold.eot');
    src: url('helveticaneue-bold.eot?#iefix') format('embedded-opentype'),
         url('helveticaneue-bold.woff') format('woff'),
         url('helveticaneue-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
/*@font-face {
    font-family: 'LLight';
    src: url('fonts/lato-lig.eot');
    src: url('fonts/lato-lig.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-lig.woff') format('woff'),
         url('fonts/lato-lig.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}*/
@font-face {
    font-family: 'LLight';
    src: url('HelveticaNeue-Light.eot');
    src: url('HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
         url('HelveticaNeue-Light.woff') format('woff'),
         url('HelveticaNeue-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


::selection {
	background: #03a696; /* Safari */
	}
::-moz-selection {
	background: #03a696; /* Firefox */
}

.row-high{
        margin: 0 auto;
    margin-top: 11%;
    width: 80%;
    margin-bottom: 2.5%;
    height: 100%;

}

.row-high .text h2{
    margin-bottom: 40px;
    font-size:30px;
}

.row-high img{
    margin: 0 auto;
    display:block;
    margin-bottom: 40px;
    max-width: 100%;
}

#apply{
    color: #d71d24;
}

#apply:hover{
    text-decoration: underline;
    cursor: pointer;
}
#ekibe-katil-iz{
    position: relative;
    width: 100%;
}
#ekibe-katil{
    display:none;
}
.form-container{
    clear:both;
    width: 500px;
    margin: 20px auto;
    padding: 10px;
}

.form-container div{
    line-height: 40px;
    position: relative;
}

.form-container div span{
    color: #dd0000;
    font-size:12px;
    position: absolute;
    right: 4px;
    top:4px;
    display:none;
}
.form-container .textarea,
.form-container .textbox{
    margin: 0 auto 20px auto;
    width: 100%;
    height: 46px;
    padding: 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #ffffff;;
    color: #656565;
    font-size: 16px;
    text-align: left;
    text-indent: 10px;
    border:none;
    display: block;
    font-weight: 300;
}

.form-container .loading{
    background-image: url('../images/ajax-loader.gif');
    background-repeat: no-repeat;
    background-position: center center;
}


.buttonx{
    width: 101%;
    padding: 2px;
    height: 60px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border:none;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    background-color: #03a696;
    cursor:pointer;
    outline: none;
    box-shadow: 0px 4px #038666;
    -webkit-box-shadow: 0px 4px #038666;
    -moz-box-shadow: 0px 4px #038666;
}

.buttonx:hover{
    background-color: #23c6a6;
}


.buttonx:active{
    position: relative;
    top:2px;
    background-color: #23c6a6;
    box-shadow: 0px 2px #038666;
    -webkit-box-shadow: 0px 2px #038666;
    -moz-box-shadow: 0px 2px #038666;
    
}

.form-container .textarea{
    height: 100px;
    resize: vertical;
}

.job{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-top: 30px;
}

.job h2,
.job .text{
    text-align: left;
    margin-bottom: 14px;
}

.job .buttonx{
    line-height: 60px;
    text-indent: 20px;
    margin-bottom: 20px;
    position: relative;
}

.job .buttonx span.detail{
    position: absolute;
    right: 10px;
    font-size:12px;
    color:#ffffff;
    
}


.job .seperator{
    margin: 0;
    
}

.job .text p{
    margin-bottom: 20px;
    padding-left: 20px;
}
.job .text p br{
    display: block;
}
.job .text *{
    display:none;
}

/*
.job .text p:first-child{
    display: inline;
}

*/
@media screen and (max-width : 1440px)
{
    .menu .salt{
        font-size: 50px;
    }
    
    .menu ul li{
        font-size:18px;
    }
    
    h1{
        font-size:108px;
    }
    
    .spot{
        font-size:22px;
        line-height: 30px;
    }
    
    h2{
        font-size:20px;
    }
    
    .gridus .text{
        font-size:16px;
        line-height: 20px;
    }
    
    .header h2{
        font-size:60px;
    }
}


@media screen and (max-width : 1366px)
{
    .menu .salt{
        font-size: 40px;
    }
    
    .menu ul li{
        font-size:16px;
    }
    
    h1{
        font-size:90px;
    }
    
    .spot{
        font-size:20px;
        line-height: 28px;
    }
    
    h2{
        font-size:18px;
    }
    
    .gridus .text{
        font-size:15px;
        line-height: 19px;
    }
    
    .header h2{
        font-size:50px;
    }
}


@media screen and (max-width : 1280px)
{
    .menu .salt{
        font-size: 35px;
    }
    
    .menu ul li{
        font-size:14px;
    }
    
    h1{
        font-size:80px;
    }
    
    .spot{
        font-size:18px;
        line-height: 26px;
    }
    
    h2{
        font-size:16px;
    }
    
    .gridus .text{
        font-size:13px;
        line-height: 15px;
    }
    
    .header h2{
        font-size:40px;
    }
}

.Maps{float:center;width:1460px;height:400px;margin-bottom:40px}.map-canvas{width:1460px;height:400px}