/* --------------------------------------------------------------------
    Copyright (c) Demosphere International Inc.
    No permission is granted for any purpose without prior
    written consent from Demosphere International Inc.
-----------------------------------------------------------------------*/

/* -------- Structure Overrides -------- */
body,
footer { background-color: #000; }

#design-wrapper { width: 100%; margin: 0; box-shadow: none; }

#design-translate { position: absolute; top: 10px; right: 85px; }
#design-translate .goog-te-gadget-simple { border: 0; background-color: transparent; padding: 0; }
#design-translate .goog-te-gadget-simple a::before { content: ''; display: block; width: 74px; height: 30px; background-image: url('https://waldorfsoccer.demosphere-secure.com/_files/flag.png'); background-repeat: no-repeat; cursor: pointer; }
#design-translate .goog-te-gadget-simple a span,
#design-translate .goog-te-gadget-simple img { display: none; }
#design-translate .goog-te-menu-value { margin: 0; }

header { margin: 0; background-image: url('../images/banner-bg.jpg'); }
header.design-nav-fixed { margin-bottom: 43px; }
#design-banner-wrapper { background: url('../images/banner.png') no-repeat top center; }
#design-banner { position: relative; width: 1200px; height: 155px !important; margin: 0 auto; }
#design-banner-logo { float: none; position: absolute; left: 15px; margin: 0; }
#design-banner-title { float: none; position: absolute; top: 53px; left: 258px; width: auto; height: auto; max-height: initial; max-width: initial; margin: initial; }
#design-banner-adidas { position: absolute; top: 50px; right: 20px; }
#design-social { position: absolute; top: 10px; right: 5px; }
#design-social a { display: inline-block; width: 28px; height: 28px; margin-right: 5px; }
#design-social a .on { display: none; }
#design-social a:hover .off { display: none; }
#design-social a:hover .on { display: inline-block; }
header nav { border-width: 0 0 3px 0; border-style: solid; border-color: #fa6610; background-color: #000; -webkit-box-shadow: 0px 10px 10px -10px rgba(0,0,0,1); -moz-box-shadow: 0px 10px 10px -10px rgba(0,0,0,1); box-shadow: 0px 10px 10px -10px rgba(0,0,0,1); }
div#design-container-main-nav { width: 1200px; margin: 0 auto; border: 0; background-color: transparent; padding-left: 150px; }
#design-container-main-nav .dii-content-nav-menu { background-color: transparent; }
#design-container-main-nav .dii-content-nav-menu ul li a { font-family: 'Oswald'; color: #fff; }
#design-container-main-nav .dii-content-nav-menu > ul > li > a { line-height: 43px; }
#design-container-main-nav .dii-content-nav-menu ul ul { background-color: #333; }
#design-container-main-nav #ww-btn-main-nav { border: 0; background: transparent; color: #fff; }
#design-wrapper nav.design-nav-fixed { width: 100%; }
nav.design-nav-fixed.admin { top: 0 !important; }

main { overflow: hidden; background: #2e2e2e url('../images/bg.png') repeat-x; }
main > div { position: relative; width: 1200px; margin: 0 auto; background-color: #fff; padding: 15px 0; }
main > div::before { content: ''; position: absolute; top: 30px; left: -187px; width: 187px; height: 581px; background: url('../images/bg-left.png') no-repeat top center; }
main > div::after { content: ''; position: absolute; top: 10px; left: 100%; width: 200px; height: 569px; background: url('../images/bg-right.png') no-repeat top center; }

.dii-content.dii-content-header { margin-bottom: 8px; }
.dii-content.dii-content-header h2 { display: block; border-radius: 0 3px 3px 0; background-color: #2e2e2e; padding: 8px 12px; font-size: 18px; color: #fff !important; }
.dii-content-title-photo { border: 0; }

#design-container-main { margin-bottom: 15px; }
#design-content #design-container-3 {
	-webkit-box-shadow: inset 0px 17px 10px -15px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0px 17px 10px -15px rgba(0,0,0,0.1);
	box-shadow: inset 0px 17px 10px -15px rgba(0,0,0,0.1);
	padding-top: 12px;
}
#design-container-3 .dii-content.dii-content-image { float: left; margin-right: 15px; }

#design-footer { border-width: 5px 0 0; }

/* -------- Media Queries -------- */

@media only screen and (max-width: 1280px) {
	html body { padding: 0; }
	main > div::before,
	main > div::after { background: none; }
}
@media only screen and (max-width: 1200px) {
	#design-banner,
	main > div { width: 100%; }
}
@media only screen and (max-width: 900px) {
	#design-banner-logo { top: 15px; max-width: 18%; max-height: 135px; }
	#design-banner-title { left: 22%; width: 60%; }
	#design-social a:last-child { width: auto; }
	#design-banner-adidas { position: relative; top: initial; right: initial; width: auto; height: 28px; }
	header nav #design-container-main-nav { padding: 0; }
	main { margin: 0; }
        #design-translate { right: 95px; }
	#design-footer .copyright,
	#design-footer .copyright * { line-height: 16px; font-size: 12px; }
}
@media only screen and (max-width: 600px) {
	#design-banner { height: 130px !important; }
	#design-banner-wrapper { padding: 0; }
	#design-banner-logo { left: 5px; width: 105px; max-width: initial; max-height: initial; }
	#design-banner-title { left: 115px; }
	#design-container-main-nav { padding: 0; }
	#design-container-main-nav #ww-btn-main-nav { border: 0; }
}

/* -------- Colors -------- */

::selection { background-color: #222; color: #fff; }
::-moz-selection { background-color: #222; color: #fff; }

/* Main Accent Color */
#design-navbar-top-links a:hover,
#design-navbar-top-links a:active,
#design-navbar-top-links a:focus,
#design-container-main-nav .dii-content-nav-menu > ul > li:hover > a,
.dii-content-linkview:hover a,
.dii-content-nav-menu.vertical > ul > li:hover > a,
#design-wrapper .dii-content-rotator .dii-rotator-nav i:hover:not(.fa-circle) { color: #fa6610; }
#design-navbar-top-social a:hover,
.dii-content-nav-menu ul li .dii-sub-menu-link::before,
.dii-content-header:after,
#design-wrapper .dii-content-rotator .group-nav:hover,
#design-wrapper .dii-content-rotator article h2 a:hover,
#design-wrapper .dii-content-rotator article div a:hover { background-color: #fa6610; }
.dii-content-header,
#design-footer { border-color: #fa6610; }

/* Grays */
*::-moz-selection { color: #fff; } /* must remain single line for cross-browser support */
*::selection { color: #fff; } /* must remain single line for cross-browser support */
#design-navbar-top-social a:hover,
.dii-content-nav-menu ul ul li a:hover,
.dii-content-rotator .group-nav:hover .fa,
#design-wrapper .dii-content-rotator h2,
#design-wrapper .dii-content-rotator h2 a,
#design-wrapper .dii-content-rotator h3,
#design-wrapper .dii-content-rotator article,
#design-wrapper .dii-content-rotator article a,
.dii-content-article h2 a:hover { color: #fff; }
#design-footer a:hover { color: #fafafa; }
#design-navbar-top,
.dii-content-linkview:hover,
.dii-content-nav-menu.vertical > ul > li:hover { background-color: rgba(0, 0, 0, 0.04); }
#design-footer-bottom { background-color: rgba(0, 0, 0, 0.1); }
#design-footer-bottom { border-color: rgba(0, 0, 0, 0.18); }
.dii-content-linkview,
.dii-content-nav-menu.vertical > ul > li { border-color: #eaeaea; }
#design-navbar-top-links a::after { color: #dcdcdc; }
#design-container-main-nav .dii-content-nav-menu > ul > li > a::after { color: #c0c0c0; }
#design-footer .dii-content-header h2 { color: #bebebe; }
.dii-content-rotator .group-nav .fa,
#design-footer .dii-content:not(.dii-content-publish-pending-true),
#design-footer .dii-content:not(.dii-content-publish-time-frame-true),
#design-footer .dii-content:not(.dii-content-publish-pending-true) a,
#design-footer .dii-content:not(.dii-content-publish-time-frame-true) a,
#design-footer .copyright,
#design-footer .copyright a { color: #9a9a9a; }
hr { border-top: 1px solid #7a7a7a; }
#design-navbar-top a { color: #6e6e6e; }
.dii-content.dii-content-article h3.dii-content-subtitle { color: #555; }
body,
.dii-content-linkview a,
.dii-content-nav-menu ul li a,
.dii-content-rotator ul li a { color: #505050; }
#design-footer .dii-content-linkview { border-color: #333; }
.dii-content h1,
.dii-content:not(.dii-content-publish-pending-true) h2,
.dii-content:not(.dii-content-publish-time-frame-true) h2,
.dii-content:not(.dii-content-publish-pending-true) h2 a,
.dii-content:not(.dii-content-publish-time-frame-true) h2 a,
.dii-content:not(.dii-content-publish-pending-true) h3,
.dii-content:not(.dii-content-publish-time-frame-true) h3,
.dii-content h4,
.dii-content h5,
.dii-content h6 { color: #303030; }
*::-moz-selection,
*::selection { background-color: #222; }