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

* {margin: 0; padding: 0}
body {font-family: "Montserrat-Regular"; font-size: 0.8em; line-height: 1.3em; color: #8d8b8b}
.clear {clear: both}
section {margin: 75px 10px}
#signature {font-size: 0.7em}
#signature a {color: #fff; text-decoration: none}

/**************/
/*** Mobile ***/
h1 {color:#fff; font-size: 1.3em; text-transform: uppercase;}
h1 span {font-size: 2.5em;font-family: 'Montserrat-Bold';}
h2 {text-transform: uppercase; color:#7d131a; font-family: 'Montserrat-Bold'; font-size: 2em; line-height: 25px; margin: 5px 0 10px 0}
h2 span { color: #c6c5c5;font-family: 'Montserrat-Regular';}

/**** Header ****/
section.header {background: url('/images/tony-ramy-main1.3.jpg?v=1') center 0 no-repeat; background-size: cover; min-height: 450px; margin: 0; position: relative}
section.header h1 {position: absolute; right: 15px; bottom: 15px; line-height: 27px; text-align: right}

/**** Footer ****/
footer {background-color: #000; color: #fff; padding: 25px 25px; text-align: center;}
footer .linkedin {width: 30px; height: 29px; background: url('/images/linkedin-icon.png') center center no-repeat; margin: 50px 5px 15px 5px; display: inline-block}
footer .instagram {background-image: url('/images/instagram-icon.png')}
footer .linkedin a {display: block; width: 100%; height: 100%}
#contactInfo .contactLogo {background: url('/images/ramy-holding-logo-white.png') center center no-repeat; width: 200px; height: 25px; background-size: contain; margin: 25px auto}
#contactInfo .contactSyndicate .contactLogo {background-image: url('/images/syndicate-logo.png');height: 75px;}
#contactInfo .title {font-weight: bold; margin: 10px 0}

/**** Home ****/
section.bio p {margin: 5px 0}

section.press .collage {background: url(/images/in-the-press-collage.jpg) center center no-repeat; background-size: cover; height: 250px; width: 100%; margin: 50px auto 15px auto}

#pressList, #conceptList {list-style: none}
#pressList li {display: inline-block; width: 45%; margin: 2%}
#pressList li img, #conceptList li img {width: 100%}
#conceptList li {display: inline-block; width: 40%; margin: 4%; height: 100px; background-size: contain; background-repeat: no-repeat; background-position: center;}
#pressList li a {color: #000; text-decoration: none; display: block; width: 100%; height: 100%}
#conceptList .db {background-image: url('/images/concepts/concept-diwanbeirut.jpg?v=1')}
#conceptList .asb {background-image: url('/images/concepts/concept-alsultanbrahim.jpg?v=1')}
#conceptList .falamanki {background-image: url('/images/concepts/concept-alfalamanki.jpg?v=1')}
#conceptList .mp {background-image: url('/images/concepts/concept-mamapita.jpg?v=1')}
#conceptList .mlook {background-image: url('/images/concepts/concept-mlook.jpg')}
#conceptList .bo {background-image: url('/images/concepts/concept-b018.jpg?v=2')}
#conceptList a {display: block; width: 100%; height: 100%}

section.syndicate {background: url('/images/tony-ramy-president.jpg?v=1') center center no-repeat; background-size: cover; min-height: 650px; text-align: center; position: relative; margin-left: 0; margin-right: 0;}
section.syndicate .cont {background-color: rgba(0,0,0,0.7); color: #fff; position: absolute; left: 0; right: 0; bottom: 25px; padding: 15px;}
section.syndicate .sorcnpLogo {width: 200px; height: 50px; background: url('/images/syndicate-logo.png') center center no-repeat; background-size: contain; margin: 25px auto}
section.syndicate p.quote {font-size: 1.4em; text-transform: uppercase; line-height: 1.3em; margin: 5px 0}
section.syndicate button {background-color: transparent; border: 2px solid #fff; border-radius: 5px; padding: 10px; color: #fff; margin: 10px}
section.syndicate button a {display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; text-transform: uppercase}

/**************/
/*** Tablet ***/
@media (min-width:830px) {
    body {font-size: 1em;}
    section.header {min-height: 700px;}
    section.header h1 {left: 100px; bottom: 100px; font-size: 1.8em; line-height: 45px}
    h2 {line-height: 30px; margin-bottom: 50px}

    section.bio, section.press, section.concepts {max-width: 1000px; margin: 100px auto; text-align: center}

    #pressList li {display: inline-block; width: 30%; margin: 1.5%}

    section.press .collage {height: 350px;}

    section.syndicate {min-height: 800px; background-image: none}
    section.syndicate .sorcnpLogo {width: 250px; height: 75px; margin-bottom: 50px}
    section.syndicate .bgImg {position: absolute; width: 50%; right: 0; top: 0; bottom: 0; background: url('/images/tony-ramy-president.jpg?v=1') center center no-repeat; background-size: cover;}
    section.syndicate .cont {left: 0; width: 36%; top: 0; bottom: 0; padding: 75px 7% 0 7%}
    section.syndicate button {margin-top: 50px}
    
    #conceptList li {width: 13%; margin: 1%; height: 100px;}
    
    #contactInfo {font-size: 0.8em}
    #contactInfo h2 {margin-bottom: 15px}
    #contactInfo .contactRamyHolding, #contactInfo .contactSyndicate {float: left; width: 25%; text-align: left; margin: 10px 20% 10px 5%;}
    #contactInfo .contactLogo {margin: 0}
    #contactInfo .contactRamyHolding {margin: 10px 5% 10px 20%;}
    #contactInfo .contactRamyHolding .contactLogo {height: 75px}
    footer .linkedin {margin: 15px auto 15px auto}

}


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

}