/*
   Script Made By ThemeFairy, 2017 @http://bit.ly/themefairy
*/
/* default styles */
:root {
   --black: #111111;
   --darkgray: #383838;
   --lightgray: #DDDDDD;
   --whitesmoke: #F5F5F5;
   --white: #FFFFFF;
   --main: #2E8ECE;
   --facebook: #23589A;
   --twitter: #2C70C3;
   --red: #E53935;
   --blue: #1E88E5;
   --green: #43A047;
   --darkpink: #D81B60;
   --darkblue: #3949AB;
   --purple: #8E24AA;
   --orange: #F4511E;
   --cadet: #536872;
   --yellow: #FDD835;
   --rgb-midnight: 51, 51, 102;
   --rgb-black: 0, 0, 0;
   --rgb-white: 255, 255, 255;
   --range-thumb-size: 20px;
   --range-track-size: 10px;
   --range-padding: 4px;
   --range-thumb-offset: -7px;
}

*, *:before, *:after {
   position: relative;
   font: inherit;
   line-height: inherit;
   color: inherit;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

*:focus {
   outline: 0;
}

html, body, div, h1, h2, p, label, canvas {
   display: block;
}

a, span, i, input, select, button {
   display: inline-block;
}

html, body {
   height: 100%;
}

body {
   font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
   word-break: break-word;
   color: var(--darkgray);
   background: var(--whitesmoke);
}

div {
   width: initial;
   overflow: hidden;
}

h1, h2, i, label {
   font-weight: bold;
   text-transform: capitalize;
}

h1, h2, p, a, span, label {
   line-height: 150%;
}

h1 {
   font-size: 2.25rem;
}

h2 {
   font-size: 1.875rem;
}

a {
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

input, select, button {
   width: 100%;
   padding: 10px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

input, select {
   background: rgba(var(--rgb-midnight), 0.075);
   border: 2px solid rgba(var(--rgb-midnight), 0.1);
}

input:focus, select:focus {
   background: rgba(var(--rgb-midnight), 0.1);
}

input[type="range"] {
   padding: var(--range-padding) 0;
   background: transparent;
   border: none;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
   height: var(--range-thumb-size);
   width: var(--range-thumb-size);
   margin-top: var(--range-thumb-offset);
   background: var(--main);
   border: none;
   cursor: pointer;
   border-radius: 100%;
   -webkit-border-radius: 100%;
   appearance: none;
   -webkit-appearance: none;
}

input[type="range"]::-moz-range-thumb {
   height: var(--range-thumb-size);
   width: var(--range-thumb-size);
   margin-top: var(--range-thumb-offset);
   background: var(--main);
   border: none;
   cursor: pointer;
   border-radius: 100%;
   -moz-border-radius: 100%;
   appearance: none;
   -moz-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
   height: var(--range-track-size);
   background: rgba(var(--rgb-midnight), 0.075);
   border: 2px solid rgba(var(--rgb-midnight), 0.1);
   border-radius: 4px;
   -webkit-border-radius: 4px;
}

input[type="range"]::-moz-range-track {
   height: var(--range-track-size);
   background: rgba(var(--rgb-midnight), 0.075);
   border: 2px solid rgba(var(--rgb-midnight), 0.1);
   border-radius: 4px;
   -moz-border-radius: 4px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
   background: rgba(var(--rgb-midnight), 0.1);
}

input[type="range"]:focus::-moz-range-track {
   background: rgba(var(--rgb-midnight), 0.1);
}

button {
   cursor: pointer;
   font-weight: bold;
   text-align: center;
   border: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding: 8px;
   color: var(--white);
}



/* reuseable classes */
.row {
   padding: 0;
   margin: 0;
}

.row,
.row:after {
   clear: both;
   zoom: 1;
}

.row:before,
.row:after {
   content: '';
   display: table;
}

.row > * {
   float: left;
}

.row > .col1 {
   width: 8.33%;
}

.row > .col2 {
   width: 16.66666%;
}

.row > .col3 {
   width: 24.99%;
}

.row > .col4 {
   width: 33.33%;
}

.row > .col5 {
   width: 33.33%;
}

.row > .col6 {
   width: 50%;
}

.row > .col7 {
   width: 58.333%;
}

.row > .col8 {
   width: 66.66666664%;
}

.row > .col9 {
   width: 74.999997%;
}

.row > .col10 {
   width: 83.33%;
}

.row > .col11 {
   width: 91.666663%;
}

.row > .col12 {
   width: 100%;
}

.container {
   width: 80%;
   max-width: 1200px;
   margin: 0 auto;
}

.vertical-align {
   display: flex;
   display: -webkit-flex;
   display: -ms-flexbox;
   align-items: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
}

.hidden {
   display: none;
}



/* header styles */
#header {
   padding: 20px 0;
   background: var(--main);
}

#ig-logo > a {
   font-size: 1.25rem;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--white);
   margin: 0 -2px;
}

#ig-logo > a > span {
   margin: 2px;
}

#ig-logo > a > span:nth-of-type(1) {
   background: var(--white);
   color: var(--main);
   padding: 2px 8px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#ig-share > div {
   float: right;
   margin: 0 -8px;
}

#ig-share > div > a {
   float: left;
   font-weight: bold;
   text-decoration: none;
   font-size: 0.875rem;
   padding: 10px 14px;
   margin: 0 8px;
   color: var(--white);
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#ig-share > div > a:nth-of-type(1) {
   background: var(--facebook);
}

#ig-share > div > a:nth-of-type(2) {
   background: var(--twitter);
}

#ig-share > div > a:nth-of-type(1):hover {
   color: var(--facebook);
}

#ig-share > div > a:nth-of-type(2):hover {
   color: var(--twitter);
}

#ig-share > div > a:hover {
   background: var(--white);
}



/* hero styles */
#hero {
   padding: 100px 0 180px 0;
   color: var(--white);
   background: var(--main);
}

#hero:after {
   content: '';
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 80px;
   background-image: url('../img/hero.svg');
   background-position: bottom left;
   background-size: 100% 100%;
}

#hero > div > div > p {
   font-size: 1.125rem;
   opacity: 0.75;
   margin: 10px 0 0 0;
}



/* main styles */
#main > div {
   padding: 50px 0;
   border-bottom: 1px solid var(--lightgray);
}

#main > div:last-of-type {
   border-bottom: none;
}



/* sort option styles */
#ig-sort-options > div {
   left: -1%;
   right: -1%;
}

#ig-sort-options > div > div {
   padding: 1%;
}

#ig-sort-options > div > div > i {
   display: block;
   font-size: 1.25rem;
   text-align: center;
   cursor: pointer;
}

#ig-sort-options > div > div > i.active,
#ig-sort-options > div > div > i:hover {
   color: var(--main);
}



/* icon list styles */
#ig-icon-list > div {
   left: -1%;
   right: -1%;
}

#ig-icon-list > div > div {
   padding: 1%;
}

#ig-icon-list > div > div > a {
   width: 100%;
   padding: 50% 0;
   color: var(--white);
   text-decoration: none;
   overflow: hidden;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
}

#ig-icon-list > div > div:nth-of-type(9n+1) > a {
   background: var(--red);
}

#ig-icon-list > div > div:nth-of-type(9n+2) > a {
   background: var(--blue);
}

#ig-icon-list > div > div:nth-of-type(9n+3) > a {
   background: var(--green);
}

#ig-icon-list > div > div:nth-of-type(9n+4) > a {
   background: var(--darkpink);
}

#ig-icon-list > div > div:nth-of-type(9n+5) > a {
   background: var(--darkblue);
}

#ig-icon-list > div > div:nth-of-type(9n+6) > a {
   background: var(--purple);
}

#ig-icon-list > div > div:nth-of-type(9n+7) > a {
   background: var(--orange);
}

#ig-icon-list > div > div:nth-of-type(9n+8) > a {
   background: var(--cadet);
}

#ig-icon-list > div > div:nth-of-type(9n+9) > a {
   background: var(--yellow);
}

#ig-icon-list > div > div > a > span,
#ig-icon-list > div > div > a > i,
#ig-icon-list > div > div > a > i:after {
   position: absolute;
   display: block;
   width: 100%;
   height: inherit;
   text-align: center;
}

#ig-icon-list > div > div > a > span {
   top: 0;
   left: 0;
   padding: 5%;
   font-size: 0.938rem;
   font-weight: bold;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

#ig-icon-list > div > div > a > i {
   top: 50%;
   left: 0;
   font-size: 3.125rem;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

#ig-icon-list > div > div:hover > a > i {
   font-size: 3.90625rem;
}

#ig-icon-list > div > div > a > i:after {
   top: 0;
   left: 0;
   content: attr(data-icon);
   color: transparent;
   opacity: 0.2;
   z-index: -1;
   text-shadow: 1px 1px 0 var(--black),
   2px 2px 0 var(--black),
   3px 3px 0 var(--black),
   4px 4px 0 var(--black),
   5px 5px 0 var(--black),
   6px 6px 0 var(--black),
   7px 7px 0 var(--black),
   8px 8px 0 var(--black),
   9px 9px 0 var(--black),
   10px 10px 0 var(--black),
   11px 11px 0 var(--black),
   12px 12px 0 var(--black),
   13px 13px 0 var(--black),
   14px 14px 0 var(--black),
   15px 15px 0 var(--black),
   16px 16px 0 var(--black),
   17px 17px 0 var(--black),
   18px 18px 0 var(--black),
   19px 19px 0 var(--black),
   20px 20px 0 var(--black),
   21px 21px 0 var(--black),
   22px 22px 0 var(--black),
   23px 23px 0 var(--black),
   24px 24px 0 var(--black),
   25px 25px 0 var(--black),
   26px 26px 0 var(--black),
   27px 27px 0 var(--black),
   28px 28px 0 var(--black),
   29px 29px 0 var(--black),
   30px 30px 0 var(--black),
   31px 31px 0 var(--black),
   32px 32px 0 var(--black),
   33px 33px 0 var(--black),
   34px 34px 0 var(--black),
   35px 35px 0 var(--black),
   36px 36px 0 var(--black),
   37px 37px 0 var(--black),
   38px 38px 0 var(--black),
   39px 39px 0 var(--black),
   40px 40px 0 var(--black),
   41px 41px 0 var(--black),
   42px 42px 0 var(--black),
   43px 43px 0 var(--black),
   44px 44px 0 var(--black),
   45px 45px 0 var(--black),
   46px 46px 0 var(--black),
   47px 47px 0 var(--black),
   48px 48px 0 var(--black),
   49px 49px 0 var(--black),
   50px 50px 0 var(--black),
   51px 51px 0 var(--black),
   52px 52px 0 var(--black),
   53px 53px 0 var(--black),
   54px 54px 0 var(--black),
   55px 55px 0 var(--black),
   56px 56px 0 var(--black),
   57px 57px 0 var(--black),
   58px 58px 0 var(--black),
   59px 59px 0 var(--black),
   60px 60px 0 var(--black),
   61px 61px 0 var(--black),
   62px 62px 0 var(--black),
   63px 63px 0 var(--black),
   64px 64px 0 var(--black),
   65px 65px 0 var(--black),
   66px 66px 0 var(--black),
   67px 67px 0 var(--black),
   68px 68px 0 var(--black),
   69px 69px 0 var(--black),
   70px 70px 0 var(--black),
   71px 71px 0 var(--black),
   72px 72px 0 var(--black),
   73px 73px 0 var(--black),
   74px 74px 0 var(--black),
   75px 75px 0 var(--black),
   76px 76px 0 var(--black),
   77px 77px 0 var(--black),
   78px 78px 0 var(--black),
   79px 79px 0 var(--black),
   80px 80px 0 var(--black),
   81px 81px 0 var(--black),
   82px 82px 0 var(--black),
   83px 83px 0 var(--black),
   84px 84px 0 var(--black),
   85px 85px 0 var(--black),
   86px 86px 0 var(--black),
   87px 87px 0 var(--black),
   88px 88px 0 var(--black),
   89px 89px 0 var(--black),
   90px 90px 0 var(--black),
   91px 91px 0 var(--black),
   92px 92px 0 var(--black),
   93px 93px 0 var(--black),
   94px 94px 0 var(--black),
   95px 95px 0 var(--black),
   96px 96px 0 var(--black),
   97px 97px 0 var(--black),
   98px 98px 0 var(--black),
   99px 99px 0 var(--black),
   100px 100px 0 var(--black);
}



/* icon form styles */
#ig-icon-form > div {
   left: -1%;
   right: -1%;
}

#ig-icon-form > div > * {
   padding: 0 1%;
}

#ig-icon-form > div > div:nth-of-type(1) > div {
   width: 100%;
   padding: 50% 0;
   background-color: var(--darkgray);
   background-repeat: repeat;
   background-image: url('../img/canvas.svg');
   overflow: hidden;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#ig-icon-form > div > div:nth-of-type(1) > div > canvas {
   position: absolute;
   top: 50%;
   left: 50%;
   max-width: 90%;
   border: 2px dashed rgba(var(--rgb-white), 0.5);
   background: rgba(var(--rgb-white), 0.1);
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
}

#ig-icon-form > div > div:nth-of-type(2) > div {
   width: 100%;
   margin: 10px 0;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
}

#ig-icon-form > div > div:nth-of-type(2) > div:first-of-type {
   margin-top: 0;
}

#ig-icon-form > div > div:nth-of-type(2) > div:last-of-type {
   margin-bottom: 0;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
}

#ig-icon-form > div > div:nth-of-type(2) > div:last-of-type > button {
   width: 49%;
   float: left;
   background: transparent;
   border: 2px solid;
   padding: 12px 4px;
   color: var(--main);
}

#ig-icon-form > div > div:nth-of-type(2) > div:last-of-type > button:nth-of-type(1) {
   margin-right: 1%;
}

#ig-icon-form > div > div:nth-of-type(2) > div:last-of-type > button:nth-of-type(2) {
   margin-left: 1%;
}

#ig-icon-form > div > div:nth-of-type(2) > div > span {
   display: block;
   padding: 14px 0;
   font-weight: bold;
   color: var(--white);
   text-align: center;
   background: var(--main);
   cursor: pointer;
}

#ig-icon-form > div > div:nth-of-type(2) > div > span:not(.active) + div {
   display: none;
}

#ig-icon-form > div > div:nth-of-type(2) > div > div {
   border: 1px solid var(--lightgray);
   border-top: none;
}

#ig-icon-form > div > div:nth-of-type(2) > div > div > div {
   margin: 20px;
}

#ig-icon-form > div > div:nth-of-type(2) > div > div > div:last-of-type {
   border-bottom: none;
}

#ig-icon-form > div > div:nth-of-type(2) > div > div > div > label {
   font-size: 0.875rem;
   padding: 0 0 10px 0;
}

#ig-icon-form > div > div:nth-of-type(2) > div > div > div > label:after {
   content: ' ' attr(data-value) attr(data-suffix);
   white-space: pre;
   display: inline-block;
   color: var(--green);
}



/* footer styles */
#footer {
   color: rgba(var(--rgb-white), 0.4);
   background: var(--black);
   border-top: 6px solid var(--main);
}

#footer > div:nth-of-type(1) {
   padding: 60px 0;
}

#footer > div:nth-of-type(1) > div > div > span,
#footer > div:nth-of-type(1) > div > div > div > * {
   display: block;
}

#footer > div:nth-of-type(1) > div > div > span {
   font-weight: bold;
   font-size: 1.25rem;
   color: var(--white);
}

#footer > div:nth-of-type(1) > div > div > div > * {
   margin: 10px 0;
   float: left;
   clear: left;
}

#footer > div:nth-of-type(1) > div > div > div > *:first-child {
   margin-top: 20px;
}

#footer > div:nth-of-type(1) > div > div > div > *:last-child {
   margin-bottom: 0;
}

#footer > div:nth-of-type(1) > div > div > div > a > i {
   width: 25px;
}

#footer > div:nth-of-type(2) {
   padding: 20px 0;
   background: rgba(var(--rgb-black), 0.1);
   border-top: 1px dashed rgba(var(--rgb-white), 0.1);
}



/* responsive styles */
@media (max-width: 800px) {
   #header > div > div,
   #hero > div > div,
   #footer > div,
   #ig-sort-options > div > div,
   #ig-icon-list > div > div.col2 > a > span {
      display: none;
   }

   #header > div > div:first-of-type,
   #hero > div > div:first-of-type,
   #footer > div:first-of-type,
   #footer > div:first-of-type > div > div,
   #ig-sort-options > div > div:first-of-type,
   #ig-icon-form > div > * {
      display: block;
      width: 100%;
   }

   #header > div > div:first-of-type,
   #hero > div > div:first-of-type,
   #footer > div:first-of-type,
   #ig-icon-list > div > div.col12 {
      text-align: center;
   }

   #ig-icon-list > div > div.col2 {
      width: 33.333333333333336%;
   }

   #footer > div:nth-of-type(1) {
      padding: 30px 0;
   }

   #footer > div:first-of-type > div > div {
      margin: 30px 0;
   }

   #footer > div:nth-of-type(1) > div > div > div > * {
      float: none;
      clear: none;
   }

   #ig-icon-form > div > div:nth-of-type(2) {
      margin-top: 50px;
   }
}