html { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 15px; }

*, *:before, *:after { box-sizing: inherit; }

body { font-family: 'Open sans', sans-serif; font-size: 1em; background-color: #191919; color: #f0f0f0; text-align: center; margin: 0px; }

h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-size: 2.5em; margin: 0em 0em 0.6em 0em; letter-spacing: 0.01em; }

h1 { margin-bottom: 50px; font-weight: 600; }

@media only screen and (max-width: 1023px) { article h1 { font-size: 35px; margin-bottom: 20px; } }
h2 { font-size: 1.6em; margin: 0em 0em 0.9em 0em; font-weight: 500; }

h3 { font-size: 1.1em; letter-spacing: 0.6px; line-height: 1; margin-bottom: 10px; font-weight: 600; }

p { margin: 0px 0px 20px 0px; line-height: 22px; letter-spacing: 0.15px; }

article p { font-size: 14px; }

b, strong { font-weight: 700; }

.loose-line { line-height: 140%; }

a, a:active, a:visited, a:hover { color: white; display: inline-block; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.8); margin-right: 0px; margin-left: 0px; }

a:hover { border-bottom: 2px solid white; }

.login a, .login a:active, .login a:visited, .login a:hover { color: #246e89; border-bottom: #246e89; }

i.material-icons { vertical-align: middle; }

.animate-show-hide.ng-hide, .animate-show-hide-nag.ng-hide, .animate-show-hide-dashboard.ng-hide { opacity: 0; }

.animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove { transition: all 1s linear; }

.animate-show-hide-nag.ng-hide-remove { transition: all 1.5s linear; }

.animate-show-hide-dashboard.ng-hide-remove { transition: all 1.5s linear; }

/*------------------------- Popup -----------------------*/
#kayttoehdot-popup { background-color: #282828; padding: 50px; color: #efefef; border: 40px solid rgba(0, 0, 0, 0.7); }

#kayttoehdot-popup p { font-size: 14px; }

#kayttoehdot-popup .tag-remove { color: #efefef; }

@media only screen and (max-width: 1023px) { #kayttoehdot-popup { padding: 30px; border: 20px solid rgba(0, 0, 0, 0.7); } }
/*-------------- header footer
--------------*/
footer { padding: 50px; }

header { padding: 150px; background-color: rgba(255, 255, 255, 0); background-image: url(../img/header_background.jpg); background-size: cover; background-position: center center; }

header.low { padding: 40px; }

header h1 { font-size: 3em; margin: 0px; }

header #header-description { font-size: 17px; line-height: 28px; max-width: 900px; margin: 30px auto 0px auto !important; display: block; font-weight: 500; }

/*------------------------- Logo -----------------------*/
header img { width: 25%; height: auto; opacity: 1; }

header.low img { width: 15%; }

@media only screen and (max-width: 1023px) { header img { width: 100%; }
  header.low img { width: 100%; }
  header { padding: 70px; } }
/*------------------------- Aside -----------------------*/
aside { width: 35%; padding-right: 40px; text-align: left; }

article { width: 65%; margin: 0px; float: left; }

@media only screen and (max-width: 1023px) { aside { width: 100%; padding-right: 0px; text-align: none; }
  article { width: 100%; margin: 0px; float: none; } }
/*-------------- rows
--------------*/
.row.light { background-color: rgba(255, 255, 255, 0.3); background-image: url(../img/paperi_light.jpg); }

.row.medium { background-color: rgba(255, 255, 255, 0.1); /*background-image	: url( ../img/paperi_medium.jpg);*/ }

.row.dark { background-color: rgba(255, 255, 255, 0.1); background-image: url(../img/paperi_dark.jpg); }

.row.black { background-color: black; }

.row .container { width: 85%; max-width: 1250px; margin: 0px auto 0px auto; padding: 60px 0px 100px 0px; position: relative; }

@media only screen and (max-width: 640px) { .row .container { width: 95%; } }
.row .container.low { padding: 0px 0px 0px 0px; }

.row.with-shadow { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); }

div.row .container.narrow { max-width: 800px; }

div.row .container.no-padding { padding: 0px; }

div.row .container.low { padding: 30px; }

.container.frontpage-main-text { padding: 30px 0px 120px 0px; }

.container.frontpage-boxes { padding: 40px 0px 30px 0px; }

.container.frontpage-boxes > .cell { position: relative; }

/*-------------- columns
--------------*/
.column-30 { display: inline-block; width: 33.3%; vertical-align: top; }

/*-------------- box
--------------*/
.box { margin: 10px; padding: 30px 20px 20px 20px; padding: 30px 15px 15px 15px; background-color: rgba(255, 255, 255, 0.95); color: rgba(0, 0, 0, 0.8); border-radius: 4px; min-height: 280px; position: relative; display: flex; flex-direction: column; }
.box h2 { font-size: 1.5em; margin: 0px 0px 1em 0px; line-height: 1; }
.box h2.with-subtitle { margin-bottom: 8px; }
.box .frontpage-subtitle { margin-top: 0px; margin-bottom: 2em; font-weight: 700; }
.box p:last-of-type { margin-bottom: 0px; margin-top: auto; }
.box .button, .box button { margin-top: 8px; min-width: 50%; }
.box p { margin-bottom: 12px; }
.box .figure { font-weight: 700; padding-right: 10px; }
.box .steps-line { display: flex; }
.box .text-container { text-align: left; padding-left: 30px; padding-right: 10px; margin-bottom: 30px; }

.button:hover, button:hover { border-bottom: 0px; background-color: #246e89; }

/*-------------- login
--------------*/
section.login { padding: 0px; background-color: rgba(255, 255, 255, 0.1); margin-bottom: 0px; margin-top: 15px; }
section.login h3 { display: inline-block; font-size: 1.2em; line-height: 1em; margin: 0px 20px 0px 0px; }

#zero-schools-notice { margin-top: 26px; margin-bottom: 25px; }

#school-selection-needed p { margin-bottom: 10px; }

/*-------------- tags
--------------*/
.movie-info .tags-container { margin-bottom: 10px; }

article .tags-container { margin-bottom: 10px; }

.movie-list-container .tags-container-genres { margin-bottom: 20px; }

.tag-item { padding: 7px; background-color: rgba(255, 255, 255, 0.2); float: left; margin: 3px 3px 0px 0px; border-radius: 3px; border-bottom: 0px; }

.tag-item:hover { border-bottom: 0px; margin: 3px 3px 0px 0px; background-color: rgba(0, 0, 0, 0.5); }

.movie-item .tag-item { font-size: 13px; }

article .tag-item { font-size: 14px; }

.tag-item-koulukino { background-color: #983631; font-size: 12px; background-color: #315a98; font-size: 12px; padding: 12px; }

.tag-item.tag-item-koulukino:hover { background-color: #a9322c; }

@media only screen and (max-width: 1023px) { .movie-info .tags-container { margin-left: 0px !important; }
  .movie-list-container .movie-info .tags-container { display: none; }
  .tag-item.tag-item-koulukino { display: block; margin: 0px 0px 20px 0px; float: none !important; max-width: 150px; text-align: center; }
  .movie-list-container .tag-item.tag-item-koulukino { display: none; } }
/*------------------------- KUULUU JONKIN MUUALLE? -----------------------*/
.admin-list.container .userlicenses .active .table-cell { background-color: #246e89; padding-top: 30px; padding-bottom: 30px; }

#user-credits-container { justify-content: flex-start; /* flex-direction: row-reverse; */ }

#user-credits-row { padding: 10px 20px 0px 20px; }

#user-credits-row h3 { margin-bottom: 30px; }

#user-credits-container .cell { background-color: rgba(255, 255, 255, 0.9); color: rgba(0, 0, 0, 0.9); border-radius: 3px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); }

#user-credits-container .cell .month { font-size: 14px; font-weight: 600; padding: 0px; }

#user-credits-container .cell .credits { font-size: 23px; font-weight: 600; padding: 11px 0px 5px 0px; }

/*------------------------- User list -----------------------*/
.container.narrow.no-bottom-padding { padding-bottom: 0px; margin-bottom: 0px; }

.admin-list.container button { font-size: 13px; padding: 10px 14px 10px 14px; margin-left: 15px; }

.admin-list.container .table { width: 100%; }

.admin-list.container .table-row.table-header { background-color: rgba(255, 255, 255, 0.2) !important; font-size: 17px; font-weight: 500; padding: 10px; padding-bottom: 30px; padding-top: 30px; }

.admin-list.container .table-row:nth-child(odd) { background-color: rgba(255, 255, 255, 0.03); }

.admin-list.container .table-cell { padding: 10px; padding-bottom: 20px; padding-top: 20px; margin-bottom: 15px; }

.admin-list.container .table-cell:first-child { padding-left: 30px; }

.admin-list.container .table-cell:last-child { padding-right: 30px; }

/*------------------------- Lists -----------------------*/
ul { margin-bottom: 20px; }

li { margin-left: 25px; padding-left: 5px; list-style: square; margin-bottom: 8px; line-height: 22px; letter-spacing: 0.15px; }

/*-------------- general
--------------*/
.margin-left-8 { margin-left: 8px; }

.table { display: table; }

.table-row { display: table-row; }

.table-cell { display: table-cell; }

.green { color: rgba(61, 120, 61, 0.9); }

.small { font-size: 0.8em; }

.margin-top-50 { margin-top: 50px; }

.highlines { line-height: 2em; }

.block { display: block; }

.inline-block { display: inline-block; }

.inline-block-important { display: inline-block !important; }

.relative { position: relative; }

.center { text-align: center; }

.left { text-align: left; }

.float-left { float: left; }

.float-right { float: right; }

.hidden { display: none; }

.disabled { opacity: 0.2; pointer-events: none; }

.absolute-top-right { position: absolute; top: 15px; right: 15px; }

.pointer { cursor: pointer; }

.group:after { content: ""; display: table; clear: both; }

#sponsors-holder { margin-bottom: 50px; }

#sponsors-holder a { text-decoration: none; border-bottom: none; }

#sponsors-holder img { margin-right: 50px; }

#sponsors-holder a:last-of-type img { margin-right: 0px; }

@media only screen and (max-width: 640px) { #sponsors-holder img { margin-right: 0px; margin-bottom: 40px; }
  #sponsors-holder a { display: block; margin: 0px auto 0px auto; width: auto; } }

/*# sourceMappingURL=main.css.map */