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

* {margin: 0; padding: 0}
body {font-family: 'HelveticaNeueLTStd-Lt'; color: #fff}
h1, h2 {text-transform: uppercase; font-size: 2em; font-family: 'HelveticaNeueLTStd-Md'}
strong {font-family: 'HelveticaNeueLTStd-Md';}
.clear {clear: both}
a.fullBlock, a.fullBlock:visited {display: block; width: 100%; height: 100%;}
a:hover {text-decoration: underline;}
a {color: #fff; text-decoration: none;}

/**************/
/*** Mobile ***/
.onDesktop {display: none;}
#main {overflow: hidden}

/******  Header  ******/
header {position: absolute; top: 0; left: 0; right: 0; padding: 15px;}
#logo {background: url('/images/alsultanbrahim-logo.png') 0 0 no-repeat; background-size: contain; width: 135px; height: 70px; z-index: 600;}

nav .menu_toggle {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; right: 25px; top: 40px; height: 20px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; z-index: 600}
nav .menu_toggle span {float: left; display: inline-block; margin: 9px 0; position: relative; font-size: 0; height: 2px; width: 20px; background-color: #fff; -webkit-transition: background-color .25s; transition: background-color .25s; opacity: 1;}
nav .menu_toggle span:after,
nav .menu_toggle span:before {display: inline-block; position: absolute; left: 0; content: ''; height: 2px; width: 20px; background-color: #fff; -webkit-transition: -webkit-transform .5s; transition: transform .5s; -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;}
nav .menu_toggle.show_menu span {background-color: rgba(0,0,0,0)}
nav .menu_toggle.show_menu span:before {-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
nav .menu_toggle.show_menu span:after {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
nav .menu_toggle span:before {top: -7px;}
nav .menu_toggle span:after {bottom: -7px;}
nav .menu_toggle .lbl {font-size: 0.8em; margin: 5px 5px 0 0;}

nav ul.mainMenu {display: none; background-color: #196876; z-index: 10; list-style: none; position: fixed; left: 0; right: 0; top:0; bottom: 0; z-index: 550; padding: 150px 0 0 0; text-align: center; font-size: 1.4em}
nav ul.mainMenu li {width: 35%; margin: 15px auto}
nav ul.mainMenu li.locations {padding-right: 15px; position: relative; cursor: pointer}
nav ul.mainMenu li.locations i {position: absolute; width: 13px; height: 9px; background: url('/images/down-arrow.png') 0 0 no-repeat; position: absolute; right: 0; top: 4px}
nav ul.mainMenu li.locations.expand i {background-image: url('/images/up-arrow.png')}
nav ul.mainMenu li.locations ul {margin: 25px 0 0 -20%; position: absolute; top:0; left: 0; font-size: 0.8em; height: 0; overflow: hidden; display: none; width: 200px}
nav ul.mainMenu li.locations ul li {display: block; margin: 7px 0; width: 100%}
nav ul.mainMenu li.locations ul li span {color: #2dc0d9}

.socialMedia {list-style: none; width: 75px; margin: 15px auto;}
.socialMedia li {display: inline-block; width: 25px; height: 25px; background: url('/images/sm-icons.png?v=1') 0 0 no-repeat; margin: 0 2.5px;}
.socialMedia li.insta {background-position: 0 -25px;}

/******  Footer  ******/
footer {padding: 25px; background-color: #196876; position: relative}
#signature {font-size: .5em; text-align: center; color: #fff}
footer .logo {background: url('/images/alsultanbrahim-logo.png') 0 0 no-repeat; background-size: contain; width: 30%; height: 70px; float: left}
footer .menus {float: right; width: 60%}
footer ul {list-style: none;}
footer ul.menu {float: left; width: 40%;}
footer ul.locationMenu {float: right; width: 60%;}
footer ul.subMenu a, footer ul.locationMenu a {color: #2dc0d9}
#newsletter {position: fixed; top: 15%; right: -228px; background-color: #196876de; width: 200px; height: 180px; padding: 15px; z-index: 500; cursor: pointer;}
#newsletter .title {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);font-size: 1.2em; background-color: #196876; width: 130px; padding: 5px 15px; position: absolute; top: 62px; left: -95px}
#newsletter label {font-size: 0.8em; display: block}
#newsletter input[type=submit] {background-color: #36aec7; color: #fff; width: 100px; height: 30px; padding: 8px 10px 10px 10px; border: 0}
#newsletter input[type=text], #newsletter input[type=email] {background-color: #ffffff75; border: 1px solid #36aec7; color: #fff}


/******  Home Page  ******/
.topbanner {background: url('/images/home-bg.jpg?v=1') center center no-repeat; background-size: cover; min-height: 200px; padding: 200px 15px 15px 15px}

section.home h1 {font-family: 'HelveticaNeueLTStd-Lt'; font-size: 1.7em; margin-top: 75px}
section.home h1 span.bold {font-family: 'HelveticaNeueLTStd-Md';}

section.home .locations {padding: 15px; text-align: center;}
section.home .locationList {list-style: none; position: relative; height: 1200px}
section.home .locations h2 {color: #196876; margin: 20px 0; text-transform: inherit}
section.home .locationList li {position: absolute; top: 0; width: 100%; padding: 10px 0; background-color: #fff; background-repeat: no-repeat;
    -webkit-box-shadow: 0px 6px 20px 4px #eee;
    -moz-box-shadow:    0px 6px 20px 4px #eee;
    box-shadow:         0px 6px 20px 4px #eee;}
section.home .locationList li:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 35px;
    top: -35px;
    display: block;
    pointer-events: none;
    background: url('/images/locations_shadow.png') no-repeat 0 0;}
section.home .locationList li:first-child:before {background: none;}
section.home .locations h3 {color: #2dc0d9}
section.home .locationList li figure {background-position: center center; background-size: cover; width: 95%; height: 90%; margin: 10px auto;}
section.home .fish {background: url('/images/fish-bg.jpg?v=1') center center no-repeat; background-size: cover; min-height: 150px; padding: 75px 25px 0 25px;}

/******  About Page  ******/
section.about .topbanner {background: url('/images/about-bg.jpg?v=1') center center no-repeat; background-size: cover;}
section.about .cont {color: #196876; padding: 25px 15px; text-align: center}
section.about .content h1 {color: #2dc0d9; margin-bottom: 15px}
section.about .content p {margin: 5px 0}
section.about h2 {color: #2dc0d9}

section.about .awards ul {list-style: none; margin: 15px}
section.about .awards li {display: inline-block; width: 44%; margin: 2.5%; vertical-align: top}
section.about .awards li figure img {width: 100%; margin-bottom: 10px}
section.about .awards li figure {font-size: 0.7em}

#historyBlock {height: 1500px; margin: 24px auto}
#historyBlock .row {position: relative; margin: 0.5px 0}
#historyBlock .cell {background-color: #196876; color: #fff; width: 50%; position: absolute; left: 0; top: 0; z-index: 10}
#historyBlock .cell2 {background-color: #1b7686; left: 0;  font-size: 0.7em; z-index: 1}
#historyBlock .cell p {margin: auto 10px auto 10px;}
#historyBlock .cell span {font-family: 'HelveticaNeueLTStd-Md';}
#historyBlock .cell1 .arrow {position: absolute; top: 50%; right: -9px; background: url('/images/history-box-arrow.png?v=1') 0 0 no-repeat; width: 9px; height: 22px; z-index: 99}

/******  News Page  ******/
section.news .topbanner {background: url('/images/news-bg.jpg') center center no-repeat; background-size: cover;}
section.news .cont {padding: 25px 15px;}
section.news h1 {color: #2dc0d9; margin: 10px; text-align: center}
section.news h2 {font-size: 1.1em}
#newsList {color: #196876; list-style: none; margin: 0 auto}
#newsList li {margin: 50px 0}
#newsList .image {width: 100%; height: 100px; margin: 10px auto; background-size: contain; background-position: left center; background-repeat: no-repeat}
#newsList p.date {font-style: italic;; font-size: 0.7em; margin-bottom: 15px}
#newsList p a {color: #196876; font-weight: bold; text-decoration: underline;}

/******  Location Page  ******/
section.location {color: #196876; text-align: center}
section.location h1 {color: #2dc0d9; margin: 50px 0}
section.location h2 {color: #2dc0d9; font-size: 1.1em; text-transform: none; font-weight: normal}
section.location .cont {padding: 0 15px}
section.location .cont a {color: #196876;}
section.location .details .box {margin: 25px 0}
section.location .btn {background-color: #196876; color: #fff; padding: 8px 5px 5px 5px; width: 200px; height: 20px; margin: 15px auto}
section.location .btn a {color: #fff}
section.location .offers {padding: 15px; margin-top: 50px;}
section.location .offers h3 {margin-bottom: 25px}
section.location .offer {background-color: #196876; color: #fff; margin: 25px 0}
section.location .offer .text {padding: 15px; text-align: left}
section.location .offer .text p {margin: 10px 0}
section.location .offer .text h4 {text-transform: uppercase; font-size: 1.3em; font-family: 'HelveticaNeueLTStd-Md';}
section.location .offer .image {background: url('/images/offers/qatar-offer-triolunch.jpg') center center no-repeat; background-size: cover; height: 200px; width: 100%;}
section.location .offer2 .image {background-image: url('/images/offers/qatar-offer-businesslunch.jpg');}

#qatarReserve {position: fixed; top: 0; bottom: 0; left: 0; right: 0; padding: 15px; background: #196876; display: none}
#qatarReserve .btn {background-color: #fff; color: #196876}
#qatarReserve iframe {width: 100%; height: 80%}

/******  Contact Page  ******/
section.contact .topbanner {background: url('/images/contact-bg.jpg') center center no-repeat; background-size: cover; height: 400px}
section.contact .allForm {margin-top: -500px; padding: 15px;}
#contactForm {color: #36aec7;}
#contactForm input[type=submit] {background-color: #36aec7; color: #fff; width: 100px; height: 30px; padding: 8px 10px 10px 10px; border: 0}
#contactForm input[type=text], #contactForm input[type=email], #contactForm select {background-color: #ffffff75; border: 1px solid #36aec7; height: 10px; padding: 8px 2% 10px 2%; width: 96%; margin-bottom: 10px; color: #fff}
#contactForm textarea {background-color: #ffffff75; border: 1px solid #36aec7; width: 100%; height: 75px}
#contactForm select {height: 35px; width: 100%; color: #fff}
#contactForm .message {color: #fff; font-family: 'HelveticaNeueLTStd-Md'; margin-bottom: 15px}
section.contact .branches {text-transform: uppercase; font-size: 1.2em; margin: 50px 15px}
section.contact .branches a {color: #36aec7}
#allSM h2 {font-size: 1.2em; font-family: 'HelveticaNeueLTStd-Lt'; margin: 15px;}
#allSM ul {list-style: none; width: 185px; margin: 15px;}
#allSM li.icon {display: inline-block; width: 30px; height: 30px; background: url('/images/sm-all-icons.png?v=2') 0 0 no-repeat; margin: 5px;}
#allSM li.icon.instagram {background-position: -30px 0;}
#allSM li.icon.zomato {background-position: -60px 0; width: 84px}
#allSM li.icon.tripadvisor {background-position: -144px 0; width: 45px}
#allSM li.subIcon {display: inline-block}
#allSM li.subIcon, #allSM li.subIcon li {width: 120px}

/**************/
/*** Tablet ***/
@media (min-width:830px) {
    .onDesktop {display: block;}
    .onMobile {display: none;}
    
    /******  Header  ******/
    #logo {width: 164px; height: 102px; position: absolute; top: 25px;  left: 50%; transform: translate(-50%, 0); z-index: 999}
    nav .menu_toggle {display: none;}
    nav ul.mainMenu {display: block; position: absolute; background: none; top: 70px; left: 10%; right: 10%; font-size: 1.4em; padding: 0; text-align: left; z-index: 10}
    nav ul.mainMenu li {display: inline-block; margin-right: 10px; position: relative; width: auto}
    nav ul.mainMenu li a:hover {text-decoration: none}
    nav ul.mainMenu li.left {float:left;}
    nav ul.mainMenu li.right {float:right;}
    nav ul.mainMenu li.about {margin-right: 150px}
    nav ul.mainMenu li.locations {margin-right: 115px}
    nav ul.mainMenu li.locations ul {width: 200%; margin-top: 50px}
    
    #menuLine {position: absolute; border: 1px solid #2dc0d9; width: 0; left: 0; top: 110px; display: none}
    
    nav .socialMedia {position: absolute; left: 10px; top: 150px; margin: 0}
    nav .socialMedia li {display: block; margin-bottom: 10px}
    
    /******  Footer  ******/
    footer .logo {margin: 50px 0 0 10%; height: 100px}
    footer .menus {margin-top: 50px; font-size: 1.2em}
    footer .socialMedia {position: absolute; right: 10%; top: 75px; margin: 0}
    footer .socialMedia li {display: block; margin-bottom: 10px}
    #signature {margin: 50px auto -15px auto}
    #newsletter {top: 35%}
    
    /******  Home Page  ******/
    .topbanner {min-height: 450px; padding: 200px 15px 15px 15px}
    
    section.home h1 {margin: 175px 0 0 10%; font-size: 2.1em;}
    section.home .locationList {height: 500px; max-width: 1225px; margin: 0 auto}
    section.home .locationList li {width: 400px; height: 400px; padding: 10px 10px 10px 35px;}
    section.home .locationList li:before {content: '';position: absolute;width: 35px;height: 500px;left: -35px;top: auto;display: block;pointer-events: none;background: url('/images/locations_shadow-vertical.png') no-repeat 0 0;}
    section.home .locationList li h3 {font-size: 2em;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);position: absolute;top: 180px;left: -175px;width: 395px;height: 25px;text-align: left;}
    section.home .locationList li figure {height: 95%;}
    section.home .fish {min-height: 450px;; position: relative}
    section.home .fish p {position: absolute; right: 15%; bottom: 12%; font-size: 1.5em; width: 400px}
    
    /******  About Page  ******/
    section.about .cont {max-width: 1000px; margin: 0 auto;}
    section.about h1, section.about h2 {margin-top: 50px}
    section.about .awards li {width: 13%}
    
    #historyBlock {margin: 15px auto 150px auto}
    #historyBlock .row {margin: 0; width: 66.66%}
    #historyBlock .rowE {margin-left: 33.33%}
    #historyBlock .cell2 {font-size: 1em}
    #historyBlock .cell1 {font-size: 1.2em}
    
    /******  News Page  ******/
    section.news h1 {margin-top: 50px}
    #newsList {max-width: 800px; margin: 0 auto;}
    #newsList .image {float: left; width: 40%; height: 150px; background-position: center center}
    #newsList .text {float: left; width: 60%}
    
    /******  Location Page  ******/
    section.location .cont {width: 800px; margin: 0 auto;}
    section.location .details {margin: 75px 0}
    section.location .details .box {display: inline-block; width: 30%; margin: 1%; vertical-align: top}
    section.location .direction {margin-top: 15px}
    section.location .buttons {width: 480px; margin: 15px auto}
    section.location .buttons.oneBranch {width: 230px; margin-bottom: 100px}
    section.location .btn {float: left; margin: 0 15px; cursor: pointer}
    section.location .offers {font-size: 0.9em}
    section.location .offers .image, section.location .offers .text {width: 50%; float: left; padding: 0; height: 300px}
    section.location .offers .text {width: 44%; padding: 0 3%}
    
    #qatarReserve {top: 25%; bottom: 10%; left: 25%; right: 25%; padding: 25px;}
    #qatarReserve .btn {margin: 0 auto 25px auto; float: inherit;}

    /******  Contact Page  ******/
    section.contact .topbanner {height: 650px}
    section.contact .cont {width: 1000px; margin: -600px auto 150px auto;}
    section.contact .allForm {float: left; width: 40%; margin: 0}
    section.contact .allInfo {float: right; width: 40%}
    #allSM ul {width: 240px}
    #allSM li.subIcon, #allSM li.subIcon li {width: 150px}
    
}


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

}