/*Table*/
.outtable {
   width: 848px;
  height: 340px;
  font-family: 'Droid Sans';
  padding: 5px;
  background: #0a1b47;
  border: 5px solid #010624;
  margin-left: 0px;
  margin-top:30px;
  position: relative;
  z-index: 7;
}

.tabb {
  float: left;
}

.tabb label {
  display: block;
  width: 250px;
  text-align: center;
  font-family: antonio;
  color: #BAB5B5;
  margin-right: 7px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: #0a1b47;
  padding: 5px;
  border: 0px solid #ccc;
  position: relative;
  top:-50px;
  left: 20px;
  cursor: pointer;
  transition: 0.8s ease;
  border-radius: 50px 50px 50px 50px;
}

.wtabb {
  width: 100%;
  background: #0a1b47;
  z-index: 8;
}

.intable {
  position: absolute;
  top: 0;
  left: 2px;
  background: #0a1b47;
  width: 750px;
  height: 305px;
  padding: 15px;
  color: #8D8F86;
  opacity: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
}

[type=radio3]:checked ~ label {
  color: #a2c3cc;
  background-color:#010313;
  border-bottom: 3px solid gray;
  z-index: 2;
}

[type=radio3] {
  display: none;
}

[type=radio2] {
  
}

[type=radio]:checked ~ label ~ .intable {
  z-index: 9; opacity: 1;
}


/**TEXTBOX**/
.textboxgr {
  width: 240px;
  height: 300px;
  background: #010624;
  margin: 5px;
  margin-top: -6px;
  padding: 10px;
  overflow:auto;
}

.textboxgr .texttable {
  font-family: 'antonio';
  letter-spacing: 4px;
  font-size: 18px;
  text-transform: uppercase;
  width: 95%;
  border-bottom: 3px solid #0a1b47;
  background: #010313;
  color: #BAB5B5;
  text-align: center;
  padding: 5px;
  overflow:auto;
}

.textboxgr .tabletext {
  font-family: 'antonio';
  font-size: 14px;
  text-align: justify;
  font-weight:300;
  color: #BAB5B5;
  overflow:auto;

}
.textboxgr .tabletext1 {
  font-family: 'antonio';
  font-size: 14px;
  text-align: justify;
  font-weight:300;
  color: #BAB5B5;
  overflow:auto;
  min-height: 200px;
}

.textboxgr .date {
  font-family: 'antonio';
  font-size: 13px;
  width: 50px;
  height: 20px;
  color: #BAB5B5;
  background: #0a1b47;
  padding: 4px 5px 0px 3px;
    outline-offset: 3px;
  float: left;
  margin:  10px 9px 2px 3px;
  border-radius: 50px 50px 0px 50px;
  overflow:auto;
}

.textboxgr .dt {
  font-family: 'antonio';
  font-size: 14px;
  text-align: justify;
  font-weight:300;
  color: #BAB5B5;
  width: 240px;
  line-height: 150%;
  border-bottom: 1p solid;
  margin-top: 5px;
  border-bottom: 1px dotted #0a1b47;
  padding-bottom: 3px;
  overflow:auto;
}

.textboxgr .pen a {
  text-align: center;
  width: 100px;
  height: 13px;
  padding: 8px;
  background: #0f0f0f;
  transition: all 0.3s ease-in-out;
  color: #8D8F86;
  text-decoration: none;
  top: 20px;
  font-size: 14px;
  font-weight:300;
  letter-spacing: 2px;
  float: left;
  border: 2px solid #0a1b47;
  overflow:auto;
}

.textboxgr .pen a:hover {
  box-shadow: inset 0 45px 0 #0a1b47;
  overflow:auto;
}

.textboxgr .gend {
  font-family: 'Droid Sans';
  color: #0f0f0f;
  width: 107px;
  height: 90px;
  border: 2px solid #1b1c17;
  padding: 3px;
  font-size: 15px;
  margin-right: 4px;
  margin-top: 4px;
  text-align: center;
    padding: 10px 5px 5px;
  float: left;
  overflow:auto;
}

.textboxgr .gend g1:before {
  content: '♂     ';
  margin-right: 7px;
  color: #7d8f86;
  border-right: 5px solid #7d8f86;
}

.textboxgr .gend g2:before {
  content: '♀   ';
  margin-right: 7px;
  color: #7d8f86;
  border-right: 5px solid #7d8f86;
}

.textboxgr .gend g3:before {
  content: '≣   ';
  margin-right: 9px;
  color: #7d8f86;
  border-right: 5px solid #7d8f86;
}

.textboxgr .notiz {
  background: #0f0f0f;
  border: 1px solid #393f31;
  padding: 6px;
  width: 95%;
  height: 30px;
  font-size: 13px;
  margin-top: 5px;
  float: left;
  overflow:auto;
}

.textboxgr img {
  margin-top: 2px;
}

.textboxgr .da {
  font-weight: 120;
  font-family: verdana;
  letter-spacing: 3px;
  font-size: 12px;
  border-top: 2px solid #393f31;
  border-bottom: 2px solid #393f31;
  background: #0f0f0f;
  padding: 10px;
  overflow:auto;
}

.textboxgr .da b {
  color: white;
}

.textboxgr .st {
  
}

.view {
    width: 120px;
    height: 120px;
    margin: 0px;
    float: left;
    border: 0px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(http://) no-repeat center center;
}

.view .mask1, .view .content {
    width: 120px;
    height: 120px;
    position: absolute;
    overflow: hidden;
    top: 80px;
    left: 0;
    box-shadow: 1px 1px 2px #e6e6e6;
}

.view .mask, .view .content {
    width: 120px;
    height: 120px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.view img {
    display: block;
    position: relative;
}

.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 10px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}

.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 4px 20px 20px;
    text-align: center;
}

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 2px 5px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
  font-size: 10px;
}

.view a.info:hover {
    box-shadow: 0 0 5px #000;
}

.view-first img {
    transition: all 0.2s linear;
}

.view-first .mask {
    opacity: 0;
    background-color: #31251e;
    transition: all 0.4s ease-in-out;
}

.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first:hover img {
    transform: scale(1.1);
}

.view-first:hover .mask {
    opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}

.view-first:hover p {
    transition-delay: 0.1s;
}

.view-first:hover a.info {
    transition-delay: 0.2s;
}

/*Scroll*/
::-webkit-scrollbar {
  width:7px;
  height:1px;
  background: #010313;
}

::-webkit-scrollbar-thumb {
  background-color: #BAB5B5;
  border-top:2px solid #010313;
  border-right:3px solid #010313;
  border-bottom:2px solid #010313;
  border-left:3px solid #010313;
}

/*color*/
.color1 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 10px;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #CC3232;
  color: #CC3232;
}

.color2 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #84BE6A;
  color: #84BE6A;
}

.color3 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #FF9955;
  color: #FF9955;
}

.color4 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #4CB7A5;
  color: #4CB7A5;
}

.color5 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #7AA9DD;
  color: #7AA9DD;
}

.color6 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #A74CAB;
  color: #A74CAB;
}

.color7 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #FF82AB;
  color: #FF82AB;
}

.color8 {
  width: 120px;
  font: 16px antonio;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid #436EEE;
  color: #436EEE;
}

/*Hover images*/
#tabli:hover {
  opacity: 100;
  transition: .3s all ease-in-out;
  transition-delay: .3s;
  transition-duration: .3s;
}

#left {
  display:none;
}

#tabli {
  color: #FFF;
  font-family: arial;
  font-size: 10px;
  height: 80px;
  letter-spacing: 2px;
  line-height: 145%;
  opacity: 0;
  overflow: hidden;
  padding: 15px;
  text-align: justify;
  transition: .3s all ease-in-out;
  transition-delay: .3s;
  transition-duration: .3s;
  width: 70px;
}

.tab1 {
  width:200px;
  background:#fff;
  height:250px;
  margin:5px;
  padding:2px;
}

.tabname {
  border-bottom: 70px solid #172C44;
  border-left: 60px solid transparent;
  height: 0;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 80px;
  text-transform: uppercase;
  width: 145px;
  margin-top:-75px;
  position:relative;
  display:block;
  font-family: oswald;
  margin-left:5px;
  color:#fff;
}

.nom {
  width:650px;
  background:#172C44;
  padding:5px;
  margin:5px  -5px;
  display:block;
  text-align:center;
  font:12px oswald;
  text-transform:uppercase;
  letter-spacing:1px;
  line-height:10px;
  border-right:250px solid #542442;
  color:#fff;
}

.nom a {
    background: #542442;
    border-radius: 300px;
    font-family: oswald;
    font-size: 11px;
    padding: 5px;
    height: 10px;
    width: 10px;
    color: #FFF;
    display: inline-block;
}

#tabli a {
    background: #172C44;
    color: #FFF;
    display: block;
    font-family: oswald;
    font-size: 13px;
    margin: 2px;
    padding: 5px;
    width: 50px;
}

.tab2 {
  width:660px;
  background:#fff;
  height:85px;
  margin:5px;
  padding:2px;
}

.tab3 {
  width:660px;
  background:#fff;
  height:150px;
  margin:5px;
  padding:2px;
}