home.css

/*JESSICA DAVIES UX DESIGN HOME PAGE*/
html{
  background:url(images/home/clouds.jpg) no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size: cover;
}

body{
  margin:0%;
  font-family: 'Muli', sans-serif;
  color: rgb(57,57,57);
  font-size: 18px;
}


header{
  background-color: rgba(207,208,203, 0.3);
}

#jdLogo{
  width:75px;
  margin-left: 50px;
  margin-top:-40px;
}


/*THE ROLLING TITLE*/
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);*/

.textParent{
  /*position: absolute;*/
  width: 220px;
  /*left: 50%;*/
  /*margin: 0 auto;*/
  margin-left: 32%

}

p{
  font-size: 40px;
  display: inline-block;
  vertical-align: top;
  /*margin: 0;*/
  /*position: absolute;*/
}

#jessP{
  color: rgb(74,74, 74);
}

.word {
  position: absolute;
  width: 500px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sunset{
  color: rgb(251,235,219);
}


.mountain {
  color: rgb(60,89,104);
}

.charcol {
  color: rgb(74, 74, 74);
}


/*CSS FOR FLIP*/
/*container keeps perspective*/

#section1{
  display:block;
  padding-bottom: 2%;
}

#section2{
  display:block;
}
.flip-container{
  perspective: 1000;
  display: inline-block;
}

/*flips the pane when hovered*/
.flip-container:hover .flipper, .flip-container.hover .flipper{
  transform: rotateY(180deg);
}

.flip-container, .front, .back{
  width:300px;
  height:300px;
}

/*speed*/
.flipper{
  transition:0.6s;
  transform-style:preserve-3d;
  position:relative;
}

/*hide back of pane during swap*/
.front, .back{
  backface-visibility: hidden;
  position: absolute;
  top:0;
  left:0;
}

/*frontpane in front of back, transform is for firefox*/
.front{
  z-index:2;
  transform:rotateY(0deg)
}

.back{
  transform: rotateY(180deg);
  /*padding: 7%;*/
}

/*//CARDS CENTER OF HOME PAGE.*/
#cardSection{
text-align: center;
/*width:600;
margin: 0 auto;*/
}

.liInline{
display:inline;
padding: top:5%;
  /*text-align: left !important;*/
}

.companyTitle{
  font-size: 35px;
  margin-left: -7%;
  /*text-align: left !important;*/
  /*padding-right:45%;*/
}

.icon{
  width: 30px;
}

#iconTier{
  padding-left:45%;
}

#iconWebMd{
  padding-left:20%;
}

#iconBeauty{
  padding-left:0%;
}

#iconBunny{
  padding-left:20%;
}


/*.iconPeople{
  width:55px;
  padding-left:2%;
  padding-right:20%;
}*/

.projectDes{
  font-size: 18px;
  padding-left:7%;
  padding-right:7%;
}

.darkText{
  color:rgb(60,89,104);
}

.lightText{
color: rgb(236,233,226);
}

 a{
    text-decoration: none !important;
    color:inherit;
}

.projectBack{
  padding-left:7%:
}

.backButton{
  padding: 10px 15px 10px 15px;
  border-radius: 6px;
  font-size: 18px;
  text-shadow:none !important;
  border:none !important;
  box-shadow:none !important;
  text-align: left !important;
  margin-left: 7%;
}
.lightButton{
  background-color: rgb(236,233,226);
  color:rgb(60,89,104)!important;
}

.darkButton{
  padding: 10px 15px 10px 15px;
  background-color: rgb(118,140,147)!important;
  color:rgb(236,233,226) !important;

}
/*.containerLeft{
margin-left: 20%;
}*/


.light{
  background-color: rgb(207,208,203);
}

.dark{
  background-color: rgb(119,140,147);
}

#octo{
    /*position: absolute;*/

    margin-top:10%;
    width: 290px;

}

#webMd{
    /*position: absolute;*/
    width: 280px;
    margin-top: 37%;
}

#beauty{
    /*position: absolute;*/
    width: 280px;
    margin-top: 20%;
}

#bunnyEmoji{
  /*position: absolute;*/
  width: 200px;
  margin-top: 17%;

}



#buttonDiv{
  text-align: center;
}

 #devButton{
  padding: 10px 15px 10px 15px;
  background-color: rgb(118,140,147);
  border-radius: 6px;
  font-size: 26px;
  display:inline-block;
  text-shadow:none !important;
  border:none !important;
  box-shadow:none !important;
  margin-top:50px;
  margin-bottom:50px;
  color: rgb(236,233,226) !important;
}


#wrapper{
  min-height: 100%;
  position: relative;
}

#content{
  padding-bottom: 100px;
}

footer{
  /*margin-top:65px;*/
  background-color: rgba(207,208,203, 0.5);
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
}

#footerUl{
padding-top: 30px;
font-size:16px;
padding-right: 30px;

}
.footerLi{
  display:inline;
  vertical-align: middle;
  color: rgb(74,74,74) !important;
}

.footerLogos{
  width:20px;
  padding-left: 5px;
}

#crImg{
  width:15px;
}

.liRight{
  float:right;
}

/*
.square img {
  padding-top: 20px;
  z-index:1;
}*/