kipling/page.css

HTML Presentation

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600|Source+Code+Pro");
html {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    padding-bottom: 0;
    background-color: #2f274a;
}

article  {
    padding: 1em;
    margin: 0.25em;
    border-radius: 0.25em;
    background-color: #564787;
}

article.quote {
    background-color: #2f274a;
    border:none;
}


article .row {
    display: flex;
}

article .column {
    flex: 50%;
}

.quote {
    padding: 1em;
    margin: 0.25em;
    border-radius: 0.25em;
    background-color: #C2948A;
    border-left: 25px solid #9B5647;
}

.quote .text p {
    color: #F8F0FB;
    font-weight: 700;
    font-size: 3.50rem;
}

.quote .source p {
    color: #DBCBD8;
    font-weight: 400;
    font-size: 3.50rem;
    font-style: oblique;
}
nav {
   
    

}

.title h1 {
    color: #F8F0FB;
    font-weight: 600;
    font-size: 3.50rem;
} 

.title h2 {
    color: #C2948A;
    /* color: #DBCBD8; */
    font-weight: 500;
    font-size: 2.50rem;
} 

.title h3 {
    color: #DBCBD8;
    font-weight: 300;
    font-size: 2.50rem;
    line-height: 450%;
    font-style: oblique;
} 

h3 {
    color: #DBCBD8;
    font-weight: 300;
    font-size: 2.50rem;
    line-height: 450%;
    font-style: oblique;
    text-align: center;
} 

.right {
    float: right;
    width: 300px;
    padding: 10px;
}

article h1{
    color: #C2948A;
    font-weight: 500;
    font-size: 3.50rem;
} 

article h2 {
    color: #C2948A;
    font-weight: 400;
    font-size: 3.50rem;
} 

article p,li {
    color: #F8F0FB;
    font-weight: 400;
    font-size: 3.0rem
}

.seen {
    color: #3f2f75;
}

article ul {
    list-style-type: none;
}

svg {
    font-family: "Source Code Pro"
}

button {
    position: relative;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 5px;
    margin: 0;
    box-shadow: none;
    line-height: 40px;
    cursor: pointer;
    background-color: #FDFDFD;
    flex-basis: auto;
    width: auto;
    padding-right: 30px;
    padding-left: 30px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    min-width: 140px
}

button:focus {
    outline: none
}

button+button {
    margin-left: 0.8em
}

button h1 {
    display: inline;
    margin-right: .5em
}

button[disabled],
button[disabled]:hover {
    opacity: .65;
    cursor: not-allowed
}

button.primary {
    background-color: #2f274a;
    border-color: #564787;
    color: #FDFDFD
}

button.primary:hover {
    background-color: #2D3D7D
}

button.primary.active,
button.primary:active,
button.primary:focus {
    background-color: #2D3D7D
}

button.primary[disabled],
button.primary[disabled]:hover {
    background-color: #B8C1C1;
    border-color: #B8C1C1
}

button.secondary {
    background-color: #FDFDFD;
    color: #3F55AF;
    border-color: #E3ECEC
}

button.secondary:hover {
    background-color: #5068C2;
    border-color: #5068C2;
    color: #FDFDFD
}

button.secondary.active,
button.secondary:active,
button.secondary:focus {
    background-color: #5068C2;
    border-color: #5068C2;
    color: #FDFDFD
}

button.secondary[disabled],
button.secondary[disabled]:hover {
    border-color: #B8C1C1;
    color: #B8C1C1
}

button.expand {
    background-color: #FDFDFD;
    border: 1px solid #F1F3F7;
    border-radius: 25px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 0;
    font-size: 0.75em;
    line-height: 25px;
    color: #8C9696
}

button.action {
    border: none;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    color: #19273C;
    min-width: 0;
    padding: 0;
    border-radius: 0px
}

button.action:hover {
    color: #3F55AF;
    background-color: transparent;
    border-bottom: 2px solid #3F55AF
}

button.action:hover svg.ibm-icon {
    fill: #3F55AF
}

button.action:focus,
button.action.active,
button.action:active {
    color: #3F55AF;
    background-color: transparent;
    border-bottom: 2px solid #3F55AF
}

button.action:focus svg.ibm-icon,
button.action.active svg.ibm-icon,
button.action:active svg.ibm-icon {
    fill: #3F55AF
}

button.action[disabled],
button.action[disabled]:hover {
    background-color: transparent;
    color: #F1F3F7;
    border-bottom: 2px solid #F1F3F7
}

button.action[disabled] svg.ibm-icon,
button.action[disabled]:hover svg.ibm-icon {
    fill: #F1F3F7
}

button.icon {
    background-color: transparent;
    min-width: 0;
    padding: 0
}

button.icon:hover {
    color: #3F55AF;
    background-color: transparent
}

button.icon:hover svg.ibm-icon {
    fill: #3F55AF
}

button.basic {
    background-color: #FDFDFD;
    border: 1px solid #F1F3F7;
    border-radius: 0.25em
}

.hero_container {
    width: 70vw;
    margin: auto;
    margin-top: 17vh;
    display: flex;
    position: relative;
    flex-direction: row;
    z-index: 10;
    box-sizing: border-box
}

.hero_container .leftcontent {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    padding-bottom: 8rem
}

.hero_container .hero_illustration {
    flex-basis: 55%;
    padding-bottom: 5rem;
    box-sizing: border-box
}

.hero_container .hero_illustration img {
    max-height: 30rem
}

.hero_container button {
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.2)
}

.hero_container h1 {
    color: #FDFDFD;
    line-height: 50px
}

.hero_container .social-container {
    display: flex
}

.hero_container .social-container ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    height: 100%
}

.hero_container .social-container li {
    margin-right: 1.5rem;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    display: flex
}

.hero_container .social-container .icon2 {
    font-size: 1.2rem;
    height: 100%;
    width: 100%;
    transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: #FDFDFD
}

.hero_container .social-container .icon2:hover {
    color: #2D3D7D
}

.buttoncontainer {
    margin-top: 3.5rem;
    margin-bottom: 1rem;
    display: flex
}


.homepage-callout {
    display: flex;
    background-color: #FFD640;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.2)
}

.homepage-callout .callout-copy {
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 0.5rem
}

.homepage-callout .callout-copy a {
    text-decoration: none;
    border-bottom: 1px solid #19273C;
    color: #19273C;
    transition: all 0.2s ease-in-out
}

.homepage-callout .callout-copy a:hover {
    border-bottom: 1px solid #19273C;
    padding-bottom: 3px
}

.trio {
    margin-top: 9rem;
    margin-bottom: 7rem;
    margin-left: auto;
    margin-right: auto;
    width: 70vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap
}

.trio p {
    text-align: center
}

.trio h2 {
    text-align: center;
    padding-bottom: 1rem
}

.trio .trio-left {
    justify-content: center;
    flex-grow: 0;
    flex-basis: 20%;
    flex-shrink: 1;
    flex-wrap: wrap
}

.trio .trio-left img {
    display: flex;
    height: 60px;
    width: auto;
    margin: auto
}

.trio .trio-center {
    justify-content: center;
    flex-grow: 0;
    flex-basis: 20%;
    flex-shrink: 1;
    flex-wrap: wrap
}

.trio .trio-center img {
    display: flex;
    height: 60px;
    width: auto;
    margin: auto
}

.trio .trio-right {
    justify-content: center;
    flex-grow: 0;
    flex-basis: 20%;
    flex-shrink: 1;
    flex-wrap: wrap
}

.trio .trio-right img {
    display: flex;
    height: 60px;
    width: auto;
    margin: auto
}


@media only screen and (max-width: 1200px) {
    .hero_container {
        flex-direction: column-reverse;
        -webkit-flex-direction: row
    }
    .hero_container .hero_illustration {
        padding-bottom: 2rem
    }
    .contact-bg .contact-us .contact-content .social-icons>div {
        flex-basis: calc(50% - 30px);
        flex-direction: column
    }
    .contact-bg .contact-us .contact-illustration {
        margin-right: 2rem
    }
}

@media only screen and (max-width: 900px) {
    .hero_container {
        -webkit-flex-direction: row
    }
    .homepage-callout .callout-copy {
        padding-left: 2rem;
        padding-right: 2rem
    }
    .trio {
        flex-direction: column;
        max-width: 30rem;
        margin-top: 4rem;
        margin-bottom: 4rem
    }
    .trio .trio-left {
        margin-bottom: 3rem
    }
    .trio .trio-center {
        margin-bottom: 3rem
    }
    .trio .trio-right {
        margin-bottom: 3rem
    }
    .contact-bg .contact-us {
        flex-direction: column
    }
    .contact-bg .contact-us .contact-illustration {
        padding-bottom: 2rem
    }
}

@media only screen and (max-width: 750px) {
    .hero_container {
        -webkit-flex-direction: row
    }
    .contact-bg .contact-us .contact-content .social-icons>div {
        flex-basis: calc(50% - 30px);
        flex-direction: column
    }
    .contact-bg .contact-us .contact-content .social-icons>div>div {
        flex-direction: row
    }
}

@media only screen and (max-width: 500px) {
    .indexnav {
        overflow: hidden;
        height: auto
    }
    .indexnav .navcontent {
        flex-direction: column;
        -webkit-flex-direction: row
    }
    .indexnav .navcontent .navlogo {
        margin-bottom: 0.5rem
    }
    .indexnav .navcontent .menuitems {
        justify-content: flex-start
    }
    .indexnav .navcontent .menuitems ul {
        margin-top: 0.5rem
    }
    .indexnav .navcontent .menuitems ul li {
        margin-left: 0;
        margin-right: 2rem
    }
    .hero_container {
        -webkit-flex-direction: row
    }
    .trio {
        -webkit-flex-direction: row
    }
    .contact-bg .contact-us {
        -webkit-flex-direction: row
    }
    .contact-bg .contact-us .contact-content .social-icons {
        flex-direction: column;
        -webkit-flex-direction: row
    }
    .contact-bg .contact-us .contact-content .social-icons>div {
        flex-basis: calc(50% - 30px);
        flex-direction: column;
        -webkit-flex-direction: row
    }
    .contact-bg .contact-us .contact-content .social-icons>div>div {
        flex-direction: row;
        -webkit-flex-direction: row
    }
    .contact-bg .contact-us .contact-illustration img {
        height: auto
    }
    .hero_container .leftcontent .textcontent .buttoncontainer {
        display: flex
    }
    .footer-bg .footer-container {
        flex-wrap: wrap;
        flex-direction: column;
        -webkit-flex-direction: row
    }
    .footer-bg .footer-container .footer-right ul {
        flex-direction: column;
        -webkit-flex-direction: row
    }
    .footer-bg .footer-container .footer-right li {
        margin-left: 0
    }
    .footer-bg .footer-container .footer-right li a {
        padding-top: 0.6rem
    }
    .footer-bg .footer-container .footer-right li a:hover {
        border-bottom: none
    }
}








.spinner {
    width: 80px;
    height: 80px;
    background-color: #564787;
  
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
  
  @keyframes sk-rotateplane {
    0% { 
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }