/* ---------------------- 
Stylesheet Guide
-------------------------

FONTS
GENERAL STYLES
RIBBONS
MAIN SECTIONS
CONTACT FORM
FORM ELEMENTS
 Inputs
 Buttons
BAR CHART
OTHER DOMAINS
FOOTER
RIGHT PANEL

*/

/* ================= FONTS  ================== */

@font-face {
 font-family: Oswald Bold;
 src: url('../fonts/Oswald/oswald-bold-webfont.eot');
    src: url('../fonts/Oswald/oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Oswald/oswald-bold-webfont.woff') format('woff'),
         url('../fonts/Oswald/oswald-bold-webfont.ttf') format('truetype'),
         url('../fonts/Oswald/oswald-bold-webfont.svg#oswald_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
 font-family: Oswald Light;
 src: url('../fonts/Oswald/oswald-light-webfont.eot');
    src: url('../fonts/Oswald/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Oswald/oswald-light-webfont.woff') format('woff'),
         url('../fonts/Oswald/oswald-light-webfont.ttf') format('truetype'),
         url('../fonts/Oswald/oswald-light-webfont.svg#oswald_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* ============ GENERAL STYLES   ============ */
html{
	-webkit-text-size-adjust:none;
}

body{
	margin:0px;
	padding:0px;
	font-family: 'Helvetica';
	background:url(../images/bg.jpg);
}


.container{
	width:960px;
	margin:0px auto;
}

.flex-wrapper{
	width:940px;
	margin:0px auto;
}

hr{
	width:940px;
	height:1px;
	border:0px;
	background-color:#f7f7f7;
}


h1{
	font-family: 'Oswald Bold';
	font-size:50px;
	line-height: 55px;
	font-weight: normal;
	margin:0px;
	text-transform: uppercase;
	color:#222;
}

h2{
	font-family: 'Oswald Light';
	font-size:35px;
	line-height: 40px;
	font-weight: normal;
	margin:0px;
	text-transform: uppercase;
	color:#222;
	padding:20px 0px;
	text-align: center;
}

h3{
	font-family: 'Oswald Light';
	font-size:30px;
	line-height: 35px;
	font-weight: normal;
	margin:0px;
	text-transform: uppercase;
	color:#222;
	padding:20px 0px;
	text-align: center;
}

h3 span{
	font-size:22px;
}

p{
	font-family: 'Helvetica';
	font-size:14px;
	line-height: 20px;
	color:#444;
}


/* ============ RIBBONS ============ */

.ribbon {
	font-size: 30px !important;
	width: 967px;
	position: relative;
	background: #006699;
	color: #fff;
	text-align: center;
	padding: 15px 0px;
	margin: 50px 0px 0px 0px;
	text-transform: uppercase;
	font-family: 'Oswald Light';
}

.ribbon:before, .ribbon:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -1em;
	border: 1.5em solid #004466;
	z-index: -1;
}

.ribbon:before {
	left: -2em;
	border-right-width: 1.5em;
	border-left-color: transparent;
}

.ribbon:after {
	right: -2em;
	border-left-width: 1.5em;
	border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: #00334d transparent transparent transparent;
	bottom: -1em;
}

.ribbon .ribbon-content:before {
	left: 0;
	border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
	right: 0;
	border-width: 1em 1em 0 0;
}


/* Ribbon #2 */

.ribbon2 {
	font-size: 30px !important;
	width: 967px;
	position: relative;
	background: #0099cc;
	color: #fff;
	text-align: center;
	padding: 15px 0px;
	margin: 20px 0px 0px 0px;
	text-transform: uppercase;
	font-family: 'Oswald Light';
}

.ribbon2:before, .ribbon2:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -1em;
	border: 1.5em solid #004466;
	z-index: -1;
}

.ribbon2:before {
	left: -2em;
	border-right-width: 1.5em;
	border-left-color: transparent;
}

.ribbon2:after {
	right: -2em;
	border-left-width: 1.5em;
	border-right-color: transparent;
}

.ribbon2 .ribbon2-content:before, .ribbon2 .ribbon2-content:after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: #00334d transparent transparent transparent;
	bottom: -1em;
}

.ribbon2 .ribbon2-content:before {
	left: 0;
	border-width: 1em 0 0 1em;
}

.ribbon2 .ribbon2-content:after {
	right: 0;
	border-width: 1em 1em 0 0;
}


/* ============ MAIN SECTIONS ============ */

.ribbon-fullbox{
	width:930px;
	margin:20px 0px 0px 0px;
	padding:0px 20px;
	display: inline-block;
}

.ribbon-fullbox-left{
	width:575px;
	float: left;
}

.ribbon-fullbox-right{
	width:355px;
	float:right;
}


/* ============ CONTACT FORM ============ */

.contact-form{
	width:353px;
	background-color: #eee;
	margin:20px 0px 20px 0px;
	padding:20px;
	border:1px solid #ddd;
}

.form label{
	font-family: 'Helvetica';
	font-size:14px;
	color:#444;
	display:block;
}

.form input[type="text"], .form input[type="email"]{
	font-family: 'Helvetica';
	font-size:14px;
	color:#444;
	padding:10px;
	width:330px;
	border:1px solid #ddd;
	background-color: #fff;
	margin:8px 0px 15px 0px;
}

.form textarea{
	font-family: 'Helvetica';
	font-size:14px;
	color:#444;
	padding:10px;
	width:330px;
	height:80px;
	border:1px solid #ddd;
	background-color: #fff;
	margin:8px 0px 15px 0px;
	resize:none;
}

.form input[type="submit"]{
	font-family: 'Oswald Light';
	font-size:20px;
	color:#fff;
	padding:10px 30px;
	border:0px;
	background-color: #006699;
	cursor:pointer;
	text-transform: uppercase;
}

.form input[type="submit"]:hover{
	background-color: #0099cc;
}


/* ERROR & SUCCESS */

#error{
	display:none;
	background-color:#ff6f6f;
	padding:8px;
	margin:0px 0px 10px 0px;
}

#error p{
	margin:0px;
	color:#fff;
}

#success{
	display:none;
	background-color:#46d46d;
	padding:8px;
	margin:0px 0px 10px 0px;
}

#success p{
	margin:0px;
	color:#fff;
}


/* ============ FORM ELEMENTS ============ */
table{
	width:600px;
	margin:0px auto;
}

.first{
	width:50px;
	text-align: center;
}

.second{
	font-family: 'Helvetica';
	font-size:14px;
	color:#222;
	padding:0px 0px 0px 10px;
}


/* ============ BAR CHART ============ */

.graph{
	width:940px;
	margin:0px auto;
	text-align: center;
	padding:0px 0px 20px 0px;
}


/* ============ OTHER DOMAINS ============ */

.ca-container{
	position:relative;
	width:100%;
	height:250px;
}

.ca-wrapper{
	width:100%;
	height:100%;
	position:relative;
}

.ca-item{
	position:relative;
	float:left;
	width:200px;
	height:250px;
	text-align:center;
}

.ca-item-main{
	position:relative;
	margin:0px auto;
	width:190px;
	height:220px;
	background:#fff;
	overflow:hidden;
	border:1px solid #ddd;
}

.ca-icon{
	width:190px;
	height:120px;
	position:relative;
	margin:0 auto;
	background:transparent url(../images/domains.jpg) no-repeat center center;
}

.ca-item h3{
	font-family: 'Oswald Light';
	font-size:20px;
	color:#222;
	margin:0px;
	padding:10px 0px;
}

.ca-item h4{
	font-family: 'Oswald Light';
	font-size:18px;
	color:#222;
	margin:0px;
	padding:0px 0px 10px 0px;
}

.ca-item h4 span{
	color:#006699;
}


/* ============ FOOTER ============ */

#footer-container{
	margin:0px auto;
	width:960px;
}

.footer{
	width:100%;
	height:auto;
	border-top:1px solid #f7f7f7;
	margin-top:20px;
	padding:20px 0px;
	text-align:center;
}

.copyright{
	font-family: 'Helvetica';
	font-size:12px;
	color:#888;
}


/* ============ RIGHT PANEL ============ */

.trigger{
	font-family: 'Helvetica';
	font-size:14px;
	color:#006699;
	text-decoration:none;
}

.trigger:hover{
	color:#0099cc;
}

.panel{
	margin:20px 0px 0px 0px;
}


/* =========================================================
   Responsive additions (non-destructive overrides)
   ========================================================= */

/* Foundation */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
table { width: 100%; max-width: 100%; }

/* Make the fixed-width layout fluid */
.container{
  width: 100%;
  max-width: 960px;   /* preserves original desktop look */
  margin: 0 auto;
  padding: 0 15px;    /* adds breathing room on mobile */
}

/* Prevent fixed-width elements from causing horizontal scroll */
hr{ width: 100%; max-width: 940px; }
.ribbon,
.ribbon2,
.ribbon-fullbox,
.ribbon-fullbox-left,
.ribbon-fullbox-right,
#footer-container{
  max-width: 100%;
}

.ribbon-fullbox{
  width: 100%;
  max-width: 930px;
  margin-left: auto;
  margin-right: auto;
}

#footer-container{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Make big embedded/banner images scale down (e.g., 728x90) */
a img[width="728"]{
  max-width: 100%;
  height: auto;
}

/* Stack the two-column content area on smaller screens */
@media (max-width: 900px){
  .ribbon-fullbox-left,
  .ribbon-fullbox-right{
    float: none;
    width: 100%;
  }

  .contact-form,
  .graph{
    width: 100%;
    max-width: 100%;
  }

  input[type="text"],
  input[type="email"],
  textarea{
    width: 100%;
  }
}

/* Tighten typography and spacing on small phones */
@media (max-width: 480px){
  h2{ font-size: 28px; line-height: 32px; }
  h3{ font-size: 24px; line-height: 28px; }

  .ribbon{ font-size: 26px !important; padding: 12px; }
  .ribbon2{ font-size: 22px !important; padding: 10px; }

  .copyright{ line-height: 1.4; padding: 10px 0; }
}

/* =========================================================
   RESPONSIVE PATCH (desktop stays EXACTLY the same)
   Paste this at the VERY BOTTOM of style.css
   ========================================================= */

/* Prevent accidental overflow from fixed-width children */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Tablet + below */
@media (max-width: 980px) {

  /* Container becomes fluid ONLY on smaller screens */
  .container{
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
  }

  /* Flex wrapper (slider area) */
  .flex-wrapper{
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
  }

  /* HR should not force horizontal scroll */
  hr{
    width: 100% !important;
    max-width: 940px;
  }

  /* Ribbons: keep style, just don’t exceed screen */
  .ribbon,
  .ribbon2{
    width: 100% !important;
    max-width: 967px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Main two-column area becomes fluid */
  .ribbon-fullbox{
    width: 100% !important;
    padding: 0 !important;       /* remove fixed 20px that can squeeze */
    display: block !important;
  }

  /* Stack columns */
  .ribbon-fullbox-left,
  .ribbon-fullbox-right{
    float: none !important;
    width: 100% !important;
  }

  /* Contact form should fill width nicely */
  .contact-form{
    width: 100% !important;
    max-width: 520px;            /* keeps it from being obnoxiously wide */
    margin: 20px auto !important;
  }

  .form input[type="text"],
  .form input[type="email"],
  .form textarea{
    width: 100% !important;
  }

  /* Table should not be fixed at 600px */
  table{
    width: 100% !important;
    max-width: 600px;
  }

  /* Footer container */
  #footer-container{
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Phones */
@media (max-width: 600px){

  /* Ribbon triangles look weird when full-bleed. So soften on phones. */
  .ribbon:before, .ribbon:after,
  .ribbon2:before, .ribbon2:after{
    display: none !important;
  }

  .ribbon, .ribbon2{
    border-radius: 6px;
  }

  h2{ font-size: 28px; line-height: 32px; }
  h3{ font-size: 24px; line-height: 28px; }

  /* Make icon+text rows breathe */
  .second{ padding-le