/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13.2.2018, 19:46:03
    Author     : vipIT
*/

@import url('https://fonts.googleapis.com/css?family=Spectral+SC');

body, html {
    width: 100%;
    height:100%;
    display: table;
    font-family: 'Spectral SC', serif;
    //background-image: radial-gradient(circle farthest-side at center bottom, crimson, #003087 130%);


}
div {
    box-sizing: border-box;
    display: block;
}
.above-fold {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 93px;
    width: 245px;
}

.hero-section {	
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    z-index: -1;
}
.hero-section img {
    position: absolute;
    opacity: 0.45;
    margin: auto;
    width: 150%;
    top: -25%; 
    right: -25%; 
    bottom: -25%; 
    left: -25%;
}

.main {
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    position: relative;
    height:100vh;
}

.message {
    width: 100%;
    text-align: center;
    margin-top: -22px;
    color: #58585B;
    margin-bottom: 6px;
    display: block;
	font-size: 17px;
}

.contact {
    width: 100%;
    text-align: center;
    margin-top: 5px;
    color: #58585B;
    margin-bottom: 6px;
    display: block;
    float: left;
}

.logos {
    padding: 2px;
    border-top: 1px solid #58585B;
    border-bottom: 1px solid #58585B;
    display: block;
    width: 360px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}

.logos div {
    background-position: center center;
    background-size: contain;
    width: 40px;
    height: 44px;
    background-repeat: no-repeat;
    float: left;
}

#logo1 {
    background-image: url("/img/logos/html5.png");
}

#logo2 {
    background-image: url("/img/logos/css3.png");
}

#logo3 {
    background-image: url("/img/logos/js.png");
}

#logo4 {
    background-image: url("/img/logos/ajax.png");
}

#logo5 {
    background-image: url("/img/logos/jquery.png");
}

#logo6 {
    background-image: url("/img/logos/cordova.png");
}

#logo7 {
    background-image: url("/img/logos/php.png");
    width: 75px;
    height: 44px;
}

#logo8 {
    background-image: url("/img/logos/yii.png");
}

#logo1:hover {
    background-image: url("/img/logos/html5c.png");
}

#logo2:hover {
    background-image: url("/img/logos/css3c.png");
}

#logo3:hover {
    background-image: url("/img/logos/jsc.png");
}

#logo4:hover {
    background-image: url("/img/logos/ajaxc.png");
}

#logo5:hover {
    background-image: url("/img/logos/jqueryc.png");
}

#logo6:hover {
    background-image: url("/img/logos/cordovac.png");
}

#logo7:hover {
    background-image: url("/img/logos/phpc.png");
    width: 75px;
    height: 44px;
}

#logo8:hover {
    background-image: url("/img/logos/yiic.png");
}

a {
    color: #58585B;
}

a:hover {
    color: #007bff;
}

@media screen and (max-width: 480px){
	.above-fold {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		height: 185px;
		width: 205px;
	}	
	
	.main {
		vertical-align: middle;
		display: table-cell;
		width: 100%;
		position: relative;
		height:100vh;
	}	
	.logos {
		padding: 2px;
		border-top: 1px solid #58585B;
		border-bottom: 1px solid #58585B;
		display: block;
		width: 320px;
		height: 50px;
		margin-left: auto;
		margin-right: auto;
	}

	.logos div {
		background-position: center center;
		background-size: contain;
		width: 34px;
		height: 44px;
		background-repeat: no-repeat;
		float: left;
	}	
	.message {
		font-size: 15px;
	}	
}