body {
    font-family: "Open Sans", sans-serif;
    color: #636363;
}

.text-header {
    font-size: 24px;
    color: #0098FF;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

.text-regular {
    font-size: 16px;
    color: #636363;
    padding-left: 5px;
    padding-right: 5px;
}

.text-regular-larger {
    font-size: 16px;
    font-weight: bold;
    color: #636363;
    margin: 0.5em;
    padding-left: 5px;
    padding-right: 5px;
}

.text-button {
    cursor: pointer;
}

.div-content {
    max-width: 971px;
    min-width: 971px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 0em;
}

.img-example-iphone {
    position: absolute;
    top: 52px;
    left: 0px;
}

.img-iphone {
    position: absolute;
    top: 114px;  /* = iphone top + 62px */
    left: 16px; /* = iphone left + 16px */

    transition: opacity 0.3s linear;
    opacity: 1;
}

.img-iphone-fade {
    position: absolute;
    top: 114px;  /* = iphone top + 62px */
    left: 16px; /* = iphone left + 16px */

    transition: opacity 0.3s linear;
    opacity: 0;
}

.img-mobile-preview {
    transition: opacity 0.3s linear;
    opacity: 1;    
}

.img-mobile-preview-fade {
    position: absolute;
    transition: opacity 0.3s linear;
    opacity: 0;    
}

.img-mobile-iphone {
    top: 62px;  /* = iphone top + 62px */
    left: 16px; /* = iphone left + 16px */

    transition: opacity 0.3s linear;
    opacity: 1;
}

.img-mobile-iphone-fade {
    position: absolute;
    top: 62px;  /* = iphone top + 62px */
    left: 16px; /* = iphone left + 16px */

    transition: opacity 0.3s linear;
    opacity: 0;
}

.img-customise-example-iphone {
    position: absolute;
    top: 0px;
    left: 0px;

    transition: all 0.3s linear;
    opacity: 1;
}

.img-customise-example-iphone-fade {
    position: absolute;
    top: 200px;
    left: 0px;

    transition: all 0.3s linear;
    opacity: 0;                
}

.img-ipad-composite {
    position: absolute;
    top: 100px;
    left: 270px;

    transition: all 0.3s ease;
    opacity: 1;
}

.img-ipad-composite-fade {
    position: absolute;
    top: -200px;
    left: 0px;

    transition: all 0.3s ease;
    opacity: 0;
}

.img-desktop-composite {
    position: absolute;
    top: 150px;
    left: 0px;

    transition: all 0.3s ease;
    opacity: 1;
}

.img-desktop-composite-fade {
    position: absolute;
    top: -200px;
    left: 60px;

    transition: all 0.3s ease;
    opacity: 0;
}

.customise-widgets {
    text-align: center;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    color: #636363;
}

.widget-td {
    padding-right: 0em;
    padding-bottom: 0em;
    cursor: pointer;
}

.hideDescription {
    margin: 0;
    height: 0;
    overflow: hidden;

    transition: all 0.3s ease-out;
    opacity: 0.5;
}

.showDescription {
    margin: initial;
    height: 6em;
    overflow: hidden;

    transition: all 0.3s ease-out;
    opacity: 1;
}

.showCustomiseDescription {
    opacity: 1;
    position: absolute;
    top: 10%;
    left: 0%;
    margin: 0;
    padding: 0;
    border: 0;
    display: inline;

    transition: all 0.3s ease-out;
}

.hideCustomiseDescription {
    opacity: 0;
    position: absolute;
    top: 10%;
    left: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    display: inline;

    transition: all 0.3s ease-out;
}

ul {
    list-style-image: url('../images/plus.png');
}

#customiseDivLeft {
    width: 491px; 
    float: left; 
    position: relative;
}

#customiseDivRight {
    position: relative; 
    width: 491px; 
    float: right; 
    text-align: left;
    top: -30px;
}

#designDivLeft {
    width: 491px;
    position: relative; 
    float: left; 
    text-align: right;
}

#designDivRight {
    width: 491px;
    position: relative; 
    float: right; 
}

#mobileDescriptions, #mobileDesignDescriptions, #mobile-prev, #mobile-next, #mobile-design-prev, #mobile-design-next, #mobileCategory, #mobileiPhone, #mobileiPhoneDesign  {
    display: none;
}

#mobileiPhoneFade, #mobileiPhoneDesignFade {
    display: none;
    position: absolute;
}

#customiseImages {
    width: 80%;
}

section {
    min-width: 971px;
}

#designTable {
    position: relative;
    right: 18px;
}

@media only screen and (max-device-width: 768px), screen and (max-width: 500px) {
    #mobile-prev, #mobile-next, #mobile-design-prev, #mobile-design-next, #mobileCategory, #mobileDescriptions, #mobileDesignDescriptions, #mobileiPhoneDesignFade, #mobileiPhoneFade {
        display: block;
    }

    #designDivRight {
        width: 100%;
        position: relative; 
        clear: both;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #customiseDivLeft {
        width: 100%;
        clear: both;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    #customiseDivRight {
        position: relative; 
        clear: both;
        top: 650px;
        width: 100%;
        float: none;
    }

    .div-content {
        padding-bottom: 4em;
        min-width: 100%;
        max-width: 100%;
    }
    
    section {
        min-width: initial;
    }

    #customiseList li {
        display: inline;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 30%;
    }

    #customiseList li p {
        width: 30%;
        margin: 0;
        padding: 0;
        display: inline-block;
    }

    #designDivLeft {
        top: 650px;
        clear: both;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #designDivRight {
        clear: both;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #customiseDivRight, #iPhoneOutline, #iPhoneInset, #iPhoneInsetFade, #iPhoneCustomiseInset, #iPhoneCustomiseOutline, #iPhoneCustomiseInsetFade, #designTable {
        display: none;
    }

    #mobileiPhone {
        display: block;
        margin-bottom: 1em;
    }

    #mobileiPhoneDesign {
        display: block;
        margin-bottom: 1em;
    }

    .div-content {
        padding-bottom: 10em;
    }

    #customiseDivContent {
        padding-bottom: 0em;
    }

    #customiseImages, #designImages {
        width: 50%;
    }
}