*{
 padding:0;
 margin:0;
 }
 
 /*###############################
 ########## NAVIGATION ###########
 ###############################*/
 
  .logo{
 height: 60px;
 }
 
 #nav_container{
 width: 100%;
 padding: 20px 0;
 position:fixed;
 }
 
 #nav_links{
 width: 100%;
 text-align:center;
 padding-top:5px;
 font-family:'Raleway', sans-serif;
 font-size: 7pt;
 letter-spacing: 2px;
 }
 
 ul#navlist{
 list-style-type: none;
 }
 
 ul#navlist li{
 display:inline;
 margin-right:30px;
 }
 
 ul#navlist a{
 margin-right:30px; }
 
 ul#navlist li:last-child{
 margin-right:0px;}
 
 /*###############################
 ########### SPOTLIGHT ###########
 ###############################*/
 
 #spotlight{
 width:100%;
 height:100vh;
 background-image:url("../images/portfolio/spotlight.jpg");
 background-size:100%;
 background-position: -25px 20px;
 background-attachment:fixed;
 }
 
 /*###############################
 ############ ABOUT ##############
 ###############################*/
 
 #about{
 width:100%;
  }
  
 #about img{
 width:100%;
 }
 
 /*###############################
 ############ GALLERY ############
 ###############################*/
 
 #gallery{
 width:100%;
 }
 
 #gallery img{
 width:100%; 
 margin-top: 120px;
 margin-bottom: -120px;
 }
 
 /*###############################
 ########### CATEGORIES ##########
 ###############################*/
 
 #categories{
 width:100%;
 }
 
 #categories img{
 width:100%;
 margin-bottom:30px;
 }
 
 /*###############################
 ############ CONTACT ############
 ###############################*/
 
 #contact{
 width:100%;
 } 
 
 input, .input{
 font-family: 'Montserrat', sans-serif;
 font-size: 14pt;
 color: #fff;
 padding: 3px 10px;
 margin-bottom: 15px;
 background-color: #000;
 border:0;
 border-bottom: 2px solid #ccc;
 }
 
 .button{
 border:2px solid #ccc;
 }
 
 .button:HOVER{
 background-color:#fff;
 color:#000;
 cursor:pointer;
 }
 
 input:focus, .input:focus{
 outline:0;
 }
  
 /*###############################
 ############# FOOTER ############ 
 ###############################*/
 
 #footer{
 width: 100%;
 padding: 10px 0;
 position:fixed;
 bottom:0;
 }

#footer .col50:last-child{
text-align:right;
}
  
 /*###############################
 ############# FONTS #############
 ###############################*/
 
 h1{
 font-family: 'Raleway', sans-serif;
 font-size: 32pt;
 letter-spacing: 3px;
 font-weight:lighter;
 margin-bottom: 40px;
 }

h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 20pt;
  font-weight: lighter;
  }
 
 p1{
 font-family: 'Montserrat', sans-serif;
 font-size: 12pt;
 font-weight:lighter;
 line-height:3em;
 }
 
 p2{
 font-family: 'Montserrat', sans-serif;
 font-size:8pt;
 font-weight:lighter;
 color: #999;
 }
 
 .sm-text p1{
 font-size:10pt;
 line-height:2em;
 }
 
 /*###############################
 ############ FORMAT #############
 ###############################*/
 
 .clearfix{
 clear:both;
 }
 
  .pad-md{
 padding: 100px 0;
 }
 
 .no-pad-btm{
 padding-bottom:0;
 }
 
 .extra-pad-top{
 padding-top: 200px;
 }
 
 .container{
 width: 1200px;
 margin: 0 auto;
 }
 
 #gallery .container{
 overflow:hidden;
 }

ul#plus{
  list-style-type:none;
  margin:0;
  padding:0;
}

ul#plus li{
  background-image:url('/images/plus.png');
  background-repeat: no-repeat;
  background-position:left 12px;
  height: 40px;
  padding-left: 40px;
  }

.align-right{
  text-align:right;
}
 
 .col18{
 width: 150px;
 padding-right: 50px;
 float:left;
 }

.col30{
  width:300px;
  padding-right:50px;
  float:left;
}
 
 .col33{
 width:350px;
 padding-right:50px;
 float:left;
 }
 
 .col40{
 width:400px;
 padding-right:50px;
 float:left;
 }
 
 .col50{
 width:550px;
 padding-right:50px;
 float:left;
 }
 
 .col60{
 width:700px;
 padding-right:50px;
 float:left;
 }
 
 .col70{
 width:800px;
 padding-right:50px;
 float:left;
 }
  
 /*###############################
 ############ THEMES #############
 ###############################*/
 
 .blackbg{
 background-color: #000;
 }
 
 .darkgraybg{
 background-color:#F2F2F2;
 }
 
 .whitebg{
 background-color: #fff;
 }
 
 .whitetxt{
 color: #fff;
 }
 
 .blackbg a{
 text-decoration:none;
 color: #ccc;
 }
 
 .darkgraybg a{
 text-decoration: none;
 color: #333;
 font-size: 10pt;
 }
 
 .blackbg a:HOVER{
 color:#fff;
 }
 
 .darkgraybg a:HOVER{
 text-decoration:underline;
 }

.img-fade-hover img{
opacity:.8;
}

.img-fade-hover img:HOVER{
opacity:1;
}
 
 /*#######################################
 ############## ACCORDION ################
 #######################################*/
 
 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}