// @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700'); @import 'plugins/flags/_flag-icon'; @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-400.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-400.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-400.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-400.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-400.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v34-latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } body, html{ margin: 0; height: 100%; width: 100%; } #language-selector-landing{ font-family: 'Open Sans', 'Helvetica', sans-serif; .language_selector_logo{ max-width: 100%; height: auto; position: relative; left: 50%; transform: translate3d(-50%, 0, 0); top: 0; } h1{ font-size: 2.25em; margin: 0; font-weight: 300; padding: 10px 0; letter-spacing: -1px; color: #222; } p{ } .container{ max-width: 1200px; width: 100%; margin: 0 auto; padding: 50px 0; height: 100%; box-sizing: border-box; p{ font-size: 1.25em; font-weight: 300; margin: 5px 0 15px 0; color: #484848; } } ul{ padding: 0; display: flex; margin-left: -15px; margin-right: -15px; flex-direction: row; flex-wrap: wrap; list-style-type: none; li{ flex-basis: 24%; padding: 10px; margin: 5px; border-radius:3px; transition: .2s ease-out; box-sizing: border-box; &:hover{ background: #ebebeb; } a{ text-decoration: none; color: #3c3c3c; font-weight: 300; i{ margin-left: 5px; } } } } } // tablet + mobile @media only screen and (max-width: 1230px){ p{ font-size: 1em!important; } .row{ &:first-of-type{ padding: 0 15px!important; } } .container{ padding: 20px 0 !important; } h1{ font-size: 1.75em!important; } .language_selector_logo{ max-width: 180px!important; margin-bottom: 15px!important; } .row{ margin: 0!important; } ul{ margin: 0!important; } li{ flex-basis: 50% !important; margin: 0!important; padding: 10px 15px!important; } } // mobile @media only screen and (max-width: 480px){ li{ flex-basis: 100%!important; margin: 0!important; padding: 10px 15px!important; &:nth-child(2n){ background: #f3f3f3!important; } } }