/* General */
* 			        {margin: 0; padding: 0;}
BODY 			        {color: #fff; background: #000; font-size: 80%; font-family: Open Sans, Arial, sans-serif; position: relative;}
UL		                {list-style-type: none;}
TABLE                           {font-size: 100%; border-collapse: collapse;}
TH, TD                          {vertical-align: middle; text-align: left;}
IMG                             {border: 0; vertical-align: middle;}
A, A:visited 		        {color: #fff;}
A:active, A:hover 	        {color: #a78965;}

/* Sidebar */
#sidebar                        {width: 21%; min-width: 20%; float: left; background: #000; text-align: center;}
#sidebar H1		        {width: 250px; height: 86px; overflow: hidden; position: relative; z-index: 1; margin: 50px auto; text-align: center;}
#sidebar H1 SPAN		{width: 250px; height: 86px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 2; background: url(../images/logo.gif) no-repeat; display: block;}
#menu                           {font-size: 130%; text-align: left; margin: 0 0 0 13%;}
#menu LI                        {margin: 0 0 14px 0;}
#menu A                         {text-decoration: none;}
#socials                        {margin: 50px 0;}
#socials A                      {margin: 0 23px;}
#copy                           {color: #a78965; border-top: 1px #444 solid; margin: 0 20px; padding: 50px 0;}

/* Column 1 */
#column1                        {width: 40%; font-size: 160%; float: left; background: url(../images/bg1.jpg) no-repeat 55% 0 #f6eee1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-shadow: 1.5px 1.5px 0 #000;}
#column1 H2                     {font-size: 160%; text-transform: uppercase; margin: 400px 8% 45px 8%; line-height: 1.2em;}
#column1 P                      {margin: 0 8% 40px 8%;}
#column1 A                      {color: #a78965; text-decoration: none;}
#column1 A:hover                {color: #fff;}

/* Column 2 */
#column2                        {width: 39%; padding-bottom: 270px; font-size: 160%; float: left; background: url(../images/bg2.jpg) no-repeat 10% 0 #a78965; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-shadow: 1.5px 1.5px 0 #000;}
#column2 H2                     {font-size: 170%; text-transform: uppercase; margin: 70px 8% 450px 8%; line-height: 1.2em;}
#column2 P                      {margin: 0 8% 40px 8%; }
#column2 A                      {color: #a78965; text-decoration: none;}
#column2 A:hover                {color: #fff;}

/* Box */
#box                            {width: 39%; background: #000; position: absolute; right: 0; bottom: 220px;}
#box #image                     {width: 50%; height: 300px; background: url(../images/hair.jpg) no-repeat #fff; background-size: 100%; float: left; margin-right: 20px}
#box H3                         {font-size: 190%; text-transform: uppercase; margin: 20px 0;}
#box P                          {font-size: 125%; margin: 0 20px 0 0; line-height: 1.3em;}
#box A                          {text-decoration: none;}

/* Footer */
#footer 		        {height: 220px; overflow: hidden; color: #ccc; background: url(../images/footer.gif) repeat-x #fff; clear: both; padding: 0 15%; text-align: center;}
#footer P                       {margin: 0; padding: 20px 0 0 0;}
#footer A                       {color: #ccc;}
#footer A:hover                 {color: #777; text-decoration: none;}

/* Responsive */
@media screen and (max-width: 1280px) {
        #sidebar H1		{width: 180px; height: 87px;}
        #sidebar H1 SPAN	{width: 180px; height: 87px; background-size: 100%;}
        #menu                   {font-size: 110%; margin: 0 0 0 5%;}
        #column1                {background-position: 50% 0;}
        #column2                {background-position: 20% 0;}
        #column1 H2             {font-size: 140%;}
        #column2 H2             {font-size: 120%;}
        #footer                 {height: 270px;}
        #box                    {bottom: 270px;}
        #box H3                 {font-size: 160%;}
        #box P                  {font-size: 120%; line-height: 1.3em;}
}

@media screen and (max-width: 1100px) {
        #box #image             {height: 400px;}
}

@media screen and (max-width: 992px) {
        #sidebar                {width: 100%;}
        #sidebar H1		{width: 252px; height: 121px;}
        #sidebar H1 SPAN	{width: 252px; height: 121px;}
        #column1                {width: 100%; background-position: 80% 5%;}
        #column2                {width: 100%; background-position: 10% 25%;}
        #column1 H2             {margin: 60px 8% 45px 8%;}
        #column2 H2             {margin: 50px 8% 80px 8%;}
        #column1 P, #column2 P  {font-size: 80%;}
        #column2 P              {margin-bottom: 40px;}
        #footer                 {height: 350px;}
        #box                    {width: 100%; bottom: 350px;}
        #box #image             {width: 30%; height: 200px; background-size: 80%;}
}

@media screen and (max-width: 768px) and (orientation: portrait) {
        #column1                {background-position: 50% 5%;}
        #column2                {background-position: 10% 25%;}
        #column1 H2             {font-size: 140%;}
        #column2 H2             {font-size: 100%;}
        #footer                 {height: 470px;}
        #box                    {bottom: 470px;}
        #box #image             {height: 240px; background-size: 110%;}
        #box H3                 {font-size: 140%;}
        #box P                  {font-size: 100%;}
}

@media screen and (max-width: 500px) and (orientation: portrait) {
        #footer                 {height: 650px;}
        #box                    {bottom: 650px;}
}

@media screen and (max-width: 400px) and (orientation: portrait) {
        #footer                 {height: 850px;}
        #box                    {bottom: 850px;}
}

/* Other */
.cleaner                        {clear: both;}