/* colors */
/* z-indicex */
/*Font  */
/* media query Break points */
/* layers */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: top;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

tspan {
  font-size: 14.4px;
  font-weight: normal;
}

/* colors */
/* z-indicex */
/*Font  */
/* media query Break points */
/* layers */
body {
  font-family: "adobe-clean", "Century Gothic", CenturyGothic, AppleGothic, verdana, arial, helvetica, sans-serif;
  font-size: 100%;
  font-weight: 100;
  color: #fff;
  line-height: 1.6;
  background-color: #fff;
}

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

.btn {
  color: #4F5D80;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #4F5D80;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.25s ease;
  outline: none;
  text-align: center;
  font-family: "adobe-clean", "Helvetica Neue", Helvetica, Arial;
  font-weight: 300;
}
.btn.primary {
  background-color: #70ac07;
  color: #fff;
  border: none;
  margin-top: 2px;
  border-radius: 5px;
  padding: 3px 10px;
  width: 50px;
  padding: 2px 7px;
}
.btn.secondary {
  background-color: #00c9df;
  color: #000;
}
.btn.tertiary {
  background-color: #fc6643;
  color: #fff;
}

.btn:hover {
  background-color: #230B25;
  color: #fff;
}

button:disabled {
  background: #ddd;
  border: 2px solid #545E67;
  color: #545E67;
}

button[disabled], button[disabled]:hover, button[disabled]:focus, button[disabled]:active {
  background: #ddd;
  cursor: default;
}

.feedback {
  padding: 5px 10px;
  border: 1px solid;
  opacity: 1;
}
.feedback.error {
  background-color: #FF9494;
  color: #D8000C;
  border-color: #D8000C;
}
.feedback.faded {
  opacity: 0.7;
}
.feedback.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  border-color: #4F8A10;
}
.feedback.info {
  background-color: #afd8ff;
  border-radius: 5px;
  color: #000;
  border: 0px;
}
.feedback a {
  color: #000;
  text-decoration: underline;
  font-style: italic;
}

a {
  color: #333;
  text-decoration: none;
}

::-webkit-input-placeholder {
  color: #bbb;
  font-family: sans-serif;
  font-weight: 300;
  font-style: italic;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #bbb;
  font-family: sans-serif;
  font-weight: 300;
  font-style: italic;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #bbb;
  font-family: sans-serif;
  font-weight: 300;
  font-style: italic;
}

:-ms-input-placeholder {
  color: #bbb;
  font-family: sans-serif;
  font-weight: 300;
  font-style: italic;
}

/*

Scroll bars

*/
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ddd;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #969696;
}

.cf-icon {
  background: no-repeat top left;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.cf-icon.add {
  background-position: 0 0;
  width: 12px;
  height: 12px;
}

.cf-icon.adobe {
  background-position: 0 -22px;
  width: 25px;
  height: 22px;
}

.cf-icon.add-app {
  background-position: 0 -54px;
  width: 24px;
  height: 24px;
}

.cf-icon.close {
  background-position: 0 -88px;
  width: 16px;
  height: 16px;
}

.cf-icon.app-icon {
  background-position: 0 -114px;
  width: 18px;
}

.cf-icon.collapse {
  background-position: 0 -144px;
}

.cf-icon.delete {
  background-position: 0 -174px;
}

.cf-icon.dropdown {
  background-position: 0 -204px;
  width: 25px;
  height: 25px;
}

.cf-icon.expand {
  background-position: 0 -239px;
}

.cf-icon.export {
  background-position: 0 -269px;
}

.cf-icon.file {
  background-position: 0 -299px;
}

.cf-icon.file-yellow {
  background-position: 0 -329px;
}

.cf-icon.folder-yellow {
  background-position: 0 -359px;
}

.cf-icon.horizontal-icon {
  background-position: 0 -389px;
  width: 19px;
  height: 19px;
}

.cf-icon.gp-icon {
  background-position: 0 -418px;
  width: 40px;
  height: 38px;
}

.cf-icon.folder {
  background-position: 0 -466px;
}

.cf-icon.import {
  background-position: 0 -496px;
}

.cf-icon.logout-icon {
  background-position: 0 -526px;
  width: 16px;
  height: 16px;
}

.cf-icon.outlook-icon {
  background-position: 0 -552px;
  width: 32px;
  height: 32px;
}

.cf-icon.save {
  background-position: 0 -594px;
}

.cf-icon.more-icon {
  background-position: 0 -624px;
  width: 3px;
  height: 13px;
}

.cf-icon.share {
  background-position: 0 -647px;
  width: 19px;
  height: 19px;
}

.cf-icon.shared-app {
  background-position: 0 -676px;
  width: 27px;
  height: 21px;
}

.cf-icon.thumbs-up {
  background-position: 0 -707px;
  width: 22px;
  height: 22px;
}

.cf-icon.user-icon {
  background-position: 0 -739px;
  width: 15px;
  height: 15px;
}

.cf-icon.vertical-icon {
  background-position: 0 -764px;
  width: 19px;
  height: 19px;
}

.cf-icon.facebook-share {
  background-position: 0 -793px;
  width: 32px;
  height: 32px;
}

.cf-icon.twitter-share {
  background-position: 0 -835px;
  width: 32px;
  height: 32px;
}

.login-container {
  width: 700px;
  padding: 20px;
  margin: 200px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-family: "proxima-nova", Arial;
  font-weight: 100;
}
.login-container h2 {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 25px;
  font-size: 40px;
}
.login-container .adobe-logo {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 138px;
  background-size: contain;
  background-repeat: no-repeat;
}
.login-container .login-tab img {
  width: 25px;
  height: 25px;
}
.login-container .login-tab {
  margin-right: 10px;
}
.login-container .gp-icon {
  display: inline-block;
  background-color: white;
  padding: 3px;
  line-height: 21px;
  border-radius: 2px;
}
.login-container .gp-icon img {
  width: 20px;
  height: 20px;
}
.login-container .connect-link {
  color: white;
}

.buttons-background {
  z-index: 14;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
}

.connect-buttons {
  width: auto;
  margin-left: 40%;
  margin-left: calc(50% - 125px);
}

.buttons {
  position: relative;
  z-index: 15;
  top: 46%;
  /*left: 45%;*/
  overflow: hidden;
}
.buttons .connect-button {
  margin-bottom: 20px;
  padding: 10px 20px;
  color: white;
  border-radius: 20px;
  width: 250px;
}
.buttons .connect-button.fb {
  background-color: #4267b2;
}
.buttons .connect-button.gp {
  background-color: #dc4a38;
}
.buttons .connect-button.gh {
  background-color: #333;
}
.buttons .connect-button.tw {
  background-color: #4099ff;
}
.buttons .connect-button.ln {
  background-color: #0077b5;
}
.buttons .connect-button.adobe {
  background-color: #fff;
  color: #d0d0d0;
}
.buttons .connect-button a {
  color: #fff;
}
.buttons .login-tab img {
  width: 25px;
  height: 25px;
}
.buttons .login-tab {
  margin-right: 10px;
}
.buttons .gp-icon {
  display: inline-block;
  background-color: white;
  padding: 3px;
  line-height: 21px;
  border-radius: 2px;
}
.buttons .gp-icon img {
  width: 20px;
  height: 20px;
}