@charset "UTF-8";
/* CSS Document */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
list-style: none;
}

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

.clear { clear: both; }


/* ======================================================
   GENERAL
   ====================================================== */

html {
	height: 100%;
	/*box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-stroke:1px transparent;	*/
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
	font-family: 'ProximaNovaRegular';
	font-size: 16px;
	font-weight: 300;
	min-height: 100%;
	/*background-color: #EFEFEF;*/
	background-color: rgba(0, 0, 0, 0.17);
}
img {
	width: 100%;
	height: auto;	
}
a {
	text-decoration: none;
	color: #989898;	
	font-family: 'ProximaNovaSemiBold';
}
a:hover {
	color: #e71e8c;	
}
.pink { color: #e71e8c; }
.bold { font-family: 'ProximaNovaSemiBold'; }


.list li { list-style: circle; margin: 0px 0px 0px 17px; }

/* ======================================================
   Typography
   ====================================================== */
h1 { 
	font-size: 32px;
	font-family: 'ProximaNovaSemiBold';
	margin: 40px 0px 0px 0px;
	color: #e71e8c;
}
h2 { 
	font-size: 32px;
	font-family: 'ProximaNovaSemiBold';
	margin: 0px 0px 20px 0px;
	padding-top: 5px;	
}
h2 a { 
	color: #000;
}
h3 {
	font-size: 16px;	
	font-family: 'ProximaNovaBold';
}
p {
	margin-bottom: 20px;	
	padding: 1px;
}
.name-list {
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px dotted #000;	
}



/* ==========================================================================
   HEADER
   ========================================================================== */ 

header {
 width: 84%;
 padding: 0px 3% 0px 3%;
 max-width: 900px;
 margin: 0 auto;
}



/* ==========================================================================
   MAIN
   ========================================================================== */
#main {
	margin-top: 50px;	
}
#inner-main {
	width: 84%;
	max-width: 900px;
	background: rgba(255, 255, 255, 0.5);
	margin: 0px auto 0px auto;
	padding: 45px 3% 20px 3%;	
}



/* ==========================================================================
   Footer
   ========================================================================== */
#footer {
	margin-top: 20px;	
}
#inner-footer {
	width: 84%;
	max-width: 900px;
	margin: 60px auto 0px auto;
	padding: 10px 3% 40px 3%;
	border-top: 1px dotted #999;	
	font-size: 12px;
	color: #999;	
}
#inner-footer a {
	text-decoration: none;	
	color: #999;	
	font-family: 'ProximaNovaRegular';
}
#inner-footer a:hover {
	color: #e71e8c;	
}
#inner-footer p {
	line-height: 18px;	
}
.footer-left {
	float: left;	
}
.footer-right {
	float: right;	
}



/* ======================================================
   GALLERY
   ====================================================== */
   
.assignment {
	padding-top: 0px;	
}
.toggler:hover,
.closeSlider:hover{
	cursor: pointer;
}
.toggler {
	/*background-color: red;*/
	padding: 7px 0px 7px 0px;
	border-top: 1px solid #000;	
}
.toggler:hover {
	background-color: rgba(0,0,0,0.07) !important;	
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}
.slider{
	display:none;
	padding: 20px 0px;
}
.togglerheads {
	float: left;	
	margin: 10px 1%;
	text-transform: uppercase;
}
.thumb {
	width: 18%; 
	margin: 1%;
	float: left;	
	line-height: 0px;
	position: relative;
}
.closex {
	font-size: 14px;	
	color: #999;
	padding: 20px 0px 10px 0px;
	margin-left: 1%;
	display: block;
	float: none;
	clear: both;
}
.closex:hover {
	color: #000;
}
.description {
	margin: 0% 1%;
	font-size: 14px;	
	line-height: 19px;
}






/* ======================================================
   MEIDA QUERIES
   ====================================================== */ 
   
@media screen and (max-width: 1100px) {

}   
 






/* -------->> CSS Transitions <<<-----------*/


.fade a {
	opacity: 1.0;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

.fade a:hover {
	opacity: 0.5;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}