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



@font-face {
  font-family:'VWTextWeb-Regular';
  src:url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Regular.eot");
  src:url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Regular-.eot#iefix") format("embedded-opentype"),
  url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Regular.woff") format("woff"),
  url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Regular.ttf") format("truetype"),
  url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Regular.svg#VWTextWeb-Regular") format("svg");
  font-weight:100;
  font-style:normal;
}

@font-face {
  font-family:'VWTextWeb-Bold';
  src:url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Bold.eot");
  src:url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Bold-.eot#iefix") format("embedded-opentype"),
  url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Bold.woff") format("woff"),
  url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Bold.ttf") format("truetype"),
  url("../vwfonts/VW_2015/Volkswagen_Text/Webfonts_TTF/VWTextWeb-Bold.svg#VWTextWeb-Bold") format("svg");
  font-weight:400;
  font-style:normal;
}

@font-face {
  font-family:'VWHeadWeb-Regular';
  src:url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Regular.eot");
  src:url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Regular-.eot#iefix") format("embedded-opentype"),
  url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Regular.woff") format("woff"),
  url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Regular.ttf") format("truetype"),
  url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Regular.svg#VWHeadWeb-Regular") format("svg");
  font-weight:100;
  font-style:normal;
}

@font-face {
  font-family:'VWHeadWeb-Bold';
  src:url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Bold.eot");
  src:url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Bold-.eot#iefix") format("embedded-opentype"),
  url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Bold.woff") format("woff"),
  url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Bold.ttf") format("truetype"),
  url("../vwfonts/VW_2015/Volkswagen_Head/Webfonts_TTF/VWHeadWeb-Bold.svg#VWHeadWeb-Bold") format("svg");
  font-weight:400;
  font-style:normal;
}



.white{
  background-color: #ffffff;
    padding-top: 150px;

}
body{
  background-color: transparent;
  font-family:'VWTextWeb-Regular', "Open Sans", arial, helvetica, sans-serif;
}

.header{

  position:fixed;
  background-color: #eceeef;
  width:100%;
  z-index: 1001;
  -webkit-box-shadow: 0px 3px 22px -1px rgba(0,0,0,0.75);
     -moz-box-shadow: 0px 3px 22px -1px rgba(0,0,0,0.75);
          box-shadow: 0px 3px 22px -1px rgba(0,0,0,0.75);
}

.headerimg{
  padding-top:20px;
  padding-bottom:20px;

}
.white-fade{
  background-color: rgba(255,255,255,0.8);
  min-height:1000px;
}

.mobileicon{
margin-top:-15px;

  padding:10px;
  height: 50px;
  width: 50px;
}

#profileinfo{
  border-top:5px solid #222222;
  position:fixed;
  bottom:0px;
  left:0px;
  background-color: #f2f2f2;
  z-index: 999;
  width:100%;
}

#profileinfo .container{
  padding: 0px;
}

#profileinfo .profilePic{

  height: 50px;

}
#profileinfo .upbutton{
  height: 50px;
  width:50px;
}

#profileinfo .infoholder{
  display:none;

}

.navbar{
  margin-bottom: 0px;
}

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 14px;
    background-color: rgba(1, 177, 236, 1);
    border-width: 0px;
    border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(1, 177, 236, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(183, 196, 27, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(236, 167, 25, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
color:#ffffff;
font-size: 1.2em;
    border:0px;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #eca719;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #01b1ec;
}

.navbar-collapse{
  border:0px;
}

.navigationHolder{
  background-color: #01b1ec;

}



.panel-blue {
    border-color: #00b1eb;
    background-color: rgba(0,177,235,0.75);
    color:#ffffff;
}

.panel-blue .btn-default{
  background-color: #00b1eb;
    border-color: #00b1eb;
    color:#ffffff;
}

.panel-green {
    border-color: #bac903;
    background-color: rgba(186,201,3,0.75);
       color:#ffffff;
}
.panel-green .btn-default{
  background-color: #bac903;
    border-color: #bac903;
    color:#ffffff;
}

.panel-orange {
    border-color: #f7a600;
    background-color: rgba(247,166,0,0.75);
       color:#ffffff;
}
.panel-orange .btn-default{
  background-color: #f7a600;
    border-color: #f7a600;
    color:#ffffff;
}
.comment-post{
  background-color: #ffffff;
  padding:10px;
  color:#222222;
  margin-top: 10px;
  font-size: 1em;
}

.comment-post h3{
  margin: 0px;
}
.comment-post p{
  margin-top: 10px;
  margin-bottom: 10px;
}
.comment-user{
  font-size: 1.5em;
}


.achevementbox{
  width:100%;
  display:block;
}
.achevementbox img{
  padding: 3px;

}

.infoholder {
  padding-top: 10px;
  text-align: center;
}

.infoholder .squarebutton {
padding-top: 14px;
    padding-bottom: 14px;
    font-size:3em;
    width:100%;
    margin-bottom: 10px;
}

.blue{
    border-color: #00b1eb;
    color:#00b1eb;
}
.green{
    border-color: #bac903;
       color:#bac903;
}
.orange{
    border-color: #f7a600;
       color:#f7a600;
}

.contain-i-e-s,.icon-empty-star,.text-i-e-s{
  height:100px; width:100px;
}
.contain-i-e-s{
  position:relative;
}
.text-i-e-s{
  text-align:center; position:absolute;
}


.icon_counter_red {
    background-color      : #c41b1b;
}


.icon_counter_blue {
    background-color      : #00b1eb;
}

.icon_counter_green {
    background-color      : #bac903;
}

.icon_counter_orange {
    background-color      : #f7a600;
}

.commentImg{
  width:80px;
}

.icon_counter {
    color                 : #fff;
    font-family           : "Arial";
    font-size             : 10px;
    font-weight           : 600;
    
    position              : absolute;
    right: -4px;
    top:-6px;

    padding               : 4px 8px;
    margin-top            : 0px;
    margin-left           : 0px;

    -webkit-border-radius : 10%;
    -moz-border-radius    : 10%;
    border-radius         : 10%;

  
}


.name{
  font-size:1.4em;
  line-height: 1.2em;

}

#maincontent{
  padding-top: 80px;
}


.miniprofile{
  margin: 15px;
}
.miniprofile img{
  height: 20px;
  display: inline-block;

  margin-right:10px;
    margin-left:10px;
    border:1px solid #ccc;
}

.achevementbox_profile img{
  width:10%;
  float: left;
}
.btn-text{
  font-size: 14px;
  white-space: normal;
}

.commentBox{
  background-color: rgba(255,255,255,0.8);
  padding:10px;
}

  /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
.infoholder .squarebutton {

    font-size:2em;
}
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

      html { 
  background: url(../images/bkg1.jpg) no-repeat center bottom fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#maincontent{
  padding-top: 180px;
}


 
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {


#profileinfo{
  position:fixed;
  bottom:auto;
  left:auto;
  top:180px;
  width:280px;
  padding: 10px;
}

#profileinfo .infoholder{
  display:block;
}


#profileinfo .profilePic{
  border:3px solid #ffffff;
  height: auto;
}

#profileinfo .name{
  color: #777777;
  font-size: 1.5em;
  line-height: 1em;
  font-weight:bold;
  padding-top:10px;
}




    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
.infoholder .squarebutton {
    font-size:3em;
}


#profileinfo{
  top:180px;
  width:320px;

}
    }



/*
media query for navbar collapse change
*/



@media (min-width: 768px) and (max-width: 1200px) {


   .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
      display:block !important;
  }

}