/* :root {} is a pseudo class which references the command at the top of the html document. This means that the variable below (:root {}) can be referenced by css anywhere in the stylesheet. So this is applying a styling to the root of the document. */ :root { --site-color-1: #ffffff; --site-color-1-hover: #f20c0c; } html { font-size: 62.5%; /* making the html font size 62.5% will mean that font-size: 1.8rem; will be 18px */ } body { background-color: #ffffff; } /* .wrapper makes sure that all content on site does not exceed these boundaries. This can be used for mobile sizing also. .wrapper-main { width: 960px; } */ p { font-size: 2rem; line-height: 1.5; letter-spacing: 1px; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ } .small_text { font-size: 1.2rem; line-height: 1.5; letter-spacing: 1px; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ } .medium_text { font-size: 1.4rem; line-height: 1.5; letter-spacing: 1px; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ } h1 { font-size: 6rem; line-height: 1.5; letter-spacing: 5px; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ } h2 { font-size: 3rem; line-height: 1.5; letter-spacing: 5px; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ } h3 { font-size: 2rem; line-height: 2; letter-spacing: 2px; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ } h4 { font-size: 1.5rem; line-height: 1; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 100; text-align: center; /* vertical alignment */ padding-top: 15px; } h5 { font-size: 18px; line-height: 1.5; color: #ff0000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 400; letter-spacing: 5px; text-align: center; /* vertical alignment */ } h6 { font-size: 1.2rem; line-height: 0.5; color: #000000; font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: 200; text-align: center; /* vertical alignment */ } .logo { width: 254px; height: 166px; margin: 0 auto; padding-top: 50px; } .header { max-width: 960px; height: auto; background-color: #ffffff; margin: 0 auto; justify-content:center; } hr.one { border: none; height: 1px; margin-left: auto; margin-right: auto; background:#000000; width: 150px; } .barn_pic { width: 800px; height: 449px; margin: 0 auto; padding-top: 100px; } /*.return_link { font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 2rem; color:#F80105; text-align: center; }*/ /*PHOTOS SECTION*/ .exhibitors-main { /*width: auto;*/ max-width: 1200px; height:auto; margin: 0 auto; padding-top: 30px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:center; align-content: normal; align-items: center; gap: 80px 40px; } .exhibitors-main .div_1 { width: 300px; height: 300px; order: 1; } .exhibitors-main .div_2 { width: 439px; height: 300px; order: 2; } .exhibitors-main .div_3 { width: 214px; height: 300px; order: 3; } .exhibitors-main .div_4 { width: 420px; height: 300px; order: 4; } .exhibitors-main .div_5 { width: 300px; height: 300px; order: 5; } .exhibitors-main .div_6 { width: 320px; height: 300px; order: 6; } .exhibitors-main .div_7 { width: 300px; height: 300px; order: 7; } .exhibitors-main .div_8 { width: 405px; height: 300px; order: 8; } .exhibitors-main .div_9 { width: 301px; height: 300px; order: 9; } .exhibitors-main .div_10 { width: 369px; height: 300px; order: 10; } .exhibitors-main .div_11 { width: 300px; height: 300px; order: 11; } .exhibitors-main .div_12 { width: 207px; height: 300px; order: 12; } .exhibitors-main .div_13 { width: 424x; height: 300px; order: 13; } .exhibitors-main .div_14 { width: 404px; height: 300px; order: 14; } .exhibitors-main .div_15 { width: 243px; height: 300px; order: 15; } .exhibitors-main .div_16 { width: 242px; height: 300px; order: 16; } .exhibitors-main .div_17 { width: 374px; height: 300px; order: 17; } .exhibitors-main .div_18 { width: 302px; height: 300px; order: 18; } .exhibitors-main .div_19 { width: 166px; height: 300px; order: 19; } .exhibitors-main .div_20 { width: 243px; height: 300px; order: 20; } .exhibitors-main .div_21 { width: 222px; height: 300px; order: 21; } .exhibitors-main .div_22 { width: 200px; height: 300px; order: 22; } .exhibitors-main .div_23 { width: 426px; height: 300px; order: 23; } .exhibitors-main .div_24 { width: 229px; height: 300px; order: 24; } .exhibitors-main .div_25 { width: 153px; height: 300px; order: 25; } .exhibitors-main .div_26 { width: 464px; height: 300px; order: 26; } .exhibitors-main .div_27 { width:296px; height: 300px; order: 27; } .exhibitors-main .div_28 { width: 449px; height: 300px; order: 28; } .exhibitors-main .div_29 { width: 301px; height: 300px; order: 29; } .exhibitors-main .div_30 { width: 378px; height: 300px; order: 30; } .exhibitors-main .div_31 { width:326px ; height: 300px; order: 31; } .exhibitors-main .div_32 { width: 300px; height: 300px; order: 32; } /* RESPONSIVITY MEDIA QUERIES - 'only screen and' is added in case a user is using outdated browser software */ @media only screen and (max-width: 600px) { .header { width: 100%; } .exhibitors-main { width: 100%; } p { margin-left: 50px; margin-right: 50px; } .small_text { margin-left: 50px; margin-right: 50px; } .medium_text { margin-left: 50px; margin-right: 50px; } .barn_pic { width: 100%; /*margin: 0 auto;*/ height: auto; padding-top: 100px; } } @media only screen and (min-width: 601px) { .header { width: 100%; } .exhibitors-main { width: 100%; } p { margin-left: 50px; margin-right: 50px; } } @media only screen and (min-width: 768px) { .header { width: 100%; } .exhibitors-main { width: 100%; } } @media only screen and (min-width: 992px) { .header { width: 100%; } .exhibitors-main { width: 100%; } } @media only screen and (min-width: 1200px) { .header { width: 100%; } .exhibitors-main { width: 100%; } }