/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

body {
  background-image: url('../img/moroccanTexture.png');
  background-repeat: repeat-x repeat-y;
  background-color: white;
}

@media only screen and (min-width: 993px) {
  .container {
      width: 60%;
  }
}

.icon-and-title-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row-reverse;
}

.appicon {
    width: 120px !important;
    height: 120px;
    border-radius: 5px;
    flex: 2;
}

.meruc {
    width: 152px;
    height: 152px;
    margin-right: 2em;
}

.text-title {
    font-size: 2em;
    font-weight: 300;
    color: #555;
}

.title-container{
    flex: 12;
    text-align: right;
}

.intertext-padding {
    height: 0.4em !important;
}

.text-subtitle {
    font-size: 1.2em;
    font-weight: 400;
    color: #777;
}

.text-description {
    word-wrap: break-word;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.5em;
    color: #111;
    float: right;
}

.section {
    padding-top: 10rem;
}

.screenshots_section {
    padding: 0 .5rem;
}

.about_section h4 {
    padding-bottom: .75em;
}


@media only screen and (max-width: 600px) {
    .fixed-action-btn {
        right: 12%;
        top: 7.7rem;
        position: absolute;
    }

    .developer_section {
        text-align: center;
    }

    .developer_section .paddingleft {
        padding: 0 !important;
    }

    .meruc {
        margin-right: 0em;
    }
}

@media only screen and (min-width: 601px) {
    .fixed-action-btn {
        left: 12%;
        top: 7.7rem;
        position: absolute;
    }
}

@media only screen and (min-width: 993px) {
    .fixed-action-btn {
        left: 23%;
        top: 7.7rem;
        position: absolute;
    }
}

.paddingleft {
    padding-left: 3em !important;
}

.paddingleft h4{
    padding-bottom: 0;
}

.paddingleft h4,
.paddingleft h5,
.paddingleft i {
    color: #555;
}

.screenshots_section .col {
    padding: 0.25rem .25rem !important;
}

.screenshots_section .col img {
    transition: transform 1s;
}

.screenshots_section .col img:hover {
    transform: scale(1.05);
}

.app {
    padding-bottom: 35px !important;
}