@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;
}


.rowContainer {
    margin:20px;
    display:inline-block;
    width:70%;
    text-align:right;
}

.rowContainer h3 {
    font-size:38px;
    margin-top:40px;
    border-bottom:1px solid #f2f2f1;
    font-weight:700;
    transition:all 200ms;
}

.rowContainer h3:hover {
    color:#ff6a00
}

.rowContainer p {
    font-size:25px;
}

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

    #nav {
	    font-size:14px;
        clear:right;
    }

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

    #content2 {
        width: 320px;
    }

    #content2>p{
        font-size:12px;
        width:200px;
    }

    .rowContainer h3 {
        font-size:20px;
        margin-top:15px;
    }

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

    #nav {
	    font-size:14px;
        clear:none;
    }

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

    #content2 {
        width: 480px;
    }

    #content2>p{
        font-size:12px;
        width:280px;
    }

    .rowContainer h3 {
        font-size:22px;
        margin-top:20px;
    }

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

    #nav {
	    font-size:16px;
        clear:none;
    }

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

    #content2 {
        width: 640px;
    }

    #content2>p{
        font-size:13px;
        width:350px;
    }
    
    .rowContainer h3 {
        font-size:25px;
        margin-top:20px;
    }

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

    #nav {
	    font-size:16px;
        clear:none;
    }

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

    #content2 {
        width: 960px;
    }

    #content2>p{
        font-size:14px;
        width:500px;
    }
    
    .rowContainer h3 {
        font-size:30px;
        margin-top:25px;
    }

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

    #nav {
	    font-size:18px;
        clear:none;
    }

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

    #content2 {
        width: 1024px;
    }

    #content2>p{
        font-size:16px;
        width:600px;
    }
    
    .rowContainer h3 {
        font-size:30px;
        margin-top:25px;
    }

    .rowContainer p {
        font-size: 20px;
    }
}
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */
    #logo {
        height:200px;
    }

    #nav {
	    font-size:24px;
        clear:none;
    }

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

    #content2 {
        width: 1280px;
    }

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

    .square {
        height:250px;
    }
    
    .rowContainer h3 {
        font-size:38px;
        margin-top:40px;
    }

    .rowContainer p {
        font-size: 25px;
    }
}