/*

 Theme Name:   7-Eleven

 Theme URI:    http://

 Description:  7-Eleven Theme

 Author:       Nicklas Öhman

 Author URI:   http://www.nickit.se

 Template:     twentyseventeen

 Version:      0.2.2

 License:      GNU General Public License v2 or later

 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

 Text Domain:  rcs

*/





/*Fonts*/



@font-face {

    font-family: CHALETBFFOR7ELEVEN;

    src: url(/wp-content/themes/7-eleven/fonts/CHALETBFFOR7ELEVEN-BOLD.TTF);

    font-weight: normal;

}







h4 {

	color: #333;

	font-size: 24px;

}





h1,h2,h3,.menu {

    font-family: CHALETBFFOR7ELEVEN;



}





/*Body*/



body {

    background-color: #000;

    text-align: left;

    font-size: 15px;

    line-height: 30px;

    word-wrap: break-word;

    text-rendering: optimizeLegibility;

}



p {

    margin: 0 0 1.5em;

    padding: 0;

    font-weight: 300;

    line-height: 20px;

}



b, strong {

    font-weight: 700;

}



img, video {

    max-width: 80%;

}



.wrap {

    padding-left: 1em;

    padding-right: 1em;

}





/* Navigation */



.js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation>div>ul {

    display: none;

}



.navigation-top {

    /*! font-size: 10px; */

    background-color: #84B2A8;

    border: 0px;

    left: 0px;

    top: 0px;

    bottom: 2000px;

    right: 20px;

    width: 10%;

    position: fixed;

    z-index: 12;

}



.navigation-top .wrap {

    max-width: 1000px;

    padding: 0;

}



.navigation-top nav {

    margin-left: 0em;

}



.navigation-top a {

    color: #222;

    font-weight: 500;

    /*! font-size: 22px; */

    -webkit-transition: color 0.2s;

    transition: color 0.2s;

}



.navigation-top .current-menu-item>a, .navigation-top .current_page_item>a {

    color: #767676;

}



.main-navigation {

    clear: both;

    display: block;

}



.main-navigation ul {

    background: #aeabb2;

    list-style: none;

    margin: 0;

    padding: 0 1.5em;

    text-align: center;

    height: 100%;

    width: 100%;

    position: fixed;

}





/* Hide the menu on small screens when JavaScript is available.

   * It only works with JavaScript.

   */



.js .main-navigation ul, .main-navigation .menu-item-has-children>a>.icon, .main-navigation .page_item_has_children>a>.icon, .main-navigation ul a>.icon {

    display: none;

}



.main-navigation>div>ul {

    border-top: 0px solid #eee;

    padding-top: 14%;

}



.js .main-navigation.toggled-on>div>ul {

    display: block;

}



.main-navigation ul ul {

    padding: 0 0 0 1.5em;

}



.main-navigation ul ul.toggled-on {

    display: block;

}



.main-navigation ul ul a {

    letter-spacing: 0;

    padding: 0.4em 0;

    position: relative;

    text-transform: none;

}



.main-navigation li {

    position: relative;

    border: 1;

    display: block;

    border-color:#989898;



}





.main-navigation a {

    display: block;

    padding: 0.5em 0;

    text-decoration: none;

}



.main-navigation a:hover {

    color: #767676;

}





/* Menu toggle */

.menu-toggle {

    background-color: transparent;

    color:transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    color: transparent;

    display: none;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.5;

    /* margin-left: 15px; */

    padding: 0px;

    text-shadow: none;

    position: absolute;

    z-index: 999;

}





/* Display the menu toggle when JavaScript is available. */

.js .menu-toggle {

    display: block;

}



.main-navigation.toggled-on ul.nav-menu {

    display: block;

}



.menu-toggle:hover, .menu-toggle:focus {

    background-color: transparent;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.menu-toggle:focus {

    outline: thin solid;

}



.menu-toggle .icon {

    margin-right: 0.5em;

    top: -2px;

}





/* SVG Icons base styles */

.icon {

	color: black;

}



.toggled-on .menu-toggle .icon-bars, .menu-toggle .icon-close {

    display: none;

}



.toggled-on .menu-toggle .icon-close {

    display: inline-block;

}





/* Dropdown Toggle */



.dropdown-toggle {

    background-color: transparent;

    border: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    color: #222;

    display: block;

    font-size: 16px;

    right: -0.5em;

    line-height: 1.5;

    margin: 0 auto;

    padding: 0.5em;

    position: absolute;

    text-shadow: none;

    top: 0;

}



.dropdown-toggle:hover, .dropdown-toggle:focus {

    background: transparent;

}



.dropdown-toggle:focus {

    outline: thin dotted;

}



.dropdown-toggle.toggled-on .icon {

    -ms-transform: rotate(-180deg);

    /* IE 9 */

    -webkit-transform: rotate(-180deg);

    /* Chrome, Safari, Opera */

    transform: rotate(-180deg);

}





/* Scroll down arrow */



.site-header .menu-scroll-down {

    display: none;

}





/*Panel backgrounds*/

.twentyseventeen-panel.post-20 {

    background-color: #84B2A8;

}



.twentyseventeen-panel.post-129 {

    background-color: #84B2A8;

}



.twentyseventeen-panel.post-90 {

    background-color: #D9D1B8;

}



.twentyseventeen-panel.post-357 {

    background-color: #D9D1B8;

}



.twentyseventeen-panel.post-367 {

    background-color: #D9D1B8;

}



.twentyseventeen-panel.post-371 {

    background-color: #D9D1B8;

}



.twentyseventeen-panel.post-96 {

    background-color: #FDC3CE;

}



.twentyseventeen-panel.post-450 {

    background-color: #b8d9d7;

}



.twentyseventeen-panel.post-473 {

    background-color: #bed9b8;

}



.twentyseventeen-panel.post-475 {

    background-color: #000;

    color:#898989;

}



.twentyseventeen-panel.post-475 h4 {

    color:#898989;

}



.twentyseventeen-panel.post-479 {

    background-color: #c4b8d9;

}



.twentyseventeen-panel.post-481 {

    background-color: #d9b8b8;

}



.twentyseventeen-panel.post-493 {

    background-color: #d9b8d4;

}



.twentyseventeen-panel.post-494 {

    background-color: #b8d9d7;

}



.twentyseventeen-panel.post-495 {

    background-color: #fdf8c3;

}





/*Hide elements*/



.site-branding {

    display: none;

}



* .site-footer {

    Display: none;

}



.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {

    border-top: 0px solid #ddd;

}



.entry-header {

    Display: none;

}



/*List*/

ul,

ol {

    margin: 0em 0em 3em;

    padding: 0;

    line-height: 20px;

}





/*Panel settings*/



.page-two-column .panel-content .entry-content {

    float: left;

    width: 100%;

    padding-left: 15%;

    padding-right: 15%;

}



.blog:not(.has-sidebar) #primary article, .archive:not(.page-one-column):not(.has-sidebar) #primary article, .search:not(.has-sidebar) #primary article, .error404:not(.has-sidebar) #primary .page-content, .error404.has-sidebar #primary .page-content, body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {

    float: left;

    width: 100%;

}





/*Picture settings*/



.entry-content a img, .widget a img {

    -webkit-box-shadow: 0 0 0 0px #fff;

    box-shadow: 0 0 0 0px #fff;

}



img.alignright {

    float: right;

    margin-left: 1.5em;

    width: 130px;

}



img.alignleft {

    float: left;

    margin-right: 1.5em;

    width: 130px;

}



.menu-toggle:focus {

    outline: none;

}



/*Scroll Animated settings*/



.section-1 {

    z-index: 1;

    clear: both;

    width: 100%;

    height: 170px;

    box-sizing: border-box;

    position: relative;

    margin-top: 30px;

}



.slide-out-right {

    position: fixed;

    text-align: center;

    right: 0px;

    margin: 0 auto;

    z-index: 58;

    background: transparent;

}



.section-2 {

    text-align: center;

    z-index: 2;

    background: transparent;

    /*! height: 400px; */

}



.section-2 .text-wrapper span {

    opacity: 1;

    -webkit-transition: opacity 0.2s;

}



.section-2 .text-wrapper span.visible {

    opacity: 0;

}



.section-3 {

    text-align: center;

    z-index: 2;

    background: transparent;

    height: 500px;

    position: relative;

    overflow: hidden;

    width: 100%;

    clear: both;

}



.slide-in-top {

    position: fixed;

    top: 0%;

    width: 100%;

    left: 0;

    right: 0;

    text-align: center;

    font-size: 4em;

}



.animated.slideInLeft {

    position: relative;

    margin-top: -15%;

}



.animated.slideInRight {

    position: relative;

    margin-top: -15%;

}



.animated.flash {

    position: absolute;

}



.animated.zoomOut {

    position: absolute;

}



.animated.shake {

    margin-top: 15px;

}





/*Menu settings*/



@media screen and (min-width: 20em) {

    ul,

    ol {

        margin: 0em 0em 3em;

        padding: 0;

        line-height: 20px;

    }



    .section-1 {

        height: 205px;

    }

    .navigation-top a {

        font-size: 18px;

    }

    .menu-toggle {

        font-size: 30px;

    }

    img.alignright {

        float: right;

        margin-left: 1.5em;

        width: 130px;

    }

    img.alignleft {

        float: left;

        margin-right: 1.5em;

        width: 130px;

    }



}



@media screen and (min-width: 25em) {

    ul,

    ol {

        margin: 0em 0em 3em;

        padding: 0;

        line-height: 20px;

    }



    .section-1 {

        height: 260px;

    }

    .navigation-top a {

        font-size: 20px;

    }

    .menu-toggle {

        font-size: 35px;

    }

    .panel-content .wrap {

        padding-bottom: 2em;

        padding-top: 3.5em;

    }

    .page-one-column .panel-content .wrap {

        max-width: 740px;

    }

    img.alignright {

        float: right;

        margin-left: 1.5em;

        width: 130px;

    }

    img.alignleft {

        float: left;

        margin-right: 1.5em;

        width: 130px;

    }



}



@media screen and (min-width: 30em) {

    ul,

    ol {

        margin: 0em 0em 3em;

        padding: 0;

        line-height: 20px;

    }



    .section-1 {

        height: 310px;

        margin-top: 30px;

    }

    .navigation-top a {

        font-size: 20px;

    }

    .menu-toggle {

        font-size: 40px;

    }

    img.alignright {

        float: right;

        margin-left: 1.5em;

        width: 180px;

    }

    img.alignleft {

        float: left;

        margin-right: 1.5em;

        width: 180px;

    }

}



@media screen and (min-width: 36em) {

    ul,

    ol {

        margin: 0em 0em 3em;

        padding: 0;

        line-height: 20px;

    }



    .section-1 {

        height: 340px;

        margin-top: 30px;

    }

    .navigation-top a {

        /* font-size: 35px; */

    }

    .menu-toggle {

        font-size: 40px;

    }

    img.alignright {

        float: right;

        margin-left: 1.5em;

        width: 230px;

    }

    img.alignleft {

        float: left;

        margin-right: 1.5em;

        width: 280px;

    }



}



@media screen and (min-width: 48em) {

    .section-1 {

        height: 360px;

        margin-top: 0px;

    }

    img.alignright {

        float: right;

        margin-left: 1.5em;

        width: 230px;

    }

    img.alignleft {

        float: left;

        margin-right: 1.5em;

        width: 280px;

    }



    .menu-toggle:focus {

    outline: none;

    }

    /* Navigation */

    .js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation>div>ul {

        display: none;

    }



    .navigation-top {

        font-size: 40px;

        left: 0px;

        top: 0px;

        bottom: 2000px;

        right: 20px;

        width: 10%;

        position: fixed;

        z-index: 12;

    }



    .navigation-top .wrap {

        max-width: 1000px;

        padding: 0;

    }



    .navigation-top nav {

        margin-left: 0em;

    }



    .navigation-top a {

        color: #222;

        font-weight: 400;

        /* font-size: 40px; */

        -webkit-transition: color 0.2s;

        transition: color 0.2s;

    }



    .navigation-top .current-menu-item>a, .navigation-top .current_page_item>a {

        color: #767676;

    }



    .main-navigation {

        clear: both;

        display: block;

    }



    .main-navigation ul {

        background: #aeabb2;

        list-style: none;

        margin: 0;

        padding: 0 1.5em;

        text-align: center;

        height: 100%;

        width: 100%;

        position: fixed;

        overflow-y:scroll;

	    overflow-x:hidden;

    }

    /* Hide the menu on small screens when JavaScript is available.

   * It only works with JavaScript.

   */

    .js .main-navigation ul, .main-navigation .menu-item-has-children>a>.icon, .main-navigation .page_item_has_children>a>.icon, .main-navigation ul a>.icon {

        display: none;

    }



    .main-navigation>div>ul {

        border-top: 0px solid #eee;

        padding: 8%;

    }



    .js .main-navigation.toggled-on>div>ul {

        display: block;

    }

    .main-navigation ul ul {

        padding: 0 0 0 1.5em;

    }



    .main-navigation ul ul.toggled-on {

        display: block;

    }



    .main-navigation ul ul a {

        letter-spacing: 0;

        padding: 0.4em 0;

        position: relative;

        text-transform: none;

    }



    .main-navigation li {

        border-bottom: 1px solid #eee;

        position: relative;

        border: 1;

        display: block;

        border-color: #989898;

    }



    .main-navigation li li, .main-navigation li:last-child {

        border: 0;

    }



    .main-navigation a {

        display: block;

        padding: 0.5em 0;

        text-decoration: none;

    }

    .main-navigation a:hover {

        color: #767676;

    }



    /* Menu toggle */

    .menu-toggle {

        background-color: transparent;

        color: transparent;

        border: 0;

        -webkit-box-shadow: none;

        box-shadow: none;

        /* color: #222; */

        display: none;

        font-size: 50px;

        font-weight: 800;

        line-height: 1.5;

        margin-left: 15px;

        padding: 0px;

        text-shadow: none;

        position: absolute;

        z-index: 999;

    }

    /* Display the menu toggle when JavaScript is available. */

    .js .menu-toggle {

        display: block;

    }



    .main-navigation.toggled-on ul.nav-menu {

        display: block;

    }



    .menu-toggle:hover, .menu-toggle:focus {

        background-color: transparent;

        color: transparent;

        -webkit-box-shadow: none;

        box-shadow: none;

    }



    .menu-toggle:focus {

        outline: none;

    }



    .menu-toggle .icon {

        margin-right: 0.5em;

        top: -2px;

    }



    .toggled-on .menu-toggle .icon-bars, .menu-toggle .icon-close {

        display: none;

    }



    .toggled-on .menu-toggle .icon-close {

        display: inline-block;

    }



    /* Dropdown Toggle */

    .dropdown-toggle {

        background-color: transparent;

        border: 0;

        -webkit-box-shadow: none;

        box-shadow: none;

        color: #222;

        display: block;

        font-size: 16px;

        right: -0.5em;

        line-height: 1.5;

        margin: 0 auto;

        padding: 0.5em;

        position: absolute;

        text-shadow: none;

        top: 0;

    }

    .dropdown-toggle:hover, .dropdown-toggle:focus {

        background: transparent;

    }



    .dropdown-toggle:focus {

        outline: thin dotted;

    }



    .dropdown-toggle.toggled-on .icon {

        -ms-transform: rotate(-180deg);

        /* IE 9 */

        -webkit-transform: rotate(-180deg);

        /* Chrome, Safari, Opera */

        transform: rotate(-180deg);

    }



    /* Scroll down arrow */

    .site-header .menu-scroll-down {

        display: none;

    }

}