/* EDUCATION V1 */

/*---------------------- MAIN PANEL -----------------*/
.SEducation_Main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 1500px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*---------------------- MAIN PANEL -----------------*/


/*---------------------- MAIN PANEL -----------------*/
.SEducation_Items_Main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    direction: rtl;
    text-align: center;
    vertical-align: top;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.SEducation_Item_Main {
    position: relative;
    display: inline-block;
    width: 25.0%;
    height: auto;
    padding: 10px;
    vertical-align: top;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.SEducation_Item {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: rgba(240,240,240,0.7);
    border: solid 1px rgba(0,165,155,0.2);
    border-radius: 5px;
    cursor: pointer;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 0.2s cubic-bezier(0.300, 0.500, 0.400, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.300, 0.500, 0.400, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.300, 0.500, 0.400, 1.000);
    -webkit-transition: all 0.2s cubic-bezier(0.300, 0.500, 0.400, 1.000);
    transition: all 0.2s cubic-bezier(0.300, 0.500, 0.400, 1.000);
}
.SEducation_Item:hover {
    background-color: rgba(240,240,240,1.0);
    border: solid 1px rgba(0,165,155,0.5);
}
.SEducation_Pic
{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
}
.SEducation_Pic_Main
{
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
    z-index: 1;
}
.SEducation_Pic_File
{
    position: absolute;
    width: auto;
    height: auto;
    max-height: 100%;
    left: 50%;
    top: 50%;
    z-index: 2;

    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -moz-transform: translateX(-50%) translateY(-50%) scale(1.1,1.1);
    -ms-transform: translateX(-50%) translateY(-50%) scale(1.1,1.1);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.1,1.1);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.1,1.1);
    transform: translateX(-50%) translateY(-50%) scale(1.1,1.1);
    
    -moz-transition: all 4.0s cubic-bezier(0.300, 0.500, 0.400, 1.000);
	-ms-transition: all 4.0s cubic-bezier(0.300, 0.500, 0.400, 1.000);
	-o-transition: all 4.0s cubic-bezier(0.300, 0.500, 0.400, 1.000);
	-webkit-transition: all 4.0s cubic-bezier(0.300, 0.500, 0.400, 1.000);
	transition: all 4.0s cubic-bezier(0.300, 0.500, 0.400, 1.000);
}
.SEducation_Item:hover .SEducation_Pic_File {
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.0,1.0);
    -ms-transform: translateX(-50%) translateY(-50%) scale(1.0,1.0);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.0,1.0);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.0,1.0);
    transform: translateX(-50%) translateY(-50%) scale(1.0,1.0);
}
.SEducation_Pic_Frame
{
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    left: 7px;
    right: 7px;
    top: 7px;
    bottom: 7px;
    background-color: rgba(0,0,0,0.0);
    box-shadow: 0px 0px 0px 7px rgba(255,255,255,0.5);
    z-index: 3;
    -moz-transition: all 0.6s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	-ms-transition: all 0.6s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	-o-transition: all 0.6s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	-webkit-transition: all 0.6s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	transition: all 0.6s cubic-bezier(0.000, 0.580, 0.320, 0.995);
}
.SEducation_Item:hover .SEducation_Pic_Frame {
    background-color: rgba(0,0,0,0.1);
}
.SEducation_Title {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 5px 5px 5px;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    direction: rtl;
    color: #000000;
    clear: both;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.SEducation_Desc {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px;
    font-weight: normal;
    font-size: 0.9em;
    text-align: center;
    direction: rtl;
    color: #000000;
    clear: both;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
}
.SEducation_Title_Sep
{
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    max-width: 80px;
    margin-top: 3px;
    margin-bottom: 20px;
    background-color: #00AABC;
    clear: both;
}
.SEducation_Infos_Main
{
    position: relative;
    width: 100%;
    height: auto;
}
.SEducation_Info
{
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px;
    text-align: right;
    direction: rtl;
    clear: both;
    -moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.SEducation_Info_Icon {
    display: inline-block;
    width: auto;
    height: auto;
    padding-left: 7px;
    vertical-align: middle;
    font-family: 'AtrinWebSign1';
    font-size: 1.6em;
    text-align: right;
    color: rgba(0,165,155,1.0);
}
.SEducation_Info_Text {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 0.9em;
    font-weight: normal;
    text-align: right;
    color: #555555;
    direction: rtl;
}
.SEducation_MoreKey_Main {
    position: relative;
    display: block;
    width: 100%;
    height: 25px;
    margin-top: 10px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.SEducation_MoreKey_Panel {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    overflow: hidden;
}
.SEducation_MoreKey
{
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 22px;
    background-color: #00AABC;
    font-weight: 500;
    font-size: 0.9em;
    text-align: center;
    color: #FFFFFF;
    direction: rtl;
    -moz-transition: all 0.3s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	-ms-transition: all 0.3s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	-o-transition: all 0.3s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	-webkit-transition: all 0.3s cubic-bezier(0.000, 0.580, 0.320, 0.995);
	transition: all 0.3s cubic-bezier(0.000, 0.580, 0.320, 0.995);
}
.SEducation_Item:hover .SEducation_MoreKey {
    top: 0px;
}
.SEducation_Finish
{
    width: 100%;
    clear: both;
}
.SEducation_Key
{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
/*------------------------ EDUCATION -------------*/





@media screen and (min-width:0px) and (max-width:1000px)
{
    .SEducation_Title
    {
        font-size: 1.1em;
    }
}

@media screen and (min-width:0px) and (max-width:800px)
{
    .SEducation_Item_Main {
        width: 33.333%;
    }
    .SEducation_Title
    {
        font-size: 1.0em;
    }
}

@media screen and (min-width:0px) and (max-width:600px)
{
    .SEducation_Item_Main {
        width: 50.0%;
    }
    .SEducation_Title
    {
        margin-top: 10px;
    }
    .SEducation_MoreKey
    {
        top: 0px;
    }
}

@media screen and (min-width:0px) and (max-width:500px)
{
    
}

@media screen and (min-width:0px) and (max-width:400px)
{
    .SEducation_Item_Main {
        width: 100.0%;
        clear: both;
    }
}