body {
    margin:0;
    padding:0;
    font-size:100%;
    font-family: 'Roboto', sans-serif;
    color:black;
    background-color: lightgray;
}
footer {
    text-align: center;
}
h3 {
    display:flex;
    justify-content:space-between;
    font-size:8vw;
    margin:0;
    padding:2vw;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    background-color:gray;
}
h4 {
    font-size:6vw;
    margin:0 0 -1vw 0;
    padding:2vw;
    border-top:solid 1px lightgray;
}
h5 {
    font-size:5vw;
    margin:0;
    padding-left:2vw;
}
h6 {
    font-size:4vw;
    margin:0 0 2vw 0;
    padding-left:2vw;
}
input[type=text], #send {
    display:none;
}
input[type=text] {
    font-size:4.4vw;
    width:33vw;
    height:10vw;
    margin:3vw 0 0 2vw;
}
input[type=radio] {
    display:none;
}
p {
    margin:0;
    padding-left:4vw;
}
.alignButton {
    justify-content:space-around;
}
.alignCenter {
    align-items:center;
}
.bigPicture {
    font-size:20vw;
    text-align:center;
}
.bigTemp {
    flex:1;
    font-size:7vw;
    padding:0;
    margin-bottom:5vw;
}
.blockDatas {
    padding-bottom:2vw;
    margin-left:6vw;
    margin-bottom:2vw;
}
.boite {
    display:flex;
    flex-direction:column;
    min-height:80%;
}
.box {
    margin-top:5vw;
}
.boxBack {
    flex:1;
    display:flex;
    flex-direction:row;
    align-items:stretch;
}
.button {
    font-size:12vw;
    width:15vw;
    height:15vw;
    text-align:center;
    border:solid 1px rgba(0, 0, 0, 0.3);
    border-radius:50%;
    background-color:white;
    transition: all 0.3s linear;
}
.card {
    display:flex;
    flex-direction:column;
    background-color: #FAFAFA;
    border-radius:5px;
    box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.2), 0px 4px 3px 0 rgba(0, 0, 0, 0.19);
}
.hot {
    margin-right:8vw;
}
.containerColumn {
    flex:1;
    display: flex;
    flex-direction:column;
}
.containerRow {
    flex:1;
    display:flex;
}
.degre {
    font-size:11vw;
    margin-top:1.5vw;
}
.endWeek {
    margin:5vw 0;
}
.flexColumn {
    display:flex;
    flex-direction:column;
}
.flexRow {
    display:flex;
    flex-direction:row;
}
.fond {
    background-color:gray;
}
.hourly {
   font-size:11vw;
   text-align:center;
   color:gray;
}
.logo {
    width:15vw;
    margin:0 5vw;
}
.more {
    text-align:right;
    color:#FAFAFA;
}
.picture {
    flex:1.5;
    display:flex;
    justify-content:center;
}
.shadow {
    box-shadow: 5px 5px 3px 0px rgba(0, 0, 0, 0.2), 5px 5px 3px 0 rgba(0, 0, 0, 0.19);
}
.smallText {
    width:35vw;
    font-size:7vw;
    text-align:right;
}
.smallPicture {
    flex:1;
    font-size:15vw;
    text-align:center;
}
.smallTemp {
    margin:1vw 0;
    font-size:6vw;
    text-align:center;
}
.subCarte {
    flex-direction:row;
    align-items:center;
    height:80%;
}
.subDay {
    margin:3vw 0;
}
.text {
    flex:1;
    margin:0;
    padding:0 2vw;
    font-size:4.5vw;
}
.tinyPicture {
    font-size:10vw;
    margin-bottom:1vw;
}
.weekday {
    width:45vw;
    font-size:8vw;
    text-align:left;
    margin-left:5vw;
}
.wi {
    margin-top:2vw;
    margin-right:1vw;
}
.wi-refresh {
    margin:1vw 0 0vw 4.5vw;
}
#boxButton {
    margin:6vw 0;
    transition: all 0.2s linear;
}
#city {
    color:white;
    text-align:left;
    margin:0;
    padding-left:5vw;
    font-size:7vw;
}
#close {
    box-shadow: 5px 5px 3px 0px rgba(0, 0, 0, 0.2), 5px 5px 3px 0 rgba(0, 0, 0, 0.19);
}
#close:active {
    box-shadow:none;
}
#controlBarFront {
    text-align: center;
    color:black;
}
#current {
    margin-top:4vw;
    transition: all 0.2s linear;
}
#endWeek {
    margin:4vw 2vw;
    padding-left:0;
    opacity:1;
}
#foot {
    font-size:4vw;
}
#footSocial {
    margin-top:2vw;
    justify-content:space-around;
}
#formulaire {
    display:none;
    margin-top:1vw;
    justify-content:center;
    align-content:center;
}
#future {
    margin-top:4vw;
}
#glass {
    width:8vw;
    height:8vw;
}
#menu {
    margin:5vw;
    box-shadow: 5px 5px 3px 0px rgba(0, 0, 0, 0.2), 5px 5px 3px 0 rgba(0, 0, 0, 0.19);
}
#menu:active {
    box-shadow:none;
}
#mesure, #search {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
}
#plus {
    margin-top:0.5vw;
    margin-left:0.5vw;
}
#title {
    text-align:left;
    margin:5vw 0 5vw 5vw;
    font-size:6vw;
    border-bottom:solid 1px;
}
#tomorrow {
    flex:2;
}
#tomorrowContainer {
    margin-bottom:4vw;
}

/* flip card */
.f1_container {
    position: relative;
    height: 145vw;
    margin:0vw 2vw;
    z-index: 1;
    perspective: 2000px;
    opacity:1;
    transition: all 0.2s linear;
}
.f2_container {
    position: relative;
    height : 60vw;
    margin:0vw 2vw;
    z-index: 1;
    perspective: 2000px;
    opacity:1;
    transition: all 0.2s linear;
}
.f3_container {
    position: relative;
    z-index: 1;
    perspective: 2000px;
    transition: all 0.2s linear;
}
.carte, #carte2 {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s linear;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:auto;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
}
.flipped {
    transform:rotateY(180deg);
}
/* ============================================================ */

/* @media all and (min-device-width:500px) and (max-device-width:850px) { */
@media all and (min-width:500px) and (max-width:850px), all and (min-device-width:500px) and (max-device-width:850px) {
    h3 {
        font-size:3vw;
    }
    h4 {
        font-size:2.5vw;
    }
    h5 {
        font-size:2vw;
    }
    h6 {
        font-size:1.4vw;
    }
    input[type=text] {
        font-size:4vw;
        width:40vw;
        height:5vw;
        margin:1vw 0 0 2vw;
    }
    .f1_container {
        width:35vw;
        height:70vw;
        margin:0;
    }
    .f2_container {
        width:30vw;
        height:25vw;
        margin:1vw 0 0 0;
    }
    #endWeek {
        width:33vw;
        height:60vw;
        margin:1vw 0 0 1vw;
    }
    .f3_container {
        position: relative;
        z-index: 1;
        perspective: 2000px;
        transition: all 0.2s linear;
    }
    .bigPicture {
        font-size:7vw;
    }
    .bigTemp {
        font-size:2.5vw;
    }
    .blockDatas {
        padding-bottom:0vw;
        margin: 1vw 0 0.5vw 1vw;
        margin-left:1vw;
        margin-bottom:0vw;
    }
    .box {
        margin-top:1.5vw;
    }
    .button {
        font-size:5vw;
        width:7vw;
        height:7vw;
    }
    .cold {
        margin-left:1vw;
    }
    .degre {
        font-size:5vw;
        margin-top:0.7vw;
    }
    .endWeek {
        margin:2vw 0;
    }
    .hourly {
        font-size:5vw;
    }
    .hot {
        margin-right:2vw;
    }
    .logo {
        width:7vw;
    }
    .smallPicture {
        font-size:5vw;
    }
    .smallTemp {
        font-size:3vw;
        margin:0.5vw 0;
    }
    .smallText {
        width:10vw;
        font-size:2.5vw;
    }
    .subDay {
        margin:0 0 1vw 0;
        padding-top:1.5vw;
    }
    .text {
        font-size:2vw;
        padding:0 0.5vw;
    }
    .tinyPicture {
        font-size:4vw;
    }
    .weekday {
        width:24vw;
        font-size:3vw;
        margin-left:1vw;
    }
    .wi {
        margin:0 0 1vw 0;
    }
    .wi-refresh {
        font-size:6vw;
        margin-left:2vw;
        margin-top:0.5vw;
    }
    #boxButton {
        transition: all 0.2s linear;
    }
    #city {
        color:white;
        text-align:left;
        margin:0;
        padding-left:3vw;
        font-size:3.5vw;
    }
    #close {
        font-size:5vw;
    }
    #current {
        margin:1vw 1vw 0 0;
        transition: all 0.5s linear;
    }
    #fond {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
    }
    #foot {
        margin:1vw 0;
        font-size:1.8vw;
    }
    #footSocial {
        margin-top:1vw;
        justify-content:space-around;
    }
    #formulaire {
        margin-top:0;
    }
    #future {
        display:flex;
        margin-top:0vw;
    }
    #glass {
        margin-top:1.2vw;
        width:4.5vw;
        height:4.5vw;
    }
    #title {
        text-align:left;
        margin:1vw 0 1vw 3vw;
        font-size:3vw;
        border-bottom:solid 1px;
    }
    #menu {
        margin:1.2vw 3vw;
    }
    #menu:active {
        box-shadow:none;
    }
    #plus {
        margin-top:0.3vw;
        margin-left:0.3vw;
    }
    #tomorrowContainer {
        margin-bottom:0vw;
    }
}
/* ============================================================ */

/* @media all and (min-device-width:850px) { */
@media all and (min-width:850px) {
    #fond {
        margin:0 13vw;
    }
    h3 {
        font-size:2vw;
        padding:1vw;
    }
    h4 {
        font-size:1.7vw;
        padding:1vw;
    }
    h5 {
        font-size:1.3vw;
    }
    h6 {
        font-size:1vw;
        margin-bottom:1vw;
    }
    input[type=text] {
        font-size:4vw;
        width:40vw;
        height:5vw;
        margin:1vw 0 0 2vw;
    }
    .f1_container {
        width:100%;
        height:40vw;
        margin:0;
    }
    .f2_container {
        width:100%;
        height:15vw;
        margin:0 0 1vw 0;
    }
    #endWeek {
        width:24vw;
        height:40vw;
        margin:1vw 0 0 0;
    }
    .f3_container {
        position: relative;
        z-index: 1;
        perspective: 2000px;
        transition: all 0.2s linear;
    }
    .bigPicture {
        font-size:3.5vw;
    }
    .bigTemp {
        font-size:1.7vw;
    }
    .blockDatas {
        padding-bottom:0vw;
        margin: 0.7vw 0 0.5vw 1vw;
        /* margin-left:1vw; */
        /* margin-bottom:1vw; */
    }
    .box {
        margin-top:1vw;
    }
    .button {
        font-size:4vw;
        width:6vw;
        height:6vw;
    }
    .cold {
        margin-left:1vw;
    }
    .degre {
        font-size:4vw;
        margin-top:0.7vw;
    }
.endWeek {
    margin:1vw 0;
}
    .hourly {
        font-size:3vw;
    }
    .hot {
        margin-right:2vw;
    }
    .logo {
        width:5vw;
        margin:0;
    }
    .smallPicture {
        font-size:3vw;
        margin:0;
    }
    .smallTemp {
        font-size:1.5vw;
        margin:0.5vw 0;
    }
    .smallText {
        width:10vw;
        font-size:1.7vw;
    }
    .subDay {
        margin:0;
        padding-top:0.8vw;
    }
    .text {
        font-size:1vw;
        padding:0 0.5vw;
    }
    .tinyPicture {
        font-size:2.5vw;
    }
    .weekday {
        width:20vw;
        font-size:2vw;
        margin-left:1vw;
    }
    .wi {
        margin:0 0 0.5vw 0;
    }
    .wi-refresh {
        font-size:6vw;
        margin:0vw 0 1vw 1.5vw;
    }
    #boxButton {
        transition: all 0.2s linear;
    }
    #city {
        color:white;
        text-align:left;
        margin:0;
        padding-left:3vw;
        font-size:3vw;
    }
    #close {
        font-size:4vw;
    }
    #current {
        margin:1vw 0 0 0;
        transition: all 0.5s linear;
    }
    #fond {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
    }
    #foot {
        margin:1vw 15vw;
        font-size:1.2vw;
    }
    #footSocial {
        margin:1vw 13vw;
        justify-content:space-around;
    }
    #formulaire {
        margin-top:0;
    }
    #future {
        margin-top:1vw;
        padding:0 1vw;
    }
    #glass {
        margin-top:1vw;
        width:4vw;
        height:4vw;
    }
    #title {
        text-align:left;
        margin:1vw 0 1vw 3vw;
        font-size:2.5vw;
        border-bottom:solid 1px;
    }
    #menu {
        margin:1vw 3vw;
    }
    #menu:active {
        box-shadow:none;
    }
    #plus {
        margin-top:0.5vw;
        margin-left:0.3vw;
    }
    #tomorrowContainer {
        margin-bottom:1vw;
    }
}