@font-face('TeleIconUi', 'teleicon-ui', '../fonts/teleicon-ui', normal, normal);


@font-face('telegroteskscreen-thin', 'telegroteskscreen-thin', '../fonts/telegroteskscreen-thin', 200, normal);
@include font-face('telegroteskscreen', 'telegroteskscreen-regular', '../fonts/telegroteskscreen-regular', 400, normal);
@include font-face('telegroteskscreen-regular-italic', 'telegroteskscreen-regular-italic', '../fonts/telegroteskscreen-regular-italic', 400, italic);
@include font-face('telegroteskscreen-medium', 'telegroteskscreen-medium', '../fonts/telegroteskscreen-medium', 600, normal);
@include font-face('telegroteskscreen-medium-italic', 'telegroteskscreen-medium-italic', '../fonts/telegroteskscreen-medium-italic', 600, italic);
@include font-face('telegroteskscreen-bold', 'telegroteskscreen-bold', '../fonts/telegroteskscreen-bold', 700, normal);
@include font-face('telegroteskscreen-ultra', 'telegroteskscreen-ultra', '../fonts/telegroteskscreen-ultra', 800, normal);

/*****************************************************************************/
/*
/* EN2018 Styles
/*
/*****************************************************************************/

header {border-top: 2px solid #e20074;}

.grid, footer {
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1260px;
}

.portalname{padding: 15px 0 25px 0;}
.portalname a{font-family: "telegroteskscreen-ultra"!important; font-size: 36px; color: #333;}
.portalname.home a{font-size: 122px; position: relative;}
.portalname.home a:after{content: "BOLD"; font-size: 32px; color: Silver; position: absolute; top: 18px; right: -85px; }
.portalname.home a:hover:after{content: "v.2.2"; font-size: 32px; letter-spacing: 2px; color: Silver; position: absolute; top: 18px; right: -85px; }


.portalname.goonie a{font-size: 122px; position: relative;}
.portalname.goonie a:after{content: "team"; font-size: 32px; color: Silver; position: absolute; top: 18px; right: -85px; }
.portalname.goonie a:hover:after{content: "#DEVS"; font-size: 32px; letter-spacing: 2px; color: Silver; position: absolute; top: 18px; right: -85px; }

/** OMAGE EDITION
.portalname.home a:after{content: "360"; font-size: 32px; color: Silver; position: absolute; top: 18px; right: -47px; }
.portalname.home a:hover:after {
    content: "made in Spain :-)";
    font-size: 24px;
    letter-spacing: 2px;
    color: Silver;
    position: absolute;
    top: 20px;
    right: -165px;
}
/******/

sup {font-size: 25%; top: -2em; color: silver;}
.portalname a:hover {text-decoration: none; color: #e20074;}

#essentials a{font-size: inherit;}

.floater {width: 33%; border-right: 1px solid #e5e5e5; padding-left: 25px; }
.floater:last-child {border-right: 0;}
.floater:first-child {padding-left: 0;}
.floater ul{margin-left: 25px;}

.flex {display: flex;}

 @media only screen and (max-width: 768px){
     .floater{ width: 100%; border-right: 0; border-bottom: 1px solid #e5e5e5; padding-left: 0;  padding-bottom: 25px; padding-top: 25px;}
     .floater:first-child { padding-top: 0;}
     .flex {display: block;}
     .portalname.home a {font-size: 66px;}
     .grid {padding: 0 25px;}
     .portalname.home a:after {font-size: 16px; top: 8px; right: -50px;}
  }

   @media only screen and (max-width: 380px){
    
     .portalname.home a {font-size: 46px;}
     .portalname.home a:after {font-size: 12px;}
    }



.class {
  font-weight: bold!important; color: #999!important; font-size: 18px!important; text-decoration: none!important; text-transform: none!important;
  font-weight: normal!important; font-family: "telegroteskscreen-thin"!important; margin-right: 16px; text-align: left!important;}

.class:before{content:"*"; padding-right: 8px; display: inline-block; font-size: 24px!important; font-family: "telegroteskscreen-ultra"!important; color: #e20074; }

.example { padding: 25px 0; margin: 15px 0; border-bottom: 1px solid #e5e5e5; }
/*.example:nth-child(2) {
    background: #f2f2f2;
}*/
.headline {color: #000;  font-size: 48px; font-family: "telegroteskscreen-thin";}
.subheadline {color: #e20074; text-transform: capitalize;  padding: 1px 0; margin-bottom: 15px;  font-family: "telegroteskscreen-thin"; }

.back {height: 20px; width: 20px; margin-bottom: 60px; display: inline-block; transform: rotate(90deg);}

.tc-note {
  margin-top: 12px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #eee;
  border-left: 4px solid #ffd329;
}

.dark .tc-note {
  border: 1px solid #000;
}

.tc-note-info {
  border-left-color: #53baf2;
}

.tc-note-warning {
  border-left-color: #ff9a1e;
}

.tc-note-brand {
  border-left-color: #e20074;
}

.html-code-wrapper {max-width: 1180px; margin: auto; z-index: 10; padding: 15px 0; color: #333; background: #000; width: 100%; text-align: left!important;}
textarea.html-code  {background: #000; color: #fff; width: 100%; border: 0;  min-height: 10em;   padding: 0.25em; font: 12px/1.5em 'Courier New', Courier, monospace; }
textarea.html-code:focus {border: 1px solid #e20074; }
textarea.html-code::-moz-selection {  background: none repeat scroll 0 0 #fe57a1;   color: #fff;   text-shadow: none;}
textarea.html-code::selection {  background: none repeat scroll 0 0 #fe57a1;   color: #fff;   text-shadow: none;}
.html-code-wrapper+.html-code-wrapper{margin-top: 15px;}





.icon-list:before,
.icon-list:after {
  content: ' ';
  display: table;
}

.icon-list:after {
  clear: both;
}

.icon-list {
  list-style: none;
}

.icon-list > li {
  float: left;
  width: 12.5%;
  border: 1px solid #fff;
  text-align: center;
  padding: 5px;
  height: 85px;
  background-color: #ededed;
}

.dark .icon-list > li {
  border: 1px solid #000;
  background-color: #525252;
}


.icon-list > li > .icon {
  margin-top: 12px;
}

.icon-class {
  display: block;
  font-size: 13px;
  margin-top: 12px;
}

.icon-class:before {
  content: '.';
}