/*
Theme Name: Jibreel Utley's  3D Portfolio Theme
Template Name:Home
Theme URI: //www.jmu3d.com
Description: My Portfolio.
Version:2.0
Author: Jibreel utley
Author URI: //www.jmu3d.com/jibreel
License: GNU General Public License v2 or later
License URI: //www.gnu.org/licenses/gpl-2.0.html
Text Domain: jibreel-utleys-3d-portfolio-theme
Tags: Portfolio
*/

.wp-caption {}
.wp-caption-text {}
.sticky {}
.gallery-caption {}
.bypostauthor {}
.navigation {}
.attachment {}
.screen-reader-text {}
.alignright{}
.alignleft {}
.aligncenter{}

/** for video***/
.Cards-blog .excIndent figure div iframe{width:100%;max-height:100%;}
.Cards-blog .excIndent .jmublockone figure div iframe{width: 100%;
    max-height: 279px;}

 
.Cards-blog .excIndent figure .wp-block-embed__wrapper #WYL_WWL9t529Vlg{
  	width:100%!important;
  padding-bottom: 54%!important; 
}
.Cards-blog .excIndent figure .wp-block-embed__wrapper div{
	width:100%!important;
}


/****** FONTS*******/




/* font converted using font-converter.net. thank you! */
@font-face {
  font-family:jmufont;
  src: url("./fonts/MushroomHill2.eot"); /* IE9 Compat Modes */
  src: url("./fonts/MushroomHill2.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/MushroomHill2.otf") format("opentype"), /* Open Type Font */
    url("./fonts/MushroomHill2.svg") format("svg"), /* Legacy iOS */
    url("./fonts/MushroomHill2.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/MushroomHill2.woff") format("woff"), /* Modern Browsers */
    url("./fonts/MushroomHill2.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}





@font-face{
src: url(/wordpress/wp-content/themes/jibreel-utleys-3d-portfolio-theme/fonts/Oswald-Regular.ttf);
font-family:Godfont;
}
/****** FONTS  END*******/


a,a:hover{
	text-decoration:none !important;
}
a:hover{
 color: orange;
}
/*********************************General site********************************/

body{
	margin:0;
}
.mainTitle a{
	  color: white;
	
}
.mainTitle a:hover{
	 color: orange;
	
}
#wrapper{
	background-color: whitesmoke;
	max-width: 1920px;
	margin: 0 auto;
	border-radius: 3px;
	position:relative;
	overflow:hidden;
	box-shadow: -3px 15px 15px -5px;
}
#header{

}
#header2{
		text-align:center;
	/*width:100%;*/
	margin:0 auto;
	overflow:hidden;
}
#header2 img{
	width: 46%;
    height: auto;
}

#logo{
width: 46%;
    margin: 0 auto;
	text-align:center;
}
#media_image-5 img{
	/**width:100%;**/
	height:100%;
}
#header{
/**background-color: #5d5d5d;**/
}
#threePictures{
      
      WIDTH: 75%;
    MARGIN: 0 AUTO;
margin-bottom:22px;
    border-radius: 5px;
	position:relative;
	z-index:10;
  text-align:center;
   
	
}
#picture1{
	display:inline-block;
	    width: 32%;
	position:relative;
	z-index: 10;
}
#picture2{
	display:inline-block;
	    width: 32%;
	position:relative;
	z-index: 10;
}
#picture3{
	display:inline-block;
	    width: 32%;
	position:relative;
	z-index: 10;
}


@media screen and (max-width:3840px){
	#wrapper{
	max-width: 1920px;
	}
	.Cards-blog .excIndent .jmublocktwo figure div iframe{width: 100%;
     max-height: 425px;}
	
	
	
	
}

@media screen and (max-width:1920px){
	#wrapper{
	max-width: 1080px;
	}
	.Cards-blog .excIndent .jmublocktwo figure div iframe{width: 100%;
     max-height: 235px;}
}

@media screen and (max-width:1080px){
	#wrapper{
	max-width: 966px;
	}
}


@media screen and (max-width:966px){
#wrapper{
	max-width: 966px;
	}
}
@media screen and (max-width:876px){
	#wrapper {width: 100%;}
}
@media screen and (max-width:603px){
	#wrapper {
    width: 100%;
    }
	
	#threePictures {
    WIDTH: 100%;
   }
   .Cards-blog .excIndent figure div iframe{width: 100%;max-height: 348px;margin: 0 auto;}
}


@media screen and (max-width:360px){
	#wrapper{
	width:360px;
	}
	 .Cards-blog .excIndent figure div iframe{width: 100%;max-height: 176px;margin: 0 auto;}
}


/************ General Site ends************/

/************ MAIN MENU*****************/
#menu{
	border-bottom-style: solid;
    border-width: 1px;
    background-color: #e4e4e4;
    color: white;
}
.fa-search{
	display: inline-block;
    
    padding: 3px;
    font-size: 16px;
}
.search-form{
display:inline-block;
}
#padSearch{
	padding-top: 10px;
    padding-left: 25px;
    background-color: #e4e4e4;
}
#padSearch #searcher{
	    height: 41px;
}
 .search-submit   {
   
  display: inline-block;
}
.search-field{
	border-radius: 5px;
}
#menubutton{
	position:absolute;
	display:none;
}
#navbar,#nav {
z-index: 10;
position: relative;

width: 100%;
margin: 0 auto;
text-align:center; height:auto;
}
#navbar ul,#nav ul{
margin:0;
padding:0;   
}

#navbar li,#nav li{
     list-style: none;
     float:none;
     position: relative;
display:inline-block;
text-align:center;
}


#navbar ul li a,#nav ul li a {
	transition: background .4s linear;
-webkit-transition: background .4s linear;
-moz-transition:background .4s linear;
-o-transition: background .4s linear;
font-size: 24px;
    color: black;
    text-decoration: none;
   width: fit-content;
    display: block;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 18px;
    padding-right: 18px;
	
}
#navbar ul li a:hover{

/*text-shadow: 1px 1px 1px #FFFFFF;*/
	background-color:orange;
	color:white;
	   padding-bottom: 9px;
}

#navbar ul ul,#nav ul ul {
position:absolute;
display:none;   
}

/** the sub menu drop down*/
#navbar ul li:hover ul,#nav ul li:hover ul{
    display: block;
    background-color: #e4e4e4;
    z-index: 51;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-color: white;
    border-width: 1px;
    border-radius: 0px 0px 5px 5px;
  
 
     }

#navbar2{
	transition: height .4s linear;
-webkit-transition: height .4s linear;
-moz-transition:height .4s linear;
-o-transition: height .4s linear;
	    height: 0px;
    overflow: hidden;
}
#navbar2 ul li a{
	text-decoration: none;
    color: #c34a00;
    padding-bottom: 20px;
    font-size: 20px;
    padding-left: 47px;
}

#navbar2 li{
	list-style: none;
	padding-bottom: 17px;
	position: relative;
    top: 13px;
}
#navbar2 .menu ul li a{
	color:black;
	font-size:16px;
}
#navbar2 .menu{
padding:0px;
}
#navbar2 .menu ul{
	padding-bottom:20px;
}
.menu ul:last-child{
	border-bottom-style:solid;
	border-color:black;
	border-width:1px;
}
@media screen and (max-width:1920px){
	#navbar ul li a,#nav ul li a {
		font-size:16px;
	}
}
@media screen and (max-width:604px){
#navbar2.down{
	height:0px;
	overflow:hidden;
}
}
@media screen and (max-width:752px){
	#navbar2.down{
		 height: 800px;
	}
	#navbar {
		border-bottom-style: solid;
		border-width: 1px;
		height: 0px;
		overflow: hidden;
		top: 0px;
		border-style:none;
	}
	
	
	#menubutton{
	    display: block;
    position: relative;
    top: 0px;
  left:0px;
    font-size: 33px;
    padding: 6px;
    padding-left: 26px;
}
}

/************ MAIN Menu ENDS*****************/












/**************** ContentBox-Blog******************************/
.mainTitle{
	background-color: #8a8484;
    text-align: center;
    padding-top: 13px;
    padding-bottom: 13px;
    color: white;
    /*font-size: 30px; for 1920px*/
	font-size: 55px;
    font-family: jmufont;
    letter-spacing: 6px;
    border-bottom-style: solid;
    border-color: #ffffff;
    border-width: 2px;
    border-top-style: solid;
}
.Cards-blog{
    background-color: #e4e4e4;
    width: 89%;
    padding-bottom: 20px;
    margin: 0 auto;
    border-radius: 6px;
    margin-top: 9px;
	margin-bottom: 20px;
	overflow:hidden;
	font-size:30px;
}

.Card-blog{
	/* margin: 0 auto; */
	background-color: #d0cece;
	border-radius: 6px;
	overflow: hidden;
	display: inline-table;
	display:-ms-inline-grid;
	margin-top: 20px;
	margin-right: 8px;
	margin-left: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 31.1%;
}
.thumbnail-blog{
	/** height:300px;**/
	height:530px;
	width: 100%;
}
 .thumbnail-blog img{
	 width: 100%;
	 height:auto;
	position:relative;
	 z-index:0;
}
#titleHeader-blog{
	background-color: #8a8484;
	text-align: center;
	/**height: 36px;**/
	height: 60px;
}
#titleHeader-blog a{
	text-decoration: none;
    color: white;
    /**font-size: 23px;**/
	font-size: 34px;
}
.text-excerpt-blog{
    padding-left: 12px;
    padding-right: 12px;
    /*height: 144px;*/
	height: 255px;
	background-color:#ffffff;
	position:relative;
	z-index:10;
}
.text-excerpt-blog a{
	text-decoration: none;
}
.metabox-blog{
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 12px;
	background-color: #8a8484;
	color: white;
	/*height: 124px;  for 1920px*/
	height: 185px;
	padding-top: 12px;
}
/*:-webkit-any-link*/ 
.metaBox-blog  > div >  a {
  color: rgb(246, 139, 32);
  text-decoration: none;
  cursor: auto;
  background-color: rgb(83, 83, 90);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.8;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  padding-top: 2px;
  border-bottom-style: groove;
  border-color: rgb(99, 3, 176);
  border-width: 2px;
}
.titletextBlog a{}
#ReadMoreLink-blog{
	text-decoration: none;
    color: #e4e4e4;
    font-size: 23px;
}


#nav-below > a:-webkit-any-link {
color: white;
  text-decoration: none;
  cursor: auto;
  background-color: rgb(58, 57, 60);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.6;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  padding-top: 2px;
  border-bottom-style: groove;
  border-color: rgb(120, 39, 166);
  border-width: 2px;
    
}
#nav-below{
	background: #d0cece;
     width: fit-content;
    margin: 0 auto;
    border-radius: 4px;
    padding: 7px;
}
.page-numbers{

   color: orange;
  text-decoration: none;
  cursor: auto;
  background-color: rgb(83, 73, 92);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.6;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  padding-top: 2px;
  border-bottom-style: groove;
  border-color: rgb(178, 88, 88);
  border-width: 2px;
}

#mpostpagination{

	    margin-top: 7px;
    margin-bottom: 7px;
}


.Cards-blog	.CatD p{
	text-align: center !important;
    background-color: #e2e2e2;
    color: #6c6a6a;
    padding: 40px !important;
	}
@media screen and (max-width:3840px){
	.Cards-blog{
		font-size:30px;
	}	
}

@media screen and (max-width:1920px){
	.Cards-blog{
		font-size:16px;
	}
	
	#titleHeader-blog a{
		font-size: 23px;
	}

	#titleHeader-blog {
	  height: 36px;
	}
	.thumbnail-blog{
	 height:300px;
	}
	.text-excerpt-blog{
	height: 144px;
	}
	.metabox-blog{
	height: 124px;
	}
	
	.mainTitle{
    font-size: 30px;
	}
}
@media screen and (max-width:1280px){
.Cards-blog{
 width: 89%;
 }
}

@media screen and (max-width:1080px){
	.Cards-blog{
  width: 96%;
 }
}
@media screen and (max-width:876px){
	.Card-blog{
	 width: 46%;
	 margin-left: 10px;
	}
	.Cards-blog {
    max-width: 808px;
}
}

@media screen and (max-width:574px){
 .Cards-blog {
    width: 96%;
}
.Card-blog{
	 width: 49%;
	 margin: 0;
	 margin-top: 6px;
	 margin-left: 2px;
	 }
.text-excerpt-blog {
  height: 172px;
 }
	 
	 .comWrapper {
		max-width: 805px;
	}
}
@media screen and (max-width:500px){
	.metabox-blog {
    height: 146px;
}
}



@media screen and (max-width:480px){
	 .Cards-blog {
    width: 96%;
 }
	.Card-blog{
	 width: 49%;
	 margin-left: 13px;
	 margin: 0 auto;
	 margin-top: 5px;
	}
	.text-excerpt-blog {
  height: 209px;
 }
}


@media screen and (max-width:439px){
	
	 .Cards-blog {
    width: 96%;
 }
	.Card-blog{
	 width: 100%;
	 /* margin-left: 5px; */
	margin-bottom: 0;
    margin-top: 15px;
	 /* padding: 0px; */
	 position: relative;
	}
	.text-excerpt-blog {
  height: 133px;
    margin-top: 27%;
 }
	.thumbnail-blog img{
		width: 100%;
		height: auto;
	}
}
/****************End  ContentBox-Blog******************************/


/***************Footer content***********************/

#social{
	display:inline-block;
	position:relative;
	float:right;
	font-size: 46px;
}

.fa-facebook-square:hover{
	color:#f68b20;
	
}
.fa-linkedin:hover{
	color:#f68b20;
}
.fa-github-square:hover{
	color:#f68b20;
}
#footerBorder{
    width: 100%;
    padding-bottom: 38px;
    background-color: #e2e2e2;
   position:relative;
	z-index: 10;
    padding-top: 10px;
    padding-bottom: 45px;
    color: #8a8484;
	border-top-style: solid;
    border-width: 1px;
    border-color: white;
}

#footContain{
	    width: 95%;
    margin: 0 auto;
}
/***************Footer content  ENDS***********************/

/***************Post Page *********************************/

.wp-block-image {
    max-width: 100%;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    border-bottom-style: solid;
    border-color: fff;
}
.wp-block-image img{
	height:auto;
}
.excIndent p, .excIndent h2{
	width: 100%;
    margin: 0 auto;
}




.comWrapper {
    width: 89%;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    background-color: #29292C;
    position: relative;
    border-style: none;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    border-top-style: solid;
    border-color: white;
    color: fff;
	
}
	
.comIndent{
	max-width: 887px;
    margin: 0 auto;
}
	
#comment, #submit{
	border-radius: 7px;
	width: 100%;
	}
	
#comments li a {
		text-decoration:none;
		color: #bebebe;
	}
	#comments li a:hover{
		color:rgb(245, 138, 35);
	}
.fn{

   
    padding: 5px;
    position: relative;
  
    border-radius: 5px;
    padding: 5px;
    position: relative;
}
	
 .commentmetadata{
  
    border-radius: 5px;
    position: relative;

    border-color: #272626;
    padding: 5px;
    position: relative;
    margin-top: 12px;
    width: fit-content;
	}
	
	.reply{
	background-color: #555;
    position: relative;
    
    border-color: #272626;
    border-radius: 5px;
    padding: 5px;
    position: relative;
	 width: fit-content;
	}
	
	.logged-in-as{

    position: relative;

    border-color: #272626;
    border-radius: 5px;
    padding: 5px;
    position: relative;
	width: fit-content;
	}
	.logged-in-as a{
		text-decoration:none;
		color: #bebebe;
	}
	.logged-in-as a:hover,.logged-in-as:hover{
		text-decoration:none;
		color: rgb(245, 138, 35);
		Background-color:#555;
	}
	#comment-form  label{
	display:inherit;
}
.ptblock{
	width: 95% !important; 
}
.textforpic {
    max-width:1210px !important;
}
body .textforpic {
    width:auto !important;
}
@media screen and (max-width:1080px){
	.comWrapper {
    width: 96%;
    padding-bottom: 6px;
 }
}
@media screen and (max-width:876px){
		.textforpic {
		max-width: 60%!important;
	}
	.comIndent {
    width: 72%;
 }
	 .comWrapper {
	width: 96%;
	}
}

@media screen and (max-width:603px){
	.textforpic,.textforpic h2,.ptblock,.excIndent p{
		max-width: 70%!important;
	}
	.excIndent h2 {
    width: 75%;
	}
	/** FOR Post image block: 2 column**/
	.image2block, .image2block img {
    width: 100%;
	}

	.wp-block-image .alignleft {
    float: left;
    margin-right: 0em;
	}
   
	
}
@media screen and (max-width:360px){
	.excIndent p{
		max-width:85%;
	}
	.comIndent {
		width: 90%;
	}
	.comWrapper {
		width: 96%;
		}
	#comment{
		width:100%;
	}
	.textforpic,.textforpic h2,.ptblock,.excIndent p{
		max-width:85%!important;
	}
}