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

@import url('content.css');
@import url('menus.css');

/* General Page Styles */
html { height: 100%; }
body { margin: 0; padding: 0; height: 100%; background: #fff 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: 160px; border-bottom: 1px solid #000; box-sizing: border-box; }
header #design-logo { position: absolute; top: 24px; left: 0; z-index: 10; }
header #design-logo img { width: 100%; }
header #design-title { position: absolute; top: 80px; left: 180px; font-family: 'Archivo Black', sans-serif; font-weight: 400; letter-spacing: 0; }
header #design-title h2 { margin: 0; padding: 2px 0; font-size: 14px; color: #a1002b; line-height: 10px; text-transform: uppercase; }
header #design-title h3 { margin: 0; padding: 4px 0; font-size: 27px; color: #002c6a; line-height: 25px; text-transform: uppercase; }

@media screen and (max-width: 800px) {
  
  header #design-title { top: 65px; max-width: 400px; }
  
}

@media screen and (max-width: 480px) {
  
  header { height: 140px; }
  header #design-logo { top: 10px; width: 130px; }
  header #design-title { top: 40px; left: 135px; }
  header #design-title h2 { font-size: 10px; line-height: 6px; }
  header #design-title h3 { font-size: 20px; line-height: 18px; }

}

nav {
  margin: 0;
  padding-left: 160px;
  width: 100%;
  height: 42px;
  background: #154281;
  background: -moz-linear-gradient(top,  #154281 0%, #012d6c 50%, #002458 51%, #002a66 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#154281), color-stop(50%,#012d6c), color-stop(51%,#002458), color-stop(100%,#002a66));
  background: -webkit-linear-gradient(top,  #154281 0%,#012d6c 50%,#002458 51%,#002a66 100%);
  background: -o-linear-gradient(top,  #154281 0%,#012d6c 50%,#002458 51%,#002a66 100%);
  background: -ms-linear-gradient(top,  #154281 0%,#012d6c 50%,#002458 51%,#002a66 100%);
  background: linear-gradient(to bottom,  #154281 0%,#012d6c 50%,#002458 51%,#002a66 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#154281', endColorstr='#002a66',GradientType=0 );
  border-top: 1px solid #6880a2;
  border-bottom: 1px solid #6880a2;
  box-sizing: border-box;
}
nav #design-container-main-nav { width: 100%; max-width: 885px; 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: 0; width: 100%; background: #fff; border-top: 1px solid #000; box-sizing: border-box; }
main #design-container-main { padding: 10px; width: 100%; box-sizing: border-box; }
main #design-bottom-content { padding: 15px 10px 10px 10px; background: url('../images/shadow.png') no-repeat center top; box-sizing: border-box; }

main .design-span_3_of_12 { padding: 1%; height: 100%; background: #e4e4e4 url('../images/rightBg.png') repeat-y left top; box-sizing: border-box; }

main #design-container-3 { text-align: center; }
main #design-container-4 { padding: 10px; height: 100%; border-left: 3px solid #cdcdcd; text-align: center; box-sizing: border-box; }

main #design-container-3 .dii-content.dii-content-image,
main #design-container-4 .dii-content.dii-content-image { display: inline-block; margin: 0 5px; padding: 0; }
main #design-container-3 .dii-content.dii-content-image .dii-content-image-main-photo,
main #design-container-4 .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-image: none; }
  main #design-container-main { padding: 0; }
  main .design-span_3_of_12 { padding: 0; width: 100%; }

}

/* Footer */
footer { width: 100%; margin: 0; padding: 10px 0; height: 80px; background: #002c6a; border-top: 4px solid #a1002b; 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: 230px; }

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

@media screen and (max-width: 480px) {
  
	footer { margin: 0; padding: 0; width: 100%; height: 150px; background-image: none; background: #002c6a; }
	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;
	box-sizing: border-box;
}

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

.design-clear { clear: both; }