/*
*
*
*   Main styles for the ablazesofwtare website
*
*
*/


@font-face {
    font-family: lato;
    src: url("../fonts/Lato-Light.ttf");
}


@font-face {
    font-family: lato;
    src: url("../fonts/Lato-Bold.ttf");
    font-weight: bold;
}

body {
    margin:0;
    padding:0;
}

* {
    font-family: lato;
    box-sizing: border-box;
    padding:0;
    margin:0;
    transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
}

p {
    line-height:1.6em;
}

.video-background {
    position:absolute;
    z-index: -1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-size:cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow:hidden;
}

.full-home-page {
    display:table;
}

.center-home-row{
    display: table-row;
    height:100vh;
    width:100%;
}

.center-home-content {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}


.center-home-content {
    letter-spacing:0.1em;
    font-size:1.8em;
}

.white-font {
    color:white;
}

h1.arrow { text-align: center; font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; padding-bottom: 30px; font-weight: bold; }

h2 {
    font-weight:bold;
    font-size:15px;
}

section { padding: 120px 0 120px 0;}

.center-text {
    text-align:center;
}

.bg-whitesmoke {
    //background:whitesmoke;
}

.btn {
    background: white;
    color:#ff7500;
    padding:10px 20px 10px 20px;
    border-color:#ff7500;
    -webkit-transition: all 0.1s;
}

.btn:hover {
    background:#ff7500;
    border-color:transparent;
    color:white;
}

.loading-btn {
    background: url('../images/loading.gif') center center !important;
    background-size: 30% !important;
    background-color:#ff7500 !important;
    background-repeat:no-repeat !important;
    -webkit-transition: 0s;
    transition: 0s;
}

.row {
    margin:0 !important;
}

/*******************************************************************************************************
                                                NAV BAR 
********************************************************************************************************/
.nav-fixed-top, .nav-fixed-bottom {
    width:100%;
    height:50px;
    z-index:1000;      
}

.nav-fixed-bottom {
    position: absolute;
    bottom:0;
    background:transparent;    
}

.nav-fixed-top {
    border-bottom:1px solid #ff7500;
    position:fixed;
    top:0;    
    background: white;    
}

.nav-fixed-top ul, .nav-fixed-bottom ul {
    list-style:none;
    text-align:center;
    max-width:960px;
    overflow:hidden;
    margin:0 auto;
}

.nav-left {
    display:inline-block;
    float:left;
}

.nav-right {
    display:inline-block;
    float:right;
}

.nav-fixed-top li, .nav-fixed-bottom li {
    line-height:50px;
    height:50px;
    display:inline-block;
    width:100px;
}

.nav-fixed-top a {
    color:#ff7500;
}

.nav-fixed-bottom a {
    color: white;
}

.nav-fixed-bottom a:hover {
    font-size:1.1em;
}

.nav-fixed a {
    text-decoration: none;
    display:block;
    transition: 0.3s all;
}

.nav-fixed a:hover, .nav-fixed a:active  {
    color: #444;
}

#nav-logo {
    width:90%;
}


/*******************************************************************************************************
                                          HERO UNITS
********************************************************************************************************/

.hero-unit {
    background: #F0F0F0;
}


.hero-unit h3 {
    text-align: center;
    line-height:1.5em;
}


.hero-unit p {
    text-align:center;
    font-size:1.4em;
}


/*******************************************************************************************************
                                                SERVICES
********************************************************************************************************/
#services {
}


.services img {
    width:45%;
    transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
    cursor:pointer;
    border-width:2px;
    border-style:solid;
    border-radius:50%;
}

.service-item {
    padding: 10px 30px 10px 30px;
}

#service-em-img {
    border-color: #23abe2;
}

#service-abz-img {
    border-color: #ff7500;
}

#service-pns-img {
    border-color: #0ba01c;
}

.service-em-hov {
    background:#23abe2;
}

.service-pns-hov {
    background:#0ba01c;
}

.service-abz-hov {
    background:#ff7500;
}

.service-img {
    position:relative;
    width:100%;
}

.services img:hover {
    border-radius:50%;
}


.service-img .service-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:table;
    background: white;
    opacity:0.3;
    transition: all 500ms; -webkit-transition: all 500ms ease;
    cursor:pointer;
}

.service-img:hover .service-overlay{
    display:table;
    vertical-align:middle;
    text-align:center;
}

.service-td {
    display:table-cell;
}

.module-item { margin-bottom: 80px; }

.service-overlay {
    position:absolute;
    background: white;
    opacity: 0.3;
}

/*******************************************************************************************************
                                        CUSTOM DEV
********************************************************************************************************/

#custom-dev {
    background:#444;
}

#custom-dev h1 {
    color:white;
}

.cust-solution-item {
    text-align: center;
    margin-bottom:50px;
}

.cust-solution-item div {
    width:140px;
    height:140px;
    background: white;
    border-radius:50%;
    padding:30px;    
    margin:0 auto;
}   

.cust-solution-item h4 {
    text-align:center;
    color:white;
    background-repeat: no-repeat;
    background-position: -9999px -9999px;
}

#cs-report-ih {
    background:url("../images/w_report.png");
}

#cs-manufacturing-ih {
    background:url("../images/w_manufacturing.png");
}

#cs-dispatch-ih {
    background:url("../images/w_dispatch.png");
}

#cs-health-ih {
    background:url("../images/w_health.png");
}

#cs-stocktake-ih {
    background:url("../images/w_stocktake.png");
}

#cs-creative-ih {
    background:url("../images/w_creative.png");
}

.cs-anchor div{
    width:100%;
    height:100%;
}

.cust-solution-item div:hover {
    background: #ff7500;
}


.cs-active {
    background:#ff7500 !important;
}


#cs-report div {
    background: url("../images/report.png") no-repeat center center;
    background-size:contain;
}

#cs-report div:hover, #cs-report-info{
    background:url("../images/w_report.png") no-repeat center center;
    background-size:contain;
}

#cs-manufacturing div {
    background:url("../images/manufacturing.png") no-repeat center center;
    background-size:contain;
}

#cs-manufacturing div:hover, #cs-manufacturing-info {
    background:url("../images/w_manufacturing.png") no-repeat center center;
    background-size:contain;
}

#cs-dispatch div {
    background:url("../images/dispatch.png") no-repeat center center;
    background-size:contain;
}

#cs-dispatch div:hover, #cs-dispatch-info {
    background:url("../images/w_dispatch.png") no-repeat center center;
    background-size:contain;
}

#cs-health div {
    background:url("../images/health.png") no-repeat center center;
    background-size:contain;
}

#cs-health div:hover, #cs-health-info {
    background:url("../images/w_health.png") no-repeat center center;
    background-size:contain;
}


#cs-creative div{
    background:url("../images/creative.png") no-repeat center center;
    background-size:contain;
}

#cs-creative div:hover, #cs-creative-info {
    background:url("../images/w_creative.png") no-repeat center center;
    background-size:contain;
}

#cs-stocktake div {
    background:url("../images/stocktake.png") no-repeat center center;
    background-size:contain;
}

#cs-stocktake div:hover, #cs-stocktake-info {
    background:url("../images/w_stocktake.png") no-repeat center center;
    background-size:contain;
}


/*********************** Custom solution information (when an icon is clicked) ************************/

.cs-view-all-btn {
    border-radius:50%;
    width:60px;
    height:60px;
    display:inline-block;
}

.cs-view-all-btn img{
    width:85%;
}

.cust-solution-info {
    padding:40px;
    margin:-50px 0 0 0;
    text-align:center;
    color:white;
}

.cust-solution-info p {
    font-size: 1.2em;
    line-height: 1.8em;
}

.cs-info {
    margin-top:-80px;
}


.cust-solution-info ul {
    text-align:left;
    margin:0 auto;
    display:inline-block;
}


/*******************************************************************************************************
                                          CASE STUDIES
********************************************************************************************************/

.case-logo {
    margin:20px auto;
}

.case-main-img {
    margin:15px auto;
    width:100%;
}

.case-study-item img {
    width:75%;
}

#prem-modal {
    border: 1px solid #ec1c24;
}

.case-study-modal {
    display:none;
    width:50%;
    background: white;
    padding:20px;
    text-align:center;
    overflow: scroll;
}

.case-study-modal .case-quote {
    font-style:italic;
    text-align:center;
}

.case-study-modal .case-main-text {
    text-align:justify;
}



/*******************************************************************************************************
                                                ABOUT US
********************************************************************************************************/
.about-us-section .row{
    padding: 40px 0 40px 0;
    border-bottom:1px solid #ff7500;
}

.about-us-section .no-border{
    border:none !important;
}

.about-us-section p {
    text-align:justify;
    line-height:1.9em;
    padding:5px 20px 5px 20px;
}

.about-us-section img {
    width: 20%;
    margin:0 auto;
}

.about-us-icon {
    border:1px solid #444;
    border-radius: 50%;
    width:12% !important;
}


/*******************************************************************************************************
                                                FOOTER
********************************************************************************************************/

.footer {
    border-top:1px solid #ff7500;
    margin-top:50px;
}

.footer .container {
    margin-top:80px;
}

.footer .fa-phone {
    color:#ff7500;
    padding:10px;
    font-size:1.2em;
}


.enquiry-status {
    width:100%;
    background:#0ba01c;
    text-align: center;
    color:white;
}

.enquiry-status p {
    padding:10px;
    margin:0;
}

.enquiry-status:hover {
    cursor:pointer;
}


#footer-social {
    text-align:right;
}

#footer-toe {
    height:50px;
    background: #ff7500;
    display:inline-block;
    width:100%;
    margin-top:40px;
    text-align:center;
}

#footer-toe img{
    height:30px;
    width:30px;
    display:inline-block;
    margin:10px;
}

#footer-toe img:hover {
    height:40px; 
    width:40px;
    cursor:pointer;
}

#footer-toe a {
    text-decoration:none;
}

#footer-social h2 {
    text-align:right;
}

#footer-social img {
    width:15%;
    padding:10px;
}

#footer-enquiry {
    text-align:center;
}

#footer-enquiry input, #footer-enquiry textarea {
    border-radius:0;
    border:1px solid #ff7500;
    width: 70%;
    padding: 10px;
    margin:5px;
}

#footer-enquiry input[type="submit"] {
    width:20%; 
    margin:0 auto;
    background: white;
    color:#ff7500;
    padding:10px;
    margin-bottom:20px;
    display:block;
    border:1px solid #ff7500;
}

#footer-enquiry input:focus, #footer-enquiry textarea:focus {
    outline:none;
}

#footer-enquiry input[type="submit"]:hover {
    background: #ff7500;
    color:white;
}

#footer-news {
    text-align:center;
}

#footer-news p {
    width:80%;
    margin:0 auto;
}

#footer-news img {
    width:50%;
}


/*******************************************************************************************************
                                                MEDIA QUERIES
********************************************************************************************************/


@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ 
    .case-study-modal {
        width:90%;
        max-height:500px;
    }
}
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    .case-study-modal {
        width:90%;
        max-height:900px;
    }
        
    .case-study-item img {
        width:40%;
    }
    
    .case-study-item img :hover {
        width:50%;
    }
    
    .service-img img {
        width:25%;
    }
        
}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    .case-study-modal {
        width:90%;
        max-height:500px;
    }
    

}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
    .case-study-modal {
        width:50%;
        max-height:700px;
    }
    
    .case-study-item img {
        width:50%;
    }
    
    .case-study-item img:hover {
        width:60%;
    }    
    
    .service-img img {
        width:35%;
    }    
}
@media (min-width:1281px) { /* hi-res laptops and desktops */ }