/* CSS document for screens: */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;600;700&family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');

body{
    direction: rtl;
    font-family: 'Cairo', sans-serif;
    /*font-family: 'Open Sans', sans-serif;*/
    font-size: 14px;
    font-weight: 300;
    color: #555;
    margin: 0px;
    padding: 0px;
}

#page{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Text: */

h1{margin: 0 0  1em 0;  font-size: 2.8em; font-weight: 700; }
h2{margin: 0 0 .5em 0;  font-size: 1.6em; font-weight: 700; line-height: 1.1em}
h3{margin: 0 0 .5em 0;  font-size: 1.3em; font-weight: 700; }
h4{margin: 0 0 1.5em 0; font-size: 1em;   font-weight: 700; }

p {margin: 0 0 1em;}

a         {color:#007eff;}
a:visited {color:#65b1ff;}

a.btn{font-size: 1.2em; text-decoration: none; color: #fff; border: 2px solid #fff; padding: 4px 15px;
    transition: background-color .5s;
}
a.btn:hover{background-color: rgba(0,0,0,.3); color: #fff; border: 2px solid #fff;}

/* Header: */

header{
    height: 430px;
    background: #007eff url("../imgs/banners/banner1200x430.gif") no-repeat center bottom;
    position: relative;
}

header a.logo{
    z-index: 1;
    position: absolute;
    display: block;
    height: 150px; width: 150px;
    background: url("../imgs/logo/logowhite166x60.png") no-repeat 0 0;
    background-size: contain;
    top: 15px; right: 20px;
}

header a.logo span{display: none;}

header a#login {
    z-index: 1;
    position: relative;
    display: block;
    float: left;
    margin: 20px 0 0 20px;
}


header div.hero{
    position: absolute;
    width: 30%;
    top: 130px; left: 65%;
    color: #025cb9;
}

header div.hero h1{line-height: 1em; margin: 0 0 30px 0;}


/* Section - All */
section{padding: 0px 30px;}
section::after{display: block; content:""; clear: both;}

/* Section - Main*/

section.main{margin-top: 20px; margin-bottom: 30px; padding: 0; }
section.main aside{width:33%; float: left; text-align: center;}

section.main .content{margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px;}
section.main aside h3 a{color: #025cb9; text-decoration: none;}
section.main aside h3 a:hover{text-decoration: underline;}

section.main aside .content.trending {background-image: url("../imgs/icons/trendshotflameicon.svg")}
section.main aside .content.findit {background-image: url("../imgs/icons/locationuser.svg")}
section.main aside .content.tools {background-image: url("../imgs/icons/gear.svg")}

/* Section atmosphere: */

section.atmosphere {background: #c95125; padding-top: 30px; padding-bottom: 30px; color: #fff;}

section.atmosphere article{
    padding: 0 20px 0 515px;
    background: url("../imgs/Capture.PNG") no-repeat 0 5px;
    min-height: 220px;
}


/* Section - How to?*/
section.how-to {background: #eee6d9; position: relative;}

section.how-to aside{width: 30%; float: left;}

section.how-to aside .content{padding: 30px 30px 20px 0; }

section.how-to aside .content img {display: block; margin-bottom: 15px; width: 70%;}

section.how-to aside .content h4{margin-bottom: 0px;}
section.how-to aside .content p{margin-bottom: .5em;}
section.how-to aside .content a{display: inline-block; color: #cc6633; font-weight: 700;}

section.how-to blockquote{
    margin: 0; width:32%;
    color: #444;
    background: #fff;
    position: absolute; bottom:0; right: 4%;
}

section.how-to blockquote p {margin: 30px 50px 20px 30px;}

section.how-to blockquote p.quote{font-style: italic; font-size: 1.2em;}
section.how-to blockquote p.credit{
     color: #777;
    font-size: .95em;
    margin-top: 0;
    padding-right: 20px;
    line-height: 1.3em;
    position: relative;
}

section.how-to blockquote::before{
    content: "\201d"; color: #b2bd65;
    position: absolute; top: 10px; right: 8px;
    font-size: 5em;
    font-family: Serif;
    text-shadow: 1px 1px 2px; #777;
}

section.how-to blockquote p.quote::after{content: "\201c"; font-family: Serif;}
section.how-to blockquote p.credit::before{content: "\2014"; position: absolute; top: -1px; right:0px;}


/* Navigation: */

nav{
    background-color: rgba(0,0,0,.70);
    position:absolute;
    top: 0px; left: 0px;
    padding: 50px 0 0 0;
    width: 100%;
}

nav::after{content:''; display: block; clear: both;}

nav ul{list-style: none; margin: 0px; padding: 0px;}
nav ul li:hover{background-color: #2b0306;}
nav ul li:hover > ul{display: block;}

nav ul li a{
    display: inline-block;
    color:#fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 125px;
    position: relative;
}
nav ul li a:visited {color: #fff; }
nav ul li a:hover {background-color: #6d0911; }

nav ul ul {position: absolute; top:100%; background-color: #2b0306; display: none;}

nav ul ul li{position: relative;}

nav ul ul ul{right:100%; top:0px;}

/* Top-level*/

nav > ul{ padding-right: 200px;}
nav > ul > li {float: right;}
nav > ul > li > a {width:auto; padding:10px 20px 15px 20px;}

nav a[aria-haspopup="true"]::after{
    content:'';
    display: block; width: 0px; height: 0px;
    position: absolute;
    top:16px; left: 15px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid #fff;
}

nav > ul > li > a[aria-haspopup="true"]::after{
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    left:20px; right:auto;
    bottom: 6px; top: auto;
}

/* Footer: */

footer {font-size:.8em; margin:40px; color: #999;}
footer .content{display: inline; }

footer a {margin-left: 30px; color:#777;}
footer  a:visited {color:#777;}
footer  a:hover {color:#000;}


/* Media Queries */

@media screen and (max-width: 1000px){

    h1{font-size: 2.4em; }

    /* Header */
    header div.hero{left: 65%;}
    header div.hero h1{margin-bottom: 20px;}

    /* Section - Atmosphere */
    section.atmosphere article {padding-left: 400px; background-size: 375px auto;}

}

@media screen and (max-width: 825px) {

    h1{font-size: 2.2em;}

    /* Header */
    header{height:300px; background-image: url("../imgs/banners/banner825x300.gif");}
    header div.hero{top:120px; left:65%;}
    /* Section - Atmosphere */
    section.atmosphere article {padding-left: 325px; background-size: 300px auto;}

    /* Section - How To */
    section.how-to blockquote p.quote{font-size: 1.1em; line-height: 1.2em;}
    section.how-to blockquote p.credit{font-size: .8em;}
}

@media screen and (max-width: 775px) {
    h1{font-size: 1.8em;}
    h2{font-size: 1.4em;}
    h3{font-size: 1.1em;}

    a.btn{font-size: 1em;}

    /* Header */
    header a.logo{width: 145px; height:60px;}
    header div.hero{top:140px; left:65%;}

    /* Section - main */
    section.main{margin-top:10px; margin-bottom: 10px;}
    section.main aside div.content{background-size: 55px 55px; padding-top: 60px;}

    /* Section - how to*/
    section.how-to aside div.content img{width: 85%;}

    /* Navigation */
    nav{padding-top: 80px;}
    nav > ul { padding-left: 10px;}
}


@media screen and (max-width: 635px) {
    h1{ font-size: 1em; }
    h3{ margin-bottom: 0px; }
    a.btn{ font-size: .9em; }
    /* Header */
    header{ height:160px;
        background-image: url("../imgs/banners/banner625x160.gif");
        background-position: left top;
    }

    header a.logo{
        width:100%; height:66px;
        right:0px; top:0px;
        background-color: rgba(0,0,0,.65);
        background-size: 112px 46px;
        background-position: 20px center;
    }
    header a#login {
        z-index: 2;
        position: relative;
        display: block;
        float: right;
        margin: 5px 5px 0 0;
    }

    header div.hero{ width:30%; top:70px; left:65%; }
    header div.hero h1{margin-bottom: 10px;}

    /* Section - main */
    section.main aside{ width: 100%; float: none;  text-align:left;}
    section.main aside div.content{
        margin: 8px 20px 8px 0;
        padding: 5px 0px 10px 85px;
        background-size: 50px 50px;
        background-position: 20px 5px;
    }

    /* Section - Atmosphere */
    section.atmosphere article{
        padding: 190px 20px 0px 0px;
        background-size: 300px auto;
        min-height: initial ;
    }

    /* Section - How to */
    section.how-to aside{ width: 100%; float: none; margin: 0; position: relative;}
    section.how-to aside div.content { padding: 20px 20px 20px 150px; }
    section.how-to aside div.content p { font-size: .9em; }
    section.how-to aside div.content img{
        display: inline-block;
        width:125px;
        position: absolute;
        top:30px; left: 0px;
    }

    section.how-to blockquote{
        margin: 0px 20px 0px 40px;
        width:90%;
        padding: 1px 0px 20px 0px;
        position: relative;
    }

    section.how-to blockquote p.credit{ margin-bottom: 0px;}

    /* Navigation */
    nav{position: static; width: auto; padding: 20px 15px; background-color: #4b0a0c;}

    nav ul,
    nav ul ul,
    nav ul ul ul{ display: block; position: static; }

    nav > ul { padding: 0px; }
    nav > ul > li { float: none; margin-top: 25px;}

    nav ul li:hover{ background: none; }
    nav ul li a {
        width:auto;
        display: block;
        margin: 8px 10px;
        padding: 8px 15px;
        border: 1px solid rgba(255,255,255,.25);
    }
    nav ul li a:hover{ background-color: rgba(255,255,255,.2);}

    nav ul ul { background: none; }
    nav ul ul li a { margin-left: 30px; }
    nav ul ul ul li a { margin-left: 60px; }

    nav a[aria-haspopup="true"]::after{ display: none; }

    /* Navigation */

    footer div.content{ display: block; margin-top: 50px;}
    footer div.content a {margin: 0 20px 0 0 ;}


}

@media screen and (max-width: 460px) {

    /* Header */
    header{
        height: 120px;
        background-image: url("../imgs/banners/banner460x110.gif");
    }
    header a.logo {
        height: 36px; background: rgba(0,0,0,.65) url("../imgs/logo/logowhite126x17.png") no-repeat center center;
        background-size: 126px 17px;
    }

    header a#login {
        z-index: 2;
        position: relative;
        display: block;
        float: right;
        margin: 5px 5px 0 0;
    }
    header a.login{ border: none;}
    header a.login:hover{ border: none;}

    header div.hero{ width:30%; top:40px; left:60%; }
    header div.hero h1{ font-size: 1em; margin-bottom: 10px;}
    header div.hero a.btn { padding: 2px 30px; font-size: .8em; }
    header div.hero a.btn span {display: none;}

    /* Section - How to */
    section.how-to aside div.content { padding: 140px 20px 20px 0px;}
    section.how-to aside div.content img {width:auto; height: 100px; top: 30px;}
    section.how-to blockquote {margin: 10px 40px 0px 20px;}

    /* Footer */
    footer::after{content: ''; display: block; clear: both;}
    footer div.content a{
        display: inline-block; margin: 0 0 10px 0;
        float: left;
        clear: both;
    }


}