*{ margin: 0; padding: 0; } .container { width: 1920px; max-width: 100%; margin: auto; } .wrapper { width: 1120px; max-width: 90%; margin: auto; } .content{ max-width: 100%; } .hidden{ display: none; } .overflow-hidden{ overflow: hidden; } .responsive{ max-width: 100%; } .auto{ display: block; margin:auto; } .relative{ position: relative; } .display-block{ display: block; } .display-flex{ display: flex; align-items: center; &.space-between{ justify-content: space-between; } &.space-around{ justify-content: space-around; } &.center{ justify-content: center; } &.flex-direction-column{ flex-direction: column; } &.flex-direction-row-reverse{ flex-direction: row-reverse; } &.main-flex{ background-color: transparent; } } .flex-item{ box-sizing: border-box; max-width: 100%; } .white-space{ white-space: nowrap; } img{ display: block; } @mixin clear(){ display: block; content: ""; clear: both; } .clearfix{ &:after{ @include clear; } .float-left, .float-right { box-sizing: border-box; max-width: 100%; } } .float-left{ float: left; } .float-right{ float: right; } .border-radius{ border-radius: 10px; } /*Thanks.php*/ @font-face { font-family: "ProximaNovaRegular"; src: url("ProximaNovaRegular.ttf"); font-style: normal; font-weight: 400; } @font-face { font-family: "ProximaNovaBold"; src: url("ProximaNova-Bold.ttf"); font-style: normal; font-weight: 600; } .thanks{ font-family:"ProximaNovaRegular", sans-serif; strong, h1{ font-family:"ProximaNovaBold", sans-serif; } } .to-comments{ width: 265px; height: 90px; border-radius: 10px; cursor: pointer; font-family:"ProximaNovaBold", sans-serif; font-size: 40px; transition: all .2s ease-in-out; display: block; margin: 30px auto 0; border:none; outline:none; &:hover{ transform: scale(1.05); } a{ text-decoration: none; color: #FFF; text-transform: uppercase; } } /****************/ @media screen and (min-width: 1200px) and (max-width: 1680px) { /*DESCTOP*/ body{ font-size: 22px; } } @media screen and (min-width: 1000px) and (max-width: 1199px) { /*LAPTOP*/ body{ font-size: 20px; } } @media screen and (min-width: 768px) and (max-width: 999px) { /*TABLET*/ body{ font-size: 18px; } } @media screen and (min-width: 600px) and (max-width: 767px) { /*WIDEPHONES*/ body{ font-size: 18px; } } @media screen and (min-width: 300px) and (max-width: 599px) { /*MOBILE*/ body{ font-size: 16px; } }