/*
 * Instagram Journal Demo
 * Version: 1.0
 *
 * Author: Chris Rivers
 * http://codecanyon.net/user/xxcriversxx
 *
 *
 * Changelog: 
 * Version: 1.0
 *
 */

/* Base 
----------------*/
html { height:100%; }
body { background:#fff; height:100%; margin:0px; padding-top: 68px; }

a {}
a:hover { text-decoration:none; }

::selection { background:#4eccb9; color:#fff; }
::-moz-selection { background:#4eccb9; color:#fff; }

/* Header 
-----------------*/
#header {
	background:#000;
	height: auto;
	left: 0;
	padding: 11px 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

#header .inner { margin: 0 auto; position: relative;width: 1100px; }

#header .logo { display:inline-block; float: left; }
#header .logo a { color:#fff; font-family: "Oswald",arial,serif; font-size: 26px; font-weight: 700; }

#header .logo a span { display:inline-block; padding-bottom:10px; padding-top: 10px; } 
#header .logo a img { height: auto; max-width: 258px; }

#header .navigation {
	float: right;
	height: auto;
	list-style: none outside none;
	margin-top: 15px;
	-webkit-transition: all 0.35s ease;
	-moz-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

#header .navigation li {
	float: left;
	margin-left: 1px;
}

#header .navigation li a {
	color:#fff;
	font-family: 'Open Sans',arial,serif;
	font-size: 14px;
	font-weight:700;
	padding:5px 10px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
#header .navigation li a:hover { background:#000; color:#3dc0f1; }
#header .navigation li a.active { color:#3dc0f1; }

/* Slides
-------------------- */
.slide {
	background-color:#fff;
	background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
	height:100%;
	width:100%;
}

.slide .content { margin: 0 auto; padding: 165px 0; width: 63%; }
.slide .content.short { padding-bottom:55px; }

.slide .slide-bg { display:none; height:400px; width:400px; overflow:hidden; }
.slide.no-bg { background:#ffffff; }

.slide .section-header { text-align:center; }
.slide .section-header h2 { color:#212121; font-family: 'Oswald',arial,serif; font-size: 43px; font-weight:700; margin-bottom:15px; }
.slide .section-header p { color:#8b8b8b; font-family: 'Open Sans',arial,serif; font-size:13px; line-height:22px; }

/* Slide - Intro Layout
------------------------*/
.slide.intro-layout {}
.slide.intro-layout .content {
	margin:0 auto;
	padding-top:238px;
	width:69%;
}

.slide.intro-layout .intro-wrap {
	bottom: 0;
	height: 156px;
	left: 0;
	margin: auto;
	padding-bottom: 100px;
	padding-top: 100px;
	position: absolute;
	top: 0;
	width: 100%;
}

.slide.intro-layout h1 {
	color:#fff;
	font-family: 'Oswald',arial,serif;
	font-size: 72px;
	font-weight:normal;
	margin-bottom:15px;
	text-align:center;
	text-transform: uppercase;
}

.slide.intro-layout p {
	color:#ffffff;
	font-family:'Oswald', arial, serif;
	font-size:22px;
	font-weight:300;
	margin-bottom: 16px;
	text-align:center;
	text-transform:uppercase;
}


.slide.intro-layout .intro-wrap .cta { text-align:center; }

.slide.intro-layout .intro-wrap a {
	background:#666;
	color:#ffffff;
	display:inline-block;
	font-family:'Oswald', arial, serif;
	font-size:15px;
	font-weight: 500;
	margin: 0 3px 7px 0;
	padding: 16px 11px;
	text-align:center;
	width: 120px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


.slide.intro-layout .intro-wrap a.buy { background:#3dc0f1; }

/* Slide - Classic Layout
---------------------------*/
.slide.classic-layout { height:auto; }

/* Slide - Info Layout
---------------------------*/
.slide.info-layout { height:auto; }

/* Slide - Image Layout
------------------------*/
.slide.layout-image { background-position: 50% 0; height: 391px; overflow: hidden; }
.slide.layout-image.parallax { 
	background-attachment: fixed; 
	background-position: 50% 0; 
	background-repeat: no-repeat; 
	background-size: cover; 
	overflow: hidden; 
}

/* Slide - Collage Layout
------------------------*/
.slide.collage-layout { height:auto; }
.slide.collage-layout .content { padding:0 0 165px; width:1255px; }

/* Slide - Carousel Layout
-----------------------------*/
.slide.carousel-layout { height:auto; }
.slide.carousel-layout .content { padding:0 0 165px; width:1060px; }

.carousel-view .post-text p { line-height: 17px; }

/* Slide - Large Layout
-----------------------------*/
.slide.large-layout { height:auto; }
.slide.large-layout .content { padding:0 0 165px; position:relative; overflow:hidden; width:100%; }

/* Slide - Infinity Layout
----------------------------*/
.slide.infinity-layout { height:auto; }
.slide.infinity-layout .content { padding:0 0 225px; width:100%; }

/* Slide - Contest Layout
----------------------------*/
.slide.contest-layout { height:auto; }
.slide.contest-layout .content { margin:0 auto; padding:0 0 225px; width:60%; }

/* Footer
-----------------*/
#footer { background:#000; color:#888; }
#footer .inner { margin:0 auto; padding:50px 0; text-align:center; width:1000px; }

#footer .top { 
	background:#000 url("images/photo-tile-bg.jpg") repeat; 
	font-family: 'Open Sans',arial,serif;
	padding: 20px 0; 
	-webkit-animation: bgAnimate 25s infinite linear;
	-moz-animation: bgAnimate 25s infinite linear;
	-ms-animation: bgAnimate 25s infinite linear;
	-o-animation: bgAnimate 25s infinite linear;
	animation: bgAnimate 25s infinite linear;
}

@-webkit-keyframes bgAnimate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@-moz-keyframes bgAnimate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@-ms-keyframes bgAnimate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@-o-keyframes bgAnimate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@keyframes bgAnimate {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

#footer .top .inner { padding:190px 0 160px; }
	
#footer .top h4 { font-size:14px; margin-bottom: 16px; text-align:center; }
#footer .top h3 { margin-bottom: 40px; text-align:center; }
#footer .top h3 a { color:#fff; font-size:36px; }

#footer .top .action-btn { 
	background:#fff;
	display: inline-block;
	padding: 15px 20px;
	margin-bottom: 30px;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	line-height: 1em;
	letter-spacing: 0.1em;
	background: #3dc0f1;
	border: 2px solid #3dc0f1;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	padding:20px 60px; 
}

#footer .top .action-btn:hover { background:#75d8fd; border-color:#75d8fd; }

#footer .bottom { background:#222222; }
#footer .bottom .col1 { float:left; }
#footer .bottom .col2 { float:right; }

#footer .bottom p { font-family: "Prata",serif; font-size:12px; }
#footer .bottom p a { color:#fff; }

/* Customization Bar
---------------------------*/
.ig-controller {
	background: #fff;
	position: fixed;
	right: 0px;
	top: 19%;
	width: 250px;
	z-index: 100000;
	opacity: 1;
	transition: opacity .55s ease-in-out;
	-moz-transition: opacity .55s ease-in-out;
	-webkit-transition: opacity .55s ease-in-out;
}

.ig-controller.hidden { opacity: 0; }

.ig-controller_container {
    border: 1px solid rgba(23, 24, 26, 0.15);
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    box-shadow: 0 2px 9px 2px rgba(0, 0, 0, 0.14);
}

.ig-controller_container .intro {
    background-image: -moz-linear-gradient(center top , #fff 0%, #f7f4f4 100%);
	background-image: -ms-linear-gradient(top, #fff, #f7f4f4);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f7f4f4));
	background-image: -webkit-linear-gradient(top, #fff, #f7f4f4);
	background-image: -o-linear-gradient(top, #fff, #f7f4f4);
	background-image: -moz-linear-gradient(top, #fff, #f7f4f4);
	background-image: linear-gradient(top, #fff, #f7f4f4);
    color: #000;
    font-size: 15px;
	font-family: 'Oswald',arial,serif;
    height: 44px;
    line-height: 44px;
    text-align: center;
}

.ig-controller_container .box-title {
	border-top: 1px solid rgba(23, 24, 26, 0.15);
	color:#222;
	font-family: "Open Sans",sans-serif;
    font-size: 12px;
	padding:20px 20px 10px 20px;
}

.ig-controller_container .outro {
	background-image: -moz-linear-gradient(center top , #fff 0%, #f7f4f4 100%);
	background-image: -ms-linear-gradient(top, #fff, #f7f4f4);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f7f4f4));
	background-image: -webkit-linear-gradient(top, #fff, #f7f4f4);
	background-image: -o-linear-gradient(top, #fff, #f7f4f4);
	background-image: -moz-linear-gradient(top, #fff, #f7f4f4);
	background-image: linear-gradient(top, #fff, #f7f4f4);
	border-top: 1px solid rgba(23, 24, 26, 0.15); 
	padding-bottom:18px;
}

.ig-controller_container .box-title a { 
	color:#fff; 
	border:solid 1px;
	border-color: #04C #04C #002A80;
	display:block; 
	font-weight:normal; 
	padding:6px 0px;	
	margin:0 auto 3px; 
	text-align:center; 
	width:80%; 
}

.ig-controller_container .group { padding: 0px 17px 17px 17px; }
.ig-controller_container .group a { cursor:pointer; display:inline-block; height:30px; width:30px; }
.ig-controller_container .group a.ig-business { background:#3dc0f1; }
.ig-controller_container .group a.ig-business.active {
	-webkit-box-shadow: inset 0px 0px 0px 3px #1896C5;
	-moz-box-shadow: inset 0px 0px 0px 3px #1896C5;
	box-shadow: inset 0px 0px 0px 3px #1896C5;
}
.ig-controller_container .group a.ig-dream { background:#5A1A77; }
.ig-controller_container .group a.ig-dream.active {
	-webkit-box-shadow: inset 0px 0px 0px 3px #9d4bc1;
	-moz-box-shadow: inset 0px 0px 0px 3px #9d4bc1;
	box-shadow: inset 0px 0px 0px 3px #9d4bc1;
}
.ig-controller_container .group a.ig-success { background:#58a959; }
.ig-controller_container .group a.ig-success.active {
	-webkit-box-shadow: inset 0px 0px 0px 3px #147F15;
	-moz-box-shadow: inset 0px 0px 0px 3px #147F15;
	box-shadow: inset 0px 0px 0px 3px #147F15;
}
.ig-controller_container .group a.ig-pinterest { background:#cd2129; }
.ig-controller_container .group a.ig-pinterest.active {
	-webkit-box-shadow: inset 0px 0px 0px 3px #9d030a;
	-moz-box-shadow: inset 0px 0px 0px 3px #9d030a;
	box-shadow: inset 0px 0px 0px 3px #9d030a;
}
.ig-controller_container .group a.ig-ego { background:#ff009c; }
.ig-controller_container .group a.ig-ego.active {
	-webkit-box-shadow: inset 0px 0px 0px 3px #a50065;
	-moz-box-shadow: inset 0px 0px 0px 3px #a50065;
	box-shadow: inset 0px 0px 0px 3px #a50065;
}
.ig-controller_container .group a.ig-fashion { background:#000; }
.ig-controller_container .group a.ig-fashion.active {
	-webkit-box-shadow: inset 0px 0px 0px 3px #7e7e7e;
	-moz-box-shadow: inset 0px 0px 0px 3px #7e7e7e;
	box-shadow: inset 0px 0px 0px 3px #7e7e7e;
}

.ig-controller_container form {}
.ig-controller_container form label { color:#fff; }
.ig-controller_container form input.text {
	color: #777;
	font-family: "Open Sans",sans-serif;
	font-size: 11px;
	height: 15px;
	padding: 6px;
	width: 117px;
}

.ig-controller_container form select { 
	font-size:12px; 
	padding: 2px;
	line-height: 28px;
	height: 28px;
	vertical-align: middle;
	width: 134px; 
}

.ig-controller_container form input.submit { display: inline-block; }

.ig-controller-toggle {
	background: #FFF url("images/cog.png") no-repeat 10px 13px;
	background-size:30px 30px;
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-radius: 5px 0px 0px 5px;
	cursor: pointer;
	height: 56px;
	right: 249px;
	margin-top: 0;
	opacity: 1;
	position: absolute;
	top: 59px;
	width: 52px;
	-moz-border-radius: 5px 0px 0px 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
}

.ig-glyph {
	background: url("images/ig-glyph.png") no-repeat;
	background-size: 100%;
	display: block;
	height: 85px;
	width: 180px;
	margin: 20px auto;
	clear: both;
	opacity: 1;
	transition: opacity .65s ease-in-out;
	-moz-transition: opacity .65s ease-in-out;
	-webkit-transition: opacity .65s ease-in-out;
}
.ig-glyph.on{ opacity: 0.1; }

/* Theme Accents
--------------------------*/
/* Dream */
.ig-dream #header .navigation li a:hover { color:#74159D; }
.ig-dream #header .navigation li a.active { color:#74159D; }
.ig-dream .slide.intro-layout .intro-wrap a { border: #56007B solid 1px; background:#74159D; color: #fff; font-weight: 400; }
.ig-dream .classic-view .instagram-photo.image { background:#74159D; }
.ig-dream .classic-view .instagram-content p a { color:#74159D; }
.ig-dream .collage-view .overlay { color:#74159D; }
.ig-dream .collage-view .overlay .btn { background:#74159D; }
.ig-dream .carousel-view .post-meta { background:#74159D; }
.ig-dream .carousel-view .post-meta .meta { color:#C931EA; }
.ig-dream .infinity-view .profile span { color:#74159D; }
.ig-dream .large-view .navigator a { color:#74159D; }
.ig-dream #footer .top .action-btn { background:#74159D; border-color:#74159D; }
.ig-dream .controls .jcarousel-control-prev, 
.ig-dream .controls .jcarousel-control-next { border-color:#74159D; }
.ig-dream .controls .jcarousel-control-prev:hover, 
.ig-dream .controls .jcarousel-control-next:hover { background-color:#74159D; }

/* Success */
.ig-success #header .navigation li a:hover { color:#007B02; }
.ig-success #header .navigation li a.active { color:#007B02; }
.ig-success .slide.intro-layout .intro-wrap a { border: solid 1px #106711; background:#007B02; color: #fff; font-weight: 400; }
.ig-success .classic-view .instagram-photo.image { background:#007B02; }
.ig-success .classic-view .instagram-content p a { color:#007B02; }
.ig-success .collage-view .overlay { color:#007B02; }
.ig-success .collage-view .overlay .btn { background:#007B02; }
.ig-success .carousel-view .post-meta { background:#007B02; }
.ig-success .carousel-view .post-meta .meta { color:#85E57A; }
.ig-success .infinity-view .profile span { color:#007B02; }
.ig-success .large-view .navigator a { color:#007B02; }
.ig-success #footer .top .action-btn { background:#007B02; border-color:#007B02; }
.ig-success .controls .jcarousel-control-prev, 
.ig-success .controls .jcarousel-control-next { border-color:#007B02; }
.ig-success .controls .jcarousel-control-prev:hover, 
.ig-success .controls .jcarousel-control-next:hover { background-color:#007B02; }

/* Pinterest */
.ig-pinterest #header .navigation li a:hover { color:#cd2129; }
.ig-pinterest #header .navigation li a.active { color:#cd2129; }
.ig-pinterest .slide.intro-layout .intro-wrap a { border: solid 1px #A91920; background: #cd2129; color: #fff; font-weight: 400; }
.ig-pinterest .classic-view .instagram-photo.image { background:#cd2129; }
.ig-pinterest .classic-view .instagram-content p a { color:#cd2129; }
.ig-pinterest .collage-view .overlay { color:#cd2129; }
.ig-pinterest .collage-view .overlay .btn { background:#cd2129; }
.ig-pinterest .carousel-view .post-meta { background:#cd2129; }
.ig-pinterest .carousel-view .post-meta .meta { color:#FF8787; }
.ig-pinterest .infinity-view .profile span { color:#cd2129; }
.ig-pinterest .large-view .navigator a { color:#cd2129; }
.ig-pinterest #footer .top .action-btn { background:#cd2129; border-color:#cd2129; }
.ig-pinterest .controls .jcarousel-control-prev, 
.ig-pinterest .controls .jcarousel-control-next { border-color:#cd2129; }
.ig-pinterest .controls .jcarousel-control-prev:hover, 
.ig-pinterest .controls .jcarousel-control-next:hover { background-color:#cd2129; }

/* Ego */
.ig-ego #header .navigation li a:hover { color:#ff009c; }
.ig-ego #header .navigation li a.active { color:#ff009c; }
.ig-ego .slide.intro-layout h1 { color:#fff; }
.ig-ego .slide.intro-layout .intro-wrap a { border: solid 1px #D72592; background:#ff009c; color: #fff; font-weight: 400; }
.ig-ego .classic-view .instagram-photo.image { background:#ff009c; }
.ig-ego .classic-view .instagram-content p a { color:#ff009c; }
.ig-ego .collage-view .overlay { color:#ff009c; }
.ig-ego .collage-view .overlay .btn { background:#ff009c; }
.ig-ego .carousel-view .post-meta { background:#880053; }
.ig-ego .carousel-view .post-meta .meta { color:#ff009c; }
.ig-ego .infinity-view .profile span { color:#ff009c; }
.ig-ego .large-view .navigator a { color:#ff009c; }
.ig-ego #footer .top .action-btn { background:#ff009c; border-color:#ff009c; }
.ig-ego .controls .jcarousel-control-prev, 
.ig-ego .controls .jcarousel-control-next { border-color:#000; }
.ig-ego .controls .jcarousel-control-prev:hover, 
.ig-ego .controls .jcarousel-control-next:hover { background-color:#ff009c; }

/* Fashion */
.ig-fashion #header .navigation li a:hover { color:#7e7e7e; }
.ig-fashion #header .navigation li a.active { color:#7e7e7e; }
.ig-fashion .slide.intro-layout h1 { background:#000; color:#fff; padding:12px 0; }
.ig-fashion .slide.intro-layout .intro-wrap a { border: solid 3px #000; background:none; color: #fff; font-weight: 400; }
.ig-fashion .classic-view .instagram-photo.image { background:#000; }
.ig-fashion .classic-view .instagram-content p a { color:#000; }
.ig-fashion .collage-view .overlay { color:#000; }
.ig-fashion .collage-view .overlay .btn { background:#000; }
.ig-fashion .carousel-view .post-meta { background:#000; }
.ig-fashion .carousel-view .post-meta .meta { color:#7e7e7e; }
.ig-fashion .infinity-view .profile span { color:#7e7e7e; }
.ig-fashion .large-view .navigator a { color:#000; }
.ig-fashion #footer .top .action-btn { background: #FFF; border-color: #FFFFFF; color: #000; }
.ig-fashion .controls .jcarousel-control-prev, 
.ig-fashion .controls .jcarousel-control-next { border-color:#000; }
.ig-fashion .controls .jcarousel-control-prev:hover, 
.ig-fashion .controls .jcarousel-control-next:hover { background-color:#000; }

/* Misc */
.carousel-view .post-text p { word-wrap: break-word; }
.fancybox-title a { color:#3897f0; }

/* Responsive Mobile
-----------------------------*/
/* Desktop */
@media screen and (max-width: 1255px) {}

/* Tablets */
@media screen and (max-width: 1100px) {

 	#header .inner { width: 900px; }
	#footer .inner { width:90%; }
}

/* iPad */
@media screen and (max-width: 900px) {
	
	#header .inner { width: 770px; }
	#header .navigation li a { font-size: 12px; }
}

/* iPhone */
@media screen and (max-width: 780px) {
	
	#header .inner { width: 80%; }
	#header .logo { float: none; }

	#header .btn-navbar {		
		background: url("images/mobile-nav.jpg") no-repeat;
		cursor: pointer;
		display: inline-block;
		float: none;
		height: 18px;
		position: absolute;
		right: 0;
		top: 13px;
		width: 24px;
	}
	
	#header ul.navigation {
		background: #000; 
		float:none; 
		height:0; 
		left: 0;
		margin: 0; 
		overflow:hidden;
		padding-top: 15px;
		position: fixed; 
		top: 47px;
		width: 100%;
	}
	#header ul.navigation.collapse { height: 1000px; margin-top: 15px; }
	#header ul.navigation li { border-top: 1px solid #191919; float: none; margin: 2px 0; padding: 12px 30px; }
	
	.slide.intro-layout h1 { font-size: 48px; line-height: 58px; }
	.slide.intro-layout p { font-size:17px; line-height: normal; }
	.slide .section-header h2 { font-size: 39px; line-height: 44px; }
	
	#footer .top h3 a { font-size: 21px; }
	#footer .bottom .col1 { float:none; margin-bottom: 14px; }
	#footer .bottom .col2 { float:none; }
	#footer .bottom p { line-height: initial; }
	
	.ig-controller, .ig-glyph { display:none; }
	
	.slide.layout-image.parallax { background-attachment:initial; }
}