/*
CSS structure and order of classes
1.- FontFace
2.- Tipography and fontfaces for the document
3.- Basic and nedded classes
4.- lists
5.- utilities
6.- images
7.- Important and specific classes, unique for the proyect and elements
8.- Basic classes with margin & padding
9.- Media query
*/

/* 1.- FontFace*/

@font-face {
    font-family: 'Graphik Web_Regular';
    src:    url('Graphik_Web-Regular.eot');
    src:    url('Graphik_Web-Regular.eot?#iefix') format('embedded-opentype'),
            url('Graphik_Web-Regular.woff') format('woff'),
            url('Graphik_Web-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

* {
    font-family: 'Graphik Web_Regular';
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01';
    transition: 0.5s ease;
}

@font-face {
  font-family: 'Atlas Typewriter Web';
  src: url('AtlasTypewriter-Light-Web.eot');
  src: url('AtlasTypewriter-Light-Web-.eot#iefix') format('embedded-opentype'),
       url('AtlasTypewriter-Light-Web.woff2') format('woff2'),
       url('AtlasTypewriter-Light-Web.woff') format('woff');
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}


/* 2.- Tipography and fontfaces for the document */
h1{
    font-size: 20px;
    color: #5700FF;
    text-transform: uppercase;
}
h2{
    font-family: 'Atlas Typewriter Web';
    color: #5700FF;
    text-transform: uppercase;
    font-size: 20px;
    color: #5700FF;
    letter-spacing: 1px;
    line-height: 26px;
}
h3{
    font-size: 14px;
    color: #231F1F;
    letter-spacing: 2.1px;
    line-height: 26px;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
}
h4{
    font-size: 15px;
    color: #5700FF;
    letter-spacing: 0.4px;
    line-height: 18px;    
    margin: 10px;
    padding: 0px;
}
h4 a:hover {color: black}

.eight.columns h4{
    color:#5700FF;
}

p, li, ul{
    font-family: 'Atlas Typewriter Web';
    font-size: 13px;
    color: #231F1F;
    letter-spacing: 0;
    line-height: 23px;
}

a{
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
}
.four.columns a{text-decoration: underline;}
a:hover {color: #5700FF;}
/* line */
hr{
    background-color:black;
    border: none;
    height: 1px;
}

/* highlight selection */
::selection {background: yellow;}


/* 2.- Basic and needed classes */
.container{padding-top: 160px;z-index: 0;}
.row{position: relative;}

/* Structure */
.menu{
    margin: 0;
    width: 95%;
    margin-left: 2.5%;
    box-sizing: border-box;
    position: fixed;
    padding-bottom: 2%;
    background-image: linear-gradient(-180deg, #FFFFFF 0%, #FFFFFF 47%, rgba(255,255,255,0.82) 74%, rgba(255,255,255,0.00) 99%);
    z-index:1;
}
.logo{
    width: 27%;
    float: left;
    box-sizing: border-box;
    margin-top: 20px;
}
.logo img{
    width: 220px;
    z-index: 98;
}
.variables{
    width: 65.3333333333%;
    margin-left: 7.65%;
    float: left;
    box-sizing: border-box;
    border-bottom: 1px solid black;
    padding: 10px 0px;
}
.variables div{
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    float: left;
    padding: 2px 0px;
}
.espeng{
    position: fixed;
    right: 2.5%;
    top: 10px; 
    width: auto;
}
footer{
    width: 100%;
}
.variables2{
    width: 100%;
    padding: 0px 5%;
    box-sizing: border-box;
    display: none;
    margin-bottom: 30px;
}

@media (max-width: 1000px) {
    .variables{clear: both;width: 100%;width: 100%;margin: 0px;}
    .container{padding-top: 220px;}
    .variables div:last-child {text-align: right;float: right;}
    .variables div:nth-child(2) {text-align: right; float: right;}       
}
@media (max-width: 832px){
    .variables div{width: auto;}
}
@media (max-width: 550px){
    .variables div{width: 90%;position: relative;margin-left: 5%;}
    .variables div:last-child {text-align: left;float: left;}
    .variables div:nth-child(2) {text-align: left; float: left;}
    
    .menu{position: relative;padding: 0px;margin: 0px; width: 100%;}
    .logo{position: fixed; z-index: 100;
    background-image: linear-gradient(-180deg, #FFFFFF 0%, #FFFFFF 47%, rgba(255,255,255,0.82) 74%, rgba(255,255,255,0.00) 99%);
    width: 100%;
        top 0;
        left: 0;
        padding: 0;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 9%;
        padding-left: 4%;
    }
    .espeng{position: fixed; top: 7px;right:4%; z-index: 101;}
    .espeng h3{font-size: 16px}
    .variables{display: none;}
    .variables2{display: inherit;}
    .container{padding-top: 20px;}
    footer{margin-bottom: 30px;}
}
/* 4.- Lists */
ul{list-style-type:none; }
ul li{list-style-type: disc;}

/* 5.- Utilities */
.purple{color: #5700FF;}
.red{color: #ff0033;}
span{color: black;margin-right: 5px;}
#absoluteright{position: absolute; right: 0px; bottom: 0px;}

@media (max-width: 550px){
    #absoluteright{position: relative;}
}

/* 6.- Images */
.fullwidth{width: 100%;}
.totalheat{width: 70%;margin-right: 5%;}
.tifimg{width: 20%;margin-left: 9%;}

.mobilegraphic{display: none;width: 100%;height: auto;}
.mobilegraphic img{width: 100%;padding-top: 40px;}

@media (max-width: 550px){.mobilegraphic{display: inherit;}}


.tetris {margin-top:20px;}
/* 7.- Important and specific classes, unique for the proyect and elements */
.six.columns p{width: 90%;margin-left: 5%;}
.six.columns h2{margin-left: 5%;}
ul{margin-left: 5%;}
.five.columns p{width: 80%;}
.eight.columns img{width: 90%;}
.eight.columns h4{margin-left: 1.5%;}
.duotone {-webkit-filter: grayscale(1); filter: grayscale(1); transition: 0.5s ease;
}
.duotone:hover {-webkit-filter: grayscale(0); filter: grayscale(0);}

@media (max-width: 550px) {
    .tifimg{width: 50%;margin-left: 25%; margin-bottom: 10%; margin-top: 10%}
    .totalheat {width: 85%; margin-left: 7.5%; padding: 0%;}
    .duotone{padding-bottom: 25px;}
    .tetris {margin-bottom: 20px;}
}
@media (max-width: 550px){
    #absoluteright h4{margin-left: 2.8%;}
}


/* reset all margins from desktop to mobile */
@media (max-width: 800px) {
    .six.columns p{width: 100%;margin-left: 0%;}
    .six.columns h2{margin-left: 0%;}
    ul{margin-left: 0%;}
    .five.columns p{width: 100%;}
    .eight.columns img{width: 100%;}
    .eight.columns h4{margin-left: 0%;}
}


/* Footer yellow*/
footer {margin-top: 4%; float: left; background-color: #FFFF28;}
footer img{height: 200px; margin-left: 30%; text-align: left; padding-bottom: -20px; float: left;}
footer h3 {float: left; padding-top: 1%; padding-left: 2%;}
.top:hover, .footer-black .top:hover {cursor: pointer; color: #5700FF;}
.iconos {height: 30px; margin-left: 0%; margin-top: 10px}
/* Footer black */
.footer-black {background-color: #1A1717;}
.footer-black img {filter: invert(100%);}
.footer-black h3, .footer-black .top {color: white;}

@media (max-width: 830px) {
    footer img{height: 200px; margin-left: 20%; text-align: left; padding-bottom: -20px;}
}
@media (max-width: 725px) {
    footer img{clear: both; margin-top: 30px; margin-left: 20px; padding-bottom: 10%}
    footer h3 {padding-left: 5%; padding-top:4%}
}


/* 8.- Basic classes with margin & padding */

/* 9.- Media query templates. Use media queries inside each section for clarity */
/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}