@font-face {
    font-family: Comfortaa;
    src: url(Comfortaa.ttf);
}

@font-face {
    font-family: Orbitron;
    src: url(orbitron-black.otf);
}

@font-face {
    font-family: Exo;
    src: url(Exo.otf);
}
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}


body.ls , .ls {
    background-color: #00ff00 !important;
    font-weight: bold !important;
}

body.ls * {
     font-weight: bold !important;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  /* height: 60px; */
  background-color: #f5f5f5;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
    .footer {
        display: none;
    }
    
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    .footer {
        display: none;
    }
    
}

@media only screen and (max-device-width: 768px) {
    .footer {
        display: none;
    } 
}

.panel-body.robot-panel {position: relative}

.panel-body.robot-panel .image-holder {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

.navbar-default {
    background-color: #ffd700;
    border-color: transparent;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background-color: #ffb700;
    color: #ffffff;
}

.antispam {
    position: absolute; /* don't bother other elements on the page */
    width: 0; /* small */
    height: 0; /* very small */
    margin: 0; /* tiny */
    padding: 0; /* very tiny */
    border: 0; /* tada */
    display: none;
}

@-webkit-keyframes eric{
        0%{bottom:0;right:-110%;}
        30%{bottom:0;right:0%;}
        100%{bottom:0;right:110%;}
}

@keyframes eric{
        0%{bottom:0;right:-110%;}
        30%{bottom:0;right:0%;}
        100%{bottom:0;right:110%;}
}

.do-the-eric{
    -webkit-animation-duration:3s; -ms-animation-duration:3s; -moz-animation-duration:3s; -o-animation-duration:3s; animation-duration:3s;
    -webkit-animation-name:eric; -ms-animation-name:eric; -moz-animation-name:eric; -o-animation-name:eric; animation-name:eric;}
    
    
/* Team member panel */

section {
    padding: 20px 0;
}

section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#team .card {
    border: none;
    background: #ffffff;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
    margin-left:12px;
    margin-right:12px;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card {
    min-height: 250px;
}

.backside .card {
    min-height: 230px;
}

.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}

.frontside .card .card-title,
.backside .card .card-title {
    color: #007b5e !important;
}

.frontside .card .card-body img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.card-text {
    color: #333;   
}

.bubble {
    margin-top:10px;
}

.logo {
    margin-top:5px;
}


.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

.drop { width:350px; border:1px solid silver; margin:10px; }


.col-center-block {
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}


.brochure-robot::first-letter {
    font-family: Comfortaa;
    font-size:1.75em;
    color: #197b30;
}

.brochure-robot {
    font-family: Exo;
    color: #FFF;
}

.heat-title-bio {
    font-family: Comfortaa;
    font-size:1.75em;
    color: #197b30; 
}

.heat-title-bio span {
    font-family: Exo;
    color: #FFF;
}

.robot-title {
    font-family: Orbitron;
    text-transform: uppercase;
}

.panel-winner > .panel-heading {
  color: #202020;
  background-color: #ffd700;
  border-color: #d6e9c6;
}

.panel-winner a.robot-title {
    color: #000;
}

.panel-default {
    color: #FFF !important;   
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .cta div.container > h1,h2,h3,h4,h5,h6 { font-size: 1.1em !important; }
}

.team-member {
  overflow: hidden;
  text-align: center;
}

.team-member:before,
.team-member:after {
  background-color: #FFD700;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.team-member:before {
  right: 0.5em;
  margin-left: -50%;
}

.team-member:after {
  left: 0.5em;
  margin-right: -50%;
}



h1.team {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    text-align:center;
    margin:40px auto;
 }
#container {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:11px;
    text-align:center;
    margin:auto;
    padding-bottom:100px;
 }  
#container a {
    display:block;
    color:#000;
    text-decoration:none;
    background-color:#f6f6ff;
 }
#container a:hover {
    color:#900;
    background-color:#f6f6ff;
 }
#no1 {
    width:190px;
    line-height:60px;
    border:1px solid #000;
    margin:auto;
 }
#no1 a {
    height:60px;
 }
#line1 {
    font-size:0;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin:auto;
 } 
#line2 {
    font-size:0;
    width:424px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin:auto;
 } 
#line3 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:78px;
    float:left;
 }  
#line4,#line5,#line6 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:140px;
    float:left;
 }
#no2 {
    display:inline;
    border:1px solid #000;
    clear:both;
    margin-left:35px;
    float:left;
 }
#no2 a,#no4 a,#no8 a {
    width:84px; 
    height:50px;
    padding-top:8px; 
 }  
#no3 {
    display:inline;
    border:1px solid #000;
    margin-left:58px;
    float:left;
 }
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
    width:84px; 
    height:42px;
    padding-top:16px;  
 } 
#no4 {
    display:inline;  
    border:1px solid #000;
    margin-left:53px;
    float:left;
 }  
#no5 {
    display:inline;   
    border:1px solid #000;
    margin-left:55px;
    float:left;
 }  
#line7,#line13 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:219px;
    float:left;
 } 
#line8,#line14 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:281px;
    float:left;
 }  
#no6,#no8 {
    display:inline;  
    border:1px solid #000;
    margin-left:107px;
    float:left;
 }
#line9,#line11,#line15,#line17 {
    font-size:0;
    display:inline;
    width:26px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin-top:29px;
    float:left;
 }  
#line10,#line12,#line16,#line18 {
    font-size:0;
    display:inline;
    width:1px;
    height:60px;
    color:#fff;
    background-color:#000;
    float:left;
 } 
#line16,#line18 {
    height:30px;
 }
#no7,#no9 {
    display:inline; 
    border:1px solid #000;
    margin-left:169px;
    float:left;
 } 
.clear {
    clear:both;
 }                  

h2 small {
    color: #0ce1ac;
}

body.ls > ul#battle_list {

font-weight: bolder;
font-size: 1em;

}