/*--------------------------------------------------------------
Date modified: 20.6.2014.
Description: Services pages css.
Author: Mićko.
--------------------------------------------------------------*/



/*------------------------------------------------------------*/
/*---------------------- SERVICES PAGES ----------------------*/
/*------------------------------------------------------------*/

.services {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

#mobileBody { background-image: url("../../images/background/exe4u_mobile.jpg"); }
#webBody { background-image: url("../../images/background/exe4u_web.jpg"); }
#internetBody { background-image: url("../../images/background/exe4u_internetmarketing.jpg"); }
#desktopBody { background-image: url("../../images/background/exe4u_desktop.jpg"); }
#solutionsBody { background-image: url("../../images/background/exe4u_solutions.jpg"); }
#enterpriseBody { background-image: url("../../images/background/exe4u_enterprise.jpg"); }
#projectsBody { background-image: url("../../images/background/exe4u_projects.jpg"); }
#marketingBody { background-image: url("../../images/background/exe4u_marketing.jpg"); }
#educationBody { background-image: url("../../images/background/exe4u_education.jpg"); }
#aboutBody { background-image: url("../../images/background/exe4u_about.jpg"); }

.returnButton {
    z-index: 30;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    margin: 5px;
    cursor: pointer;
}

.returnButton img {
    width: 100%;
    height: 100%;
}

.servicesHeading {
    z-index: 20;
    position: absolute;
    font-size: 3.5em;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 100;
    /*text-shadow: 0px 0px 20px #000;*/
}

.column {
    float: left;
    height: 100%;
    width: 33%;
    outline: 1px solid transparent;
    outline-offset: -1px;
    
    -webkit-transition: outline 2.5s;
       -moz-transition: outline 2.5s;
	-ms-transition: outline 2.5s;
	 -o-transition: outline 2.5s;
	    transition: outline 2.5s;
}

.columnOne {
    /*background-color: rgba(0, 0, 0, 0.3);*/
    background-color: rgba(0, 0, 0, 0.4);
}

.columnTwo {
    width: 34%;
    /*background-color: rgba(0, 0, 0, 0.45);*/
    background-color: rgba(0, 0, 0, 0.55);
}

.columnThree {
    /*background-color: rgba(0, 0, 0, 0.6);*/
    background-color: rgba(0, 0, 0, 0.7);
}

.columnImage {
    position: relative;
    float: left;
    width: 100%;
    height: 50%;
}

.columnImage i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 16em;
}

.columnImageHolder {
    width: 100%;
    height: 100%;
    opacity: 0;
    
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	 -o-transition: opacity 0.5s;
	    transition: opacity 0.5s;
}

.columnImage img {
    background-image: url("assets/images/background/exe4u_projects.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
    outline: 1px solid;
    background-position-x: center;
    height: 60%;
    width: 90%;
    position: absolute;
    bottom: 0;
    margin: 8% auto;
    left: 0;
    right: 0;
}

.servicesMid {
    font-size: 4em !important;
}

#servicesWin {
    top: -10%;
    font-size: 4.5em !important;
}

#servicesSocialIcon {
    font-size: 1em !important;
}

#servicesSocialIcons {
    width: 30%;
    width: 22vmin;
    height: 44%;
    height: 22vmin;
    margin: 0 auto;
}

#servicesSocialIcons i {
    position: static;
    float: left;
    width: 50%;
    height: 50%;
    font-size: 6em !important;
    font-size: 12vmin !important;
}

.columnHeading {
    color: #fff;
    text-align: center;
    margin: 0 0 4% 0;
    font-size: 2.3em;
}

.columnSubHeading {
    height: 1.5em;
    margin: 0 8% 5% 8%;
    font-size: 1.7em;
    text-align: center;
    line-height: 1.1em;
}

.columnText {
    float: left;
    width: 100%;
    height: 50%;
}

.columnText p {
    width: 84%;
    margin: 0 6%;
    font-size: 1.5em;
    /*text-shadow: 0px 0px 10px #000;*/
    text-align: justify;
    line-height: 1.2em;
}

.columnSpan {
    cursor: pointer;
}

.columnSpan:hover {
    color: #ccc;
}


/*------------------------------------------------------------*/
/*----------------------- RESPONSIVNES -----------------------*/
/*------------------------------------------------------------*/

@media all and (max-device-width: 1023px) and (orientation: landscape),
    (max-width: 1023px) and (orientation: landscape),
    (orientation: portrait) {
		
    #mobileBody { background-position: center right; }
    
    .services {
	overflow-y: scroll;
    }
		      
    .returnButton {
        top: 5px;
        right: 5px;
        width: 35px;
        height: 35px;
        margin: 8px;
    }
    
    .column {
        width: 100%;
    }
    
    .columnImage i {
	font-size: 40vmin;
    }
    
    #servicesSocialIcons i {
        font-size: 5em !important;
	font-size: 11vmin !important;
    }
    
    .columnHeading {
	font-size: 2.4em;
	margin-bottom: 2%;
    }
    
    .columnSubHeading {
	font-size: 2.1em;
	margin-bottom: 5%;
    }
    
    .columnText p {
        width: 90%;
        margin: 0 5%;
        font-size: 1.8em;
    }
}