@media ( min-width: 1200px) {}

@media ( min-width: 992px) {}

@media ( min-width: 769px) {}

@media ( max-width: 768px) {}


/* montserrat-300 - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat/montserrat-v15-latin-300.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/montserrat/montserrat-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat/montserrat-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat/montserrat-v15-latin-300.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* montserrat-regular - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat/montserrat-v15-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/montserrat/montserrat-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat/montserrat-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat/montserrat-v15-latin-regular.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* montserrat-700 - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat/montserrat-v15-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/montserrat/montserrat-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat/montserrat-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat/montserrat-v15-latin-700.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* montserrat-900 - latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/montserrat/montserrat-v15-latin-900.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/montserrat/montserrat-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/montserrat/montserrat-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-900.woff') format('woff'), /* Modern Browsers */
    url('../fonts/montserrat/montserrat-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/montserrat/montserrat-v15-latin-900.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* work-sans-300 - latin */

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/worksans/work-sans-v9-latin-300.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/worksans/work-sans-v9-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/worksans/work-sans-v9-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/worksans/work-sans-v9-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/worksans/work-sans-v9-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/worksans/work-sans-v9-latin-300.svg#WorkSans') format('svg');
    /* Legacy iOS */
}


/* work-sans-regular - latin */

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/worksans/work-sans-v9-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/worksans/work-sans-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/worksans/work-sans-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/worksans/work-sans-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/worksans/work-sans-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/worksans/work-sans-v9-latin-regular.svg#WorkSans') format('svg');
    /* Legacy iOS */
}


/* work-sans-700 - latin */

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/worksans/work-sans-v9-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''), url('../fonts/worksans/work-sans-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/worksans/work-sans-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/worksans/work-sans-v9-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/worksans/work-sans-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/worksans/work-sans-v9-latin-700.svg#WorkSans') format('svg');
    /* Legacy iOS */
}


body {
    --primary-color: #111;
   
}

h1 {
    color: var(--primary-color);
}


@media only screen and (min-width: 993px) {
    .container {
        width: 90%;
    }
}

* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
}

*::selection {
    background: #ccc;
    color: #fff;
}

textarea,
input[type="text"] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

html,
body {
    height: 100%;
}

body {
    background: #fff;
    color: #111;
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    font-size: 17px;
    -webkit-text-size-adjust: none;
    font-weight: 300;
}

div {
    position: relative;
}

.logo{
    position: absolute;
    left:0;
    top:0;
    z-index: 2;
    fill: #fff;
    height:14.285714285714286vw;
}

.tile{
    width: 7.142857142857143%;
    border: 0px solid #fff;
    background: #eee;
    cursor: pointer;
    float: left;
}


.tile img{
    width: 100%;
}

.temperature{
    position: absolute;
    top:0;
    left:0;
    bottom:10px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:28px;
    color:#fff;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    opacity: 0;
    transition: 1.2s;
}

.date{
    position: absolute;
    bottom:2px;
    left:0;
    right: 0;
    font-size: 9px;
    padding: 3px;
    display: flex;
    justify-content: center;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    opacity: 0;
    transition: .7s;
}

.tile:hover > .temperature, .tile:hover > .date{
    opacity: 1;
    transition: .1s;
}



@media ( max-width: 990px) {

    .logo{
        width: auto;
        height: 28.5714285714vw;
    }
    
    .tile{
        width:14.285714285714286%;
        background: #eee;
        cursor: pointer;
        float: left;
    }

    .temperature{
        font-size:20px;
        color:#fff;
        font-weight: bold;
        font-family: 'Montserrat', sans-serif;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
        opacity: 0;
        transition: 1.2s;
    }
    
    .date{

        font-size: 8px;

    }
}


.t1{background:#4af172;}
.t2{background:#49ed58;}
.t3{background:#47e939;}
.t4{background:#42db3a;}
.t5{background:#3dcc3c;}
.t6{background:#3bc357;}
.t7{background:#39ba72;}
.t8{background:#349b69;}
.t9{background:#2f7c5f;}
.t10{background:#287942;}
.t11{background:#207523;} 
.t12{background:#358d12;}
.t13{background:#4aa500;}
.t14{background:#68bb00;}
.t15{background:#84d100;}
.t16{background:#a3e900;}
.t17{background:#beff00;}
.t18{background:#ccfd49;}
.t19{background:#d9fc90;}
.t20{background:#edfb44;} /* here */
.t21{background:#fffa00;}
.t22{background:#fffa00;}
.t23{background:#fbde00;}
.t24{background:#fbde00;}
.t25{background:#fbcc00;}
.t26{background:#fbcc00;}
.t27{background:#faa000;}
.t28{background:#faa000;}
.t29{background:#f69000;}
.t30{background:#f69000;}
.t31{background:#fa6900;}
.t32{background:#fa6900;}
.t33{background:#f75300;}
.t34{background:#f75300;}
.t35{background:#f51000;}
.t36{background:#f51000;}
.t37{background:#f02100;}
.t38{background:#f02100;}
.t39{background:#f01e67;}
.t40{background:#f01e67;}
.t41{background:#ef15ca;}
.t42{background:#ef15ca;}




.t0{background:#a8ebf7;}
.t-1{background:#9ce5f8;}
.t-2{background:#90def8;}
.t-3{background:#75d3fa;}
.t-4{background:#5dc9fb;}
.t-5{background:#5dc9fb;}
.t-6{background:#58aced;}
.t-7{background:#58aced;}
.t-8{background:#3b8af1;}
.t-9{background:#3b8af1;}
.t-10{background:#225ae6;}
.t-11{background:#225ae6;}
.t-12{background:#0e28d2;}
.t-13{background:#0e28d2;}
.t-14{background:#1500c8;}
.t-15{background:#1500c8;}
.t-16{background:#6800dc;}
.t-17{background:#6800dc;}
.t-18{background:#8400e5;}
.t-19{background:#8400e5;}
.t-20{background:#a300e4;}
.t-21{background:#a300e4;}
.t-22{background:#c100dd;}
.t-23{background:#c100dd;}
.t-24{background:#a005b0;}
.t-25{background:#a005b0;}

.footer {
    margin: 0 auto;
    width: 100%;
    padding: 30px 50px;
    transition: transform .2s;
    color: #fff;
    text-align: left;
}

.footer a {
    color: #ccc;
    font-size: 14px;
    margin-right: 10px;
}

.footer a:hover {
    opacity: .7;
}