/*Template: Calliope
  Author: Towfiq I.
  website: www.towfiqi.com
*/
body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background: #F2F2F2;
    color: #666;
	font-size: 16px;
	line-height: 1.3em;
}

/*Fonts*/
a {
    font-size: 12px;
    color: #666;
}

a:link {
    color: #999999;
    text-decoration: none;
}

a:visited {
    color: #999999;
    text-decoration: none;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

h2 {
    font-size: 24px;
    font-weight: bold;
    color: #222;
    margin: 0px;
}

h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

h4 {
    font-size: 11px;
}

@font-face {
    font-family: 'TimesNewUnicode';
    src: url('times_new_uni.eot');
    src: url('times_new_uni.eot?#iefix') format('embedded-opentype'),
						 url('times_new_uni.woff') format('woff'),
						 url('times_new_uni.ttf') format('truetype'),
						 url('times_new_uni.svg#times_new_uni') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Fonts END*/
div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
}

#header {
    background: #222222;
    height: 98px;
    border-bottom: solid 2px #fb9806;
}

#toprow {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: url("images/background3.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: cover;
    border-bottom: 5px solid #9FCA18;
    height: 380px;
}

#toprowsub {
    height: 768px;
    background: #FFFFFF url(images/background3.jpg) repeat-x;
}

#toprowsub h2 {
    padding: 15px 30px;
}

#midrow {
    width: 960px;
    margin: 0 auto;
}

#bottomrow {
    width: 960px;
    margin: 1px auto;
}

/*LOGO*/
#logo {
    padding-top: 8px;
    width: 287px;
    float: left;
}

#logo a {
    background: url(images/logo.png) no-repeat;
    display: block;
    width: 287px;
    height: 80px;
    text-indent: -10000px;
}

/*LOGO END*/
/*Menu CSS*/
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    position: relative;
    color: #E8E8E8;
}

#cssmenu {
    height: 98px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;

    /*background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);*/
    border-bottom: 2px solid #fb9806;
}

#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
}

#cssmenu a {
    /*background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #999999;*/
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 98px;
    padding: 0 20px;
    text-decoration: none;
}

#cssmenu ul {
    list-style: none;
}

#cssmenu > ul {
    float: right;
}

#cssmenu > ul > li {
    float: left;
}

#cssmenu > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fb9806;
    margin-left: -10px;
}

#cssmenu > ul > li:first-child > a {
    border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
}

#cssmenu > ul > li:last-child > a {
    border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
}

#cssmenu > ul > li.active > a {
    -moz-box-shadow: inset 0 0 3px #000000;
    -webkit-box-shadow: inset 0 0 3px #000000;
    background: #070707;
    background: -moz-linear-gradient(top, #222222 0%, #070707 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}

#cssmenu > ul > li:hover > a {
    background: #070707;
    background: -moz-linear-gradient(top, #222222 0%, #070707 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}

#cssmenu .has-sub {
    z-index: 1;
}

#cssmenu .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 200px;
    top: 100%;
    left: 0;
}

#cssmenu .has-sub ul li {
    margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
    background: #fb9806;
    border-bottom: 1px dotted #ed7c02;
    filter: none;
    font-size: 11px;
    display: block;
    line-height: 120%;
    padding: 10px;
}

#cssmenu .has-sub ul li:hover a {
    background: #ed7c02;
}

#cssmenu .has-sub .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}

#cssmenu .has-sub .has-sub ul li a {
    background: #0c7fb0;
    border-bottom: 1px dotted #6db2d0;
}

#cssmenu .has-sub .has-sub ul li a:hover {
    background: #095c80;
}

/*Menu End CSS*/
/* Tab Menu */
#ts_tabmenu {
    font-size: .75em; /* set the font size */
    padding: 44px 0px 0px 1px; /* set the padding */
}

#ts_tabmenu ul {
    line-height: 1em; /* setting the line height now so we don't have any headaches*/
    margin: 0px; /* let's keep the margin set to 0 for the same reasons as above*/
    list-style-type: none; /* we remove the UL's default disc bullets */
    float: right; /* we float the list to the left like we will all the elements inside*/
    padding: 0px 0px 0px 1px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}

#ts_tabmenu ul li {
    float: left; /* floatin' left */
}

#ts_tabmenu ul li a {
    text-decoration: none; /* remove the default underline off the anchor text */
    display: block; /* we display this text as block so that we can apply padding/margin without problems */
    float: left; /* floatin' left, to make the menu horizontal */
    padding: 0px 0px 0px 12.8px;  /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
    background: url(images/tabs0000.gif) no-repeat left top;  /* we link to the tabs image, no tiling, showing the top left part of it */
    margin-left: -6px;  /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
    z-index: 0; /* keep it on layer 0 (default) */
    position: relative;  /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
    color: #666666;  /* color of the tab text */
}

#ts_tabmenu ul li a strong {
    font-weight: normal;   /* remove the bold effect */
    display: block;   /* display the strong element as a block so we can pad it, etc. */
    float: left;   /* float it left as well */
    background: url(images/tabs0000.gif) no-repeat right top;  /* now we show the right part of the tab and we complete the "puzzle" */
    padding: 6px 10px 7px 5px;  /* important, as through this you define the position of the text within the tab */
    cursor: pointer;  /* this makes the browser show the "hand" cursor when hovering over the tab */
}

#ts_tabmenu ul li a:hover {
    position: relative; /* again, keep things relative */
    z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
    background: url(images/tabs0000.gif) no-repeat left bottom;  /* now we show the bottom part of the tabs image, the "hover" instance */
    color: #000000;   /* we color the hovered tab's text black */
}

#ts_tabmenu ul li a:hover strong {
    background-image: url(images/tabs0000.gif) no-repeat;
    position: relative; /* keep it relative */
    z-index: 5; /* show this on layer 5 as well */
    background-position: right bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}

#tsmenu1 #li_tsmenu1 a,
#tsmenu2 #li_tsmenu2 a,
#tsmenu3 #li_tsmenu3 a,
#tsmenu4 #li_tsmenu4 a,
#tsmenu5 #li_tsmenu5 a,
#tsmenu6 #li_tsmenu6 a,
#tsmenu7 #li_tsmenu7 a {
    position: relative;
    z-index: 5;
    background: url(images/tabs0000.gif) no-repeat left bottom;
}

#tsmenu1 #li_tsmenu1 a strong,
#tsmenu2 #li_tsmenu2 a strong,
#tsmenu3 #li_tsmenu3 a strong,
#tsmenu4 #li_tsmenu4 a strong,
#tsmenu5 #li_tsmenu5 a strong,
#tsmenu6 #li_tsmenu6 a strong,
#tsmenu7 #li_tsmenu7 a strong {
    background-image: url(images/tabs0000.gif) no-repeat;
    position: relative;
    z-index: 5;
    background-position: right bottom;
}

/* Tab menu END */
/*Menu Begin*/
#menu {
    float: right;
    margin-top: 30px;
}

#menu ul li {
    display: inline;
    list-style-type: none;
}

#menu ul li a {
    padding: 5px 0px;
    font-size: 14px;
    text-decoration: none;
    margin: 0px 10px;
    font-weight: bold;
}

#menu ul li a span {
    font-size: 14px;
    text-decoration: none;
    padding: 0px 10px;
    color: #999999;
}

/*#menu ul li a.active{background:url(images/menur.gif) no-repeat right;}
#menu ul li a.active span{background:url(images/menul.gif) no-repeat left; padding:5px 10px;color:#333;}
#menu ul li a:hover{background:url(images/menur.gif) no-repeat right; font-weight:bold;}
#menu ul li a:hover span{background:url(images/menul.gif) no-repeat left; padding:5px 10px;color:#333;}
/*Menu End*/
.center {
    width: 960px;
    margin: 0 auto;
}

/*SlideShow Begin*/
#cu3er-container {
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 960px;
}

#cubershadow {
    width: 960px;
    height: 372px;
    background: url(images/shadow.jpg) no-repeat bottom;
}

/*SlideShow End*/
/*Homepage Boxs*/
#container {
    float: left;
}

.box {
    margin-top: 10px;
    padding-top: 10px;
    width: 298px;
    height: auto;
    float: left;
    background: url(images/border.jpg) no-repeat bottom right;
}

.box h1 {
    padding-left: 10px;
}

.box p {
    margin: 0px;
    width: 270px;
    padding: 5px 5px 10px 15px;
    float: left;
}

.last {
    background: none;
}

a.plan {
    float: left;
    display: block;
    width: 83px;
    height: 101px;
    background: url(images/plan.jpg) no-repeat 0px -101px;
    text-indent: -1000px;
}

a.plan:hover {
    background-position: 0px 1px;
}

a.whyus {
    margin-top: 10px;
    float: left;
    display: block;
    width: 83px;
    height: 87px;
    background: url(images/whyus.jpg) no-repeat 0px 0px;
    text-indent: -1000px;
}

a.whyus:hover {
    background-position: 0px -88px;
}

a.support {
    margin-top: 14px;
    float: left;
    display: block;
    width: 83px;
    height: 72px;
    background: url(images/support.jpg) no-repeat 0px 0px;
    text-indent: -1000px;
}

a.support:hover {
    background-position: 0px -70px;
}

a.button {
    background: url(images/buttonr.gif) no-repeat right;
    padding: 3px 0px;
    margin-left: 2px;
    color: #CCCCCC;
    text-decoration: none;
}

.button span {
    background: url(images/buttonl.gif) no-repeat left;
    padding: 3px 5px;
}

/*Homepage Boxs END*/
/*Subpage Boxs*/
#box2holder {
    padding: 30px;
}

.box2 {
    width: 900px;
    padding: 12px 0px;
}

.box2 img {
    padding: 12px;
}

.box2 h3 {
    margin: 0px;
    padding: 0px 5px;
    float: left;
}

.box2 p {
    width: 220px;
    float: left;
    padding: 5px 5px;
    margin: 0px;
}

/*Subpage Boxs END*/
/*Footer*/
#footer {
    background: #222222;
    float: left;
    width: 100%;
    height: 35px;
    border-top: solid 1px #333333;
    position: fixed;
    bottom: 0;
}

.foot {
    width: 960px;
    margin: 0 auto;
    padding: 10px 0px;
    font-size: 12px;
}

.foot a:link {
    color: #999;
    text-decoration: none;
}

/*Footer END*/
.textbox {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 2px #C0C0C0;
    float: left;
    margin-bottom: 60px;
    min-height: 313px;
    padding: 10px 0px;
    width: 960px;
}

.textbox2 {
    padding-right: 40px;
    padding-bottom: 10px;
    padding-left: 40px;
    background: none repeat scroll 0 0 #FFFFFF;
    min-height: 610px;
    padding-top: 10px;
    margin-top: -700px;
    box-shadow: 1px 1px 2px #C0C0C0;
    border: 1px solid #CCCCCC;
    margin-left: 0px;
}

.textbox3 {
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    background: none repeat scroll 0 0 #FFFFFF;
    padding-top: 10px;
    margin-top: -9px;
    box-shadow: 2px 2px 2px #C0C0C0;
    border: 1px solid #CCCCCC;
}

.textbox4 {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 2px #C0C0C0;
    float: left;
    margin-bottom: 60px;
    margin-top: -660px;
    min-height: 313px;
    padding: 10px 0px;
    width: 960px;
}

.mailback {
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    background: url("images/mail-back.jpg") repeat-y scroll 0 0 #FFFFFF;
    min-height: 610px;
    padding-top: 10px;
    margin-top: -700px;
    box-shadow: 1px 1px 2px #C0C0C0;
    border: 1px solid #CCCCCC;
}

.feed {
    width: auto;
    float: left;
}

.feed img {
    border: solid 0px;
    margin-top: 120px;
    padding: 0px 7px;
}

img.border {
    display: block;
    padding: 8px;
    border: solid;
    border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
    border-width: 1px 2px 2px 1px;
    background-color: white;
    margin: 30px auto 10px;
}

#left_column {
    float: left;
    padding: 5px 10px 5px 30px;
    width: 560px;
}

#right_column {
    float: right;
    padding: 5px 30px 5px 10px;
    width: 300px;
}

#left_column2 {
    float: left;
    padding: 16px 10px 5px 30px;
    width: 620px;
}

#right_column2 {
    float: right;
    padding: 5px 30px 5px 10px;
    width: 260px;
}

/*Accordion*/
/* [THE ENTIRE TAB] */
.tab {
  position: relative;
  margin: 2px;
  max-width: 900px;
}

/* [THE LABEL] */
.tab input {
  display: none;
}
.tab label {
  display: block;
  font-size: 16px;
  margin-left: 30px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
}
.tab label::after {
  content: "\25b6";
  position: absolute;
  left: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab input[type=checkbox]:checked + label::after,
.tab input[type=radio]:checked + label::after {
  transform: rotate(90deg);
}

/* [THE CONTENTS] */
.tab-content {
  overflow: hidden;
  background: #f7f7f7;
  border-radius: 5px;
  /* CSS animation will not work with auto height */
  /* This is why we use max-height */
  transition: max-height 0.4s; 
  max-height: 0;
}
.tab-content p {
  margin: 20px;
}
.tab input:checked ~ .tab-content {
  /* Set the max-height to a large number */
  /* Or 100% viewport height */
  max-height: 250vh;
}

/*Accordion END*/