/**
 * @file
 * Positioning for responsive layout .
 *
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
 * column layout depending on whether blocks are enabled in the left or right
 * columns.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

@media screen and (max-width: 1650px) {
    nav #block-menu-block-1 a {
        font-size: 18px;
    }
}

@media screen and (max-width: 1540px) {
/*
    #block-menu-block-2 {
        width: 180px;
        left: -200px;
    }
*/
    nav #block-menu-block-1 a {
        font-size: 18px;
    }
}
@media screen and (max-width: 1430px) {
    nav #block-menu-block-1 a {
        font-size: 18px;
    }
}

@media screen and (max-width: 1399px) {
/*
    #block-menu-block-2 {
        display: none;
    }   
*/
}

@media screen and (max-width: 1310px) {
    #headWrapper {
        padding:0 20px;
    }
}

@media screen and (min-width: 971px) and (max-width: 1300px) {
    body.front #highlightWrapper .highlightContent {
        width: 1250px;
        max-width: calc(100% - 4rem);
        margin: 0 auto;
        margin-bottom: 5rem;
    }
    #footer-contact {
        min-width: auto;
    }
}

@media screen and (max-width: 1230px) {
    #logo img {
        max-width: 140px;
    }
    #mini-panel-etusivun_kaksijako_nostot .panel-pane {
        flex-basis: 100% !important;
    }
}

@media screen and (max-width: 1110px) {
    #headWrapper {
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #mainNavi {
        display: none;
    }
    /*Hamburger menu area*/
    .mean-container .mean-bar {
        background: #ffffff;
        float: none;
        padding: 0;
        min-height: 48px;
        box-shadow: 0 5px 5px -5px #000;
        margin-bottom: 2px;
        top: 60px;
        margin-top: -40px;
        background-color: transparent;
        z-index: 498;
    }
    
	/*area where Saasyoda logo is*/
    .mean-container .mean-nav {
        background: #fff;
        margin-top: 40px;
        position: absolute;
        box-shadow: 0 4px 2px -2px rgb(0 0 0 / 10%);
    }
    /*Where Saasyoda logo is located*/
    #headerBg {
        min-width: 100% !important;
        width:100% !important;
        max-width:100% !important;
        height: 67px;
/*
        position: absolute;
        top: 0;
        left: 0;
*/
        margin-top: -10px;
        /*z-index: 500;*/
    }
    #header {
        min-width: 100% !important;
        width:100% !important;
        max-width:100% !important;
    }
    
    /*this is x icon when menu is opened*/
    .mean-container a.meanmenu-reveal {
        color: #000;    
    } 
    
    /*this is span lines inside hamburger icon*/  
    .mean-container a.meanmenu-reveal span {
	   background: #000;
    }
    
    .mean-container .mean-nav ul li {
        border-top: none;
		margin:0;
		padding:0;
        position:relative;
        float: left;
		list-style: none;
        width: 100%;
	}
    /*
    .mean-container .mean-nav ul li:first-of-type {
        border-top: 0px;
    }*/
    
    /* this is for submenus */
    .mean-container .mean-nav ul li li {
        padding-left: 5% !important;
        width: calc(100% - 5%);
    }

    /*this shows menu content*/
    .mean-container .mean-nav ul li a {
      padding: 14px 33px !important;
	  font-size:18px;
	  height: 20px;
	  line-height:1.2em;
	  width:70%;
	  color: #000;
	  text-transform: none;        
    }

    .mean-nav a:not(.mean-expand):before {
        display: block;
        width: 7px;
        height: 7px;
        content: "";
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        transform: rotate( 
    45deg
     );
        position: absolute;
        left: 0.5rem;
        top: 20px;
        color: #000000;
        font-size: 18px;
    }

    .mean-container .mean-nav ul > li > ul > li > a {
        font-size: 16px;
        position: relative;
    }
    
   .mean-container .mean-nav ul li a.mean-expand {
        width: 24px;
        height: 23px; 
    }
    /*Background Color of + sign when hamburger menu is open and hover*/
    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: rgba(227,227,227,1);
    }
    
    #logo
    {
        margin-left: 3%;
        margin-bottom: 1%;
        position: absolute;
        top:10px;
        left: 0;
        z-index: 499;
    }
    #highlightWrapper {
        width: 100%;
        box-sizing: border-box;
    }
    body.page-node-3 .view-content .views-row,
    body.page-node-79 .view-content .views-row,
    body.page-node-80 .view-content .views-row,
    body.page-node-81 .view-content .views-row,
    body.page-node-82 .view-content .views-row,
    body.page-node-83 .view-content .views-row,
    body.page-node-90 .view-content .views-row {
        flex-basis: 49%;
        margin:0 1% 20px 0;
    }
    
    
}
@media all and (min-width: 971px) {
    body.page-node-84 h3 {
        margin-top: 11rem !important;
    }
    .node-type-sivu .field-item > ul,
    .node-type-sivu .field-item > p,
    .node-type-sivu .field-item > div
    {
        display: block;
        max-width: 700px;
    }
    .content-image,
    .content-element-left,
    .content-element-right
    {
        width: calc((100% - 4rem) / 2) !important;
    }
    .item-inner-body {
        width: calc((100% - 2rem) / 2);
        display: inline-block;
    }
    .item-inner img {
        min-height: 250px;
        max-width: calc((100% - 2rem) / 2);
        float: right;
        object-fit: cover;
        box-shadow: none !important;
    }
    #block-block-3 h2 {
        margin-bottom: 5rem;
    }
    .body-wrapper {
        width: 800px;
        max-width: 100%;
    }

    #mainNavi .menu-level-1 > ul > li:nth-child(5):hover ul.dropdown-menu,
    #mainNavi .menu-level-1 > ul > li:nth-child(5) > ul.dropdown-menu:hover{
        left: -10rem;
    }
    #mainNavi .menu-level-1 > ul > li:nth-child(5) > ul.dropdown-menu > li:hover > ul.dropdown-menu,
    #mainNavi .menu-level-1 > ul > li:nth-child(5) > ul.dropdown-menu > li:hover > ul.dropdown-menu:hover {
        width: 325px;
    }
    .section-reseptihaku #content #haku h2 {
        top: 290px;
    }
    .section-reseptihaku #content #haku .gsc-results-wrapper-nooverlay {
        top: 300px;
    }
    body.logged-in.section-reseptihaku #content #haku h2 {
        top: 400px;
    }
    body.logged-in.section-reseptihaku #content #haku .gsc-results-wrapper-nooverlay {
        top: 410px;
    }

}
@media all and (max-width: 970px) {
    body {
        max-width: 100%;
    }
    body * {
        max-width: 100%;
    }
    body:not(.front) {
        background-image: none;
    }
    
    body:not(.front) #highlightWrapper {
        height: 150px;
    }
    
    body:not(.front) #esNostoWrapper
    {
        display: none;
    }
    body.front #highlightWrapper {
        height: 255px;
        margin-bottom: 0;
    }
    #toinenNaviWrapper{
        display: none !important;
    }
    #block-sharethis-sharethis-block {
        top: 0;
        transform: translateY(-50px);
    }

       
    #page-title,
    .sailyta-oikein-title
    {
       font-size: 2em; 
       font-weight: 600;
       margin-bottom: 15px;
       margin-top: -10px;
    }
    
    #block-block-3 tr td {
        display: block;
        width: 100%;
    }
    
    body:not(.page-node-3) #highlightWrapper, 
    body:not(.page-node-79) #highlightWrapper, 
    body:not(.page-node-80) #highlightWrapper, 
    body:not(.page-node-81) #highlightWrapper, 
    body:not(.page-node-82) #highlightWrapper, 
    body:not(.page-node-83) #highlightWrapper, 
    body:not(.page-node-90) #highlightWrapper, 
    body:not(.front) #highlightWrapper {
        margin-top: 0;
    }
    #block-block-1 .etusivunEsittelyTeksti{
        width: 40%;
        font-size: 1.4em;
        margin-left: 20px;
    }
    /*#block-block-1 {
        margin-top: 20px;
    }*/
        
    #esNostoWrapper {
        margin-right: 0px !important;
        margin-top: -10px !important;
    }

    #mini-panel-etusivun_kolmijako_nostot {
        width: calc(100% - 2rem) !important;
        margin: 0 auto !important;
    }
    #mini-panel-etusivun_kolmijako_nostot .panel-panel div.esNostoLinkki {
        margin: 15px auto;
        position: relative;
        top:0;
    }
    
    #block-panels-mini-etusivun-kolmijako-nostot a {
        font-size: 14px;
    }
    
    #mini-panel-etusivun_kaksijako_nostot p {
        width: 90%;
    }

    .field-name-body {
        width: 100%;
    }
    #content img {
        height: auto !important;
        margin-bottom: 2% !important;
    }
    #content .field-item img {
        margin-bottom: 1.5rem !important;
    }
    .content-image {
        float: none !important;
        text-align: left !important;
    }

    /*
    .node-type-sivu:not(.page-node-77) #content img {
        margin: 2rem 0 2rem 0 !important;
    }
    */
    
    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel {
        float: none !important;
        text-align: center;
        height: auto;
    }
    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel .field-name-body {
        width: 100%;
    }
    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel .inside {
        max-width: 400px;
        margin: 0 auto;
    }
    
    #mini-panel-etusivun_kolmijako_nostot {
        width: 80%;
        margin: 0 10%;
        box-sizing: border-box;
    }

    #mini-panel-etusivun_kolmijako_nostot .panel-panel {
        padding: 0;
        box-sizing: border-box;
        width: calc((100% - 2rem) / 2) !important;
        flex-basis: calc((100% - 2rem) / 2) !important;
    }
    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel.panel-col-first {
        border-bottom: 3px groove rgba(99,173,29,0.3);
        margin-bottom: 0;
        border-right: none;
    }

    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel.panel-col {
        border-bottom: 3px groove rgba(99,173,29,0.3);
        margin-bottom: 0;
    }

    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel.panel-col-last {
        border-left: none;
    }
    
    #content {
        width: 100% !important;
        float: none;
        display: block;
        clear: both;
        padding: 25px 15px;
        box-sizing: border-box;
        max-width: 100%;
    }
    
    #block-menu-block-2 > div > ul{
        width:90%;
        max-width:420px;
        float: left;
        display: block;
    } 
/*
    #toinenNaviWrapper {
        margin-top: -200px;
        width: 95%;
        box-shadow: none;
        
    }
*/
    
    #content table {
        float: none;
        width: 100% !important;
    }
 
    #content > article > div > div > div > blockquote {
        font-size: 1em;
        float: none;
        display:block;
        max-width:calc(100% - 4rem);
        margin: 0 0 3rem 0;
    }
  
    #alanavinalapala {
        width: 80%;
        height: 0px;
        /*margin-top: 10%;*/
        float: left;
        display:block;
    }
    #block-block-5 {
        width: 95%;
    }
    #laskuriVasen, #laskuriOikea {
        width: 100%;
    }
    
    #block-block-6 {
        width: 95%;
    }
    #annoslaskuri {
        height: 220px;
    }
    
    #laskuriTxt{
        margin-top: 40px;
    }
    #slider-aikuista, #slider-lasta {
        width: 85%;
    }
    #annosLaskuriTaulukko td {
        font-size: 1.5em !important;
    }
    #sailytysaikoja {
        margin-top: 5%;
    }
    
    #mini-panel-etusivun_kaksijako_nostot > div.panel-panel.panel-col-last {
        width:470px;
        margin-top: 30px;
        float:left;
        display: block;

    }
    .section-reseptihaku #content input.gsc-search-button {
        width: auto;
    }
    /*footer responsiivisuus alku*/
    #footer {
        width: 100%;
        float: left;
        height: auto;
        display: block;
    }
    #block-block-2 .block block-block first odd
    {
        width: 90%;
    }
    #block-block-2 {
        float: left;
        display: block;
        word-wrap: break-word;
        height:auto;
    }
    
    #block-block-2 > p:nth-child(3) {
        width: 90%;
        margin-top: 1%;
        float: left;
        display: block;
        padding-top: 3%;
    }
    
    #block-block-3 {
        width: 100%;
    }
    #block-block-3 > table {
        overflow-x: auto;
        width: 100% !important;
    }

    #footerYhteystiedot > div {
        width: 100%;
        word-wrap: break-word;
        font-size: 0.7em;
        float: none;
        display: flex;
        flex-flow: column;
        font-size: 14px;
    }
    /*footer responsiivisuus loppu*/

    /*** ETUSIVU ***/
    #block-block-1 .etusivunEsittelyTeksti {
        font-size: 36px;
        width: 100%;
        margin: 0 auto;
    } 
    #mini-panel-etusivun_kolmijako_nostot > div.panel-panel {
        margin: 0;
    }
    #mini-panel-etusivun_kolmijako_nostot {
        margin: 0 auto;
    }
    #mini-panel-etusivun_kaksijako_nostot article {
        width: 100%;
        float: none;
    }
    
    /*** FOOTER ***/
    #footer #block-block-2 {
        margin: 0;
        padding: 0;
        flex-flow: column;
    }
    #footer #block-block-2 #block-2-col1,
    #footer #block-block-2 #block-2-col2,
    #footer #block-block-2 #block-2-col3 {
        margin: 30px 0;
        width: 100%;
        padding: 0 15px;
        text-align: center;
    }

    /*** RESEPTIHAKU ***/
    body.page-node-3 #block-block-6 {
        margin-left: 0;
    }
    .section-reseptihaku #content input.gsc-search-button {
        padding: 0;
        width: 300px;
        margin-left: -200px;
    }

    /*** RUOKAHÄVIKKI ***/
    body.page-node-79 #highlightWrapper,
    body.page-node-80 #highlightWrapper,
    body.page-node-81 #highlightWrapper,
    body.page-node-82 #highlightWrapper,
    body.page-node-83 #highlightWrapper,
    body.page-node-90 #highlightWrapper {
        height: auto;
    }
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot {
        position: relative;
    }
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot .panel-display {
        align-items: center;
        display: flex;
        flex-flow: column;
        width: 80%;
    }
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot .panel-panel {
        max-width: 500px;
        width: 100%;
        padding: 0;
        margin: 10px 0;
    }
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot .panel-panel .field-name-body {
        width: 100%;
    }
    /*
    body.page-node-79 #page_content,
    body.page-node-80 #page_content,
    body.page-node-81 #page_content,
    body.page-node-82 #page_content,
    body.page-node-83 #page_content,
    body.page-node-90 #page_content{
        margin-top: 40px;
    }
    */
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot .panel-panel {
        min-height: 160px;
    }
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot .panel-panel a {
        padding-top: 115px;
    }
    blockquote + p {
        width: 100%;
    }
    .item-inner img.accordion-img {
        min-height: 250px;
        max-width: 100%;
        float: none;
        object-fit: cover;
        box-shadow: none !important;
        margin: 2rem 0 0 0 !important;
    }
    #footer #block-block-3 h2,
    #footer-logos
    {
        width: 100%;
        margin: 0;
    }
    #footer-logos {
        width: calc(100% - 2rem);
        margin: 0 auto;
    }
    #footer #block-block-3 h2 {
        margin: 3rem 0 2rem 0;
    }
    #block-block-3 {
        flex-flow: column;
    }
    #footer-contact {
        margin: 3rem auto 0 auto;
    }
    #footerYhteystiedot {
        padding: 2rem 0;
    }
    #resepti .content-column {
        flex-basis: 100%;
    }
    body.node-type-resepti #content {
        padding: 3rem 2rem;
    }
    .recipe-background {
        height: 300px;
    }
    /*
    body.node-type-resepti #content {
        margin-top: -75px;
    }
    */
    #resepti .column {
        padding: 1rem 0;
    }
    #resepti .resepti-energiamaara {
        margin: 3rem auto 0 auto;
    }
    .node-type-sivu #content h2:not(.empty),
    .node-type-sivu #content h3:not(.empty)
    {
        margin: 1.5rem 0 1.5rem 0;
        font-weight: bold;
    }
    .gsc-wrapper iframe {
        margin-top: 2rem;
    }
    
}

@media all and (max-width: 768px) {
    #content img.no-mobile {
        display: none;
    }
    #content img {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
    #block-block-1 .etusivunEsittelyTeksti {
        width: auto;
        margin-left: 1rem;
    }
}

@media all and (min-width: 601px) and (max-width: 970px) {
    body.front #mini-panel-etusivun_kolmijako_nostot .panel-col-last {
        flex-basis: 100% !important;
    }
    body.front #mini-panel-etusivun_kolmijako_nostot .panel-col-last .inside {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    body.front #mini-panel-etusivun_kolmijako_nostot .panel-col-last .panel-pane {
        width: calc((100% - 2rem) /2);
        max-width: 446px;
        background: transparent;
    }
    body.front #mini-panel-etusivun_kolmijako_nostot .panel-col-last .panel-pane:nth-child(2) {
        /*left: -8px;*/
    }
    body.front #mini-panel-etusivun_kolmijako_nostot .panel-col-last .panel-pane article {
        max-width: 400px;
        margin: 0 auto;
    }
    #block-panels-mini-etusivun-kolmijako-nostot .panel-col-last .node-nosto-content {
        background: #fff;
    }
    
}

@media all and (max-width: 600px) {
    body.page-node-3 .view-content .views-row,
    body.page-node-79 .view-content .views-row,
    body.page-node-80 .view-content .views-row,
    body.page-node-81 .view-content .views-row,
    body.page-node-82 .view-content .views-row,
    body.page-node-83 .view-content .views-row,
    body.page-node-90 .view-content .views-row {
        flex-basis: 100%;
        margin:0 0 20px 0;
    }
    #block-panels-mini-etusivun-kolmijako-nostot .panel-panel {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    #block-panels-mini-etusivun-kaksijako-nostot {
        padding: 0 !important;
    }
    #mini-panel-etusivun_kaksijako_nostot .panel-pane:last-of-type {
        padding: 2rem !important;
    }
    .etusivu-sisalto .node-nosto-link {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .etusivu-sisalto .node-nosto-title {
        font-size: 23px !important;
    }
    #mini-panel-etusivun_kaksijako_nostot .panel-pane:last-of-type {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    #mini-panel-etusivun_kaksijako_nostot .panel-pane:nth-of-type(2) .node-nosto-content {
        padding: 2rem 1rem;
    }
    .etusivu-sisalto p, .etusivu-sisalto span {
        font-size: 16px !important;
    }
    .etusivu-sisalto .node-nosto-link {
        margin-top: 2rem;
    }
    body.node-type-sivu #highlightWrapperInner {
        background-position: center;
    }
    body.node-type-sivu #content {
        padding: 3rem 2rem;
    }
    body.section-reseptihaku.node-type-sivu #content {
        padding: 2rem 1rem;
    }
    #footer #block-2-col2 .mistaOnKyseToka {
        font-size: 16px !important;
    }
    .etusivu-sisalto .node-nosto-link,
    #footer-contact
    {
        text-decoration: none;
        padding: 1rem 1.5rem;
        font-weight: 600 !important;
    }
    #haku-wrapper h2 {
        margin-top: 7rem !important;
    }
    .gsc-wrapper iframe {
        margin-top: 4rem;
    }
    .node-type-resepti #page_content {
        padding: 0 1rem;
    }
    body #highlightWrapperInner {
        height: 250px !important;
        /*margin-bottom: 40% !important;*/
    }
    #page-title,
    .field-item h2,
    .field-item h3,
    h2.block__title
    {
        font-size: 1.5rem;
    }
    body.page-node-79 #highlightWrapperInner
    {
        height: 600px !important;
    }
}


@media all and (max-width: 480px) {
    #page_content {
        padding: 0 1rem;
    }
    body.node-type-sivu #content {
        padding: 3rem 1.5rem;
    }
    #block-panels-mini-etusivun-kolmijako-nostot a.node-nosto-link {
        position: static;
    }
    #block-panels-mini-etusivun-kolmijako-nostot .node-nosto-content {
        min-height: auto;
    }
    .mean-container .mean-nav ul li a,
    .mean-container .mean-nav ul > li > ul > li > a
    { 
        font-size: 14px;
    }
    ul {
        padding: 0 0 0 15px;
    }
    #block-block-2 > h2 {
        font-size: 1.3em;
    }
    #block-block-2 > p.mistaOnKyseToka, #content {
        font-size: 1em;
    }
    #footer #block-block-2 p {
        width: 100%;
    }
    #footerYhteystiedot > div {
        font-size: 12px;
    }
    body.node-type-resepti #content {
        padding: 2rem 1.5rem;
    }
    #laskuriVasen, #laskuriOikea {
        max-width: 100%;
    }
    #annoslaskuri {
        background: #70B521 !important;
    }
    body.page-node-79 #block-panels-mini-ruokahavikki-kolmijako-nostot .panel-panel a {
        padding-top: 105px;
    }
}

@media all and (max-width: 270px) {
    /*Hamburger menu area*/
    .mean-container .mean-bar {
        top: 45px;
    }
    #headerBg {
        margin-top: -25px;
    }
   
}