@import "bourbon" @import "vars" /*========== Desktop First ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1400px) /**/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1400px) /**/ @media only screen and (max-width : 1200px) /**/ /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) .main &__content, &__img display: block height: auto .footer &__left margin-top: 40px .header &__profil justify-content: flex-end /* Small Devices, Tablets */ @media only screen and (max-width : 767px) .main &__content padding-top: 0 &_title h1 font-size: 30px &_descr p padding: 20px 0 .header height: auto &__btn margin-top: 20px justify-content: flex-start .chat &__right &_content .chat .authorleft .content flex-direction: column .img img width: 50px .authorright .content align-items: flex-end .header &__profil justify-content: flex-start margin-bottom: 10px @media only screen and (max-width : 565px) .footer &__mnu flex-direction: column .form form label input, textarea min-width: 290px .header &__btn flex-direction: column align-items: flex-start margin-top: 10px &_yellow, &_red padding: 10px 9px min-width: 190px font-size: 11px &_yellow margin-bottom: 10px .chat &__right &_content .chat .authorleft .content flex-direction: column .message p width: 100% .authorright .content /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) .main &__content &_descr p width: 100% .main &__content &_title h1 font-size: 23px @media only screen and (max-width : 420px) /**/ @media only screen and (max-width : 375px) /**/ @media only screen and (max-width : 345px) /**/ @media only screen and (max-width : 320px) /**/ /*========== Mobile First ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) /**/ /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) /**/ /* Small Devices, Tablets */ @media only screen and (min-width : 768px) /**/ /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) /**/ /* Large Devices, Wide Screens */ @media only screen and (min-width : 1400px) .main &__img img max-width: none !important /* Large Devices, Wide Screens */ @media only screen and (min-width : 1700px) /**/ /* Large Devices, Wide Screens */ @media only screen and (min-width : 1920px) /**/