/* CSS Document */
/*
Name: Instagram Downloader 2017
Description: Instagram Image/Video Downloader with Multiple Content posts
Version: 1.0
Author: hardikforall
*/
/* ---------------------------------------- */
/* TABLE OF CONTENTS
/* ---------------------------------------- */
/* 01 - General & Basic Styles */
/* 02 - Menu */
/* 03 - Navbar */
/* 04 - content */
/* 05 - footer */
/*-----------General & Basic Styles------------*/
body,
html {
margin: 0;
padding: 0;
background: #343d46;
}
* {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #262626;
}
a:hover {
cursor: pointer;
cursor: hand;
text-decoration: none;
}
/*-----------Menu------------*/
{
margin: 0;
padding: 0;
}
* {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #cc3366;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
/*-----------Navbar------------*/
.navscroll {
-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
}
.navbar a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar a i {
font-size: 45px;
height: 43px;
width: 43px;
text-align: center;
margin-right: 10px;
border-radius: 6px;
line-height: 42px;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.instaanim {
-webkit-transform: rotate(360deg) scale(1.1);
-ms-transform: rotate(360deg) scale(1.1);
transform: rotate(360deg) scale(1.1);
color: white;
margin-right: 0px;
background: -webkit-gradient(linear, right top, left bottom, from(#4c68d7), color-stop(#8a3ab9), color-stop(#cd486b), color-stop(#fb8750), to(#FF9800));
background: -webkit-linear-gradient(right top, #4c68d7, #8a3ab9, #cd486b, #fb8750, #FF9800);
background: -o-linear-gradient(right top, #4c68d7, #8a3ab9, #cd486b, #fb8750, #FF9800);
background: linear-gradient(to left bottom, #4c68d7, #8a3ab9, #cd486b, #fb8750, #FF9800);
}
.shrink {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.lil-bar {
background: #fff;
position: fixed;
bottom: 15px;
right: 15px;
border: solid 1px #c8d7e1;
border-radius: 3px;
height: 35px;
line-height: 1;
z-index: 50000;
-webkit-transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-o-transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
/*-----------content------------*/
.header {
margin-top: 150px;
margin-bottom: 50px;
}
.card {
background-color: #ffffff;
border: 3px solid #cc3366;
border-radius: 10px;
padding: 10px 0;
}
.card h1 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 25px;
line-height: 40px;
margin: 0 40px 10px;
text-align: center;
font-weight: 500;
}
.card h2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 20px;
margin: 0 40px 10px;
text-align: center;
color: #999;
font-weight: 600;
}
.inputform {
margin-top: 15px;
margin-bottom: 15px;
}
.instinput {
width: 100%;
border: 1px solid #efefef;
-webkit-box-flex: 1;
-webkit-flex: 1 0 0;
-ms-flex: 1 0 0;
flex: 1 0 0px;
outline: none;
overflow: hidden;
padding: 9px 0 7px 8px;
text-overflow: ellipsis;
background: #fafafa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
margin-top: 10px;
}
.instinput:focus {
border: 1px solid #b2b2b2;
}
.instabutton {
cursor: pointer;
-webkit-appearance: none;
border-radius: 3px;
border-style: solid;
border-width: 1px;
font-size: 14px;
font-weight: 600;
line-height: 30px;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
background: #cc3366;
border-color: #cc3366;
color: #fff;
margin-top: 10px;
}
.advertisement {
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
padding: 10px 0;
}
.advertisement p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 20px;
vertical-align: middle;
line-height: 90px;
text-align: center;
font-weight: 500;
}
.resultdiv {
margin-top: 25px;
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
padding: 10px 0;
}
.profileheader {
height: 55px;
border-bottom: 1px solid #efefef;
}
.profilepic {
height: 40px;
width: 40px;
margin-left: 15px;
position: absolute;
}
.profilename,
.username {
margin-left: 65px;
margin-top: 10px;
}
.profilename {
font-weight: bolder;
color: #3d3b3b;
}
.downloadimage {
width: 100%;
height: auto;
}
.downloadbutton {
cursor: pointer;
-webkit-appearance: none;
border-radius: 3px;
border-style: solid;
border-width: 1px;
font-size: 14px;
font-weight: 300;
line-height: 30px;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: #cc3366;
border-color: #cc3366;
color: #fff;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 30px;
padding-left: 5px;
padding-right: 5px;
}
.downloadbutton:hover {
color: #fff;
}
.downloadbutton:focus {
color: #fff;
-webkit-appearance: none;
}
.resultdiv {
display: none;
margin-bottom: 50px;
}
/*-----------Footer------------*/
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 35px;
text-align: center;
color: #CCC;
background-color: #fff;
border-top: 1px solid #e6e6e6;
}
footer p {
padding: 10.5px;
margin: 0px;
line-height: 100%;
}