html { font-size: 100%; padding: 0; margin: 0 auto 0 auto; width: 100%; height: 100%; font-family: 'Open Sans Hebrew', sans-serif;}

body {
    width:100%;
    height: 100%;
    margin: 0 auto;
}

h2 {
    color: white;
    text-shadow: 1px 1px 2px #666;
    font-weight: 200;
    font-style: italic;
    font-size: 40px;
}
        
section {
    position: relative;
    float: left;
    width: 50%;
    height: 50%;
}

.layer {
    width: 100%;
    height: 100%;
    float: left;
}
.layer.BGLayer {z-index: 1}
.layer.IMGLayer {z-index: 1000; position: absolute}
.layer.ICNLayer {z-index: 2000; position: absolute}

.clickBox {
    -moz-transition:all 0.6s ease;
	-webkit-transition:all 0.6s ease;
	-ms-transition:all 0.6s ease;
	-o-transition:all 0.6s ease;
	transition:all 0.6s ease;
}
.clickBox:hover {
    -moz-box-shadow: 1px 0 12px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 1px 0 12px rgba(0, 0, 0, 0.6);
	box-shadow: 1px 0 12px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.cntrItm {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /*-- safari --*/
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /*-- chrome --*/
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;

    display: -ms-flexbox;
    -ms-flex-pack: center; /*justify-content*/
    -ms-flex-align: center; /*align-items*/
}

.cntrImgBackground {
    background: url("../images/introLady.png")no-repeat center center fixed;
    background-size: contain;
    width: 100%;
    height: 100%;
}
    
.axis:hover .move-up {
    transform: translate(0,-15px);
    -webkit-transform: translate(0,-15px); /** Chrome & Safari **/
    -o-transform: translate(0,-15px); /** Opera **/
    -moz-transform: translate(0,-15px); /** Firefox **/
}

.main-icon {
	transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.7s ease-in-out; /** Firefox **/
    -o-transition: all 0.7s ease-in-out; /** Opera **/
	text-align: center;
    text-decoration: none;
}

.blueBG {background-color: #2187fe}
#UL > a {
    margin: 0 15% 15% 0;
    /*-- safari --*/
    display: -webkit-box;
    display: -webkit-flex;
}

.darkBlueBG {background-color: #fa8232}
#UR > a {
    margin: 0 0 15% 15%;
    /*-- safari --*/
    display: -webkit-box;
    display: -webkit-flex;
}

.orangeBG {background-color: #252c39}
#DL > a {
    margin: 15% 15% 0 0;
    /*-- safari --*/
    display: -webkit-box;
    display: -webkit-flex;
}

.darkOrangeBG {background-color: #f4511f}
#DR > a {
    margin: 15% 0 0 15%;
    /*-- safari --*/
    display: -webkit-box;
    display: -webkit-flex;
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
    h2 {font-size: 33px;}
    
    #UL > a {margin: 0 20% 20% 0}
    #UR > a {margin: 0 0 20% 20%}
    #DL > a {margin: 20% 20% 0 0}
    #DR > a {margin: 20% 0 0 20%}
}


@media only screen and (min-width: 481px) and (max-width: 767px){
    .cntrImgBackground {background-position: center;}

    h2 {font-size: 25px;}
    
    #UL > a {margin: 0 20% 20% 0}
    #UR > a {margin: 0 0 20% 20%}
    #DL > a {margin: 20% 20% 0 0}
    #DR > a {margin: 20% 0 0 20%}
}


@media only screen and (min-width: 0px) and (max-width: 480px){
    .cntrImgBackground {background-position: center;}

    h2 {
        font-weight: 300;
        font-size: 18px;
    }

    #UL > a {margin: 0 0 35% 0}
    #UR > a {margin: 0 0 35% 0}
    #DL > a {margin: 100% 0 0 0}
    #DR > a {margin: 100% 0 0 0}
}