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

/* -------------------- fonts------------------------ */
@font-face {
    font-family: 'summer_hearts';
    src: url('../fonts/summerhearts-regular-webfont.woff2') format('woff2'),
         url('../fonts/summerhearts-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
	font-family: 'open_sansbold';
	src: url('../fonts/opensans-bold-webfont.woff2') format('woff2'),  url('../fonts/opensans-bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
	font-family: 'open_sansregular';
	src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),  url('../fonts/opensans-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'open_sansitalic';
	src: url('../fonts/opensans-italic-webfont.woff2') format('woff2'),  url('../fonts/opensans-italic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('../fonts/opensans-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/opensans-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
strong {
	font-family: 'open_sansbold', arial, helvetica, sans-serif;
}
em {
	font-family: 'open_sansitalic', arial, helvetica, sans-serif;
	font-style: italic;
}

/* ------------- body styles ------------------- */

body{
	font-family: open_sansregular, arial, helvetica, sans-serif;
	font-size: 100%;	
	background-image: url(../images/concrete_wall.png); /*  This pattern is downloaded from www.subtlepatterns.com  */
}
input{
	font-family: open_sansregular, arial, helvetica, sans-serif;
}
#wrapper{
	display: block;
	width: 95%;
	margin: 0 auto;
	min-width: 320px;
	max-width: 1400px;	
	min-height: 500px;
}

#logo{
	clear: right;
	display: block;
    width: 100%;
	max-width: 340px;
	margin: 20px auto; /* centering the logo */
}
#browse{
	clear: both;	
	float: left;
	display: block;
	margin-left: 30px;
	background-image: url(../images/down_arrow.png);
	background-repeat: no-repeat;
	background-position: right;
	width: 195px;
	height: 50px;
	line-height: 50px; /* vertical center text */
    text-shadow: 0 -1px #000;
}
#mobile-search-button{
	background-image: url(../images/search_icon.gif);
	display: block;
	width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	float: right;
	margin-right: 30px;
}
#mobile-search-input{
	display: block;
	clear: both;
	margin-bottom: 15px;
    padding: 15px 30px;
}

header{
    transition: all 0.35s;
	box-shadow: 0 5px 10px rgba(0, 0, 00, 0.27);
	display: block;
	overflow: auto;
	min-height: 100px;
	background-color: #111;
	border-radius: 0 0 10px 10px;
	padding-bottom: 10px;
}
header a{
	text-transform: uppercase;
	letter-spacing: 0.2em; 
	text-decoration: none;
	font-size: 0.875em; /* 14/16 */	
}

#utilities{
	display: none; /* only view this is larger layouts */
	float: right;
}
#utilities #login, #utilities #signup, #login-mobile{
	display: block;
	width: 85px;
	height: 32px;	
	line-height: 32px; /* vertical align text */
	float: left;
	text-align: center;
}
    #utilities #login:hover{
        background-color: #fff;
	color: #111;
    }
    
    #utilities #signup:hover{
        	color: #fff;
	border: 1px solid #cc368f;
    }

#login-mobile{
	float: right;
	color: #cc368f;
}
#browse{
	color: #4c4c52;	
	transition: color 0.35s;
}
#browse:hover{
		color: #797985;
}
main{
	margin-top: 2.6875em; /* 43/16 */
}
main p{
    padding-left: 10px;
    padding-right: 10px;
}

.video{
	width: 100%;	
	max-width: 980px;
}
h1, h2, h3, h4, h5{
	letter-spacing: 0.05em;
	text-transform: uppercase;	
	margin-bottom: 0.875em; /* 14/16 */	
}
h1{
	font-family: open_sansbold, 'arial black', 'arial bold', sans-serif;
	font-size: 1.875em; /* 30/16 */
	color: #fff;
	margin-bottom: 0.875em; /* 14/16 */
    margin-left: 10px;
    margin-right: 10px;
}
h1 span, h4 span{
	box-shadow: -8px 0 0 #000, 8px 0 0 #000; /* create padded effect of black bg */
	line-height: 1.6;
	background-color: #000;	
}
#meta{
	display: block;
	background-color: #111;
	padding: 15px;
	color: #787879;	
	text-transform: uppercase;
	margin-bottom: 2.3125em; /* 37/16 */
	font-size: 0.875em; /* 14/16 */
	letter-spacing: 0.025em;
	font-family: open_sanslight, arial, helvetica, sans-serif;
	max-width: 980px;
}
#meta a{
	color: #fff;	
	text-decoration: none;
}

#meta a:hover{
	text-decoration: underline;	
}
#meta ul{
	display: table;	
}
#meta ul li{
		display: table-cell;
		vertical-align: middle;
		padding-right: 10px;
}
main p{
	letter-spacing: 0.025em;
	color: #b7b6b6;
	line-height: 1.625; /* 26/16 */
	margin-bottom: 0.75em; /* 12/16 */
    max-width: 600px;
}

/*============ share ================== */
#share{
	display: block;
	overflow: auto;
	margin-top: 4em;
	padding: 20px;
	border-top: 1px solid #43464b;
	box-shadow: 0 -1px 0 #111;
}

#share #social a > img{
	opacity: 0.65;
	transition: opacity 0.35s;	
	margin-right: 5px;
	margin-top: 3px;
}
#share #social a:last-of-type img{
	margin-right: 0;	
}
#share #social  a > img:hover{
	opacity: 1.0;	
}
#share #social p{
    padding: 0;
	line-height: 1;
	width: 80px;
	display: block;
	float: left;	
	text-transform: uppercase;
	color: #706c70;
}
#share #social p span{
	font-size: 3em; /* 48/16 */
	color: #cc368f;	
	letter-spacing: 0;
	font-family: summer_hearts, 'Brush Script MT', cursive;
}

#share #comment a{
	display: block;
	float: left;;
	text-decoration: none;
	font-size: 0.9375em; /* 15/16 */
	text-transform: uppercase;
	color: #fff;
	font-family: open_sanslight, arial, helvetica, sans-serif;
	letter-spacing: 0.05em;	
	width: 126px;
	height: 41px;
	text-align: center;
	line-height: 41px;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
	transition: all 0.35s;	

}
#share #comment a:hover{
	border-color: rgba(255, 255, 255, 1);
}
#share #comment a:first-child{
			margin-right: 20px;
}
a.button, aside input[type="submit"], a.button-pink{
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.9375em; /* 15/16 */
	font-family: open_sanslight, arial, helvetica, sans-serif;
	letter-spacing: 0.05em;	
	width: 126px;
	height: 41px;
	text-align: center;
	line-height: 41px;
	border-radius: 20px;
	border: 1px solid #fff;
	border-bottom: 	1px solid #fff !important;
	transition: all 0.35s;	
    cursor: pointer; cursor: hand; 
}
aside input[type="submit"]{
	background-color: rgba(0, 0, 0, 0);
	color: #fff;
	line-height: 1;
	margin: 30px auto;
}
input[type="submit"]:hover{
	background-color: #fff;
	color: #111;
}
a.button:hover{
	background-color: #fff;
	color: #111111 !important;	
}
a.button-pink{
	border-color: #cc368f !important;
	color: #cc368f;	
	text-transform: uppercase;
}
a.button-pink:hover{
	background-color: #cc368f;
	color: #111;	
}
#comment{
	display: block;
	overflow: hidden;
	margin-top: 20px;	
	clear: left;
	margin-bottom: 20px;
	
}

/*============ aside ================== */
h2{
	font-family: open_sanssemibold, 'arial black', 'arial bold', sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-size: 1.125em; /* 18/16 */	
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin-bottom: 0.9375em; /* 15 /16 */
}
aside{
	display: block;
	overflow: hidden;
	background-color: rgba(21, 21, 23, 0.16 );	
}
aside p{
	color: #818181;	
	margin-bottom: 0.75em; /* 12/16 */
	line-height: 1.5625; /* 25/16 */
}
aside div{
	padding: 63px 38px;	
}
aside div:nth-last-child(2){
	background-color: rgba(21, 21, 23, 0.46 );	
}

aside a.button, aside a.button-pink{
	margin: 28px auto;	
}
aside input[type="email"]{
	border: none;
		height: 35px;
		width: 100%;
		margin: 0 auto;
		font-size: 1em;
		font-family: open_sansitalic, 'arial italic', arial, helvetica, sans-serif;
		border-top: 1px solid #000;
		padding: 5px;
		
}
a.emph{
	background-color: #cc368f;
	color: #fff;
	border-color: #cc368f;
	border-bottom: 1px solid #cc368f !important;
}
a.emph:hover{
	color: 	#cc368f;
}

.promo h2{
	margin-bottom: 0;	
	letter-spacing: 0.05em; 
	text-align: center;
	font-family: open_sanssemibold, 'arial black', 'arial bold', sans-serif;
}
.promo h2 span{
		letter-spacing: 0.05em; 
		font-family: summer_hearts, 'Brush Script MT', cursive;
		color: #cc368f;
		font-size: 2.25em; /* 36/16 */
		display: inline-block;
		clear: both;
		max-width: 270px;
		line-height: 1.2;
}
.promo {
	color: #b7b6b6;	
}
.promo ul{
	width: 200px;
	margin: 40px auto 20px auto;	
}
.promo ul li{
	margin-bottom: 1.2em;	
}
.promo p{
	text-align: center;
	font-size: 2.5em;	
}
/*============ related tuts ================== */


#related{
	clear: both;
	display: block;
	background-color: #111;	
	padding: 40px 10px;
	overflow: auto;
}

#related h2{
	font-family: open_sansbold, 'arial black', 'arial bold', sans-serif;
	font-size: 1.4375em; /* 23/16  */	
	margin-bottom: 40px;
	margin-left: 2.5%;
}
#related div{
	position: relative;
	margin-bottom: 40px;
}
#related > div > div img{
	transition: all 0.3s;
	-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;	
}
#related > div > div:hover img{
	opacity: 0.5;	
	transform: scale(1.05);
}
#related > div > div{
	overflow: hidden;
	line-height: 1.2;	
	background-color: #cc368f;
}
#related img{
	width: 101%;
}
#related a{
	display: block;	
	text-decoration: none;
}
#see-more{
	display: block;
	padding: 15px 15px 15px 15px;
	color: #e9d9e3;
	text-transform: uppercase;
	font-size: 0.8em;	
	margin-bottom: 30px;
	margin-right: 5px;
	text-align: right;
	float: right;
	background-image: url(../images/icon_arrow_pink.png);
	background-repeat: no-repeat;
	background-position: bottom 16px right;
}
#see-more.less {
	background-image: url(../images/icon_arrow_pink_less.png);
	background-position: bottom 16px left;	
}
#related h3{
	position: absolute;
	left: 0;
	bottom: -14px;
	display: block;
	background-color: #363636;
	height: 58px;
	width: 100%;
	text-transform: uppercase;
	color: #cc368f;
	padding: 10px;
	border-radius: 10px 10px 0 0;
}

/* --------------------------- footer styles ----------------------------- */
footer{
	color: #e9d9e3;
	padding: 40px;
	margin-top: 45px;
	background-image: url(../images/footer_img.jpg);
	background-repeat: no-repeat;
	background-size: cover;	
	min-height: 300px;
	overflow: auto;
	display: block;
	background-position: bottom right;
}

/* hover for latest posts in footer */
footer .col1 section a:hover h5{
	color: #cc368f;
}

footer > div{
	display: block;
	overflow: auto;
	margin-bottom: 70px;	
}

footer h4{
	text-align: center;
	color: #e9d9e3;
	margin-bottom: 1.33333em; /* 40/30 */	
	font-size: 1.875em;/* 30/16 */
}
footer h5{
	transition: all 0.3s;
	text-transform: capitalize;
	font-size: 0.9375; /* 15/16 */
	color: #e9d9e3;	
}
footer p{
	font-size: 0.875; /* 14/16 */	
	float: left;
	margin-right: 10px;
	font-family: open_sanslight, arial, helvetica, sans-serif;
	letter-spacing: 0.1em;
	color: #aeadad;
}
footer section{
	display: block;
	border-top: 1px solid #43464b;
	box-shadow: 0 -1px 0 #111;
	margin-bottom: 50px;	
	padding-top: 20px;
	overflow: hidden;
}
footer .col1 section p{
	clear: left; /* bump this to second line */
}
footer section a {
	text-decoration: none;
	color: #fff;	
	position:relative;
	display: block;
	width: 100%;
	
}
/* override so that first item doesnt have top border */
footer section:first-of-type {
	border-top: none;
	box-shadow: none;
}
footer section a img { /* select only first image (thumbnail) */
	display: none;
}

footer a{
	display: block;
	width: 100%;
	transition: all 0.3s;
}
footer a:hover{
    color: #cc368f;	
}

footer section > img:last-child { /* select only last image (icon) */
	float: left;
	margin-top: -5px; /* bump icon up to be better aligned with the text */
}
footer section h5{
		float: left;
		
}

footer ul{
	text-transform: uppercase;	
}
footer li{
	margin-bottom: 20px;	
}
footer li a{
	color: #e9d9e3;
	text-decoration: underline;	
}

footer > p { /* select last p tag in footer */
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #706c70;
		border-top: 1px solid #43464b;
	box-shadow: 0 -1px 0 #111;
	padding-top: 40px;
}
footer > div > div {
	display: block;
	width: 220px;
	overflow: auto;
	margin: 0 auto;	
}
footer > div:last-of-type img{ /* select last div in footer imgs (social media icons) */
	margin-right: 12px;	
	opacity: 0.5;
	transition: all 0.35s;
	display: block;
	float: left;
}
footer .col3{
	margin-bottom: 40px;	
}
footer > div:last-of-type img:hover{
	opacity: 1.0;	
}
#big-search{
	display: none;	
	float: left;
}
#big-search input[type="text"], #mobile-search-input input[type="text"]{
    border: none;
    padding: 4px;
     background-color: #0d0d0d; 
    border-bottom: 1px solid #060606;
    box-shadow: 0 1px 0 #27272b;
    color: #646468;
    font-family: open_sansitalic, 'arial italic', arial, helvetica, sans-serif;
    font-size: 0.9375em;
    float: left;
    display: block;
   width: 195px;
}

#big-search input[type="submit"]{
    width: 40px;
    height: 30px;
    display: block;
    float: left;
    border: none;
    background-color: #111;
    background-image: url(../images/search_icon.gif);
    background-repeat: no-repeat;
    background-position:  center left 10px;
}
/* drop down search styles (mobile only) */
#mobile-search-input input[type="text"]{
	height: 41px;	
    padding: 10px;
    width: 60%;
	/*background-color: #0d0d0d;
	border: none;
	border-bottom: 1px solid #27272b;
	color: #36363b;*/
}
/* style the search button for the drop down version of the search form */
#mobile-search-input input[type="submit"]{
        width: 20%;
        height: 41px;
    min-width: 100px;
		text-transform: uppercase;
		color: #fff;
		font-family: open_sanslight, arial, helvetica, sans-serif;
		background-color: #111;
		border: 1px solid #fff;	
		border-radius: 10px;	
        letter-spacing: 0.2em; 
}
/*==============================================================*/
/*===================== MEDIA QUERIES ==========================*/
/*==============================================================*/


@media (min-width:630px){
    
    header{
       min-height: 100px;
    }
    #logo{ 
        margin: 20px auto;
        max-width: 350px;
    }
    /* adjust meta info (below video) spacing */
    #meta ul {
       
    }
    #meta ul li{
        padding-right: 30px;
    }
	.col1{
		margin-right: 2.5%;
	}	
	.col1, .col2, .col3{
		display: block;
	overflow: hidden;
	width: 100%;	
	float: left;	
	clear: left;
	margin: 0; /* reset margins on columns for related tuts */
}
	#related > div > div {
		float: left;
		width: 48%;	
		margin: 0; /* reset margins */
		margin-bottom: 10px;
	}
	#related > div > div:first-of-type{
		margin-right: 4%;	
	}


footer .col1, footer .col2, footer .col3{
	float: none;
	width: 100%;	
}

	#see-more{
		display: none !important;	 /* why isnt this working??? */
	}
	.more{
		display: block;	
	}
	
	aside div{
		width: 50%;
		float: left;	
	}
	aside div:nth-child(2){
		clear: left;	
	}
	aside .promo{
		float: right;
		margin-top: -321px;	
	}
	
	
}
@media (min-width: 633px){
    #social, #comment {
		float: left;
		clear: none;
		width: 50%;	
	}
	#comment{
		float: right;
		margin-top: 5px;
	}
	#share #comment a.button{
		float: right;
	}
    
}
@media (min-width:700px){
	
	/* turn footer thumbnails for 'latest posts' on */
footer section a img { /* select only first image (thumbnail) */
	display: block;
	width: 50%;
	margin-right: 10px;
	float: left;
}

    /* pink overlay of thumbnails on hover */
footer .col1 section a:before{
	display: block;
	width: 50%;
	padding-bottom: 26.2%;
	opacity: 0;
	content: ' ';
	position: absolute;
	background-color: #cc368f;
	z-index: 100;
    transition: opacity 0.3s;
}
footer .col1 section a:hover:before{
		opacity: 0.5;
}
    /* change footer h4 to left text align (except for last one) */
    footer > div > h4{
        text-align: left;
        padding-left: 8px;
    }
    /* only center align 'follow us' */
    footer .col3  h4{
        text-align: center;
    }
footer section h5{
	clear: none;	
	float: left;
	width: 45%;
}
	footer .col1{
		float: left;
		width: 56%;
		margin-right: 10%;
	}
	/* make the meta info section of latest posts float to right of pic */
	footer .col1 section p{
		clear: none;
	}
	footer .col2{
		float: left;
		clear: none;
		width: 34%;	
		margin-bottom: 30px;
	}
	footer div{
		overflow: auto;	
	}
}

@media (min-width:740px){
	#big-search, #browse, #utilities{
		display: block;
		float: left;
		margin: 0;
	}
	#big-search{
		margin-top: 6px;	
	}
	#big-search, #browse{
	/*	width: 35&;	*/
	}
	#utilities{
		float: right;
		width: 15%;
		min-width: 170px;
	}
	#browse{
		margin-left: 2.5%;	
	}
	#utilities {
		margin-right: 2.5%;	
	}
	#browse{
		margin-right: 5%;
	}	
#utilities #login{
	color: #cc368f;
	border-radius: 5px 0 0 5px;
	border: 1px solid #cc368f;
}
  
#utilities #signup{
	background-color: #cc368f;
	border-radius: 0 5px 5px 0;
	color: #111;
		
} 

#mobile-search-button {
	display: none;	
}
    /* turn off mobile login */
    #login-mobile{
        display: none;   
    }
    
}

@media (min-width:900px){
	
    main{
    width: 73%;
    float: left;
        margin-right: 2%;
    }
    aside{
        width: 25%;
        float: left;
    }
    aside > div:first-of-type{
        margin-top: 45px;
    }
    aside div{
        width: 100%;
        float: left;
        clear: both;
        padding: 15px;
    }
      aside div:last-child{
          padding: 50px 15px;
    }
    aside .promo{
        /* adjust font to fit */
        font-size: 85%;
        margin: 0;
    }

		
	#related .col1, #related  .col2, #related  .col3{
		display: block;
	width: 30%;	
	float: left;	
	clear: none;
	margin: 0; /* reset margins on columns for related tuts */
	
}
#related .col1{
	margin-left: 2.5%;	
}
#related .col1, #related .col2{
			margin-right: 2.5%;	
		}
	#related > div > div {
		float: left;
		clear: left;
		width: 100%;
		margin: 0; /* reset margins */
		margin-bottom: 20px;
	}
	#related > div > div:first-of-type{
		margin-right: 4%;	
	}

}
@media (min-width:1000px){
    
    /* adjust back to reg size */
    aside .promo{
        font-size: 100%;
    }
	footer .col1 section p{
		text-align: right;	
	}
	footer .col2{
		padding-left: 60px;	
	}
	footer .col1, footer .col2, footer .col3{
		width: 33%;	
		clear: none;
		float: left;
		margin: 0;
	}	
    /* make 'follow us' left aligned in this layout */
    footer .col3 h4{
        text-align: left;
    }
    /* make social media thumbs float left */
    footer .col3 > div{
        float: left;
    }
    /* get rid of padding on 'contact us' */
    footer .col2:nth-child(3) {
        padding-left: 0;
    }
	/* put contact us below about us */
	footer div.col2 ul{
		margin-bottom: 40px;
	}
}
@media (min-width:1103px){
		#logo{
		float: left;
		margin-left: 10px;	
	}
	#browse{
		float: left;
		clear: none;	
		margin-right: 30px;
	}
	#big-search{
		margin-top: 35px;	
		margin-right: 0;
	}
	#utilities{
		margin-top: 35px;
		margin-left: 0;
		margin-right: 15px;	
        width: auto;
	}
	#browse {
		margin-top: 25px;	
	}
}