/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

/* LOAD FONTS */
@font-face {
    font-family: ITCAvantGardePro;
    font-weight:normal;
    src: url('font/ITCAvantGardePro-Md.otf');
}
@font-face {
    font-family: ITCAvantGardePro;
    font-weight:bold;
    src: url('font/ITCAvantGardePro-Bold.otf');
}

/* FONT USING */
body{
    font-family: ITCavantGardePro, sans-serif;
}


/* GLOBAL */
.clear{
    clear: both;
}
header,article,.centerer{
    max-width:1000px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* HEADER */
header a.logo{
    display: block;
    float: left;
    padding: 45px 0;
}
div.under-construction{
    display: inline;
    display: inline-block;
    float: right;
    background: #3B276D;
    color: #fff;
    padding: 2px 18px;
    padding-bottom: 0;
    min-height: 41px;
    line-height: 43px;
    margin-top: 45px;
    font-size: 21px;
}
div.under-construction b{
    color: #f7a257;
}


/* PROMO BAR */
section.promo-bar{
    max-width:1296px;
    margin: 0 auto;
}
section.promo-bar div.photo{
    float: left;
    width: 25%;
    border-right: 1px solid #fff;
    box-sizing:border-box;
}section.promo-bar div.photo + div.photo + div.photo + div.photo{
    /*border-right: 0;*/
}
section.promo-bar div.photo img{
    display: block;
    max-width: 100%;
}

/* CONTENT */
ul.localizations{
    display: block;
    padding-bottom: 70px;
    list-style-type: none;
}
ul.localizations > li{
    list-style-type: none;
}
li.localization{
    display: block;
    float: left;
    min-width:270px;
    margin-top: 50px;
    font-size: 21px;
}
li.localization:nth-child(1n){
    margin-right: 80px;
}
li.localization:nth-child(3n){
    margin-right:0;
}
li.localization > a{
    display: block;
    line-height: 36px;
    text-decoration: none;
}
li.localization span.icon{
    clear:left;
    display: block;
    float: left;
    width: 30px;
    height:35px;
    padding-right: 5px;
    background: url('img/icons.png') no-repeat;
}
li.localization a.location   span.icon{ background-position: 0 -10px; }
li.localization a.telephone  span.icon{ background-position: 0 -55px; }
li.localization a.menu       span.icon{ background-position: 0 -95px; }
li.localization a.location{
    color: #f7a257;
}
li.localization a.telephone{
    color: #a1a1a5;
}
li.localization a.menu{
    color: #432f78;
}

/* FOOTER */
footer{
    color:#888;
    font-size: 11px;
    padding: 30px;
}
footer div.left,
footer div.right{
    width: 50%;
}
footer div.left{
    float: left;
}
footer div.right{
    float: right;
    text-align: right;
}
footer a.logo{
    float: left;
    display: block;
    margin-right: 10px;
}
footer a.logo img{
    height: 30px;
    width: auto;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://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+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    transition: all .4s ease;
}
footer a.logo:hover img{
    filter:none;
    -webkit-filter:grayscale(0);
}
footer p {
    line-height: 32px;
}
footer .bensa{
    float: right;
    margin-left: 10px;
}
footer .bensa img{
    height: 20px;
    margin-top: 4px;
    width: auto;
    opacity:0.6;
    display: block;
}


/* smaller localizations */
@media screen and (max-width:1024px){
    li.localization:nth-child(1n){margin-right: 10px;}
    li.localization:nth-child(3n){margin-right:0;}
}

/* two lines of localizations, two-line header */
@media screen and (max-width: 870px){
    ul.localizations{
        margin: 0 auto;
        max-width: 500px;
    }
    li.localization,
    li.localization:nth-child(1n){
        width: 250px;
        font-size: 18px;
        margin-right:0;
        text-align: left;
        min-width:initial;
        margin-top: 35px;
    }
    header a.logo, div.under-construction{
        float: none;
    }
    header a.logo{
        display: block;
        text-align: center;
        padding-bottom: 20px;
    }
    header a.logo > img{
        max-width:100%;
    }
    div.under-construction{
        display: block;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* smaller localizations, two baner photos */
@media screen and (max-width:670px){
    ul.localizations{
        width: 100%;
    }
    li.localization,
    li.localization:nth-child(n){
        width:50%;
        min-width: 220px;
        margin-top: 30px;
    }
    li.localization span.icon{
        padding-right: 0;
    }
    div.photo1, div.photo2{
        display: none;
    }
    section.promo-bar div.photo{
        width: 50%;
    }
}

/* one line of localizations, smaller under construction */
@media screen and (max-width:479px){
    ul.localizations{
        width: 220px;
    }
    li.localization,
    li.localization:nth-child(n){
        margin-top: 25px;
    }
    div.under-construction{
        font-size: 18px;
        line-height: 36px;
        min-height:36px;
        text-align: center;
    }
}

/* two lines footer */
@media screen and (max-width:600px){
    footer div.left,
    footer div.right{
        width: auto;
        float: none;
    }
    footer div.right{
        margin-top: 20px;
    }
}