styles-index.css

@charset "UTF-8";
/* CSS Document */
body {
	background: url('images/textures/debut.png'), #f59e1d;
	margin-bottom:30px;
}


/*Google Search Edit*/
.gsc-control-cse {
	background-color:transparent!important;
	border-color:transparent!important;
}
.gsc-search-button {
	background-color:transparent!important;
}
.cse input.gsc-input, input.gsc-input {background-image:none !important;}


/* Styling of main content area container */

.container-content-area {
	margin-top:-10px;
	position:relative;
	z-index:1;
	background-color:#FFF;
	box-shadow: 10px 10px 23px -7px #757575, -10px 10px 23px -7px #757575;
	background-color:white;
}


.container-content-area { /* IE 8 and below specific */
	background:
	url('images/content-border-corner-top-left.png')left top no-repeat,
	url('images/content-border-corner-bottom-left.png')left bottom no-repeat,
	url('images/content-border-line.png')left top repeat-y,
	url('images/content-border-corner-top-right.png')right top no-repeat,
	url('images/content-border-corner-bottom-right.png')right bottom no-repeat,
	url('images/content-border-line.png')right top repeat-y\9; /* IE 8 and below */
}

.rollover {
  box-shadow: 0px 0px 12px #A3A7AB;
  display:inline-block;
  position:relative; 
  margin: 0 0 2% 6%;
  margin-top:30px;
}
.rollover span {    
  visibility: visible;
  position: absolute;   
  left:0;
  right:0;
  text-align:center;
  color:#fff;
  padding:7px 0;
  background:#999;
}
.rollover:hover span, 
.rollover:active span, 
.rollover:focus span {visibility: visible;}
.rollover:hover img {
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -o-filter: blur(2px);
   -ms-filter: blur(2px);
}
.span1{bottom:75px;}
.span2{bottom:35px;}
.span1:hover, .span2:hover {opacity:1;}


.span1 {
    text-decoration:none;
    text-align:center;
    padding:9px 17px;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius: 0px;
    font-family:"Futura", Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:18px;
    color:#FFF;
    background:#6f6f6f;
    opacity:0.94;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.span2 {
    text-decoration:none;
    text-align:center;
    padding:9px 17px;
    -webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius: 0px;
    font-family:"Futura", Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:18px;
    color:#FFF;
    background:#6f6f6f;
    opacity:0.94;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}


#navbar-home:hover {
	margin-top:-5px;
}
#navbar-clothing:hover {
	margin-top:-5px;
}
#navbar-teamkit:hover {
	margin-top:-5px;
}
#navbar-about:hover {
	margin-top:-5px;
}

/* clothing page
--------------------------------------------------------------------------------*/
#content-text-header {
	margin-left:50px;
	font-family:Futura, Arial, Helvetica, sans-serif;
	color:#6f6f6f;
	width:73%;
}

/* clothing page
--------------------------------------------------------------------------------*/



.container-content {
	margin-top:20px;
}
.container-sidebar {
	max-width:900px;
}

#sidebar-all {
	/*position:fixed;
	right:5.3%;*/
	margin-top:0px;
	margin-right:-5px;
	padding-top:15px;
	/*padding-bottom:20%;*/
	padding-bottom:30%;
	padding-right:9px;
	box-shadow: -1px 9px 13px #A3A7AB;
	
	border-radius:0px;
	border-color:#80d4df;
	border-width:thick;
	border-left-style:none;
	border-top-style:none;
	border-bottom-style:none;
	
	float:right; /*Justifies div to the right*/
}

#content-sidebar-loop {
	margin-left:14px;
	margin-bottom:10px;
}

/* Social Links - content-header-text images
--------------------------------------------------------------------------------*/
#content-social-text {
	margin-top:35px;
	/*margin-right:20px;*/
	width:55px;
	/*float:right; /*Justifies div to the right*/
}
#content-social-text p{
	height:36.5px; /*Height between icons*/
}

/* Social Links - content-header-text images
--------------------------------------------------------------------------------*/

/* Social Links - content-header
--------------------------------------------------------------------------------*/
.content-header
{
	width: 120px;
	float:right;
	margin-top: -27px; /*Change margin top*/
	margin-right: 30px;
	margin-bottom: 0px; /*Change margin bottom*/
	margin-left: auto;
}

.content-header ul
{
    padding: 0; /*Change left-right alignment*/
    list-style: none;
    font-size: 8px; /*Change left-right alignment*/
}
.content-header li
{
    width: 40px; /*Change spacing between icons*/
    text-align: center;
	float:left; /*This horizantally stacks the list*/
}
.content-header li span
{
    display: block;
}
.content-header a
{
    display: block;
    color: #ffffff;
    text-decoration: none;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
.content-header ul:hover a
{
    color: rgba(255, 255, 255, 0.6);
}
.content-header ul:hover a:hover
{
    color: #ffffff;
}
.content-header li:nth-child(1) i
{
    background: rgb(59, 89, 152);
    box-shadow: 0 0 0 0 rgba(59, 89, 152,0.6);
}
.content-header li:nth-child(2) i
{
    background: rgb(0, 172, 238);
    box-shadow: 0 0 0 0 rgba(0, 172, 238, 0.6);
}
.content-header li:nth-child(3) i
{
    background: rgb(210, 64, 46);
    box-shadow: 0 0 0 0 rgba(210, 64, 46,0.6);
}
.content-header i
{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 6px; /*Change circle of icon size*/
    border-radius: 50%; /*Change from square (0%) to circle (100%)*/
    font-size: 20px; /*Change icon size (both)*/
    transition: box-shadow .4s ease-in-out;
    -moz-transition: box-shadow .4s ease-in-out;
    -webkit-transition: box-shadow .4s ease-in-out;
    -o-transition: box-shadow .4s ease-in-out;
}
.content-header a:hover i, .content-header a:active i
{
    box-shadow: 0 0 0 25px transparent;
}
/* ICOMOON Starts Here */

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

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-mail, .icon-facebook, .icon-twitter {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icon-mail:before {
	content: "\e000";
}
.icon-facebook:before {
	content: "\e001";
}
.icon-twitter:before {
	content: "\e002";
}



/* Social Links - content-header
--------------------------------------------------------------------------------*/



/* Social Links - content-social
--------------------------------------------------------------------------------*/
.content-social
{
	width: 100%;
	margin-top: -20px; /*Change margin top*/
	margin-right: auto;
	margin-bottom: 10px; /*Change margin bottom*/
	margin-left: auto;
}

.content-social ul
{
	padding-left: 10px; /*Change left-right alignment*/
	margin-left:10%;
    list-style: none;
    font-size: 15px; /*Change spacing between icons*/
}
.content-social li
{
    width: 60px; /*Change left-right alignment*/
	height:50px; /*Change spacing between icons*/
    text-align: center;
	/*float:left; This horizantally stacks the list*/
}
.content-social li span
{
    display: block;
}
.content-social a
{
    display:block;
    color: #ffffff;
    text-decoration: none;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
.content-social ul:hover a
{
    color: rgba(255, 255, 255, 0.6);
}
.content-social ul:hover a:hover
{
    color: #ffffff;
}
.content-social li:nth-child(1) i
{
    background: rgb(210, 64, 46);
    box-shadow: 0 0 0 0 rgba(210, 64, 46,0.6);
}
.content-social li:nth-child(2) i
{
    background: rgb(59, 89, 152);
    box-shadow: 0 0 0 0 rgba(59, 89, 152,0.6);
}
.content-social li:nth-child(3) i
{
    background: rgb(0, 172, 238);
    box-shadow: 0 0 0 0 rgba(0, 172, 238, 0.6);
}
.content-social i
{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 8px; /*Change icon size*/
    border-radius: 50%; /*Change from square (0%) to circle (100%)*/
    font-size: 25px; /*Change icon size*/
    transition: box-shadow .4s ease-in-out;
    -moz-transition: box-shadow .4s ease-in-out;
    -webkit-transition: box-shadow .4s ease-in-out;
    -o-transition: box-shadow .4s ease-in-out;
}
.content-social a:hover i, .content-social a:active i
{
    box-shadow: 0 0 0 25px transparent;
}
/* ICOMOON Starts Here */

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

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-mail, .icon-facebook, .icon-twitter {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icon-mail:before {
	content: "\e000";
}
.icon-facebook:before {
	content: "\e001";
}
.icon-twitter:before {
	content: "\e002";
}
/* Social Links - content-social
--------------------------------------------------------------------------------*/

#footer {
	overflow:auto;
	margin-left:24px;
}


/* Device specific styling */

/* Mobile Layout: 0px to 480px. SPECIFIC TO MOBILE */
@media only screen and (max-width: 529px) {
.container-flexslider {
	display:none;
}
#header-search {
	width:250px;
	margin-top:-10%;
	margin-top:-120px;
	float:right;
}
.navbar {
	margin-top:7px; /*Change height of navbar & main content*/
	margin-bottom:-1px;
	float:right;
	margin-left:5%;
	margin-right:7%;
	vertical-align:middle;
}
.rollover {
	margin-left:15%;
}
.content-icons {
	margin-left:17%;
}
#content-about {
	overflow:auto;
	margin-left:24px;
	width:89%;
}
#sidebar-all {
	display:none;
}
#twitter-feed {
	display:none;
}
#content-social-text {
	display:none;
}
#content-sidebar-loop {
	display:none;
}


#footer {
	width:88%;
}
}

/* Tablet Layout: 481px to 768px. DOESN'T INHERIT STYLES. */
@media only screen and (min-width: 530px) {
.container-flexslider {
	width: 101.2%;
	margin-left:-0.52%;
	float:left;
	margin-top:-10px;
}
#header-logo {
	margin-top:5px;
}
#header-search {
	width:250px;
	margin-top:-10%;
	margin-top:-120px;
	float:right;
}
.navbar {
	margin-top:7px; /*Change height of navbar & main content*/
	margin-right:30px;
	margin-bottom:-1px;
	float:left;
	margin-left:30px;
	vertical-align:middle;
}
.content-icons {
	margin-left:5%;
	width:90%;
}
#content-about {
	overflow:auto;
	margin-left:24px;
	width:90%;
}
#sidebar-all {
	display:none;
}
#twitter-feed {
	display:none;
}
#content-social-text {
	display:none;
}
#content-sidebar-loop {
	display:none;
}
#footer {
	width:91%;
}
}

@media only screen and (min-width: 599px) {
.container-flexslider {
	width: 101.3%;
	margin-left:-0.7%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width: 602px) {
.container-flexslider {
	width: 101.4%;
	margin-left:-0.7%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width: 767px) {
.container-flexslider {
	width: 101.3%;
	margin-left:-0.7%;
	float:left;
	margin-top:-10px;
}
}
/* Tablet Layout (LARGER): DOESN'T INHERIT STYLES. */
@media only screen and (min-width: 800px) {
.container-flexslider {
	width: 100.9%;
	margin-left:-0.4%;
	float:left;
	margin-top:-10px;
}
.navbar {
	margin-top:-36px; /*Change height of navbar & main content*/
	float:right;
	margin-right:21%;
	vertical-align:middle;
}
}
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Tablet Layout ONLY. */
@media only screen and (min-width:1080px) {
.container-flexslider {
	width: 101.2%;
	margin-left:-0.6%;
	float:left;
	margin-top:-10px;
}
#header-logo {
	margin-top:10px;
}
#header-logo:hover {
	background-image: url(images/header-logo-hover.png);
	background-repeat:no-repeat;
}
#header-search {
	width:250px;
	margin-top:-10%;
	margin-top:-120px;
	float:right;
}
.navbar {
	margin-top:-36px; /*Change height of navbar & main content*/
	float:right;
	margin-right:21%;
	vertical-align:middle;
}
.rollover-container {
	width:80%;
}
#sidebar {
	display:block;
	margin-left:-1%;
}
#sidebar-all {
	display:block;
}
.content-icons {
	margin-left:-2%;
	width:100%;
}
#content-about {
	overflow:auto;
	margin-left:24px;
	width:71%;
}
#twitter-feed {
	display:block;
	padding-left:3px;
	padding-bottom:20px;
	margin-top:125px;
	margin-left:12px;
	border-style:solid;
	border-color:#37adec;
	border-radius:15px;
	border-width:3.5px;
}
#content-social-text {
	display:block;
	margin-top:-7px;
	margin-right:78px;
	float:right;
}
#content-sidebar-loop {
	display:block;
}
.content-header {
	display:none;
}
.content-all {
	border:solid;
}
#content-teamkit {
	vertical-align:middle;
}
#footer {
	width:95%;
}

.rollover span {    
  visibility: hidden;
}
.span1{bottom:72px;}
.span2{bottom:32px;}
}

@media only screen and (min-width:1279px) {
.container-flexslider {
	width: 100.94%;
	margin-left:-0.49%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width:1365px) {
.container-flexslider {
	width: 100.95%;
	margin-left:-0.5%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width:1440px) {
.container-flexslider {
	width: 100.95%;
	margin-left:-0.5%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width:1599px) {
.container-flexslider {
	width: 101%;
	margin-left:-0.5%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width:1679px) {
.container-flexslider {
	width: 101.1%;
	margin-left:-0.55%;
	float:left;
	margin-top:-10px;
}
}

@media only screen and (min-width:1920px) {
.container-flexslider {
	width: 101.3%;
	margin-left:-0.65%;
	float:left;
	margin-top:-10px;
}
}