/* #region reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

div {
    box-sizing: border-box;
}
/* #endregion */

/* #region images */

img {
    max-width: 100%;
    height: auto;
    border-style: none;
}
/* #endregion */

/* #region basic */

html, body {
    background: #072F4D;
    font: 14px/21px Arial, sans-serif;
    color: #444;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

hr {
    border-bottom: 1px solid #8ebc54;
    margin: 1px;
    clear: both;
}

.light {
    color: #fff !important;
}

    .light h1, .light h2, .light h3 {
        color: #fff !important;
    }

.center-content {
    width: 100%;
    text-align: center;
}

.right-content {
    text-align: left;
	padding: 20px;
}

.remove-bottom {
    margin-bottom: 0 !important;
}

.half-bottom {
    margin-bottom: 15px !important;
}

.add-bottom {
    margin-bottom: 30px !important;
}

.add-top {
    padding-top: 30px !important;
}

/* #endregion */

/* #region typography */

h1, h2, h3, h4, h5, h6 {
    color: #444;
    font-family: Arial, sans-serif;
    font-weight: normal;
}

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        font-weight: inherit;
    }

h1 {
    font-size: 1.7em;
    line-height: 1.2em;
    margin-bottom: 15px;
}

h2 {
    font-size: 1.2em;
    line-height: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

h3 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 8px;
}

h4 {
    font-size: 21px;
    line-height: 30px;
    margin-bottom: 4px;
}

h5 {
    font-size: 17px;
    line-height: 24px;
}

h6 {
    font-size: 14px;
    line-height: 21px;
}

p {
    margin: 0 0 20px 0;
}

em, i {
    font-style: italic;
}

strong, b {
    font-weight: bold;
}

small {
    font-size: 0.8em;
}

.gqNetwork {
    font-size: 28px;
    font-weight: bold;
    color: #003e7e;
    padding-right: 20px;
}

/* #endregion */

/* #region links */

a, a:visited {
    color: #333;
    text-decoration: underline;
    outline: 0;
}

    a:hover, a:focus {
        color: #000;
    }

p a, p a:visited {
    line-height: inherit;
}

.light a, .light a:link, .light a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #fff !important;
}

    .light a:active, .light a:hover {
        color: #ddd !important;
    }

/* #endregion */

/* #region clearing */

.clearfix:before, .clearfix:after, .container:before, .container:after {
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

.clear {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
/* #endregion */

/* #region layout */

#container {
    width: 1140px;
    display: block;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
/* #endregion */

/* #region header */

#leader {
    height: 113px;
    background: url("img/leader-bg.png") top left;
    text-align: center;
}

    #leader #leader-content {
        margin: 0 auto;
        padding: 12px;
    }

#header {
    height: 133px;
}

    #header #header-content {
        width: 100%;
        height: 133px;
    }

    #header #logo {
        width: 422px;
        height: 133px;
        float: left;
        clear: none;
        background-color: #e3e3e3;
    }

    #header #logo-sp {
        width: 18px;
        height: 133px;
        float: left;
        clear: none;
    }

    #header #menu {
        width: 700px;
        float: left;
        clear: none;
    }

    #header #menu-main {
        height: 108px;
        padding: 22px 20px 0 30px;
        background-color: #1787ce;
    }

    #header #menu-sub {
        height: 25px;
        padding: 1px 20px 0 30px;
        background-color: #7cb332;
    }

    #header ul li {
        padding: 0 50px 0 0;
        display: inline;
    }

/* #endregion */

/* #region body content */

#body {
    clear: both;
    padding: 0;
    margin: 0;
    background: url("img/body-bg1.png") top left repeat-y;
}

    #body #sidebar-left, #body #sidebar-right {
        width: 200px;
        float: left;
        clear: none;
        padding: 0 0 20px 0;
    }

        #body #sidebar-left > div, #body #sidebar-right > div {
            padding: 10px;
        }

        #body #sidebar-left #question-guy {
            padding: 0 !important;
        }

    #body #main {
        width: 740px;
        float: left;
        clear: none;
    }

        #body #main #main-content {
            padding: 12px 20px 40px 20px;
        }

        #body #main #search-top {
            text-align: center;
			padding: 10px;
        }
		#body #main #subscribe {
            text-align: center;
			padding: 20px;
        }

    #body .right-links ul li, #body .left-links ul li {
        display: block;
        margin: 20px 10px;
        list-style: none;
    }

        #body .right-links ul li a, #body .left-links ul li a {
            text-decoration: none;
            text-transform: uppercase;
            font-weight: bold;
        }

            #body .right-links ul li a:link, #body .right-links ul li a:visited {
                color: #626c6c;
            }

            #body .right-links ul li a:active, #body .right-links ul li a:hover {
                color: #889392;
            }

            #body .left-links ul li a:link, #body .left-links ul li a:visited {
                color: #fff;
            }

            #body .left-links ul li a:active, #body .left-links ul li a:hover {
                color: #e3e3e3;
            }

#main-content ul {
    list-style: disc;
}

#main-content ol {
    list-style: decimal;
}

#main-content hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 30px;
    height: 0;
}
/* #endregion */

/* #region mobile */

#body #mobile-header, #mobile-flyout, #mobile-nav, #mobile-pic,
#mobile-social, #mobile-menu, #mobile-subscribe {
    display: none;
    visibility: hidden;
}

/* #endregion */

/* #region homepage */

#hero {
}

    #hero #hero-content {
        height: 492px;
    }

    #hero #hero-img {
        float: left;
        width: 689px;
    }

    #hero #hero-info {
        font-size: 24px;
		font-weight: bold;
		padding: 50px 5px 5px 20px;
        width: 451px;
        float: left;
    }

        #hero #hero-info > div {
            margin-bottom: 20px;
        }
		
		

    #hero #hero-sp {
        height: 40px;
        background-color: #3293b3;
    }

#home-nav {
    height: 253px;
	align: center;
    padding: 13px 0px 20px 40px;
    background: url("img/home-nav-bg.jpg") top left no-repeat;
}

    #home-nav #home-video {
        width: 400px;
		height: 210px;
		padding: 0px 40px 5px 0px;
		float: left;
    }

    #home-nav #home-nav-menu {
        width: 700px;
        float: left;
		padding: 0px 20px 5px 20px;
    }

        #home-nav #home-nav-menu ul li {
            padding: 25px 40px 20px 0;
            display: inline-block;
        }

            #home-nav #home-nav-menu ul li a:link,
            #home-nav #home-nav-menu ul li a:visited,
            #home-nav #home-nav-menu ul li a:hover,
            #home-nav #home-nav-menu ul li a:active {
                color: #137e17;
                font-weight: bold;
                text-decoration: none;
            }

#home-nav-sp {
    height: 40px;
    background-color: #b8c489;
}

/* #endregion */

/* #region footer */

footer {
    height: 580px;
    background: url("img/footer-bg2.jpg") top left repeat-y;
}

    footer #footer-left {
        width: 200px;
        float: left;
        clear: none;
        padding: 20px;
    }

    footer #footer-content {
        width: 740px;
        padding: 20px;
        float: left;
        clear: none;
    }

    footer #footer-right {
        width: 200px;
        float: left;
        clear: none;
        padding: 20px;
    }

    footer #footer-info {
        padding: 50px 20px 20px 20px;
        clear: both;
    }
    
/* #endregion */

/* #region media queries */

@media only screen and (min-width: 1140px) {

    .desktop-hide {
    	display: none;
    	visibility: hidden;
    }
}

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

	

    /* all mobile */
    
    #header {
        height: auto;
    }

        #header #header-content {
            height: auto;
        }

        #header #logo {
        width: 100%;
        height: auto;
        float: none;
        clear: none;
        background-color: #e3e3e3;
    }

        #header #logo-sp {
            display: none;
            visibility: hidden;
        }

        #header #menu {
            display: none;
            visibility: hidden;
        }

    #hero {
        display: none;
        visibility: hidden;
    }

    #home-nav-menu {
        display: none;
        visibility: hidden;
    }

    #body {
        background: none;
    }

        #body #sidebar-left {
            display: none;
            visibility: hidden;
            width: auto;
        }

        #body #main {
            width: auto;
            float: none;
            clear: both;
        }

        #body #mobile-header {
            display: block;
            visibility: visible;
            background-color: #ffffff;
        }

            #body #mobile-header #mobile-question {
                float: left;
            }

            #body #mobile-header #mobile-search {
                float: left;
                padding: 15px 0px 30px 20px;
				width: 368;
				height: 175px;
				text-align: center;
				background-color: #1687cd;
            }

            #body #mobile-header #mobile-head-sp {
                height: 40px;
                background-color: #1787ce;
            }

        #body #sidebar-right {
            display: none;
            visibility: hidden;
            width: auto;
        }

    #search-top {
        display: none;
        visibility: hidden;
    }
    
    #mobile-menu {
        display: block;
        visibility: visible;
    }

        #mobile-menu div {
            padding: 20px;
        }

        #mobile-menu #mobile-menu-main {
            background-color: #1787ce;
        }

        #mobile-menu #mobile-menu-sub {
            background-color: #7cb332;
        }

        #mobile-menu ul li {
            width: 48%;
            margin: 15px 0 15px 0;
            display: inline-block;
            text-align: center;
        }

    #mobile-pic {
        display: block;
        visibility: visible;
    }

        #mobile-pic div {
            width: 50%;
            float: left;
        }

    #mobile-nav {
        display: block;
        visibility: visible;
        padding: 12px;
        background-color: #7cb332;
    }
	
	#mobile-subscribe {
        display: block;
        visibility: visible;
        padding: 30px;
        text-align: center;
        background-color: #e3e3e3;
    }

    #mobile-social {
        display: block;
        visibility: visible;
        padding: 12px;
        text-align: center;
        line-height: 60px;
        background-color: #3293b3;
    }

        #mobile-social img {
            vertical-align: middle;
        }

    footer {
        height: auto;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1139px) {
    
	/* mobile landscape / tablet */
	
	.desktop-hide {
    	display: none;
    	visibility: hidden;
    }
    
    .tablet-hide {
		display: none;
		visibility: hidden;
	}
	
    #container {
        width: 768px;
        height: auto;
    }

    #body #mobile-header #mobile-head-content {
        height: 200px;
    }

    #home-nav {
        height: auto;
    }

    #home-nav #home-video {
        width: 100%;
        float: none;
        clear: both;
        text-align: center;
    }
	
	
	#mobile-nav ul li {
        width: 30%;
        margin: 12px 10px 30px 10px;
        display: inline-block;
        text-align: center;
    }

    #mobile-pic {
        height: 218px;
    }

    footer #footer-content {
        width: 65%;
    }

    footer #footer-right {
        width: auto;
        float: none;
        clear: both;
    }
}

@media only screen and (max-width: 767px) {
    
	
	.mobile-hide {
    	display: none;
    	visibility: hidden;
    }
	/* smart phone */
	
	.mobile-hide {
        display: none;
        visibility: hidden;
    }

		#mobile-flyout {
		display: inline-block;
		visibility: visible;
		width: 100%;
		height: auto;
		background-color: #7cb332;
	}
	
		#mobile-flyout > div:first-child {
            height: 30px;
			margin: 6px 4px;
		}
		
			#mobile-flyout > div:first-child a {
				display: block;
			}
		
		#mobile-flyout > div:nth-child(2) {
			display: none;
		}
	
		#mobile-flyout ul li {
			display: block;
			padding: 12px 10px;
            border-top: 1px #fff dotted;
		}

    #container {
        width: 320px;
        height: auto;
    }

    #leader {
        display: none;
        visibility: hidden;
    }

    #body #mobile-header #mobile-head-content {
        height: 148px;
    }

    #body #mobile-header #mobile-search {
        display: none;
        visibility: hidden;
    }

    #home-nav, #home-nav-sp {
        display: none;
        visibility: hidden;
    }

    #mobile-pic {
        height: auto;
    }

        #mobile-pic div {
            width: 100%;
            height: 181px;
            float: none;
        }

    #mobile-nav ul li {
        margin: 25px 0;
        display: block;
        text-align: center;
    }

    #mobile-social .icon {
        width: 50px;
    }

    .gqNetwork {
        display: block;
    }
    
}

/* #endregion */