/*=============================================================
    Authour URL: www.designbootstrap.com
    
    http://www.designbootstrap.com/

    License: MIT

    http://opensource.org/licenses/MIT

    100% Free To use For Personal And Commercial Use.

    IN EXCHANGE JUST TELL PEOPLE ABOUT THIS WEBSITE
     
    Modifications for Freenet copyright Gerard Krol, license: MIT 
   
========================================================  */



/* =============================================================
GOOGLE FONT
============================================================ */

@import url(font-ubuntu.css); /* FREE GOOGLE FONT */
@import url(font-oswald.css); /* FREE GOOGLE FONT */



/* =============================================================
GENERAL STYLES
============================================================ */
body {
font-family: 'Ubuntu', sans-serif;
color: #fff;
background: url('../img/freenetwork-compress-harder.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: black;
font-size: 160%;
}

/* Email address obfuscation. */
.e-mail:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* Allow the previous and next buttons to appear outside the div. */
.carousel-inner {
overflow: visible;
}

section {
padding-top: 1em;
padding-bottom: 2em;
}

.pad-bottom {
padding-bottom: 60px;
}

.header {
font-family: 'Oswald', sans-serif;
padding-bottom: 40px;
text-transform: uppercase;
}

.header hr {
width: 50px;
border-top: 2px solid rgb(40, 141, 203);
}

a, a:hover, a:active {
    color: #1A8EFF;
}

.services-wrapper {
    color: #FFFFFF;
}

a:focus {
    color: white;
}

h4 {
    font-weight: bold;
}

.uppercase {
    text-transform: uppercase;
}

/* =============================================================
OVERRIDE GLOBAL COLOR FOR MODAL DIALOG
============================================================ */

.modal-content {
    color: black;
}

/* =============================================================
CUSTOM BUTTON STYLES
============================================================ */
.button-custom {
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: 25px 5px 5px 0px;
margin: 5px;
}

.btn-custom-one {
background-color: transparent;
color: #fff;
border: 2px solid rgb(40, 141, 203);
}

.btn-custom-one:hover {
background-color: rgb(40, 141, 203);
text-decoration: none;
color: #fff;
}

.btn-custom-two {
color: #fff;
background-color: rgb(40, 141, 203);
border: 2px solid rgb(40, 141, 203);
}

.btn-custom-two:hover {
border: 2px solid rgb(40, 141, 203);
text-decoration: none;
color: #fff;
background-color: transparent;
}


/* =============================================================
MENU SECTION STYLES
============================================================ */

.navbar-brand a {
    color: white;
    text-decoration: none;
}

.navbar-inverse {
background-color: rgba(0, 0, 0, 0.8);
border-color: transparent;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav-page > .active > a,
.navbar-inverse .navbar-nav-page > .active > a:hover,
.navbar-inverse .navbar-nav-page > .active > a:focus {
    background-color: transparent;
    border-bottom: 1px solid rgb(40, 141, 203);
    padding-bottom: 0px;
}

.navbar-inverse .navbar-nav > li > a,  .navbar-inverse .navbar-nav-page > li > a{
font-weight: 800;
padding: 5px 0px;
letter-spacing: 2px;
color: #FFF;
}

.navbar-inverse .navbar-nav > li > a {
font-size: 10px;
margin: 10px 20px 10px 20px;
margin-top: 0px;
padding-bottom: 1px; /* to make space for the blue activation line */
}

.navbar-inverse .navbar-nav-page > li > a {
    font-size: 13px;
    margin: 10px 1em;
}

.navbar-inverse .navbar-nav-language > li > a {
font-size: 10px;
margin-left: 10px;
color: rgb(95, 159, 208);
z-index: 999; /* so you can actually click them */
}

#menu-section > div > div.navbar-collapse.collapse.navbar-language {
height: 0px !important;
}

.navbar-inverse .navbar-nav-language {
height: 0px;
margin-top: -3px; /* fixme: negative margins are ugly */
}

.navbar-inverse .navbar-nav-page {
margin-top: 5px; /* to create room for the language bar */
}

/* Max width of navbar-nav-page for each of the sizes to avoid
breaking up the header. */
@media (min-width: 768px) {
    .navbar-inverse .navbar-nav-page { max-width: 600px; }
}
@media (min-width: 992px) {
    .navbar-inverse .navbar-nav-page { max-width: 800px; }
}
@media (min-width: 1200px) {
    .navbar-inverse .navbar-nav-page { max-width: 1000px; }
}


.navbar-inverse .navbar-brand, .navbar-inverse .navbar-brand:hover {
color: #fff;
font-weight: 900;
font-family: 'Oswald', sans-serif;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: rgb(152, 188, 225);
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: rgb(40, 141, 203);
}
.navbar-inverse .navbar-toggle {
border-color: rgb(40, 141, 203);
}

/* =============================================================
HOME SECTION STYLES
============================================================ */

#home {
text-align: center;
}

#home .sidebar {
padding-top: 7em;
}

#donate_button {
    padding-top: 3.5em;
}

#home .download {
padding: inherit;
}

#donate_fineprint {
    font-size: 85%;
    margin-top: 5px;
}

.readmore:before {
    content: '('
}

.readmore:after {
    content: ')'
}

#home .social {
display: block;
margin: 50px 20px;
}

/*Carousel Slider*/

#carousel-slider {
padding-left: 20px;
padding-right: 20px;
}

#carousel-slider p {
margin-left: 20px;
margin-right: 20px;
}

/*Hide Suma-award notice on small screens*/
@media screen and (max-width: 767px) {
  #suma_award_notice {
          visibility: hidden;
          height: 0px;
  }
}

/*Main Logo*/
#home-logo {
    margin-top: 2em;
    margin-bottom: 1em;
}

#home-download {
    margin-top: 1em;
    margin-bottom: 2em;
}

#home-slogan {
}
#home-mission {
}


/*Donate button*/

@media screen and (max-width: 767px) {
  #donate_button {
          max-width: 50%;
          margin-right: auto;
          margin-left: auto;
  }
}

/*Progress Bars from CSS-tricks.

- https://css-tricks.com/css3-progress-bars/

Any kind of usage allowed: https://css-tricks.com/license/ */

.meter .quantity {
  z-index: 10;
  line-height: 1.25em;
  position: absolute;
  font-size: medium;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.meter {
	height: 30px;
    margin-bottom: 0.5em;
	position: relative;
	background: #00375E;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 5px;
	-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
	-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
	box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
	display: block;
	height: 100%;
    padding: 1px;
    text-align: center;
    font-size: x-small;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	background-color: rgb(43,194,83);
	background-image: -webkit-gradient(
	  linear,
	  left bottom,
	  left top,
	  color-stop(0, rgb(43,194,83)),
	  color-stop(1, rgb(84,240,84))
	 );
	background-image: -moz-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	-webkit-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	-moz-box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	box-shadow: 
	  inset 0 2px 9px  rgba(255,255,255,0.3),
	  inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: visible;
	white-space: nowrap;
}
.meter > span:after, .animate > span > span {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: 
	   -webkit-gradient(linear, 0 0, 100% 100%, 
	      color-stop(.25, rgba(255, 255, 255, .2)), 
	      color-stop(.25, transparent), color-stop(.5, transparent), 
	      color-stop(.5, rgba(255, 255, 255, .2)), 
	      color-stop(.75, rgba(255, 255, 255, .2)), 
	      color-stop(.75, transparent), to(transparent)
	   );
	background-image: 
		-moz-linear-gradient(
		  -45deg, 
	      rgba(255, 255, 255, .2) 25%, 
	      transparent 25%, 
	      transparent 50%, 
	      rgba(255, 255, 255, .2) 50%, 
	      rgba(255, 255, 255, .2) 75%, 
	      transparent 75%, 
	      transparent
	   );
	z-index: 1;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	-webkit-animation: move 2s linear infinite;
	   -webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	       -moz-border-radius-topright: 8px;
	    -moz-border-radius-bottomright: 8px;
	           border-top-right-radius: 8px;
	        border-bottom-right-radius: 8px;
	    -webkit-border-top-left-radius: 20px;
	 -webkit-border-bottom-left-radius: 20px;
	        -moz-border-radius-topleft: 20px;
	     -moz-border-radius-bottomleft: 20px;
	            border-top-left-radius: 20px;
	         border-bottom-left-radius: 20px;
	overflow: hidden;
}

.animate > span:after {
	display: none;
}

/* Animation disabled
@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}
*/

.orange > span {
	background-color: #f1a165;
	background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
	background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
}

.red > span {
	background-color: #f0a3a3;
	background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
	background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.blue > span {
	background-color: rgb(40, 141, 203);
	background-image: -moz-linear-gradient(top, rgb(40, 141, 203), rgb(80, 181, 223));
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(40, 141, 203)),color-stop(1, rgb(0, 51, 207)));
	background-image: -webkit-linear-gradient(rgb(40, 141, 203), rgb(0, 51, 207));
}

.nostripes > span > span, .nostripes > span:after {
	-webkit-animation: none;
	background-image: none;
}



/* =============================================================
SERVICES SECTION STYLES
============================================================ */

#services .services-wrapper {
padding: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 40px;
background-color: rgba(255, 255, 255, 0.07);
/* cursor: pointer; not a link at the moment! */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
height: 16em; /* so they are all the same height */
}

#services .services-wrapper:hover {
background-color: rgba(255, 255, 255, 0.20);
}

#services h3 {
font-family: 'Oswald', sans-serif;
}

#services .services-wrapper i {
margin: 5px;
color: rgb(40, 141, 203);
font-size: 60px;
}


/*============================
PRICING SECTION STYLES
==============================*/

.light-pricing {
margin-bottom: 30px;
margin-top: 50px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
line-height: 30px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.light-pricing:hover {
background-color: transparent;
}

.light-pricing ul {
list-style: none;
margin: 0;
text-align: center;
padding-left: 0px;
}

.light-pricing ul li {
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}

.light-pricing ul li i {
margin-right: 5px;
}


.light-pricing .price {
padding: 40px 20px 20px 20px;
font-size: 60px;
font-weight: 900;
}

.light-pricing .price small {
color: #000;
display: block;
font-size: 15px;
margin-top: 22px;
}

.light-pricing .type {
background-color: rgba(0, 0, 0, 0.40);
padding: 30px 20px;
font-weight: 900;
text-transform: uppercase;
font-size: 30px;
color: rgb(40, 141, 203);
}

.light-pricing .pricing-footer {
padding: 20px;
}

.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
padding-left: 0;
padding-right: 0;
}

.light-pricing.popular {
margin-top: 10px;
}

.light-pricing.popular .price {
padding-top: 80px;
}


/*============================
WORK SECTION STYLES
==============================*/

#work .caegories a.active {
background-color: transparent;
color: #fff;
}

.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}

#work .work-wrapper {
padding: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 40px;
background-color: rgba(255, 255, 255, 0.1);
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border: 1px solid rgb(40, 141, 203);
}

#work .work-wrapper:hover {
background-color: transparent;
border: 1px solid rgb(40, 141, 203);

opacity: .80; /* standard: ff gt 1.5, opera, safari */
-ms-filter: "alpha(opacity=80)"; /* ie 8 */
filter: alpha(opacity=80); /* ie lt 7 */
-khtml-opacity: .80; /* safari 1.x */
-moz-opacity: .80; /* ff lt 1.5, netscape */

}

#work .work-wrapper h4 {
padding-top: 10px;
}



/*============================
TEAM SECTION STYLES
==============================*/


.team-wrapper {
overflow-x: hidden;
position: relative;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transform: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-bottom:30px;
}
.team-wrapper:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.team-wrapper .team-inner {
background-size: cover;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
padding: 150px 0 10px;
/*background-image: url('../img/girl-big.jpg');*/
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
border-radius: 10px 10px 0px 0px;
}

.team-wrapper > .team-inner > a {
color: rgb(40, 141, 203);
width: 80px;
height: 80px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin: 0 auto -50px;
display: block;
color: rgb(40, 141, 203);
z-index: 999;
font-size: 40px;
padding: 15px 22px;
background-color: #fff;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

.team-wrapper > .team-inner > a:hover {
color: #fff;
text-decoration: none;
background-color: rgb(40, 141, 203);
}


.team-wrapper .description {
padding: 30px 20px 20px;
text-align: center;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}

.team-wrapper .description h5 {
color: rgb(40, 141, 203);
}



/*============================
CONTACT SECTION STYLES
==============================*/

#contact .contact-wrapper {
background-color:rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 40px;
min-height:200px;
}
#contact .contact-wrapper h3 {
color:rgb(40, 141, 203);
}
#contact .social-below {
display: block;
margin-top: 5px;
}
.footer-div {
padding-top:25px;
}
.footer-div a,.footer-div a:hover {
font-size:10px;

color:#fff;
text-decoration:none;
}

/* Fix fadein so browser search for text works on long pages */
/* opacity is changed to 0.1 from Javascript for in-freenet compat */
.animate-in,
.animate-out {
	visibility: visible !important;
	opacity: 1.0 !important;
}