/*
Created by Netuce | ©2016
info@netuce.com
www.netuce.com
*/

/*CSS Reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
    font-weight: normal;
}
img{
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: inherit;
}
/*CSS Reset*/

/*Color Swatches*/
/*
Light Blue: #00b4d5 rgba(0,180,213,1)
Light Blue-Hover: #00b4d5
Lighter Blue: #deedf4
Baby Blue: #edf4f7 rgba(237,244,247,1)
Dark Blue: #414b4f rgba(65,75,79,1)
Light Grey: #efefef
Orange: #e8ae11
*/

/*Document Index*/
/*
0.Device Independent Styles
0.1.Typographic Elements
0.2.Layout Elements
0.3.Visual Elements
0.4.Master Elements
0.5.Page Specific Elements
0.5.1.Home Page
0.5.2.Inner Pages
0.5.3.News
0.5.4.News Detail
0.5.5.Notices
0.5.6.Contact
0.5.7.Mayor
0.5.8.Contact
0.5.9.Search Page
0.5.10.Press
0.5.11.Organization Schema
0.5.10.Press
0.6.Elements
0.7.Funtional
1.Desktop Styles
1.1.Typographic Elements
1.2.Layout Elements
1.3.Visual Elements
1.4.Master Elements
1.5.Page Specific Elements
1.5.1.Home Page
1.5.2.Inner Pages
1.5.3.News
1.5.4.News Detail
1.5.6.Contact
1.5.10.Press
1.6.Elements
2.Tablet Styles
2.1.Typographic Elements
2.2.Layout Elements
2.3.Visual Elements
2.4.Master Elements
2.5.Page Specific Elements
2.5.1.Home Page
2.5.2.Inner Pages
2.5.3.News
2.5.4.News Detail
2.5.6.Contact
2.5.10.Press
2.6.Elements
2.7.Functional
3.Phone Styles
3.1.Typographic Elements
3.2.Layout Elements
3.3.Visual Elements
3.4.Master Elements
3.5.Page Specific Elements
3.5.1.Home Page
3.5.6.Contact
3.5.10.Press
4.Elements
*/

/*0.Device Independent Styles*/
/*0.1Typographic Elements*/
body{
    color: #505658;
}
strong{
    font-family: 'pt_sansbold';
}
.sectionTitle{
    font-family: 'pt_sansbold';
    font-size: 20px;
    color: #44748a;
    text-align: center;
    text-transform: uppercase;
}
.sectionEmphasis{
    font-family: 'pt_sansitalic';
    font-size: 15px;
    color: #444a4d;
    text-align: center;
    margin-bottom: 64px;
}
.heading{
    width: 100%;
    height: 56px;
    background-color: #b0c0c7;
}
.heading h2{
    font-family: 'pt_sansbold';
    font-size: 26px;
    line-height: 56px;
    color: #fff;
    text-transform: capitalize;
}
.heading2{
    font-family: 'pt_sansbold';
    font-size: 26px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.heading3{
    font-family: 'pt_sansbold';
    font-size: 18px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.heading5{
    font-family: 'pt_sansbold';
    font-size: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #a5aeb2;
}
p.body{
    font-size: 16px;
    margin-bottom: 18px;
}
p.body:last-child{
    margin-bottom: 0px;
}
p.body2{
    font-size: 14px;
}
p.ps{
    font-family: 'pt_sansitalic';
}

/*0.1Typographic Elements-END- */
/*0.2.Layout Elements*/
.fullWidth{
    width: 100%;
    overflow-x: hidden;
}
.sliderContainer{
    box-sizing: border-box;
    height: 486px;
    padding-top: 20px;
}
.flexContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flexContainerCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}
.margin-top{
    margin-top: 25px;
}
.withGap > *{
    margin-left: 25px;
    margin-right: 25px;
}
.withGap > *:first-child{
    margin-left: 0px;
}
.withGap > *:last-child{
    margin-right: 0px;
}
a.boxLink{
    display: block;
    width: 100%;
    height: 100%;
}
.clearFloat{
    clear: both;
}
/*0.2.Layout Elements-END- */
/*0.3.Visual Elements*/
body{
    font-family: "pt_sansregular";
    //min-width: 1200px;/*TODO: what is this?*/
}
.backgroundLightBlue{
    background-color: #00b4d5 !important; 
}
.backgroundBabyBlue{
    background-color: #edf4f7;
}
.backgroundDarkBlue{
    background-color: #414b4f;
}
.backgroundGreenGrey{
    background-color: #37707a !important;
}
.backgroundOrange{
    background-color: #e8ae11;
}
.backgroundLightGrey{
    background-color: #efefef;
}
.backgroundFileBar {
    background-color: #cad7dd;
}
.backgroundImage{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.imageBackground{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.blendBackground{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    mix-blend-mode: multiply;
}
.blendContent{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.icon{
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.icon.more-blue{
    width: 40px;
    height: 40px;
    background-image: url("../img/icon-more.png");
}
.icon.pause{
    width: 30px;
    height: 30px;
    background-image: url("../img/icon-pause.png");
}
.icon.stop{
    width: 30px;
    height: 30px;
    background-image: url("../img/icon-stop.png");
}
.icon.play{
  width: 30px;
    height: 30px;
    background-image: url("../img/icon-play-audio.png");
}
.icon.sound{
    width: 41px;
    height: 33px;
    background-image: url("../img/icon-sound.png");
}
.icon.phone{
    width: 41px;
    height: 41px;
    background-image: url("../img/icon-phone.png");
}
.icon.printer{
    width: 38px;
    height: 44px;
    background-image: url("../img/icon-printer.png");
}
.icon.right-arrow{
    width: 20px;
    height: 20px;
    background-image: url("../img/arrows_right.svg");
}
/*TODO: split code for slider css and main slider*/
/*MARK: Start-code block ref.2*/
.mainSlider .sliderControler-dots{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    padding-left: 25px;
}
.mainSlider .dots{
    position: absolute;
    top: 20px;
    width: auto;
    list-style: none;
}
.mainSlider .dots li{
    box-sizing: border-box;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 2px;
    margin-left: 2px;
    border: 1px solid #c5c5c5;
    border-radius: 50%;
    background: #fdfcfc;
    cursor: pointer;
}
.mainSlider .dots li.current{
    background: #00b4d5;
}
.mainSlider .sliderControler{
    display: none;
}
.mainSlider .sliderDirectionControler{
    position: absolute;
    border: 0px;
    left: 0px;
    width: 100%;
    height: 29px;
}
.mainSlider .sliderDirectionControler .sliderControler{
    width: 54%;
    height: 100%;
    float: left;
}
.crouselSlider{
    position: relative;
    width: 300px;
    height: 433px;
    float: right;
}
.crouselSlider .slidesContainer{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 405px;
    overflow-x: hidden;
}
.crouselSlider .slidesContainer .slides{
    width: 900px;
    height: 405px;
}
.crouselSlider .slidesContainer .slides > li{
    width: 300px;
    height: 405px;
    overflow-x: hidden;
}
.services{
    list-style: none;
}
.services > li{
    position: relative;
    display: block;
    width: 150px;
    height: 135px;
    float: left;
    font-family: 'pt_sansbold';
    font-size: 17px;
    color: #fff;
    text-align: center;
}
.sliderSideMenu .services > li{
        position: relative;
        display: block;
    }
.sliderSideMenu .services > li > .blendContent{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.services > li > .blendContent > a{
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
.sliderSideMenu .services > li > .blendBackground{
    mix-blend-mode: normal;
}
.sliderSideMenu .services > li:hover > .blendBackground{
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
}
.blendContent div{
        padding: 10px;
    }
.services > li:hover > .blendBackground{
    width: 140px;
    height: 125px;
    position: relative;
    margin: 5px;
}
.services > li > .blendBackground{
    mix-blend-mode: multiply;
    transition: all 0.3s ease-in-out;
}
.services > li > .blendContent{
    width: 150px;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.services > li > img{
    display: block;
    margin-bottom: 14px;
    mix-blend-mode: unset !important;
    isolation: isolate !important;
}
li.blue > .blendBackground{
    background-color: rgba(18,148,172,1);
}
li.green > .blendBackground{
    background-color: rgba(152,194,29,1);
}
li.yellow > .blendBackground{
    background-color: rgba(253,195,0,1);
}
li.darkBlue > .blendBackground{
    background-color: rgba(13,119,176,1);
}
li.red > .blendBackground{
    background-color: rgba(256,71,80,1);
}
li.purple > .blendBackground{
    background-color: rgba(157,60,156,1);
}
li.bbBlue1 > .blendBackground{
    background-color: #00b4d5;
}
li.bbBlue2 > .blendBackground{
    background-color: #498691;
}
li.bbBlue3 > .blendBackground{
    background-color: #375156;
}
.crouselSlider .sliderControler-dots{
    position: absolute;
    bottom: 0px;
    height: 30px;
}
.crouselSlider .sliderControler-dots .dots{
    margin-top: -6px;
}
.crouselSlider .sliderControler-dots .dots > li{
    height: 18px;
    width: 18px;
}
/*MARK: End-code block ref.2*/
ul{
    list-style: none;
}
.icon-download{
    display: inline-block;
    width: 10px;
    height: 13px;
    margin-right: 5px;
    background-image: url(../img/icon-download.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.videoGallery {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
    list-style: none;
}    
.videoGallery > li{
    box-sizing: border-box;
    width: calc(33.3333% - 20px);
    height: 290px;
    margin-right: 10px;
    margin-bottom: 60px;
    margin-left: 10px;
    color: #848d91;
}
.videoGallery > li:hover{
    border-bottom: 4px solid #00bfff;
    color: #00bfff;
}
.videoGallery > li .videoThumbnail{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    height: 220px;
    margin-bottom: 7px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.videoGallery > li .videoThumbnail .playIcon{
    width: 80px;
    height: 80px;
    background-image: url('../../img/icon-play.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.videoGallery > li .videoTitle{
    font-family: "pt_sansbold";
    font-size: 16px;
}
.videoGallery > li .videoTitle{
    font-size: 14px;
}


.videoGallery > li .voiceThumbnail{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    height: 220px;
    margin-bottom: 7px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.videoGallery > li .voiceThumbnail .playIcon{
    width: 80px;
    height: 80px;
    background-image: url('../../img/icon-play-voice.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ntc-toast{
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 60px;
	background-color: #00b4d5;
}
.ntc-toast-content-container{
	height: 100%;
}
.ntc-toast-content-container > *{
	flex-grow: 0;
}
.ntc-toast-text{
	flex-grow: 1;
    font-size: 14px;
	text-align: center;
}
@media only screen and (max-width: 1179px) {
    .ntc-toast-text {
        text-align: left;
    }
}
.ntc-h-background-yellow{
	background-color: #e6b231 !important;
}
.ntc-h-background-black{
	background-color: #000 !important;
	color: #fff;
}
.ntc-h-flex{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
.ntc-logo-altin-orumcek > img{
	height: 70px;
	position: relative;
	top: -10px;
}
.ntc-toast-button-action{
	display: inline-block;
	background: #fff;
	padding: 5px 10px;
	border-radius: 3px;
	text-align: center;
}

.ntchtmlpopup {
    background-color: #fff;
    /*border: 15px solid transparent;
    border-image: url(/Assets/img/popup-border.png);
    border-image-repeat: round;
    border-image-slice: 30;
    border-image-width: 15px;*/
    border: 15px solid;
    border-image-slice: 30 30 30 30;
    border-image-width: 15px 15px 15px 15px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: repeat repeat;
    border-image-source: url(/Assets/img/popup-border.png);
    padding: 40px;
    margin: auto;
    min-width:100px;
    min-height:100px;
    max-height: 70vh;
    max-width: 80vh;
    overflow-y: auto;
}
.ntchtmlpopup h1,
.ntchtmlpopup h2 {
    color: #3196c3!important;
}
iframe.npu-content{
    width: 100%;
}
/*0.3.Visual Elements-END-*/
/*0.4.Master Elements*/
.secondMenu{
    display: none;
    background: #fff;
    font-family: "pt_sansregular";
    text-align: left;
    color: #444a4d;
}

#footerArea{
    position: relative;
    box-sizing: border-box;
    min-height: 710px;
    padding-top: 110px;
    color: #637075;
}
footer{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
footer .column{
    width: auto;
    height: auto;
}
footer .column:last-child{
    position: relative;
    top: -45px;
}
footer .column ul{
    list-style: none;
}
footer h4{
    margin-bottom: 20px;
    font-family: "pt_sansbold";
    font-size: 22px;
    color: #2b7d90;
    text-transform: uppercase;
}
.newsLetter > div{
    position: relative;
    bottom: -15px;
    float: left;
    font-family: 'montserrathairline';
    font-size: 44px;
    text-transform: uppercase;
}
.newsLetter > div > span{
    font-family: 'montserratblack';
}
span.blue{
    color: #2b7d90;
}
.newsLetter > form{
    float: right;
}
.newsLetter > form h4{
    font-family: 'montserrathairline';
    font-size: 15px;
}
.newsLetter > form h4 span{
    font-family: 'montserratblack';
}
.newsLetter > form input[type="email"]{
    box-sizing: border-box;
    height: 36px;
    width: 456px;
    padding-left: 10px;
    border: 1px solid #b7babb;
    background-color: rgba(255,255,255,0);
    font-family: "pt_sansregular";
    font-size: 15px;
    color: #676f72;
    line-height: 36px;
}
.newsLetter > form input[type="email"]::-webkit-input-placeholder {
   color: #676f72;
}
.newsLetter > form input[type="email"]:-moz-placeholder { /* Firefox 18- */
   color: #676f72;  
}
.newsLetter > form input[type="email"]::-moz-placeholder {  /* Firefox 19+ */
   color: #676f72;  
}
.newsLetter > form input[type="email"]:-ms-input-placeholder {  
   color: #676f72;  
}
.newsLetter > form input[type="email"]:focus{
    outline: 0px;
}
.newsLetter > form button{
    position: relative;
    bottom: -2px;
    box-sizing: border-box;
    height: 36px;
    width: 98px;
    border: 1px solid #b7babb;
    background-color: rgba(255,255,255,0);
    font-family: "pt_sansregular";
    font-size: 15px;
    color: #676f72;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
}
.copyRight{
    position: relative;
    top: 100px;
    clear: both;
}
#mobileCopyright{
    display: none;
}
#mobileNetuceFooter{
    display: none;
}
.footerColorBar{
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 46px;
    background-image: url(../img/color-bar.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#footerNavMenuArea{
    height: 100px;
    background-color: #72c2d1;
    color: #fff;
}
.footerNavMenu{
    display: flex;/*TODO: add cross-browser prefixes*/
    height: 100%;
    list-style: none;
}
.footerNavMenu li{
    display: flex;/*TODO: add cross-browser prefixes*/
    height: 100%;
    max-width: 12.5%;
    flex-grow: 1;/*TODO: add cross-browser prefixes*/
    border-right: 3px solid #fff;
    text-align: center;
    text-transform: capitalize;
}
.footerNavMenu li a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.footerNavMenu li:last-child, .footerNavMenu li:nth-child(1){
    border-right: 0px;
}
.footerNavMenu li a:hover{
    background-color: #00b4d5;
}
.paginationController{
    display: inline-block;
    position: relative;
    left: 50%;
    width:auto;
    margin-top: 20px;
    margin-bottom: 20px;
    transform: translateX(-50%);
    font-family: "pt_sansbold";
    color: #6b7173;
    list-style: none;
}
.paginationController li{
    display: inline-block;
    line-height: 30px;
    margin-right: 3px;
    margin-left: 3px;
}
.paginationController li.numberPageButton.active{
    color: #00b4d5;
}
.paginationController li.numberPageButton:nth-child(2){
    margin-left: 9px;
}
.paginationController li.numberPageButton:after{
    content: "-";
    margin-left: 6px;
    color: #6b7173;
}
.paginationController li.numberPageButton:nth-last-child(2):after{
    content: ""!important;
}
.paginationController li.pageButton{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background-color:#4f5b5f;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../img/arrow-left-mini.png');
}
.paginationController li.pageButton.previousPageButton {
    background-image: url('../../img/arrow-left-mini.png');
}
.paginationController li.pageButton.nextPageButton {
    background-image: url('../../img/arrow-right-mini.png');
}
.paginationController li.pageButton:hover{
    background-color:#00b4d5;
}
.button-xl-image{
    display: block;
    width: 300px;
    height: 255px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.sliderSideMenu-large{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content:space-between;
    -webkit-justify-content:space-between;
    position: relative;
    float: right;
    width: 300px;
    height: 530px;
}
.netuceFooter {
    position: absolute;
    right: 0px;
    bottom: -100px;
    font-size: 8px;
}
/*0.4.Master Elements -END-*/
/*0.5.Page Specific Elements*/
/*0.5.1.Home Page*/
.heroImage-1{
    background-image: url(../img/heroImage.jpg);
}
/*TODO: is this block page spesific or privite for slider or can split*/
/*MARK: Start-Code block ref.1*/
.mainSliders{
    margin-top: 0px;
}
.mainSlider{
    position: relative;
    width: 860px;
    height: 430px;
    float: left;
}
.pressSlider{
    height: 530px!important;
}
.newsHeaderImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sliderSideMenu{
    position: relative;
    float: right;
    width: 180px;
    height: 430px;
}
.sliderSideMenu.newsDetail{
    height: 480px;
}
.sliderSideMenu.newsDetail li.lastAdded{
    height: 50px;
    background: #3a87b1;
    color: #cfccaf;
    line-height: 50px;
}
.mainSlider .slidesContainer{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    //height: 404px;
    height: 100%;
    overflow-x: hidden;
}
.mainSlider .slidesContainer > ul{
    height: 100%;
}
.mainSlider .slidesContainer > ul > li{
    height: 100%;
    position: relative;
}
.mainSlider .capture{
    position: absolute;
    left: 25px;
    bottom: 45px;
    width: 805px;
    height: 112px;
    cursor: pointer;
}
.mainSlider .mainSlideImage{
    height: 385px !important;
}
/*MARK: End-Code block ref.1*/
#landing{
    position: relative;
    height: 858px;
    overflow: hidden;
}
#landing.landingType2{
    height: 780px;
}
.marks{
    position: relative;
    width: 100%;
    height: 190px;
    padding-bottom: 10px;
    background-image: url(../img/ataturk.png);
    //background-size: 100%;
    background-position: left bottom;
    background-repeat: no-repeat
}
.marks2{
    position: relative;
    top: -190px;
    width: 100%;
    height: 190px;
    padding-bottom: 10px;
    //background-size: 100%;
    background-position: left bottom;
    background-repeat: no-repeat
}
#utilityBar{
    position: absolute;
    bottom: 0px;
    height: 78px;
    color: #fff;
    overflow-y: hidden;
}
.weatherUtility{
    display: flex;
    justify-content: space-between;
    width: auto;
}
.degree{
    font-size: 48px;
    line-height: 78px;
}
.weatherDate .date{
    margin-left: 15px;
    margin-right: 15px;
    font-size: 12px;
}
#utilityBar div{
    line-height: 72px;
}
.weatherIcon, .cozumHattiIcon{
    position: relative;
    bottom: 7px;
    margin-right: 15px;
}
.searchUtility{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    padding-left: 40px;
    padding-right: 40px;
    line-height: normal !important;
}
.searchBox{
    //position: relative;
    //top: 19px;
    height: 40px;
    width: 100%;
    border: 1px solid #fff;
}
.searchBox input{
    box-sizing: border-box;
    height: 100%;
    width: calc(100% - 40px);
    padding-left: 10px;
    border: 0px;
    background-color: rgba(255,255,255,0);
    font-family: "pt_sansregular";
    color: #fff;
    line-height: 40px;
}
.searchBox input::-webkit-input-placeholder {
   color: #fff;
}
.searchBox input:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}
.searchBox input::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}
.searchBox input:-ms-input-placeholder {  
   color: #fff;  
}
.searchBox input:focus{
    outline: 0px;
}
.searchButton{
    width: 30px;
    height: 30px;
    border: 0px;
    background-color: rgba(0,180,213,0);
    cursor: pointer;
}
.cozumHatti{
    width: 300px;
}
.cozumHattiPhone{
    font-family: 'intro_regular';
    font-size: 36px;
}
.verticalScrollerContentContainer{
    position: relative;
    width: 618px;
    height: 463px;
    overflow: hidden;
}
.verticalScrollerContentContainer > ul{
    position: absolute;
    top: 0px;
    transition: top 0.3s ease-in-out;
}
#sliderArea{
    height: 500px;
}
/*TODO: this area should be empty or is there any style belong here?*/
/*
    #landing
#utilityBar
#sliderArea
#newsArea
    #servicesArea
    */
#newsArea{
    box-sizing: border-box;
    height: 671px;
    padding-top: 28px
}
.news{
    width: 618px;
    float: left;
}
.columnTitle img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.columnTitle h3{
    margin-bottom: 6px;
    font-family: 'pt_sansbold';
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    color: #44748a;
}
.notices, .bids{
    width: 262px;
    margin-left: 19px;
    float: left;
}
.news  ul, .notices  ul, .bids  ul{
   list-style: none;
}
.news  ul > li, .notices  ul > li, .bids  ul > li{
    padding-bottom: 6px;
    padding-top: 6px;
}
.columnElement{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 143px;
    border: 1px solid #d2d1d1;
    overflow: hidden;
}
.imageContainer{
    box-sizing: border-box;
    width: 288px;
    height: 131px;
    margin: 5px 0px 5px 5px;
    float: left;
    cursor: pointer;
}
.imageContainer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.textContainer{
    box-sizing: border-box;
    height: 111px;
    margin: 15px;
    float: left;
}
.news .textContainer{
    width: 287px;
}
.notices .textContainer, .bids .textContainer{
    width: 230px;
}
.textContainer .date{
    margin-bottom: 10px;
    font-family: 'pt_sansbold';
    font-size: 12px;
    color: #a5aeb2;
    text-transform: uppercase;
}
.textContainer h4{
    margin-bottom: 4px;
    font-family: 'pt_sansbold';
    font-size: 14px;
    color: #4c575c;
    text-transform: uppercase;
    cursor: pointer;
    white-space: normal;
}
.textContainer p{
    font-family: 'pt_sansregular';
    font-size: 14px;
    color: #848d91;
}
.columnElement .share{
    position: absolute;
    top: 8px;
    right: 8px;
}
.columnElement .share .shareSocialIcons{
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 42px;
}
.columnElement .share:hover > .shareSocialIcons{
    display: block;
}
.columnElement .share .iconShareFacebook{
    float: right;
    width: 21px;
    height: 21px;
    background-image: url(../img/icon-square-facebook.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}
.columnElement .share .iconShareTwitter{
    float: right;
    width: 21px;
    height: 21px;
    background-image: url(../img/icon-square-twitter.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}
.columnElement .download{
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-family: 'pt_sansbold';
    font-size: 10px;
    color: #cfcece;
    text-transform: uppercase;
}
.columnElement .download img{
    position: relative;
    bottom: 1px;
    margin-left: 4px;
}
.allNews{
    font-family: 'pt_sansbold';
    font-size: 12px;
    color: #568195;
    text-transform: uppercase;
}
.news .scroller, .notices .scroller, .bids .scroller{
    float: right;
}
.scroller{
    width: auto;
    height: 26px;
}
.scroller.enabled{
    display: block;
}
.scroller.disabled{
    display: none;
}
.scroller .buttonArrow{
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #d2d1d1;
    float: left;
    cursor: pointer;
}
.scroller .buttonArrow:last-child{
    margin-left: 8px;
}
.scroller .buttonArrow:hover{
    background-color: #00b4d5;
}
.buttonArrow[data-direction="up"]{
    background-image: url(../img/arrow-up.png);
    background-position: center;
    background-repeat: no-repeat;
}
.buttonArrow[data-direction="down"]{
    background-image: url(../img/arrow-down.png);
    background-position: center;
    background-repeat: no-repeat;
}
#servicesArea{
    height: 464px;
}
/*TODO: find and move here services styles*/
#calenderArea{
    box-sizing: border-box;
    height: 671px;
    padding-top: 50px;
    overflow-y: hidden;
}
.thisMonth{
    position: relative;
    top: -109px;
    width: 211px;
    height: 800px;
}
.thisMonth h3{
    margin-bottom: 35px;
    font-family: 'sf_movie_posterbold';
    font-size: 66px;
    color: #00b4d5;
    text-align: center;
    text-transform: uppercase;
}
.monthEvents{
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.monthEvents .verticalScrollerContentContainer{
    width: 100%;
    height: 460px;
}
.monthEvents ul{
    width: 100%;
}
.monthEvent{
    width: 100%;
    height: 230px;
}
.monthEvent time{
    font-family: 'pt_sansbold';
    font-size: 16px;
    color: #568195;
    text-transform: uppercase;
}
.monthEvent .eventLocation{
    font-family: 'pt_sansbold';
    font-size: 16px;
    color: #568195;
    text-transform: capitalize;
}
.monthEvent .eventThumbnail{
    width: 100%;
    height: 115px;
    object-fit: cover;
    -webkit-object-fit: cover;
    object-position: center;
    -webkit-object-position: center;
}
.monthEvent *{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.eventName{
    font-family: 'pt_sansbold';
    font-size: 18px;
    color: #444a4d; 
}
.eventType{
    font-size: 18px;
    color: #444a4d;
}
.thisMonth .scroller, .events .scroller{
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
.calendar{
    width: 427px;
}
.monthSelector{
    position: relative;
    width: 100%;
    margin-bottom: 36px;
    text-align: center;
    font-family: 'montserrathairline';
    font-size: 38px;
    color: #568195;
}
.arrow-circle-right{
    display: inline-block;
    position: absolute;
    bottom: 11px;
    right: 8px;
    width: 22px;
    height: 22px;
    background-image: url(../img/arrow-circle-right.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.arrow-circle-left{
    display: inline-block;
    position: absolute;
    bottom: 11px;
    left: 8px;
    width: 22px;
    height: 22px;
    background-image: url(../img/arrow-circle-left.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.calendar table{
    width: 100%;
    text-align: center;
    color: #568195;
}
.calendar table thead{
    font-family: 'montserratsemi_bold';
    font-size: 18px;
    text-transform: uppercase;
}
.calendar table tbody{
    font-family: 'sf_movie_posterbold';
    font-size: 38px;
    line-height: 57px;
}
.calendar table tbody tr{
    height: 57px;
}
.calendar table tbody tr td span{
    cursor: pointer;
}
td.selectedDay{
    background-image: url("../img/selected-day.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.selectedDayDetail{
    width: 435px;
    height: 50px;
    float: left;
}
.bigDate{
    width: 190px;
    color: #568195;
}
.bigDate .day{
    width: 100%;
    font-family: 'sf_movie_posterbold';
    font-size: 386px;
    line-height: 300px;
    text-align: center;
}
.bigDate .month{
    width: 100%;
    font-family: 'montserrathairline';
    font-size: 40px;
    text-align: center;
    text-transform: uppercase;
}
.selectedDayEvents{
    width: 240px;
}
.selectedDayEvents .verticalScrollerContentContainer{
    height: 450px;
    width: 100%;
}
.selectedDayEvents .verticalScrollerContentContainer ul{
    width: 100%;
}
.singleEvent{
    height: 90px;
}
.singleEvent .eventDate{
    overflow: hidden;
    font-family: "pt_sansbold";
    font-size: 16px;
    color: #568195;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#socialNetworksArea{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background-image: url(../img/heroImage-social.jpg);
}
/*TODO: İncelenecek, doğru yere taşınacak*/
#socialNetworksArea.contactPage{
    height: 180px;
    //background-image: url(../img/heroImage-social.jpg);
}
#socialNetworksArea > div{
    width: auto;
    height: auto;
}
#socialNetworksArea > div > h2{
    font-family: 'montserrathairline';
    color: #414b4f;
    font-size: 71px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}
#socialNetworksArea > div > h2 span{
    font-family: 'montserratbold';
    color: #00b4d5;
}
#socialNetworksArea > div > h2 img{
    margin-right: 23px;
    margin-left: 10px;
}
#socialNetworksArea .sectionEmphasis{
    font-size: 26px;
    white-space: nowrap;
}
.bigSocialMediaIconsContainer{
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding-left: 100px;
    padding-right: 100px;
}
.bigSocialMediaIcon{
    width: 100px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#facebook{
    background-image: url(../img/icon-big-facebook.png);
}
#twitter{
    background-image: url(../img/icon-big-twitter.png);
}
#instagram{
    background-image: url(../img/icon-big-instagram.png);
}
#youtube{
    background-image: url(../img/icon-big-youtube.png);
}
#vimeo{
    background-image: url(../img/icon-vimeo.png);
}
.bigSocialMediaIconsContainer #facebook:hover{
    background-image: url(../img/icon-big-facebook-hover.png);
}
.bigSocialMediaIconsContainer #twitter:hover{
    background-image: url(../img/icon-big-twitter-hover.png);
}
.bigSocialMediaIconsContainer #instagram:hover{
    background-image: url(../img/icon-big-instagram-hover.png);
}
.bigSocialMediaIconsContainer #youtube:hover{
    background-image: url(../img/icon-big-youtube-hover.png);
}
.mediumSocialMediaIconsContainer #facebook:hover{
    background-image: url(../img/icon-facebook-brown.png);
}
.mediumSocialMediaIconsContainer #twitter:hover{
    background-image: url(../img/icon-twitter-brown.png);
}
.mediumSocialMediaIconsContainer #instagram:hover{
    background-image: url(../img/icon-instagram-brown.png);
}
.mediumSocialMediaIconsContainer #youtube:hover{
    background-image: url(../img/icon-youtube-brown.png);
}
.mediumSocialMediaIconsContainer #vimeo:hover{
    background-image: url(../img/icon-vimeo-brown.png);
}
#testimonialArea{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 232px;
    background-image: url(../img/heroImage-2.jpg);
    background-color: #00b4d5;
    background-blend-mode: multiply;/*cross browser test?*/
}
#photoCarouselArea{
    width: 100%;
    height: 542px;
}
.photosContainer{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 512px;
    overflow-x: hidden;
    transition: all ease-out 0.3s;
}
.carouselPhoto{
    box-sizing: border-box;
    width: 20%;
    overflow: hidden;
}
.carouselPhoto > img{
    width: 100%;
    height: 256px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.carouselPhoto > img:hover{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}
.crouselControler{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 30px;
}
.crouselControler .leftButton, .crouselControler .rightButton{
    position: relative;
    width: 50%;
    height: 100%;
    float: left;
    background-color: #778a90;
    cursor: pointer;
}
.crouselControler .leftButton:hover, .crouselControler .rightButton:hover{
    background-color: #00b4d5;
}
.crouselControler .leftButton img, .crouselControler .rightButton img{
    position: absolute;
    top: 5px;
}
.crouselControler .leftButton img{
    right: 80px;
}
.crouselControler .rightButton img{
    left: 80px;
}
/*0.5.1.Home Page-END-*/
/*0.5.2.Inner Pages*/
#header{
    z-index: 100;
    position: relative;
    height: 300px;
    background-image: url(../img/heroImage.jpg);
    background-size: cover;
    background-position: top center;
    box-shadow: 1px 0px 60px rgba(0,0,0,0.75);/*cros-browser*/  
    overflow-x: visible;
}
#headerImg{
    position: relative;
    height: 290px; 
}
#pressHeaderImg{
    position: relative;
    height: 541px; 
    background-image: url(../img/press-header.jpg);
}
#pressHeaderImg > img{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    max-height: 100%;
    max-width: 100%;
}
.pageTitle{
    position: relative;
    height: 78px;
    background-color: #00b4d5;
    color: #FFF;
}
.pageTitle h1{
    overflow: hidden;
    font-family: 'pt_sansbold';
    font-size: 24px;
    line-height: 78px;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pageTitle .zoomTool{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: auto;
}
.zoomTool span{
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 100px;
    font-size: 10px;
    line-height: 78px;
    text-transform: uppercase;
    
    white-space: nowrap;
}
.zoomTool button{
    position: absolute;
    top: 0px;
    display: inline-block;
    height: 78px;
    padding: 0px;
    margin: 0px;
    background-color: rgba(255,255,255,0);
    border: 0px;
    font-family: 'pt_sansbold';
    font-size: 37px;
    line-height: 78px;
    color: #fff;
    cursor: pointer;
}
#zoomOut{
    right: 0px;
}
#zoomIn{
    right: 50px;
}
.zoomTool button:hover{
    color: #cfccaf;
}
.zoomTool button sup{
    font-size: 20px;
    line-height: 0px;
}
#socialNetworksBar{
    height: 88px;
    background-color: #dde6ea;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6b7173;
}
#socialNetworksBar > *{
    margin-left: 5px;
    margin-right: 5px;
}
#socialNetworksBar .icon{
    width: 45px;
    height: 45px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#socialNetworksBar .icon#facebook{
    background-image: url(../img/icon-circle-border-facebook.png);
}
#socialNetworksBar .icon#twitter{
    background-image: url(../img/icon-circle-border-twitter.png);
}
#socialNetworksBar .icon#linkedIn{
    background-image: url(../img/icon-circle-border-linkedin.png);
}
#socialNetworksBar .icon#googlePlus{
    background-image: url(../img/icon-circle-border-googleplus.png);
}
#socialNetworksBar .icon#facebook:hover{
    background-image: url(../img/icon-circle-border-hover-facebook.png);
}
#socialNetworksBar .icon#twitter:hover{
    background-image: url(../img/icon-circle-border-hover-twitter.png);
}
#socialNetworksBar .icon#linkedIn:hover{
    background-image: url(../img/icon-circle-border-hover-linkedin.png);
}
#socialNetworksBar .icon#googlePlus:hover{
    background-image: url(../img/icon-circle-border-hover-googleplus.png);
}
/*0.5.2.Inner Pages-END-*/
/*0.5.3.News*/
#allNewsArea{
    margin-top: 90px;
    margin-bottom: 20px;
}
.allNewsMain, .allNoticesMain{
    width: 100%;
    height: auto;
    display: flex;/*TODO: Add missing prefixes*/
    flex-wrap: wrap;
    list-style: none;
    overflow: hidden;
}
.newsThumbnail{
    position: relative;
    box-sizing: border-box;
    padding: 7px;
    border: 1px solid #d2d1d1;
}
.allNewsMain .newsThumbnail{
    height: 350px;
}
.allNoticesMain .newsThumbnail{
    height: 205px;
}
.allNoticesMain .newsThumbnail:hover{
    background-color: #ecf2f3;
}
.newsThumbnailImageContainer{
    width: 100%;
    height: 170px;
}
.newsThumbnailImageContainer img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.allNoticesMain .newsThumbnail .newsContent{
    display: block;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.newsDate, 
.eventLocation,
.eventCategory{
    color: #a5aeb2;
    text-transform: uppercase;
}
.eventCategory + .quoteContainer,
.eventLocation + .quoteContainer { 
    margin-top: 50px;
}
.newsThumbnailMeta{
    width: 100%;
    height: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.hoverLine{
    position: absolute;
    bottom: 7px;
    width: calc(100% - 14px);
    height: 10px;
}
.newsThumbnail:hover .heading3{
    color: #00b4d5;
}
.newsThumbnail:hover .hoverLine{
    background-color: #00b4d5;
}
#newsUtility{
    height: 88px;
    background-color: #deedf4;
    color: #00b4d5;
}
#newsUtility > div{
    height: 100%;
}
#newsUtility .searchBox{
    border: 1px solid #00b4d5;
}
#newsUtility .searchBox input{
    color: #00b4d5;
}
.moreNews{
    cursor: pointer;
}
.searchBox input::-webkit-input-placeholder {
   color: #00b4d5;
}
.searchBox input:-moz-placeholder { /* Firefox 18- */
   color: #00b4d5;  
}
.searchBox input::-moz-placeholder {  /* Firefox 19+ */
   color: #00b4d5;  
}
.searchBox input:-ms-input-placeholder {  
   color: #00b4d5;  
}
/*0.5.3.News-END-*/
/*0.5.4.News Detail*/
.backgroundHelper-blue{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background-color: #00b4d5;
}
.backgroundHelper-orange{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background-color: #e8ae11;
}
.newsTitle{
    position: relative;
    width: calc(100% - 160px);
    height: 100%;
}
.newsTitle .zoomTool{
    right: 20px;
}
.listenToNews{
    width: 160px;
    height: 100%;
    line-height: 78px;
}
.newsBody{
    padding-top: 100px;
    padding-bottom: 150px;
}
.newsBody p{
    margin-bottom: 16px;
}
.newsBody p:last-child{
    margin-bottom: 0px;
}
.audioPlayer {
    display: none;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    width: 100%;
}
.audioPlayer.open {
    display: block;
}
[data-open-audio-player] {
    cursor: pointer;
}
/*0.5.4.News Detail -END-*/
/*0.5.4.Council Decision Detail*/
.councildecisionBody {
     padding-top: 100px;
    padding-bottom: 100px;
}
.fileBar {
    padding: 15px 0;
}
.buttonfileUpload {
    display: inline-block;
    height: 35px;
    width: 135px;
    line-height: 34px;
    text-align: center;
    text-transform:uppercase;
    font-weight: 600;
    color: #deedf4;
    background-color: #00b4d5;
}
/*0.5.4.Council Decision-END-*/
/*0.5.5.Notices*/
.noticeSwitch{
    display: flex;
    height: 54px;
}
.noticeSwitch > div{
    height: 100%;
    background-color: #c1cdd2;
    flex-grow: 1;
    text-align: center;
    line-height: 55px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}
.noticeSwitch .active{
    background-color: #75a6ba;
}
a.download{
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    color: #848d91;
    text-transform: uppercase;
}
a.download:hover{
    color: #00b4d5;
}
a.download:hover > .icon-download{
    background-image: url(../img/icon-download-hover.png);
}
/*0.5.5.Notices -END-*/
/*0.5.6.Contact*/
#mapArea{
    height: 425px;
    overflow: hidden;
}
#mapArea iframe {
  height: 100%;
  width: 100%;
  border: 0;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='//www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(99%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}
#contactInfoArea{
    height: 150px;
}
#contactInfoArea > div{
    height: 100%;
}
.phoneArea, .faxArea{
    font-family: 'intro_regular';
    font-size: 50px;
    white-space: nowrap;
}
#otherLocationsArea > ul{
    flex-wrap: wrap;
    justify-content: flex-start;
}
#otherLocationsArea > ul > li{
    width: calc(33% - 20px);
    margin-right: 30px;
    height: 275px;
    margin-bottom: 30px;
}
#otherLocationsArea > ul > li:nth-child(3n){
    margin-right: 0px;
}
.singleLocation{
    position: relative;
    text-align: center;
}
.singleLocation > h3{
    margin-top: 25px;
}
.singleLocation > p{
    position: absolute;
    top: 84px;
}
.singleLocation > div{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 130px;
    background-image: url(../img/button-map.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}
.singleLocation > div > a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(113,115,119,0.85);
    color: #fff;
}
.singleLocation > div > a:hover{
    background-color: rgba(0,180,213,0.85);
}
/*0.5.6.Contact -END-*/
/*0.5.7.Mayor*/
#whoIsMayor{
    padding-top: 90px;
    padding-bottom: 90px;
}
#whoIsMayor p {
    margin-bottom: 90px;
}
#messageFromMayor{
    padding-bottom: 135px;
    overflow: hidden;
}
#messageFromMayorList{
    padding-bottom: 100px;
}
.mayorMessage{
    margin-top: 70px;
    width: calc(100% - 260px);
}
.mayorMessage p{
    margin-bottom: 16px;
}
.mayorImage{
    position: absolute;
    top: -110px;
    right: 40px;
}
.mayorImage > img{
    width: 160px;
}
#mayorsSocialMedia{
    height: 200px;
    background-image: url(../img/background-socialMediaArea.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*Doğru yere taşınacak*/
#mayorsSocialMedia.contactSocialMedia{
    height: 200px;
    background-image: url(../img/background-computer.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#mayorsSocialMedia > div{
    max-width: 740px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}
#mayorsSocialMedia > div span{
    display: block;
    width: 57px;
    height: 57px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.socialMediaIconContainer-salt #facebook{
    background-image: url(../img/logo-white-facebook.png);
}
.socialMediaIconContainer-salt #twitter{
    background-image: url(../img/logo-white-twitter.png);
}
.socialMediaIconContainer-salt #instagram{
    background-image: url(../img/logo-white-instagram.png);
}
.socialMediaIconContainer-salt #youtube{
    background-image: url(../img/logo-white-youtube.png);
}
.socialMediaIconContainer-salt #vimeo{
    background-image: url(../img/logo-white-vimeo.png);
}
.socialMediaIconContainer-salt #facebook:hover{
    background-image: url(../img/logo-blue-facebook.png);
}
.socialMediaIconContainer-salt #twitter:hover{
    background-image: url(../img/logo-blue-twitter.png);
}
.socialMediaIconContainer-salt #instagram:hover{
    background-image: url(../img/logo-blue-instagram.png);
}
.socialMediaIconContainer-salt #youtube:hover{
    background-image: url(../img/logo-blue-youtube.png);
}
.socialMediaIconContainer-salt #vimeo:hover{
    background-image: url(../img/logo-blue-vimeo.png);
}
.mayorCalender .bigDate{
    color: #b2a593;
}
.mayorCalender .singleEvent .eventDate{
    color: #b2a593;
}
.mayorCalender td.selectedDay{
        background-image: url("../img/selected-day-brown.png");
}
#messageFromMayorList > .fixedWidth{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.messageFromMayorList{
    width: 50%;
}
.messageFromMayorList .verticalScrollerContentContainer{
    width: 100%;
    height: 430px;
}
.messageFromMayorList ul{
    width: 100%;
}
.messageFromMayorList ul li{
    display: block;
    width: 100%;
    height: 33px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.verticalScrollerContentContainer ul li .innerBox {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #879193;
    padding-left: 20px;
    overflow: hidden;
    line-height: 31px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.verticalScrollerContentContainer ul li .innerBox:hover{
    background-color: #00b4d5;
    color: #fff;
}
.mayorVideo {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    margin-left: 25px;
}
.fullWidthTitle {
    height: 55px;
    margin-bottom: 10px;
    background-color: #b2a593;
    font-family: 'sf_movie_posterbold';
    font-size: 80px;
    line-height: 55px;
    color: #b2a593;
}
.fullWidthTitle span.fullWidthTitleText{
    display: inline-block;
    height: 100%;
    padding-right: 10px;
    background-color: #fff;
}
.mayorMessageVideoContainer {
    height: 325px;
    width: auto;
    margin-bottom: 10px;
}
.mayorMessageVideoContainer iframe{
    height: 100% !important;
    width: 100% !important;
}
.mayorVideo h2{
    font-weight: 700;
}
/*0.5.7.Mayor -END*/
/*0.5.9.Search*/
.searchList li{
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}
.searchList li:last-child{
    border-bottom: 0px;
}
.searchList h2{
    color: #2b7d90;
}
.searchList p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.searchList p > *{/*Temporary style it will be remove after right search code in GloabalSearch.cshtml*/
    display: none;
}
.searchLink{
    margin-top: 12px;
    color: #00b4d5;
}
/*0.5.9.Search-END*/
/*0.5.10.Press*/
#pressSliderArea{
    margin-top: 40px;
    margin-bottom: 40px;
}
.pressSlider .capture{
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 145px;
    background-color: #fff!important;
    color: #3f4345!important;
}
.pressSlider .capture .blendContent{
    color: #3f4345!important;
}
.pressNewsList{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width: 100%;
    height: auto;
}
.pressNewsList li{
    width: calc(33.3333% - 32px);
    height: auto;
    margin: 30px 24px;
}
.pressNewsList li:hover{
    color: #00b4d5;
}
.pressNewsList li:nth-child(3n+1){
    margin-left: 0px;
}
.pressNewsList li:nth-child(3n){
    margin-right: 0px;
}
.pressNewsList li h3{
    font-size: 30px;
    font-family: 'pt_sansbold';
    text-transform: uppercase;
}
.pressNewsList li .pressNewsDate{
    font-size: 14px;
    font-family: 'pt_sansbold';
}
.pressNewsList li p{
    display: box;
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}
/*0.5.10.Press-END*/
/*0.5.11.Organization Schema*/
#cvArea {
    margin-top: 55px;
    margin-bottom: 55px;
}
.cvContainer {
    display: flex;
    display: -webkit-flex;
}
.cvContainer > *{
    margin-right: 80px;
    margin-left:80px;
}
.cvContainer > *:first-child{
    margin-left: 0px;
}
.cvContainer > *:last-child{
    margin-right: 0px;
}
.cvContainer {
    display: flex;
    display: -webkit-flex;
}
.cvTagArea .profileList li {
    width: 100%;
}
/*0.5.11.Organization Schema-END*/
/*0.5.12.Video Gallery*/
#videoSectionTop,
#videoSectionBottom {
    padding-top: 70px;
    padding-bottom: 70px;
}
#videoSectionTop{
    padding-bottom: 70px;
}
#videoSectionBottom {
    padding-bottom: 40px;
}
#videoBanner {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    height: 210px;
    background-image: url('../img/video-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
}
#videoBanner > div > *{
    margin-bottom: 10px;
}
#videoBanner .mainLine{
    font-family: 'montserrathairline';
    font-size: 36px;
}
#videoBanner .mainLine strong{
    font-family: 'montserratbold';
}
#videoBanner .subLine{
    font-size: 13px;
}
/*0.5.12.Video Gallery-END*/
/*0.5.Page Specific Elements-END-*/
/*0.6.Elements*/
.element{
    width: 100%;
    height: auto;
    //padding-top: 10px;
    //padding-bottom: 10px;
    overflow: hidden;
}
.element .heading{
    width: 100%;
    height: 56px;
    background-color: #b0c0c7;
}
.element .heading h2{
    font-family: 'pt_sansbold';
    font-size: 26px;
    line-height: 56px;
    color: #fff;
    text-transform: capitalize;
}
.hidden{
    display: none !important;
}
/*e1*/
.e1{
    background-color: #deedf4;
}
.quoteContainer:before{
    display: block;
    width: 50px;
    height: 50px;
    content: "“";
    font-family: 'pt_sansbold';
    font-size: 135px;
    color: #a5aeb2;
}
.quoteContainer:after{
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    content: "”";
    font-family: 'pt_sansbold';
    font-size: 135px;
    color: #a5aeb2;
}
.quoteContainerContainer{
    position: relative;
    height: auto;
    margin-right: 70px;
}

/*e2*/
.e2 .content{
    padding-top: 40px;
    padding-bottom: 60px;
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
}
.e2 .withImage-text{
    width: 60%;
    float: left;
}
.e2 .withImage-image{
    width: 30%;
    height: 100%;
    float: right;
}


/*e3*/
.e3 .content{
    padding-top: 65px;
    padding-bottom: 10px;
}
.profileList{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.profileList li{
    box-sizing: border-box;
    display: flex;
    margin-right: 15px;
    margin-bottom: 70px;
    margin-left: 15px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.profileList li.flexLayoutHelper{
    width: 215px;
    height: 0px;
    margin-bottom: 0px;
}
.profileList .profilePic{
    width: 215px;
    height: 215px;
    border-radius: 50%;
    border: 5px solid #a5aeb2;
    margin-bottom: 34px;
    overflow: hidden;
}
.profileList li:hover .profilePic{
    border-color: #00b4d5;
}
.profilePic img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.profileList .profileName{
    font-family: 'pt_sansbold';
    font-size: 25px;
    text-transform: uppercase;
}
.profileList .profileTitle{
    font-family: 'pt_sansbold';
    font-size: 16px;
    text-transform: capitalize;
}
.profileList li:hover .profileName, .profileList li:hover .profileTitle{
    color: #00b4d5;
}
.profileList .profileEmail{
    font-family: 'pt_sansitalic';
    font-size: 16px;
}
.profileList .profileCv{
    display: inline-block;
    padding: 3px 40px 3px 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #b0c0c7;
    font-family: 'pt_sansbold';
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
}
.profileList li:hover .profileCv{
    background-color: #00b4d5;
}
.profileList .profilePhone, .profileList .profileFax{
    font-family: 'pt_sansbold';
    font-size: 16px;
}
.profileList .profilePhone > span{
    position: relative;
    top: 3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-image: url(../img/icon-mini-phone.png);
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}
.profileList .profileFax > span{
    position: relative;
    top: 5px;
    display: inline-block;
    width: 17px;
    height: 20px;
    margin-right: 10px;
    background-image: url(../img/icon-mini-printer.png);
    background-size: 17px 20px;
    background-position: center;
    background-repeat: no-repeat;
}


/*e4*/
.e4{
    background-color: #e8f0f3;
}
.e4 .content{
    padding-top: 75px;
    padding-bottom: 75px;
}
.tableLikeList{
    width: 100%;
    color: #4a4d4e;
}
.tableLikeList li{
    
    width: 100%;
    height: 45px;
    border: 1px solid #b0c0c7;
    margin-bottom: 15px;
    line-height: 45px;
    cursor: pointer;
}
.tableLikeList li > a{
    display: flex;
    width: 100%;
    height: 100%;
}
.tableLikeList li:last-child{
    margin-bottom: 0px;
}
.tableLikeList li:hover{
    border: 1px solid #00b4d5;
}
.tableLikeList li .subdata{
    width: 150px;
    border-right: 1px solid #b0c0c7;
    text-align: center;
}
.tableLikeList li:hover .subdata{
    border-right: 1px solid #00b4d5;
}
.tableLikeList li .data{
    box-sizing: border-box;
    flex-grow: 1;
    padding-left: 20px;   
}
.tableLikeList li .action{
    width: 120px;
    border-left: 1px solid #b0c0c7;
    text-align: center;
}
.tableLikeList li:hover .action{
    border-left: 1px solid #00b4d5;
    color: #00b4d5;
}
.tableLikeList li:hover .icon-download{
    background-image: url(../img/icon-download-hover.png);
}


/*e5*/
.e5 .content{
    padding-top: 65px;
    padding-bottom: 100px;
}
.linkList{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.linkList li{
    box-sizing: border-box;
    display: block;
    width: calc(50% - 13px);
    height: 46px;
    margin-bottom: 30px;
    border: 1px solid #b0c0c7;
    text-align: center;
    line-height: 46px;
}
.linkList li:nth-child(odd){
    margin-right: 26px;
}
.linkList .leftContent{
    margin-left: 20px;
    float: left;
}
.linkList .rightContent{
    margin-right: 20px;
    float: right;
    font-family: 'pt_sansbold';
    color: #00b4d5;
}
.linkList li:hover{
    border: 0px;
    background-color: #00b4d5;
    color: #fff;
}
.linkList li:hover .rightContent{
    color: #fff;
}
.linkList li > a{
    display: inline-block;
    width: 100%;
    height: 100%;
}


/*e6*/
.e6 .content{
    padding-top: 110px;
    padding-bottom: 140px;
    color: #40565a;
}
.iconList{
    display: flex;
    flex-wrap: wrap;
}
.iconList li{
    width: 200px;
    height: auto;
    margin-bottom: 90px;
    text-align: center;
}
.iconList li.flexLayoutHelper{
    width: 200px;
    height: 0px;
    margin-bottom: 0px;
}
.iconList li > a{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}
.iconForm{
    width: 123px;
    height: 58px;
    background-image: url(../img/icon-form.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.iconList .iconImg{
    margin-bottom: 20px;
}
.iconList .iconTitle{
    margin-bottom: 3px;
    font-family: 'pt_sansbold';
    font-size: 16px;
    text-transform: uppercase;
}
.iconList .iconSubtitle{
    font-size: 16px;
    text-transform: uppercase;
}
.iconList li:hover .iconForm{
    background-image: url(../img/icon-form-hover.png);
}
.iconList li:hover .iconTitle{
    color: #00b4d4;
}
.iconList li:hover .iconSubtitle{
    color: #00b4d4;
}


/*e7*/
.e7 .content{
    box-sizing: border-box;
    position: relative;
    padding-bottom: 46px;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.e7 .content .blendBackground{
    background-color: #deedf4;  
}
.e7 > .content > .fixedWidth > .flexContainer.withGap{
    align-items: flex-start;
}
.e7 > .content > .fixedWidth > .flexContainer.withGap > div{
    align-items: flex-start;
}
.flexStartNoMarginException{
    margin-top: 0px !important;
}
.forContact{
    font-family: 'pt_sansbold';
    text-align: right;
    text-transform: uppercase;
    margin-bottom: 40px;
}
.forContactType > div{
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #b75258;
    text-align: right;
}
.forContactType > div:last-child{
    border-bottom: 0px;
}


/*e8*/
.e8 .content{
    padding-top: 36px;
    padding-bottom: 36px;
}
.collapsableColoredList li{
    margin-bottom: 10px;
}
.collapsableColoredList li:last-child{
    margin-bottom: 0px;
}
.contentListItem{
    max-height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-y: hidden;
    transition: all 1s ease-in-out;
}
.collapsableColoredList li .headingListItem{
    background-color: #f2f8fb;
    font-family: 'pt_sansbold';
    font-size: 18px;
    color: #00b4d5;
    line-height: 40px;
    text-transform: uppercase;
    cursor: pointer;
}
.collapsableColoredList li.open .headingListItem{
    background-color: #00b4d5;
    font-family: 'pt_sansbold';
    font-size: 18px;
    color: #f2f8fb;
    line-height: 40px;
    text-transform: uppercase;
}
.collapsableColoredList li.open .contentListItem{
    max-height: 4000px;/*Very very big number because of expanding animation works(It does not work with auto height)*/
    padding-top: 5px;
    padding-bottom: 5px;
}


/*e9*/
.e9 .content{
    padding-top: 39px;
    padding-bottom: 75px;
}
.galleryList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.galleryList li{
    width: calc(25% - 9px);
    height: 180px;
    margin-bottom: 12px;
    background: #f2f8fb;
}
.galleryList li.flexLayoutHelper{
    width: calc(25% - 9px);
    height: 0px;
    margin-bottom: 0px;
}
.galleryList li img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: pointer;
}
.galleryList li img:hover{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}


/*e10*/
.e10 .content{
    padding-top: 40px;
    padding-bottom: 50px;
}
.bookList{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.bookList li{
    width: 225px;
    margin-bottom: 30px;
    cursor: pointer;
}
.bookList li.flexLayoutHelper{
    width: 225px;
    height: 0px;
    margin-bottom: 0px;
}
.bookList li .bookCover{
    width: 100%;
    margin-bottom: 10px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
.bookList li:hover .bookCover{
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}
.bookCover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bookList li:hover .bookTitle{
    color: #66c7ee;
}
.icon-download2{
    display: inline-block;
    width: 21px;
    height: 22px;
    float: right;
    background-image: url(../img/icon-download2.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.bookList li:hover .icon-download2{
    background-image: url(../img/icon-download2-hover.png);
}


/*e11*/
.e11 .content {
    padding-top: 60px;
    padding-bottom: 75px
}
.districtstructurelist li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.districtstructurelist li > div {
    border: 1px solid #b0c0c7;
    padding: 10px;
}
.districtstructurelist li > div:first-child {
    margin-right: 15px;
    width: 317px;
    background-color: #e1ecee;
    flex: 1;
}
.districtstructurelist li > div:nth-child(2) {
    width: 515px;
    flex: 2;
}
.districtstructurelist li > div:last-child {
    margin-left: 15px;
    width:317px;
    flex: 1;
}

/*e12*/
.e12 .content {
    padding-top: 125px;
    padding-bottom: 60px;
}
.friendcitylist >li {
    width: 580px;
    height: 156px;
    border: 1px solid #b0c0c7;
    float: left;
    margin-bottom: 15px;
    margin-right: 15px;
}
.friendcitylist >li:nth-child(2n+2) {
    margin-right: 0;
}
.friendcitylist > li > a {
    display: flex;
    padding: 5px;
    position: relative;
}
.friendcitylist > li > a > img {
    width: 168px;
    height: 148px;
    object-fit: cover;
    margin-right: 65px;
}
.friendcitylist > li > a > span {
    position:  absolute;
    right: 5px;
    bottom: 5px;
}
/*e13*/
.e13 .content {
    padding-top: 60px;
    padding-bottom: 55px;
}
.fqalist > li {
    margin-bottom: 15px;
}
.fqalist > li > .itemheader {
    border: 1px solid #b0c0c7;
    padding: 10px;
    margin-bottom: 15px;
}

/*0.6.Elements-END*/
/*0.7.Functional*/
.f-disableScroll{
    position: relative;
    max-height: 100vh;
    overflow: hidden;
}
/*0.7.Functional-END*/
/*0.8.Others*/
.npu-button-next,
.npu-button-previous{
    background-color: #568195 !important;
}
/*0.8.Others-END*/
/*0.Device Independent Styles-END-*/
/*1.Desktop Styles*/
@media only screen and (min-width: 1180px){
/*1.1Typographic Elements*/
/*1.1Typographic Elements-END*/
/*1.2.Layout Elements*/
    .fixedWidth{
        position: relative;
        width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }
    .hideDesktop{
        display: none;
    }
/*1.2.Layout Elements-END*/
/*1.3.Visual Elements*/
    .sliderSideMenu .services > li{
        position: relative;
        display: block;
        width: 180px;
        height: 143.33px; 
    }
/*1.3.Visual Elements-END*/
/*1.4.Master Elements*/
    .navBar{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.75);/*cros-browser*/  
        overflow: visible;
    }
    .navBarSpaceHolder{
        height: 100px;
    }
    .navBar > .blendBackground{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: #00b4d5;
    }
    nav{
    position: relative;
    top: 40px;
    left: 0px;
    width: calc(100% - 100px);
    color: #fff;
}
.firstMenu{
    display: flex;
    justify-content: space-between;
    height: 60px;
    list-style: none;
}
.firstMenu > li{
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    //border-left: 1px solid #fff;
    //text-align: center;
    line-height: 60px;
    font-family: 'pt_sansbold';
    font-size: 16px;
}
.firstMenu > li:hover{
    background-color: #fff;
    color: #444a4d;
}
nav > ul > li:last-child:hover{
    background-color: rgba(0,180,213,0);
}
nav > ul > li:first-child{
    border-left: 0px;
}
.firstMenu > li:hover > .secondMenu{
    display: block;
}
.secondMenu{
    display: none;
    position: absolute;
    top: 60px;
    left: 0px;
    width: 240px;
    padding-left: 15px;
    background: #fff;
    font-family: "pt_sansregular";
    text-align: left;
    color: #444a4d;
}
.secondMenu > li, .sideMenu > li {
    position: relative;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #d2d1d1;
    padding-right: 10px;
}
.secondMenu > li span.icon{
    display: inline-block;
    position: relative;
    top: 20px;
    float: right;
    vertical-align: middle;
}
.secondMenu > li:last-child, .sideMenu > li:last-child{
    border-bottom: 0px;
}
.secondMenu > li > a, .sideMenu > li > a{
    display: inline-block;
    height: 100%;
    width: 100%;
}
.secondMenu > li:hover > .sideMenu{
    display: block;
}
.sideMenu{
    display: none;
    position: absolute;
    left: 240px;
    top: 0px;
    min-width: 240px;
    padding-left: 15px;
    background: #fff;
    border-left: 1px solid #d2d1d1;
    font-family: "pt_sansregular";
    text-align: left;
    color: #444a4d;
}
.tv{
    border-left: 0px;
}
.tv img{
    position: relative;
    bottom: 6px;
}
.bbLogo{
    position: absolute;
    top: 50px;
    left: 0px;
    width: 860px;
}
/*1.4.Master Elements-END*/
/*1.5.Page Specific Elements*/
/*1.5.1.Home Page*/
    /*#landing*/
    .withSideMenu .mainSlider{
        width: 1000px;
    }
    .newsHeaderImg{
        position: relative;
        width: 1000px;
        height: 480px;
        float: left;
    }
    .mayor{
        position: absolute;
        right: 0px;
        bottom: 10px;
        width: 300px;
        height: 190px;
    }
    .mayor > div{
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 196px;
    }
    .mayor .ei h3{
        font-family: "pt_sansbold";
        font-size: 11px;
        color: #897f6d;
    }
    .mayor .ei h2{
        font-family: 'bebas_neuebold';
        font-size: 34px;
        color: #454344;
    }
    .mayor .ieWeb{
        font-family: 'pt_sansregular';
        font-size: 13px;
        color: #897f6d;
    }
    .mayor .ieWeb .mayorWebSite{
        font-family: 'pt_sansregular';
        font-size: 16px;
        color: #454344;
    }
    .mayorWebSite span{
        color: #897f6d;
    }
    .mediumSocialMediaIconsContainer{
        margin-top: 10px;
    }
    .mediumSocialMediaIconsContainer{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto;
    }
    .mediumSocialMediaIcon{
        width: 30px;
        height: 30px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mayorImg{
        position: absolute;
        top: 30px;
        right: 0px;
    }
    
    /*#utilityBar*/
    /*#sliderArea*/
    /*#newsArea*/    
    /*#servicesArea*/
    .headerSliderPositionHelper{
        position: relative;
        top: 200px;
    }
    
    .horizantalImageList{
        width: 100%;
        height: 100%;
        list-style: none;
    }
    @media only screen and (min-width: 1545px) {
        .horizantalImageList li:first-child{
            background-size: 100% auto !important;
        }
        .horizantalImageList li:last-child{
            background-size: 100% auto !important;
        }
         .horizantalImageList li:first-child:hover{
            background-size: 110% auto !important;
        }
        .horizantalImageList li:last-child:hover{
            background-size: 110% auto !important;
        }
    }
    .horizantalImageList li{
        display: block;
        position: relative;
        width: 196px;
        height: 100%;
        float: left;
        overflow: hidden;
        background-size: cover;
    }
    .horizantalImageList li:first-child{
        width: calc( 50% - 392px);
    }
    .horizantalImageList li:last-child{
        width: calc( 50% - 392px);
    }
    .horizantalImageList > li .contentContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .horizantalImageList li:first-child .contentContainer{
        right: 0px;
    }
    .horizantalImageList li:last-child .contentContainer{
        left: 0px;
    }
    .horizantalImageList h3, .horizantalImageList p{
        color: #fff;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    .horizantalImageList a{
        color: #fff;
        text-align: center;
    }
    .horizantalImageList .imageBackground{
        transition: all 0.7s;
        -moz-transition: all 0.7s;
        -ms-transition: all 0.7s;
        -o-transition: all 0.7s;
        -webkit-transition: all 0.7s;
    }
    .horizantalImageList img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    .horizantalImageList h3{
        margin-bottom: 20px;
        font-family: 'montserratbold';
        font-size: 20px;
        text-transform: uppercase;
    }
    .horizantalImageList p{
        font-size: 14px;
    }
    .horizantalImageList div.plusSymbol{
        display: block;
        position: absolute;
        bottom: 0px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        font-family: 'montserrathairline';
        font-size: 48px;
        text-align: center;
        line-height: 56px;

        transition: all 0.5s;
    }
    .horizantalImageList  > li:hover .contentContainer  .plusSymbol{
        transform: rotate(360deg);
        font-size: 72px;
        line-height: 80px;
    }
    .horizantalImageList  > li:hover .imageBackground{
        transform: scale(1.2);
    }
    .horizantalImageList > li:hover{
        background-size: 110% 110%;
    }

    #saglik{
        background-image: url(../img/bg-saglik.jpg);
    }
    #kadinVeAile{
        background-image: url(../img/bg-kadinVeAile.jpg);
    }
    #egitim{
        background-image: url(../img/bg-egitim.jpg);
    }
    #evlilik{
        background-image: url(../img/bg-evlilik.jpg);
    }
    #veteriner{
        background-image: url(../img/bg-veteriner.jpg);
    }
    #spor{
        background-image: url(../img/bg-spor.jpg);
    }
    
    /*#calenderArea*/
    .calenderFlex{
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }
    /*#socialNetworksArea*/
    #socialNetworksArea{
        height: 464px;
    }
    /*#testimonialArea*/
    /*#photoCarouselArea*/
    
/*1.5.1.Home Page-END*/
/*1.5.2.Inner Pages*/
.pageTitle h1{
    width: calc(100% - 220px);
}
/*1.5.2.Inner Pages-END*/
/*1.5.3.News*/
    .newsThumbnail{
        width: calc(33.333% - 16px);
        margin-right: 24px;
        margin-bottom: 24px;
    }
    .newsThumbnail:nth-child(3n){
        margin-right: 0px;
    }
/*1.5.3.News-END*/
/*1.5.4.News Detail*/
    .newsBody .newsDate{
        position: absolute;
        top: 20px;
        left: 0px;
    }
    .newsBody .eventLocation{
        position: absolute;
        top: 40px;
        left: 0px;
    }
    .newsBody .eventCategory{
        position: absolute;
        top: 70px;
        left: 0px;
    }
/*1.5.4.News Detail-END*/
/*1.5.6.Contact*/
    .contactNumberGroup{
        flex-grow: 1;
        -webkit-flex-grow: 1;
        justify-content: space-around;
        -webkit-justify-content: space-around;
    }
/*1.5.6.Contact-END*/
/*1.5.11.Organization Schema*/
    .cvContainer > *{
        margin-right: 80px;
        margin-left:80px;
    }
/*1.5.11.Organization Schema-END*/
/*1.5.Page Specific Elements-END*/
/*1.6.Elements*/
    .quoteContainer:before{
        position: absolute;
        left: -70px;
        top: -70px;
    }
    .quoteContainer:after{
        right: -70px;
        bottom: -20px;
    }

    /*e1*/
    .e1 .content{
        padding-top: 85px;
        padding-bottom: 70px;
    }

    /*e3*/
    .profileList{
        justify-content: space-between;
    }

    /*e6*/
    .iconList{
        justify-content: space-between;
    }

    /*e7*/
    .e7 .content{
        padding-top: 77px;
    }
    .e7 .flexContainer .quoteContainerContainer{
        width: 80%;
    }
/*1.6.Elements=END*/
}
/*1.Desktop Styles-END-*/

@media only screen and (min-width: 501px) and (max-width: 1179px){
/*2.Tablet Styles*/
/*2.1Typographic Elements*/
/*2.1Typographic Elements-END*/
/*2.2.Layout Elements*/
    .fixedWidth{
        width: 100%;
    }
    .fixedWidthWithPadding{
        box-sizing: border-box;
        padding-right: 20px;
        padding-left: 20px;
    }
    #sliderArea{
        height: auto;
    }
    .sliderContainer{
        height: auto;
        padding: 0px;
    }
    .hideTablet{
        display: none;
    }
/*2.2.Layout Elements-END*/
/*2.3.Visual Elements*/
    .sliderSideMenu .services > li{
        width: 100%;
    }
/*2.3.Visual Elements-END*/
/*2.4.Master Elements*/
    /*.navBar{
        position: relative;
        height: 100px;
        background-color: rgba(0,180,213,1);
        box-shadow: 0px 0px 20px rgba(0,0,0,0.75);/*cros-browser*/  
        /*z-index: 100%;
    }
    nav{
        box-sizing: border-box;
        width: 100%;
        padding-left: 19px;
        padding-right: 19px;
    }
    nav ul li {
        font-size: 12px;
    }*/
    /*New nav menu*/
    .navBarSpaceHolder{
        height: 75px;
    }
    .navBar{
        position: absolute;
        top: 0px;
        height: 75px;
        z-index: 100;
        overflow: visible;
        background-color: rgba(0,180,213,1);
        box-shadow: 0px 0px 20px rgba(0,0,0,0.75);/*cros-browser*/  
    }
    .navContainer{
        position: absolute;
        top: 75px;
        left: 0px;
        width: 100%;
        height: calc(100vh - 75px);
        background-color: #00b4d5;
        z-index: 100;
        overflow:scroll;
    }
    
    .navContainer.collapsed{
        display: none;
    }
    .navContainer.uncollapsed{
        display: block;
    }
    .hamburgerMenuIcon{
        position: absolute;
        top: 25px;
        left: 15px;
        width: 35px;
        height: 35px;
    }
    .hamburgerMenuIconLine{
        width: 100%;
        height: 2px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 1px;
        
        transition: all .3s ease-in-out;
    }
    .hamburgerMenuIconLine:nth-child(2).cross{
        opacity: 0;
    }
    .hamburgerMenuIconLine:nth-child(1).cross{
        transform: rotate(45deg);
        transform-origin: left center;
        margin-left: 5px;
    }
    .hamburgerMenuIconLine:nth-child(3).cross{
        transform: rotate(-45deg);
        transform-origin: left center;
        margin-left: 5px;
    }
    nav{
        position: relative;
        top: 10px;
        left: 0px;
        width: auto;
        height: auto;
        color: #fff;
    }
    .firstMenu{
        display: block;
    }
    .secondMenu{
        display: none;
        width: calc(100% - 60px);
        padding-left: 30px;
    }
    .sideMenu{
        display: none;
        width: calc(100% - 60px); 
        padding-left: 15px;
        background: #fff;
        border-left: 1px solid #d2d1d1;
        font-family: "pt_sansregular";
        text-align: left;
        color: #444a4d;
    }
    nav ul{
        display: block;
        height: auto;
        padding-left: 30px;
        padding-right: 30px;
        list-style: none;
    }
    nav ul li{
        display: block;
        width: 100%;
        height: auto;
        border-left: 0px;
        border-bottom: 1px solid #fff;
        text-align: left;
        line-height: 55px;
        font-family: 'pt_sansregular';
        font-size: 16px;

        transition: all 0.4s ease-in-out;
    }
    nav ul li.tv{
        padding-top: 10px;
    }
    nav ul li:last-child{
        border-bottom: 0px;
    }
    .bbLogo{
        display: none;
    }
    .mobileLogo{
        width: 145px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .mobileLogo img{
        width: 100%;
        height: auto;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .mobileAtaturk{
        position: absolute;
        top: 0px;
        right: 0px;
        width: auto;
        height: 100%;
    }
    .mobileAtaturk img{
        position: absolute;
        top: 0px;
        right: 0px;
        width: auto;
        height: 100%;
    }
    #header{
        height: 75px;
    }
    #footerArea {
        padding-top: 70px;
        padding-left: 30px;
        padding-right: 30px;
        min-height: 500px;
    }
    footer h4{
        margin-bottom: 15px;
        font-size: 16px;
    }
    footer .column li{
        font-size: 12px;
    }
    footer .column:first-child, footer .column:last-child{
        display: none;
    }
    .newsLetter > div {
        margin-bottom: 20px;
    }
    .newsLetter > form {
        float: left;
    }
    .copyRight {
        top: 30px;
    }
    .netuceFooter {
        right: 30px;
        bottom: 150px;
    }
/*2.4.Master Elements-END*/
/*2.5.Page Specific Elements*/
/*2.5.1.Home Page*/
    /*#landing*/
    #landing{
        height: auto;
        background: #fff;
        overflow : visible;
    }
    #landing.landingType2 {
        height: auto;
    }
    .marks{
        height: auto;
        padding-bottom: 0px;
        background-image: none;
    }
    .withSideMenu .mainSlider{
        width: calc(100% - 140px);
    }
    .newsHeaderImg{
        position: relative;
        width: calc(100% - 140px);
        height: 50vw;
        float: left;
    }
    /*TODO: is this code block belong to slider css*/
    /*MARK: start-code block ref.3*/
    .mainSlider{
        position: relative;
        width: 100%;
        height: 50vw;
        float: left;
    }
    .mainSlider .capture{
        position: absolute;
        left: 25px;
        bottom: 41px;
        width: calc(100% - 50px);
        height: 112px;
        cursor: pointer;
    }
    /*MARK: end-code block ref.3*/
    .sliderSideMenu{
        width: 140px;
        height: 50vw;
    }
    .sliderSideMenu.newsDetail {
        height: 50vw;
    }
    .sliderSideMenu.newsDetail .services li {
        height: calc(16.66666vw - 16px);/*-16px because; '.lastAdded' s height's 1/3 (48/3 =16)*/
        font-size: 14px;
    }
    .sliderSideMenu.newsDetail li.lastAdded {
        height: 48px;
    }
    .crouselSlider{
        float: none;
    }
    .mayor {
        width: 100%;
        height: auto;
    }
    .mayor > div{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        width: 100%;
        height: auto;
    }
    .ei > h3{
        font-family: "pt_sansbold";
        font-size: 10px;
        text-align: justify;
        color: #897f6d;
    }
    .ei > h2{
        font-family: 'bebas_neuebold';
        font-size: 24px;
        color: #454344;
    }
    .ieWeb > div{
        font-family: 'pt_sansregular';
        font-size: 10px;
        color: #897f6d;
        text-align: justify;
    }
    .ieWeb > .mayorWebSite{
        font-family: 'pt_sansregular';
        font-size: 12px;
        color: #454344;
    }
    .mayorWebSite span{
        color: #897f6d;
    }
    .mediumSocialMediaIconsContainer{
        min-width: 100%;
        margin-top: 10px;
        background-color: #454344;
    }
    .mediumSocialMediaIconsContainer{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto;
    }
    .mediumSocialMediaIcon{
        box-sizing: border-box;
        min-width: 19%;
        height: 15px;
        margin-top: 7px;
        margin-bottom: 7px;
        border-right: 1px solid #fff;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mediumSocialMediaIcon:last-child{
        border-right: 0px;
    }
    .mediumSocialMediaIconsContainer #facebook{
        background-image: url(../img/logo-white-facebook.png);
    }
    .mediumSocialMediaIconsContainer #twitter{
        background-image: url(../img/logo-white-twitter.png);
    }
    .mediumSocialMediaIconsContainer #instagram{
        background-image: url(../img/logo-white-instagram.png);
    }
    .mediumSocialMediaIconsContainer #youtube{
        background-image: url(../img/logo-white-youtube.png);
    }
    .mediumSocialMediaIconsContainer #vimeo{
        background-image: url(../img/logo-white-vimeo.png);
    }
    .mayorImg{
        position: static;
        width: auto;
        height: 120px;
        margin-top: 5px;
    }
    
    /*#utilityBar*/
    #utilityBar{
        position: static;
    }
    .weatherUtility{
        width: auto;
    }
    .searchUtility{
        width: auto;
        flex-grow: 1;
        -webkit-flex-grow: 1;
        padding-right: 0px;
    }
     
    /*#sliderArea*/
    /*#newsArea*/
    #newsArea {
        height: auto;
        padding-bottom: 30px;
    }
    .news{
        width: calc(33% - 25px);
        margin-left: 19px;
    }
    .notices{
        width: calc(33% - 25px);
        margin-left: 19px;
    }
    .bids{
        width: calc(33% - 25px);
        margin-left: 19px;
    }
    .scroller {
        margin-top: 10px;
    }
    .allNews{
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
        border: 1px solid #d2d1d1;
        text-align: center;
        color: #7b8082;
        letter-spacing: 2px;
    }
    .imageContainer{
        display: none;
    }
    .textContainer{
        width: calc(100% - 30px) !important;
    }
    .news .textContainer p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-family: 'pt_sansregular';
        font-size: 14px;
        color: #848d91;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
    }
    .verticalScrollerContentContainer{
        width: 100%;
    }
    .verticalScrollerContentContainer ul{
        width: 100%;
    }
    .columnElement{
        width: 100%;
    }
    
    /*#servicesArea*/
    #servicesArea{
        height: auto;
    }
    .services li{
        width: 16.66666%;
        height: 16.66666vw;
    }
    .services > li > .blendContent{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .services > li > .blendBackground{
        width: 100%;
        height: 100%;
        mix-blend-mode: normal;
        transition: all 0.3s ease-in-out;
    }
    .services > li:hover > .blendBackground{
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        position: relative;
        margin: 10px;
    }
    .horizantalImageList{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        list-style: none;
    }
    .horizantalImageList li{
        box-sizing: border-box;
        display: block;
        position: relative;
        width: 16.66666%;
        height: 150px;
        overflow: hidden;
    }

    .horizantalImageList > li .contentContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .horizantalImageList h3, .horizantalImageList p, .horizantalImageList a{
        color: #fff;
        text-align: center;
    }
    .horizantalImageList img{
        display: none;
    }
    .horizantalImageList h3{
        padding-right: 10px;
        padding-left: 10px;
        font-family: 'montserratbold';
        font-size: 16px;
        text-transform: uppercase;
    }
    .horizantalImageList p{
        display: none;
    }
    .horizantalImageList div.plusSymbol{
        display: none;
    }
    .horizantalImageList > li:hover .contentContainer > .plusSymbol{
        transform: rotate(360deg);
        font-size: 72px;
        line-height: 80px;
    }
    .horizantalImageList > li:hover{
        background-size: auto 110%;
    }

    #saglik{
        background-color: #00b4d4;
    }
    #kadinVeAile{
        background-color: #f08481;
    }
    #egitim{
        background-color: #e2444e;
    }
    #evlilik{
        background-color: #8578bb;
    }
    #veteriner{
        background-color: #fabf75;
    }
    #spor{
        background-color: #a3bd57;
    }
    
    /*#calenderArea*/
    .calenderFlex{
        justify-content: space-around;
        -webkit-justify-content: space-around;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    @media only screen and (min-width: 501px) and (max-width: 722px){
        .calendar{
            width: 50%;
            margin-left: 19px;
            margin-right: 0px;
        }
        .calendar table thead{
            font-family: 'montserratsemi_bold';
            font-size: 14px;
            text-transform: uppercase;
        }
        .calendar table tbody{
            font-family: 'sf_movie_posterbold';
            font-size: 30px;
            line-height: 24px;
        }
        .singleEvent {
            margin-left: 19px !important;
        }
    }
    .thisMonth{
        display: none;
    }
    #calenderArea{
        height: auto;
    }
    #testimonialArea img{
        width: auto;
        height: 60%;
    }
    .selectedDayEvents{
        width: 100%;
    }
    .selectedDayEvents .verticalScrollerContentContainer {
        height: auto;
    }
    .selectedDayEvents ul{
        position: static;
        width: 100%;
        display: flex;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .selectedDayEvents li.noEvent{
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .singleEvent{
        width: 30%;
        margin-left: 3%;   
    }
    
    /*#socialNetworksArea*/
    #socialNetworksArea {
        overflow: hidden;
    }
    #socialNetworksArea > div{
        height: auto;
        padding-bottom: 30px;
        padding-top: 30px;
    }
    #socialNetworksArea > div{
        transform: scale(.4);
    }
    
    /*#testimonialArea*/
    #testimonialArea{
        height: 15vw;
    }
    
    /*#photoCarouselArea*/
    #photoCarouselArea{
        height: calc(40vw + 30px);
    }
    .photosContainer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        height: 40vw;
        overflow-x: hidden;
    }
    .crouselSlider{
        width: 100%;
        height: 16.66666vw;
    }
    .crouselSlider .slidesContainer{
        height: 16.66666vw;
    }
    .crouselSlider .slidesContainer .slides{
        height: auto;
    }
    .crouselSlider .slidesContainer .slides > li{
        width: 100vw;
        height: auto;
        overflow-x: hidden;
    }
    .carouselPhoto{
        box-sizing: border-box;
        width: 20%;
        height: 20vw;
        overflow: hidden;
    }   
/*2.5.1.Home Page-END*/
    
/*2.5.2.Inner Pages-END*/
    #headerImg{
        height: 25vw;
    }
    .pageTitle h1{
        margin-left: 20px;
        width: calc(100% - 220px);
    }
    .pageTitle .zoomTool{
        right: 40px;
    }
/*2.5.2.Inner Pages*/
/*2.5.3.News*/
    .newsThumbnail{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .newsThumbnail:nth-child(2n+1){
        margin-right: 20px;
    }
/*2.5.3.News-END*/
/*2.5.4.News Detail*/
    .newsBody .newsDate {
        position: relative;
        top: -30px;
        left: 0px;
    }
/*2.5.4.News Detail-END*/
/*2.5.6.Contact*/
    #contactInfoArea > div{
        justify-content: space-around !important;
    }
    .contactNumberGroup{
        flex-direction: column;
        align-items: flex-end;
    }
    @media only screen and (max-width: 786px) {
        .icon.phone{
            width: 30px;
            height: 30px;
        }
        .icon.printer {
            width: 28.5px;
            height: 33px;
        }
        .phoneArea, .faxArea{
            font-family: 'intro_regular';
            font-size: 30px;
        }
    }
    .singleLocation p{
        font-size: 13px;
    }
    .singleLocation .heading3{
        font-size: 14px;
    }
/*2.5.6.Contact-END*/
/*2.5.7.Mayor*/
    #whoIsMayor {
        padding-top: 0px;
        padding-bottom: 40px;
    }
    #mayorsSocialMedia {
        height: 100px;
    }

    #mayorsSocialMedia > div span{
        width: 30px;
        height: 30px;
    }
    #mayorsSocialMedia .flexContainer {
        justify-content: space-around;
    }
    .mayorMessage {
        margin-top: 40px;
        width: 100%;
    }
/*2.5.7.Mayor-END*/
/*2.5.10.Press*/
    .pressSlider .capture{
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 145px;
        background-color: #fff!important;
        color: #3f4345!important;
    }
    .pressSlider .capture .blendContent{
        color: #3f4345!important;
    }
/*2.5.11.Organization Schema*/
    .cvContainer > *{
        margin-right: 20px;
        margin-left: 20px;
    }
/*2.5.11.Organization Schema-END*/
/*2.5.10.Press-END*/
/*2.5.Page Specific Elements-END*/
/*2.6.Elements*/
    .element .heading h2{
        margin-left: 20px;
    }
    /*e1*/
    .quoteContainer {
        margin-bottom: 75px;
    }
    .quoteContainer:after {
        right: 20px;
    }
    .quoteContainer:before {
        position: relative;
        left: 0px;
        top: -30px;
    }
    .e1 .content {
        padding-top: 50px;
        padding-bottom: 120px;
    }

    /*e3*/
    .profileList {
        justify-content: space-around;
    }
    @media only screen and (max-width: 865px) {
        .profileList li {
            width: calc(50% - 30px);
        }
    }

    /*e6*/
    @media only screen and (max-width: 639px) {
        .iconList{
            justify-content: space-around;
        }
    }

    /*e7*/
    .e7 .content{
        padding-top: 40px;
    }
    .flexContainer .quoteContainerContainer {
        width: 100%;
    } 
    
    /*e11*/
    
    @media ( max-width: 768px) {
        .districtstructurelist li{
         display: block;
            justify-content: space-around;
            flex-wrap: nowrap;
        }
        .districtstructurelist li > div  {
            margin-bottom: 15px;
        }
        .districtstructurelist li > div:first-child {
            margin-right: 0;
            width: 97%;
            flex: 0;
        }
        .districtstructurelist li > div:nth-child(2) {
            width: 97%;
            flex: 0;
        }
        .districtstructurelist li > div:last-child {
            margin-left: 0;
            width: 97%;
            flex: 0;
        }
    }
    
    /*e12*/
    
    .friendcitylist >li {
        width: 47.5%;
    }
    
/*2.6.Elements-END*/
/*2.7.Functional*/
/*2.7.Functional-END*/
}
/*2.Tablet Styles-END*/

@media only screen and (max-width: 500px){
/*3.Phone Styles*/  
/*3.1Typographic Elements*/
    .sectionTitle{
        font-family: 'pt_sansbold';
        font-size: 16px;
        color: #44748a;
        text-align: center;
        text-transform: uppercase;
    }
    .sectionEmphasis{
        font-family: 'pt_sansitalic';
        font-size: 10px;
        color: #444a4d;
        text-align: center;
        margin-bottom: 20px;
    }
/*3.1Typographic Elements-END*/
/*3.2.Layout Elements*/
    .hidePhone{
        display: none !important;
    }
    .fixedWidth{
        width: 100%;
    }
    .fixedWidthWithPadding{
        box-sizing: border-box;
        padding-right: 20px;
        padding-left: 20px;
    }
    #sliderArea{
        height: auto;
    }
    .sliderContainer{
        height: auto;
        padding: 0px;
    }
/*3.2.Layout Elements-END*/
/*3.3.Visual Elements*/
    .verticalScrollerContentContainer{
        position: relative;
        height: 336px;
        overflow: hidden;
    }
    .verticalScrollerContentContainer{
        width: 100%;
    }
    .verticalScrollerContentContainer ul{
        width: 100%;
    }
    .videoGallery > li{
        width: calc(100%);
        height: 290px;
        margin-right: 10px;
        margin-bottom: 60px;
        margin-left: 10px;
        color: #848d91;
    }
    .icon.play, .icon.stop, .icon.pause{
        width: 19px;
        height: 19px;
    }
/*3.3.Visual Elements-END*/
/*3.4.Master Elements*/
    .navBarSpaceHolder{
        height: 75px;
    }
    .navBar{
        position: absolute;
        top: 0px;
        height: 75px;
        z-index: 100;
        overflow: visible;
        background-color: rgba(0,180,213,1);
        box-shadow: 0px 0px 20px rgba(0,0,0,0.75);/*cros-browser*/  
    }
    .navContainer{
        position: absolute;
        top: 75px;
        left: 0px;
        width: 100%;
        height: calc(100vh - 75px);
        background-color: #00b4d5;
        z-index: 100;
        overflow:scroll;
    }
    .navContainer.collapsed{
        display: none;
    }
    .navContainer.uncollapsed{
        display: block;
    }
    .hamburgerMenuIcon{
        position: absolute;
        top: 25px;
        left: 15px;
        width: 35px;
        height: 35px;
    }
    .hamburgerMenuIconLine{
        width: 100%;
        height: 2px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 1px;
        
        transition: all .3s ease-in-out;
    }
    .hamburgerMenuIconLine:nth-child(2).cross{
        opacity: 0;
    }
    .hamburgerMenuIconLine:nth-child(1).cross{
        transform: rotate(45deg);
        transform-origin: left center;
        margin-left: 5px;
    }
    .hamburgerMenuIconLine:nth-child(3).cross{
        transform: rotate(-45deg);
        transform-origin: left center;
        margin-left: 5px;
    }
    nav{
        position: relative;
        top: 10px;
        left: 0px;
        width: auto;
        height: auto;
        color: #fff;
    }
    .firstMenu{
        display: block;
    }
    .secondMenu{
        display: none;
        width: calc(100% - 60px);
        padding-left: 30px;
    }
    .sideMenu{
        display: none;
        width: calc(100% - 60px); 
        padding-left: 15px;
        background: #fff;
        border-left: 1px solid #d2d1d1;
        font-family: "pt_sansregular";
        text-align: left;
        color: #444a4d;
    }
    nav ul{
        display: block;
        height: auto;
        padding-left: 30px;
        padding-right: 30px;
        list-style: none;
    }
    nav ul li{
        display: block;
        width: 100%;
        height: auto;
        border-left: 0px;
        border-bottom: 1px solid #fff;
        text-align: left;
        line-height: 55px;
        font-family: 'pt_sansregular';
        font-size: 16px;

        transition: all 0.4s ease-in-out;
    }
    nav ul li.tv{
        padding-top: 10px;
    }
    nav ul li:last-child{
        border-bottom: 0px;
    }
    .bbLogo{
        display: none;
    }
    .mobileLogo{
        width: 145px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .mobileLogo img{
        width: 100%;
        height: auto;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    .mobileAtaturk{
        position: absolute;
        top: 0px;
        right: 0px;
        width: auto;
        height: 100%;
    }
    .mobileAtaturk img{
        position: absolute;
        top: 0px;
        right: 0px;
        width: auto;
        height: 100%;
    }
    #footerArea{
        display: none;
    }
    #mobileCopyright{
        display: block;
        width: 100%;
        height: 45px;
        background-color: #00b4d5;
        color: #fff;
        font-size: 10px;
        text-align: center;
        line-height: 45px;
    }
    #mobileNetuceFooter{
        display: block;
        width: 100%;
        height: 20px;
        background-color: #414b4f;
        color: #637075;
        font-size: 6px;
        text-align: center;
        line-height: 20px;
    }  
    #mobileNetuceFooter img{
        width: 40px;
    }
/*3.4.Master Elements-END*/
/*3.5.Page Specific Elements*/
/*3.5.1.Home Page*/
    /*#landing*/
    #landing{
        height: auto;
        background: #fff;
        z-index: 100;
        overflow: visible;
    }
    #landing.landingType2 {
        height: auto;
    }
    .marks{
        height: auto;
        padding-bottom: 0px;
        background-image: none;
    }
    .mayor {
        width: 100%;
        height: auto;
    }
    .mayor > div{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        width: 100%;
        height: auto;
    }
    .ei > h3{
        font-family: "pt_sansbold";
        font-size: 10px;
        text-align: justify;
        color: #897f6d;
    }
    .ei > h2{
        font-family: 'bebas_neuebold';
        font-size: 24px;
        color: #454344;
    }
    .ieWeb > div{
        font-family: 'pt_sansregular';
        font-size: 10px;
        color: #897f6d;
        text-align: justify;
    }
    .ieWeb > .mayorWebSite{
        font-family: 'pt_sansregular';
        font-size: 12px;
        color: #454344;
    }
    .mayorWebSite span{
        color: #897f6d;
    }
    .mediumSocialMediaIconsContainer{
        min-width: 100%;
        margin-top: 10px;
        background-color: #454344;
    }
    .mediumSocialMediaIconsContainer{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto;
    }
    .mediumSocialMediaIcon{
        box-sizing: border-box;
        min-width: 19%;
        height: 15px;
        margin-top: 7px;
        margin-bottom: 7px;
        border-right: 1px solid #fff;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mediumSocialMediaIcon:last-child{
        border-right: 0px;
    }
    .mediumSocialMediaIconsContainer #facebook{
        background-image: url(../img/logo-white-facebook.png);
    }
    .mediumSocialMediaIconsContainer #twitter{
        background-image: url(../img/logo-white-twitter.png);
    }
    .mediumSocialMediaIconsContainer #instagram{
        background-image: url(../img/logo-white-instagram.png);
    }
    .mediumSocialMediaIconsContainer #youtube{
        background-image: url(../img/logo-white-youtube.png);
    }
    .mediumSocialMediaIconsContainer #vimeo{
        background-image: url(../img/logo-white-vimeo.png);
    }
    .mayorImg{
        position: static;
        width: auto;
        height: 120px;
        margin-top: 5px;
    }
    
    
    .mainSlider{
        position: relative;
        width: 100%;
        height: 50vw;
        float: left;
    }
    .mainSlider .capture{
        position: absolute;
        left: 25px;
        bottom: 12px;
        width: calc(100% - 50px);
        height: 42px;
        cursor: pointer;
    }
    .mainSlider .capture .blendContent{
        padding: 10px 15px;
    }
    .mainSlider .capture p{
        display: none;
    }
    .mainSlider .capture h3{
        font-size: 14px;
        text-align: center;
        text-transform: none;
        line-height: 22px;
    }
    .mainSlider .sliderControler-nextPreviousGroup{
        display: none;
    }
    .mainSlider .sliderControler{
        display: block;
    }
    .crouselSlider{
        float: none;    
    }
    .crouselSlider{
        width: 100%;
        height: 66.66666vw;
    }
    .crouselSlider .slidesContainer{
        height: 66.66666vw;
    }
    .crouselSlider .slidesContainer .slides{
        height: auto;
    }
    .crouselSlider .slidesContainer .slides > li{
        width: 100vw;
        height: auto;
        overflow-x: hidden;
    }
    
    /*#utilityBar*/
    #utilityBar{
        box-sizing: border-box;
        position: static;
        height: 39px;
    }
    #utilityBar .weatherUtility{
        //transform: scale(0.5);
    }
    #utilityBar div{
        line-height: 39px;
    }
    .degree{
        font-family: 'pt_sansbold';
        font-size: 32px;
    }
    .weatherIcon{
        bottom: 2px;
        margin-right: 0px;
    }
    .weatherIcon img{
        height: 20px;
        width: auto;
    }
    .weatherDate .leftArrowMini, .weatherDate .rightArrowMini {
        display: none;
    }
    .weatherDate .date {
        font-size: 10px;
        margin-left: 0px;
        margin-right: 0px;
    }
    .weatherDate .date strong{
        display: none;
    }
    .searchBox{
        top: 7px;
        height: 24px;
    }
    .searchUtility{
        padding-left: 10px;
        padding-right: 0px;
    }
    .searchBox input{
        line-height: 24px;
        font-size: 10px;
    }
    .searchButton{
        width: 24px;
        height: 24px;
    }
    .cozumHatti{
        display: none;
    }
    
    /*#sliderArea*/
    /*#newsArea*/
    .news{
        width: calc(100% - 38px);
        margin-left: 19px;
    }
    .notices{
        width: calc(33% - 25px);
        margin-left: 19px;
    }
    .bids{
        width: calc(33% - 25px);
        margin-left: 19px;
    }
    .columnTitle{
        display: none
    }
    .scroller{
        display: none;
        margin-top: 5px;
    }
    #newsArea{
        height: auto;
        padding-bottom: 20px;
    }
    .allNews{
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
        border: 1px solid #d2d1d1;
        text-align: center;
        color: #7b8082;
        letter-spacing: 2px;
    }
    .columnElement{
        height: 100px;
    }
    .imageContainer{
        box-sizing: border-box;
        width: 100px;
        height: 100%;
        margin: 5px 0px 5px 5px;
        float: left;
        cursor: pointer;
        overflow: hidden;
    }
    .imageContainer img{
        box-sizing: border-box;
        width: auto;
        height: calc(100% - 10px);
    }
    .textContainer{
        box-sizing: border-box;
        height: calc(100% - 10px);
        margin: 5px;
        float: left;
        overflow: hidden;
    }
    .news .textContainer{
        width: calc(100% - 115px);
    }
    .columnElement{
        width: 100%;
    }
    .notices, .bids{
        display: none;
    }
    
    /*#servicesArea*/
    #servicesArea{
        height: auto;
    }
    .services > li > .blendContent{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .services > li > .blendBackground{
        width: 100%;
        height: 100%;
        mix-blend-mode: normal;
        transition: all 0.3s ease-in-out;
    }
    .services > li:hover > .blendBackground{
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        position: relative;
        margin: 10px;
    }
    .services li{
        width: 33.33333%;
        height: 33.33333vw;
        font-size: 12px;
    }
    .services li img{
        width: 25px;
        margin-bottom: 5px;
    }
    .horizantalImageList{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        list-style: none;
    }
    .horizantalImageList li{
        display: block;
        position: relative;
        width: 33.33333%;
        height: 80px;
        cursor: pointer;
        overflow: hidden;
    }

    .horizantalImageList > li .contentContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .horizantalImageList h3{
        color: #fff;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    .horizantalImageList img{
        display: none;
    }
    .horizantalImageList h3{
        font-family: 'montserratbold';
        font-size: 12px;
        text-transform: uppercase;
    }
    .horizantalImageList p{
        display: none;
    }
    .horizantalImageList div.plusSymbol{
        display: none;
    }
    .horizantalImageList > li:hover .contentContainer > .plusSymbol{
        transform: rotate(360deg);
        font-size: 72px;
        line-height: 80px;
    }
    .horizantalImageList > li:hover{
        background-size: auto 110%;
    }
    #saglik{
        background-color: #00b4d4;
    }
    #kadinVeAile{
        background-color: #f08481;
    }
    #egitim{
        background-color: #e2444e;
    }
    #evlilik{
        background-color: #8578bb;
    }
    #veteriner{
        background-color: #fabf75;
    }
    #spor{
        background-color: #a3bd57;
    }
    
    /*#calenderArea*/
    #calenderArea{
        height: auto;
    }
    .calenderFlex{
        justify-content: center;
        -webkit-justify-content: center;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .thisMonth{
        display: none;
    }
    .selectedDayEvents ul{
        position: static;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .selectedDayEvents span.noEvent{
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .singleEvent{
        min-width: 100%;
    }
    .calendar{
        width: 100%;
        max-width: 280px;
    }
    .calendar table{
        width: 100%;
        text-align: center;
        color: #568195;
    }
    .calendar table thead{
        font-family: 'montserratsemi_bold';
        font-size: 10px;
        text-transform: uppercase;
    }
    .calendar table tbody{
        font-family: 'sf_movie_posterbold';
        font-size: 18px;
        line-height: 24px;
    }
    .calendar table tbody tr{
        height: 24px;
    }
    .calendar table tbody tr td span{
        cursor: pointer;
    }
    td.selectedDay{
        background-image: url("../img/selected-day.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .selectedDayEvents {
        width: 100%;
    }
    .selectedDayEvents .verticalScrollerContentContainer{
        height: auto;
    }
    .selectedDayEvents li.noEvent{
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .singleEvent{
        height: 70px;
    }
    .singleEvent:last-child{
        height: 55px;
    }
    .singleEvent .eventDate{
        font-family: "pt_sansbold";
        font-size: 10px;
        color: #568195;
    }
    .eventName{
        font-family: 'pt_sansbold';
        font-size: 12px;
        color: #444a4d;
    }
    .eventType{
        font-size: 12px;
        color: #444a4d;
    }
    
    .monthSelector {
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
        font-family: 'montserrathairline';
        font-size: 24px;
        color: #568195;
    }
    .arrow-circle-left {
        display: inline-block;
        position: absolute;
        bottom: 6px;
        left: 8px;
        width: 15px;
        height: 15px;
        background-image: url(../img/arrow-circle-left.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .arrow-circle-right {
        display: inline-block;
        position: absolute;
        bottom: 6px;
        right: 8px;
        width: 15px;
        height: 15px;
        background-image: url(../img/arrow-circle-right.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    .bigDate{
        width: auto;
        margin-right: 19px;
        float: right;
    }
    .bigDate .day {
        width: 100%;
        font-family: 'sf_movie_posterbold';
        font-size: 200px;
        line-height: 160px;
        text-align: center;
    }
    .bigDate .month {
        width: 100%;
        font-family: 'montserrathairline';
        font-size: 24px;
        text-align: center;
        text-transform: uppercase;
    }
    @media only screen and (max-width: 360px) {
        .bigDate{
            display: none;
        }
    }
    
    /*#socialNetworksArea*/
    #socialNetworksArea{
        overflow: hidden;
    }
    #socialNetworksArea > div{
        height: auto;
        padding-bottom: 30px;
        padding-top: 30px;
    }
    #socialNetworksArea > div{
        transform: scale(.3);
    }
    
    /*#testimonialArea*/
    #testimonialArea{
        height: 15vw;
    }
    #testimonialArea img{
        width: auto;
        height: 60%;
    }
    
    /*#photoCarouselArea*/
    #photoCarouselArea{
        height: calc(40vw + 30px);
    }
    #photoCarouselArea{
        display: none;
    }/*TODO: height and display:none?*/
    .photosContainer{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        height: 40vw;
        overflow-x: hidden;
    }   
    /*#socialNetworksBar*/
    #socialNetworksBar{
        height: 60px;
    }
    #socialNetworksBar .icon {
        width: 30px;
        height: 30px;
    }
/*3.5.1.Home Page-END*/
/*3.5.2.Inner Pages*/
    .pageTitle h1 {
        margin-left: 20px;
        width: calc(100% - 80px);
    }
    #header {
        height: 75px;
    }
    #headerImg {
        height: 50vw;
    }
/*3.5.2.Inner Pages-END*/
/*3.5.3.*/
    #allNewsArea{
        margin-top: 40px;
    }
    .newsThumbnail {
        margin-bottom: 20px;
    }
    #newsUtility{
        height: 120px;
    }
    #newsUtility > div {
        height: 100%;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: space-around;
        -webkit-justify-content: space-around;
    }
    .newsSearch {
        flex-grow: 0;
        -webkit-flex-grow: 0;
        width: 100%;
    }
/*3.5.3.-END*/
/*3.5.4.News Detail*/
    .newsHeaderImg{
        width: 100%;
        height: 50vw;
    }
    .listenToNews {
        width: 78px;
    }
    .newsTitle {
        width: calc(100% - 78px);
    }
    .zoomTool {
        right: 20px !important;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .zoomTool button {
        position: static;
        height: auto;
        font-size: 18px;
        line-height: normal;
        color: #fff;
        cursor: pointer;
    }
    .allNoticesMain .newsThumbnail {
        width: 100%;
    }
/*3.5.4.News Detail-END*/
/*3.5.6.Contact*/
    #contactInfoArea{
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #contactInfoArea > div{
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .addressArea, .phoneArea, .faxArea{
        margin-bottom: 20px;
    }
    .contactNumberGroup {
        flex-direction: column;
        align-items: flex-start;
    }
    .phoneArea, .faxArea {
        font-size: 30px;
    }
    .icon.phone {
        width: 30px;
        height: 30px;
    }
    .icon.printer {
        width: 28.5px;
        height: 33px;
    }
    #otherLocationsArea > ul > li {
        width: 100%;
        margin-right: 0px;
    }
    .singleLocation > h3 {
        font-size: 14px;
    }
    .singleLocation p {
        font-size: 13px;
    }
/*3.5.6.Contact-END*/
/*3.5.7.Mayor*/
    #whoIsMayor {
        padding-top: 0px;
        padding-bottom: 40px;
    }
    #mayorsSocialMedia {
        height: 70px;
    }

    #mayorsSocialMedia > div span{
        width: 20px;
        height: 20px;
    }
    #mayorsSocialMedia .flexContainer {
        justify-content: space-around;
    }
    
    #messageFromMayor {
        padding-bottom: 80px;
    }
    .mayorMessage {
        margin-top: 40px;
        width: 100%;
    }
    #messageFromMayorList > .fixedWidth{
        flex-direction: column;
        -webkit-flex-direction: column;
    }
    .messageFromMayorList{
        width: 100%;
    }
    .messageFromMayorList{
        margin-bottom: 50px;
    }
    .mayorVideo {
        margin-left: 0px;
    }
    .fullWidthTitle {
        height: 55px;
        margin-bottom: 10px;
        background-color: #b2a593;
        font-family: 'sf_movie_posterbold';
        font-size: 80px;
        line-height: 55px;
        color: #b2a593;
    }
    .mayorMessageVideoContainer {
        height: 225px;
        width: auto;
        margin-bottom: 10px;
    }
/*3.5.7.Mayor-END*/
/*3.5.10.Press*/
    #pressSliderArea{
        margin-top: 0px;
    }
    .pressSlider{
        height: 45vw !important;
    }
    .pressSlider .capture{
        display: none;
    }
    .pressSlider .capture .blendContent{
        color: #3f4345!important;
    }
    .pressNewsList li{
        width: 100%;
        margin: 15px 0px;
    }
    .pressNewsList li:hover{
        color: #00b4d5;
    }
/*3.5.10.Press-END*/
/*3.5.11.Organization Schema*/
    .cvContainer {
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .cvContainer > *{
        margin-right: 0px;
        margin-left: 0px;
    }
/*3.5.11.Organization Schema-END*/
/*3.5.12.Video Gallery*/
    #videoBanner .mainLine{
        font-family: 'montserrathairline';
        font-size: 20px;
    }
    #videoBanner .subLine{
        font-size: 10px;
    }
/*3.5.12.Video Gallery-END*/
/*3.5.Page Specific Elements-END*/
/*3.6.Elements*/
    .element .heading h2{
        margin-left: 20px;
    }
    /*e1*/
    .quoteContainer {
        margin-bottom: 75px;
    }
    .quoteContainer:after {
        right: 20px;
    }
    .quoteContainer:before {
        position: relative;
        left: 0px;
        top: -20px;
    }
    .e1 .content {
        padding-top: 50px;
        padding-bottom: 60px;
    }
    /*e2*/
    .e2 .withImage-text {
        float: none;
    }
    .e2 .withImage-image {
        width: 100%;
        height: auto;
        margin-top: 30px;
        float: none;
    }
    .e2 .withImage-image > a{
        display: block;
        width: 100%;
        height: 100%;
    }
    .e2 .withImage-image img{
        width: 100%;
        height: auto;
    }
    /*e3*/
    .profileList {
        justify-content: center;
    }
    /*e5*/
    .e5 .content {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .linkList li{
        width: 100%;
        margin-right: 0px !important;
        margin-bottom: 15px;
        font-size: 12px;
    }
    /*e6*/
    .e6 .content {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .iconList {
        justify-content: center;
    }
    /*e7*/
    .e7 .content {
        padding-top: 30px;
        padding-bottom: 40px;
    }
    .e7 > .content > .fixedWidth > .flexContainer.withGap {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .quoteContainerContainer {
        position: relative;
        height: auto;
        margin-right: 0px;
    }
    .withGap > * {
        margin-left: 0px;
        margin-right: 0px;
    }
    /*e10*/
    .bookList {
        justify-content: space-around;
        -webkit-justify-content: space-around;
    }
    
    /*e11*/
    .districtstructurelist li{
        display: block;
        justify-content: space-around;
        flex-wrap: nowrap;
    }
    .districtstructurelist li > div  {
        margin-bottom: 15px;
    }
    .districtstructurelist li > div:first-child {
        margin-right: 0;
        width: 94%;
        flex: 0;
    }
    .districtstructurelist li > div:nth-child(2) {
        width: 94%;
        flex: 0;
    }
    .districtstructurelist li > div:last-child {
        margin-left: 0;
        width: 94%;
        flex: 0;
    }
    
    /*e12*/
    .friendcitylist >li {
        width: 100%;
    }
/*3.6.Elements-END*/
}
/*3.Phone Styles-END*/
/*4.Elements*/

/*4.Elements-END*/

.hybridSlider .slides li{
    display: flex;
    justify-content: center;
}
.hybridSlider .slides div{
    max-width: calc(33.33% - 20px);
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
    
}
.hybridSlider .slides div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-filter: grayscale(100%);
}

.hybridSlider .slides div img:hover{
    -webkit-filter: grayscale(0%);
}

.calenderSlider .slidesContainer .slides > li {
    width: 100%;
    //height: 405px;
    overflow-x: hidden;
}
.calenderSlider{
    position: relative;
    width: 100%;
    height: 433px;
    float: right;
}
.calenderSlider .slidesContainer{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 405px;
    overflow-x: hidden;
}
.calenderSlider .slidesContainer .slides{
    width: 100%;
    height: 405px;
}
.calenderSlider .slidesContainer .slides > li{
    width: 100%;
    height: 405px;
    overflow-x: hidden;
} 
/*-----ERROR PAGE STYLE START-----*/
.error-body {
    background-color: #21aecf !important;
    background-size: 100% !important;
    font-family: 'pt_sansregular' !important;
    font-size: 100% !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}
/**-----start-error-wrap---------**/
.error-wrap {
    width: 70% !important;
    margin: 5.2% auto 4% auto !important;
}
/**-----start-error-logo--------**/
.error-logo {
    padding: 1em !important;
    text-align: center !important;
    padding: 1% 1% 0% 1% !important;
}

    .error-logo h1 a {
        display: block !important;
        /*padding: 2em 0em !important;*/
        font-size: 200px !important;
        color: white !important;
        font-weight: bolder !important;
    }

    .error-logo span {
        font-size: 2em !important;
        color: #fff !important;
        font-weight: 300 !important;
        margin: 0.6em 0em 0em 0em !important;
    }

        .error-logo span img {
            width: 40px !important;
            height: 40px !important;
            vertical-align: bottom !important;
            margin: 0px 10px !important;
        }
/**-----end-error-logo---------**/
/**-----start-search-bar-section------**/
.error-buttom {
    /*background: url(../img/bg2.png) no-repeat 100% 0%;*/
    background-size: 100% !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
    width: 556px !important;
}

.error-seach_bar {
}

    .error-seach_bar p {
        font-size: 1.5em !important;
        color: #fff !important;
        font-weight: 300 !important;
        margin: 0.6em 0em 0em 0em !important;
    }

    .error-seach_bar span a {
        font-size: 1em !important;
        color: #fff !important;
        text-decoration: underline !important;
        font-weight: 300 !important;
        font-family: 'pt_sansbold' !important;
    }
/*-----ERROR PAGE STYLE END-----*/
/*#landing*/
/*#utilityBar*/
/*#sliderArea*/
/*#newsArea*/    
/*#servicesArea*/
/*#calenderArea*/
/*#socialNetworksArea*/
/*#testimonialArea*/
/*#photoCarouselArea*/