@font-face {
    font-family: 'Dekar';
    src: url('fonts/Dekar.eot');
    src: local('☺'), url('fonts/Dekar.woff') format('woff'), url('fonts/Dekar.ttf') format('truetype'), url('fonts/Dekar.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {margin: 0; padding: 0}
body {font-family: 'Dekar'; background: url('/images/table-bg.jpg?v=1') center center repeat; background-size: contain;}
.clear {clear: both}
a.fullBlock, a.fullBlock:visited {display: block; width: 100%; height: 100%;}
a:hover {text-decoration: underline;}

/**************/
/*** Mobile ***/
.onDesktop {display: none;}
.dbPoneNumbers {font-size: 47px; text-transform: uppercase; text-align: center;}
.dbPoneNumbers .branch {width: 250px; margin: 0 auto 10px auto;}
.dbPoneNumbers .branchAntelias {margin-top: 30px;}
.dbPoneNumbers .left {float: left; width: 20%; font-size: 20px; text-align: right;}
.dbPoneNumbers .right {float: right; width: 78%; text-align: left;}
.dbPoneNumbers p.address {font-size: 0.28em; margin: 15px 0 5px 0;}
.dbPoneNumbers p.callBtn {font-size: 0.5em; margin-top: 3px;}
.dbPoneNumbers p.callBtn a {color: #afaeb0}

/******  Header  ******/
#logo {text-indent: 100%; white-space: nowrap; overflow: hidden; background: url('/images/diwan-beirut-logo.png') 0 0 no-repeat; background-size: contain; width: 238px; height:50px; margin: 0 auto;}
#tagline {color: #7d131a; text-align: center; font-size: 1.3em; margin: 50px 0;}
header .dbPoneNumbers {position: fixed; top: 0; right: 10%; z-index: 999;}
header .dbPoneNumbers .branch {background-color: #7d131a; color: #fff; float: left; overflow: hidden; height: 20px; margin: 0; cursor: pointer; padding: 5px 0}
header .dbPoneNumbers p.address {margin: 0; font-size: 0.4em; padding: 3px 0 16px 0;}
header .dbPoneNumbers .branchAntelias {margin-left: 10px;}

/******  Footer  ******/
footer {background-color: #7d131a; color: #fff; text-align: center; padding: 15px 0}
footer a {color: #fff; text-decoration: none;}
footer .wrapper {background-color: #7d131a; padding: 10px 30px;}
.socialmedia {list-style: none; width: 78px; margin: 15px auto;}
.socialmedia li {float: left; margin-right: 5px; width: 34px; height: 34px; background-image: url('/images/facebook-icon.png');}
.socialmedia .twitter {background-image: url('/images/twitter-icon.png');}
.socialmedia .instagram {background-image: url('/images/instagram-icon.png');}
nav {margin: 25px 0;}
nav ul li {display: inline-block}
#signature {font-size: .5em; margin-top: 25px;}

/******  Home Page  ******/
#loadingScreen {background: #fefbf4 url('/images/table-bg.jpg?v=1') center center repeat; left: 0; right: 0; bottom: 0; top: 0; z-index: 100000; position: fixed;}
#loadingScreen .loadingLogo {position: absolute; background: url('/images/db-huge-logo.png') center bottom no-repeat; background-size: contain; left: 0; right: 0; bottom: 0; top: 0;}
#loadingScreen .loader {position: absolute; background: url('/images/loader.gif?v=1') center center no-repeat; background-size: contain; left: 50%; width: 100px; height:100px; margin-left: -50px; top: 40%;}
#loadingScreen p {color:#7d131a; font-size: 1.2em; margin-top: 40%; text-align: center;}

#sufra {height: 2300px; padding: 15px 0 25px 0; overflow: hidden;}
#sufra h2 {margin-bottom: 10px}
#sufra .itemWrapper {position: relative; margin: 0 0 15px 0; height: 200px}
#sufra .item {position: absolute; background: url('/images/home-items/hp-item-hommos.png?v=2') 0 0 no-repeat; background-size: contain; top: 0;}
#sufra .hommos {width: 50%; top: 0; right: 5%;}
#sufra .chilli {background-image: url('/images/home-items/hp-item-chilli.png'); width: 15%; right: 5%; bottom:0; top: auto;}
#sufra .garlic {background-image: url('/images/home-items/hp-item-garlic.png'); width: 10%; right: 50%; bottom:0; top: auto;}
#sufra .tabouleh {background-image: url('/images/home-items/hp-item-tabouleh.png?v=1'); width: 85%; left: -30%;}
#sufra .sandwich {background-image: url('/images/home-items/hp-item-sandwich.png?v=4'); width: 70%; right: -20%;}
#sufra .pickles {background-image: url('/images/home-items/hp-item-pickles.png'); width: 15%; left: 5%; top: 0;}
#sufra .grills {background-image: url('/images/home-items/hp-item-grills.png?v=1'); width: 90%;left: -30%;}
#sufra .pdj {background-image: url('/images/home-items/hp-item-pdj.png?v=1'); width: 90%; right: -35%;}
#sufra .lemon {background-image: url('/images/home-items/hp-item-lemon.png'); width: 20%; right: 35%; bottom:0; top: auto;}
#sufra .napkin {background-image: url('/images/home-items/hp-item-napkin.png?v=2'); width: 50%; left: -10%;}
#sufra .foodmenu {background-image: url('/images/home-items/hp-item-menu.png'); width: 95%; right: -32%;}

#sufra .textItem {position: absolute; width: 40%;}
#sufra .textItem h2 {color: #7d131a;}
#sufra .texTabouleh {top: 30%; left: 57%}
#sufra .textSandwich {top: 5%; left: 5%; text-align: right}
#sufra .textGrills {top: 30%; left: 57%;}
#sufra .textPDJ {top: 50%; left: 5%; text-align: right}
#sufra .textNapkin {top: 15%; left: 50%;}
#sufra .textNapkin a, #sufra .textPDJ a, #sufra .textMenu a {color: #7d131a; font-weight: bold; text-decoration: none;}
#sufra .textNapkin a:hover, #sufra .textPDJ a:hover, #sufra .textMenu a {text-decoration: underline;}
#sufra .textMenu {text-align: right; left: 5%; top: 60%;}

#sufra .doodle {display: none;}

/******  Daily Specials  ******/
#main.dailyspecials {padding: 15px 0 25px 0;}
#main.dailyspecials .pdjImage {background: url('/images/home-items/hp-item-pdj.png') center center no-repeat; width: 100%; background-size: contain; height: 300px; margin: 25px 0}
#main.dailyspecials form {margin: 25px 0; padding: 0 25px; text-align: center;}
#main.dailyspecials form h1 {color: #7d131a; text-align: center; margin-bottom: 25px;}
#main.dailyspecials form input {border: 1px solid #7d131a; background-color: #fff; color: #afaeb0; padding: 5px 5%; font-size: 1.1em; width: 90%; margin: 5px 0;}
#main.dailyspecials form input[type=submit] {background-color: #7d131a; color: #fff; width: 150px; font-family: 'Dekar';}
#main.dailyspecials p.backHome {text-align: center;}
#main.dailyspecials p.backHome a {color: #afaeb0; text-decoration: none;}
#main.dailyspecials p.backHome a:hover {text-decoration: underline;}

/******  About Us  ******/
#main.about {padding: 15px 0 0 0; text-align: center;}
#main.about h1 {color: #7d131a; margin: 50px 0 25px 0;font-size: 1.5em;}
#main.about .text {padding: 0 15px; font-size: 1.2em;}
#main.about p {margin: 5px 0;}
#main.about a {color: #7d131a; text-decoration: none;}
#main.about a:hover {text-decoration: underline;}
#main.about .venuePhoto {background: url('/images/about-venue.png?v=3') center center no-repeat; background-size: contain; width: 100%; height: 300px; margin-top: 25px;}

/******  Hommos  ******/
#main.hommos {padding: 15px 0 25px 0; text-align: center;}
#main.hommos h1 {color: #7d131a; margin: 50px 0 25px 0;}
#main.hommos .text {color: #7d131a; padding: 15px; font-size: 1.2em;}
#main.hommos a {color: #afaeb0; text-decoration: none;}
#main.hommos a:hover {text-decoration: underline;}
#main.hommos .hommosWrapper {position: relative; left: 205px; top: 0; width: 120px; display: none;}
#main.hommos .hommosWrapper .details {position: absolute; text-align: left; left: 35px; top: -15px;}
#main.hommos .hommosWrapper .details h3 {color: #7d131a; text-transform: uppercase;}
#main.hommos .hommosWrapper .line {width: 25px; height: 2px; background-color: #7d131a; position: relative; left: 0; top: 0;}
#main.hommos .hommosWrapper .circle {width: 6px; height: 6px; background-color: #7d131a; position: absolute; right: -3px; top: -2px;  border-radius: 50%;}
#main.hommos .hommosList {padding-bottom: 200px; list-style: none;}
#main.hommos .hommosList li {width: 250px; height: 250px; z-index: 5; background: url('/images/hommos/hommos-1.png') center center no-repeat; background-size: contain; margin: 0 0 -125px -125px; cursor: pointer;}
#main.hommos .hommosList li.active {margin-left: -50px; z-index: 10}

/**************/
/*** Tablet ***/
@media (min-width:830px) {
    body {font-size: 1.7em;}
    h1 {font-size: 2.5em;}
    .onDesktop {display: block;}
    .onMobile {display: none;}
    .container {max-width: 1440px;}
    #main {min-height: 800px; padding: 0;}

    /******  Header  ******/
    #logo {position: absolute; width: 350px; height: 74px; top: 50px; left: 50px;}
    #tagline {position: absolute; top: 225px; left: 50px; max-width: 350px; text-align: left; font-size: 1.5em;}

    /******  Footer  ******/
    footer {padding: 35px 0 25px 0; text-align: center}
    footer .container {width: 940px; margin: 0 auto;}
    footer .logo {background: url('/images/diwan-beirut-logo-onred.png') center center no-repeat; background-size: contain; width: 238px; height:50px; float: left; margin: 10px 40px 0 0}
    footer .wrapper {padding: 0;}
    footer .branch {float: left; border-right: 1px solid #fff;}
    footer .branchAshrafieh {border-left: 1px solid #fff;}
    .dbPoneNumbers .branchAntelias {margin-top: 0;}
    footer .socialmedia {float: left; margin: 20px 0 0 40px}
    nav {font-size: 0.7em;}

    /******  Home Page  ******/
    #loadingScreen .loader {top: 30%;}
    #loadingScreen p {margin-top: 10%;}

    #main .container {margin: 0 auto; position: relative; padding: 0}
    #main.home {padding: 0 0 50px 0}

    #sufra {padding: 0}
    #sufra .item {margin-top: -100px;}
    #sufra .hommos {top: 225px; right: 5%; width: 450px;}
    #sufra .chilli {width: 190px; right: 2%; bottom: -175px;}
    #sufra .garlic {width: 100px; right: 540px; bottom: -150px;}
    #sufra .tabouleh {margin-top: 0;}
    #sufra .pickles {width: 7%; top: 15%}
    #sufra .lemon {width: 10%; bottom: 15%; right: 40%;}
    #sufra .napkin {top: 55%}

    #sufra .textItem {font-size: 0.7em; width: 250px}
    #sufra .texTabouleh {top: 350px; left: 750px}
    #sufra .textSandwich {top: 240px; left: 60px}
    #sufra .textGrills {left: 750px}
    #sufra .textPDJ {top: 400px; left: 30px;}
    #sufra .textNapkin {left: 600px}
    #sufra .textMenu {left: 85px; top: 550px;}

    #sufra .doodle {display: block; position: absolute; width: 180px; top: 0; background: url('/images/home-items/hp-doodle-salad.png') 0 0 no-repeat; background-size: contain;}
    #sufra .doodleSalad {left: 550px; top: 400px;}
    #sufra .doodleSandwich {background-image: url('/images/home-items/hp-doodle-sandwich.png'); left: 325px; top: 250px;}
    #sufra .doodleGrills {background-image: url('/images/home-items/hp-doodle-grills.png'); left: 580px; top: 300px; width: 150px;}
    #sufra .doodlePDJ {background-image: url('/images/home-items/hp-doodle-pdj.png'); left: 300px; top: 350px}
    #sufra .doodleNapkin {background-image: url('/images/home-items/hp-doodle-napkin.png'); left: 400px; top: 75px}
    #sufra .doodleMenu {left: 350px; top: 550px;}
    
    /******  Daily Specials  ******/
    #main.dailyspecials {padding: 0 0 50px 0}
    #main.dailyspecials .pdjImage {float: left; margin-top: 200px; width: 50%; height: 400px;}
    #main.dailyspecials #signupForm {float: right; margin: 200px 0; width: 50%; text-align: left; padding: 0}
    #main.dailyspecials #signupForm h1 {font-size: 1.5em; text-align: left;}
    #main.dailyspecials #signupForm input {font-size: 0.8em; padding: 8px 5%;}
    #main.dailyspecials p.backHome {text-align: center; font-size: 0.8em;}

    /******  About Us  ******/
    #main.about {text-align: left; padding: 0 0 50px 0}
    #main.about h1 {padding-top: 200px; margin: 0 0 25px 50px}
    #main.about .text {width: 40%; margin: 0 0 0 50px; padding: 0; float: left;}
    #main.about .text p {margin: 10px 0;}
    #main.about .venuePhoto {height: 700px; margin: 0; float: left; width: 50%; background-position: left top;}

    /******  Hommos  ******/
    #main.hommos {padding: 0 0 0 0}
    #main.hommos h1 {padding-top: 200px; font-size: 1.5em; margin-top: 0}
    #main.hommos .text {color: #7d131a;}
    #main.hommos .text a {font-size: 0.7em;}
    #main.hommos .hommosList {padding: 0; overflow: hidden; display: none;}
    #main.hommos .hommosWrapper {height: 125px; width: 300px; margin-top: 50px; font-size: 0.7em;}
    #main.hommos .hommosWrapper .line {background-color: transparent; border-left: 2px solid #7d131a; border-top: 2px solid #7d131a; height: 90%; }
    #main.hommos .hommosList li {float:left; margin: 0 0 0 0;}
    #main.hommos .hommosList li.active {margin: 0}
}


/**************/
/*** Desktop ***/
@media (min-width:1160px) {

    /******  Home Page  ******/
    #sufra .tabouleh {width: 750px; left: 0;}
    #sufra .sandwich {width: 650px; right: 0;}
    #sufra .grills {width: 750px; left: 0;}
    #sufra .pdj {width: 700px; right: 0;}
    #sufra .napkin {width: 400px; left: 150px;}
    #sufra .foodmenu {width: 700px; right: 0; margin-top: -200px}

    #sufra .textItem {width: 350px}
    #sufra .texTabouleh {top: 250px; left: 975px}
    #sufra .textSandwich {top: 225px; left: 200px}
    #sufra .textGrills {left: 950px}
    #sufra .textPDJ {top: 345px; left: 225px;}
    #sufra .textNapkin {left: 750px}
    #sufra .textMenu {top: 175px; left: 200px}

    #sufra .doodleSalad {left: 750px; top: 285px; width: 200px;}
    #sufra .doodleSandwich {left: 595px; top: 180px;}
    #sufra .doodleGrills {left: 750px; top: 245px; width: 180px;}
    #sufra .doodlePDJ {left: 600px; top: 270px}
    #sufra .doodleNapkin {left: 550px; top: 75px}
    #sufra .doodleMenu {left: 600px; top: 175px;}

    /******  Daily Specials  ******/
    #main.dailyspecials .pdjImage {margin: 200px 0 0 0; width: 60%; height: 650px;}
    #main.dailyspecials #signupForm {margin: 200px 10% 0 0; width: 30%;}

    /******  About Us  ******/
    #main.about .text {font-size: 0.8em;}
    #main.about .venuePhoto {}

    /******  Hommos  ******/
    #main.hommos .hommosWrapper {margin-top: 100px;}

}