/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation:portrait) {
    
    #overlay_container{
        margin: 25px 35px 70px 35px ;  
    }

    .main-logo{
        padding-left: 0;
    }


    .footer .rights{
        text-align: center;
    }
    .footer-cont{
        grid-template-columns: 1fr 2fr; 
    }

    .work-sect{ 
        padding: 30px 40px; 
    }

    .work-sect .work-back{
        border-radius: 0px;
    }
    .footer{
        margin-top: 130px; 
        height: 160px; 
    }

    .carousel .carousel-item .item-overlay .overlay-contents { 
        opacity: 1; 
    }
    .carousel .carousel-item .item-overlay{
        background: rgba(0, 0, 0, 0.5); 
        padding: 18px;  
        text-align: center; 
    }
    .carousel .carousel-item .item-overlay .overlay-title{
        font-size: 2.8rem;  
        letter-spacing: .5px;  
        line-height: 45px;
    }
    .carousel .carousel-item .item-overlay .overlay-sub{
        font-size: 1.3rem;
        letter-spacing: .5; 
    }


    .wrapper .steer-icon{
        height: 55px;
        width: 55px;  
    }
    
    .fa-angle-right:before,
    .fa-angle-left:before {
        font-size: 15px;
        line-height: 55px;
    }  

    .dot {
        width: 2000px;  
        max-width: 600%;   
        transform: translate(43vw, 0); 

    }  

    .work-head{
        font-size: 12px;  
        /* text-align: left;  */
    }
    .work-head .icon-row{ 
        /* text-align: left;   */
    }
     
    .profile_container{
        /* position: absolute; */
        top: 9px;
        bottom: auto; 
        order: 1; 
        max-height: fit-content; 
        margin: 0;  
        margin-bottom: 30px; 
        right: -20px;
    }
    .profile_container .simple-button{
        flex-direction: column;
        order: 2;
    }
    .profile_container #profile-show:hover .profile-text p{  
        right: 22px;         
    } 

    .profile_btn img{
        height: 60px; 
    }

    .profile-text{
        height: 30px; 
    }

    .profile-text p{
        position: absolute;
        height: fit-content;
        margin-top: 13px; 
        right: 22px;  
    }
    
    .topleft_menu a:hover {
        transform: none; 
    }

    .profile_btn{
        order: 1; 
    }

    .mail_container{
        max-height: fit-content;
        margin: auto; 
        bottom: 0;
        top: 0;  
        margin-top: 50px; 
        margin-right: 11px;
        /* margin : 0;   */
        order: 2; 
    }


    .mail_container .primary_contact_text p{  
        font-size: 13px; 
        opacity: 0;    
        margin-right: 0; 
    } 

    .dot-post{
        display: none; 
    }
    .dot-pre{
        margin-left: -45em; 
        z-index: 5; 
        display: none; 
    }

    .mail_container a:hover .primary_contact_text p{
        right: 15px !important;   
        opacity: 1;  
    }   

    .mail_container .secondary_contact_text p{
        font-size: 12px;  
    }

    .mail_container a:hover .primary_contact_text p{
        right: 20px;  
        opacity: 1; 
    } 

    .primary_contact_image img{
        height: 30px; 
    }
    .mail_container .secondary_contact_image img{
        height: 35px; 
    }
 
    .personal_info{ 
        min-height: 120px;       
    }
    .personal_info .moto{ 
        line-height: 22px; 
        font-size: 1em;
        width: auto;   
        max-width: 60vw; 
        float: left;   
    }

    .personal_info .name{
        font-size: 1.8em;   
    }

    /* id */
    .card-container .card-info{
        grid-template-columns: 1fr;    
    }
    .card-container .card-group{
        min-width: 100%;
        padding: 10px 10px;    
        /* min-height: 100%;  */ 
    } 
    .card-container .card-modal{
        height: 100%; 
    }
    .skills-container{ 
        grid-template-columns: 1fr 1fr ;  
    }
    .card-container .profile-cont{
        order: 1; 
    }
    .card-container .link-2,
    .card-container .card-ribbon{ 
        top: 40px; 
    }
    .card-container .link-2{
        border: 2px solid hsla(0, 0%, 100%, 0.5); 
    }
    .right-section{ 
        margin-top: 0;
    }
    .card-container .card-ribbon{
        left: -6px;    
        /* margin: auto;  */
        /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%); */
        /* padding-right: 0px;   */
        /* text-align: center; */
    }
    .card-container .card-details{
        order: 2; 
    }
    .skills-container{
        min-height: 100px;  
    }
    .card-container .card-head{
        height: 110px;
        padding-left: 0px;    
    }
    .card-container .card-details{
        text-align: center; 
    }
    .card-icon {
        top: -4px; 
        right: 60px; 
        float: right;  
    }
    .card-container .card-title{
        font-size: 3.5rem; 
    } 
    .card-container .sep{
        text-align: center; 
    }
    .card-container .profile-cont img{
        height: 200px;
        width: 180px; 
        margin-bottom: 25px;  
    } 

    .animation-cont{
        position: absolute; 
        width: 1500px;   
        height: 1500px;        
        /* top: -60vh;  */
        left: 45vw;
        bottom: 380px;             
    }   
}

/* Small Devices Portrait */
@media only screen and (max-height: 600px) and (orientation:landscape){

    #overlay_container{
        margin: 30px 40px 30px 40px;
    }  

    .topleft_menu ul{
        display: grid;
        max-width: 50vw;
        grid-template-columns: repeat(auto-fill, 90px);
    }
    .main-logo{
        padding-left: 0; 
    }

    .personal_info{
        height: 120px;
    }
    .personal_info .name{
        font-size: 1.8em; 
    }
    .icon-row li{
        height: 18px; 
    }
    .personal_info .moto{
        max-width: 300px;  
        font-size: 14px; 
        line-height: 20px; 
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)  {
    .mail_container a:hover .primary_contact_text p{
        right: 20px;
        opacity: 1; 
      } 
      
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)  {
    
    
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1024px) and (orientation : landscape)  {
    
    
    
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (orientation : landscape) {
    
    
    
}
    
/*Custom Queries*/

/* Mobile Landscape */
@media only screen and (min-width: 591px) and (max-width: 1024px) and (max-height: 767px) and (orientation : landscape){
    
    .footer{
        margin-top: 145px;  
    }
}

/* ipad Landscape */
@media only screen and (min-width: 990px) and (max-width: 1024px) 
    and (min-height:768px){
        .footer{
            margin-top: 150px;   
        }
}

/* ipad pro Landscape */
@media only screen and (min-width: 1023px) and (max-width: 1366px) 
    and (min-height:1024px){
        
    
}

/* Portrait */
/* ----------- iPad & iPad Pro ----------- */
@media only screen and (min-width: 768px) and (max-height: 1366px) 
  and (orientation: portrait) {
    .footer{
        margin-top: 150px;   
    }
    
}
/* ----------- iPad Pro only ----------- */
@media only screen and (min-width: 1024px) and (max-height: 1366px) 
    and (orientation: portrait){}

@media only screen and (min-width: 1024px)  {

    .gallery_compact > .carousel-item:nth-child(1):hover {
        transform: translate(8px, 8px)     
    }    
    .gallery_compact > .carousel-item:nth-child(1):hover ~ .carousel-item:nth-child(2){
        transform: translate(4px, 4px)
    }   
    
      

}