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

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

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

#header {
    width:100%;
    height:250px;
    text-align:center;
    overflow:hidden;
}

#menuContainer {
    margin-top:10px;
    display:inline-block;
}

#logo {
    float:right;
    display:inline-block;
    height:200px;
    width:auto;
}

#nav{
    float:left;
    margin-top:100px;
	list-style-type:none;
    display:inline-block;
	font-size:24px;
    text-align:center;
}

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

#nav li:hover a{
    border:2px solid #00A9C7;
    border-radius:5px;
}

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

#content2 {
    width:1280px;
    margin:0 auto;
    background-color:white;
    text-align:center;
    border-top:solid 15px #f2f2f1;
    /*background:url(../images/background.png) center center fixed;*/
}

#content2>p{
    font-family:Alef Hebrew;
    font-size:22px;
    color:#484848;
    font-weight:400;
    width:700px;
    display:inline-block;
    border-top:1px solid #f2f2f1;
    border-bottom:1px solid #f2f2f1;
}

.square{
    height: 200px;
    display:inline-block;
    overflow: hidden;
    position: relative;
    text-align: center;
    border-radius:10px;
    margin:5px;
    box-shadow: 3px 2px 10px #e0e0e0;
    border: 1px solid #e0e0e0
}

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

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

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

@media (min-width:320px) {
     /* smartphones, iPhone, portrait 480x320 phones */ 
    #logo {
        height:80px;
    }

    #nav {
	    font-size:14px;
    }

    #nav li{
        margin-left:4px;
        margin-right:4px;
    }

    #content2 {
        width: 320px;
    }

    #content2>p{
        font-size:12px;
        width:200px;
    }
}
@media (min-width:481px) {
     /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    #logo {
        height:150px;
    }

    #nav {
	    font-size:14px;
    }

    #nav li{
        margin-left:10px;
        margin-right:10px;
    }

    #content2 {
        width: 480px;
    }

    #content2>p{
        font-size:12px;
        width:280px;
    }
}
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    #logo {
        height:150px;
    }

    #nav {
	    font-size:16px;
    }

    #nav li{
        margin-left:15px;
        margin-right:15px;
    }

    #content2 {
        width: 640px;
    }

    #content2>p{
        font-size:13px;
        width:350px;
    }

}
@media (min-width:961px) {
     /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #logo {
        height:180px;
    }

    #nav {
	    font-size:16px;
    }

    #nav li{
        margin-left:15px;
        margin-right:15px;
    }

    #content2 {
        width: 960px;
    }

    #content2>p{
        font-size:14px;
        width:500px;
    }

}
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */
    #logo {
        height:200px;
    }

    #nav {
	    font-size:18px;
    }

    #nav li{
        margin-left:20px;
        margin-right:20px;
    }

    #content2 {
        width: 1024px;
    }

    #content2>p{
        font-size:16px;
        width:600px;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */
    #logo {
        height:200px;
    }

    #nav {
	    font-size:24px;
    }

    #nav li{
        margin-left:20px;
        margin-right:20px;
    }

    #content2 {
        width: 1280px;
    }

    #content2>p{
        width:700px;
        font-size:22px;
    }

    .square {
        height:250px;
    }
}