/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 5/07/2016, 9:23:42 PM
    Author     : Julie
*/
.leadingletter {
  float:left;
  /*width:45px;*/
  font-size:60px;
  color:#0066FF;
  font-weight: bold;  
}

.profile{
  margin: 20px 0px 10px 0px;
}

.img-row{
  display: inline-block;
}

.img-row img{
  margin: 20px;
  width: 150px;
  vertical-align: top;
}

.img-row figcaption {
  /*border: 1px dotted blue;*/
  text-align: center;
  font-size: 0.9em;
  font-weight: 500;
}

.sgl-item{
  /*width: 400px;*/
  margin-top: 40px;
  text-align: center;
}

.group-item{
  margin-top: 40px;
}

.sgl-item img{
  width: 400px;
  margin-top: 20px;
}

.sgl-item figcaption{
  text-align: center;
  font-size: 0.9em;
  font-weight: 500;
}

.prod-nav{
  font-size: 0.8em;
  font-weight: bold;
}

.prod-nav a{
  margin: 5px;
}

.prod-left, .prod-descr {
  display: inline-block; 
  vertical-align: top;
}

.prod-left{
  width: 65%;
  margin-right: 30px;
}

.prod-descr{
  margin-top: 100px;
  font-size: 0.8em;
  /*font-weight: bold;*/
  width: 30%;
  /*max-width: 250px;*/
}

.prod-descr li{
  line-height: 30px;
}

.prod-descr li i{
  /*list-style-image: url('../images/bullet.png');*/   
  /*font-size: 30px;*/
  font-weight: bold;
  font-family: 'FontAwesome';
  color: #3167db;
}

.descr-title{
  font-weight: 500;
  font-size: 1em;
}

.home-prod{
  text-align: center; 
  color: #fff; 
  font-size:22px;
  font-weight:500;
}

.home-prod img{
  border: #fff ridge 5px;
  margin: 10px auto;
  display: block;
  width: 420px;
  /*background: #fff;*/
}

.home-prod a:hover{
  /*color: #009;*/
  color: #fff;
  font-size:23px;
  /*font-weight: 800;*/
}
.home-youtube-hide{
  position: absolute;
  /*top:0px;*/
  right: 15px;
  z-index:1000;
}

.home-youtube{
  margin-left: 25%;
  margin-right: 25%;
  width:50%;
  text-align:center;
  position: absolute;
  top:200px;
  z-index:1;
}

.x-button{
  width: 30px;
  height: 30px;
  border: 2px solid red;
  border-radius: 15px;
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2000;
  color: red;
  line-height: 23px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}

.yt-wrap{
  width: 560px;
  height: 315px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.yt-wrap-small {
  width: 280px;
  height: 158px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.home-active, .home-active ul li{
  z-index:1001;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .img-row img {
    width: 130px;
  }

  .img-row figcaption {
    font-size: 0.9em;
  }

  .home-prod img{
    width: 330px;
  }

  .home-youtube{
    margin-left: 25%;
    margin-right: 25%;
    width:50%;
    text-align:center;
    position: absolute;
    top:200px;
    z-index:1000;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .img-row img {
    width: 110px;
  }

  .img-row figcaption {
    font-size: 0.8em;
  }

  .home-prod img{
    width: 280px;
  }

  .home-youtube{
    top:330px;
  }
}

@media (min-width: 496px) and (max-width: 767px) {
  .img-row img {
    width: 90px;
  }

  .prod-descr{
    margin: 100px 0 0 30px;
  }

  .img-row figcaption {
    font-size: 0.7em;
  }

  .home-prod img{
    width: 220px;
  }

  .home-youtube{
    top: 180px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 495px) {
  .prod-left, .prod-descr {
    display: block; 
  }

  .prod-descr{
    margin: 30px 0 0 20px;
    font-size: 0.7em;
    /*font-weight: 500;*/
    width: auto;
  }

  .prod-descr-inner{
    width: 60%;
    margin: 0 auto 0 !important;
  } 

  .prod-left{
    width: 100%;
    text-align: center;
  }

  .img-row img {
    width: 110px;
  }

  .img-row figcaption {
    font-size: 0.7em;
  }

  .home-prod img{
    width: 150px;
  }

  .home-youtube{
    top: 180px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}