/*
******************************************************************************
*/

html,
body {
  height: 100%;
  /* font-family: "Roboto Condensed", "Helvetica Neue",Helvetica,Arial,sans-serif; */
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #777;
}

@media only screen and (max-width: 768px) {
  .hint-block {
    margin-bottom: 1.5em;
  }
}


.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.form-group {
  margin-bottom: 2px;
}

div.required label:after {
  content: " *";
  /* color: red; */
}


/* SLnote Auto 2016 customs */
h4 {
  color: #df5712;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent;
  color: #df5712;
}

.navbar-nav > li {
  font-size: 16px;
}

.navbar-default .navbar-nav > li > a:hover {
  background-color: #e7e7e7;
}

.navbar-default .navbar-toggle {
  background-color: transparent;
  border: medium none;
  text-align: center;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:active {
  background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #df5712;
  height: 4px;
  width: 28px;
  border-radius: 2px;
}

.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:active .icon-bar {
  background-color: #007fff;
}

img.sc_powered_by {
  height: 40px; margin-top: -10px; margin-left: 10px;
}

div.site-rekisteriseloste > div {
  margin-top: 15px;
  margin-bottom: 30px;
}

div.site-koeajon-saannot > ul > li {
  margin-top: 15px;
}


.square {
  float:left;
  position: relative;
  width: 10%;
  padding-bottom : 10%; /* = width for a 1:1 aspect ratio */
  margin:1.25%;
  margin-top:0;
  margin-bottom:2.5%;
  overflow:hidden;
  border: 3px solid white;
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  
}

@media only screen and (max-width: 768px) {
  .square {
    width: 20%;
    padding-bottom : 20%; /* = width for a 1:1 aspect ratio */
    margin:2%;
    margin-top:0;
    margin-bottom:3.5%;
  /* *************************** */
  }
}

.square.open {
  background-color: white;
}

.square.open.selected {
  border: 3px solid #2A3583;
}

.content {
    position:absolute;
    height:100%; /* = 100% - 2*10% padding */
    width:100%; /* = 100% - 2*5% padding */
    /* padding: 10% 5%; */
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
  display:table-cell;
  vertical-align:middle;
  height:100%;
  width:100%;
  text-align: center;
  background-color:rgba(255, 255, 255, 0.5);
  color: #C20E1A;
  font-size: 1.5vw;
  line-height: 1.5vw;
}

.table-cell .closed-luukku {
  font-size: 5vw;
  line-height: 5vw;
}

.top-left {
  position: absolute; 
  top: 0.5vw; 
  left: 0.5vw;
  font-size: 2vw;
  line-height: 2vw;
}



#product-intros {
  padding-top: 40px;
  background-color: white;
}

#product-intros img.product-intro-image {
  width: 100%;
  border: 1px solid #eaeaea;
}

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

  #product-intros img.product-intro-image {
    /* width: 50%; */
  }
}


.glyphicon-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid green;
  color: green;
  display: inline-table;
  text-align: center;
  /* padding-left: 3px; */
  padding-bottom: 3px;
}

.glyphicon-ring.minus {
  border-color: red;
  color: red;
}
/**CSS FOR ICON WITH NO BACKGROUND COLOR**/

td .glyphicon-ring {
border-collapse: initial;
}

.glyphicon-ring .glyphicon-bordered {
  font-size: 14px;
  vertical-align: middle;
  display: table-cell;
}

#cart_section {
  padding-top: 40px;
  background-color: white;
}