/* For mobile: */

body {
    margin:0;
    padding:0;
    background-color: #FBFBFB;
 }

#scroll{
   position: relative; 
   width: 100%; 
   height: 437px;
   background: url("Frontpicture3.jpg");
   background-size: cover;
}

h2{
position: absolute; 
   top: -5px; 
   left: 5px; 
   width: 100%;
}

h2 span { 
   color: #E1E1E1; 
   font: 38px proxima_nova_scosfthin; 
   letter-spacing: 1px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 5px 5px 20px 5px; 
}

h3{
position: absolute; 
   top: 100px; 
   left: 5px; 
   width: 100%;
}

h3 span { 
   color: #E1E1E1; 
   font: 25px proxima_nova_ltthin; 
   letter-spacing: 1.5px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 60px 10px 60px; 
}

h4{
position: absolute; 
   top: 160px; 
   left: 5px; 
   width: 100%;
}

h4 span { 
   color: #E1E1E1; 
   font: 25px proxima_nova_ltthin; 
   letter-spacing: 1.5px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 25px 10px 25px; 
}

h5{
position: absolute; 
   top: 223px; 
   left: 5px; 
   width: 100%;
}

h5 span { 
   color: #E1E1E1; 
   font: 25px proxima_nova_ltthin; 
   letter-spacing: 1.5px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 23px 10px 23px; 
}

h6{
position: absolute; 
   top: 27px; 
   left: 16px; 
   width: 100%;
   color: #E1E1E1; 
   font: 13px proxima_nova_ltthin; 
   letter-spacing: 2px;  
   padding: 0;
}

p{margin-right:.5cm; 
   font: 18px proxima_nova_ltthin; 
   }

a{text-decoration: none}

#begin {position:relative;
   top:445px;
   left:5px;
}

.storypage {position:relative;
   top:10px;
   left:5px;
}

h1{font: 30px Proxima Nova; 
margin-left:-5px;
text-align: center;
}

h8{ margin-right:.5cm; 
   font: 24px Proxima Nova; 
   }

blockquote{font: 16px proxima_nova_ltthin;
}

a:link {
   padding:0;
   margin: 0;
   color: #5F5D5D;
}      /* unvisited link */

a:visited {
   padding:0;
   margin: 0;
   color: #5F5D5D;
}  /* visited link */

a:hover {
   padding:0;
   margin: 0;
   color: #B1AFAF;
}  /* mouse over link */

a:active {
   padding:0;
   margin: 0;
}  /* selected link */

.horizontaltable {
    width: 100%;
    height: 390px;
    margin:-30px 30px 50px 0px;
    overflow: scroll;
    white-space: nowrap;

-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-scroll-snap-destination: 50% 50%;
scroll-snap-destination: 50% 50%;
-webkit-scroll-snap-points-x: repeat(33%);
-ms-scroll-snap-points-y: snapInterval(0px, 310px); /* Old syntax */
scroll-snap-points-x: repeat(33%);
        }

table{ 
   width: 1000px;
   height:100%;
   margin: 0 0 0 10px;
  }

td{font: 30px proxima_nova_scosfthin;
    text-align:center; 
    padding: 20px 20px 0 0;
    valign: middle;
       }

tr{align:center;
}

#courses {
  position:relative;
  width:300px;
  height:300px;
  vertical-align: middle;
  text-align: center; 
  }

#courses a {
  color: #000000;
}

#businessethics {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("BusinessEthics.jpg");
  }
#valuetheory {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("ValueTheory.jpg");
  }
#ancientmedieval {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("Castle.jpg");
  }

#Nassau {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("Nassau.jpg");
    }
#SanFrancisco {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("SanFrancisco.jpg");
    }
#Lights {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("Lights.jpg");
    }
#NewportNews {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("NewportNews.jpg");
    }

#overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.2);
  opacity:0;
  display: table-cell;
  vertical-align: middle;
   }

#overlay:hover {
  opacity:1;
}

#overlay a{
position: absolute; 
   padding: 0px 0 20px 0; 
   width: 100%;
   color: #E1E1E1; 
   font: 35px proxima_nova_ltthin; 
   letter-spacing: 2px; 
   left: 0; 
   vertical-align: middle;
}

#overlay a:hover{
   color: B1AFAF;
}

h7{font: 16px proxima_nova_ltthin;
   float: right;
   margin-right: 10px;
}

/*----------------------------------------------------------------------*/

/* For desktop: */

@media only screen and (min-width: 751px) {
.content, *{ 
   }

body {
    margin:0;
    padding:0;
    background-color: #FBFBFB;
 }

#scroll{
   position: relative; 
   width: 100%; 
   height: 592px;
   background: url("Frontpicture.jpg");
   background-size: cover;
}

h1{font: 40px Proxima Nova; 
margin-left:.0cm;
text-align: center;
}

h2{
position: absolute; 
   top: 75px; 
   left: 20px; 
   width: 100%;
}

h2 span { 
   color: #E1E1E1; 
   font: 55px proxima_nova_scosfthin; 
   letter-spacing: 1px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 10px 25px 10px; 
}

h3{
position: absolute; 
   top: 225px; 
   left: 20px; 
   width: 100%;
}

h3 span { 
   color: #E1E1E1; 
   font: 45px proxima_nova_ltthin; 
   letter-spacing: 1.5px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 80px 10px 80px; 
}

h4{
position: absolute; 
   top: 325px; 
   left: 20px; 
   width: 100%;
}

h4 span { 
   color: #E1E1E1; 
   font: 45px proxima_nova_ltthin; 
   letter-spacing: 1.5px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 19px 10px 19px; 
}

h5{
position: absolute; 
   top: 425px; 
   left: 20px; 
   width: 100%;
}

h5 span { 
   color: #E1E1E1; 
   font: 45px proxima_nova_ltthin; 
   letter-spacing: 1.5px;  
   background: rgba(0, 0, 0, 0.7);
   padding: 10px 15px 10px 15px; 
}

h6{
position: absolute; 
   top: 98px; 
   left: 40px; 
   width: 100%;
   color: #E1E1E1; 
   font: 20px proxima_nova_ltthin; 
   letter-spacing: 2px;  
   padding: 0;
}

h7{font: 16px proxima_nova_ltthin;
   float: right;
   margin-right: 30px;
}

h8{ margin-right:.5cm; 
   font: 30px Proxima Nova; 
   }

p{margin-right:.5cm; 
   font: 25px proxima_nova_ltthin; 
   }

a{text-decoration: none}

#begin {position:relative;
   top:610px;
   left:20px;
}

.storypage {position:relative;
   top:30px;
   left:20px;
}

.horizontaltable {
   margin:auto;
   padding:0;
   width:100%;
   height: 370px;
   overflow:scroll;
   white-space: nowrap;
}


table{ 
   margin: 0 0 0 5px;
   width: 1000px;
   height:100%
   table-layout:fixed;
  }

td{font: 30px proxima_nova_scosfthin;
    text-align:center; 
    align: center; 
    padding: 0 15px 35px 15px;
       }

tr{align:center;
}

#courses {
  position:relative;
  width:300px;
  height:300px;
  vertical-align: middle;
  text-align: center; 
}

#courses a {
  color: #000000;
}

#businessethics {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("BusinessEthics.jpg");
    }
#valuetheory {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("ValueTheory.jpg");
  }
#ancientmedieval {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("Castle.jpg");
  }

#Nassau {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("Nassau.jpg");
    }
#SanFrancisco {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("SanFrancisco.jpg");
    }
#Lights {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("Lights.jpg");
    }
#NewportNews {
  position:absolute;
  left: 0;
  width:100%;
  height:100%;
  background: url("NewportNews.jpg");
    }

#overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.2);
  opacity:0;
  display: table-cell;
  vertical-align: middle;
   }

#overlay:hover {
  opacity:1;
}

#overlay a{
position: absolute; 
   padding: 35px 0 35px 0; 
   width: 100%;
   color: #E1E1E1; 
   font: 35px proxima_nova_ltthin; 
   letter-spacing: 2px; 
   left: 0; 
   vertical-align: middle;
}

#overlay a:hover{
   color: B1AFAF;
}

blockquote{font: 16px proxima_nova_ltthin;
}


a:link {
   padding:0;
   margin: 0;
   color: #5F5D5D;
}      /* unvisited link */

a:visited {
   padding:0;
   margin: 0;
   color: #5F5D5D;
}  /* visited link */

a:hover {
   padding:0;
   margin: 0;
   color: #B1AFAF;
}  /* mouse over link */

a:active {
   padding:0;
   margin: 0;
}  /* selected link */

dt{margin:.2cm 1cm}

dd{margin:.2cm 2cm}

/*fonts*/
    /*Proxima Nova Thin ['proxima_nova_scosfthin' OR 'proxima_nova_ltthin']*/
    /*Proxima Nova Regular ['Proxima Nova']*/
    /*Proxima Nova Semi-Bold ['proxima_nova_ltsemibold']*/
    /*Proxima Nova Bold ['proxima_nova_altbold']*/
    /*Proxima Nova Black ['proxima_nova_altblack']*/

}