/*	This is used when you are making a website with individual css for each page
	NOTE: Use the master css for any items that you want to be constant throughout the website
*/
#porfileWrap{display: flex; align-items: center;}
#profileSec1{width: 45%;margin: 0 30px 0 0; }
#profileSec2{width: 45%;}

#footer{margin: -10px auto 0;}

#readMore{}
#readMore a:link, #readMore a:visited{text-decoration:none; display:inline-block; color:#ffffff; background: #f35710; padding: 10px;}
#readMore a:hover, #readMore a:active{text-decoration:none; color:#6b21aa;  color:#014327; background: #ffffff;}

#readMore2 a:link, #readMore2 a:visited{text-decoration:none; display:inline-block; color:#ffffff; background: #f35710; padding: 10px;}
#readMore2 a:hover, #readMore2 a:active{text-decoration:none; color:#6b21aa;  color:#ffffff; background: #014327;}

.secBox2{margin: 0 auto;}
#fancybox_26{background: #014327; padding: 0 0 30px 0;}
#fancybox_24{padding: 0 0 30px 0;}

.navMainWrap{ display: flex; justify-content: center;flex-wrap: wrap;margin: 30px auto 0;} 
.navWrap{max-width: 500px; flex-grow: 1; position: relative; background: rgba(0,0,0,1); transition: ease-in-out 0.3s; margin: 0 10px !important;}
.navWrap:hover{background: rgba(255,255,255,1);}
.navImg{display: block;opacity: 0.5; transition: ease-in-out 0.3s;}
.navImg img{display: block;}
.navWrap a:hover .navImg, .navWrap a:active .navImg{opacity: 1;}
.navWrap a:hover .navTitle, .navWrap a:active .navTitle{opacity: 0;}
.navWrap a:hover .navText, .navWrap a:active .navText{opacity: 0;}
.navInfo{display: block; color: #ffffff;padding: 15px; z-index: 1; position: relative;transition: ease-in-out 0.4s; bottom: 10px; position: absolute;}
.navWrap a:hover .navInfo, .navWrap a:active .navInfo{}
.navTitle{display: block; font-size: 1.5em; font-family: 'Raleway', sans-serif; transition: ease-in-out 0.3s;opacity: 1;}
.navText{display: block; font-size: 0.9em; height: 60px; margin: 10px 0 10px; transition: ease-in-out 0.3s;opacity: 1;}

.navWrap a:link, .navWrap a:visited{text-decoration:none; color:#ffffff;}
.navWrap a:hover, .navWrap a:active{text-decoration:none; color:#ffffff;}

.readMore{transition: ease-in-out 0.3s; display: block;font-family: 'Raleway', sans-serif;display: inline-block;}
.navWrap a:link .readMore, .navWrap a:visited .readMore{background: #ffffff; color: #014327;padding: 10px; margin: 5px 0 0 0;opacity: 1;transition: ease-in-out 0.3s;}
.navWrap a:hover .readMore, .navWrap a:active .readMore{background: #f35710; color:#ffffff;}


@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1100px){
    
}

@media screen and (max-width:1000px){
    .navWrap{margin: 10px 0 !important;}
    
}

@media screen and (max-width:900px){
    
}

@media screen and (max-width:800px){
    #porfileWrap{display: flex; flex-wrap: wrap;}
    #profileSec1{width: 100%; margin: 0;}
    #profileSec2{width: 100%; margin: 20px auto 0; text-align: center;}
    
}

@media screen and (max-width:700px){
    
}

@media screen and (max-width:600px){
    
}

@media screen and (max-width:500px){
    .navText{height: auto;}
    
}

@media screen and (max-width:400px){
    .navTitle{font-size: 1.1em;}
    .navInfo{bottom: 5px;}
    .navText{font-size: 0.8em;}
    .navWrap a:link .readMore, .navWrap a:visited .readMore{padding: 5px;}
}

@media screen and (max-width:360px){
    
}