/* Big tablet to 1200px (width smaller than the pixel row */

@media only screen and (max-width:1200px){
    body
    {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }

    .main-text-box{
        width:100%;
        padding-top:0;
        padding-bottom:0;
        padding-left:12%;
        padding-right:8%;
    }
    .main-text-box-about{
        width:100%;
        padding-top:0;
        padding-bottom:0;
        padding-left:2%;
        padding-right:8%;
    }

    .row{
        padding-top:0;
        padding-bottom:0;
        padding-left:15%;
        padding-right:8%;
    }


#begin{

    margin-left:46%;
  
}
.section-quiz{
    height:auto; 
}


}

@media only screen and (max-width:1030px){
    header {
        background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(img/phonehome.svg);
    }

 body
    {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }

    .main-text-box{
        width:100%;
        padding-top:0;
        padding-bottom:0;
        padding-left:16%;
        padding-right:8%;
    }
    .main-text-box-about{
        width:100%;
        padding-top:0;
        padding-bottom:0;
        padding-left:2%;
        padding-right:8%;
    }

    .row{
        padding-top:0;
        padding-bottom:0;
        padding-left:18%;
        padding-right:8%;
    }

.section-quiz{
    height:auto;
}
#begin{

    margin-left:44%;
}
h4{
    margin-left:-10%;
}
h3{
    margin-left:-1.5%;

}
.long-copy4{
    text-align:center;
  
}
.section-testimonials{
    height:auto; 
}

.section-testimonials .row{
margin-left:-6%;
}

.section-what{
    height:auto; 
}
.section-what .long-copy{
    margin-left:5%;  
}
#back{
    margin-left:38%;
}
#ninteyhundred img,
#eigthynintey img,
#seventyeighty img,
#sixtyseventy img,
#fiftysixty img,
#fourtyfifty img,
#thirtyfourty img,
#twentyfivethirty img,
#fivetwentyfive img,
#zerofive img{
   
    margin-left:-110%;
    width:350px;
    height:400px;
    
}
.long-copy2{
    text-align:center;
    width:90%;
    margin-left:-35%;
}
.ptname{
    margin-left:-130%;
    
}

#retakebutton{
    margin-left:45%;
}

.section-personal{
    overflow-x: hidden; 
    height:360vh;
}
#hookahimg{
    margin-left:2%;
}
.long-copy3{
    margin-left:-2%;

}
.section-about{
    background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), url(img/ipadabout4.svg);
    overflow:hidden;
    height:100vh;
    background-color:#151F2B;

}

.section-aboutme .long-copy{
    text-align:center;
    line-height:145%;
    font-weight:400;
    font-size:110%;
    width:100%;
    margin-left:-10%;
    margin-top:-10px;
    padding-top:2%;
    color:#1b2736;

}

.section-aboutme{

    height:auto;
    overflow:hidden;
}

.section-contact{
    background-image: url(img/ipadcontact4.svg);
    background-size:cover;
    height:100vh;
    background-color:#151F2B;

}
.container{
    width:500px;
    float:right;
    margin-right:8%;
    margin-top:250px;

}
}
/* Small tablet to big tablets 768-1023px */

@media only screen and (max-width:1000px){
    .btn-full:link,
    .btn-full:visited{
        margin-right:10px;
        margin-top:10px;
    }

    h2{
        word-spacing:3px;
    }

header {
    background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(img/phonehomenew.svg);
}

    body
    {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }

    h1 {
        margin:0;
        color:#fff;
        font-size:200%;
        letter-spacing: 1px;
        word-spacing: 2px;
      
    }

    .main-nav{
        float:right;
        list-style:none;
        margin-top:55px;
        font-size:80%;
    }
    .row{
        padding-top:0;
        padding-bottom:0;
        padding-left:15%;
        padding-right:8%;
    }

.section-quiz{
    height:auto;
    width:auto;

}
#begin{

    margin-left:42%;
}

.questions{
    padding:11px 15px;
    margin:auto;
}
h4{
    margin-left:-10%;
}
h3{
    margin-left:-1.5%;

}
.long-copy4{
    text-align:center;
  
}
.section-testimonials{
    height:auto; 
}

.section-testimonials .row{
margin-left:-6%;
}

.section-what{
    height:auto; 
}
.section-what .long-copy{
    margin-left:5%;  
}
#back{
    margin-left:38%;
}
#ninteyhundred img,
#eigthynintey img,
#seventyeighty img,
#sixtyseventy img,
#fiftysixty img,
#fourtyfifty img,
#thirtyfourty img,
#twentyfivethirty img,
#fivetwentyfive img,
#zerofive img{
   
    margin-left:-200%;
    margin-top: 30%;
    width:300px;
    height:300px;
    
}
.long-copy2{
    text-align:center;
    width:100%;
    margin-left:-35%;
    font-size:80%;
    padding-left:2%;

}
.ptname{
    margin-left:-210%;
    padding-left:2%;
    
}

#retakebutton{
    margin-left:35%;
}

.section-personal{
    overflow-x: hidden; 
    height:360vh;
}
#hookahimg{
    margin-left:-10%;
    width:100%;
    height:100%;
}
.long-copy3{
    margin-left:-2%;
    font-size:100%;

}
.ptnamepage{
    font-size:120%;
    margin-top:30%;
    margin-left:-75%;


}
.section-about{
    background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), url(img/ipadabout4.svg);
    overflow:hidden;
    height:100vh;
    background-color:#151F2B;

}

.section-aboutme .long-copy{
    text-align:center;
    line-height:145%;
    font-weight:400;
    font-size:110%;
    width:100%;
    margin-left:-10%;
    margin-top:-10px;
    padding-top:2%;
    color:#1b2736;

}

.section-aboutme{

    height:auto;
    overflow:hidden;
}

.section-contact{
    background-image: none;
    background-size:cover;
    height:108vh;
    background-color:#151F2B;

}
.container{
    width:500px;
    float:right;
    margin-right:15%;
    margin-top:100px;

}
}

@media only screen and (max-width:767px){

    header {
        background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(img/phonehomenew.svg);
        background-size: 50%;
        background-position:center;
        height:100vh;
        background-attachment: fixed;
    }
    
    body
    {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }

    body{font-size:16px;}
    section{padding:30px 0;}

    .row{
        padding:0 4%;
    }
    .col{ 
        width:100%;
        margin: 0 0 4% 0;
    }

    .main-nav{display:none;} 
    .mobile-nav-icon{
        display: inline-block;
    }

    .main-nav{
        float:left;
        margin-top:35px;
        margin-left:25px;

    }

   .main-nav li{
        display:block;

    }

   .main-nav li a:link,
    .main-nav li a:visited{
        display:block;
        border:0;
        padding:10px 0;
        font-size:100%;
        padding: 16px 0;
        color:#50C878;
        background-color:#151F2B;
        width: 150%;
        text-align:center;
    }




    .logo{
        height:80px;
        width:auto;
        float:left;
        margin-left:auto;
        margin-top:10px;
    
    
    }

    h1{font-size:180%;}
    h2{font-size:100%;}

    .btn:link,
    .btn:visited{
      
        padding: 8px 20px;
      
        border-radius:200px;
     
    }

    .section-quiz{
        height:auto;
        width:auto;
        /* padding-left:100%; */

    }


    .long-copy4{
        text-align:center;
        line-height:175%;
        font-weight:600;
        width:100%;
        margin-left:auto;
        padding-top:2%;
        color:#1b2736
    
    }
    #begin{

        margin-left:33%;
        padding: 10px 25px;

    }

    input[type='radio']:checked:before{
        width: 11px;
        height: 11px;
        border-radius: 10px;
        top: -24px;
        left: -2px;
        position: relative;
        background-color: #151F2B;
        content: '';
        display: inline-block;
        visibility: hidden;
     
    }
    
    input[type='radio']:checked:after {
        width: 8.7px;
        height: 8.7px;
        border-radius: 100px;
        top: -13px;
        left: .05px;
        position: relative;
        background-color: #50C878;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #151F2B;
        opacity:500%;
    }


    .questions{
        text-align:justify;
        padding:11px 15px;
        /* margin:auto; */
        margin-left: -10px;
        margin-bottom:10px;
        border-radius:500px;
        text-decoration:none;
        color:#151F2B;
        border:2px solid #151F2B;
        font-weight:400;
        font-size:60%;
        transition: background-color 0.2s, color 0.2s;
        /* position:relative; */
    
    }

    .row-q p{
       width:300px;
        margin-left:auto;
    }


    #back{
        margin-left:17%;
        padding: 8px 25px;

    }
    #next{
        padding: 8px 25px;
    }

    #result{
        font-size:130%;
     margin-right:auto;
    }

    #ninteyhundred img,
    #eigthynintey img,
    #seventyeighty img,
    #sixtyseventy img,
    #fiftysixty img,
    #fourtyfifty img,
    #thirtyfourty img,
    #twentyfivethirty img,
    #fivetwentyfive img,
    #zerofive img{
        
        margin-left:auto;
        margin-top: 10%;
        width:250px;
        height:250px;
        
    }

    .long-copy2{
        text-align:center;
        line-height:130%;
        font-weight:400;
        font-size:100%;
        width:350%;
        padding-top:2%;
        color:#1b2736;
        margin-left:-50%;  

    }

    .ptname{
        text-align:center;
        font-weight:700;
        color:#1b2736;
        margin-top:15px;
        margin-bottom:20px;
        margin-left:-50%;
        /* margin-left:-50%; */

    }
  

    #retakebutton{


        margin-left:30%;
        margin-top:-20px;
        margin-bottom:0px;
        padding: 8px 15px;

        

    }
    h5{
        font-size:150%;
        word-spacing:2px;
        text-align:center;
        margin-bottom:30px;
        margin-top:30px;
        margin-left:5%;
        letter-spacing:1px;
        color:#fff;

    
    }
    blockquote{
        padding: 5%;
        padding-left:10%;
        font-style:italic;
        text-align: center;
        line-height:140%;
        position:relative;
        margin-top:20px;

    }

    blockquote:before{
        content:"\201C";
        font-size:300%;
        display:block;
        position:absolute;
        top:-5px;
        left:50px;
    }

    .section-testimonials{
        height:auto;
    }

        .section-what{
            text-align: center;
            width:100%;
            margin-left:3%;   
            height: auto;
        }
        h4{
            text-align: center;
            font-size: 130%;
            margin-left:-5%;  
            


        }
        .steps-box:first-child{

            text-align:center;
        
        
        }


    .ptnamepage{
        font-size:100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top:35px;

    }
    .section-personal{
        overflow-x: hidden; 
        height:auto;
    }

    #hookahimg{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width:70%;
        height:70%;
    }

  
    .long-copy3{
        margin-left:7%;
        font-size:100%;

    }


    .section-about{
        background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), url(img/phoneabout3.svg);
        height: 100vh;
        overflow:hidden;
        background:cover;

    }

    h6 {
        margin-top:-230px;
        margin-left:5%;
        margin-right:0;
        font-size:270%;
        letter-spacing: 1px;
        word-spacing: 2px;
    
    }

    h4{
        margin-top:-15px;
    }

    .section-aboutme .long-copy{
        text-align:center;
        line-height:145%;
        font-weight:400;
        font-size:110%;
        width:100%;
        /* margin-left:-10%; */
        margin-top:-10px;
        padding-top:2%;
        color:#1b2736;
        margin-left:0;
        margin-right:0;

    }

    .section-aboutme{
        height:auto;
        overflow:hidden;
   
    }




.tiledBackground {
    /* background-repeat: no-repeat; */
    /* background-size:100%; */
    /* width: 10%;
    height:10%;
text-align:center;
    margin-top:100px;
    overflow:hidden; */

    width:auto;
    height:auto;
    margin-top:100px;
    margin-left:auto;

  }
  .section-contact{
    /* background-image: url(img/ipadcontact4.svg); */
    background-size:cover;
    height:80vh;
    background-color:#151F2B;

}
.container{
    width:300px;
    float:right;
    margin-right:10%;
    margin-top:50px;

}

footer{
    background-color:rgb(29, 29, 29);
    padding:50px;
    font-size:70%;
    padding-bottom:60px;
}


.footer-nav li,
.social-links li{
    display:inline-block;
    margin-right:20px;
    margin-bottom:10px;
}

.footer-nav li :last-child,
.social-links li :last-child{
    margin-right:0;

}


.social-links li a:link,
.social-links li a:visited{
    font-size:150%;
}

footer p{
    color:#888;
    text-align:center;
    margin-left:-90%;
    margin-right:auto;
    font-size:90%;
    margin-top:20px;
}


}



@media only screen and (max-width:418px){

    header {
        background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(img/phonehomenew.svg);
        background-size: 50%;
        background-attachment: fixed;


    }

    h6 {
        margin-top:-180px;
        margin-left:5%;
        margin-right:0;
        font-size:270%;
        letter-spacing: 1px;
        word-spacing: 2px;
    
    }

    .section-about{
    background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)), url(img/iphoneplusabout.svg);
    }
    .section-contact{
        /* background-image: url(img/ipadcontact4.svg); */
        background-size:cover;
        height:90vh;
        background-color:#151F2B;
    
    }

    .ptnamepage{
        font-size:100%;
        margin-top:7%;
        margin-left:-40%;


    }

    footer p{
        color:#888;
        text-align:center;
        margin-left:-70%;
        margin-right:auto;
        font-size:90%;
        margin-top:20px;
    }

    #result{
        font-size:130%;
     margin-left:-60%;
    }

    #ninteyhundred img,
    #eigthynintey img,
    #seventyeighty img,
    #sixtyseventy img,
    #fiftysixty img,
    #fourtyfifty img,
    #thirtyfourty img,
    #twentyfivethirty img,
    #fivetwentyfive img,
    #zerofive img 
    {
        
        margin-left:-10%;
        margin-top: 10%;
        width:250px;
        height:250px;
        
    }

 

    .long-copy2{
        text-align:center;
        width:100%;
        padding-top:2%;
        color:#1b2736;
        margin-top:-10px;
        margin-left:-10%;
       


    }

    .ptname{
        text-align:center;
        font-weight:700;
        color:#1b2736;
        margin-top:15px;
        margin-bottom:20px;
        margin-left:-100%;
        /* margin-left:-50%; */

    }
    #retakebutton{
        margin-left:27.5%;
    }
    
 
    .row-q p{
        width:300px;
         padding-left:-2%;
     }
      
    
.tiledBackground {
    /* background-repeat: no-repeat; */
    /* background-size:100%; */
    width:auto;
    height:auto;
    margin-top:100px;
    margin-left:auto;
    /* overflow:hidden; */

  
  }
  .section-aboutme{

    background-color:#fff;
    background-size:cover;
    height:auto;
    overflow: hidden;

    
}

 
}


@media only screen and (max-width:385px){
  
    #result{
     margin-left:-80%;
    }
    .ptname{
        text-align:center;
        font-weight:700;
        color:#1b2736;
        margin-top:15px;
        margin-bottom:20px;
        margin-left:-113%;
        /* margin-left:-50%; */

    }
    .ptnamepage{
        font-size:100%;
        display: block;
        margin-left:-50%;
        margin-top:35px;

    }
    .section-aboutme{

        background-color:#fff;
        background-size:cover;
        height:auto;
        overflow: hidden;
    
        
    }
   
  
}

/* Small Phones 0-480px */

@media only screen and (max-width:374px){

    header {
        background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(img/phonehomenew.svg);
        background-size: 50%;
        background-attachment: fixed;

    }

    section{padding:25px 0;}
    .contact-form{width:100%;}


.questions{
    padding:11px 15px;
    margin:auto;
}
.ptnamepage{
    font-size:100%;
    display: block;
    margin:center;
    margin-top:35px;

}


}