Media Queries


CSS
/* Firefox */
@-moz-document url-prefix() { ... }

/* ME */
@supports (-ms-ime-align:auto) { ... }

/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { ... }

/* Hovers */
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.element:hover {
		color: royalblue;
	}
}

/* Desktop first */
@media only screen and (max-width: 1300px) { ... }
@media only screen and (max-width: 1100px) { ... }
@media only screen and (max-width: 992px) { ... }
@media only screen and (max-width: 767px) { ... }
@media only screen and (max-width: 640px) { ... }
@media only screen and (max-width: 480px) { ... }
@media only screen and (max-width: 350px) { ... }

/* Rewrite styles */
@media only screen and (max-width: 1920px) {
	[style*=margin][style*="0 -15vw 1rem 8rem"]{margin:0 -4vw 1rem 3rem !important}
    .row_f [class*='col_'] {width: calc(100% / 1 - 3.01rem);}
}

/* Phone horizontal orientation */
@media (orientation:landscape) and (max-height:450px) {
	footer{padding-bottom:0}
	.mobile_phones{display:none}
}