/* Small devices (landscape phones, 576px and up)
*/
@media screen and (max-device-width:1079px){ 
    
.mobile-logo{
    width: 80vw;
    padding: 1em 3em;
    }

.pd-4{
    margin: 1em 0;
}
    
    #menuToggle
{
  display: block;
  position: absolute;
  padding-left:.5rem;
  top: 1.5em;
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}




#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;


  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #2e0070;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 100vw;
  left:-2%;
  padding:0;
  
   
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu .purple-nav{
    padding: .5rem 0;
    color:#5200C8;
    font-size:1.5rem;
    font-weight:800;
    overflow:hidden;

}

#menu .purple-nav:hover{
    display:block;
    color:#fff;
    background:#cc0088;
    font-size:1.5rem;
    font-weight:800;

}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

    .bands{
        transform: rotate(10deg); /* Equal to rotateZ(45deg) */
        position:absolute;
        display:flex;
        top:10%;
        z-index: -1;
        left:-80%;
        width:200%;
        height:35em;
        background-size:cover;
        background-image:url(../images/bands.svg);
        overflow:hidden;
    }
    
    
.rocketjohn{
    background-size:cover;
    background-image:url(../images/rocket_anim.svg);
    position:absolute;
    margin-top: 50%;
    z-index: -1;
    left:-10%;
    Width:120%;
    height:30em;
    }
    
    .turquoise-nr{
        background: #0E76A8;
        font-size:1.5rem;
        padding: .5em;
         color:#fff;
        border-bottom-left-radius: 0px;  
    }
    .turquoise-nr:active, .turquoise-nr:hover {
        background: #084461;
        
    
        color: #fff;
      }
    
    #menu .black-nr:active, #menu .black-nr:hover {
        background: #000;
     
        color: #fff;
      }    
    
    #menu .black-nr{
        font-size:1.5rem;
        
        padding: .5em;
        color:#fff;
    background: #2e0070 ;
       border-bottom-right-radius: 0px;
        
    }
.row{ 
    margin-left: 0; 
    margin-right:0;
}

.tojo-mobile .offset{
    position:relative;
    background-color:#fff;
    width:100%;
top: 70px;
}
    .mobile-nav-top {
        width: 100%;
        background: #fff;
        height: 70px;
        z-index:2;
        position: fixed;
        
        top: 0px;
    }

    

 /* Add a black background color to the top navigation */
.tojo-mobile{
 background-color:#fff;

    
   
}
  .mobile-nav .icon{
      color:#5200C8;
      font-size:2rem;
  }
  .mobile-nav ul{
      margin: 0;
      padding: 0;
  }
  /* Style the links inside the navigation bar */


  .nav-btn a{
    color:#fff;
    display:block;
    padding: .5rem .5rem;
    }
  



  
  


#wrap{
    width:100%;
    
}

#navbar-tojo{
  
    background:#fff;
    
    
    }

.nav-btn {   
    color: #fff;

  }

#nav-wrap *{
display:none;   
}

.hellojohn {
    width:95%;
position:relative;
border-radius:25px;
margin: 1rem .5em;
}
.row h2, .row h3,.row h4, .row h1, .row p{
    padding-left:.5em;
    padding-right:.5em;
}
}



@media screen and (min-device-width: 1080px){
.mobile-nav-top{
    display:none;
}

.hellojohn {
    width:95%;
position:relative;
border-radius:25px;
margin: 1.5em 2em 1.5em 1em;
}
    #wrap{
        width:80%;
        position:relative;
        float:right;
    }
    #nav-wrap{
    
        width: 18%;
        margin: 5% 1%;
        
        position: fixed;
    }
    
    nav .row{
        padding-left: .5em;
        padding-right:.5em;
    }
    
    
    .bands{
        transform: rotate(5deg); /* Equal to rotateZ(45deg) */
        position:absolute;
        display:flex;
        top:-2%;
        z-index: -1;
        left:-75%;
        width:150%;
        height:65em;
        background-size:cover;
        background-image:url(../images/bands.svg);
        overflow:hidden;
    }
    
    .jt-logo{
        position:absolute;
        margin-top: 36%;
        
        z-index: -1;
        right:8%;
        Width:20%;
        height:30em;
        background-size:contain;
        background-repeat:no-repeat;
        background-image:url(../images/jt.svg);
    }
    .brand{
        padding:10% 5%;
        display:inline-block;
        width:90%;
    }
    
    .menu-tojo{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
     }
    .logo-tojo{
    display:block;
    position:relative;
    
    }
    
    
    .rocketjohn{
    background-size:cover;
    background-image:url(../images/rocket_anim.svg);
    position:absolute;
    margin-top: 10%;
    z-index: -1;
    left:-10%;
    Width:100%;
    height:50em;
    }
    
    
    nav li {
    font-size:1rem;
    }
    .nav-btn a{
    color:#fff;
    display:block;
    padding: .5rem .5rem;
    }
    
    
    
     .purple-nav a{
         font-size: 1.2rem;
         display:block;
         color:#5200C8;
         font-weight:700;
         padding: .5rem .5rem;
     }
    }






@media screen and (min-device-width: 1280px){
    pd-4{
        margin: 0;
    }
    .mobile-nav{
        display:none;
    }
    #wrap{
        width:80%;
        position:relative;
        float:right;
    }
    #nav-wrap{
    
        width: 15%;
        margin: 5% 1%;
        
        position: fixed;
    }
    
    nav .row{
        padding-left: .5em;
        padding-right:.5em;
    }
    
    
    .bands{
        transform: rotate(5deg); /* Equal to rotateZ(45deg) */
        position:absolute;
        display:flex;
        top:-2%;
        z-index: -1;
        left:-95%;
       
       width:200%;
        height:65em;
        background-size:cover;
        background-image:url(../images/bands.svg);
        overflow:hidden;
    }
    
    .jt-logo{
        position:absolute;
        margin-top: 36%;
        
        z-index: -1;
        right:8%;
        Width:20%;
        height:30em;
        background-size:contain;
        background-repeat:no-repeat;
        background-image:url(../images/jt.svg);
    }
    .brand{
        padding:10% 5%;
        display:inline-block;
        width:90%;
    }
    
    .menu-tojo{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
     }
    .logo-tojo{
    display:block;
    position:relative;
    
    }
    
    
    .rocketjohn{
    background-size:cover;
    background-image:url(../images/rocket_anim.svg);
    position:absolute;
    margin-top: 10%;
    z-index: -1;
    left:-10%;
    Width:100%;
    height:50em;
    }
    
    
    nav li {
    font-size:1rem;
    }
    .nav-btn a{
    color:#fff;
    display:block;
    padding: .5rem .5rem;
    }
    
    
    
     .purple-nav a{
         font-size: 1.2rem;
         display:block;
         color:#5200C8;
         font-weight:700;
         padding: .5rem .5rem;
     }
    }













/*Large devices (desktops, 1080px and up)*/
@media (min-device-width: 1920px) {

#wrap{
    width:80%;
    position:relative;
    float:right;
}
#nav-wrap{

    width: 15%;
    margin: 5% 2.5%;
    
    position: fixed;
}


.bands{
    transform: rotate(5deg); /* Equal to rotateZ(45deg) */
    position:absolute;
    display:flex;
    margin-top: 5%;
    z-index: -1;
    left:-30%;
    Width:150%;
    height:55em;
    background-size:cover;
    background-image:url(../images/bands.svg);
    overflow:hidden;
}

.jt-logo{
    position:absolute;
    margin-top: 15%;
    
    z-index: 0;
    right:12%;
    Width:30%;
    height:40em;
    background-size:contain;
    background-repeat:no-repeat;
    background-image:url(../images/jt.svg);
}
.brand{
    padding:10% 5%;
    display:inline-block;
    width:90%;
}

.menu-tojo{
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
 }
.logo-tojo{
display:block;
position:relative;

}


.rocketjohn{
background-size:cover;
background-image:url(../images/rocket_anim.svg);
position:absolute;
margin-top: 10%;
z-index: -1;
left:-10%;
Width:120%;
height:40em;
}


nav li {
font-size:1rem;
}
.nav-btn a{
color:#fff;
display:block;
padding: .5rem 1.5rem;
}



 .purple-nav a{
     font-size: 1.2rem;
     display:block;
     color:#5200C8;
     font-weight:700;
     padding: 1rem .5rem;
 }
}











/*ARE YOU USING A RETINA MAC? ME TOO!(large desktops, 2560px and up)*/
@media (min-width: 2160px) { 
    
    .jt-logo{
    position:absolute;
    margin-top: 15%;
    
    z-index: 0;
    Width:30%;
    height:50em;
    right:12%;
    background-size:cover;
    background-image:url(../images/jt.svg);
}

.bands{
    transform: rotate(5deg); /* Equal to rotateZ(45deg) */
    position:absolute;
    display:flex;
    margin-top: 5%;
    z-index: -1;
    left:-30%;
    Width:150%;
    height:75em;
    background-size:cover;
    background-image:url(../images/bands.svg);
    overflow:hidden;
}
    .brand{
        padding:10% 5%;
        display:inline-block;
        width:90%;
    }
    
    .menu-tojo{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
     }
.logo-tojo{
    display:block;
    position:relative;
 
}


#wrap{
    width:80%;
    position:relative;
    float:right;
}


.rocketjohn{
    background-size:cover;
    background-image:url(../images/rocket_anim.svg);
    position:absolute;
    margin-top: 10%;
    z-index: -1;
    left:-8%;
    Width:100%;
    height:65em;
}

#nav-wrap{
    width: 15%;
    margin: 5% 2.5%;
    
    position: fixed;
}



nav .row {
    padding-left:.5rem;
    padding-right:.5rem;
    margin-top:1rem;
}

nav li {
    font-size:1.2rem;
}
.nav-btn a{
color:#fff;
    display:block;
    padding: .5rem 1.5rem;
}
  
 
     .purple-nav a{
         font-size: 1.5rem;
         display:block;
         color:#5200C8;
         font-weight:700;
         padding: 1rem 1.5rem;
     }

     


}




#navbar-tojo{
    border-radius: 25px;
    background:#fff;
    
    
    }
.turquoise{
    background: #0E76A8;
    border-bottom-left-radius: 25px;  
}

.black a{
    
    width:100%;
}

.black{
   background: #2e0070 ;
   border-bottom-right-radius: 25px;
    
}
.nav-btn {   
    color: #fff;

  }
nav .col-xs-6{
    padding-left: 0rem;
    padding-right:0rem;
}
.turquoise:active, .turquoise:hover {
    background: #084461;

    color: #fff;
  }

.black:active, .black:hover {
    background: #000;
 
    color: #fff;
  }    
 .purple-nav, .nav-btn{
         padding: 0;
         display: inline-block;
        width:100%;
    
     }
.purple-nav a:hover, .purple-nav{
         color:#fff;
     }
     

     .purple-nav:hover{
         background-color:#cc0088;

     }




html, *{
    font-family: 'Poppins', sans-serif!Important;
}

body{
    background: #000;
    font-size:16px;
    color:#fff;
    overflow-x:hidden;
    margin:0;
    
}

nav{
    border:none;
    

}
ul{
    list-style: none;
}


.filters-content{
        
        margin: 0 auto;
    }

    .services_area{padding-bottom:50px}
    
    .service_item{
        padding: 1.5em;
        min-height: 20em;
        text-align:center;
        background:#2e0070;
        -webkit-transition:all 0.4s ease 0s;
        -moz-transition:all 0.4s ease 0s;
        -o-transition:all 0.4s ease 0s;transition:
        all 0.4s ease 0s; 
        border-radius: 25px;
    margin: 0 1em;}

      
.service_item p{
    margin: 1em 0 0 0;
text-align: left}

    .service_item:hover{
        background:#5200C8;
        color:#fff;}


        .portfolio_area .filters ul{margin-bottom:20px}
        .filters ul li{
        display:inline-block;
        margin-right:40px;
        font-size:1.2em;
        font-weight:400;
        text-transform:uppercase;
        color:#FFF;
        cursor:pointer;
        -webkit-transition:all 0.4s ease 0s;-moz-transition:all 0.4s ease 0s;-o-transition:all 0.4s ease 0s;transition:all 0.4s ease 0s}
        .portfolio_area .filters ul li:hover,.portfolio_area .filters ul li.active
        {color:#cc0088}

        .service_item h4{
         
            font-weight:700;
            font-style: italic;
        }

.service_item:hover,.service_item:hover p,.service_item:hover .primary_btn2{color:#ffffff}.service_item:hover .primary_btn2:before{background:#ffffff}

.single_portfolio{position:relative;margin: 1.5em;}


.single_portfolio .overlay{-webkit-transition:all 0.4s ease 0s;-moz-transition:all 0.4s ease 0s;-o-transition:all 0.4s ease 0s;transition:all 0.4s ease 0s}
.single_portfolio .short_info{position:absolute;bottom:3em;color:#ffffff;opacity:0;visibility:hidden;-webkit-transition:all 0.4s ease 0s;-moz-transition:all 0.4s ease 0s;-o-transition:all 0.4s ease 0s;transition:all 0.4s ease 0s}
.single_portfolio .short_info h4{text-transform:capitalize;font-size:20px;font-weight:500;margin-bottom:5px}
.single_portfolio .short_info h4 a{color:#ffffff}
.single_portfolio .short_info p{margin-bottom:0px}
.single_portfolio:hover .overlay{top:20px;left:20px;background:#cc0088; 
border-radius: 25px;}.single_portfolio:hover .short_info{bottom:24px;left:60px;opacity:1;visibility:visible}
.portfolio_details_inner .row{margin-bottom:35px}

.main-title{
    padding: 1em 0 0 0;
}

#frontpage{
    height: 100vh;
}










.service-img{
   height:7em;
   
}

       
          

.subtitle-logo{
    text-transform: uppercase;
    font-weight:200;
    font-size:1em;
    text-align:center;
}
.collapse{
    margin: 0;
    padding: 0;
    position:relative;
    width:100%;
   
}



#thugpro-header{
    background:#000;
    color: #fff;
}
.fluid-padding{
    padding: 5% 15%;
}

.section-title{
    padding: 0 15%;
    position: relative;
    top: -3em;
    margin-bottom: 0;
}


.image-item{
    max-width:100%;
    border-radius:25px;
}
.grid-sizer{
    max-width:20%;
}


.submenu{
    padding: 3px 0;
}



.bg-tpro{
    background-image: url(../images/banner.jpg);
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-size: cover;
    background-position-x:center;
    top: -3em;
    position:absolute;
    z-index: -1;
}
.btn-english{
    border-radius:25px;
    font-size:1.5rem;
    margin: 1em 2em;
    height:3em;
    padding:.5em 1.5em;
    background:#cc0088;
    text-align:center;
}

.btn-align a{
    color: #fff;
    text-decoration:none;
}
.btn-align{
    margin: 0 auto;
    padding: 2em 0;
}
.btn-francais{
  border-radius:25px;
    font-size:1.5rem;
    margin: 1em 2em;
    height:3em;
    padding:.5em 1.5em;
    background:#5200C8;
    text-align:center;
}
#landing-page{
    padding: 10% 15%;
}

#landing-page p, #landing-page h1{
    text-align:center;
}

    .jtlogo-2{
        height: 30vh;
        margin: 0 auto;
    }
      


      .overlay {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .img-fluid{
        border-radius: 25px;
    }

    #about-me{
        min-height: 100vh;
    }



          
     nav a{
         text-decoration: none;;
     }