@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

body{ font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; font-size:14px; color:#4b4b4b; line-height:25px; letter-spacing: 0.02em }
a{ color: #000; outline: 0; }
a:hover{ color: #575757; }
img { -webkit-backface-visibility: hidden; max-width:100%; height:auto; }
video { background-size: cover; display: table-cell; vertical-align: middle; width: 100%; }
ul{ margin: 0px; padding:0px; }
input, textarea, select{ border: 1px solid #dfdfdf; letter-spacing: 1px; font-size: 11px;  padding: 8px 15px; width: 100%; margin: 0 0 20px 0; text-transform: uppercase; max-width: 100%; resize: none;}
input[type="submit"] { width: auto}
input[type="button"], input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="submit"] { -webkit-appearance: none;  border-radius: 0; }
input:focus, textarea:focus{ border: 1px solid #989898; }
input[type="submit"]:focus { border:none !important}
iframe { border: 0;}
ul { list-style: none outside none; }
ul, ol, dl {list-style-position: outside;}
::selection { color: #000; background:#dcdcdc; }
::-moz-selection { color:#000; background:#dcdcdc; }
::-webkit-input-placeholder { color: #999; text-overflow: ellipsis; }
:-moz-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
::-moz-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
:-ms-input-placeholder { color: #999 !important; text-overflow: ellipsis; opacity:1; }
::-webkit-scrollbar { width:12px }
::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3); box-shadow:inset 0 0 6px rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background:rgba(210,210,210,.8); -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5); -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.5); box-shadow:inset 0 0 6px rgba(0,0,0,.5); }
::-webkit-scrollbar-thumb:window-inactive { background:rgba(191,7,49,.4) }

/* other */
.text-center {text-align: center !important}
.no-padding {padding:0 !important}
.no-padding-left {padding-left:0 !important}
.no-padding-right {padding-right:0 !important}
.no-padding-top {padding-top:0 !important}
.no-margin {margin: 0 !important}
.no-margin-bottom {margin-bottom: 0 !important}
.text-uppercase {text-transform: uppercase !important}
.text-medium {font-size: 12px !important}
.text-small {font-size: 11px !important}
p {margin: 0 0 30px 0}
section {margin: 0 0 100px 0; min-height: 900px}
strong {font-weight: 600;}
.width-100 {width: 100% !important}
.margin-bottom-20 { margin-bottom: 35px !important}


/* letter spacing */
.no-letter-spacing { letter-spacing: 0px !important}
.letter-spacing-1 { letter-spacing:1px !important}
.letter-spacing-2 { letter-spacing:2px !important}
.letter-spacing-3 { letter-spacing:3px !important}
.letter-spacing-4 { letter-spacing:4px !important}
.letter-spacing-5 { letter-spacing:5px !important}
.letter-spacing-6 { letter-spacing:6px !important}

/* heading */
h1 {margin-top: 0; padding: 50px 0 25px 0; font-size: 30px; font-weight: 600}
h2 {font-size: 16px; padding-bottom: 15px; padding-top: 50px; font-weight: 600; margin: 0}
h3 {font-size: 14px; padding-bottom: 15px; padding-top: 50px; font-weight: 600; margin: 0}

/* scroll to top */
.scrollToTop, .scrollToTop:focus { display: none; font-weight: bold; height: auto; padding: 0; position: fixed; right: 45px; text-align: center; text-decoration: none; top: 91%; width: auto; background-color: #000; z-index: 555; border-radius:2px; }
.scrollToTop i { font-size: 18px; margin: 0 6px; color: #fff; }
.scrollToTop:hover { opacity: 0.5; }
.scrollToTop:hover i { position: relative; }

header {background: #000}
#masthead { padding: 20px;}
#masthead h1 { font-size: 55px; line-height: 1; }
#masthead .well { margin-top:13%; background-color:#111155;  }
.icon-bar { background-color:#fff; }
.nav li ul { display:none }
.nav li.active ul { display:block }
.affix-top,.affix{ position: static;}
.nav a:focus {outline: 0; border: 0; background-color: transparent !important; color: #000}
#sidebar.affix-top { position: static;  }
#sidebar.affix { position: fixed; top:0; width: 249px;  }
.container-fullwidth {padding: 0 60px}
.docs-navigation { height: 100%; left: 0; position: absolute; width: 270px; border-right: 1px solid #f2f2f2  }
.nav li {border-bottom: 1px solid #f2f2f2; text-transform: uppercase }
.nav-stacked  li + li {margin-top: 0}
.nav li a {color:#4b4b4b; font-weight: 600; padding: 15px;  }
.nav li a:hover { background-color: #ebe5ea}
.nav li.active, .nav li.active a:hover, .sec-link:focus { 
 background: rgba(79,172,254,1);
    background: -moz-linear-gradient(45deg, rgba(79,172,254,1) 0%, rgba(0,242,254,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(252,103,103,1)), color-stop(100%, rgba(236,0,140,1)));
    background: -webkit-linear-gradient(45deg, rgba(79,172,254,1) 0%, rgba(0,242,254,1) 100%);
    background: -o-linear-gradient(45deg, rgba(79,172,254,1) 0%, rgba(0,242,254,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(79,172,254,1) 0%, rgba(0,242,254,1) 100%);
    background: linear-gradient(45deg, rgba(79,172,254,1) 0%, rgba(0,242,254,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4facfe', endColorstr='#00f2fe', GradientType=1 );

}
.nav li.active a {color: #fff}
.nav li ul li {padding: 15px; background-color: #fff}
.nav li.active ul li a {color:#4b4b4b; font-size: 11px; display: block; padding: 10px 45px; text-decoration: none }
.nav li.active ul li a:hover { background-color: #ebe5ea; }
.nav li.active ul li:last-child {border-bottom: none}
.nav li.active ul li.active:focus { background-color: #ebe5ea; }
.nav li ul li.active a:after {  content: "\eb27";font-family: icofont!important; position: absolute; top: 11px; right: 15px; font-size: 14px; font-weight: normal}
.nav li.active ul li.active, .nav li.active ul li.active a:focus { background-color: #ebe5ea}
.nav li.active ul li { padding: 0; position: relative}
.docs-content { position: relative; margin-left: 320px; padding: 2% 15% 5% 2%}
.line { border-top: 1px solid #fff; clear: both; margin: 50px 0; position: relative; width: 100%; display: inline-block }
pre {padding: 35px; white-space: pre-wrap; background-color: #f9f9f9; border: none; border-radius: 0; margin: 25px 0}
.label {border-radius: 0; margin-right: 15px;}
.docs-content ul li, .docs-content ol li {margin-top: 10px;}
.comment{ color: #009900 !important; display: inline-block; margin: 10px 0;}
.comment:last-child {margin: 10px 0 0 0}
.docs-content-inner {/*min-height: 350px*/}
.docs-content a {font-weight: 600; text-decoration: underline}
.docs-content a:visited { color: #000}
.docs-content ul {padding-left: 45px}
.docs-content ul li { list-style: disc;}
.columns [class^="col-"], .bootstrap-grid [class^="col-"] { border: 1px solid #e2e2e2; background: #f9f9f9;}
.columns code, .bootstrap-grid code {background: #fff; margin: 10px 0; padding: 0 10px; display: inline-block;}
.last-section {min-height: 850px}
.button {background: #000; color: #fff !important; padding: 10px 20px; border-radius: 0; text-decoration: none !important; margin: 25px 0; outline: 0; border: 0; text-transform: uppercase; display: inline-block }
.button:hover {background: #797979; color: #fff !important; padding: 10px 20px; border-radius: 0; text-decoration: none !important}
.button:focus {background: #000 !important; color: #fff !important; border:2px solid #000; padding: 10px 20px; }
.fa-examples div { border: 1px solid #e5e5e5; font-size: 13px; margin: -1px 0 0 -1px; padding: 15px 0 15px 15px; color: #868686; }
.fa-examples div:hover { background-color: #fafafa}
.fa-examples i {color:#555555; font-size:14px; letter-spacing: 0; margin-right: 5px;}
.fa-examples span {margin-left: 6px;  display: none }
.glyphs .box1 {    border: 1px solid #e5e5e5; display: block; float: left; font-size: 13px; margin: -1px 0 0 -1px; padding: 0; width: 33%; padding: 20px; text-align: left}
.glyphs .box1 span { font-size: 30px; vertical-align: middle; width: 50px;}
.portfolio-details-page [class^="col-"]{ padding-top: 35px; padding-bottom: 35px}
.portfolio-details-page img {padding: 5px}
.credits li {margin-top: 0 !important}
.credits li a {font-size: 13px; font-weight: normal; text-decoration: none}
.demos [class^="col-"]{ padding-top: 15px; padding-bottom: 15px}
.demos img {padding: 5px}
.demo-box {margin-bottom:25px;text-align:center;}
.demo-box a {position: relative;box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);transform: translateY(0px);}
.demo-box a:hover {box-shadow: 0px 0px 114px 0px rgba(0, 0, 0, 0.08), 0px 30px 25px 0px rgba(0, 0, 0, 0.05);transform: translateY(-10px);}
.demo-box img {box-shadow: 0 10px 30px 0 rgba(31,35,37,.1);transition: all .35s cubic-bezier(0.4,0,.2,1);}
.single-img {display: inline-block;vertical-align: top;max-width: 100%;}
.demo-box h3 {text-transform: uppercase;font-size: 16px;text-align: center;letter-spacing: 0.15em;padding-top: 20px;}
.border-img{border:1px solid #efefef;}
.copyright { padding: 30px 25px; display: block}

/* Icon Fonts */

.icon-examples{color: #888;margin-left: 1px;vertical-align: middle;margin-top: 20px;margin-bottom: 30px;width: 100%;float: left;}
.icon-examples .icon-box{display: block;width: 33%;float: left;padding: 0;border: 1px solid #e5e5e5;margin: -1px 0 0 -1px;font-size: 13px;}
@media only screen and (max-width: 1024px) {
    .icon-examples .icon-box{width: 50%;}
}
@media only screen and (max-width: 480px) {
    .icon-examples .icon-box{width: 100%;}
}
.icon-examples .icon-box:hover {background: #fff;color: #212121;}
.icon-examples .icon-box > span {display: inline-block;margin-right: 15px;min-width: 60px;min-height: 60px;border-right: 1px solid #e5e5e5;line-height: 70px;text-align: center;font-size: 25px;}