/*Attributes affect all pages*/

body {
	font-family: verdana ; 
	background-color: #f4f0ee;
}

/*Title Humming Sang*/
h1  {
	text-align: center;
  color: #333333;
  font-family: Expletus Sans;
  font-size: 85px;
  font-weight: bold;
  margin-bottom: 0px;
}

.col {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:rgba(0,0,0,1);
}

.overlay:hover {
  opacity: 0.4;
}

.overlay-text {
  text-align: center;
  position: relative;
  top: 45%;
  color: #fff;
  font-size: 28px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.navbar-tag{
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 20px;
  text-align: center;
  font-family: Expletus Sans;
  font-size: 28px;
  font-weight: bold;
  color:#8D8A86 !important;
}

.navbar-tag:hover {
  color: #f8bab7 !important;
  text-decoration: none;
}  

.nav-light .navbar-toggler
{
  outline:none;
  box-shadow: none;
  border-style: none;
}

.nav-font {
  font-family: Expletus Sans;
  font-stretch: 200%;
}
/*
-----------------------------------
*/

/*Make CV Work Contact Center*/
#menu {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  word-spacing:5em; 
}      

/*Style CV Work Contact Buttons*/
a {
  color: #8D8A86;
  text-decoration: none;
}
    
a:hover {
  color: #f8bab7;
  text-decoration: none;
}  

/*nav bar changes*/
/*background match body*/
/*
.navbar-default{
  background:#f4f0ee;

}
*/
/*
.navbar.navbar-default {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
*/

/*navbar buttons CV Work Contact Attributes*/


/*Hover with text*/
.internal-link-style{
  visibility: hidden;
}

.inter-link-selected{
  visibility: visible;
}

.outertext {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.outertext .hovertext {
    visibility: hidden;
    width: 120px;
    background-color: #f4f0ee;
    color: #8D8A86;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /*bottom*/ 
    /*position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;*/

    /*right*/
    position: absolute;
    z-index: 1;
    top: 26px;
    left: 0%;
}

/*.outertext .hovertext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}*/
.outertext:hover .hovertext {
    visibility: visible;
    font-size: 20px;
    color:#f8bab7;
}

/*
.navbar-tag-inner{
  text-align: center;
  font-weight: bold;
  color:#8D8A86 !important;
}
.navbar-tag-inner:hover {
    color: #f8bab7 !important;
    text-decoration: none;
}  
*/

/*Center the navbar*/
/*
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
*/


.navbar .navbar-collapse {
  text-align: center;
}

/*
.navbar-toggle {
  float: right;
  margin-right: 25px;
  margin-top: -90px;
  padding: 0;
}
*/

/*style the menu icon */
/*icon bar size change here*/
/*
.navbar-toggle .icon-bar {
  
  height: 6px;
  width: 50px;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  border-radius: 5px !important;
}

.navbar-default .navbar-toggle {
  border-color:#f4f0ee;
}
*/
/*style menu icon*/
/*
.navbar-default .navbar-toggle .icon-bar {
    background-color: #8D8A86;
}
*/
/*
.navbar-collapse {
  margin-left: 30%
}
*/
.icon-bar{
  margin-left:0;
  margin-right:0;
}

/*CV Work Contact highlight at the page it's on*/
.current-page{
  color: #DA9999 !important;
}

/*thumbnail background color*/
.thumbnail {
    background: #f4f0ee;
}

/*Folded Corner*/
.foldtr {
  position: relative;
  -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
}
 
.foldtr:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-right: 70px solid transparent;
  -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
}
 
.foldtr:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-left: 69px solid transparent;
}

.folding{
  border-radius: 0 5px 5px 5px;
  overflow: hidden;
  transition: border-radius 0s;
}
.folding:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
  width: 0;
  border-width: 12px;
  border-color: #FFF rgba(255,255,255,0.3) rgba(255,255,255,0.3) #FFF;
  border-radius: 0 0 5px 0;
  transition: border-width .2s;
}

.folding:hover{
  border-radius: 5px;
  transition-delay: .1s;
}

.folding:hover:after{
  border-width: 0px;
}

/* Preview images */
.preview{
  width: 200px;
  height: 200px;
}

/* Popup */
.modal-backdrop{
  z-index: -1;
}

/*Navbar collapse at bigger dimension*/
@media (max-width: 1100px) {
  h1{
    font-size:70px;
  }
  
  .navbar-header {
      float: none;
  }
  /*
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
  */
}

@media (max-width: 650px){
  /*
  .navbar-toggle {
    margin-top:0;
  }
  */
}



/*Footer always stay at bottom*/
html, body{
  height: 100%;
}
/* #main{
  overflow: auto;
  padding-bottom:10px;
} */

#wrap{
  min-height: 100%
}

/* #footer {
  position: relative;
  margin-top: -180px;
  negative value of footer height
  height: 180px;
  font-size: 11px;
} */

body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
}

footer{
  text-align:center;
  font-family: Expletus Sans;
}

/*hr style*/
#hr-style {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/*navigation arrow (bottom of page)*/
.nav-arrow{
  margin-right: 40px;
  margin-top: 20px;
  text-align: center;
  font-family: Expletus Sans;
  font-size: 28px;
  font-weight: bold;
  font-size: 45px;
  /*text-transform: uppercase;*/
  /*word-spacing:5em; */
  color:#8D8A86 !important;
}
.nav-arrow:hover {
  color: #f8bab7 !important;
  text-decoration: none;
}



/*End Attributes affect all pages*/






/*Attribute under contact.html*/
/*style contact icons: instagram and email */
.contact-icons {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  /*margin: auto;*/
  margin-top: 10%;
}  

.contact-icons-sizes{
  font-size: 90px;
}

#instagram{
  font-size:95px;
}

#email{
  font-size: 90px;
}

/*contact icons spacing*/

.contact-icon-span{
  margin-left: 25px;
  margin-right: 35px;
}

/*contact icons size*/
input{
  /*width: 50px;*/
  height: 50px;
}

@media (max-width: 1100px) {
  #mobile-space{
    display: block;
    margin-top: 150px;
  }
  .contact-icons{
    margin-top:10%;
  }
}



/*Attribute affects index.html(work)*/
/*thumbnail no white spacing:pic no fram*/
/*
.thumbnail{
	padding: 0;
  border:0 none;
  box-shadow: none;
}
*/
/*Sculpture, Drawing, Photography Set-Design text show when higlight*/
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  /*width:100%;
  height:100%;*/
}
/*
.overlay-pic {
  position: absolute;
  top: -10px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:rgba(0,0,0,1);
}

.overlay-pic:hover {
  opacity: 0.4;
}
*/
/*hover on project and show name*/


/*
@media(max-width: 1200px){
  .overlay {
    top:-5px;
    opacity: 1;
    background-color:rgba(0,0,0,0);
  }
}

@media (max-width: 1100px){
  .overlay {
    top:0px;
    opacity: 1;
    background-color:rgba(0,0,0,0);
  }
}
*/



.work-link{
  font-size: 28px; 
	margin: 30% 30%;
}

.work-link-verti{
  font-size: 28px;
  margin: 61% 30%;
}


/*@media (min-width: 770px){
	.container-fluid{
	    margin-right: 0;
	    margin-left: auto;
	}
}

@media (min-width: 1060px){
	.container-fluid{
	    margin-right: 0;
	    margin-left: auto;
	}
}
*/


/*Attributes affects pic under Living Journal, Heavy, Corner, Rest, Photography, Set Design*/
/*Image CSS*/
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.8;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1000px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 10px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.masterpiece-title{
  font-family:  Expletus Sans;
  /*font-weight: bold;*/
  font-size: 16px;
  color: #777777;
}

.masterpiece-content{
  font-family:  Expletus Sans;
  /*font-weight: bold;*/
  font-size: 16px;
  color: #777777;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 1100px){
    .modal-content {
        width: 99%;
        margin-top: auto;
    }
}

/*Drop Down CSS*/
/*.navbar-default .navbar-nav > li.dropdown:hover > a, 
.navbar-default .navbar-nav > li.dropdown:hover > a:hover,
.navbar-default .navbar-nav > li.dropdown:hover > a:focus {
    background-color: rgb(231, 231, 231);
    color: rgb(85, 85, 85);
}
li.dropdown:hover > .dropdown-menu {
    display: block;
}

*/
/*.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}*/

/*@media(min-width:768px){
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
  }
}*/

/*@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}
@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}
*/
/*@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}*/

/*Google Fonts*/


/*Attributes affects about.html*/
/*cv style*/
.title-tag{
  font-family:  Expletus Sans;
  font-weight: bold;
  font-size: 20px;
  color: #777777;
}
.cv-content{
  font-family:  Expletus Sans;
  font-weight:bold;
  font-size: 14px;
  list-style-type: none;
  list-style-position: inside;
  padding-left:0;
  margin-top:15px;
  color: #010000;
}

#cv-italic{
  font-family: calibri;
  font-weight: normal;
  font-style: italic;
}

h3{
  margin-top: 25px;
}