/* CSS Document */

body {

 font-family: 'Raleway', sans-serif;	
 background:#000;

}


/* top nav */ 
navver {
  display:table;
  width:100%;
  height: 100px; 
  position:fixed;
  top:-130px; 
  left:0;
	background-color:#231F20;
		color:#fff;
		z-index: 8; 

}

navver.navExposed {
	top:0;
}

logo {
  float:left;
  width:30%;
  cursor:pointer;
}

logo img {
/*	width:100%;*/
	max-height: 100px; 

}

navLinks {
  float:right;
  padding-top:34px;
  padding-right:20px;
}

navLinks a {
	color:#bdc8cc;
	padding:14px;
	font-size:1.4em;
	text-decoration: none; 
}

navLinks a.active {
	font-weight: 800;
	border-bottom: 2px solid #fff;

}

/* end of top nav */ 

/* top panel with representative images , links .. default for horiz, lando ...  */ 

cgLines {
	display:table;
	width:100%;
}

prodline {
	float:left;
	width:30%;
	margin-right:2%;
	text-align:center;
	cursor:pointer;
}

prodline img {
    width:80%;
    margin:0 auto;
}

prodline h2 {
	font-size:1.5em;
}

img#cg-logo-home {
	width:40%;
	margin:0 auto;
	position:absolute;
	bottom:18px;
	left:0;
	right:0;
	max-width: 260px; 
}

p.brandDesc {
	margin:20px auto;
	width:70%;
	min-width:400px;
	line-height: 1.5; 
	font-size:1.2em;
}

/* end of top panel */ 




section.titler h1 {

	position: relative;
	top: 30%;
	margin: 0px auto;
	text-align: center;
	font-size: 5em;
	text-transform: uppercase;

}

.titler2 h1 {
	position: relative;
	top: 20%;
	margin: 0px auto;
	width:80%;
	text-align: center;
	font-size: 6em;	
}

h2 {
	font-size:2em; 
	text-align:center;
}

h2.bigger {
	font-size:3.3em; 
}


img#logo-IG {
	width:25%;
	max-width:200px;
}
h2#gramPrompt span {
	font-size:24px;
}



section {
	position:relative; 
	background-color:#fff;
	color:#000;
}


section.blackBG {
	background-color:#000;
	color:#fff;
}
section.blackBG2 {
	background-color:#231F20;
		color:#fff;
}


section.slider {
	background-color:#fff;
}



@keyframes arrow {
  0%,100% {
    top:30px;
  }
  50% {
    top:30px;
  }
}

arrowDown {
	display:block;
	opacity:0;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
    cursor: pointer;
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 35px;
	right:30px;
	-webkit-animation: 4s arrowT infinite ease;
	animation: 4s arrowT infinite ease;
	z-index: 100; 
}

.garment arrowDown{
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;	
	box-shadow: 5px 5px #ccc;

}


@keyframes arrowT {
  0%,100% {
    opacity:.9;
    bottom:30px;
  }
  50% {
    opacity:.2; 
    bottom:60px;
  }
}


img.section-branding {
	position:absolute;
	right:8px;
	bottom:8px;
	width:200px;
	z-index:90;
}



/*section.lineSport img {

	margin: auto;
	display: block;
	height: 100%;

}
*/


div#logoPlus {
	margin:0 auto; 
	width:100%; 
	z-index:10; 
	position:absolute;
	bottom:120%;  
	left:0; 
	right:0; 
	padding-bottom:20px; 
	padding-top:25px; 
	text-align:center;
	
}



div#logoPlus2{
	margin:0 auto; 
	width:100%; 
	z-index:10; 
	position:absolute;
	top:-40%;  
	left:0; 
	right:0; 
	padding-bottom:20px; 
	padding-top:25px; 
	text-align:center;
	
}


div.bg-logos {
  background-image: url('../images/cglogo-notext.png');
  background-size:50px 53px  ;
  animation: logosizer 5s 2; 
	width:100%; 
	height:200px; 
}


h3#instruct {
	padding-bottom:45px;
	font-size:1.5em;
	display:none;
	width:60%;
	min-width: 330px; 
	line-height: 1.5; 
	margin:0 auto;
}

h2.heading {
	font-weight:800; 
	font-size:1.8em; 
}

div#logoPlus img {
	width:50%; 
	max-width:420px; 
}

div#logoPlus h2 {
	display:none; 
	color:#fff; 
	width:60%; 
	max-width:300px; 
	margin:50px auto 45px; 
	font-size:2.7em;
	line-height:1.6;
}

div#logoPlus h2#slogan {
	width:90%; 
	max-width:500px; 
	font-size:2.3em;
}

h2.startsTop {
	font-family: 'Comfortaa', cursive;
	color:#fff; 
	font-size:2.6em; 
	margin-top:20px; 
}


img#cg-logo {
	display:none;
	margin:20px auto; /* get to the top ... replace with absolute position, or easing */ 
   width:70%;
   max-width: 550px; 
}



/* for GARMENT LINES... photo and text */ 

div.photoHold {
	height:100%;
	width:100%;
	display:table;
	position: relative;

}

div.photoHold div.slideshow {
	float:left;
}


div.photoHold img {
    width:200px;
    display:block;

}

div.photoHold img.photo2 {
	display:none;
}

div.photoHold p {
	float:left;
	font-size:1.8em;
	line-height: 1.4; 
	padding-top:15%;
	padding-right:25px;
	padding-left:25px;
	text-align:left;
	color:#000; 
	margin:20px auto;
}

more {
	display:none;
}

span.prod-feature {
	display:block;
	font-size:.9em;
}

	span.prod-feature::before {
		content:'';
	  height:8px;
		width:8px; 
		border-radius:50%; 
       display: inline-block;
		background-color:#000; 
		margin:0px 8px 5px 8px;
		
		
	}

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}





section.social {

/*	background:#333 url("../images/club/_group2.jpg") center center;
	background-size:cover;*/

	background:rgb(112, 123, 127); 


}

img.club-photo {
	float:left;
	width:35%;
	max-width:400px;
	margin: 6% 0 0 45px;
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);

}



div#club-pitch {

	z-index: 25;
/*	background: rgba(127, 105, 105, 0.6);
*/	width: 40%;
	min-width:240px;
	padding: 5%;
	margin:00px auto;
	position: relative;
	top:40px;
	float:right;
}

div#club-pitch p {
   color:#fff;
   font-size:1.4em;

}

h2#clubPrompt {

	color:#fff;
	text-shadow: 1px 1px 2px black; 
	font-size:3em;
}

h2#clubPrompt2 {

	color:#fff;
	text-shadow: 1px 1px 2px black; 
	font-size:3em;
	position:absolute;
	top:20px;
	left:20px;
}


input#club-email  {
	padding: 8px;
	font: 13px Arial;

}

button#btn-club {
	padding:8px;
}

ig {
	display:block;
/*	position:absolute;
	bottom:120px;
	right:20px;*/
	color:#fff;
	font-size:1.2em;
	font-family: 'Comfortaa', cursive;
	background: url("../images/logo-IG.png") left top no-repeat;
	background-size:40px 40px;
	padding-left:44px;
	padding-top:7px;
	height:48px;
	margin-top:34px;
}

ig a {
	text-decoration:underline;
	color:#fff;
	font-family: 'Comfortaa', cursive;
	display:inline-block; 
	position:relative; 
	z-index:35; 
}
ig a:hover {
  color:#ED5249;
}


@media screen and (orientation:portrait) {
 
 /* need to handle the */

 div.photoHold {
 	background:#231F20;
 }

div.photoHold div.slideshow {
	float:none;
	margin:0 auto;
}

div.photoHold p {
  float:none;
  z-index: 88; 
  position:absolute;

  left:0;
  right:0;
  top:0px;
  /* width should be set by JS to equal image width */ 
  width:80%;
  font-size:1.3em;
  line-height: 1.2; 
  background: rgba(249, 229, 234,.9); 
  padding-top:20px;
  padding-bottom:20px;
  margin:0 auto;
	color:#000; 
	height: 0px;
	display:none;


	/* JS will animate this to full height */ 
}






more {
    position: absolute;
    z-index: 8;
    left: 20px;
    bottom: 20px;
    display: block;
    border: 1px solid #000;
    padding: 6px;
    font-weight: 700;
    font-size: 1.4em;
    background: #fff;
    cursor: pointer;
}

.btn-closeBlurb {
	padding:8px;
	margin-top:20px;
	display: block;
	font-size:1.1em;
	line-height: 1.5em;

}


div#club-pitch {


	width: 80%;
	min-width:240px;
	padding: 5%;
	margin:00px auto;

}

div#club-pitch p {

   font-size:1.5em;

}

section.social {



}

img.club-photo {
	float:none;
    width:80%;
	max-width:440px;
	margin: 6% 0 0 45px;
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);

}



div#club-pitch {

	z-index: 25;
/*	background: rgba(127, 105, 105, 0.6);
*/	width: 100%;
	min-width:240px;
	padding: 5%;
	margin:00px auto;
    position:absolute;
    top:32%;
	float:none;

	text-align:center;

}

div#club-pitch p {
   color:#fff;
   font-size:1.2em;

   width:80%;
   text-shadow:2px 2px #000;

}

input#club-email  {
	padding: 8px;
	font: 13px Arial;

}

button#btn-club {
	padding:8px;
}


ig {
	width:130px;
	background-size:25px 25px;
	padding-left:28px;
	padding-top: 3px; 
}

ig a {
	font-size:.8em;
}




@media screen and (max-width: 400px) {

/*	div#club-pitch {
		width: 90%;
		padding: 5%;
		position: inherit;
		top:0;

	}  
	div#club-pitch p {

	   font-size:1.4em;

	}
*/




} /* end of width 350 */ 







} /* end of media query portrait */ 


@media screen and (max-width:700px) {

/* top nav */ 
navver {


}


logo {
  float:left;
  width:30%;
}

logo img {
/*	width:100%;*/
	max-height: 100px; 

}

navLinks {
  float:right;
  padding-top:34px;
  padding-right:10px;
}

navLinks a {
	color:#bdc8cc;
	padding:5px;
	font-size:1.1em;
	text-decoration: none; 
}
navLinks a.active {
	font-size:1.2em;
	font-weight: 500; 
}


/* end of top nav */ 

/* social */ 





} /* end of query 700 width */ 


@media screen and (max-width:570px) {

prodline h2 {
  font-size:1.2em;
}

p.brandDesc {
	width:85%;
	min-width:320px;
	padding:8px;
	font-size:1em;
}



/* top nav */ 
navver {

}


logo {
  float:left;
  width:30%;
}

logo img {
/*	width:100%;*/
	max-height: 75px; 

}

navLinks {
  float:none;
 top:53px;
 left:-25px;
 position: relative;

}

navLinks a {
	color:#bdc8cc;
	padding:5px;
	font-size:.9em;
	text-decoration: none; 
}

navLinks a.active {
	font-size:.9em;
	font-weight: 500; 
}

navLinks a.lnk-social {
	display:none;
}



/* end of top nav */ 

} /* end of query 700 width */ 




/* landscape ... height */ 
@media screen and (max-height: 510px) {

	div.photoHold p {
      font-size:1.4em;
      line-height: 1.3; 
	}


}

@media screen and (orientation:landscape) and (max-height:600px) {

div.photoHold p {

	font-size: 1.2em;
	line-height: 1.3;
	padding-top: 15%;
	padding-right: 25px;
	padding-left: 25px;
	text-align: left;
	color: #000;
	margin: 20px auto;
}

prodline img {
	width: 65%;
	margin: 0 auto;
}

prodline h2 {
	font-size:1.3em;
}

p.brandDesc {
	margin: 20px auto;
	width: 80%;
	min-width: 400px;
	line-height: 1.5;
	font-size: 1em;
}

img#cg-logo-home {

	max-width: 190px;
}

logo img {
	max-height:75px;
	margin-top:8px;
}

img.club-photo {
	margin-top:0%;
}


  div#club-pitch {

	width: 40%;
	min-width: 240px;
	padding: 5%;
	margin: 10px auto;
	position: relative;
	top: -50px;

} 




}

@media screen and (orientation:landscape) and (max-height:450px) {

h2#clubPrompt2 {
	font-size:2em;
}

img.club-photo {
	margin-top:8px; 
}


  div#club-pitch {

	width: 40%;
	min-width: 240px;
	padding: 5%;
	margin: 10px auto;
	position: relative;
	top: -50px;

} 



div#club-pitch p {
	font-size:1.2em;
}

ig {
	margin-top:15px;
	font-size:1em;
}

ig {


	font-size: 1em;
	font-family: 'Comfortaa', cursive;
	background: url("../images/logo-IG.png") left top no-repeat;
	background-size: 28px 28px;
	padding-left: 35px;
	padding-top: 7px;
	height: 40px;
	margin-top: 16px;
}




prodline img {
	width: 55%;
	margin: 0 auto;
}

prodline h2 {
	font-size:1.1em;
	margin:0;
}

p.brandDesc {
	margin: 20px auto;
	width: 96%;
	min-width: 400px;
	line-height: 1.3;
	font-size: 1em;
}

img#cg-logo-home {

	max-width: 130px;
}

}