﻿.divprojmain
{
    width: 1200px;
    -moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.divprojcontent
{
    float: left;
    width: 245px;
    height: 235px;
    font-size: 18px;
    margin: 1px;
    margin-top: 30px;
    -moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.divprojimage
{
    width: 205px;
    height: 205px;
    -moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.divprojcontentkey
{
    background-image: url('../../ImagesFA/PanelProjKey.png');
    background-repeat: repeat-x;
    background-position: center bottom;
    width: 205px;
    height: 235px;
    cursor: pointer;
    -moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.divprojcontentkey:hover
{
    background-image: url('../../ImagesFA/PanelProjKeyO.png');
    background-repeat: repeat-x;
    background-position: center bottom;
    width: 205px;
    height: 235px;
    cursor: pointer;
}
.divcontentkeyalone
{
    background-image: url('../../ImagesFA/PanelProjKeyt.png');
    background-repeat: repeat;
    background-position: center top;
    cursor: pointer;
    -moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.divcontentkeyalone:hover
{
    background-image: url('../../ImagesFA/PanelProjKeytO.png');
    background-repeat: repeat;
    background-position: center top;
    cursor: pointer;
}

@media screen and (min-width:1400px) and (max-width:100000px)
{
    .divprojmain
    {
        width: 1220px;
    }
    .divprojcontent
    {
        width: 300px;
        height: 290px;
        font-size: 24px;
    }
    .divprojimage
    {
        width: 260px;
        height: 260px;
    }
    .divprojcontentkey
    {
        width: 260px;
        height: 290px;
    }
    .divprojcontentkey:hover
    {
        width: 260px;
        height: 290px;
    }
}
@media screen and (min-width:1160px) and (max-width:1400px)
{
    .divprojmain
    {
        width: 1000px;
    }
    .divprojcontent
    {
        width: 245px;
        height: 235px;
        font-size: 20px;
    }
    .divprojimage
    {
        width: 205px;
        height: 205px;
    }
    .divprojcontentkey
    {
        width: 205px;
        height: 235px;
    }
    .divprojcontentkey:hover
    {
        width: 205px;
        height: 235px;
    }
}
@media screen and (min-width:910px) and (max-width:1160px)
{
    .divprojmain
    {
        width: 750px;
    }
    .divprojcontent
    {
        font-size: 18px;
    }
}
@media screen and (min-width:0px) and (max-width:910px)
{
    .divprojmain
    {
        width: 500px;
    }
}