/* soulellis.com */ * { -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } #site { overflow-x: hidden; } @font-face { font-family: "Arial Narrow"; src: local("Arial Narrow"); src: local("ArialNarrow"); src: local("Arial-Narrow"); src: url("/build/font/ArialNarrow.woff2") format("woff2"); src: url("/build/font/ArialNarrow.woff") format("woff"); src: url("/build/font/ArialNarrow.ttf") format("truetype"); font-weight: normal; font-style: normal; } html, body{ margin: auto; font-size: 15px; font-family: "Arial Narrow", ArialNarrow, Arial, sans-serif; max-width: 1350px; padding: 2vw; } .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .container2 { position: relative; width: 100%; overflow: hidden; padding-top: 75%; /* 16:9 Aspect Ratio */ } .container3 { position: relative; width: 100%; overflow: hidden; padding-top: 15%; /* 16:9 Aspect Ratio */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0; } /* Create four equal columns that sits next to each other */ .column4 { -ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 100%; padding: 0; } .column4 img { margin-top: 0; vertical-align: middle; width: 100%; } /* Create three equal columns that floats next to each other */ .column3 { width: 33.33%; padding: 0; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .column3 img { vertical-align: middle; width: 100%; padding: none; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 100%) { .column4 { -ms-flex: 50%; flex: 50%; max-width: 50%; } } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .column4 { -ms-flex: auto%; flex: auto; max-width: auto; margin: none; padding: none; } } @media screen and (max-width: 800px) { .column2 { -ms-flex: auto%; flex: auto; max-width: auto; margin: none; padding: none; } } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column3 { width: 100%; } .column3 img { width: 100%; } } @media screen and (max-width: 900px) { .column3 { width: 100%; } } @media screen and (max-width: 900px) { .column3 img { width: 100%; padding-top: none; padding-bottom: none; } } a{ color: black; text-decoration: none; } a[href$=jpg] { background-color: none; text-decoration: none; border: 0 none; } a:link { color: black; text-decoration: underline; } a:visited { color: black; text-decoration: underline; } a:hover { background-color: black; color: white; } a.white {color: black; text-decoration: underline;} a.white:link {background-color: white; color: black; text-decoration: underline;} a.white:hover {background-color: black; color: white; text-decoration: underline;} a.pink {color: black; text-decoration: underline;} a.pink:link {background-color: #FF1493; color: black; text-decoration: underline;} a.pink:hover {background-color: black; color: #FF1493; text-decoration: underline;} a.gold {color: black; text-decoration: underline;} a.gold:link {background-color: goldenrod; color: black; text-decoration: underline;} a.gold:hover {background-color: black; color: goldenrod; text-decoration: underline;} a.purp {color: black; text-decoration: underline;} a.purp:link {background-color: blueviolet; color: black; text-decoration: underline;} a.purp:hover {background-color: black; color: blueviolet; text-decoration: underline;} a.red {color: black; text-decoration: underline;} a.red:link {background-color: #ff3300; color: black; text-decoration: underline;} a.red:hover {background-color: black; color: #ff3300; text-decoration: underline;} a.plum {color: black; text-decoration: underline;} a.plum:link {background-color: plum; color: black; text-decoration: underline;} a.plum:hover {background-color: black; color: plum; text-decoration: underline;} a.black {color: blueviolet; text-decoration: underline;} a.black:link {background-color: black; color: blueviolet; text-decoration: underline;} a.black:hover {background-color: blueviolet; color: black; text-decoration: underline;} a.black2 {color: white; text-decoration: underline;} a.black2:link {background-color: black; color: white; text-decoration: underline;} a.black2:hover {background-color: white; color: black; text-decoration: underline;} a.blue {color: black; text-decoration: underline;} a.blue:link {background-color: deepskyblue; color: black; text-decoration: underline;} a.blue:hover {background-color: black; color: deepskyblue; text-decoration: underline;} a.brown {color: black; text-decoration: underline;} a.brown:link {background-color: rosybrown; color: black; text-decoration: underline;} a.brown:hover {background-color: black; color: rosybrown; text-decoration: underline;} a.aquam {color: black; text-decoration: underline;} a.aquam:link {background-color: aquamarine; color: black; text-decoration: underline;} a.aquam:hover {background-color: black; color: aquamarine; text-decoration: underline;} SPAN.li {display: list-item; margin-left: 1em; margin-right: 3rem} .profile { margin: auto; padding-right: 1rem; border: 0px dashed #000000; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .textblock { margin: auto; padding:2rem; border: 2px dotted black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .textblock2 { border: 0px; margin: auto; padding: 1.5rem; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock { border: 0px; padding: 1.5rem; background-color: #ff3300; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock2 { margin: auto; border: 0px; padding: 1rem; background-color: #000000; color: white; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock3 { border: 0px; padding: 1.5rem; background-color: goldenrod; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock4 { border: 0px; padding: 1.5rem; background-color: rosybrown; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock5 { border: 0px; padding: 1.5rem; background-color: maroon; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock6 { border: 0px; padding: 1.5rem; background-color: deepskyblue; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock7 { border: 0px; padding: 1.5rem; background-color: plum; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock8 { margin: auto; border: 0px; padding: 1.5rem; background-color: white; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock9 { margin: auto; border: 0px; padding: 1.5rem; background-color: blueviolet; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } .colorblock10 { margin: auto; border: 0px; padding: 1.5rem; background-color: white; opacity: 0.5; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* PARAGRAPH STYLES USED FOR POST-DOCUMENTA */ /* black on white */ .colorblock11 { margin-left: 12vw; margin-right: 12vw; border: 0px; padding: 0vw; padding-right: 3vw; background-color: white; color: black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* white on black */ .colorblock12 { margin-left: 12vw; margin-right: 12vw; border: 0px; padding: 0vw; padding-right: 3vw; background-color: black; color: white; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* black on rosybrown */ .colorblock13 { margin-left: 12vw; margin-right: 12vw; border: 0px; padding: 0vw; padding-right: 3vw; background-color: rosybrown; color: black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* dark red on aqua */ .colorblock14 { margin-left: 12vw; margin-right: 12vw; border: 0px; padding: 0vw; padding-right: 3vw; background-color: aqua; color: darkred; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } /* dark red on aqua */ .colorblock15 { margin-left: 12vw; margin-right: 12vw; border: 0px; padding: 0vw; padding-right: 0vw; background-color: aquamarine; color: black; -moz-hyphens:none; -ms-hyphens:none; -webkit-hyphens: none; hyphens:none; } p{ padding: 1rem; margin: auto; } h2{ color: #000000; font-size: 4vw; line-height: 4.75vw; font-weight: normal; text-align: center; padding: 0; margin: 0; } @media screen and (min-width: 1200px) { h2 { font-size: 3rem; line-height: 3.5rem; } } @media screen and (max-width: 600px) { h2 { font-size: 1.5rem; line-height: 1.75rem; } } h3{ display: block; position: relative; font-size: 3vw; line-height: 3.75vw; color: #000000; font-weight: normal; text-align: left; padding: 0; margin: 0; } h4{ display: block; position: relative; font-size: 2vw; line-height: 2vw; color: #000000; font-weight: normal; text-align: center; padding: 0; margin: 0; } h5{ display: block; position: relative; font-size: 4rem; line-height: 5rem; color: #000000; font-weight: normal; text-align: center; padding: 0; margin: 0; } h6{ display: block; position: relative; font-size: 3vw; line-height: 3vw; color: #000000; font-weight: normal; text-align: center; padding: 0; margin: 0; }