/* ------------------------- GLOBAL -------------------------*/
.top { position: relative; float: left; width: 100%; display: block; top:20px; padding-bottom: 0px;margin-bottom: 10px; border-bottom: 2px groove rgba(195,193,193,0.52); height: 100%; background-image: url(../images/website_background.png); background-image: 769px 1366px; background-position: bottom center; z-index:1 }


/*Scrollbar style*/
::-webkit-scrollbar { background-image:url(../images/scrollbar.png) !important}

/* Thumb - Menu */
.thumb { max-width: 20%; float: left; position: relative; margin-left: 2%; direction: rtl; overflow-y: auto; overflow-x: hidden; height:67vh; }
.thumb ul, .thumb ul li { display: block; position: relative; }
.thumb button {width: 120px; height: auto; border: 0px; background: none; outline: 0; cursor: pointer}
.thumb button img { width: 120px; padding-right: 10px; padding-left: 20px; padding-bottom: 10px; float: left; border: 0 }

/* Content */
.student-details { width: 30%; text-align: left; position: relative; float: left; margin-left: -20px; margin-top: 20px;cursor: default}
.student-details ul li { display: block;  }
.student-details ul li header { display: inline; margin-right: 3px}
.student-details ul li h1 { font-size: 22px; color: #000; text-decoration: underline; margin-bottom: 20px;}
.student-details ul li h2 { font-size: 16px; color: #222; margin-top:1em}
.student-details ul li h2 a { background-image: url(../images/next2.png); background-position: 6px center; background-size: 10px 12px; background-repeat: no-repeat; margin-left:-25px; padding-left: 25px;}
.student-details ul li h2 a:hover {color: #2ea2cc}
.student-details ul li p { width: 100%; font-size: 14px; color: #666; margin-top: -5px;}

/* Photo */
#student-portfolio  { width: auto; position: relative; margin-left: 40%; margin-top: 20px;}
#student-portfolio img { height:63vh; max-height:auto; position: absolute; right: 0; left: 0; text-align: center; margin: 0 auto; opacity: 100; border: 0;
  -webkit-transition: opacity 1.5s;
  -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
    transition: opacity 1.5s;}
#student-portfolio img.clicked { opacity: 0; }
#student-portfolio video { height:63vh; max-height:auto; position: absolute; right: 10px; text-align: center;  opacity: 100; }

/* slideshow */
#slider1_container { position: relative; left:0; width: 1580px; height: 180px; background-color: #fff; overflow:hidden; padding-top: 10px; padding-bottom:30px }
.slideshow_img {position: absolute; left: 60px; bottom:-10px; width: 100%; height: 100%; overflow: hidden; vertical-align: middle; border: 0}


	 /* slideshow - bullet navigator */
	.slideshow div, .slideshow div:hover, .slideshow .av { position: absolute; width: 180px; height: 180px;  text-align: center; line-height: 21px; color: white; font-size: 12px; background: url(../images/logo.png) no-repeat; overflow: hidden; cursor: pointer; display: none; }
	.slideshow div { background-position: -5px -4px; }
	.slideshow div:hover, .slideshow .av:hover { background-position: -35px -4px; }
	.slideshow .av { background-position: -65px -4px; }
	.slideshow .dn, .slideshow .dn:hover { background-position: -95px -4px; }

.slideshowl, .slideshowl:hover, .slideshowl.slideshowldn, .slideshowr, .slideshowr:hover, .slideshowr.slideshowrdn { display: block; position: absolute; width: 30px; height: 180px; cursor: pointer; background-repeat: no-repeat; background-image: url(../images/prev2.png); overflow: hidden; background-size: 30px auto; background-position: center center; margin-left: 10px; }
.slideshowr, .slideshowr:hover, .slideshowr.slideshowrdn {  background-image: url(../images/next2.png); right: 10px }*/


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

@media all and (max-width:1366px){
    
/* Photo */
body { overflow-x:hidden }
    
/* Thumb - Menu */
.thumb { height:63vh; }

    
/* Photo */
#student-portfolio img, #student-portfolio video { height:60vh;  }
#student-portfolio video { margin-left: 70px}


}


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

@media all and (max-width:1024px){

body {overflow-x: hidden}

/* Thumb - Menu */
.thumb {height:550px; }
    
/* Content */
.student-details { width: 30%; padding-left:5px}
.student-details ul li h1 {  margin-bottom: 20px;}
.student-details ul li h2 {  margin-top:1.3em}
.student-details ul li p {  margin-top: 5px;}

/* Photo */
#student-portfolio img, #student-portfolio video { height:inherit; max-width: 400px; }

}

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

@media all and (max-width:1023px){

body{min-width: 320px; overflow-x: hidden}    
   
.top { z-index:0 ; border: 0}    
    
/* Thumb - Menu */
.thumb { height:auto; max-width: 100%; padding: 0px}
.thumb ul, .thumb ul li { float:left; padding-right: 0px;}
.thumb button { width: auto; height: auto;}
.thumb button img { width: auto; max-height: 50px; padding:0 }

/* Content */
.student-details { width: 100%; position: relative;  margin-top: 0px;}
.student-details ul li h1 { margin-bottom: 20px;}
.student-details ul li h2 { margin-top:1.3em}
.student-details ul li p { margin-top: 0;}

/* Photo */
#student-portfolio  { width: 100%; margin-left: 0; height: auto; clear: left}
#student-portfolio img { width: 90%; margin-bottom: 80px; }
#student-portfolio video { width: 90%; margin-bottom: 80px; }    

/* slideshow */
#slider1_container { position: fixed; bottom: 50px; padding: 0px; border-top: 2px groove rgba(195,193,193,0.52)}  
    
}