.toggleMobile { display: none; }
/* .hideMobile { display: block; } */
.showMobile { display: none !important; }

/** Newsbox .. if screen is not high enough */
@media screen and (max-height: 830px) {
    #TitleBar { width: 500px; }
}

/** Newsbox .. if screen is not high enough */
@media screen and (max-height: 760px) {
    #TitleBar { width: 650px; }
}

/** Newsbox .. if screen is not high enough */
@media screen and (max-height: 720px) {
    #TitleBar { width: 800px; }
}


@media screen and (max-width: 1200px) {
    .showMobile { display: block !important; }
    img.showMobile { display: inline !important; }
	.hideMobile { display: none !important; }
    p.title { line-height: 35px; }

	#header { top: 0; bottom: auto; width: 100%; z-index: 10; height: 70px; background: #fff !important; border-top: 0; }
    #header .logo img { left: 0; margin-left: 10px; height: 100%; width: auto; }
    #navigation { display: none; }
    .section { padding: 20px; margin-bottom: 0; min-height: 100vh; }
    .section.home { height: auto; min-height: 100vh; padding: 40px; margin-top: 70px; background-size: 100% auto; }
    .centered { width: auto; }

    #TitleBar { top: auto; width: 80%; right: auto; margin: 0 auto; position: relative; box-sizing: border-box; }

    /** Team */
    .member-wrapper { width: 50%; margin-bottom: 30px; }
    .member { margin: 0 auto; position: relative; }

    /** Footer */
    #footer .col-3 { width: 100%; float: none; text-align: center; padding: 0 30px; }
    #footer table { margin: 0 auto; position: relative; width: auto; }


    /** Contact & Map */
    #MapWrapper { height: auto; border: 0; }
    div#Openingtimes { -moz-box-shadow: none; -webkit-box-shadow: none; -khtml-box-shadow: none; box-shadow: none; }
    div#Openingtimes { text-align: center; float: none; padding: 30px; position: relative; width: 100%; height: auto; top: auto; right: auto; }
    #Openingtimes table { margin: 0 auto; position: relative; width: auto; }

    .hsw_contact_form .contact_half.left, .hsw_contact_form .contact_half.right { float: none; width: 100%; padding: 0 !important; }

	.section .page_image,
    .section .page_content { width: 50%; }

    .section .page_content img { max-width: 100%; }

    .parallax { z-index: 9; }

    #header .logo img { height: 70px; }

	.toggleMobile { display: block; position: absolute; top: 15px; right: 15px; width: 40px; height: 36px; cursor: pointer; z-index: 999; }
    .toggleMobile span { display: block; position: absolute; width: 40px; height: 8px; left: 0; background: #2fac68;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
    .toggleMobile span.menu1 { top: 0; }
    .toggleMobile span.menu2 { top: 14px; }
    .toggleMobile span.menu3 { top: 28px; }

    .toggleMobile.active span.menu1 { top: 14px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
            transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    }
    .toggleMobile.active span.menu2 {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
            transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    }
    .toggleMobile.active span.menu3 {
            opacity: 0;
            -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
            transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    }

    #MobileMenu { position: absolute; top: 70px; left: 0; width: 100%; display: none; list-style: none; padding: 0; margin: 0; }
    #MobileMenu li a { display: block; background: #fff; color: #000; padding: 12px 0; text-decoration: none; letter-spacing: 0.1em; text-align: center; border-bottom: 1px solid #2fac68; }
    #MobileMenu li .before, #MobileMenu li .after { display: none; }
    #MobileMenu li a:hover, #MobileMenu li a.active { color: #2fac68; }
}

@media screen and (max-width: 1000px) {
    #flashMessage { font-size: 14px; padding: 20px; width: 80%; }
    #TitleBar { width: 90%; }

    .member-wrapper { width: 100%; float :none; }
    .member { margin: 0 auto; position: relative; }


    .product { width: 25%; }
    #footer .title { font-weight: bold; font-size: 25px; }
    tr { line-height: 20px; }
}

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

    #TitleBar p.title { font-size: 25px; }

    section { height: auto !important; }
	.section { min-height: auto; height: auto; }
	.section .page_image { float: none; display: none; }
	.section .page_content { float: none; width: 100%; height: auto; overflow: auto; }
    .section .page_content img { width: 100%; height: auto; }

	.product { width: 50%; }

    #ProductOverlay { position: fixed; overflow-y: scroll; top: 0; right: 0; bottom: 0; left: 0; margin: 0 !important; z-index: 99999; width: 100% !important; height: 100% !important; background: #fff; box-sizing: border-box; }
    #ProductOverlay .image img { height: auto; width: auto; max-height: 100vh; }
    #ProductOverlay .image, #ProductOverlay .content { float: none; width: 100%; height: auto; }
    #ProductOverlay .buttons { position: static; bottom: auto; right: auto; width: 100%; box-sizing: border-box; padding: 10px; }
    #ProductOverlay .buttons a { margin: 10px 0; line-height: 50px; display: block; }
    #ProductOverlay .content { text-align: center !important; padding: 10px; }
    #ProductOverlay .close { position: fixed; }

div#TeamText {
    column-count: 1;
    column-gap: 2em;
    text-align: justify;
}
}

@media screen and (max-width: 500px) {
	.product { width: 100%; float: none; } 
    #TitleBar img { height: auto; width: 100%; }
    #TitleBar { width: 100%; }
    #TitleBar p { font-size: 14px; }
    .section.home { padding: 20px; }
    #TitleBar p.nop { height: auto; }
    #TitleBar p.nop img { height: auto; }
    h3 { padding-left: 10px; border-left: 10px solid #2fac68; font-size: 26px; line-height: normal; margin: 10px 0 30px 0; }
    #Section5 p { text-align: justify; }
    p { font-size: 14px; }
}

@media screen and (max-width: 400px) {
    #flashMessage { font-size: 12px; padding: 20px 10px; width: 100%; }

    .member { width: auto; }
    .member .image { text-align: center; position: relative; }
    .member .image img {  }
}