/*
Theme Name: HairCheck
Theme URI: http://www.haircheck.com/
Description: Identity site for HairCheck.
Version: 1.1
Author: Jayme Lam
Author URI: http://www.4threaction.com/
Tags: blue, custom header, fixed width, two columns, widgets



*/
/* CSS Document */
body{ margin:0; padding:0; background:url(images/background_slate.jpg) #000000; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:19px; }
#header{ margin:auto; width:975px; text-align: center; padding:15px 0 0 0;}
img{border:0;}

h1{ font-size:24px; margin:0 0 25px 0; padding:0;font-weight:lighter;color:#4F334A;}
h2{ font-size:20px; font-weight:lighter; margin:0 0 25px 0; padding:0; border-bottom:1px solid #CCCCCC; color:#4F334A; font-family: Helvetica, Arial,sans-serif; }
h3{font-size:18px;font-weight:lighter;  margin:10px 0; padding:0; color:#660099;}

/*
#navBar{ margin:10px 0; clear:both; }
#navBar ul{ list-style:none; text-transform:uppercase; font-size:18px; margin:0; padding:10px 0;}
#navBar ul li{display:inline;border-top:1px solid #333333;padding:2px 15px; margin:0;}
#navBar ul li a{ color:#FFFFFF; text-decoration:none; }
#navBar ul li a:hover{ color:#FFCC00;}
*/
#sideBar{ width:170px; overflow:hidden; float:left;margin-right:10px;}
#fullText{width:600px; margin:65px 0 65px 50px;}
/***************** home page elements*************/
#homeImage{width:975px; margin:auto;}

#homeBar{width:975px; margin:10px auto; height:160px;}
#homeBar #bar1{ float:left; margin-top:40px; width:435px; text-align:center;}
#homeBar #bar2 { float:left; }
#homeBar #bar2 ul{ list-style:none; padding:0; margin:0;}
#homeBar #bar2 ul li{ float:left;}
#homeBar #bar2 ul li a{ display:block; background:url(images/purple_box1.jpg) no-repeat; width:169px; height:160px; margin-left:10px;}
#homeBar #bar2 ul li a:hover{background:url(images/purple_box1_over.jpg) no-repeat #660066;}
#homeBar #bar2 ul li img{ border:0; padding:25px 0 0 15px;}


/****************** About section elements ***************/

#content{width:885px; margin:auto; margin-bottom:15px;}

#sideButtons{ width:169px;}
#sideButtons ul{ list-style:none; padding:0; margin:0;}
#sideButtons ul li a{ display:block; background:url(images/purple_box2.jpg) no-repeat; width:169px; height:130px; margin-bottom:8px;}
#sideButtons ul li a:hover{background:url(images/purple_box2_over.jpg) no-repeat #660066;}
#sideButtons ul li img{ border:0; padding:20px 0 0 15px;}

#page{ float:left; width:700px; min-height:700px; background:url(images/white_gradient.jpg) repeat-x #D7D7D7;}
#page #textArea{ width:400px; padding:65px 0 65px 50px;}
#page #pictureArea{ position:absolute; margin:20px 0 0 470px; z-index:1;}

ol{ margin:10px 20px; padding:5px;}
ol li{ margin-bottom:12px;}
ul{ margin:10px 20px; padding:5px;}
ul li{margin-bottom:12px;}

/******************** footer *******************************/
#footer{ width:885px; text-align:center; clear:both; margin:10px auto; color:#666666; padding:8px; font-size:9px; }

.homevideo {
    width: 975px;
    margin: 0 auto;
}
.homevideo video {
    object-fit: fill;
}

.slide-right {
  width: 100%;
  overflow: hidden;
  margin-left: 300px;
  max-width: 500px
}

.slide-right h2 {
  animation: 2s slide-right 2s forwards;
    transform:translateX(-10%);
}

@keyframes slide-right {
  to {
    transform:translateX(393.421px);
  }
}

.home ul.cs-slides {
    background-image: url("http://www.haircheck.com/wp-content/uploads/2022/01/Asset-2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    margin-top: 10px !important;
    /* padding: 121px !important; */
    z-index: 9;
    height: 100%;
    display: block !important;
}
.home li.cs-slide {
    width: 90% !important;
    top: 57px !important;
    text-align: center;
    bottom: 0 !important;
    left: 49px !important;
    right: 0 !important;
    height: 340px !important;
}