/* This two pieces of css code below will make the Vimeo or YouTube Video RESPONSIVE */
/* This code is placed out the the constraints of doing something to css when it is a certain size */
/* So making it independent from the viewpoint */

 .video-responsive{
	 display:none;
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* lg */ 
@media (min-width: 1200px) {
 /* Make Navigation Toggle on Desktop Hover */
 
  .dropdown:hover .dropdown-menu {
      display: block;
      -webkit-animation: fadeInUp 400ms;
      animation: fadeInUp 400ms;
  }

  #portfolio .row {
    margin-left: -10px;
    margin-right: -10px;
  }
 
 .midpagedj {
	 float:left; width:55%; padding-top:15px;
 }
 
 .ryoheiface {
	 text-align:center;
 }
 
  .ryoheiface img{
  width:375px; height:413px;
  }
  
   .ryoheibioimg {
	 text-align:center;
 }
 
  .ryoheibioimg img{
  width:640px; height:220px;
  } 

 .playname { float:left; text-align:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:380px;
 }
 
  .playname span{ color:#ffffff;
  }
 
 .playrole {
	 clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:300px; text-align:left; 
 }
 
  .playrole span { color:#ffffff;
  }
 
 .playplace {
	  clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:300px; text-align:left; 
 }
 
  .playplace span{ color:#ffffff;
  }
 
 
  #dj {
	 width:25%; float:left;
  }

 #dj2 {
	 width:25%; clear:right; float:left; padding-left:10px;
 }
 
    .midpagedj3 {
	  width:700px; margin-left:auto; margin-right:auto; 
  }
  
  .malikbio {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; margin-left:20px;
  }
  
   .malikbio h3 { text-align:left;}
  
   .malikbio img { float:left; padding-right:10px;  }
   
   
     .Christen {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; margin-left:20px;
  }
  
   .Christen h3 { text-align:left;}
  
   .Christen img { float:left; padding-right:10px;  }
   
   
     
  .tonibio {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
  .tonibio h3 { text-align:right;}
    .tonibio p { text-align:right;}
  
   .tonibio img { float:right; margin-left:10px;  }
   
  .stefanie {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
  .stefanie h3 { text-align:right;}
  .stefanie p { text-align:right;}
  
   .stefanie img { float:right; margin-left:10px;  }
   
  
  .events_pg_rt {
	   position:relative; float:left; width:55%; 
   }
   
   .events_pg_lt {
	   position:relative; float:left; width:40%;
   }  
   
	       .define_marg {
	 width:50%;
	
	  margin-bottom:20px;
 }
   

}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
  
 /* Make Navigation Toggle on Desktop Hover */
  .dropdown:hover .dropdown-menu {
      display: block;
      -webkit-animation: fadeInUp 400ms;
      animation: fadeInUp 400ms;
  }

  .navbar-nav > li {
    margin-left: 10px;
  }

  .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }

  .recent-work-wrap .recent-work-inner h3 a {
    font-size: 20px;
  }

  .recent-work-wrap .overlay{
    padding: 15px;
  }

  .services-wrap {
    padding: 40px 10px 40px 30px;
  }

  .feature-wrap h2, 
  .single-services h2 {
    font-size: 18px;
  }

  .feature-wrap h3, 
  .single-services h3{
    font-size: 14px;
  }

  .tab-wrap .media .parrent.pull-left{
    clear: both;
    width: 100%;
  }

  .tab-wrap .media .parrent.media-body{
    clear: both;
  }

  #portfolio .row {
    margin-left: -10px;
    margin-right: -10px;
  }

  .recent-work-wrap .overlay .preview{
    line-height: inherit;
  }

  .team-bar .first-arrow {
    width: 21%;
  }

  .team-bar .second-arrow {
    width: 20%;
  }

  .team-bar .third-arrow {
    width: 21%;
  }

  .team-bar .fourth-arrow {
    width: 20%;
  }

  ul.social_icons li{
    margin-right: 0;
  }
  
   #dj {
	 width:25%; float:left;
  }

 #dj2 {
	 width:25%; clear:right; float:left; padding-left:10px;
 }
 
  .midpagedj {
	 float:left; width:55%; padding-top:15px;
 }
 

 
 .midpagedj3 {
	 width:700px; margin-left:auto; margin-right:auto; 
 }
 
   .malikbio {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
   .malikbio img { float:left; margin-right:10px;  }
   
  
     .Christen {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
   .Christen img { float:left; margin-right:10px;  }
    
.stefanie {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
	 
  }
  
  .stefanie h3 { text-align:right;}
  
  
  
   .stefanie img { float:right; margin-left:10px;  }
   
   
     
  .tonibio {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
	 
  }
  
  .tonibio h3 { text-align:right;}
  
  
  
   .tonibio img { float:right; margin-left:10px;  }
   
 .events_pg_rt {
	   position:relative; float:left; width:55%; 
   }
   
   .events_pg_lt {
	   position:relative; float:left; width:40%;
   }  
   
      
	       .define_marg {
	 width:50%;
	
	  margin-bottom:20px;
 }

   .ryoheiface {
	 text-align:center;
 }
 
  .ryoheiface img{
  width:375px; height:413px;
  } 
  
   .ryoheibioimg {
	 text-align:center;
 }
 
  .ryoheibioimg img{
  width:640px; height:220px;
  } 

 .playname { float:left; text-align:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:380px;
 }
 
  .playname span{ color:#ffffff;
  }
 
 .playrole {
	 clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:280px; text-align:left; 
 }
 
  .playrole span { color:#ffffff;
  }
 
 .playplace {
	  clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:280px; text-align:left; 
 }
 
  .playplace span{ color:#ffffff;
  }
 
 

}


/* sm */
@media (min-width: 768px) and (max-width: 991px) {
  /* Make Navigation Toggle on Desktop Hover */
  .dropdown:hover .dropdown-menu {
      display: block;
      -webkit-animation: fadeInUp 400ms;
      animation: fadeInUp 400ms;
  }

  .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-nav > li {
    margin-left: 0;
  }

  #main-slider .carousel h1 {
    font-size: 25px;
  }

  #main-slider .carousel h2 {
    font-size: 20px;
  }

  .tab-wrap .media .parrent.pull-left, 
  .media.accordion-inner .pull-left{
    clear: both;
    width: 100%;
  }

  .tab-wrap .media .parrent.media-body, 
  .media.accordion-inner .media-body{
    clear: both;
  }

  .services-wrap {
    padding: 40px 0 40px 30px;
  }

  .recent-work-wrap .overlay{
   padding: 15px;
  }

  .recent-work-wrap .recent-work-inner h3 a {
    font-size: 20px;
  }

  .sinlge-skill{
    width: 150px;
    height: 150px;
  } 

  .sinlge-skill p em {
    font-size: 25px;
  }

  .sinlge-skill p {
    font-size: 16px;
  }

  .team-bar .first-one-arrow {
    width: 2%;
  }

  .team-bar .first-arrow {
    width: 18%;
  }

  .team-bar .second-arrow {
    width: 24%;
  }

  .team-bar .third-arrow {
    width: 15%;
  }

  .team-bar .fourth-arrow {
    width: 20%;
  }

  .blog .blog-item .entry-meta > span a{
    font-size: 10px;
  }
   #dj {
	 width:25%; float:left;
  }
  
  

 #dj2 {
	 width:25%; clear:right; float:left; padding-left:10px;
 }
 
  .midpagedj {
	 float:left; width:55%; padding-top:15px; clear:both;
 }
 

 
 
  .midpagedj2 {
	 position:relative; float:left; width:45%; margin-top:15px;
 }
 
  .midpagedj3 {
	  width:700px; margin-left:auto; margin-right:auto; 
  }
  
 
   .malikbio {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
   
   .malikbio img { float:left; margin-right:10px;  }

   .Christen {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
   
   .Christen img { float:left; margin-right:10px;  }   
   
  .stefanie {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
  .stefanie h3 { text-align:right; margin-left:15px;}
  
   .stefanie img { float:right; margin-left:10px;  }
   
     
  .tonibio {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; width:60%; position:relative; float:left; margin-top:20px; clear:both; padding-left:20px;
  }
  
  .tonibio h3 { text-align:right; margin-left:15px;}
  
   .tonibio img { float:right; margin-left:10px;  }

.nbs-flexisel-item img {
    max-width: 80%;
} 

 .events_pg_rt {
	   position:relative; float:left; width:55%; 
   }
   
   .events_pg_lt {
	   position:relative; float:left; width:40%;
   }  
   
       .define_marg {
	 width:60%;
	 margin-right:10px;
	  margin-bottom:20px;
 }
   
    .ryoheiface {
	 text-align:center;
 }
 
  .ryoheiface img{
  width:375px; height:413px;
  }
  
   .ryoheibioimg {
	 text-align:center;
 }
 
  .ryoheibioimg img{
  width:640px; height:220px;
  }  
  
   .playname { float:left; text-align:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:420px;
 }
 
  .playname span{ color:#ffffff;
  }
 
 .playrole {
	 clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:280px; text-align:left; 
 }
 
  .playrole span { color:#ffffff;
  }
 
 .playplace {
	  clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:370px; text-align:left; 
 }
 
  .playplace span{ color:#ffffff;
  }
  
  .playname span::before { content: "Name: ";}
  .playrole span::before { content: "Role: ";}
  
  .playplace span::before { content: "Place: ";}
  .playplace {clear:both; float:left; margin-bottom:15px;}
 
 .hideit {
	 display:none;
 }

 
}

/* xs */
@media (max-width: 767px) {
  .container > .navbar-header, .container > .navbar-collapse{
    margin-left: 0;
  }

  .top-number{
    font-size: 14px;
  }

  input.search-form:hover {
    width: 120px;
  }

  .navbar-nav > li {
    padding-bottom: 0;
  }

  #main-slider .carousel h1 {
    font-size: 25px;
  }

  #main-slider .carousel h2 {
    font-size: 16px;
  }

  .feature-wrap h2, 
  .single-services h2 {
    font-size: 18px;
  }

  .feature-wrap h3, 
  .single-services h3{
    font-size: 14px;
  }


  .media.accordion-inner .pull-left, 
  .media.accordion-inner .media-body{
    clear: both;
  }

  .accordion-inner h4 {
    margin-top: 10px;
  }

  .tab-wrap .media .pull-left{
    clear: both;
    width: 100%;
  }

  .tab-wrap .media .media-body{
    clear: both;
  }

  .nav-tabs > li.active > a:after{
    display: none;
  }

  #footer .col-sm-6{
      text-align:center;
  }
  
   #footer .pull-right{
      float: none !important;
  }

  .sinlge-skill {
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .team .single-profile-top, 
  .team .single-profile-bottom {
    margin-bottom: 30px;
  }

  .clients-area {
    padding: 60px 0;
  }

  .clients-area h1 {
    font-size: 25px;
  }

  .portfolio-item, 
  #recent-works .col-xs-12.col-sm-4.col-md-3{
    padding:0 15px;
  }

  ul.social_icons li{
    margin-right: 0;
  }

  .blog .blog-item .entry-meta{
    margin-bottom: 20px;
  }

  .blog .blog-item .blog-content h3 {
    margin-bottom: 20px;
  }

  .post_reply_comments {
    padding-left: 20px;
  }
    
	 #dj {
	 float:left; margin-left:auto; margin-right:auto;
  }

 #dj2 {
	  clear:right;  padding:20px;
 }
 
 #dj2 img {
	display:block; margin-left:auto; margin-right:auto; width:40%;
 }
 
 
 .midpagedj {
	 float:left; width:100%; padding-top:15px; clear:both;
 }
 
 .midpagedj  img{
	width:100%; 
 }
 
  .midpagedj2 {
	 position:relative; width:100%; margin-top:15px; clear:both; margin:0;
 }
 
   .midpagedj3 {
	  max-width:350px; margin-left:auto; margin-right:auto;
  }
  
    
	 
    .malikbio p {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; float:none; margin-top:20px; clear:both; padding:10px 30px 40px 30px;
  }
  
   .malikbio img { width:170px;  margin:0 auto; display:block; clear:both; }
   
   .malikbio h3 { text-align:center;}
   
       .Christen p {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; 
	  font-size:14px; float:none; margin-top:20px; clear:both; padding:10px 30px 40px 30px;
  }
  
   .Christen img { width:230px;  margin:0 auto; display:block; clear:both; }
   
   .Christen h3 { text-align:center;}
     

    .stefanie p {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; float:none; margin-top:20px; clear:both; padding:10px 30px 40px 30px;
  }
  .stefanie  h3 { text-align:center;}
  
   .stefanie img {  width:182px;  margin:0 auto; display:block; clear:both; }
   
    .tonibio p {
	  font-family:Arial, Helvetica, sans-serif; line-height:22px; font-size:14px; float:none; margin-top:20px; clear:both; padding:10px 30px 40px 30px;
  }
  .tonibio h3 { text-align:center;}
  
   .tonibio img {  width:225px;  margin:0 auto; display:block; clear:both; }

 .mainlogo { width:70%;}   

.nbs-flexisel-item img {
    max-width: 80%;
}

      .define_marg {
	 width:90%;
	 margin-right:10px;
	  margin-bottom:20px;
 }
 
  .ryoheiface {
	 text-align:center;
 }
 
  .ryoheiface img{
  width:375px; height:413px;
  }
  
   .ryoheibioimg {
	 text-align:center;
 }
 
  .ryoheibioimg img{
  width:100%;
  }
  
   .playname { float:left; text-align:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:430px;
 }
 
  .playname span{ color:#ffffff;
  }
 
 .playrole {
	 clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:430px; text-align:left; 
 }
 
  .playrole span { color:#ffffff;
  }
 
 .playplace {
	  clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:430px; text-align:left; 
 }
 
  .playplace span{ color:#ffffff;
  }
 
   .playname span::before { content: "Name: ";}
  .playrole span::before { content: "Role: ";}
   .playrole {clear:both; float:left; margin-bottom:0px;}
  
  .playplace span::before { content: "Place: ";}
  .playplace {clear:both; float:left; margin-bottom:15px;}
 
 .hideit {
	 display:none;
 }
 

}

/* XS Portrait */
@media (max-width: 480px) {

	 #dj {
	 float:left; margin-left:auto; margin-right:auto;
  }

 #dj2 {
	  clear:left; padding:20px;
 }


#dj2 img {
	display:block; margin-left:auto; margin-right:auto;  width:70%;
 }
 
 .midpagedj {
	 float:left; width:100%; padding-top:15px; clear:both; }
	 
	

	 
 .midpagedj2 {
	 position:relative; width:100%; margin-top:15px; clear:both; margin:0;
 }
 
    .midpagedj3 {
	  max-width:350px; margin-left:auto; margin-right:auto; 
  }
 
 .mainlogo { width:70%;}
 
.nbs-flexisel-item img {
    max-width: 80%;
}

       .define_marg {
	 width:90%;
	 margin-right:10px;
	 margin-bottom:20px;
 }
 
  .ryoheiface {
	 text-align:center;
 }
 
  .ryoheiface img{
  width:275px; height:303px;
  }
  
 .ryoheibioimg {
	 text-align:center;
 }
 
  .ryoheibioimg img{
  width:100%;
  }  

   .playname { float:left; text-align:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:320px;
 }
 
  .playname span{ color:#ffffff;
  }
 
 .playrole {
	 clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:320px; text-align:left; 
 }
 
  .playrole span { color:#ffffff;
  }
 
 .playplace {
	  clear:right; float:left;  color:#0C6190;  font-size:1em; font-weight:bold;  width:320px; text-align:left; 
 }
 
  .playplace span{ color:#ffffff;
  }
 
   .playname span::before { content: "Name: ";}
  .playrole span::before { content: "Role: ";}
   .playrole {clear:both; float:left; margin-bottom:0px;}
  
  .playplace span::before { content: "Place: ";}
  .playplace {clear:both; float:left; margin-bottom:15px;}
 
 .hideit {
	 display:none;
 }

 
}