/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
   box-shadow: 5px 5px 10px;
/*   border:1px solid grey;*/
}

img:hover{
/*   border:1px solid black;*/
}

body {
   background-color: white;
   color: black;
   font-family: 'Montserrat', sans-serif;
   margin: auto;
   width:100vw;
}

.main{
   width:100vw;
   display:grid;
   grid-template-columns: 4fr 3fr;
   background-color:white;
}

.imagebox{
/*   width:60vw;*/
   display:grid;
   grid-template-columns:1fr 1fr 1fr;
   padding:50px 100px;
/*   background-color:grey;*/
   grid-gap:0px;
   margin-top:10px;
}

.image{
   position:relative;
   width: 85%;
   margin:auto;
}

.highlight{
   position:absolute;
   width:100%;
   background-color:rgba(0,0,0,0.5);
   opacity:50%;
}

.highlight:hover{
   cursor:pointer;
}

.bold{
   font-weight:bold;
}

/**/
.admissions1{
   top:50%;
   height:43%;
}

.admissions2{
   top:7%;
   height:17%;
}

.admissions{
   background-color:rgb(225,0,0);
}

.p1{
   color:rgb(225,0,0);
}


.market1{
   top:29%;
   height:70%;
}

.market2{
   top:7%;
   height:52%;
}

.market{
   background-color:rgb(200,150,200);
}

.p2{
   color:rgb(200,150,200);
}

.hiring{
   top:7%;
   height:25%;
   background-color:rgb(0,0,225);
}

.p3{
   color:rgb(0,0,225);
}

.neutrality1{
   top:35%;
   height:25%;
}

.neutrality2{
   top:7%;
   height:12%;
}

.neutrality{
   background-color:rgb(0,100,225);
}

.p4{
   color:rgb(0,100,225);
}

.learning{
   top:23%;
   height:23%;
   background-color:rgb(0,200,225);
}

.p5{
   color:rgb(0,200,225);
}

.equality1{
   top:50%;
   height:40%;
}

.equality2{
   top:7%;
   height:9%;
}

.equality{
   background-color:rgb(100,200,100);
}

.p6{
   color:rgb(100,200,100);
}

.responsibility{
   top:20%;
   height:67%;
   background-color:rgb(200,100,0);
}

.p7{
   color:rgb(200,100,0)
}

.foreign{
   top:7%;
   height:83%;
   background-color:rgb(200,150,50);
}

.p8{
   color:rgb(200,150,50);
}

.exceptions{
   top:7%;
   height:28%;
   background-color:rgb(100,50,0);
}

.p9{
   color:rgb(100,50,0);
}

.enforcements{
   top:40%;
   height:55%;
   background-color:rgb(100,100,100);
}

.p10{
   color:rgb(100,100,100);
}


.textbox p:hover{
   cursor:pointer;
}

.textbox{
   text-align:right;
   margin-right:3vw;
   font-size:2em;
   padding-right:40px;
   padding-top:50px;
   margin-bottom:50px;
}

h1{
/*   margin-left: 20px;*/
   margin-top:5vh;
line-height:20px;
   text-align:center;
   font-size:3.5em;
   margin-bottom:50px;
}

.header{
   position:absolute;
   top:35vh;
   width:100%;
   padding:50px;
   background-color:rgba(255,255,255,0.9);
   display:none;
   margin:auto;
}

.header p{
   text-align:center;
}

/*.page{
   *ckground-image:url("img/pages.jpg");
   height:100vh;
   width:100vw;
   position:fixed;
   top:0px;
   z-index:-10;
   }*/

.page{
   background: #000000;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 69%, rgba(0, 0, 0, 0.46) 100%);
   width:100vw;
   height:100vh;
/*   border:5px solid green;*/
   z-index:-5;
/*   position:absolute;*/

}

.pages{
   position:fixed;
   z-index:-10;
}

.topspace{
   height:100vh;
}


.top{
   padding:5px 200px;
   padding-top: 50px;
   text-align:left;
   background-color:white;
   margin:0px;

/*   margin-right:20vw;*/
}

.space{
   margin-bottom:20px;
}

.modalback{
   position:absolute;
   top:0px;
   left:0px;
   width:100vw;
   height:100vh;
   background-color:rgba(0,0,0,0.8);
   display:none;
   overflow:auto;
}

.modal{
   width:80%;
   min-height:100vh;
   margin:auto;
   font-size:2em;
   background-color:#fffffa;
   text-align:center;
   padding:10px 100px;
   position:relative;
/*   overflow:auto;*/
}

.modal p{
   font-size:0.5em;
   text-align:left;
}

.close{
   position:absolute;
   top:0px;
   right:0px;
   margin-right:20px;
   font-weight:bold;
}

.close:hover{
   cursor:pointer;
}

.pagebox{
   width:30%;
   margin:auto;
   margin-bottom:50px;
}

.twopage{
   width:60%;
   margin:auto;
   display:grid;
   grid-template-columns: 1fr 1fr;
   grid-gap:5px;
   margin-bottom:50px;
}

.footer {
/*   max-width: 640px;*/
   margin: auto;
   text-align: center;
   font-size: 0.75em;
   line-height: 1.5em;
   background-color:grey;
   color:white;
   width:100%;
   position:absolute;
   padding:20px;
/*   bottom:0px;*/
}

.footer img {
   width: 200px;
   margin:auto;
   box-shadow:0px 0px;
}

/*media query for responsive design */

@media only screen and (max-width: 640px) {
   .imagebox{
      grid-template-columns: 1fr;
   }

   .main{
      grid-template-columns:1fr;
   }

   .textbox{
      display:none;
   }

   .modal{
      padding:5px 10px;
      width:100%;
   }

   .pagebox{
      margin-bottom:50px;
   }

   h1{
      margin-left:0px;
   }

   .header{
      top:3vh;
      margin:auto;
      padding:0px;
   }

   h1{
      line-height:50px;
      font-size:1.75em;
      margin-bottom:5px;
   }

   .page{
      opacity:0%;
      height:40vh;
   }

   .top{
      padding:20px 50px
   }

   .imagebox{
      grid-gap:20px;
   }

   .pagebox,.twopage{
      width:95%;
   }
}