/* app css stylesheet */
* {
    margin: 0;
}
.ng-invalid.ng-dirty {
border-color: red;
}
.ng-valid.ng-dirty {
border-color: green;
}
.coverWidth {
    width: 100%;
    display:inline-block;
}
.coverWidthWordList {
    width: calc(100%-30px);
}
.centreText {
    width: calc(100% - 30px) !important;
    text-align: center;
    margin-top: -15px;
}
.moveRight {   
    margin-left: 15px !important;
 // 
}
.moveLeft {
    margin-right: 15px !important;
    padding: 0px !important; 
}
.moveDown {
    margin-top: 15px;
}
h1 {
    font-family: 'Lobster', cursive !important;
}
.topH1MarginFix {
    margin-top: 0px !important;
    padding-top: 5px !important;
}
.navBarBlue {
    border-radius: 0px;
    height: 80px;
    border-bottom: 1px solid #e3cfc5;
}
.whiteText {
    color: #fff
}

.buttonAttributes {
    width: 100px !important;
}
/*http://ryanfait.com/resources/footer-stick-to-bottom-of-page/*/

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin: 0 auto -5em;
    background-image: url("img/paper.jpg");
}
.footer {
    height: 5em;
}
.push {
    height: 7em;
}


.field {
    cursor: pointer !important; 
}
/*
.fieldInclude {
    cursor: pointer !important; 
    background-color: #9ccb9c !important;;
}
.fieldExclude {
    cursor: pointer !important; 
    background-color: #fc7d7d !important;;
}
.fieldSelected {
    cursor: pointer !important;
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}
.fieldNotSelected {
    cursor: pointer !important;
}*/
.wordButtonHighlighted {
    /*background-color: #e3df59 !important;*/
  background-color: #dff0d8 !important;
}

.wordButton.ng-move,
.wordButton.ng-enter,
.wordButton.ng-leave {
  -webkit-transition:all ease-out 0.5s;
  transition:all ease-out 1s;
}

.wordButton.ng-leave.ng-leave-active,
.wordButton.ng-move,
.wordButton.ng-enter {
  opacity:0;
   // max-width:0;
}

.wordButton.ng-leave,
.wordButton.ng-move.ng-move-active,
.wordButton.ng-enter.ng-enter-active {
  opacity:1;
 //   max-width:500px;
}

.heightMax {
    height: 100%;
}
#bottom-left {
  position: absolute;
  bottom: 20;
  left: 15;
}
.halfWidthLeft {
    height: 50px;
    float:left;
    width:50%;
}
.halfWidthRight {
    height: 50px;
    float:right;
}
.coconutImageClass {
    vertical-align:bottom;
    margin-right:10px;
}
.centredText {
    text-align: center;
}
.imageHolder {
    width: 100%;
    height: calc(100% - 240px) !important;;
    overflow: hidden;
}
.imageMockup {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
@media only screen and (max-width: 770px) {
    .imageHolder {
        height: calc(100% - 306px) !important;
    }
}
.imageBackground {
    height: 80%;
    background-position: center;
    background-image: url("img/mockup.png");
    width:100%;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background-repeat: no-repeat;
    background-size: contain;
}
#buttonsurrounds {
    float:left;
    clear: none;
    display: block;
    position: absolute;
    width: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align:center;
}
@media only screen and (max-width: 554px) {
    .halfWidthLeft {
        width:100%;
        text-align: center;
    }
    .footerInner {
        line-height: 1.7;
        display: inline-block;
    }
    .halfWidthRight {
        width:100%;
        text-align: center;
        float:left;
    }
    .cocoText {
    }
    .subtitle {
        display: block;
    }
    .imageHolder {
        height: calc(100% - 348px) !important;
    }
}