* {
    box-sizing: border-box;
    font-family: 'Tinos', Arial, Helvetica, sans-serif;
}

/*html{
    font-size: 62.5%;
}*/
/* CLEARFIX TRICK */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear {
    clear: both;
}

header {
    float: left;
    /*border: 1px solid black;*/
    width: 100%;
}

.hamburger {
    float: left;
    width: 2%;
    margin: 10px;
}

.searchicon {
    float: left;
    width: 2%;
    margin: 10px;
}

.date {
    float: left;
    width: 96%;
    font-weight: bold;
}

.today {
    float: left;
    width: 36%;
}

.lang {
    float: left;
    width: 40%;
    margin: 10px 0px 10px 400px;

}

.temp {
    margin-left: 4rem;
    float: left;
}

.nytlogo {
    float: left;
    width: 30%;
    margin: -30px 250px 10px -20px;
}

.sub {
    float: left;
    padding: 10px;
    margin: 10px 10px 10px 60px;
    background-color: rgb(94, 122, 147);
    color: white;
    border: rgb(94, 122, 147);
}

.log {
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: rgb(94, 122, 147);
    color: white;
    border: rgb(94, 122, 147);
}

header nav {
    float: left;
    margin: 10px 10px 10px -10px;
    border-bottom: 1px solid black;
    border-bottom-width: 80%;
}

header ul li {
    list-style-type: none;
    display: inline;
    padding: 9px;
}

.war {
    float: left;
    /*border: 1px solid black;*/
    width: 70%;
}

.moscow div {
    float: left;
    /*border: 1px solid black;*/
    width: 40%;
}

.ukraine {
    float: left;
    /*border: 1px solid black;*/
    width: 40%;
    margin-top: -196px;
}

.brief {
    float: left;
    /*border: 1px solid black;*/
    width: 40%;
}

.warimage {
    float: left;
    /*border: 1px solid black;*/
    width: 60%;
    padding: 10px;
    margin-bottom: 200px;
}

.madrid {
    float: left;
    /*border: 1px solid black;*/
    width: 30%;
}

.madrid img {
    float: left;
    width: 100%;
    padding: 10px;
}

.madrid h3 {
    float: left;
    width: 100%;
    font-weight: 100;
    margin: 10px 10px 10px 20px;
    font-size: 35px;
}

.madrid p {
    float: left;
    width: 96%;
    margin: 10px 10px 10px 20px;
}

.foodplants {
    float: left;
    /*border: 1px solid black;*/
    width: 30%;
}

.food {
    width: 50%;
    float: left;
    padding: 10px;
}

.plants {
    width: 50%;
    float: left;
    padding: 10px;
}

.chatbot {
    float: left;
    /*border: 1px solid black;*/
    width: 40%;
}

.maintext {
    float: left;
    width: 37%;
    margin: 10px;
}

.mainimg {
    float: left;
    width: 60%;
}

.laptopimg {
    float: left;
    /*border: 1px solid black;*/
    width: 100%;
    padding: 10px;
    margin-left: 10px;
}

.chatbot .laptopimgspan {
    float: right;
}

.opinion {
    float: left;
    /*border: 1px solid black;*/
    width: 30%;
}

.opinion .mainop {
    float: left;
    width: 100%;
    margin: 10px 10px 40px 10px;
}

.opinion .subtextone {
    float: left;
    width: 60%;
    margin: -20px 10px 50px 10px;
}

.opinion .randomguy {
    float: left;
    width: 25%;
    margin: -50px 10px 0px 10px;
}

.opinion .subtexttwo {
    float: left;
    width: 40%;
    margin-left: 10px;
}

.opinion .jkpic {
    float: left;
    width: 40%;
    margin: -20px 0px 10px 59px;
}



@media screen and (max-width: 1400px) {
    .sub {
        margin: 10px 10px 10px 0px;
    }
    header nav {
        margin: 0px 0px 0px -10px;
        border-bottom: 1px solid black;
        width: 100%;
        text-align: center;
    }
    header ul li:nth-child(2n+2) {
        display: none;
    }
}

@media screen and (max-width: 1350px) {
    .moscow span {
        display: none;
    }

    .ukraine span {
        display: none;
    }

    .ukraine {
        margin-top: -166px;
    }
    .temp {
        display: none;
    }
}

@media screen and (max-width: 1293px) {
    .lang {
        display: none;
    }

    .sub {
        margin: 10px 10px 10px 810px;
    }

    .nytlogo {
        width: 41%;
        margin: -40px 50px 0px -50px;
    }

    .sub {
        margin: 10px 10px 10px 860px;
    }
}

@media screen and (max-width: 1240px) {
    .log {
        display: none;
    }
}

@media screen and (max-width: 1152px) {
    .opinion {
        width: 70%;
    }

    .foodplants {
        width: 70%;
    }

    .madrid {
        width: 30%;
    }
    .sub {
        display: none;
    }

    .war {
        width: 100%;
    }
}

@media screen and (max-width: 885px) {
    .moscow div {
        width: 100%;
    }
    .warimage {
        width: 100%;
        margin-bottom: 0;
    }
    .chatbot{
        width: 100%;
    }
    .laptopimg{
        width: 150%;
    }
    .laptopimg span{
        width: 100%;
    }
}

@media screen and (max-width: 857px) {
    .date {
        display: none;
    }

    .today {
        display: none;
    }

    .nytlogo {
        margin: 0px 0px 0px 170px
    }
    
}

@media screen and (max-width: 705px) {
    .nytlogo {
        margin: 0px 0px 0px 130px;
    }
}

@media screen and (max-width: 578px) {
    .nytlogo {
        margin: 0px 0px 0px 85px;
    }
}

@media screen and (max-width: 509px) {
    .nytlogo {
        margin: 0px 0px 0px 65px;
    }
}

@media screen and (max-width: 695px) {
    .madrid {
        width: 100%;
    }
    .foodplants {
        width: 100%;
    }
    .opinion .jkpic {
        float: left;
        width: 30%;
        margin: 0px 0px 10px 39px;
    }
    .opinion .randomguy {
        float: left;
        width: 19%;
        margin: -52px -12px 0px 0px;
    }
}

@media screen and (max-width: 521px) {
    .moscow div {
        width: 100%;
    }
    .warimage {
        width: 100%;
        margin-bottom: 0;
    }
    .chatbot{
        width: 100%;
    }
    .laptopimg{
        width: 150%;
    }
    .laptopimg span{
        width: 100%;
    }
}


@media screen and (max-width: 375px) {
    .mobileHide {
        display: none;
    }

    .chatbot {
        width: 100%;
    }

    .moscow div {
        width: 100%;
    }

    .nytlogo {
        width: 51%;
        margin: 0px 0px 0px 31px;
    }

    .searchicon {
        width: 4%;
        margin: 8px;
    }

    .hamburger {
        width: 4%;
        margin: 8px;
    }

    .madrid {
        width: 100%;
    }

    .foodplants {
        width: 100%;
    }

    .food img {
        padding: 10px 25px 10px 0px;
    }

    .plants img {
        padding: 10px 25px 10px 0px;
    }

    .opinion {
        width: 100%;
    }

    .opinion .jkpic {
        margin: 0px 0px 0px 55px;
    }
}

@media screen and (max-width: 340px) {
    .opinion .jkpic {
        margin: 0px 0px 0px 25px;
        width: 30%;
    }
    .opinion .randomguy {
        float: left;
        width: 19%;
        margin: -50px 0px 0px 0px;
    }
}



@media screen and (max-width: 288px) {
    .jkpic {
        display: none;
    }
    .randomguy {
        display: none;
    }
    .food {
        width: 100%;
    }
    .plants {
        width: 100%;
    }

}