body
{
	margin:0px;
}

#divLinks {
 position:relative;width:1260.845px;height:1600px;margin:auto;margin-top: 100px; 
}

.page {
  width:100%;height:100%;overflow:visible;
}

.top-main
{
	width:100%;
	height:65px;
	margin-top:68px;
}
.back {
    width: 100%;
    height: 100%;
    background-image: url('../intro.jpg');
    background-size: cover;

    position: fixed;
    white-space: nowrap;
    z-index:1;
}

.front
{
	width: 100%;
    height: 100%;
    margin: auto;
    background-color:rgba(45, 45, 45, 0);
    background-size: cover;
     box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);
     overflow: auto;
     position: absolute;
    z-index:11;
    top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.h2line
{
  width:99%;
  float:left;
  text-align: center;
  height:auto;
}
.h2p{
color: white;
font-size: 22px;
padding-top: 10px;
top:700;
background: none;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
margin-left:36px;
left:20px;
width:98%;
/*  font-family: 'Harmattan', sans-serif;
   font-family: 'Mirza', cursive;  */
   font-family: 'Reem Kufi', sans-serif;
}




img 
{
	width:100%;
	height:100%;
	float:left;
}


p
{
  font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  
  text-align: center;
  z-index: 100;
  position: absolute;
  color:white;
    text-shadow: 0 0 3px #000000;
width: 100%;
background-color: rgba(45, 45, 45, 0.65);
top:186px;
padding-top: 10px;
padding-bottom: 5px;
}

/*    first Slide */

.maindiv1
{
	width:1259px;
	height:1600px;
}



/* Second Slide*/





.mainv42

{
width:1257px;
height:419px;
}


.div2-big1
{
	width:422px;
	height:255px;
	margin-left: 148px;
	float:left;
	 z-index:100;
    position: relative;
           transition: all 200ms ease-out;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

/*	background-color: black;*/
}



.div2-big
{
	width:422px;
	height:255px;
	margin-left: 420px;
	float:left;
	 z-index:100;
    position: relative;
           transition: all 200ms ease-out;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

/*	background-color: black;*/
}

.pstyle
{
 font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
     text-align: left;
  color:#f1f1f1;

  font-size: 12px;
    text-shadow: 0 0 3px #000000;
    background-color: inherit;
    top:250;
}
.div2-vert > p

{
top:207px;

}
.div2-vert1 > p

{
top:207px;

}
.div2-vert
{
	width: 208px;
	height:276px;
	float:left;
	margin-left:94px;
	 z-index:100;
    position: relative;
           transition: all 200ms ease-out;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	/*background-color: black;*/
}
.div2-vert1
{
	width: 208px;
	height:276px;
	float:left;
	margin-left:397px;	
	 z-index:100;
    position: relative;
           transition: all 200ms ease-out;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	/*background-color:black;*/
}


.div2-vert1:hover
  {
  box-shadow: 	0 0 6px rgba(35, 173, 278, 1);
  }

  .div2-vert:hover
  {
  box-shadow: 	0 0 6px rgba(35, 173, 278, 1);
  }


.div2-big:hover
  {
  box-shadow: 	0 0 6px rgba(35, 173, 278, 1);
  }


.div2-big1:hover
  {
  box-shadow: 	0 0 6px rgba(35, 173, 278, 1);
  }





            @media only screen and (max-device-width: 480px) {

                  .maindiv1
{
  width:100%;
  zoom:1.5;
  margin-top:9em;
  height:1600px;
}

#divLinks {
 position:relative;width:100%;height:1600px;margin:auto;margin-top: 100px; 
}


                    .mainv42
                    {
                    width:678px;
                    height:419px;
                    }


                    .div2-big1
                    {
                      width:422px;
                      height:255px;
                      margin-left: 108px;
                      float:left;
                       z-index:100;
                       margin-bottom:136px;
                        position: relative;
                               transition: all 200ms ease-out;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

                    /*  background-color: black;*/
                    }



                    .div2-big
                    {
                      width:422px;
                      height:255px;
                      margin-left: 104px;
                      float:left;
                       z-index:100;
                        position: relative;
                               transition: all 200ms ease-out;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

                    /*  background-color: black;*/
                    }

                    .pstyle
                    {
                     font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
                         text-align: left;
                      color:#f1f1f1;

                      font-size: 12px;
                        text-shadow: 0 0 3px #000000;
                        background-color: inherit;
                        top:250;
                    }
                    .div2-vert > p

                    {
                    top:207px;

                    }
                    .div2-vert1 > p

                    {
                    top:207px;

                    }
                    .div2-vert
                    {
                      width: 208px;
                      height:276px;
                      float:left;
                      top:12em;
                      margin-left:5em;
                      margin-bottom: 2em;
                       z-index:100;
                        position: relative;
                               transition: all 200ms ease-out;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                      
                      /*background-color: black;*/
                    }
                    .div2-vert1
                    {
                      width: 208px;
                      height:276px;
                      float:left;
                      //margin-left:397px;  
                       z-index:100;
                       top: -5em;
                       margin-top: 17em;
                       margin-left: 5em;
                        position: relative;
                               transition: all 200ms ease-out;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                      /*background-color:black;*/
                    }

                    .h2line
                    {
                      width:92%;
                      top:5em;
                      float:left;
                      text-align: center;
                      height:auto;
                    }
                    .h2p{
                    color: white;
                    font-size: 22px;
                    padding-top: 10px;
                    top:50em;
                    background: none;
                    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
                    margin-left:36px;
                    left:20px;
                    width:82%;
                    /*  font-family: 'Harmattan', sans-serif;
                       font-family: 'Mirza', cursive;  */
                       font-family: 'Reem Kufi', sans-serif;
                    }



.div2-vert > p

{
top:13em;

}
.div2-vert1 > p

{
top:12.9em;

}

            }