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

/* General Page Styles */
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; background: #0d1b5c url('../images/bg.jpg') no-repeat center top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

#design-wrapper { margin: 0 auto; width: 100%; max-width: 1060px; }

/* Header */
header { position: relative; margin: 0; padding: 0; width: 100%; height: 168px; border-bottom: 2px solid #fff; box-sizing: border-box; }
header #design-logo { position: absolute; top: 50px; left: 0; z-index: 10; }
header #design-logo img { width: 100%; }
header #design-title { position: absolute; top: 84px; left: 170px; }
header #design-title img { width: 100%; }
header #design-social { position: absolute; top: 130px; right: 10px; }
header #design-social a { display: inline-block; }

@media screen and (max-width: 480px) {
  
  header { height: 110px; }
  header #design-logo { top: 10px; width: 100px; }
  header #design-title { top: 50px; left: 105px; }
  header #design-title img { width: 95%; }
  header #design-social { position: absolute; top: 15px; right: 10px; }
  header #design-social a img { width: 20px; }
  
}

nav {
  margin: 0;
  padding-left: 175px;
  width: 100%;
  height: 42px;
  background: #e2131f;
  background: -moz-linear-gradient(top,  #e2131f 0%, #c80b16 50%, #af0b15 51%, #be121c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2131f), color-stop(50%,#c80b16), color-stop(51%,#af0b15), color-stop(100%,#be121c));
  background: -webkit-linear-gradient(top,  #e2131f 0%,#c80b16 50%,#af0b15 51%,#be121c 100%);
  background: -o-linear-gradient(top,  #e2131f 0%,#c80b16 50%,#af0b15 51%,#be121c 100%);
  background: -ms-linear-gradient(top,  #e2131f 0%,#c80b16 50%,#af0b15 51%,#be121c 100%);
  background: linear-gradient(to bottom,  #e2131f 0%,#c80b16 50%,#af0b15 51%,#be121c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2131f', endColorstr='#be121c',GradientType=0 );
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}
nav #design-container-main-nav { width: 100%; height: 42px; box-sizing: border-box; }
nav #design-container-main-nav #ww-btn-main-nav { padding: 10px; height: 42px; background: none; border: 0 none; color: #fff; box-sizing: border-box; }

@media screen and (max-width: 480px) {
  
  nav { padding: 0; }
  
}

/* Main */
main { display: table; margin: 0; padding: 10px 0; width: 100%;; border-top: 2px solid #fff; box-sizing: border-box; }
main #design-container-main { margin-bottom: 10px; padding: 0; width: 100%; box-sizing: border-box; }
main #design-bottom-content { margin-top: 10px; padding: 15px; background: #fff; box-sizing: border-box; }

main #design-container-1 { margin-bottom: 10px; padding: 2px 0; background: #0d0d40; border-top: 3px solid #fff; border-bottom: 3px solid #fff; }
main #design-container-2,
main #design-container-3,
main #design-container-4 { margin: 0; padding: 0; background: #0d0d40; border-bottom: 2px solid #ff2500; box-sizing: border-box; }

main #design-bottom-content #design-container-5,
main #design-bottom-content #design-container-6 { padding: 0; height: 100%; box-sizing: border-box; }
main #design-bottom-content #design-container-5 .dii-content.dii-content-image,
main #design-bottom-content #design-container-6 .dii-content.dii-content-image { display: inline-block; margin: 0 2px; padding: 0; }
main #design-bottom-content #design-container-5 .dii-content.dii-content-image .dii-content-image-main-photo,
main #design-bottom-content #design-container-6 .dii-content.dii-content-image .dii-content-image-main-photo { margin: 0; padding: 0; border: 0 none; }

@media screen and (max-width: 640px) {
  
  main { padding: 5px; background: #fff; }

}

/* Footer */
footer {
  width: 100%;
  margin: 0;
  padding: 15px 0;
  height: 90px;
  background: #d80f1c;
  background: -moz-linear-gradient(top,  #d80f1c 0%, #b00c16 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d80f1c), color-stop(100%,#b00c16));
  background: -webkit-linear-gradient(top,  #d80f1c 0%,#b00c16 100%);
  background: -o-linear-gradient(top,  #d80f1c 0%,#b00c16 100%);
  background: -ms-linear-gradient(top,  #d80f1c 0%,#b00c16 100%);
  background: linear-gradient(to bottom,  #d80f1c 0%,#b00c16 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d80f1c', endColorstr='#b00c16',GradientType=0 );
  border-top: 3px solid #fff;
  box-sizing: border-box;
}
footer #design-footer-left { float: left; height: 60px; }
footer #design-footer-left div,
footer #design-footer-left div a { font-size: 10px; font-family: Verdana, Arial, sans-serif; font-weight: normal; line-height: 1.2em; color: #fff; text-decoration: none; }
footer #design-footer-right { float: right; height: 60px; width: 240px; }

footer #design-footer-left #design-copyright { margin: 15px 0 0 15px; font-weight: bold; }
footer #design-footer-left #design-copyrightDII { margin: 2px 0 0 15px; }

@media screen and (max-width: 480px) {
  
	footer { margin: 0; padding: 0; width: 100%; height: 150px; background-image: none; background: #d80f1c; }
	footer #design-footer-left { display: block; width: 100%; text-align: center; }
	footer #design-footer-right { display: block; width: 100%; text-align: center; }
  
}

/* Content Boxes */
.design-sectionHeader {
  margin: 0 0 5px 0;
	padding: 10px;
	width: 100%;
	height: 35px;
  background: #a1002b;
  background: -moz-linear-gradient(top,  #a1002b 0%, #790221 98%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1002b), color-stop(98%,#790221), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top,  #a1002b 0%,#790221 98%,#ffffff 100%);
  background: -o-linear-gradient(top,  #a1002b 0%,#790221 98%,#ffffff 100%);
  background: -ms-linear-gradient(top,  #a1002b 0%,#790221 98%,#ffffff 100%);
  background: linear-gradient(to bottom,  #a1002b 0%,#790221 98%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1002b', endColorstr='#ffffff',GradientType=0 );
  border-bottom: 2px solid #002c6a;
	font-family: 'Archivo Black', sans-serif;
	font-size: 16px; 
	font-weight: 400;
	color: #fff;
  letter-spacing: 0;
	line-height: 16px;
	text-transform: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
	box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  
  .design-sectionHeader  { font-size: 15px; }
  
}

.design-clear { clear: both; }