@import url(https://fonts.googleapis.com/css?family=DM+Sans:400,700); html { overflow-y: scroll; cursor: default; } body { background: #fafafa; font-family: "DM+Sans", sans-serif; color: #585858; font-weight: 400; min-height: 100vh; /** * Making the element behave like a flexbox container: */ /* Ye Olde Flexbox for Webkit */ display: -webkit-box; /* Tweener flexbox */ display: -ms-flexbox; /* Prefixed "new flexbox" */ display: -webkit-flex; /* unprefixed standard "new flexbox" version */ display: flex; /** * Making the things inside line up vertically */ /* Your grandparents flexbox for Webkit */ -webkit-box-orient: vertical; /* Prefixed new syntax: */ -webkit-flex-direction: column; /* Same syntax for weird IE tweener */ -ms-flex-direction: column; /* unprefixed new syntax */ -webkit-box-direction: normal; flex-direction: column; } input[type=text], input[type=email], input[type=password], select, textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus { box-shadow: 0 0 5px rgba(0, 119, 238, 0.8); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(0, 119, 238, 0.8); } .flexboxtweener, .flexboxtweener > body { height: 100%; } header { background: rgb(41, 38, 78); position: relative; } header > a { display: inline-block; float: left; } .site-title { padding: .5em; margin: 0; color: rgb(250, 250, 250); font-size: 1.2em; display: inline-block; } .site-logo { height: 40px; width: 200px; background: url(../images/cisl_logotype.png) no-repeat center; text-indent: -9999em; margin: .18em 0!important; padding: 0; display: inline-block; float: left; vertical-align: middle; } div { padding: 1.5em; } div:first-of-type { padding-top: 0; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } h1, h2, h3 { letter-spacing: -0.05em; } h2, h3, h4, h5, h6 { font-weight: 400; } p, li { font-size: .8em; } a { font-size: inherit; color: rgb(82, 76, 157); } hr { border: 1px dotted rgb(0, 64, 127); } button, .button { text-align: center; background: rgb(73, 64, 135); color: #fff; border-style: solid; border-width: 1px; border-color: rgb(73, 64, 135); box-shadow: 0 0 5px rgba(73, 64, 135, 0.8); font: normal .89em DM+Sans, sans-serif; -webkit-box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); padding: .3em .3em .3em; border-radius: .3em; margin: .05em; } button:hover { background-color: rgb(54, 52, 108); box-shadow: 0 0 5px rgba(54, 52, 108, 0.8); border-color: rgb(54, 52, 108); } button:focus { background-color: rgb(82, 76, 157); box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); border: 1px solid rgba(138, 134, 166); border-color: rgb(138, 134, 166); } nav { width: 14em; border: 0; float: left; } nav ul { list-style-type: none; padding: 0; border: 0; background: rgb(54, 52, 108); margin: 0; vertical-align: top; /* border-width: 1px; border-style: solid; border-color: rgb(130, 179, 238); */ } nav .sub { background: rgb(74, 107, 172); border: 0; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; max-height: 0; overflow: hidden; } nav .sub a { color: rgb(215, 212, 230); font-size: 1.1em; border: 0; } nav .sub a:hover { border: 0; } nav .sub.expanded { max-height: 40em; } nav .fa { margin: 0 .5em; } nav a { padding: .5em; border: 0; text-decoration: none; display: block; color: rgb(238, 238, 238); /* border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(130, 179, 238); */ } nav a:hover { background: rgb(41, 38, 78); border: 0; color: rgb(255, 255, 255); } .content { overflow: hidden; padding-left: 0.8em; padding-right: 0.8em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1; -webkit-flex: 1; } .main { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .wrapper { margin: 1em; } /*___SECONDARY PANEL___*/ .secondary { position: absolute; top: 0; right: 0; width: 12em; border-width: 1px; border-style: solid; border-color: rgb(102, 94, 151); vertical-align: top; float: right; background: rgb(102, 94, 151); color: #fff; border-top: 0; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .secondary div { width: 13em; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .secondary p { color: rgb(238, 238, 238); font-size: .7em; } .secondary { position: fixed; top: 0; right: 0; height: 100%; max-width: 0; -webkit-transition: max-width 0.6s ease-out; transition: max-width 0.6s ease-out; z-index: 2; } .secondary img { border-color: rgb(54, 52, 108); border-style: solid; border-width: 1px; } .secondary.expanded { max-width: 13em; padding-right: 1em; } .expand-collapse { width: 1em; padding: 1.5em .5em; position: absolute; left: -2.05em; color: #fff; background: rgb(73, 64, 135); text-align: center; overflow: hidden; border-radius: .2em 0 0 .2em; -webkit-box-shadow: .0em .0em .5em 0 rgba(68, 68, 68, 0.12); box-shadow: .0em .0em .5em 0 rgba(68, 68, 68, 0.12); top: 17em; display: block; } .expand-collapse .fa { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all 100ms linear; transition: all 100ms linear; } .expand-collapse:hover .fa, .expand-collapse.active .fa { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: all 100ms linear; transition: all 100ms linear; } .secondary.expanded div { overflow-y: auto; height: 100%; overflow-x: hidden; } .secondary ul { padding: 0; list-style-type: none; } /*___USER PANEL___*/ .cpanel { display: inline-block; margin: revert; padding-right: .7em; float: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cpanel li { display: inline-block; vertical-align: middle; text-align: left; } .cpanel a { display: block; color: #fff; text-decoration: none; } .cpanel .company { font: normal .89em DM+Sans, sans-serif; font-size: .85em; } .cpanel .fa { font-size: 1.5em; } .avatar { position: relative; } .avatar a, .avatar img { display: block; height: 30px; width: 30px; border-radius: 50%; overflow: hidden; margin: 0 .5em 0 0; } .avatar img { width: inherit; } .username { max-width: 10em; } .msgs a { margin: 0 .5em; position: relative; } .msgs a span { position: absolute; top: -0.6em; right: -1.2em; background: rgb(206, 21, 21); display: block; padding: .3em; border-radius: 50%; font: normal .8em DM+Sans, sans-serif; height: 1.2em; width: 1.2em; text-align: center; } .user-cpanel-trigger { margin-left: .5em; } .user-cpanel { width: 15em; position: absolute; right: 1em; top: 3.8em; background: rgb(225, 225, 225); z-index: 1; border: 0; padding: 0; display: none; -webkit-box-shadow: .0em .0em .5em 0 rgba(68, 68, 68, 0.36); box-shadow: .0em .0em .5em 0 rgba(68, 68, 68, 0.36); } .user-cpanel.expanded { display: block; } .user-cpanel ul { padding: 0; list-style-type: none; margin: 0; } .user-cpanel li { /* border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; */ } .user-cpanel li:last-child { border-bottom: 0; } .user-cpanel a { display: block; padding: .5em; text-decoration: none; font: normal .89em DM+Sans, sans-serif; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 1em; } .exit { font: normal .89em DM+Sans, sans-serif; background: rgb(215, 212, 230); } .user-cpanel a:hover { background-color: rgb(41, 38, 78); color: #fff; } .user-cpanel:after { display: block; content: ''; width: 0; height: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: .5em solid white; background: transparent; position: absolute; top: -.5em; right: 0; } /*___SITE SEARCH___*/ .search-form { overflow: hidden; width: 100%; max-height: 0; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; } .search-form.expanded { max-height: 15em; } .search-form input[type='text'] { padding: .65em .5em .65em; margin: 0; border: 1px solid #d6d6d6; width: 100%; font-family: "DM+Sans", sans-serif; font-size: .8em; border-radius: .2em; } .search-form input[type=text]:focus { box-shadow: 0 0 5px rgba(0, 119, 238, 0.8); border: 1px solid rgba(0, 119, 238, 0.8); } .search-form button { margin: 1.4em 1.4em 1.4em 0; text-align: center; float: right; height: 2.063em; width: 3.3em; top: .1em; position: relative; font-size: 1em; } @media (max-width: 37.5em) { .search-form button { font-size: .85em; } .search-form input[type='text'] { width: 100%; } } @media (max-width: 28.75em) { .search-form button { font-size: .7em; top: 0; } .search-form input[type='text'] { width: 100%; } } .search-form div { overflow: hidden; padding: 1em; margin: .5em 5.5em .5em .5em; } /*___SEARCH FILTER___*/ .search__filter { height: 2.1em; width: 15em; padding: 0; position: absolute; top: 1.75em; right: .6em; font-family: "DM+Sans", sans-serif; font-size: .625em; text-transform: uppercase; border-radius: .5em; text-align: center; color: #444; background: rgb(225, 225, 225); border: solid 1px rgb(225, 225, 225); } .search__filter:hover { background-color: rgb(212, 212, 212); border-color: rgb(212, 212, 212); } .search__filter:focus { outline: 0; background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238); } .search__input { position: relative; } @media (max-width: 37.5em) { .search__filter { width: 10em; } .search__input { font-size: .85em; } } @media (max-width: 28.75em) { .search__filter { width: 6em; } .search__input { font-size: .65em; } } /*___CONTACT/FEEDBACK FORM___*/ .contact { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-color: rgb(73, 64, 135); border-width: 1px; border-style: solid; position: fixed; bottom: 0; margin: 0; padding: 0; width: 14em; left: 0; background: #ebebeb; list-style-type: none; -webkit-box-shadow: .0em .0em .5em 0 rgba(68, 68, 68, 0.12); box-shadow: .0em .0em .5em 0 rgba(68, 68, 68, 0.12); z-index: 2; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } #feedback { padding: 0; overflow: hidden; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; max-height: 0; } #feedback.expanded { max-height: 35em; padding: 1; } .contact ul { list-style-type: none; padding: 0 1em; } .contact button { text-align: center; background: rgb(73, 64, 135); color: #fff; border-style: solid; border-width: 1px; border-color: rgb(73, 64, 135); border-radius: .188em; box-shadow: 0 0 5px rgba(73, 64, 135, 0.8); font: normal .89em DM+Sans, sans-serif; -webkit-box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); padding: .5em 1em; border-radius: .5em; float: right; margin: 1em 1em; } .contact button:hover { background-color: rgb(54, 52, 108); border-color: rgb(54, 52, 108); } .contact button:focus { background-color: rgb(82, 76, 157); box-shadow: 0 0 5px rgba(82, 76, 157, 0.8); border: 1px solid rgba(82, 76, 157, 0.8); border-color: rgb(82, 76, 157); } .contact input[type="text"] { border-style: solid; border-width: 1px; border-color: rgb(179, 179, 179); font: normal .89em Tahoma, Helvetica, Arial, sans-serif; padding: .5em; width: 15.5em; } .contact input[type="text"]:disabled { background: #c9c9c9; } .contact li > label { padding: .615em 0 0; display: inline-block; } .contact textarea { border-style: solid; border-width: 1px; border-color: rgb(179, 179, 179); font: normal .89em Tahoma, Helvetica, Arial, sans-serif; width: 15.5em; padding: .5em; height: 5em; display: block; } .contact-trigger { display: block; background: rgb(82, 76, 157); padding: .5em 1em; color: #fff; text-decoration: none; } .contact-trigger:hover { background-color: rgb(54, 52, 108); border-color: rgb(54, 52, 108); } .contact p { margin: 0; font: normal .89em Tahoma, Helvetica, Arial, sans-serif; } .contact-trigger .fa { margin-right: .5em; } .contact input.error, .contact textarea.error { background: rgb(153, 0, 0); color: #fff; } .contact label.error { margin-top: .5em; color: rgb(153, 0, 0); font: normal .89em Tahoma, Helvetica, Arial, sans-serif; } /*___LOGIN___*/ #hero { background: rgb(215, 212, 230); padding: 3em; box-shadow: inset 0em 0em 4em 0em rgba(0, 0, 0, 0.08); } #login ul > li { margin: 0 } .login p { display: inline-block; text-align: left; } .login form { background: rgb(238, 238, 238); padding: 1em; border-radius: .5em; /*background: white;*/ } ul.login{ margin: 1em 0; padding: 0; } .login .form { list-style-type: none; padding: 0; box-shadow: 0em 0em 3em 0em rgba(31, 31, 31, 0.67); border-radius: .5em; overflow: hidden; } .login label { display: block; margin: 0 0 1em 0; } .login input[type="text"], .login input[type="password"] { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font: normal 1em DM+Sans, sans-serif; padding: .5em; } .copy h3 { display: inline-block; margin: 0 0 0 .5em; vertical-align: middle; } .copy .button { display: block; text-decoration: none; font-size: .6em; padding: 1em; max-width: 17em; margin: 0 auto; } .welcome { font-size: 1em; margin: 2em 0; color: rgb(41, 38, 78); } .welcome a { } div.login { padding: 0; } .ui-jqgrid, .ui-jqgrid-view, .ui-state-default, .ui-jqgrid-hdiv, .ui-jqgrid-bdiv, .ui-jqgrid-hbox, .ui-jqgrid-btable, .ui-common-table { padding: 0; } .ui-jqgrid-hdiv, .ui-state-default { height: 26px; } #login.forms button { display: block; float: none; padding: 1em; margin-bottom: .5em; border-radius: 0.5em; } #login.forms button:hover { background-color: rgb(54, 52, 108); border-color: rgb(54, 52, 108); } #login.forms button:focus { background-color: rgb(82, 76, 157); box-shadow: 0 0 5px rgba(82, 76, 157, 0.8); border: 1px solid rgba(82, 76, 157, 0.8); border-color: rgb(82, 76, 157); } #login a { display: block } #login ul { width: 100%; } #login input[type="text"], #login input[type="email"], #login input[type="password"]{ color: #444; padding: 1em; } .register.form #login li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 45%; display: inline-block; margin: 0 1em 1em 1em; } .register.form #login.forms input[type="text"], .register.form #login.forms select, .register.form #login.forms input[type="password"], .register.form #login.forms input[type="email"], .register.form #login.forms input[type="file"]{ padding: .5em; } .copy{ font-size: 1.5em; padding: 0; } .copy li{ list-style-type: none; background: #fff; padding: 1em; margin: 1em 0; } .copy li i{ font-size: 2.5em; /* text-align: center; */ /* display: block; */ color: rgb(73, 64, 135); vertical-align: middle; } .copy p{ line-height: 1.7; font-size: .7em; } .copy ul{ padding: 0; margin: 0; } .copy ul li { color: rgb(107, 107, 107); padding: 0; font-size: .7em; list-style-type: circle; margin: 1em; } .copy li:last-child{ /*background: none*/ } /*___Errors/Warnings___*/ .warning { -webkit-box-shadow: 0 .2em 0.2em 0 rgba(99, 50, 4, 0.79); box-shadow: 0 .2em 0.2em 0 rgba(99, 50, 4, 0.79); padding: 0; border-radius: .2em; position: relative; overflow: hidden; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; max-height: 20em; color: #fff; } .warning { display: none; } /*.messagedisplay*/ .warning a { color: rgb(212, 212, 212); } .warning span { padding: .5em 2em .5em .5em; display: block; } .warning.collapsed { max-height: 0px; padding: 0; } .warning .fa { position: absolute; top: 0; right: 0; font-size: 1.2em; padding: .5em; cursor: pointer; } .warningDisplay { background: rgb(216, 171, 30); } .successDisplay { background: rgb(97, 171, 66); } .errorDisplay { background: rgb(204, 55, 37); } .infoDisplay { background: rgb(60, 120, 216); } /*___FORMS___*/ .forms { text-align: center; background: #ebebeb; border: 1px solid rgb(177, 177, 177); border-radius: 0.3em; } .forms div { padding: .2em; text-align: center; } .forms div.box1 { width: 15%; text-align: left; } .forms div.box2 { width: 45%; text-align: left; } .forms div.box3 { width: 20%; } .forms div.box4 { width: 20%; } .forms div.box5 { width: 80%; text-align: left; } .forms div.box6 { width: 20%; } .forms ul { display: inline-block; padding: 0; width: 45%; text-align: left; vertical-align: top; } .forms ul.box { width: 90%; text-align: center; } .forms ul:first-child { margin-right: 1em; } .forms li { list-style-type: none; margin-bottom: 1em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .forms label { display: block; } .forms label, .forms input[type="text"], .forms input[type="password"], .forms select, .forms input[type="file"], .forms input[type="email"] { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .forms input[type="text"], .forms select, .forms input[type="password"], .forms input[type="email"], .forms input[type="file"] { font: normal .89em DM+Sans, sans-serif; padding: .5em; border-width: 1px; border-style: solid; border-color: rgb(179, 179, 179); } .forms select { background: rgb(244, 246, 246); } .forms select:hover { background: rgb(229, 231, 233); } .forms label.mid { width: 45%; display: inline-block; margin-right: 1em; vertical-align: top; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .forms label.small { width: 21%; display: inline-block; margin-right: .5em; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .forms label.mid:last-child, .forms label.small:last-child { margin-right: 0; float: right; } .forms button { float: right; padding: .5em 1em; margin-top: 1em; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .forms .error { margin-top: .5em; padding: .5em 1em; background: rgb(153, 0, 0); color: #fff; font: normal .89em DM+Sans, sans-serif; } .forms input[type="text"]:disabled, .forms select:disabled { background: #ccc; } .forms textarea { width: 100%; margin: 0px; height: 8em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; font: normal .89em DM+Sans, sans-serif; padding: .5em; border-width: 1px; border-style: solid; border-color: rgb(179, 179, 179); resize: vertical; } .register.form{ background: rgb(238, 238, 238); max-width: 35em; margin: 0 auto; padding: 1.5em; box-shadow: 0em 0em 3em 0em rgba(31, 31, 31, 0.67); border-radius: .5em; } #newProduct textarea { height: 14em; } label.wide[for="description"] { width: 93%; margin: 0 auto; text-align: left; font-size: .8em; } button.wide { margin: 1.5em auto; width: 93%; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*___FILTERABLE LISTS___*/ .alphabet { list-style-type: none; padding: 0; text-align: center; } .alphabet li { display: inline-block; margin: .2em; } .alphabet a { padding: .2em .5em; font-size: 1.2em; border-width: 1px; border-style: solid; border-color: rgb(230, 230, 230); display: block; background: #fff; text-decoration: none; -webkit-box-shadow: 0 0.1em 0em 0em rgb(179, 179, 179); box-shadow: 0 0.1em 0em 0em rgb(179, 179, 179); } .sortable-list { padding: 0; } .sortable-list input[type='text'] { padding: .5em; margin: 0 0 1.143em; width: 100%; font-family: "DM+Sans", sans-serif; font-size: .875em; border: 1px solid #d6d6d6; } .sortable-list .list { list-style: none; padding: 1em 0 0 0; margin: .688em 0 0; border-top: 1px solid #d6d6d6; } .sortable-list .list li { padding: .75em 1em; font-size: 1em; } .sortable-list .list li a { text-decoration: none; font-weight: 700; line-height: 1; color: rgb(73, 64, 135); } .sortable-list .list li a:hover { color: rgb(41, 38, 78); } .sortable-list .list li p { margin: .625em 0 0; } .sortable-list .list li:nth-child(odd) { background-color: #ebebeb; } .sortable-list__actions { padding: 0; margin: 0; list-style-type: none; } .sortable-list__actions li { display: inline-block; /* 5px */ margin: 0 0 .313em; font-size: 1em; } /*___PRIVATE MESSAGING___*/ .message-list{ padding: 0; } .message-list li{ list-style-type: none; } .message-list > li { border: 1px solid rgb(226, 226, 226); padding: 2em; margin: 1em 0; background: #fff; } .private-message { padding: 1em; position: relative; background: #ebebeb; } .private-message h4 a{ text-decoration: none; font-size: 1.5em; } .private-message span{ font-size: 1.3em; vertical-align: middle; margin-right: 1em; } .private-message p{ font-size: 1.3em; line-height: 1.7; } .private-message .actions{ text-align: right; } .private-message button{ font-size: 1.1em; padding: .5em 1em; margin: .25em; } .private-message button a { color: #fff; text-decoration: none; } .private-message .userpic { height: 3em; width: 3em; border-radius: 50%; overflow: hidden; background: transparent; vertical-align: middle; margin-right: .5em; } .private-message .userpic img { height: 3em; width: 3em; } .private-message date, .private-message time { font-size: 1.2em; display: inline-block; vertical-align: middle; } .private-message .sender { margin: 1em 0; } .private-message h4 { display: inline-block; margin: 0 1em 0 0; } .show-message { font-size: 1.3em } .private-message .actions, .private-message .message { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; max-height: 0; overflow: hidden; } .private-message .actions.expanded { max-height: 500em; } .private-message .message.expanded { max-height: 500em; } /*___RESPONSIVE .forms___*/ @media (max-width: 34.375em) { .forms ul { display: block; width: 100%; padding: 0 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } /*___RESPONSIVE LOGIN___*/ @media (min-width: 45.625em) { .login, .copy{ display: inline-block; vertical-align: middle; } .welcome{ display: inline-block; width: 54%; vertical-align: middle; margin: 0 2em; } #login{ width: fit-content; } .register.form #login{ width: auto; } } @media (max-width: 45.625em) { .copy i.fa { display: block; text-align: center; font-size: 3em; } .copy h3 { display: block; margin: 1em 0; text-align: center; } .register.form #login li { display: block; width: auto; margin: 0 0 1em 0; } #hero { padding: 1em; } } /*___MEDIA QUERIES___*/ @media (max-width: 52.500em) { nav { width: 100%; float: none; } .content { padding-right: 0; padding-left: 0; } .contact { display: none; } .cpanel { font: .5em; padding-right: .5em; } .site-logo { margin: 0; } .cpanel .fa { font-size: 1.3em; } } @media (max-width: 28.75em) { body { font-size: 1.2em; } .secondary.expanded { max-width: 8em; padding-right: 0.5em; } .secondary div { width: 8.5em; padding: 0.5em; } .wrapper { margin: 1em 0; padding: .5em; } header > a { display: block; float: none; } .site-logo, .cpanel { display: block; text-align: center; float: none; } .cpanel li { text-align: center; } .site-logo { border-bottom: 1px solid rgb(0, 64, 127); width: 100%; padding-bottom: .3em; margin: .18em 0 0!important; } .ptrigger { position: absolute; top: 0; z-index: 1; right: 0; background: rgb(41, 38, 78); padding: .5em; border-radius: 0 0 .4em .4em; } .user-cpanel-trigger { margin-left: 0; } .cpanel { font: .5em; padding-right: .5em; } .user-cpanel { top: 2.5em; } .cpanel .fa { font-size: 1.3em; } .user-cpanel a { font-size: .95em; } } @media (max-width: 43.750em) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 1em; width: 45%; padding-right: 1em; white-space: nowrap; } .user-cpanel a { font-size: .9em; } .user-cpanel { right: .6em; top: 2em; } } /*___HELPERS___*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } div.salida { display: block; text-align: left; list-style-type: none; width: 98%; padding: 0em; } li.salida1 { width: 15%; display: inline-block; text-align: left; list-style-type: none; } li.salida2 { width: 80%; display: inline-block; text-align: left; list-style-type: none; } /*___SHARED___*/ .reference, .reference--required { display: inline; font-family: "DM+Sans", sans-serif; font-weight: normal; } .reference--required { color: rgb(153, 0, 0); } .reference[title], .reference--required[title] { cursor: help; } .float-left { float: left; } .float-right { float: right; } .list-lower-alpha { list-style: lower-alpha; } .invisible { visibility: hidden; position: absolute; left: -999999em; } .text-label { padding: 0; /* 5px (10px) */ margin: 0 0 .5em; display: block; /* 10px */ font-size: .625em; text-transform: uppercase; } /*___CHAINED SELECTS___*/ .forms label[data-chained] { display: none; } .forms label[data-chained='0'] { display: block; } /*___DYNAMIC INPUTS___*/ .add-field, .remove-field { font-size: .769em; text-transform: uppercase; text-decoration: underline; color: #999; cursor: pointer; } .add-field { margin-top: -.769em; } /*___LINKS AS BUTTONS___*/ .button--primary, .button--secondary, .button--tertiary { text-align: center; padding: .35em .5em .45em; display: inline-block; font: normal .89em DM+Sans, sans-serif; font-size: .75em; text-decoration: none; text-shadow: 0 0 .5em rgba(0, 0, 0, .09); -webkit-box-shadow: inset 0 0 1.5em rgba(0, 0, 0, .12); cursor: pointer; border-style: solid; border-width: 1px; box-shadow: 0 0 5px rgba(73, 64, 135, 0.8); box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); border-radius: .5em; } .button--primary { color: #fff; background: rgb(102, 94, 151); border: solid 1px rgb(102, 94, 151); } .button--primary:hover { background-color: rgb(73, 64, 135); border-color: rgb(73, 64, 135); } .button--primary:focus { background-color: rgb(138, 134, 166); border-color: rgb(138, 134, 166); } .button--secondary { color: #444; background: rgb(215, 212, 230); border: solid 1px rgb(215, 212, 230); } .button--secondary:hover { background-color: rgb(138, 134, 166); border-color: rgb(138, 134, 166); } .button--secondary:focus { background-color: rgb(212, 212, 212); border-color: rgb(212, 212, 212); } .button--tertiary { color: #444; background: rgb(225, 225, 225); border: solid 1px rgb(225, 225, 225); } .button--tertiary:hover { background-color: rgb(212, 212, 212); border-color: rgb(212, 212, 212); } .button--tertiary:focus { background-color: rgb(238, 238, 238); border-color: rgb(238, 238, 238); } .button--large { padding: .55em .7em .55em; font-size: .95em; } .button--disabled { opacity: .5; cursor: default; pointer-events: none; } /*___ITEM BOXES___*/ .items-list { padding: 0; list-style: none; } .item-box { margin-bottom: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #ebebeb; border: 1px solid #c2c2c2; box-shadow: 3px 3px 9px 1px #c2c2c2; border-radius: 0.5em; padding: 1em; font-size: 1em; text-align: left; max-width: 30em; } @media (min-width: 68.750em) { .item-box { width: 47%; margin: 0 1em 1em 0; display: inline-block; vertical-align: top; } } .item-box__visual { padding: .625em !important; /* TODO: find from where it's inheriting the top padding. */ margin: 0 0 .875rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #fff; border: 1px solid #d6d6d6; box-shadow: 3px 3px 9px 1px #d6d6d6; border-radius: 0.5em; } @media (min-width: 28.750em) { .item-box__visual { min-height: 7.625em; } } .item-box__visual i { font-size: 3.5em; color: rgb(54, 52, 108); } @media (min-width: 28.750em) { .item-box__visual i { line-height: 1.786em; } } /** * NOTE: the `img` elements should be normalized in the server. * The `max-height` and `max-width` are a temporary fix. */ .item-box__visual img { max-width: 100%; max-height: 6.250em; margin: 0 auto; display: block; } .item-box__content { padding: 0; margin-bottom: 1em; display: inline-block; vertical-align: top; min-width: 300px; } .item-box__title { margin: 1em 0; min-width: 240px; font-weight: 700; } @media (min-width: 34.375em) { .item-box__description { margin: 0; line-height: 1.7; } } .item-box__actions { padding: 0; overflow: hidden; } .item-box__actions__more { text-align: center; background: rgb(73, 64, 135); color: #fff; border-style: solid; border-width: 1px; border-color: rgb(73, 64, 135); border-radius: .188em; box-shadow: 0 0 5px rgba(73, 64, 135, 0.8); font: normal .89em DM+Sans, sans-serif; -webkit-box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); padding: .333em .5em .417em; border-radius: .5em; float: right; margin: 0 1em; font-size: .75em; text-decoration: none; text-shadow: 0 0 .5em rgba(0, 0, 0, .09); } .item-box__actions__more:hover { background-color: rgb(54, 52, 108); box-shadow: 0 0 5px rgba(54, 52, 108, 0.8); border-color: rgb(54, 52, 108); } .item-box__actions__more:focus { background-color: rgb(82, 76, 157); box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.12); border: 1px solid rgba(138, 134, 166); border-color: rgb(138, 134, 166); } .item-box__actions .dropdown { margin-right: .417em; float: right; } .item-box__actions__label { display: block; font-size: .625em; text-transform: uppercase; } .item-box__notes { float: left; font-size: .625em; font-family: "DM+Sans", sans-serif; line-height: 2.6em; min-width: 300px; color: #7a7a7a; } @media (max-width: 33.75em) { .item-box__notes { line-height: 1.2; } } .item-box__notes a { color: inherit; } .item-box__score { float: right; } @media (max-width: 33.75em) { .item-box__score { float: left; clear: both; } } .item-box__star { font-size: .938em; color: rgb(41, 38, 78); line-height: 1.625em; } /*___ITEM VIEW___*/ .item-view { overflow: hidden; } .item-view__product { padding: 0; } @media (min-width: 60em) { .item-view__product { width: 40%; max-width: 18.75em; float: left; } } .item-view__visual { padding: .625em !important; /* TODO: find from where it's inheriting the top padding. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: #fff; border: 1px solid #d6d6d6; box-shadow: 3px 3px 9px 1px #d6d6d6; border-radius: 0.5em; } .item-view__visual i { color: rgb(41, 38, 78); } @media (max-width: 66.875em) { .item-view__visual i { font-size: 7em; } } @media (min-width: 66.875em) { .item-view__visual i { font-size: 12em; } } .item-view__visual img { display: block; width: 100%; height: auto; } @media (max-width: 60em) { .item-view__visual img { margin: .625em auto; } } .item-view__details { padding: .625em 0 0; position: relative; overflow: hidden; border-bottom: 1px solid #d6d6d6; } .item-view__visual + .item-view__details { margin-top: 1.25em; border-top: 1px solid #d6d6d6; } .item-view__label { padding: -.4em 0 0; display: block; font-size: .625em; min-width: 300px; text-transform: uppercase; } .item-view__price, .item-view__score { font-size: 1.25em; font-weight: 700; } .item-view__price sup, .item-view__score sup { font-size: .6em; } .item-view__star { font-size: .75em; color: rgb(41, 38, 78); } .item-view__visits-button, .item-view__contact-button { margin-bottom: .625em; } .item-view__reference { padding: .5em 0 1em; display: block; clear: both; font-family: "DM+Sans", sans-serif; font-size: .625em; color: #adadad; } .button--disabled + .item-view__reference { margin-top: -1em; } .item-view__profile { padding: 0; margin-bottom: .625em; } @media (max-width: 60em) { .item-view__profile { margin-right: 1.25em; float: left; } } .item-view__description { padding: 0; } @media (max-width: 60em) { .item-view__description { margin-top: 1.25em; } } @media (min-width: 60em) { .item-view__description { width: 50%; max-width: 70em; margin: 0 0 0 1.25em; float: left; } } .item-view__fields { padding: 0; margin: 0; list-style: none; } .item-view__fields li { font-size: .813em; } .item-view__field-title { font-weight: 700; } .item-view__field-content { margin-bottom: .769em; } .item-view__video, .item-view__message { padding: 1.25em 0 0 !important; margin-top: 1.25em; border-top: 1px solid #d6d6d6; } .item-view__message ul { width: 100%; padding: 0 1em; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .item-view__video__link { padding: 1em; margin-top: 2em; display: block; font-size: .625em; text-align: center; text-decoration: none; color: #585858; background: #ebebeb; border: 1px solid #d6d6d6; } .item-view__video__link span { margin-bottom: 1em; display: block; text-transform: uppercase; } .item-view__video__link i { font-size: 5.6em; } /*___SEARCH FILTER___*/ .search-filter { padding: 0; list-style: none; } .search-filter__link { color: #fff; text-decoration: none; cursor: pointer; } .search-filter__link:hover { text-decoration: underline; } .search-filter__link.selected { cursor: default; font-weight: 700; text-decoration: underline; } /*___PAGINATION___*/ .pagination-wrapper { padding: 0; } .pagination { padding: 0; list-style: none; } .pagination__item { margin-left: -1px; float: left; font-size: .625em; } .pagination__item:first-child, .pagination__item:last-child { font-size: .875em; } .pagination__link { height: 2.6em; padding: 0 .8em; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; line-height: 2.6em; border: 1px solid #d6d6d6; } .pagination__item:first-child .pagination__link, .pagination__item:last-child .pagination__link { height: 1.857em; padding: 0 .571em; line-height: 1.857em; } .pagination__link:hover, .pagination__link.is-active { position: relative; color: #fff; background: rgb(41, 38, 78); border-color: #7a7a7a; } .pagination__link.is-active, .pagination__link.is-disabled { cursor: default; pointer-events: none; } .pagination__link.is-disabled { opacity: .6; } .pagination__item:first-child .pagination__link { border-radius: .214em 0 0 .214em; } .pagination__item:last-child .pagination__link { border-radius: 0 .214em .214em 0; } /*___BROWSE HAPPY___*/ /* Here we use hex colors and pixels to achieve a cross-browser message. */ .browsehappy { margin: 0; padding: 10px; background: #d8ab1e; border-bottom: 1px solid #938762; color: #fff; } .browsehappy a { color: #fff; } /*___FOOTER___*/ .footer { margin: 0 0 .625em; font-family: "DM+Sans", sans-serif; text-align: center; } .footer p { margin: 0; /* 10px */ font-size: .625em; } .footer a { color: #585858; } .footer__img { padding: .625em; display: inline-block; } /*___DROPDOWN___*/ .dropdown { padding: 0; margin: 0; display: inline-block; } .dropdown__button { cursor: pointer; } .dropdown__options { min-width: 4.5em; padding: 0; margin: 0; position: absolute; display: none; overflow: hidden; list-style: none; text-align: left; border: solid 1px #b8b8b8; background: #fff; border-radius: .5em; -webkit-box-shadow: 0 0 1.5em rgba(0, 0, 0, .12); box-shadow: 0 0 1.5em rgba(0, 0, 0, .12); } .dropdown__options li { font-size: 1em; } .dropdown__options li + li { border-top: inherit; } .dropdown__options__link { padding: .417em; display: block; font-size: .75em; color: rgb(41, 38, 78); text-decoration: none; cursor: pointer; } .dropdown__options__link:hover { background: #ABBFE0; } /*___VIEW MORE___*/ .view-more { padding: 0; text-align: center; } .view-more__button { padding: .375em 3em; /* 16px */ font-size: 1em; display: inline-block; } /*___HEADER NAV___*/ .header-nav { padding: 0; margin: 1em 0 0 2em; list-style: none; display: inline-block; overflow: hidden; } @media (max-width: 52.5em) { .header-nav { margin: 0; display: block; clear: both; } } @media (max-width: 28.75em) { .header-nav { margin-top: -1px; } } .header-nav__item { float: left; } @media (max-width: 52.5em) { .header-nav__item { float: none; border-top: 1px solid rgb(41, 38, 78); background: rgb(102, 94, 151); } } .header-nav__item + .header-nav__item { border-left: 1px solid rgb(255, 255, 255); } @media (max-width: 52.5em) { .header-nav__item + .header-nav__item { border-left: 0; } } .header-nav__item__link { padding: .278em .667em; display: block; font-size: 1.125em; color: #fff; text-decoration: none; /* text-transform: uppercase; */ } @media (max-width: 52.5em) { .header-nav__item__link { padding-left: 1.222em; text-transform: none; background: rgb(54, 52, 108); } } @media (max-width: 28.75em) { .header-nav__item__link { padding-left: 1em; } } nav li, nav .nav-toggle { font-size: 12.8px; position: relative; display: block; cursor: pointer; width: 100%; } nav .nav-toggle { background: rgb(54, 52, 108); color: rgb(238, 238, 238); } nav .dropdown > a:after, nav .dropdown1 > a:after { content: 'V'; font-size: 12.8px; position: absolute; right: 15px; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; } nav .dropdown.open, .desktop nav ul li:hover { background-color: rgb(82, 76, 157); } nav .dropdown1.open, .desktop nav li ul li:hover { background-color: rgb(82, 76, 157); } nav .dropdown.open > a:after, nav .dropdown1.open > a:after, .desktop nav li:hover > a:after, .desktop nav li ul li:hover > a:after { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); } nav .dropdown ul { position: relative; background-color: rgb(54, 52, 108); display: none; } nav .dropdown1 ul { position: relative; background-color: rgb(73, 64, 135); display: none; } nav .dropdown li a { color: rgb(215, 212, 230); } nav .dropdown1 li a { color: rgb(215, 212, 230); } .desktop nav { display: block; } .desktop nav li { text-align: left; display: block; } .desktop nav li:hover ul, .desktop nav li ul li:hover ul { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); visibility: visible; } .desktop nav .dropdown:hover > a:after, .desktop nav .dropdown1:hover > a:after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .desktop nav .dropdown > a:after, .desktop nav .dropdown1 > a:after { content: '>'; font-size: 12.8px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; } .desktop nav .dropdown ul { top: 0; left: 212px; width: 20em; position: absolute; z-index: 1; opacity: 0.95; display: block !important; visibility: hidden; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; } .desktop nav li ul .dropdown1 ul { top: 0; left: 245px; width: 18em; position: absolute; z-index: 1; opacity: 0.95; display: block !important; visibility: hidden; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; } .desktop nav .nav-toggle { display: none; }