/*
	(c)2021 - visuallizard.com

	Responsive styles using Media Queries
*/


div.mobile-site-title { display: none; }
div.mobile-site-title .container { justify-content: space-between; }
body:before { display: none; }

/* Larger Desktop sizes (more than 1400px): */
@media only screen and (min-width: 1400px) {
	body:before { content: 'x-large'; }
    section#banner { height: 80vh; }

}

/* Desktop sizes (up to 1400px): */
@media only screen and (max-width: 1400px) {
	body:before { content: 'large'; }

}

/* Desktop sizes (up to 1024px): */
@media only screen and (max-width: 1024px) {
    body:before { content: 'large'; }
    .container { max-width: 100%; }
}

/* Medium Tablet sizes (up to 800px):  usually when mobile nav mode kicks in */
@media only screen and (max-width: 800px) {
	body:before { content: 'medium'; }


	/* 	Site Header */
    .site-header {
        padding: 0;
        max-height: 350px;
        background-position: left 0;
        background-size: 100%;
    }
    .site-header > .container {  }
    .site-header > .container.extend { margin: 0; }
    .site-header.home div#home-heading { top: 120px; }
    div#home-heading div.heading-set h1 { min-height: 50px; }
    h1.page-title { padding: 0 2rem; font-size: 2rem; }
	.site-header-container { display: flex; justify-content: space-between; }
    div.mobile-site-title {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
    div.mobile-site-title.nav-fixed {
        top: 0;
        z-index: 2;
        background: #000;
        box-shadow: 5px 0px 10px rgba(0,0,0,0.7);
    }
    div.mobile-site-title.how-to-invest-guide.nav-fixed {
        border-bottom: 1px solid #ccc;
        background: #fff;
        box-shadow: none;
    }
    div.mobile-site-title.nav-fixed .container { z-index: 0; }
    div.mobile-site-title div.site-title { z-index: 1; }
	.site-title { margin-top: 1rem; }
	.site-title-img { max-height: 80px; }
    .main-nav div.site-title { display: none; }

	.search-form { float: none; margin: 1rem; display: none; }

    section#recognition { padding: 0 0 1rem 0; margin: 0; }
    section#recognition .container { padding: 2rem 0 1rem 0; margin: 0; }

	/* MOBILE nav */
    header .main-nav { display: none; }
	#mobile-nav.main-nav { z-index: 100; background: #123; color: #fff; font-size: 18px; box-shadow: none; }
    #mobile-nav.main-nav.nav-fixed { box-shadow: none; }
	#mobile-nav.main-nav .nav-list,
	#mobile-nav.main-nav li > .sub-list { width: 100%; max-height: 9999px; transform: scale(1); transition: max-height .2s ease-in; background: transparent; margin: 0 0 1rem; padding: 0; position: relative; top: auto; left: auto; opacity: 1; visibility: visible; border: none; box-shadow: none; }
	#mobile-nav.main-nav .nav-item { border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; overflow: hidden; }
	#mobile-nav.main-nav .nav-link, .main-nav .nav-1 > .nav-item > .nav-link { -webkit-tap-highlight-color: transparent; width: 100%; border: none; padding-right: 0; }
	#mobile-nav.main-nav .nav-link:hover { opacity: .8; }
	#mobile-nav.main-nav .nav-item:hover > .nav-link { color: inherit; border: none; }

	#mobile-nav.main-nav .nav-1 > .nav-item[data-nav-status="has-active"] > .nav-link,
	#mobile-nav.main-nav .nav-1 > .nav-item[data-nav-status="active"] > .nav-link,
	#mobile-nav.main-nav .nav-1 > .nav-item:hover > .nav-link { color: rgba(255,255,255,.5); }

	#mobile-nav.main-nav .nav-1 { display: block; }
	#mobile-nav.main-nav .nav-1 li a { font-size: 16px; color: #fff; padding: .5rem .5rem; }
	#mobile-nav.main-nav .nav-1 > li > a {  font-weight: bold; color: #fff; text-align: left; }

	#mobile-nav.main-nav .has-sub > .nav-link::after { content: none; }

	#mobile-nav.main-nav .sub-list .sub-list { left: auto; display: block; visibility: visible; opacity: 1; transform: scale(1); left: auto; position: static; top: auto; margin: 0; padding: 0; }

	#mobile-nav.main-nav .nav-2 { /* text-align: center;  */}
	#mobile-nav.main-nav .nav-2 > li { padding: 0; position: relative; }
	#mobile-nav.main-nav .nav-2 li a { border-bottom: none; }

	.js #mobile-nav.main-nav {
        max-height: 100vh;
        display: block;
        position: fixed;
        left: -100%;
        left: -100vw;
        width: 100%;
        width: 100vw;
        height: auto;
        min-height: 100vh;
        padding: 6rem 10px 10px 10px;
        margin: 0;
        overflow: hidden;
        transition: transform .2s ease-in;
        z-index: 1;
    }
	.js .nav-on #mobile-nav.main-nav { max-height: none; transform: translateX(100%); }

	.nav-toggle {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 32px;
        height: 32px;
        margin: 1rem 0;
        color: inherit;
        padding: 0;
        border: none;
        background: transparent;
        transition: color .2s;
        z-index: 3;
    }
    .nav-toggle { color: #fff; }
    .how-to-invest-guide .nav-toggle { color: #000; }
	.js .nav-on .nav-toggle,
	.js .nav-on .nav-toggle:hover { color: #fff; }

	/* hide when main navigation is open.
    .js .nav-on main,
	.js .nav-on .site-footer { max-height: 0; overflow: hidden; }
    */


	/* 	Featured banners */
	.slick-dots { bottom: 0; }
	.banner-container { padding: 2% 4%; }



	/* 	General styles */
	.cke > .c2,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { float: none; margin-left: 0; width: auto; }

	.region-row { display: block; }
	.region-cell { padding: 0; }

	.flex { display: block; }
	.flex > div + div { margin: 0 0 1em 0; }

	h1, .h1 { font-size: 2.75rem; }
	h2, .h2 { font-size: 2rem; }
	h3, .h3 { font-size: 1.5rem; }

	table { font-size: 12px; }

	/* Forms */
	.fm-form [type="url"],
	.fm-form [type="tel"],
	.fm-form [type="text"],
	.fm-form [type="date"],
	.fm-form [type="email"],
	.fm-form [type="number"],
	.fm-form [type="password"],
	.fm-form select,
	.fm-form textarea { -webkit-appearance: none; }

	.fm-form [type="date"] {  min-height: 46px; }
	.fm-form [class^="input-"] { width: 100%; }

	.button { font-size: 1rem; min-width: 0; }
	.button.large { font-size: 100%;  margin-left: 0; margin-right: 0; }


	.pagination-links { font-size: 16px; }
	.pagination-links li:not([class]) { display: none; }

	.img-left,
	.img-right { float: none; margin-left: 0; margin-right: 0; }

    .cke div.c2.c-first > h2 { font-size: 2.25rem; }
    .cke div.c2.c-last > h2 { font-size: 2.25rem; }
    div.plain-content h2 { font-size: 2.25rem; }

    /* Structure */
    section#guide { flex: 0 0 100%; max-width: 100%; }
    section#guide div.cke h2 { font-size: 2.25rem; }
    aside#get-in-touch { flex: 0 0 100%; max-width: 100%; }
    aside#get-in-touch form.fm-form { max-width: 100%; }


	/* 	Modules */
    div.advantage-set { width: 100%; }
    div.advantage-photos { display: none; }

    div.industry-item,
    div.industry-item:nth-child(1),
    div.industry-item:nth-child(2),
    div.industry-item:nth-child(3),
    div.industry-item:nth-child(4) { flex: 0 0 50%; max-width: 50%; }

    section#success-stories .container h2 { font-size: 2.25rem; }
    div.story-set div.success-item h3 { font-size: 1.5rem; }
    div.success-modal div.video-container > iframe { max-height: 300px; }
    section#success-stories div.story-set div.success-item h3 { padding: 1rem; font-size: 1.5rem; }
    section#success-stories div.story-set div.success-modal.active { padding: 1rem; }
    section#success-stories div.story-set div.success-modal.active a.close { top: -20px; right: -20px; }
    section#success-stories div.story-set div.success-modal div.video-container {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 1rem;
    }
    section#success-stories div.story-set div.success-modal div.video-container iframe { flex: 0 0 50%; max-width: 50%; max-height: 300px; }
    section#success-stories div.story-set div.success-modal div.video-container div.video-description { flex: 0 0 50%; max-width: 50%; padding: 1rem 0 1rem 1rem; }

    div.contact-info h3 { font-size: 1.5rem; }

	/* 	Toggles */
	.toggle { right: 1rem; top: .85rem; width: 1.5rem; height: 1.5rem; }
	.toggle-head {padding: .5rem 3rem .5rem 1rem; }
	.toggle-head > .toggle-title { font-size: 18px; }
	.is-toggle-on .toggle-details { padding-left: 1rem; padding-right: 1rem; }


	/* 	Documents */
	.document-item { width: 45%; }

    .site-footer .container aside { flex: 0 0 49%; max-width: 49%; }
    .site-footer .container div.footer-block { flex: 0 0 49%; max-width: 49%; }
    nav#footer-nav ul#fnav li { flex: 0 0 49%; max-width: 49%; }
}


/* Small Mobile sizes (up to 670px): */
@media only screen and (max-width: 670px) {
    body:before { content: 'small'; }

    .site-header,
    .site-header.how-to-invest-guide { background-size: cover; }

    section#banner { height: 375px; margin-top: 0; }
    section#banner div#home-heading {  }
    section#banner.extend div#home-heading { top: 100px; }
    div#home-heading p.h1 { font-size: 2rem; }
    div#home-heading div.heading-set h1 { font-size: 2rem; }

    section#introduction .container .cke div.c2.c-first iframe { max-width: 90%; margin: 0 5%; }

    section,
    section#contact { padding: 3rem 0; }
    div.recognition-set div.recognition-item,
    div.recognition-set div.recognition-item#canadas-best-locations { flex: 0 0 23.5%; max-width: 32%; }
    div.recognition-item p { margin: 1rem 0; }

    div.industry-item:nth-child(1),
    div.industry-item:nth-child(2),
    div.industry-item:nth-child(3),
    div.industry-item:nth-child(4) { min-height: 300px; overflow: hidden; }
    div.industry-item { min-height: 150px; padding: 0 1rem; }

    div.fact-set { align-items: flex-start; }
    div.facts.currency div.fact-set div.fact-item { flex: 0 0 45%; max-width: 45%; }
    div.fact-item h3 { font-size: 2.75rem; }


    section#contact div.contact-column { flex: 0 0 48%; max-width: 48%; }
    section#contact div.contact-column:first-child { flex: 0 0 48%; max-width: 48%; padding: 3rem 2rem 3rem 0; }
}

/* Small Mobile sizes (up to 480px): */
@media only screen and (max-width: 480px) {
	body:before { content: 'small'; }

    .cke div.c2 { flex: 0 0 100%; max-width: 100%; }

    div.recognition-set div.recognition-item { flex: 0 0 23.5%; max-width: 23.5%; }
    div.recognition-set div.recognition-item#canadas-best-locations { flex: 0 0 49%; max-width: 49%; }
    div.recognition-set div.recognition-item#intelligent-cities-forum { border-right: none; }
    section#introduction .container .cke div.c2.c-first { order: 1; flex: 0 0 100%; max-width: 100%; }
    section#introduction .container .cke div.c2.c-last { order: 0; flex: 0 0 100%; max-width: 100%; }
    section#why-winnipeg .container .cke { margin: 0; }
    section#why-winnipeg .container .cke div.c2.c-first,
    section#why-winnipeg .container .cke div.c2.c-last { flex: 0 0 100%; max-width: 100%; }
    div.advantage-item { flex: 0 0 100%; max-width: 100%; }
    section#success-stories { padding: 2rem 0; }
    section#success-stories .container { padding: 0 1.5rem; }
    section#success-stories .container h2 { font-size: 2.5rem; }
    div.story-set div.success-item { flex: 0 0 50%; max-width: 50%; }
    section#success-stories div.story-set div.success-modal.active a.close { top: -30px; right: 0; }
    section#success-stories div.story-set div.success-modal div.video-container iframe { flex: 0 0 100%; max-width: 100%; max-height: 180px; }
    section#success-stories div.story-set div.success-modal div.video-container div.video-description { flex: 0 0 100%; max-width: 100%; padding: 1rem; }
    section#key-industries .container .cke div.c2.c-first,
    section#key-industries .container .cke div.c2.c-last { flex: 0 0 100%; max-width: 100%; }
    div.industry-item,
    div.industry-item:nth-child(1),
    div.industry-item:nth-child(2),
    div.industry-item:nth-child(3),
    div.industry-item:nth-child(4) { flex: 0 0 100%; max-width: 100%; }
    div.fact-set div.fact-item,
    div.facts.currency div.fact-set div.fact-item { flex: 0 0 100%; max-width: 100%; }
    div.plain-content > div,
    div.plain-content > img { flex: 0 0 100%; max-width: 100%; }
    section#contact div.contact-column,
    section#contact div.contact-column:first-child { flex: 0 0 100%; max-width: 100%; padding: 0; }

    div.guide-set h2 { font-size: 1.75rem; line-height: 1.1; }
    div.guide-set h2 span { max-width: 40px; }
    div.guide-set div.guide-item.guide-item-open { padding-left: 40px; }
    div.guide-set h2 > a { padding-right: 2.5rem;  }

    aside#get-in-touch div.cke { padding: 0 1rem; }
    aside#get-in-touch form.fm-form { padding: 2rem 1rem; }

    .site-footer .container aside,
    .site-footer .container div.footer-block { flex: 0 0 100%; max-width: 100%; }


}