body {
    font-family: Gotham, Open Sans, Helvetica, sans-serif;

}

#myBtn {
  display: none;
  position: fixed;
  bottom: 75px;
  right: 50px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #1844E8;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius:10px;
}

#myBtn:hover {
  background-color: #5F32D2;
}

a {
    text-decoration: none;
}

#resumeTitle{
    font-family:GothamBook;
    font-size:40px;
}


.portfolio nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.portfolio nav li {
    float: left;
    font-family: GothamBook;
}

.portfolio nav li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    color: black;
}

.active_menu a, .active_menu a:active, .active_menu a:visited {
    /*background-color: #815EDC;*/
    color: black;
    font-weight: bold;

}

.portfolio nav li a:hover {
    /*background-color: #A19DF4;*/
    color: #5F32D2 ;


}

.grid{
    /*background-color:red;*/
}

.logo-box img{
   float:left;
   /*width:60px;*/
   height:60px;
   margin-left: -10px;

}

.logo-box{
   margin-top:-40px;
   position:fixed;
   background-color:white;
   z-index:100;
   max-width:1280px;
}

.logo-box2 img{
   float:left;
   width:200px;
   height:200px;
   margin-top:50px;
   margin-left:50px;
   margin-right:100px;


}

.header{
    margin-top:40px;
}

.andy-header img{ margin:0; }
.nini-header h1{
    margin-top: 100px;
    margin-bottom: -10px;
    font-size: 3.3em;
}

.nini-header p{
    font-size: 1.5em;
}

.nini-header  a{
    font-size: 1.5em;
    font-family: GothamBook;
    color:#034AFF;
}

.nini-header  a:hover{
    font-size: 1.5em;
    font-family: GothamBook;
    color:#1E1E7A;
}

.nini-title p {
    font-size: 1.5em;
    margin-bottom:-5px;
    font-weight:600;
    color:#55555;

}


#projects .intro {
    margin-top: 50px;
}

#port_nav {
    padding-top: 80px;
}

.nav-link{
    margin-top:15px;
    text-align:right;


}

.lr img{
    background: url(../img/bpp.png);
    background-position:center;
    background-size:cover;
    /*width:50px;
    height:50px;*/
    width:250px;
    padding-left:100px;
    margin-left:100px;
    float:left;
    
    /*background-color:red;*/   
}

.lr img:hover{
    background: url(../img/ppp.png);
    background-position:center;
    background-size:cover;
    width:250px;
    padding-left:100px;
    margin-left:100px;
    float: left;

}

.lr2 img{
    background: url(../img/bnp.png);
    background-position:center;
    background-size:cover;
    /*width:50px;
    height:50px;*/
    width:250px;
    padding-right:100px;
    margin-right:100px;
    float:right;
    
    /*background-color:red;*/   
}

.lr2 img:hover{
    background: url(../img/pnp.png);
    background-position:center;
    background-size:cover;
    width:250px;
    padding-right:100px;
    margin-right:100px;
    float:right;

}

/*.home img{
    float:right;
    width:50px;
    height:50px;
     
     background-color:red;
     } */

     .only-show-on-mobile {
        display: none;
    }

    .home {
        background: url(../img/home.svg);
        background-position: center;
        background-size: cover;
        width: 60px;
        height: 35px;
        float: right;
    }

    .home:hover{
        background: url(../img/home-v.svg);
        background-position:center;
        background-size:cover;
        width:60px;
        height:35px;
        float: right;
    }


    .b-box{
        background-color:white;
        padding-top:40px;
        padding-bottom:64px;
    }




    .nav-link a{
        padding-left:30px;
        color:black;
        text-decoration:none;
        font-size:22px;
    }

    .nav-link a:hover{
        padding-left:30px;
        color:black;
        text-decoration:none;
        font-size:22px;
        color:#5F32D2;
    }


    .active-link{
        color:#5F32D2 !important;
        font-weight:bold;
    }

    .intro{
        margin-top:100px;
        text-align:center;
    }

/*.ff-gotham{
    font-family: GothamBook;
    font-weight: 400;
    }*/

.grid .intro {    /*
    padding-top: 40px;
    padding-bottom: 40px;*/
    background-image: url("../img/welcome3.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top !important;
    overflow: visible;
    height: calc(100vh - 200px);
}

.middle_center{
    /*position: absolute;*/
    top: 50%;

    transform: translate(0,-50%);
}



.intro h1{
    font-size:60px;
    text-transform: uppercase;
    font-weight:100;
    line-height:1.3em;

}

.intro-about  h1{
    font-size:30px;
    text-transform: uppercase;
    font-weight:100;
    line-height:1.3em;
    margin-top:30px;
    text-align:center;
    margin-bottom: -16px;
    
}

.intro-surf h1{
    margin-top:30px;
}

.intro-airbnb h1{
    margin-top:20px;
    margin-bottom:10px;
    margin-left:80px;
    float:left;
    margin-left:1px;
}



.intro-Ally h1{
   margin-left:80px;
   float:left;
   margin-top:50px;
   margin-bottom:50px;


}

.c12 h1{
    margin-left: 35px;
    margin-top: 50px;

}

.c12 h2{
    margin-left: 35px;
    margin-top: -10px;
}

.c12 h3{
    margin-left: 35px;
    margin-top: -30px;
    margin-bottom: 40px;
}


.c12 img{
    margin-bottom:15px;
}

.c8 h1{
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.c8 h2{
    margin-left: 0px;
    margin-top: -10px;
}
.c8 h3{
    margin-left: 0px;
    margin-top: 11px;
    margin-bottom:-3px;

}

.c8 h4{
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom:5px;
    
}

.c8 .gtw h4{
    margin-left: 35px;
    margin-top: -10px;
    margin-bottom:20px;
    color:#1F2688;
}




.c8 p{
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 20px;

}

.c8 img{
    margin-left:0px;
    margin-bottom: 60px;
    width:150%;

}



.intro-Manta h1{
   margin-left:0px;
   float:left;
   margin-top:-40px;
   margin-bottom:0px;


}

.intro-Manta h4{
   margin-left:1px;
   float:left;
   margin-top:20px;
   margin-bottom:0px;


}

.picture img{

    margin-top:30px;


}




.intro-sc h1{
    font-size:46px;
    text-transform: uppercase;
    font-weight:100;
    line-height:1.3em;
    float:left;
    /*margin-top:80px;*/
}

.intro-sketch h1{
    font-size:31px;
}



.intro-sc h2, .intro-eds h2 {
    font-size:20px;
    margin-top:33px;
    color:black;
    float:right;
    margin-bottom:60px;
    
}

.intro-surf h2{
    font-size:20px;
    margin-top:2px;
    color:black;
    float:right;
    margin-bottom:60px;
    float: left;
}



.intro-airbnb h4{

    margin-top:2px;
    color:black;
    margin-left:1px;
    margin-bottom:10px;
    float: left;

    
}


.intro-bset h2{
    font-size:20px;
    margin-top: 30px;
    margin-bottom: 79px;

}
.intro-sketch h2{
    font-size: 20px;
    margin-top: 30px;
    color: black;
    float: right;
}

.intro-bp h2{
    font-size: 20px;
    margin-top: 30px;
    margin-bottom:50px;

}
.sketch{
    margin-top:70px;
}
.line1, .line3{

    background-color:#F2F4F4;
    padding-bottom: 44px;
    padding-top: 44px;

}


.line1 img{
    margin-top:9px;
    width:60%;
}

.sketch, .line2{
    margin-bottom:6px;
}

.pscreens1 {
    padding-top:14px;
    
}

.cp, .s2, .c4{
/*    margin-top:5px;
    margin-bottom:10px;
    */
}

.c4 img{
    margin-left:-2px;
}

.c4 h3{
    margin-bottom: 5px;
}

.c4 h4{
    margin-top:5px;
    margin-bottom: 0px;

}

.c4 p{
    margin-top:0px;
}

/* change text color half way through the line 
     color: blue;
 }
 */


 .video {
    position: relative;
    padding-bottom: 60%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-bottom:50px;
    margin-right:20px;

}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}



}
.line2{
    background-color:white;
    margin-top:-15px;

}

.surf-sp img{
    margin-bottom:50px;

}



.edsline2{
   background-color:#F2F4F4;
   padding-bottom: 40px;

}

.process p{
    /*margin:20px;*/
    /*margin-left:100px;*/
    margin-right:150px;
    margin-bottom:50px;
    margin-top:-30px;
    /*text-align:center;*/
}

.process h1{



    font-size: 38px;
    /*margin-left: 80px;*/
    margin-bottom: 47px;

    /*text-align:center;*/
}


.process h2{

    /*margin-left:100px;*/
    margin-right:150px;
    font-size: 25pt;
    margin-top:30px;

    /*text-align:center;*/
}

.process h3{

    /*margin-left:100px;*/
    font-size: 17pt;
}

.process h4{
    margin:20px;
    margin-left:100px;
    margin-right:150px;
    margin-bottom:15px;
    margin-top:10px;
    
    /*text-align:center;*/
}

.process img{
    margin-top:-20px;
}

.process2 img{
    margin-top:50px;
    margin-bottom:50px;
}

.PVideo h1{

    margin-top:80px;
    font-size:50px;

    /*text-align:center;*/
}

.PVideo h2{

    margin-left:100px;
    margin-right:150px;
    /*text-align:center;*/
}

.website h2{

    margin-left:100px;
    margin-right:150px;
    /*text-align:center;*/
}



.line4 img{
    /*width:80%;*/

}

.edsline4{
    background-color:#F2F4F4;
    padding-bottom: 40px;

}

.line6 img{
    width:100%;

}
.thumb-container img {
    width:100%; 
    /*margin-top:37px;*/
}

.thumb-container .c6 {
    /*width:100%;*/
    margin-top:12px;
    margin-bottom:12px;
}

.Adaa img{
    width:30%;

    padding-top: 30px;
    padding-left:100px;

}

#main-wrapper{
    margin-bottom: 100px;
}

#footer-wrapper{

    height:50px;
    position: fixed;
    left: 0;
    bottom: 0px;
    width:100%;
    background-color:#5F32D2;
    color: white;

}

#footer-wrapper img{
    width:40px;
    height: 40px;
    float:left;
    /*margin-top:90px;*/
}



#footer-wrapper .c6 a{
    /*margin-top:90px;*/
    text-decoration: none;
    color:white;
    padding:20px;
    font-family: GothamBook;
}

#footer-wrapper .c6 a:hover{
    /*margin-top:90px;*/
    text-decoration: none;
    color:black;
}

#footer-wrapper p{
    margin-top: 8px;
} 

#footer-wrapper .grid {

    padding-top: 5px;

    left: 0;
    bottom: -20px;
    width:100%;
    background-color:#5F32D2;
    color: white;
    margin-top:0px;
}

.social {
    background: url(../img/be-w.png);
    background-position:center;
    background-size:cover;
    width:38px;
    height:38px;
    float: left;
}

.social2 {
    background: url(../img/in-w.png);
    background-position:center;
    background-size:cover;
    width:38px;
    height:38px;
    float: left;
}

.social3 {
    background: url(../img/dribbb-w.png);
    background-position:center;
    background-size:cover;
    width:38px;
    height:38px;
    float: left;
}

.social4 {
    background: url(../img/v-w.png);
    background-position:center;
    background-size:cover;
    width:38px;
    height:38px;
    float: left;
}


.social:hover{
    background: url(../img/be-h.png);
    background-position:center;
    background-size:cover;
    width:38px;
    height:38px;
    float: left;
}

.social2:hover{
  background: url(../img/in-h.png);
  background-position:center;
  background-size:cover;
  width:38px;
  height:38px;
  float: left;
}

.social3:hover{
  background: url(../img/dribbb-h.png);
  background-position:center;
  background-size:cover;
  width:38px;
  height:38px;
  float: left;
}

.social4:hover{
  background: url(../img/v-h.png);
  background-position:center;
  background-size:cover;
  width:38px;
  height:38px;
  float: left;
}

.socialmedia {
    margin-top: ;
}

  .resume{
    margin-top:20px;
    

    background: url(../img/re-black.png);
    background-position:center;
    background-size:cover;
    width:200px;
    height:60px;
    /*margin-left: auto;*/
    margin-right:auto;
}

.resume:hover{
    margin-top:20px;
    background: url(../img/re-v.png);
    background-position:center;
    background-size:cover;
    width:200px;
    height:60px;
    /*margin-left:auto;*/
    margin-right:auto;
}



.SurfinWebsite{
    margin-top:40px;
    background: url(../img/sw-black.png);
    background-position:center;
    background-size:cover;
    width:186px;
    height:60px;
    margin-left: auto;
    margin-right:auto;

}

.SurfinWebsite:hover{
    margin-top:40px;
    background: url(../img/sw-v.png);
    background-position:center;
    background-size:cover;
    width:186px;
    height:60px;
    margin-left:auto;
    margin-right:auto;
}

.WhackPlayGame{
    margin-top:40px;
    background: url(../img/play-b.png);
    background-position:center;
    background-size:cover;
    width:186px;
    height:60px;
    margin-left: auto;
    margin-right:auto;

}

.WhackPlayGame:hover{
    margin-top:40px;
    background: url(../img/play-v.png);
    background-position:center;
    background-size:cover;
    width:186px;
    height:60px;
    margin-left:auto;
    margin-right:auto;
}



/*
.casestudy{
    margin-top:20px;
    

    background: url(../img/case-w.png);
    background-position:center;
    background-size:cover;
    width:160px;
    height:60px;
    margin-left: auto;
    margin-right:auto;

}

.casestudy:hover{
    margin-top:20px;
    background: url(../img/case-m.png);
    background-position:center;
    background-size:cover;
    width:160px;
    height:60px;
    margin-left:auto;
    margin-right:auto;
} 

*/ 

.CaseStudy a{
    color: white;
    font-size:20px;
    border: 2px solid black;
    padding: 10px;
    background-color:black;

}



.CaseStudy a:hover{
    color: White;
    font-size:20px;
    border: 2px solid #815EDC;
    padding: 10px;
    background-color:#815EDC;


}




.CaseStudy {
    /*margin: 0 auto;*/
    text-align:center;
}



.Resume a{
    color: white;
    font-size:20px;
    border: 2px solid black;
    padding: 15px;
    background-color:black;

}

.Resume a:hover{
    color: White;
    font-size:20px;
    border: 2px solid #815EDC;
    padding: 15px;
    background-color:#815EDC;


}




.Resume {

    margin-top: 30px;
    margin-bottom: 10px;

}





.right {
    text-align: right;
    font-family: GothamBook;
}




.thumbnail {
    height: 100%;
    margin: 0 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top:0;
    opacity: 0;
    background-color: #5F32D2;
    transition: opacity 0.5s ease;
}

.thumbnail:hover {
    opacity: 0.93;
    transition: opacity 0.5s ease;
}

.thumb-content {
    text-align: center;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
}

.thumb-content h2{
    color:white;
    font-family: GothamBook;
    font-size:30px;


}

.thumb-content h3{
    color:white;
    font-family: GothamBook;
    font-size:22px;
}

.thumb-content h5{
    color:white;
    font-family: GothamBook;
    font-size:20px;
    margin-right: 20px;
    margin-left: 20px;
    
}

.myself p{
    margin-top:20px;
    margin:50px;
    margin-left: 13px;
    font-family:GothamBook;
    font-size:20px;
    /*text-align:center;*/

}



.gmail{
    margin-top:20px;
    /*text-align:center;
    color: #815EDC;*/
    font-family:GothamBook;
    font-size:20px;
}

.mvp h2{
    margin-left:0px;
    margin-top: 30px;
    margin-left: 220px;

}

.mvp p{
    font-size:20px;
    margin-left: 220px;
}

.rl h2{
    margin-left:0px;
    margin-top: 50px;
    margin-left:220px;
}

.rl p{
    font-size:20px;
    margin-left:220px;
    margin-right:220px;
}


.center{
    font-size:20px;
    margin-top:60px;
    margin-left:220px;
    margin-right:220px;
    
}

.row .row{
    width: auto;
    margin:-8px -4px;
}


.c8 h5{
    margin-left:0px;
}

.c8 h4{
    margin-top:0px;
}


@media  (max-width: 992px) and (min-width:768px){


    .only-show-on-mobile {
        display: none;
    }

    .nini-header h1{
        margin-top: 50px;
        margin-bottom: -10px;
        font-size: 2.2em;
    }

    .nini-header p{
        font-size: 1em;

    }

    .nini-header  a{
        font-size: 1em;
        font-family: GothamBook;
        color:#034AFF;
    }

    .nini-header a:hover{
        font-size: 15em;
        font-family: GothamBook;
        color:#1E1E7A;
    }


    .nini-title p {
        font-size: 1em;
        margin-bottom:5px;

    }



    .intro{
        margin-top:100px;

    }


    .intro-print h1{
        font-size:24px;
        margin-bottom: -10px;
    }

    .intro-print h2{
        font-size:17px;
    }
    .intro h1{
        font-size:50px;
    }

    .intro-sc h1{
        font-size:36px;
    }

    .intro-sketch h1{
        font-size:24px;f
    }

    .intro-surf h1{
        margin-top:20px;
        margin-bottom:10px;
        font-size:24px;
    }

    .intro-surf h2{
        margin-top:2px;
        margin-bottom:20px;
        font-size:17px;
    }

    .surf-sp h1{
        font-size:24px;
    }

    .intro-about h1 {
        font-size:23px;
        margin-top: 26px;
        margin-bottom: 9px;
    }
    .best-h1{
        font-size:33px;
    }

    .center{
        margin-top:30px;
        margin-left:160px;
        margin-right:160px;
    }

    .mvp h2{
        margin-left:0px;
        margin-top: 30px;
        margin-left: 160px;

    }

    .mvp p{
        font-size:20px;
        margin-left: 160px;
    }

    .mvp img{
        margin-left:160px;
    }

    .rl h2{
       margin-left:160px;
   }

   .rl p{
       margin-left:160px;
       margin-right:160px;
   }

   .intro-airbnb h1{
    margin-top:-20px;
    margin-bottom:10px;
    margin-left:20px;
    float:left;
}

.intro-airbnb h4{

    margin-top:2px;
    color:black;
    margin-left:20px;
    margin-bottom:20px;
    float: left;

    
}
.intro-sc h2{
    font-size:17px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.intro-sketch h2{
    font-size: 17px;
    margin-top: 18px;
}
.line4 img {
    width: 90%;
    /*margin-bottom: -32px;*/
    margin-bottom: 20px;
}

.process h1{


    margin-left:50px;
    margin-right:40px;
    /*text-align:center;*/
    font-size:30px;
    margin-bottom:20px;
    margin-top: 5px;

    font-size: 31px;
    margin-left: 50px;
    margin-bottom: 20px;
}




.process h2{

    margin-left:40px;
    margin-right:40px;
    /*text-align:center;*/
    font-size:25px;
    margin-bottom:10px;
    margin-top: 5px;
}

.process p{

    margin-left:40px;
    margin-right:40px;
    /*text-align:center;*/
    font-size:17px;
    margin-bottom:40px;
    margin-top: 5px;
}

.process img{
    margin-top:-18px;

}

.process2 img{
    margin-top:50px;
    margin-bottom:50px;

}



.PVideo h2{
    font-size:25px;
    margin-left:40px;
    margin-right:150px;
    /*text-align:center;*/
}

.website h2{
    font-size:25px;
    margin-left:40px;
    margin-right:150px;
    /*text-align:center;*/
}


.fts-h1 {
    font-size: 36px;
}

.intro-fts h2{

    font-size: 17px;
    margin-top: 31px;
}

.intro-bset h2{
    font-size:17px;
    margin-top: 30px;
}
.intro-bp h2 { 
    font-size: 17px;
    margin-top: 30px;
}

.nav-link a{
    font-size:20px;
    
}

.nav-link a:hover{
    padding-left:30px;
    color:black;
    text-decoration:none;
    font-size:20px;
    color:#5F32D2;
}

.active-link{
    color:#5F32D2 !important;
    font-weight:bold;
}

.thumb-content h2{
    font-size:28px;
}

.thumb-content h3{
    font-size:20px;
}

.thumb-content h5{

    font-size:18px;
    
}

.c8 h5{

}

.myself p {

    margin: 49px;
    margin-top: 20px;
    margin-left: 14px;
    font-family: GothamBook;
    font-size: 17px;
    
}

#footer-wrapper .grid {
    background-color: #5F32D2;
    padding-top: 7px;
}


}

/*@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px){
    /* Media Query info for Mobile*/  



    .process h1{

        margin-top: 5px;

        font-size: 22px;
        margin-left: 33px;
        margin-bottom: 15px
    }





    .process h2{

        margin-left:40px;
        margin-right:40px;
        /*text-align:center;*/
        font-size:20px;
        margin-bottom:10px;
        margin-top: 5px;
    }


    .process p{

        margin-left:40px;
        margin-right:40px;
        /*text-align:center;*/
        font-size:14px;
        margin-bottom:40px;
        margin-top: 10px;
    }

    .process img{
        margin-top:-16px;

    }

    .process2 img{
        margin-top:20px;
        margin-bottom:20px;

    }




    .PVideo h2{
        font-size:20px;
        margin-left:40px;
        margin-right:150px;
        /*text-align:center;*/
    }


    .website h2{
        font-size:20px;
        margin-left:40px;
        margin-right:150px;
        /*text-align:center;*/
    }



    .nav-link a{

        font-size:18px;

    }

    .nav-link a:hover{
        padding-left:30px;
        color:black;
        text-decoration:none;
        font-size:18px;
        color:#815EDC;

    }

    .active-link{
        color:#815EDC !important;
        font-weight:bold;
    }

    .nav-link {
        margin-top: 20px;

    }


    .active {
      background-color: #04AA6D;
      color: white;
  }

  .myself p{
    margin-top:30px;
    margin:35px;
    margin-left: 13px;
    /*text-align:center;*/
}

.c8 img{
    margin-left: 0px;
    margin-top:20px;

}

.c8 h5{
    margin-left:0px;
}

.intro-usb {

}


#footer-wrapper {
    margin-top: 0px;
    position: fixed;
    left: 0;
    /*bottom: -7px;*/
    width: 100%;
    background-color:#5F32D2;
    color: white;
}

#footer-wrapper p {

    font-size: small;
    /*margin-top: -2px;*/
}

.right {
    text-align: center;
}
.thumb-content h2{
    font-size:28px;
}

.thumb-content h3{
    font-size:12px;
}

.thumb-content h5{

    font-size:20px;
    
}
.picture{
    margin-top:20px;
}

/* Staycation */
.surf-intro h2{
    margin-top:100px;
}


/* Flip the switch */
.fts-h1 {
    font-size: 20px;

}


.intro-fts h2 {
    font-size: 14px;
    margin-top: -8px;
    margin-bottom: 10px;
}

/* best */
.best-h1{
    font-size:20px;
}

.intro-bset h2 {
    font-size: 14px;
    margin-top: -14px;
    margin-bottom:-17px;
}
.line5 img{
    margin-top:40px;
}
.intro-bp h1 { 
    font-size: 20px;
}
.intro-bp h2 { 
    font-size: 14px;
    margin-top: -20px;
    margin-bottom:41px;
}

.intro-sketch h2 {
    font-size: 14px;
    margin-top: -4px;
    margin-bottom: -50px;
}

.line2 img {
    margin-top: -10px;
    /*width: 100%;*/
}

.intro-about h1 {
    font-size: 18px;
    text-transform: uppercase;
    /* font-weight: 100; */
    line-height: 1.3em;
    margin-top: 8px;
    margin-bottom: -50px;
    text-align: center;
}

.myself p {
    margin-top: 20px;
    margin: 47px;
    font-size: 14px;
    margin-left: 13px;
}

.home {
    background: url(../img/home.svg);
    background-position: center;
    background-size: cover;
    width: 40px;
    height: 50px;
    line-height:20px;
    float: right;
}

.home:hover{
    background: url(../img/home-v.svg);
    background-position:center;
    background-size:cover;
    width:40px;
    height:50px;
    line-height:20px;
    float: right;
}

#footer-wrapper .grid {
    background-color: #5F32D2;
    /*padding-top: 140px;*/

}

.b-box {
    margin-bottom: 40px !important;
}
.surf-sp img{
    margin-bottom:20px;
}

#resumeBack{
    font-family:GothamBook;
    font-size:40px;
    padding-top:20px;
    color:red;
}
.grid .intro {    /*
    padding-top: 40px;
    padding-bottom: 40px;*/
    background-image: url("../img/welcome3.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top !important;
    overflow: visible;
    height: calc(50vh - 80px);
}



.port_item {display: none;}
.active { display: block; }


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

    .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{margin-bottom:0px}
}


        .video {
            position: relative;
            padding-bottom: 100%; /* 16:9 */
            padding-top: 25px;
            height: 0;
            margin-bottom:50px;

        }

        .video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }



        .only-show-on-mobile {
            display: inherit;
        }

        .hide-on-mobile {
            display:none;

        }


        .logo-box{
            paddingtop:30px;
        }

        .logo-box img {
            /* float: left; */
            width: 50px;
            height: 50px;
        }
        .intro {
            margin-top: 80px;
        }

        .intro h1 {
            font-size: 33px;


            text-transform: uppercase;
            font-weight: 100;
            line-height: 1.3em;
            margin-top: -31px;
            margin-bottom: 9px;
        }


        .intro-sc  h1{
            font-size:20px;
        }

        .intro-surf  h1{
            font-size:20px;
            margin-top:5px;
            margin-bottom:0px;

        }



        .intro-print h1{
            font-size:20px;
            margin-bottom:-15px;
        }
        .intro-print h2{
            font-size:14px;

        }

        .surf-sp h1{
            font-size:20px;
        }



        .intro-about h1 {
            font-size:18px;
            margin-top: 9px;
        }


        .c8 h1{
            font-size: 24px;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
        }



        .gamil{
            font-size:15px;
            /*margin-bottom: 20px;*/

        }

        .intro-sketch h1 {
            font-size: 19px;
        }

        .intro-airbnb h1{
            margin-top:5px;
            margin-bottom:10px;
            margin-left:20px;
            float:left;
        }

        .intro-airbnb h4{

            margin-top:-20px;
            color:black;
            margin-left:20px;
            margin-bottom:20px;
            float: left;


        }


        .intro-sc h2{
            font-size: 14px;
            margin-top: -8px;
            margin-bottom: 24px;
        }

        .intro-surf h2{
            font-size:14px;
            margin-bottom:20px;
        }


        .center{
            margin-top:30px;
            margin-left:5px;
            margin-right:10px;
        }

        .mvp h2{
            margin-left:0px;
            margin-top: 30px;
            margin-left: 5px;

        }

        .mvp p{
            font-size:20px;
            margin-left: 5px;
        }

        .mvp img{
            margin-left: 5px;
        }

        .rl h2{
           margin-left:5px;
       }

       .rl p{
           margin-left:5px;
       }

       .line1 img {
        margin-top: 9px;
        width: 87%;
    }