@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);

/*----------------------
    header elements
 ---------------------*/

#header {
    width:100%;
    height:400px;
    overflow:hidden;
    background: url(../images/BackGround.png) no-repeat center center;
    text-align:center;
}

#nav{
	list-style-type:none;
	position:relative;
    margin:0 auto;
	margin-top:10px;
	font-size:24px;
    text-align:center;
}

#nav li{
    margin-left:20px;
    margin-right:20px;
	display: inline-block;
    transition:all 200ms;
}

#nav li a{
	color: white;
    font-family:Alef hebrew;
	text-decoration: none;
	font-weight:200;
    padding-left:4px;
    padding-right:4px;
    border:2px solid white;
    border-radius:5px;
    text-shadow: 1px 1px 1px #484848;
    transition:all 200ms;
}

#logo {
    margin-top:10px;
    height:327px;
    max-width:100%;
    max-height:100%;
}

/*----------------------
      square line 
 ---------------------*/

#content {
    width: 1280px;
    margin: 0 auto;
    overflow:hidden;
}

#squareLine {
    width:100%;
    text-align:center;
    margin-top:40px;
}

.square{
    width: 30%;
    height: 250px;
    margin-left: 10px;
    margin-right: 10px;
    display:inline-block;
    overflow: hidden;
    box-shadow: 0px 8px 20px -8px #bbbbbb;
    border-radius:10px;
    position: relative;
    text-align: center;
}

.square>img{
    max-width:100%;
}

.mask {
    width: 100%;
    height: 100%;
    border-radius:10px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color:#484848;
    opacity:0;
    transition:all 400ms;
}

.square:hover .mask {
    opacity:0.8;
}

.readMore {
    width: 100%;
    height: 100%;
    border-radius:10px;
    position: absolute;
    overflow: hidden;
    top: -10px;
    left: 0;
    background:url(../images/KraOd.png) no-repeat center center;
    opacity:0;
    transition:all 500ms;
}

.square:hover .readMore {
    opacity:1;
    top:0;
    transition-delay:200ms;
}

/*----------------------
    description line
 ---------------------*/

#descriptionLine {
    width:100%;
    text-align:center;
    margin-top:20px;
    margin-bottom:40px;
}

.description {
    width:30%;
    margin-left: 10px;
    margin-right: 10px;
    display:inline-block;
    position: relative;
    text-align: center;
}

.description h1{
    color: #f26722;
    font-family:Alef hebrew;
	font-weight:400;
	font-size:32px;
    margin-top:-20px;
}

.description p{
    color: #f26722;
    width:250px;
    line-height:80%;
    margin:auto;
    font-family:Alef hebrew;
	font-weight:400;
	font-size:20px;
    margin-top:-5px;
}

/*----------------------
        content
 ---------------------*/

#content2 {
    width:100%;
    background-color:white;
    text-align:center;
    border-top:solid 5px #f2f2f1;
}

#content2>p{
    font-family:Alef Hebrew;
    font-size:22px;
    color:#484848;
    font-weight:400;
    width:950px;
    display:inline-block;
    margin-bottom:10px;
    text-shadow: 2px 2px 0px #f0f0f0;
}

.twoSided {
    width:100%;
}

.twoSided .right {
    float:right;
    width:50%;
    background-color:#f2f2f1;
    text-align:left;
    display:inline-block;
    height:300px;
    line-height:300px;
}

.twoSided .right p {
    max-width:40%;
    margin-left:20px;
    font-family:Alef Hebrew;
    font-size:50px;
    color:#484848;
    font-weight:400;
    display:inline-block;
    text-shadow: 1px 1px 0px #f0f0f0;
    vertical-align:middle;
    line-height:40px;
    transition:all 600ms;
}

.twoSided .right p:hover{
    margin-left:30px;
}

.twoSided .left {
    float:left;
    width:50%;
    text-align:right;
    display:inline-block;
    height:300px;
    line-height:300px;
}

.twoSided .left p {
    display:inline-block;
    max-width:70%;
    margin:20px;
    font-size:22px;
    vertical-align:middle;
    line-height:25px;
}

@media (min-width:320px) {
     /* smartphones, iPhone, portrait 480x320 phones */ 
    #content {
        display:none;
        overflow:hidden;
    }

    .twoSided .right p {
        font-size:22px;
        line-height:18px;
    }

    .twoSided .left p {
        font-size:12px;
        line-height:14px;  
    }
}
@media (min-width:481px) {
     /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    #content {
        display:none;
    }

    .twoSided .right p {
        font-size:22px;
        line-height:18px;
    }

    .twoSided .left p {
        font-size:12px;
        line-height:14px;  
    }
}
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    #content {
        display:none;
    }

    .twoSided .right p {
        font-size:32px;
        line-height:26px;
    }

    .twoSided .left p {
        font-size:13px;
        line-height:15px;  
    }

}
@media (min-width:961px) {
     /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #content {
        display:block;
        width: 960px;
    }

    .square {
        height:200px;
    }

    .twoSided .right p {
        font-size:40px;
        line-height:32px;
    }

    .twoSided .left p {
        font-size:14px;
        line-height:17px;  
    }

}
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */
    #content {
        display:block;
        width: 960px;
    }

    .square {
        height:200px;
    }

    .twoSided .right p {
        font-size:40px;
        line-height:32px;
    }

    .twoSided .left p {
        font-size:16px;
        line-height:19px;  
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */

    #content {
        display:block;
        width: 1280px;
    }

    .square {
        height:250px;
    }

    .twoSided .right p {
        font-size:40px;
        line-height:32px;
    }

    .twoSided .left p {
        font-size:22px;
        line-height:25px;  
    }
}