.btn { display: inline-block; font-family: helvetica,arial; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: #333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: whiteSmoke; background-image: -moz-linear-gradient(top, white, #E6E6E6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6)); background-image: -webkit-linear-gradient(top, white, #E6E6E6); background-image: -o-linear-gradient(top, white, #E6E6E6); background-image: linear-gradient(to bottom, white, #E6E6E6); background-repeat: repeat-x; border: 1px solid #CCC; border-color: #E6E6E6 #E6E6E6 #BFBFBF; border-bottom-color: #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn-inverse { color: white; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006DCC; background-image: -moz-linear-gradient(top, #08C, #04C); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#04C)); background-image: -webkit-linear-gradient(top, #08C, #04C); background-image: -o-linear-gradient(top, #08C, #04C); background-image: linear-gradient(to bottom, #08C, #04C); background-repeat: repeat-x; border-color: #04C #04C #002A80; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn:hover { color:#fff; } .clear { clear:both; } /* CORE -------------------------*/ .instagram-photo { display: inline-block; height: auto; width: 195px; } /* Classic View */ .instagram-element .instagram-photo { cursor:pointer; float:left; line-height:0; margin:0; overflow:hidden; position:relative; width:20%; } .instagram-element .instagram-photo.image { background-color: #3dc0f1; } .instagram-element .instagram-photo.video { background-color: #cc0000; } .instagram-element .instagram-photo img { opacity: 1; width:100%; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; transition: all 0.5s ease; } .instagram-element .instagram-photo:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0.1; } .instagram-element .instagram-photo .element-meta { color: #fff; filter: alpha(opacity=0); font-family: 'Oswald',arial,serif; font-size: 20px; font-weight: 700; left: 0; line-height: 1; opacity: 0; position: absolute; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); text-transform:uppercase; top: 10%; width: 100%; } .instagram-element .instagram-photo .element-meta span { display: block; font-size: 10px; font-weight: 200; margin-top:10px; } .instagram-element .instagram-photo .icon { display:none; height:29px; position:absolute; right:18px; text-indent:-9999px; top:18px; width:26px; } .instagram-element .instagram-photo:hover .icon { display:block; } .instagram-element .instagram-photo.video .icon { background:url("images/video-icon.png") no-repeat; } .instagram-element .instagram-photo.image .icon { background:url("images/image-icon.png") no-repeat; } /* User List */ .instagram-user-all { background: none; cursor:pointer; display: inline-block; float: left; line-height: 0; width: 5%; } .instagram-user-all img { height:auto; width:100%; } .instagram-user-all:hover img { opacity:.5; } /* Load More */ .seachInstagramLoadMoreContainer { clear: both; text-align:center; } .seachInstagramLoadMore { margin-top: 20px; } /* Fix for landscape photos */ body .instagram-photo img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); -webkit-backface-visibility: hidden; } body .instagram-element .instagram-photo:hover img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } body .instagram-element .instagram-media img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); width:100%; } /* Fancybox Information */ .fancybox-nav { height:90%; width: 20%; } .fancybox-skin .username-ui { font-family: 'Oswald',arial,serif !important; font-size: 20px !important; font-weight: 700 !important; } .fancybox-skin .date-ui { color:#a9abae; display:block; font-weight: 700; margin-bottom:3px; text-transform:uppercase; } .fancybox-skin .description-ui {} .fancybox-skin .likes-ui {} .fancybox-skin .comments-ui {} .fancybox-skin .location-ui {} .fancybox-skin .link-ui {} /* Responsive Mobile -----------------------------*/ /* Tablets */ @media screen and (max-width: 1100px) { /* Classic View */ .instagram-element .instagram-stage { width:90%; } .instagram-element .instagram-media { height: auto; width:50%; } .instagram-element .instagram-content { width:40%; } } /* iPad */ @media screen and (max-width: 900px) {} /* iPhone */ @media screen and (max-width: 780px) { /* Classic View */ .instagram-element .instagram-photo {} .instagram-element .instagram-photo:hover img { opacity: 1; } .instagram-element .instagram-photo.image .icon, .instagram-element .instagram-photo .element-meta { display:none; } .instagram-element .instagram-stage { padding: 100px 0; } .instagram-element .instagram-media { background:none; float:none; height: auto; margin:0 auto; width:90%; } .instagram-element .instagram-media img { height:auto; width:100%; } .instagram-element .instagram-content { float:none; margin:0 auto; width:90%; } .instagram-element .instagram-content ul { margin-bottom: 60px; } } /* Demo Options */ .instagram-element.col-9 .instagram-photo .element-meta, .instagram-element.col-10 .instagram-photo .element-meta { font-size: 16px; } .instagram-element.gutter-5 .instagram-photo { margin:5px; } .instagram-element.gutter-10 .instagram-photo { margin:10px; } .instagram-element.gutter-15 .instagram-photo { margin:15px; } .instagram-element.gutter-20 .instagram-photo { margin:20px; } .instagram-element.gutter-25 .instagram-photo { margin:25px; } .instagram-element.gutter-30 .instagram-photo { margin:30px; } .instagram-element.gutter-35 .instagram-photo { margin:35px; } .instagram-element.gutter-40 .instagram-photo { margin:40px; } .instagram-element.gutter-45 .instagram-photo { margin:45px; } .instagram-element.gutter-50 .instagram-photo { margin:50px; } .instagram-element.widget-100 { width:100%; } .instagram-element.widget-75 { width:75%; } .instagram-element.widget-50 { width:50%; } .instagram-element.widget-25 { width:25%; } /* Theme Accents --------------------------*/ /* Dream */ .ig-dream #sidebar-wrapper { background:#431C54; } .ig-dream .sidebar-nav > .sidebar-brand { background:#2D0040; } .ig-dream .sidebar-nav li a { color: #ccc; } .ig-dream .element .instagram-photo.image { background:#74159D; } .ig-dream .element .instagram-content p a { color:#74159D; } .ig-dream .fancybox-skin .username-ui, .ig-dream .fancybox-skin .link-ui { color:#74159D; } /* Success */ .ig-success #sidebar-wrapper { background:#072905; } .ig-success .sidebar-nav > .sidebar-brand { background:#064603; } .ig-success .sidebar-nav li a { color: #ccc; } .ig-success .element .instagram-photo.image { background:#007B02; } .ig-success .element .instagram-content p a { color:#007B02; } .ig-success .fancybox-skin .username-ui, .ig-success .fancybox-skin .link-ui { color:#007B02; } /* Pinterest */ .ig-pinterest #sidebar-wrapper { background:#630B0B; } .ig-pinterest .sidebar-nav > .sidebar-brand { background:#AB0512; } .ig-pinterest .sidebar-nav li a { color: #ccc; } .ig-pinterest .element .instagram-photo.image { background:#cd2129; } .ig-pinterest .element .instagram-content p a { color:#cd2129; } .ig-pinterest .fancybox-skin .username-ui, .ig-pinterest .fancybox-skin .link-ui { color:#cd2129; } /* Ego */ .ig-ego #sidebar-wrapper { background:#290526; } .ig-ego .sidebar-nav > .sidebar-brand { background:#5B045D; } .ig-ego .sidebar-nav li a { color: #ccc; } .ig-ego .element .instagram-photo.image { background:#ff009c; } .ig-ego .element .instagram-content p a { color:#ff009c; } .ig-ego .fancybox-skin .username-ui, .ig-ego .fancybox-skin .link-ui { color:#ff009c; } /* Fashion */ .ig-fashion #sidebar-wrapper { background:#000; } .ig-fashion .sidebar-nav > .sidebar-brand { background:#000; } .ig-fashion .sidebar-nav li a { color: #ccc; } .ig-fashion .element .instagram-photo.image { background:#000; } .ig-fashion .element .instagram-content p a { color:#000; } .ig-fashion .fancybox-skin .username-ui, .ig-fashion .fancybox-skin .link-ui { color:#000; } /* Theme Accents --------------------------*/ /* Dream */ .ig-dream #sidebar-wrapper { background:#431C54; } .ig-dream .sidebar-nav > .sidebar-brand { background:#2D0040; } .ig-dream .sidebar-nav li a { color: #ccc; } .ig-dream .element .instagram-photo.image { background:#74159D; } .ig-dream .element .instagram-content p a { color:#74159D; } .ig-dream .username-ui, .ig-dream .fancybox-skin .link-ui { color:#74159D; } /* Success */ .ig-success #sidebar-wrapper { background:#072905; } .ig-success .sidebar-nav > .sidebar-brand { background:#064603; } .ig-success .sidebar-nav li a { color: #ccc; } .ig-success .element .instagram-photo.image { background:#007B02; } .ig-success .element .instagram-content p a { color:#007B02; } .ig-success .fancybox-skin .username-ui, .ig-success .fancybox-skin .link-ui { color:#007B02; } /* Pinterest */ .ig-pinterest #sidebar-wrapper { background:#630B0B; } .ig-pinterest .sidebar-nav > .sidebar-brand { background:#AB0512; } .ig-pinterest .sidebar-nav li a { color: #ccc; } .ig-pinterest .element .instagram-photo.image { background:#cd2129; } .ig-pinterest .element .instagram-content p a { color:#cd2129; } .ig-pinterest .username-ui, .ig-pinterest .fancybox-skin .link-ui { color:#cd2129; } /* Ego */ .ig-ego #sidebar-wrapper { background:#290526; } .ig-ego .sidebar-nav > .sidebar-brand { background:#5B045D; } .ig-ego .sidebar-nav li a { color: #ccc; } .ig-ego .element .instagram-photo.image { background:#ff009c; } .ig-ego .element .instagram-content p a { color:#ff009c; } .ig-ego .fancybox-skin .username-ui, .ig-ego .fancybox-skin .link-ui { color:#ff009c; } /* Fashion */ .ig-fashion #sidebar-wrapper { background:#000; } .ig-fashion .sidebar-nav > .sidebar-brand { background:#000; } .ig-fashion .sidebar-nav li a { color: #ccc; } .ig-fashion .element .instagram-photo.image { background:#000; } .ig-fashion .element .instagram-content p a { color:#000; } .ig-fashion .fancybox-skin .username-ui, .ig-fashion .fancybox-skin .link-ui { color:#000; }