/* ==========================================================================
Description		    : Froot Website Main CSS
Website				: http://www.frootvpn.com
========================================================================== */ 

/* ==========================================================================
Default Styling
========================================================================== */ 
body { width: 100%; min-height: 100%; font-family: "Open Sans", "Raleway", Lucida Sans Unicode, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 23px; color: #7a7a7a; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-top: 85px;}

h1, h2, h3, h4, h5, h6 { font-weight: 300; font-family: "Raleway", Lucida Sans Unicode, "Helvetica Neue", Helvetica,Arial,sans-serif; color: #1a1a1a; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out;}
h1, h2, h3, h4, h5, h6 { margin-top: 0;  margin-bottom: 10px;}

h1 {font-size: 44px;}
h2 {font-weight: 700; margin-bottom: 20px; }
h3 {}
h4 {font-size: 17px; font-weight: 700; color: #2d2d2d;}

p { margin-bottom: 20px; line-height: 24px;}

a {-webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; color: #F9BB3E;}
a:hover, a:focus { text-decoration: none; color: #bc8a39; outline: none; } 

ul { margin: 0; padding: 0; list-style: none;}

::-moz-selection { text-shadow: none; background: #F9BB3E; color: #FFF;}
::selection { text-shadow: none; background: #F9BB3E; color: #FFF; }

img::selection { background: 0 0;}
img::-moz-selection { background: 0 0;}

hr {margin-top: 30px; margin-bottom: 40px; border-top: 1px solid #EFEFEF;}
body { webkit-tap-highlight-color: rgba(255,255,255,.2);}

form {margin-bottom: 0;}

/* ==========================================================================
Classes
========================================================================== */ 
.cover {-webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover; background-size: cover; background-attachment: fixed; }

.thin {font-weight: 300;}
.strong {font-weight: 700;}

.subline {font-size: 24px;}

.section {padding: 90px 0;}
.section20 {padding: 20px 0;}
.section30 {padding: 30px 0;}
.section40 {padding: 40px 0;}

.padding40 {padding:40px 0;}
.padding50 {padding:50px 0;}
.padding60 {padding: 60px 0;}
.paddingtop-70 {padding-top: 70px;}
.paddingtop-40 {padding-top: 40px;}

.nopadding-bottom {padding-bottom: 0;}

.bordered {border:1px solid #EFEFEF;}
.border-left {border-left: 1px solid #EFEFEF;}
.border-right {border-right: 1px solid #EFEFEF;}
.border-top {border-top: 1px solid #EFEFEF;}
.border-bottom {border-bottom: 1px solid #EFEFEF;}

.separator30 {margin:30px 0;}
.separator60 {margin:60px 0;}
.separatorIntro {margin: 0px 0px 40px 0px;}

.margintop-30 {margin-top: 30px;}
.margintop-40 {margin-top: 40px;}
.margintop-70 {margin-top: 70px;}

.marginbottom-10 {margin-bottom: 10px;}

.nomargin-top {margin-top: 0;}
.nomargin-bottom {margin-bottom: 0;}

.divider70 {clear: both; height: 70px;}
.divider50 {clear: both; height: 50px;}
.divider20 {clear: both; height: 20px;}
.divider35 {clear: both; height: 35px;}

.margin50 {margin: 50px 0;}
.margin20 {margin: 20px 0;}

.tick-list {margin: 15px 0;}
.tick-list li {list-style: none; margin-bottom: 10px;}
.tick-list li i {margin-right: 10px; color: #F9BB3E;}

.normal-list {list-style-type: disc; margin-bottom: 30px; margin-left: 20px;}
.normal-list li {margin-bottom: 5px;}

.green-arrow {list-style: none; margin-bottom: 15px;}
.green-arrow li {position: relative; padding-left: 25px; margin-bottom: 5px;}
.green-arrow li:before {display:inline-block; text-align:center; font-family: FontAwesome; content:"\f00c"; position:absolute; left:0; transition:all 0.3s ease-in; transition:all 0.3s ease-in;  transition:all 0.3s ease-in; color: #72B569;}

.font-icon-list li {}
.font-icon-list i {color: rgba(0,0,0,0.6); margin-right: 10px;}

.text-center {text-align: center;}
.text-center img {display: block; margin: 0 auto; pointer-events: none;}

.text-right {text-align: right;}

.btn {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 0; padding: 15px 35px; font-weight: bold;}
.btn:hover, .btn:focus { background-color:#F9BB3E; color: #FFF;}

.btn-transparent {background-color: transparent; border: 2px solid #FFF;  color: #fff; }
.btn-transparent:hover {background-color: #2a2a2a; border-color: #2a2a2a;}

.btn-price {color: #FFF;}
.btn-price:hover {background-color: #FFF; border-color: #FFF; color: #2a2a2a;}

.arrow-bottom { position: relative; }
.arrow-bottom:after { left: 50%; bottom: -50px; position: absolute; content: ""; border: 25px solid; border-color: #FAFAFA transparent transparent transparent; display: block; margin-left: -13.5px;}

.get-btn {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 0; font-weight: bold;}
.get-btn:hover, .get-btn:focus { background-color: #F9BB3E; color: #FFF;}

/* ==========================================================================
Color Customizations
========================================================================== */ 
.bg-white {background-color: #FFF;}
.bg-gray {background-color: #FAF7F8;}
.bg-gray {background-color: #FAFAFA;}
.bg-gray2 {background-color: #F5F5F5;}
.bg-blue {background-color: #F9BB3E;}
.bg-dark {background-color: #333;}

.bg-calltoaction {background-color: #F9BB3E; background: url('https://static.frootvpn.com/img/keyboardbg.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed;}
.bg-testimonial {background:url('https://static.frootvpn.com/img/headshot-bg.jpg');}

.accent-color {color: #F9BB3E;}

.white-text {color: #FFF;}
.white-text p {color: #FFF;}
.white-text h3 {color: #FFF;}
.white-text h2 {color: #FFF;}
.white-text li {color: #FFF;}

/* ==========================================================================
Line Font
========================================================================== */ 
.line-font {font-size: 48px;}
.line-font-small {font-size: 20px;}

/* ==========================================================================
Headline
========================================================================== */
.headline {text-align: center; position:relative; border-bottom:1px solid rgba(0,0,0,0.03); margin-bottom: 50px;}
.headline h1 {color: #31373a; padding-bottom: 15px; border-bottom: 2px solid #DDD; display: inline-block; font-size: 44px;}
.headline h2 {font-size: 36px;}
.headline p {margin-bottom: 40px; font-weight: 100; font-size: 16px; color: #2b2b2b;}
.headlineDevices {text-align: center; color: #7a7a7a; position:relative; border-bottom:1px solid rgba(0,0,0,0.03); margin-bottom: 20px;}
.headlineCalltoaction {text-align: center; color: #7a7a7a; position:relative; margin-bottom: 20px;}
.headlineOrder {text-align: left; position:relative; border-bottom:1px solid rgba(0,0,0,0.03); margin-bottom: 50px;}
.headlineOrder h2 {font-size: 36px;}

.headline-h1 { position: relative; border-bottom: 2px solid #DDD; display: inline-block; font-size: 44px; margin-bottom: 50px;}

/* ==========================================================================
 Navigation
========================================================================== */
.menu-right {float: right;}
.navbar-inverse { margin-bottom: 0; -webkit-border-radius: 0; -moz-border-radius: 0;border-radius: 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; border: none; background-color: rgba(34,34,34,1); padding: 15px 0; }
.navbar-inverse .navbar-nav > li > a { color: #fff; display: block; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; }

.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li {-webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear;}

.navbar-toggle { padding: 4px 6px; font-size: 16px; color: #fff;}
.navbar-toggle:focus,
.navbar-toggle:active { outline: 0;}

.navbar-inverse .navbar-toggle { background: #F9BB3E; border: none;}
.navbar-nav {margin: 0;}
.scroll-fixed-navbar {padding-bottom:0;}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background-color: transparent;}
.navbar > .container .navbar-brand {margin-left: 0;}
.navbar-brand { height:auto;}

.scroll-fixed-navbar { padding: 10px 0; background-color: #FFF; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);}
.scroll-fixed-navbar .navbar-nav > li > a {color: #333;}
.scroll-fixed-navbar .navbar-nav > li > a:hover,
.scroll-fixed-navbar .navbar-nav > li.active > a,
.scroll-fixed-navbar .navbar-nav > li.active > a:hover {color: #F9BB3E; }

.navbar-toggle { position: relative; float: right; background-color: transparent; padding: 10px; margin: 13px 30px 13px 0; border: none; color: #fff; border: 2px solid #fff;}
.navbar-toggle .icon-bar { background-color: #fff;}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: rgba(0,0,0,0.1);}

.navbar-toggle { position: relative; top: 30px; }

/* ==========================================================================
Logo
======================================================.==================== */
.navbar-inverse .navbar-brand  {color: #FFF; font-size: 30px; font-weight: 700; padding: 0;}
.scroll-fixed-navbar.navbar-inverse .navbar-brand  {color: #1a1a1a; font-size: 30px; font-weight: 700; padding: 0;}
.text-logo {margin-top: 5px}
.text-logo i {margin-right: 10px;}
.text-logo img {margin-right: 10px; pointer-events: none;}

/* ==========================================================================
Banner
========================================================================== */
#banner {padding-top: 90px; padding-bottom: 70px; background: #1a1a1a; background-image: url('https://static.frootvpn.com/img/keyboardbg.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:100%; position: relative; background-attachment: fixed; background-position: left center;}

.banner-content { clear: both; padding-top: 25px;}
.banner-content h1 {font-size: 50px; color: #FFF;  border-bottom:1px solid rgba(0,0,0,0.1); padding-bottom: 10px;}
.banner-content h1 {color: #FFF;}
.banner-content h5 {font-weight: bold; font-size: 16px; color: #FFF;}
.banner-content p { color: rgba(255,255,255,0.7); }
.banner-content h1.slogan { font-size: 16px; text-align: right; }

.banner-list {margin-bottom: 20px;}
.banner-list li {color: rgba(255,255,255, 0.8); margin-bottom: 5px;}
.banner-list li i { margin-right: 10px; color:#F9BB3E; }

/* ==========================================================================
Devices Logo
========================================================================== */ 
.devices-logo li {padding: 0 50px;}
.clients-logo li {padding: 0 20px;}
.devices-logo li img {opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}
.clients-logo li img {opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}
.devices-logo li i {font-size: 48px;}

/* ==========================================================================
Process Steps
========================================================================== */ 
ul.steps-list li {margin-bottom: 25px; border-bottom:1px solid rgba(0,0,0,0.03);}
ul.steps-list li:last-child {border-bottom: none;}
ul.steps-list li span{ float:left; border-radius: 50%; width: 55px; height: 55px; line-height: 55px; display:block; font-size:22px; font-weight:bold; text-align:center; background: #1a1a1a; }
ul.steps-list li h4,
ul.steps-list li p { margin-left: 80px; }
ul.steps-list li h5 { font-weight:600;}

/* ==========================================================================
Main Point
========================================================================== */ 
.main-point {margin-bottom: 20px; }
.main-point i { display: block; font-size: 56px; color: #1a1a1a;}
.main-point h3 {font-size: 22px; font-weight: 300; margin-top: 20px; }

/* ==========================================================================
Features & Facts
========================================================================== */ 
.features {margin-bottom: 40px; text-align: left;}
.features i {float: left; margin-right: 20px;}
.features h3 {font-size: 18px; font-weight: bold; padding-top: 15px; }
.features p { clear: both; padding-top: 10px;}

.facts {margin-bottom: 40px; text-align: left;}
.facts i {float: left; margin-right: 20px;}
.facts h3 {font-size: 18px; font-weight: bold; padding-top: 15px; }
.facts p { clear: both; padding-top: 10px;}
/* ==========================================================================
Forms
========================================================================== */ 
.signup-form { -webkit-box-shadow:0 0 10px rgba(0,0,0,.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); background: rgba(0,0,0,0.4);}
.support-form { -webkit-box-shadow:0 0 10px rgba(0,0,0,.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); background: rgba(0,0,0,0.4);}
.login-form { -webkit-box-shadow:0 0 10px rgba(0,0,0,.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); background: rgba(0,0,0,0.4);}
.form-title { background-color: rgba(0,0,0,0.5); color: #FFF; text-align: center; padding: 25px 0;}
.form-title h1 { margin-bottom: 0; font-size: 22px;}
.form-body { padding: 30px;}
.form-body p { color: rgba(255,255,255,0.6);}

.signup-form .form-control { color: #F9BB3E; border: none; outline: none; box-shadow: none; padding: 13px 15px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; border-radius: 0; height: auto; background-color: rgba(0,0,0,0.4); margin-bottom: 15px;}
/*.support-form .form-control { color: #F9BB3E; border: none; outline: none; box-shadow: none; padding: 13px 15px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; border-radius: 0; height: auto; background-color: rgba(0,0,0,0.4); margin-bottom: 15px;}*/
.login-form .form-control { color: #F9BB3E; border: none; outline: none; box-shadow: none; padding: 13px 15px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; border-radius: 0; height: auto; background-color: rgba(0,0,0,0.4); margin-bottom: 15px;}
.form-control { color: #F9BB3E; border: none; outline: none; box-shadow: none; padding: 13px 15px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; border-radius: 0; height: auto; background-color: rgba(0,0,0,0.8); margin-bottom: 15px;}

.btn-submit { display: block; margin:0 auto; background-color: #F9BB3E; color: #FFF; border-color:rgba(0,0,0,0.01); width:100%; padding: 11px; border:2px solid #F9BB3E;}
.btn-green { display: block; margin:0 auto; background-color: #4d7f61; color: #FFF; width:100%; padding: 11px; border:2px solid #31714a;}
.btn-submit:hover {background: #F9BB3E; border-color: #F9BB3E;}
.btn-green:hover {background: #F9BB3E; border-color: #F9BB3E;}

.btn-submit-forgot { display: block; margin:0 auto; background-color: #d9534f; color: #FFF; border-color:rgba(0,0,0,0.01); width:100%; padding: 11px; border:2px solid #d9534f; margin-top: 5px;}
.btn-submit-forgot:hover { background: #d9534f; border-color: #d9534f; margin-top: 5px;}

.form-horizontal label {
    color: #fff;
}

.label-green { background-color: #4d7f61; color: #FFF; border:2px solid #31714a; }

/* ==========================================================================
Stats
 ========================================================================== */
.stats i {float: left; margin-right: 20px;}
.stats h3 {font-weight: bold; font-size: 29px; color: #1a1a1a; margin-bottom: 0;}
.stats span {display: block; font-weight: normal; font-size: 14px; margin-top: 10px;}

/* ==========================================================================
Portfolio 
 ========================================================================== */
.hover-details {width: 100%; height: auto; overflow: hidden; position: relative; -moz-transition: all ease 400ms ease-in-out; -webkit-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; margin-bottom: 40px; }
.hover-details .img-cover { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; background: rgba(8, 180, 218, 0.9); -moz-transition: all ease 400ms ease-in-out; -webkit-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out;}
.hover-details > img { width: 100%; height: auto; -moz-transition: all ease 400ms ease-in-out; -webkit-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; }

.img-zoom { width: 45px; height: 45px; background-color: #1a1a1a; line-height: 45px; position: absolute; top: -45%; left: 50%; border-radius: 3px; margin-top: -35px; margin-left:  -25px; -webkit-transition: all ease 400ms ease-in-out; -moz-transition: all ease 400ms ease-in-out; -ms-transition: all ease 400ms ease-in-out; -o-transition: all ease 400ms ease-in-out; transition: all ease 400ms ease-in-out; text-align: center;}
.img-zoom i {color: #FFF; font-size: 18px;}

.img-cover h3 { width: 100%; position: absolute; bottom: -28%; color: #f8f8f8; font-size: 16px; text-align: center;	 padding: 0 10px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}

.hover-details:hover {cursor: pointer;}
.hover-details:hover > img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2);}
.hover-details:hover .img-zoom { top: 45%;}
.hover-details:hover .img-cover h3 { bottom: 28%;}
.hover-details:hover .img-cover { opacity: 1;}
.img-zoom:hover { background-color: #333;}

/* ==========================================================================
Video Container
============================================================================ */
.video-container { position:relative;}
.video-container iframe{ width:100%; height: 430px; border:none;}

/* ==========================================================================
Testimonials
========================================================================== */ 
.testimonial-inner {}
.testimonial-inner img {margin-right: 30px; border-radius:4px; border:3px solid #FFF; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); float: left;}
.testimonial-inner p { }
.testimonial-inner small {display: inline-block; border-top: 2px solid #333; padding-top: 10px; font-size: 15px; font-weight: bold; color: #333;}

/* ==========================================================================
Pricing
============================================================================ */
.price-plan {background: #FFF; border: 1px solid rgba(0,0,0,0.05); border-radius: 0; box-shadow: none;}
.price-plan h4 { color: #FFF; font-size: 17px; text-align: center; margin-bottom: 0;} 
.price-plan h3 { color: #fff; text-align: center; font-size: 38px; font-weight: bold; margin-bottom: 0;}
.price-plan h3 span { font-weight: 300; font-size: 18px; }
.price-plan h3 sup {font-size: 18px;} 

.price-plan .panel-heading {background:#333; text-align: center; padding: 25px 0; border-radius: 0;}
.price-plan .panel-body {background: #444; padding: 30px 0; margin-bottom: 0; }
.price-plan .panel-footer {background: #333; padding: 25px 0; border-radius: 0;}
.price-plan .list-group-item {padding: 15px 20px; border: 1px dotted #E5E5E5; text-align: center;}
.price-plan .list-group-item:last-child {border-bottom: none;}
.price-plan .list-group-item i {float: right; font-size: 18px; margin-top: 5px;}

.popular .panel-heading {background:#F9BB3E; }
.popular .panel-body {background: #0AA9CC; }
.popular .panel-footer {background: #F9BB3E; }

/* ==========================================================================
faq-bodys
============================================================================ */
.faq-body {margin-bottom: 40px;}
.faq-body i {float: left; font-size: 40px; margin-right:15px; margin-bottom: 15px;}
.faq-body h4 {padding-top: 10px; font-size: 18px;}
.faq-body p {clear: both;}

.answer {position: relative;border: 1px solid #E5E5E5; background-color: #FFF; padding: 20px; margin-top: 30px; border-radius: 3px;}
.answer:after { content: ''; position: absolute; border-style: solid; border-width: 0 15px 15px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; top: -15px; left: 10%;}
.answer:before { content: ''; position: absolute; border-style: solid; border-width: 0 15px 15px; border-color: #E5E5E5 transparent; display: block; width: 0; z-index: 0; margin-left: -15px; top: -16px; left: 10%;}

/* ==========================================================================
Footer
 ========================================================================== */
.footer-top {background-color: #2b2b2b; padding: 70px 0;}
.footer-sub {background-color: #242424; padding: 30px 0;}

.footer h3 {color: #FFF; font-weight: bold; font-size: 19px; margin-bottom:15px;}
.footer p,
.footer a {color: #ADADAD; margin-bottom: 10px;}
.footer li {padding: 3px 0; font-size: 14px;}
.footer i {color: #f8f8f8;}

.copyright {float: left;}
.copyright i {color: #FF3D7F; margin:0 5px;}

.footer .footer-links a { float: right; padding: 0px 10px;}
.footer .footer-links a:hover { float: right; padding: 0px 10px; -webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; color: #F9BB3E;}

.contact-list li {color: #ADADAD; margin-bottom: 5px;}
.contact-list i {margin-right: 15px;}

.quick-links li { padding-left:15px; position:relative; }
.quick-links li:before {display:inline-block; text-align:center; font-family: FontAwesome; content:"\f105"; position:absolute; left:0px; top:4px; transition:all 0.3s ease-in; transition:all 0.3s ease-in;  transition:all 0.3s ease-in; color: #f8f8f8;}

/* ==========================================================================
Carousel Settings
 ========================================================================== */ 
.carousel-mod .carousel-indicators {position: static; display: block; width: auto; margin: 15px auto;}
.carousel-mod .carousel-indicators li {background-color: #A3A3A3; border: none; margin:0;}
.carousel-mod .carousel-indicators .active {background-color: #31373a; width: 10px; height: 10px;}
.carousel-mod .carousel-control.left, .carousel-mod .carousel-control.right {background: none; background-color: transparent; filter:none;}
.carousel-mod .carousel-control {top: 45%;}

/* ==========================================================================
Social Links
 ========================================================================== */
.social {}
.social li {padding:0; display: inline-block; width: 35px; height: 35px; border-radius: 3px; text-align: center; line-height: 35px; webkit-transition: background-color 400ms ease-out 0.2s; -moz-transition: background-color 400ms ease-out 0.2s; -o-transition: background-color 400ms ease-out 0.2s; transition: background-color 400ms ease-out 0.2s; margin-bottom: 5px;}
.social li a { color: #fff; }
.social li.facebook { background: #204385; }
.social li.twitter { background: #2aa9e0; }
.social li.google-plus { background: #d3492c; }
.social li.linkedin { background: #0073b2; }
.social li.skype { background: #00b0f6; }
.social li.youtube { background: #e22d24; }
.social li:hover {background:#31373a; cursor: pointer; }

/* ==========================================================================
Media Queries
 ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    img {margin: 20px auto;}
    .img-thumbnail {margin: 0;}
}

@media only screen and (max-width: 767px) {
    .navbar-inverse {background-color: #FFF; padding:0;}
    .navbar > .container .navbar-brand {margin-left: 15px; color: #1a1a1a; margin-top: 15px;}
    .menu-right {float: none;}
    .navbar-inverse .navbar-nav > li > a {color: #1a1a1a;}
    .navbar-inverse .navbar-nav > .active > a, 
    .navbar-inverse .navbar-nav > .active > a:hover, 
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover { color: #F9BB3E;}
    img {display: block; margin: 20px auto;}
    .section {padding: 50px 0;}
    .main-point {margin-bottom: 40px;}
    .video-container {margin-bottom: 40px;}
    .img-thumbnail {margin: 0;}
}

/* ------ Mobile Portrait Size to Mobile Landscape Size (devices and browsers) ------*/
@media only screen and (max-width: 479px) {
    h2 {font-size: 28px;}
    h4 {font-size: 16px;}
    img {float: none; display: block; margin: 20px auto;}
    iframe {max-height: 200px;}
    .banner-content h1 {font-size: 34px;}
    .headline h1 {font-size: 30px;}
    .headline h2 {font-size: 28px;}
    .section {padding: 50px 0;}
    .separator60 {margin: 30px 0;}
    .steps-list {margin-bottom: 30px;}
    .main-point h3 {font-size: 20px;}
    .video-container {margin-bottom: 40px;}
    .img-thumbnail {margin: 0;}
    .testimonial-inner img {float: none; margin:0 auto; margin-bottom: 20px;}
    .contact-list, .quick-links {margin-bottom: 30px;}
    .copyright {float: none;}
}

/* ==========================================================================
Recovery Modal
 ========================================================================== */
.recovery-form { -webkit-box-shadow:0 0 10px rgba(0,0,0,.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,.3); box-shadow: 0 0 10px rgba(0,0,0,.3); background: rgba(0,0,0,1); border: 3px solid rgba(44,44,44,.5);}
.recovery-form .form-title { background-color: rgba(255,255,255,.2); color: #FFF; text-align: center; padding: 25px 0;}
.recovery-form .form-control { color: #F9BB3E; border: none; outline: none; box-shadow: none; padding: 13px 15px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; border-radius: 0; height: auto; background-color: rgba(44,44,44,.8); margin-bottom: 15px;}
.recovery-form .form-body { padding: 30px; background: rgba(255,255,255,.1);}

.recovery-content { position: relative; background-color: rgb(0, 0, 0, 0); -webkit-background-clip: padding-box; background-clip: padding-box; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}

/* ==========================================================================
Guides
 ========================================================================== */
.guides, .guides h1, .guides h2, .guides h3 { color: #fff; }
.guides-menu { border-right: 1px solid rgba(0,0,0,0.03); background-color: rgba(0,0,0,.3);}
.guides-menu h3 { background-color: rgba(0,0,0,0.7); text-align: center; color: #F9BB3E; padding: 15px;}
.guides-menu ul { margin-bottom: 10px; color: white; margin-left: 5%; margin-right: 5%; padding-bottom: 10px;}
.guides-menu ul li a { color: #fff;}
.guides-menu ul li a:hover,
.guides-menu ul li.active a,
.guides-menu-ul li.active a:hover { color: #F9BB3E;}
.guides-content {}
.guides-content h3 { padding-bottom: 5px; padding-top: 0;}
.guides-content img { width: 100% \9; max-width: 100%; height: auto; pointer-events: none;}

/* ==========================================================================
Order page & Product Chooser
 ========================================================================== */
div.clear { clear: both;}
div.product-chooser.disabled div.product-chooser-item { zoom: 1; filter: alpha(opacity=60); opacity: 0.6; cursor: default;}
div.product-chooser div.product-chooser-item { padding: 11px; position: relative; border: 2px solid rgba(0,0,0,.3); margin-bottom: 10px; margin-right: 10x;}
div.product-chooser div.product-chooser-item.selected { border: 4px solid rgba(0,0,0,.3); background: rgba(0,0,0,.3); padding: 8px; filter: alpha(opacity=100); opacity: 1;}
div.product-chooser div.product-chooser-item img { padding: 0; }
div.product-chooser div.product-chooser-item span.title { display: block; margin: 10px 0 5px 0; font-weight: bold; font-size: 15px; color: #efefef;}
div.product-chooser div.product-chooser-item span.description { font-size: 12px; color: #efefef;}
div.product-chooser div.product-chooser-item input { position: absolute; left: 0; top: 0; visibility:hidden;}

.order-btn { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 0; font-weight: bold; width: 100%;}
.order-btn:hover, .get-btn:focus { background-color: #F9BB3E; color: #FFF;}
.order-btn h3 { margin-bottom: 0px;}

.order-plan-price { font-weight: 700; }
.order-plan-price h2 { margin-bottom: 0px;}

#payment-methods .headline p, #vpn-locations .headline p, #account-information .headline p {
    margin-bottom: 0px;
}
#vpn-locations label {
    font-weight: normal;
}
.currency { font-size: 20px; vertical-align: top}
.bannerButton { vertical-align: middle;}
.payment-type-inner {
    padding: 5px 0px;
}


.sale {
    background: #f9bb3e none repeat scroll 0 0;
    border-bottom-left-radius: 60px;
    float: right;
    height: 60px;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    padding-left: 12px;
}
.sale p {
    color: #121212;
    font-weight: bold;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
}
.sale p span {
    font-size: 20px;
}

.best {
    background: #f12627 none repeat scroll 0 0;
    color: #fff;
    font-weight: bold;
    margin: 0 -25px;
    text-align: center;
}

.choose-plan.btn.btn-xs {
    margin-top: 10px;
    width: 100%;
}

.account-info-container { margin-top: 65px; }

.less-padding {
    padding: 0 5px;
}

.payment-method {
    padding: 10px 15px;
}

.payment-method > img {
    height: 50px;
    width: 100%;
}
.payment-method > img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -ms-filter: grayscale(100%); /* IE */
    filter: gray; /* IE6-9 */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    border: 2px solid transparent;
}

.payment-method > img.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
    -ms-filter: grayscale(0%); /* IE */
}

.payment-method > img.selected {
    -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
    -ms-filter: grayscale(0%); /* IE */
    filter: none;
    -webkit-box-shadow: 0 0 0 3px lightseagreen; /* Chrome 19+ & Safari 6+ */
    -moz-box-shadow: 0 0 0 3px lightseagreen; /* Mozilla Firefox */
    box-shadow: 0 0 0 3px lightseagreen;
}



/* ==========================================================================
Job Page
 ========================================================================== */

div.img-job { text-align: center; }
div.img-job > img { width: 100%; }
div.job-listing p { color: #fff; }
div.jobs-container { margin-bottom: 30px; }

/* ==========================================================================
Plans and pricing
 ========================================================================== */

div.payment-methods > div { margin-bottom: 15px; }

// Guides

.panel-guides > h3 { color: #F4B73C; padding: 10px; }
.guides-menu .panel-heading strong { font-size: 22px; }
.panel-guides { background-color: transparent; height: 195px; }

.container.guides { margin-bottom: 30px; }
.guides-content { padding-bottom: 50px; }
.guides-content img { margin-bottom: 20px; }
.single-step-container { width: 100%; float:left; clear: both; }

// Order page

.input-fields { padding: 15px; border: 2px solid rgba(0,0,0,.3); border-radius: 5px; }
h3.label-input { font-weight: bold; margin: 0; padding: 20px 0 0; }
.form-order { margin-bottom: 65px; }

.message { padding: 0 10px 15px 0; }

.message.short{
    color:#ff4545;
    font-size:18px;
}
.message.weak{
    color:orange;
    font-size:18px;
}
.message.good{
    color:#2D98F3;
    font-size:18px;
}
.message.strong{
    color: limegreen;
    font-size:18px;
}

/**-- New Order Page Style 09/15/2015 --**/

.order-page .yellow-black {
    background: #2d313d none repeat scroll 0 0;
    border: 3px solid #e9a61f;
}

.order-page .product-chooser-item.selected .order-plan-name > h2 {
    margin: 17px 0 4px;
    border:none;
    padding:0;
}

.order-page .product-chooser-item .order-plan-name > h2 {
    border-bottom: 4px solid #cccccc;
    display: inline-block;
    margin: 17px 0 4px;
    padding-bottom: 5px;
}

.order-page .product-chooser-item .order-plan-price > h2.product-price {
    font-family: "Lato",sans-serif;
    font-size: 48px;
    font-weight: 900;
    margin: 15px 0 0;
}

.order-page .product-chooser-item .order-plan-price > h2 {
    color:#e9a61f;
}

.order-page .order-plan-price > div {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

.order-page div.product-chooser div.product-chooser-item.selected {
    background: #e9a61f;
    margin-left: 3px;
    margin-right: 3px;
    border: 3px solid #2d313d;
    box-shadow: 0 0 0 5px #e5a31f;
}

.order-page div.product-chooser div.product-chooser-item {
    margin-bottom: 10px;
    margin-top: 12px;
    padding: 7px;
    position: relative;
    background:#fff;
    -webkit-box-shadow: inset 0px 0px 53px -18px rgba(0,0,0,0.11);
    -moz-box-shadow: inset 0px 0px 53px -18px rgba(0,0,0,0.11);
    box-shadow: inset 0px 0px 53px -18px rgba(0,0,0,0.11);
    border:1px solid #fff;
}

.order-page .product-chooser-item {
    font-family: "Lato", sans-serif;
}

.order-page .product-chooser-item .sale {
    background: #e9a61f none repeat scroll 0 0;
    border-bottom-left-radius: 60px;
    color: #ffffff;
    float: right;
    height: 60px;
    padding-left: 12px;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
}

.order-page .product-chooser-item.selected .sale {
    background: #2d313d none repeat scroll 0 0;
}

.order-page .sale p {
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    color: #fff;
}

.order-page .sale p span {
    font-size: 20px;
}

.order-page .best-value {
    background: rgba(0, 0, 0, 0) url('https://static.frootvpn.com/img/order/best-ribbon.png') no-repeat scroll center top;
    color: #ffffff;
    display: block;
    font-weight: bold;
    height: 25px;
    margin: 0 auto;
    width: 120px;
}

.order-page .product-chooser-item.selected .package {
    background: #fbb72e none repeat scroll 0 0;
    color: #2d313d;
}

.order-page .product-chooser-item .package {
    background: #e3e3e3 none repeat scroll 0 0;
    color: #2e323e;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: bold;
    margin: 11px -23px;
    padding: 5px;
    text-align: center;
}

.order-page .choose-plan.btn.btn-xs {
    margin-top: 10px;
    width:70%;
}

.order-page .product-chooser-item.selected .choose-plan{
    background-color: #e9a61f;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.order-page .product-chooser-item .choose-plan{
    background-color: #fff;
    border: 1px solid #e9a61f;
    color: #e9a61f;
    display: inline-block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px 20px;
}

.order-page .btn {
    border-radius: 0;
    font-weight: bold;
    padding: 15px 35px;
    transition: all 0.3s ease-in-out 0s;
}

.order-page .product-chooser-item.selected .order-plan-price > div,
.order-page .product-chooser-item.selected .order-plan-price > h2,
.order-page .product-chooser-item.selected .order-plan-name > h2 {
    color: #fff;
}

.order-page .product-chooser-item .order-plan-name > h2 {
    color: #2d313d;
}

.order-page .product-chooser-item .order-plan-price > div{
    color:#585a5e;
}


.order-page .froot-frm {
    border: 1px solid #2d313d;
    margin: 10px;
    float: left;
}

.order-page .froot-frm .head {
    background: #2d313d none repeat scroll 0 0;
    clear: both;
    color: #ffffff;
    float: left;
    text-align: center;
    width: 100%;
    padding-top: 20px;
}

.order-page .froot-frm .head h2 {
    color: #fff;
    font-weight: bold;
    margin: 11px 0 4px;
}

.order-page .frm-content {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    padding: 60px 20px 0;
}

.order-page .frm-content .form-control {
    background-color: #fff;
    border: 1px solid #636363;
    border-radius: 0;
    box-shadow: none;
    color: #5a5a5a;
    height: auto;
    margin-bottom: 15px;
    outline: medium none;
    padding: 13px 15px;
    transition: all 0.2s ease-in-out 0s;
}

.order-page .frm-content .form-control::-moz-placeholder {
    color: #5a5a5a;
    opacity: 1;
}

.order-page .payment-method {
    display: block;
    margin: 11px 0;
}

.order-page .payment-method {
    float: left;
    margin: 11px 0;
}

.order-page .payment-method h2 {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0 0;
    text-align: center;
}

.order-page .payment-method > img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.order-page .payment-method > img.selected {
    filter: none;
}

.order-page .btn-checkout {
    background-color: #4d7f61;
    border-bottom: 5px solid #446953;
    color: #ffffff;
    font-size: 21px;
    margin: 10px auto 0;
    padding: 11px;
    width: 100%;
}

.order-page .btn-checkout:hover { 
    color: #333;
    background-color: #4d7f61;
}

.order-page .server-location {
    background: #e5e5e5 none repeat scroll 0 0;
    border: 1px solid #b3b3b3;
    float: left;
    margin: 10px;
    padding: 30px 10px 10px;
    width: 96%;
}

.order-page .server-location > h2 {
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.order-page .server-location > p {
    text-align: center;
}

.order-page .location h3 {
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.order-page .location > p {
    font-size: 13px;
}

.order-page .location.sweden-con {
    margin: 20px auto;
    width: 100%;
}

.order-page .location.usa-con {
    margin: 20px auto;
    width: 100%;
}

.order-page .we-promise {
    float: left;
    margin: 10px;
}

.order-page .we-promise h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}

.order-page .guarantee-logo{
    float:left;
    margin:20px 0;
    width:100%;
}

.order-page .moneyback {
    margin: 10px 20px;
}

.order-page .all-devices {
    border: 1px solid #cccccc;
    float: left;
    margin: 10px;
    padding: 10px;
}

.order-page .all-devices h4 {
    font-size: 14px;
    margin: 0 0 10px;
    text-align: center;
}

.order-page .product-chooser-item:hover {
    -webkit-transform: scale(1.1); // Safari and Google Chrome
    -webkit-transition: all 0.3s ease 0s; // Safari and Google Chrome
    transform: scale(1.1);
    transition: all 0.3s ease 0s;
    z-index: 2;
    cursor: pointer;;
}

section#intro.order-page { background-color: #ededed; }

/*-- additional order-page-css --*/

.order-page .product-chooser-item.selected h2 { color: #fff; }
.order-page .product-chooser-item .product-name { font-family: "Helvetica", sans-serif; }

.order-page .banner-content .order-page-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: normal;
    margin: 20px auto;
    padding-bottom: 10px;
    width: 70%;
}

.order-page h2.product-name { border: 0 none !important; }

.order-page .payment-method > img {
    max-width: 100%;
    height: auto;
}

.order-page .less-padding {
    padding: 0 15px;
}

.product-chooser-item > .sale > p { padding-top: 0px; }

/************* Navbar *******************/

nav.navbar.navbar-fixed-top {
    border-top: 5px solid #4C7F61;
}

/************* New Homepage *************/

#banner.index-page { 
    background-image: url('https://static.frootvpn.com/img/keyboard_bg.png');
    background-repeat: no-repeat;
}
.index-page .banner-content { padding-bottom: 5%; }
.index-page .btn.btn-red.btn-mid, .btn.btn-red.btn-arrowed { 
    background-color: #D8514D;
    color: #fff;
    font-size: 24px;
    padding: 10px 25px;
    line-height: 1.5;
}

.index-page .btn.btn-red.btn-mid:before, .btn.btn-red.btn-arrowed:before { 
    content: url('https://static.frootvpn.com/img/arrow-btn.png');
    vertical-align: middle;
    position: relative;
    top: 5px;
    margin-right: 20px;
}

.btn.btn-arrowed-after:after {
    content: url('https://static.frootvpn.com/img/arrow-btn.png');
    vertical-align: middle;
    position: relative;
    top: 5px;
    margin-left: 20px;
}

.index-page .join-now h2 { font-size: 42px; font-weight: normal; }
.index-page .join-now p { font-size: 19px; line-height: 1.5; }
.index-page .join-now .btn { font-size: 24px; }

.index-page .top-banner-content p { 
    font-size: 18px;
    margin-bottom: 5px;
    color: #fff;
}

.index-page .top-banner-content h1 { font-size: 72px; margin-bottom: 10px; border-bottom: 0; }

.index-page .banner-content h2.slogan { font-size: 19px; text-align: center; color: #fff;  }

.index-page .gadgets { 
    position: absolute;
    top: 300px;
    text-align: center;
    width: 100%;
}

.index-page.has-background { padding-top: 200px; background-image: url('https://static.frootvpn.com/img/bg-pattern.png'); background-repeat: repeat; }

.index-page .headline { margin-bottom: 50px; border: 0 none; }

.index-page .headline hr { 
    height: 3px;
    border: none;
    color: #333;
    background-color: #333;
    width: 200px;}

.index-page section { border-bottom: 1px solid #ccc; padding-top: 70px; padding-bottom: 70px; }
.index-page section:last-child { border: 0 none; }
.index-page .fa-green { color: #4D7F61; }
.index-page .separator100 { margin: 100px 0; }
.index-page .plans thead tr th p { margin: 0 9px; color: #7a7a7a; font-size: 24px; }
.index-page .plans tbody td { padding-left: 10px; padding-right: 10px; }
.index-page .devices-logo li { margin-bottom: 15px; }

/************* Brick page ***************/

.panel-brick { margin: auto; width: 300px; }
.panel-brick .form-group { margin: 0; }
.panel-brick .form-group .input-group { margin: 0 0 15px; }
.panel-brick .panel-heading { margin-bottom: 15px; border-top: 2px solid rgba(255,255,255,.2); background-color: #333; background-image: url('https://api.paymentwall.com/brick/templates/images/noise.png'); background-repeat: repeat; padding: 15px; }
.panel-brick .panel-body { padding: 20px 0; }
.panel-brick .brick-product-name , .panel-brick .brick-merchant-name { color: #fff; line-height: normal; }
.panel-brick .brick-product-name { font-size: 14px; font-family: 'Helvetica', sans-serif; margin-bottom: 15px; }
.panel-brick .brick-merchant-name { font-size: 22px; font-weight: bold; font-family: 'Helvetica', 'Arial', sans-serif; }
.panel-brick .control-label { text-align: center; color: #a7a7a7; }
.panel-brick .form-control { padding: 10px 8px; background-color: #fff; color: #a7a7a7; font-weight: bold; }
.panel-brick input.form-control { border: 1px solid #ccc; }
.panel-brick .brick-submit { margin-top: 10px; }
.panel-brick #brick-error-container { margin-bottom: 20px; }
.panel-brick #brick-error-container p { color: red; font-size: 14px; font-weight: bold; margin: 0; line-height: normal; text-align: center; }
.panel-brick .brick-submit.success { background: -webkit-linear-gradient(90deg, rgba(79, 255, 58, 0.55) 0%, rgb(89, 239, 107) 100%); }

.modal-body .panel-brick { width: auto; }

/************ New About Page ************/

#banner.about-page, #banner.login-page { background-image: url('https://static.frootvpn.com/img/keyboard_bg_grayscale.png'); }
.about-page .server-location-about h2, .server-location-about p, .server-location-about h3 { margin-bottom: 0; }
.has-background-pattern { background-image: url('https://static.frootvpn.com/img/bg-pattern.png'); background-repeat: repeat; }

/* Modal Style */

.brickcc-modal .panel-brick .brick-merchant-name, .brickcc-modal .panel-brick .brick-product-name{ color: #000; }
.brickcc-modal .panel-brick .brick-merchant-name { text-shadow: 0 0; }
.brickcc-modal .modal-header .close {
    position: absolute;
    right: 15px;
    top: 10px;
}

.brickcc-modal .modal-header { padding-top: 20px; padding-bottom: 20px; 
                               background-color: #333;
                               background-image: url("https://api.paymentwall.com/brick/templates/images/noise.png");
                               background-repeat: repeat;

}

.brickcc-modal .close > span {
    color: #fff;
}

/* New Login Page */

.login-page h4 {
    font-size: 16px;
    margin: 25px 0;
}

.banner-content h1 {
    color: #ffffff;
    font-size: 36px;
    font-weight: normal;
    margin: 20px auto;
    padding-bottom: 10px;
    width: 70%;
}

.banner-content h1 {
    color: #ffffff;
}

/*form*/

.form-title h1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 0;
}

.banner-content h1 {
    color: #ffffff;
}



.login-form .form-control {
    background-color: rgba(0, 0, 0, 0.4);
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    color: #f9bb3e;
    height: auto;
    margin-bottom: 15px;
    outline: medium none;
    padding: 13px 15px;
    transition: all 0.2s ease-in-out 0s;
}

.login-form .form-control {
    background-color: #e6e7e8;
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    color: #f9bb3e;
    height: auto;
    margin-bottom: 15px;
    outline: medium none;
    padding: 13px 15px;
    transition: all 0.2s ease-in-out 0s;
}

.login-form .forgot {
    margin: 20px 0 0;
    text-align: center;
}

.login-form .forgot a {
    color: #f9bb3e;
}

.login-form .form-title h1 { padding: 0; margin: 0 auto; width: 100%; }

.btn-submit {
    background: #d9534f;
    border: none;
    border-radius: 0;
    color: #ffffff;
    display: block;
    margin: 0 auto;
    padding: 11px;
    width: 100%;
    font-size: 18px;
}

.login-form {
    background: rgba(48, 52, 63, 0.9) none repeat scroll 0 0;
    border: 4px solid #1b1d23;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Additional style for login page */

.fa.fa-green { color: #4C7E60; margin-right: 10px; }
.login-page p, .login-page h4 { color: #fff; }
.login-page ul li { padding: 0; color: #fff; margin: 10px 0; }
.form-title { background-color: transparent; padding: 40px 0 0; color: #fff; }
.form-title h1 { color: #fff; }
.login-page .login-form input { background-color: #1B1D23; }
.btn.btn-submit-forgot { font-size: 100%; }
.login-page .login-form .form-body .error { 
    color: #D9534F;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
}

/** Account page - new **/

#header{
    background:#2a2c33;
    width:100%;
    left: 0;
    position: fixed;
    right: 0;
    transform: translate3d(0px, 0px, 0px);
    z-index: 1030;
    top:0;
}

#dashboard .container{
    margin-top:20px;
}

ul.dashboard-nav i {
    float: left;
    margin-bottom: 15px;
    margin-right: 5px;
}

.icon-da::before {
    content: url("'https://static.frootvpn.com/img/account/da-icon.png");
}

.icon-ae::before {
    content: url("'https://static.frootvpn.com/img/account/ae-icon.png");
}

.icon-ig::before {
    content: url("'https://static.frootvpn.com/img/account/ig-icon.png");
}

.icon-cp::before {
    content: url("'https://static.frootvpn.com/img/account/cp-icon.png");
}

.icon-ce::before {
    content: url("'https://static.frootvpn.com/img/account/ce-icon.png");
}

.icon-set::before {
    content: url("'https://static.frootvpn.com/img/account/set-icon.png");
}

.icon-logout::before {
    content: url("'https://static.frootvpn.com/img/account/logout-icon.png");
}


.label-notsecure {
    background: #4d7f61 none repeat scroll 0 0;
    float: left;
    font-size: 13px;
    font-weight: normal;
    margin: 0 10px;
    padding: 6px 10px;
}

.as-title{
    clear:both;
    float:left;
    width:100%;
}

.account-status .as-title h2 {
    float: left;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}

.account-status .as-title h2 span{
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    vertical-align: middle;
}

.account-status .guarantee-logo h3 {
    font-size: 17px;
    font-weight: bold;
    margin-top: 0;
}

.account-status .guarantee-logo p{
    font-size:12px;
}

.account-status {
    margin-bottom: 25px;
}

.account-status .table th {
    background: #2d313d none repeat scroll 0 0;
    color: #ffffff;
}

.account-status .accounts{
    margin:20px 0;
}

.accounts .table{
    background:#fff;
}

.accounts .table-striped{
    background:#f3f3f3;
}


.server-info > h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 0;
}

.server-box {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #000000;
    float: left;
    margin: 15px 0;
    width: 100%;
}

.server-box h4 {
    background: #2b2b2b url("'https://static.frootvpn.com/img/account/question.png") no-repeat scroll 10px center;
    color: #ffffff;
    font-size: 18px;
    margin: 0;
    padding: 7px 0 10px 39px;
}

.server-box .ans {
    padding: 20px;
}



.account-status .table-bordered {
    border: 1px solid #dddddd;
}


ul.dashboard-nav {
    margin: 20px 0;
    padding: 0;
    text-align: right;
}

ul.dashboard-nav li {
    color: #ffffff;
    font-size: 18px;
    list-style: outside none none;
    text-align: left;
}

ul.dashboard-nav a {
    background: #e3e3e3 none repeat scroll 0 0;
    border-radius: 5px;
    color: #222222;
    display: block;
    font-size: 17px;
    margin-bottom: 8px;
    padding: 10px;
    text-decoration: none;
    transition: all 0.3s ease-in-out 0s;
}

ul.dashboard-nav a:hover {
    background:#fbbb3d;
    font-weight:bold;
    border-radius:5px;
}

/* account-extension */
.account-extension { margin-bottom: 30px; }
.as-title h2 { padding: 0 0 20px; border-bottom: 1px solid #000; }
.as-title h3 { padding: 0; margin: 20px 0; font-weight: 600; }
.account-extension .all-devices {
    border: 1px solid #cccccc;
    margin: 10px;
    padding: 10px;
}

.account-extension .payment-method > img {
    height: 40px;
}

.account-extension .best-value {
    background: rgba(0, 0, 0, 0) url("'https://static.frootvpn.com/img/order/best-ribbon.png") no-repeat scroll center top;
    color: #ffffff;
    display: block;
    font-weight: bold;
    height: 25px;
    margin: 0 auto;
    width: 120px;
}

.account-extension .product-chooser-item { border: 1px solid #000 !important; height: 315px; margin-bottom: 30px !important; }
.account-extension .product-chooser-item > div .product-name { 
    font-size: 22px;
    margin: 30px 0 0;
    padding: 0 0 10px;
}

.account-extension .product-chooser-item .product-price { 
    font-family: "Lato",sans-serif;
    font-size: 48px;
    font-weight: 900;
    margin: 15px 0 0; 
    color: #e9a61f;
}

.account-extension .product-chooser-item .package { 
    background-color: #e9a61f; color: #fff;
    font-family: "Lato",sans-serif;
    font-size: 15px;
    font-weight: bold;
    margin: 11px -25px;
    padding: 5px;
    text-align: center;
}

.account-extension .product-chooser-item a.choose-plan { 
    font-size: 16px;
    padding: 5px 0;
    background-color: transparent;
    border: 1px solid #e9a61f;
    color: #e9a61f; 
}

.account-extension .control-label { color: #000; font-size: 18px; margin-bottom: 10px; }
.account-extension .product-chooser-item.selected { background-color: #e9a61f !important; }
.account-extension .product-chooser-item.selected .sale p { color: #fff; }
.account-extension .product-chooser-item.selected > div .product-name { color: #ffffff; }
.account-extension .product-chooser-item.selected .product-price { color: #fff; }
.account-extension .product-chooser-item.selected .package { background-color: #2d313d; }
.account-extension .product-chooser-item.selected a.choose-plan { color: #fff; border-color: #fff; }
.account-extension .product-chooser-item.selected .order-plan-price { color: #fff; }

.account-extension .product-chooser-item:hover {
    -webkit-transform: scale(1.1); // Safari and Google Chrome
    -webkit-transition: all 0.3s ease 0s; // Safari and Google Chrome
    transform: scale(1.1);
    transition: all 0.3s ease 0s;
    z-index: 2;
    cursor: pointer;;
}

.account-extension .less-padding { padding: 0 10px; }

/* account-setting */

.setting-info { margin-bottom: 50px; }
.setting-info .setting-box { border: 1px solid #bbb; }
.setting-info .setting-box h4 { background-color: #333; padding: 15px; color: #fff; margin: 0; }
.setting-info .setting-box .ans { padding: 30px 15px 15px; background-color: #fff; }
.setting-info .setting-box form .control-label { color: #f8ba3d; }
.setting-info .setting-box form input { background-color: #eee; }

/* =====================================================
 * Features Page
 * ===================================================== */
#banner.features-page { background-image: url('https://static.frootvpn.com/img/features/banner-feature.png'); }
.features-page .banner-content h1 { font-size: 52px; font-weight: normal; }
.features-content { padding-top: 70px; }
.features-content .features-prod { margin-bottom: 30px; padding: 15px; }
.features-content .features-prod img { height: 55px;
                                       position: relative;
                                       top: 40px;
                                       width: auto; }
.features-content .features-prod h3 { margin-bottom: 15px; height: 50px; }
.features-content .features-prod p { line-height: 1.5; color: #333; }

.blurb-image {
    border: 5px solid #F9BB3E;
    border-radius: 100px;
    margin: 0 auto 30px;
    padding: 0;
    width: 145px;
    height: 145px;
}

.features-page .banner-content h1 { font-size: 50px; border: 0 none; margin-bottom: 0; }

/* Features Sub page */
.features.order-page.has-background { background-image: url('https://static.frootvpn.com/img/features/bg-order-plan.png'); background-repeat: no-repeat; background-size: 100% 100%; }
.features.order-page .order-page-title { font-size: 36px; color: #fff; font-weight: normal; }
.features.order-page p { padding-top: 0; }
.features.order-page .best-value { background-image: url('https://static.frootvpn.com/img/order/best-ribbon.png'); }
.btn.btn-back-feature { background-color: #e8ac32; color: #fff; font-size: 18px;
                        padding: 8px 25px; margin-left: 10px; }

.btn.btn-back-feature:hover { background-color: #518867; }
.features-subheader { padding: 50px 100px; background-color: #fff; border: 1px solid #ccc; }
.features-subheader .features-title { font-weight: 700; font-size: 32px; padding-bottom: 15px; border-bottom: 2px solid #333; }
.features-subheader .features-image { width: 100%; padding: 0 20px; }

#feature-page #subscription { padding: 70px 0; }
#feature-page #subscription h2, #feature-page #facts-about h2 { font-weight: normal; font-size: 32px; }
#feature-page #subscription p, #feature-page #facts-about p { font-size: 17px; line-height: 1.5; }
#feature-page #subscription ul li, #feature-page #facts-about ul li { font-size: 19px; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #aaa; }

/* Faq page */

#banner.faq-page { background-image: url('https://static.frootvpn.com/img/keyboard_bg_grayscale.png'); }
.faq-page .banner-content h1 { font-weight: normal; font-size: 52px; }
.faq-content .froot-support, .faq-content .froot-guide { padding: 30px; border: 1px solid #ccc; background-color: #fff; }
.faq-content .headline { margin-bottom: 0; }
.qa { padding: 20px 15px; border-bottom: 1px solid #ccc; }
.qa h2 {
    background: rgba(0, 0, 0, 0) url('https://static.frootvpn.com/img/faq/question.png') no-repeat scroll left center;
    color: #242424;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 20px;
    padding-left: 29px;
    line-height: 1.2;
}
#banner.faq-support-page { background-image: url('https://static.frootvpn.com/img/features/banner-feature.png'); }
.support-content { margin-bottom: 20px; }
.support-form { padding: 20px; background-color: #2c2c2c; }
.support-form .form-title { padding-top: 10px; }
.support-form .form-title h1 { font-size: 42px; color: #F9BB3E; margin-bottom: 20px; }
.support-form .form-body { border-top: 1px solid #ccc; display: inline-block; text-align: center; width: 100%; }
.support-form .form-body p { color: #fff; }
.support-form .form-control { background-color: #fff; }


/* Additional styles */
.fa { margin: 0 5px 0 0; }
.fa.fa-accent { color: #f8ba3d !important; }

/* Button */
.btn-activate { background-color: #d9534f; border-radius: 3px; color: #fff; }
.btn.btn-accent { background-color: #518867; color: #fff; font-size: 18px;
                  padding: 8px 25px; }
.btn.btn-accent:hover { background-color: #F9BB3E; border-color: #F9BB3E; }

.error-container {
    background-color: #d9534f;
    color: #fff;
    font-size: 15px;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    border-radius: 3px;
    margin-bottom: 15px; 
}

.success-container {
    background-color: #8AE65C;
    color: #fff;
    font-size: 18px;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    border-radius: 3px;
    margin-bottom: 15px; 
}

.error-container p, .success-container p { margin-bottom: 0; }
.banner-content p { color: #fff; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.1); }

/* 404 page */
.error-404 { padding: 15px; }
.error-404 h2, .error-404 p { color: #fff; }
.error-404 h2 { font-size: 32px; }
.error-404 p { font-size: 17px; }

textarea { resize: none; }

.about-page .banner-content h1 { font-size: 52px; font-weight: normal; }

/*---- New Sitemap ----*/

#banner.sitemap-page { background-image: url('https://static.frootvpn.com/img/keyboard_bg_grayscale.png'); background-position: bottom center; }
.sitemap-page .banner-content h1 { font-weight: normal; font-size: 52px; }
.sitemap-content .row-content { padding: 50px; border-bottom: 1px solid #ccc; }
.sitemap-content .row-content .content-title { color: #466e56; font-weight: 600; margin-bottom: 20px; }
.sitemap-content .row-content .guide-title { font-size: 20px; }
.sitemap-content .row-content li {  padding-bottom: 15px; }
.sitemap-content .row-content li > a { color: #000; font-size: 16px; }
.sitemap-content .row-content li > a:hover { color: #f8ba3d; font-weight: 700; }

/** Country Service Page **/

#banner.services-page { background-image: url('https://static.frootvpn.com/img/keyboard_bg_grayscale.png'); background-position: bottom center; }
.services-page .banner-content h1 { font-weight: normal; font-size: 52px; }
.services-page-body > section { padding: 60px 30px; }
.services-page-body > .country-services { 
    background-image: url('https://static.frootvpn.com/img/country-services/bg-world.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;
    padding: 120px 30px;
}
.services-page-body > .country-services .all-devices {
    padding: 15px;
    margin-top: 30px;
}
.services-page-body > .country-services p { font-size: 18px; }
.services-page-body > .country-services ul li { margin-bottom: 5px; }
.services-page-body > .country-services ul li:before { 
    content: url('https://static.frootvpn.com/img/country-services/list-icon-check.png');
    position: relative;
    top: 3px;
    margin-right: 15px;
}

.services-page-body > section h2 { font-weight: normal; font-size: 42px; }

.services-page-body > .virtual-pathway { background-color: #2a2a2a; }
.services-page-body > .virtual-pathway h2 { font-size: 42px; }
.services-page-body > .virtual-pathway p { color: #fff; }
.services-page-body > .virtual-pathway .media .media-left { padding-right: 20px; }


.services-page-body > .join-now { background-image: url('https://static.frootvpn.com/img/country-services/bg-join-now.png'); background-repeat: no-repeat; background-size: cover; background-position: left center; }
.services-page-body > .join-now h2, .services-page-body > .join-now p { color: #fff; }
.services-page-body > .join-now p { font-size: 18px; padding-bottom: 20px; }

.services-page-body > .fight-internet-surveillance figure { padding: 30px 15px; }
.services-page-body > .fight-internet-surveillance h4 { font-weight: bold; font-size: 18px; }
.services-page-body > .fight-internet-surveillance h3 { font-size: 20px; }
.services-page-body > .fight-internet-surveillance p { line-height: 1.5; }

.margin50 { margin: 50px 0; }
.btn.btn-accent.btn-lg { font-size: 22px; padding: 15px 35px; }

/* Affiliate */
#banner.affiliate-page { background-image: url('https://static.frootvpn.com/img/affiliate/bg-banner-affiliate.png'); background-position: center top; background-size: cover; }
#banner.affiliate-page .banner-content h1 { border: 0 none; font-size: 42px; font-weight: 700; }
#banner.affiliate-page .banner-content p { border: 0 none; font-size: 18px; }
.affiliate-page-content > section ul li:before {
    content: url('https://static.frootvpn.com/img/country-services/list-icon-check.png');
    position: relative;
    top: 3px;
    margin-right: 15px;
}

.affiliate-page-content .qa { border: 0 none; }
.affiliate-page-content section .section-title { font-size: 40px; margin-bottom: 40px; }
.affiliate-page-content section p { font-size: 18px; }
.affiliate-page-content > section ul li { margin-bottom: 5px; }
.affiliate-page-content > section > div { padding: 15px; }
.affiliate-page-content > .already-affiliate h2 { font-weight: normal; font-size: 38px; }

.affiliate-page-content > section.infos { background-color: #2a2a2a; padding: 70px 30px 30px;  }

.affiliate-page-content > section.easy-step { padding: 50px; }
.affiliate-page-content > section.easy-step p { font-size: 24px; color: #333; }
.affiliate-page-content > section.easy-step .blurb p { color: #333; font-size: 16px; margin-top: 30px; }
.affiliate-page-content > section.easy-step .blurb { padding: 15px; }
.affiliate-page-content > section.easy-step .blurb .image-blurb { padding: 20px; }

.affiliate-page-content section.easy-step .section-title { margin-bottom: 70px; font-weight: normal; }

.affiliate-page-content > section.ready-to-join { 
    background-image: url('https://static.frootvpn.com/img/affiliate/bg-section.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px;
    color: #fff;
}

.media { margin: 25px 15px; }
.media > .media-left { padding-right: 25px; }
.media > .media-body p { color: #fff; font-size: 16px; }
.btn.btn-affiliate { background-color: #f8ba3d; color: #333; }
.btn.btn-affiliate.btn-lg { font-size: 24px; }
/************* Media Screen *************/

@media only screen and (max-width: 991px) {

    .order-page .addpadd {
        margin: 0;
        padding-bottom: 28px !important;
        padding-top: 20px !important;
    }

    .order-page .banner-content div.product-chooser div.product-chooser-item{
        margin-top:0;
    }

    .order-page .server-location {
        width: 97%;
    }

    /* about page */

    div.facts h3 { text-align: center; }
    .access-site-img { margin-top: 30px; }
    .banner-content p { color: #fff; } 


    /* Login page */

    .login-page .login-form { margin-top: 40px; }

    /* Feature Sub page */
    .features-subheader { padding: 35px; }
    .features-subheader .features-title { text-align: center; }
    .features-subheader .features-image { width: auto; padding: 0; margin: 20px auto; }
    .features-subheader a.btn { width: 100%; margin: 5px 0; }

}

@media only screen and (max-width: 1199px ) {
    .order-page div.product-chooser-item { height: 350px; box-shadow: none; margin-bottom: 30px; }
    .order-page .product-chooser > div { margin-bottom: 15px; }

    /* index page */

    .index-page .gadgets { top: 550px; }
    .index-page { padding-top: 0 !important; }
    .index-page .headline h2 { margin-top: 30px; }

    /* features */
    .features.order-page.has-background { background-size: auto 100%; }
    
    .container.error-404 { padding-top: 70px; }

}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .features-content .features-prod { margin-bottom: 20px; }
    .features-content .features-prod h3 { height: 70px; }
    .features-content .features-prod p { height: 120px; }
}

@media only screen and (max-width: 768px) {

    .order-page .banner-content .yellow-black{
        margin-bottom:10px;
    }

    .order-page .guarantee-logo img {
        margin: 20px auto;
    }

    .order-page .all-devices {
        margin: 0 auto;
        width: 100%;
    }

    .order-page .banner-content {
        margin: 25px;
    }

    .order-page div.product-chooser div.product-chooser-item.selected{
        margin-bottom:10px;
    }

    /* 404 page */

    .error-404 { text-align: center; }
    a.btn { width: 70%; }

}

@media only screen and (min-width: 960px ) {
    .navbar-toggle { top: 0; }
}