/*------------------------------------------------*/
/* Basic Setup */
/*------------------------------------------------*/
*{
    margin:0;
    padding: 0%;
    box-sizing: border-box;
}

html,
body{
    background-color: #fff;
    color:#555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

section{
    padding: 100px 0;
    
    
}

.clearfix{zoom: 1}
.clearfix::after{
    content:'.';
    clear: both;
    display:block;
    height:0;
    visibility: hidden;
}

/*------------------------------------------------*/
/* Reusable componants */
/*------------------------------------------------*/


.row{
    max-width: 1140px;
    margin: 0 auto;
}



.box{
    padding: 1%;
}


/*------------Headers Setup----------------------*/

h1,
h2,
h3{
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}



h1{
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;
}


h2{
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin: 30px;
    letter-spacing: 1px;
}

h3{
    font-size: 110%;
    margin-bottom: 15px;
}

h2:after{
    display: block;
    height: 2px;
    background-color: #34495e;
    content: " ";
    width:200px;
    margin: 0 auto;
    margin-top: 30px;
}

/*------------Paragraph Setup----------------------*/

.long-copy{
    line-height: 145%;
    width:70%;
    margin-left:15%

}
.box p{
    font-size: 90%;
    line-height: 145%;
}


/*------------Icons Setup----------------------*/
.icon-big{
    font-size: 350%;
    display: block;
    color:#34495e;
    margin: 0 0 10px 0;
}

.icon-med{
    display: inline-block;
    width: 30px;
    text-align: center;
    color:#34495e;
    font-size: 120%;
    margin-right: 10px;
    
    /* secrects to align text and icons */
    line-height: 120%;
    vertical-align: middle;
    margin-top: -5px;

}

/*------------Links Setup----------------------*/


a:link,
a:active{
    color:#2c3e50;
    text-decoration: none;
    border-bottom: 1px solid #2c3e50;
    transition: border-bottom 0.2s, color 0.2s;

}

a:hover,
a:visited{
    color: #555;
    border-bottom: 1px solid transparent;
}



/*------------Buttons Setup----------------------*/

.btn:link,
.btn:visited,
input[type=submit]{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 7px;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-full:link,
.btn-full:visited,
input[type=submit]{
    background-color: #34495e;
    border: 1px solid #34495e;
    color:#eee;
    margin-right: 15px;
}

.btn-ghost:link,
.btn-ghost:visited
{
    border: 1px solid #2c3e50;
    color: #2c3e50;
}


.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active{
    background-color: #2a67a4;

}

.btn-full:hover,
.btn-full:active{
    border: 1px solid #2c3e50;
    
}

.btn-ghost:hover,
.btn-ghost:active{
    border: 1px solid #2c3e50;
    color: #fff;
}


/*------------------------------------------------*/
/* Header */
/*------------------------------------------------*/


.header{padding: 10px 16px;
    background: #A92E2D;
    color: #f1f1f1;

}

.sticky + .content {
    padding-top: 102px;
  }


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}


/*------------------------------------------------*/
/* Header */
/*------------------------------------------------*/

header{
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)), url(/assets/images/slider.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
}
.hero-text-box{
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-text-box p{
    color:#fff;
    margin: 20px 0;
}


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

.main-nav{
    float:right;
    list-style: none;
    margin-top:20px;
}

.main-nav li{
    display: inline-block;
    margin-left:40px;
}


.main-nav li a:link,
.main-nav li a:visited {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    transition: border-bottom 0.2s;
    border: 0;
}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #fff;
    padding: 6px 0;
}


/*------------------------------------------------*/
/* About */
/*------------------------------------------------*/

.section-about{
    height: 100vh;
}

.section-about .long-copy{
    margin-bottom: 40px;
}


/*------------------------------------------------*/
/* Work */
/*------------------------------------------------*/

.section-port{
    padding: 0 ;
    
}

.work-showcase{
    list-style: none;
    width: 100%;

}

.work-showcase li{
    display: block;
    float:left;
    width:25%;

}

.work-photo{
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.work-photo img{
    opacity: 0.7 ;
    width: 100%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
}

.work-photo img:hover{
    opacity: 1;
    transform: scale(1.03);
}


/*------------------------------------------------*/
/* Steps */
/*------------------------------------------------*/

.section-step {
    background-color: #f4f4f4;
    height: 100vh;
}


.steps-box:first-child{
    text-align: right;
    padding-right: 3%;
    margin-top: 30px;
}

.steps-box:last-child{
    padding-left: 3%;
    margin-top: 70px;
}

.app-screen{
    width:40%
}

.work-step{
    margin-bottom: 50px;
}


.work-step:last-of-type{
    margin-bottom: 80px;
}

.work-step div{
    color: #2c3e50;
    border: 2px solid #2c3e50;
    display: inline-block;
    border-radius: 55%;
    height: 55px;
    width:55px;
    text-align: center;
    padding: 5px;
    float: left;
    font-size: 150%;
    margin-right: 25px;;
}

.btn-app:link,
.btn-app:visited{
    border: 0;
}


.btn-app img{
    height: 70px;
    width: auto;
    margin-right: 10px;

}


/*------------------------------------------------*/
/* Citys */
/*------------------------------------------------*/

.section-citys {
    
    height: 100vh;
}

.box img{
    width:100%;
    height: 175px;
    margin-bottom: 15px;
}

.city-feature{
    margin-bottom: 5px;
}

/*------------------------------------------------*/
/* Test */
/*------------------------------------------------*/

.section-test{
    background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(/assets/images/slider.png);
    background-size: cover;
    color: #fff;
    background-attachment: fixed;
    height: 100vh;
}

blockquote{
    padding: 2%;
    font-style: italic;
    line-height: 145%;
    position: relative;
    margin-top: 40px;
}

cite{
    font-size: 90%;
    margin-top: 25px;
    display: block;

}

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


/* blockquote:after{
    content: "a";
    font-size: 500%;
    position: absolute;
    top:-5px;
    left:-5px; 
}*/


cite img{
    height:50px;
    border-radius: 50%;
    margin-right:10px;
    vertical-align: middle;

}


/*------------------------------------------------*/
/* Plan */
/*------------------------------------------------*/

.section-plans{
    background-color: #f4f4f4;
    height: 100vh;
}

.plan-box{
    background-color: #fff;
    border-radius: 7px;
    width: 90%;
    margin-left: 5%;
    box-shadow: 0 2px 2px #efefef;
}

.plan-box div{
    padding: 15px;
    border-bottom: 1px solid #eee;

}
.plan-box div:first-child{
    background-color: #fcfcfc;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.plan-box div:last-child{
    text-align: center;
    border: 0;
}

.plan-price{
    font-size: 300%;
    margin-bottom: 10px;
    font-weight: 100;
    color: #34495e;

}

.plan-price span{
    font-size: 50%;
    font-weight: 300;
}

.plan-price-meal{
    font-size: 80%;

}

.plan-box ul{
    list-style: none;
}

.plan-box ul li{
    padding: 5px 0;
}



/*------------------------------------------------*/
/* Contact */
/*------------------------------------------------*/

.section-form{
    
    height: 100vh;
}


.contact-form{
    width:60%;
    margin: 0 auto;
}


input[type=text],
input[type=email],
select,
textarea{
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;

}

textarea{
    height: 100px;
}

input[type=checkbox]{
    margin: 10px 5px 10px 0;
}

/* *:focus{outline: none;} */


/*------------------------------------------------*/
/* Footer */
/*------------------------------------------------*/


footer{
    background-color: #2c3e50;
    /* height: 40vh; */
    padding: 50px;
}


.footer-nav{
    list-style: none;
    float:left;
}

.social-icons{
    list-style: none;
    float:right;
}

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

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


.footer-nav li a:link,
.footer-nav li a:visited,
.social-icons li a:link,
.social-iconsli a:visited{
    text-decoration: none;
    border:0;
    color:#999;
    transition: color 0.2s;
}

.footer-nav li a:hover,
.footer-nav li a:active{
    color:#eee;
}

.social-icons li a:link,
.social-icons li a:visited{
    font-size: 180%;
    color:#999;
}

.icon-face,
.icon-twit,
.icon-inst,
.icon-tikt{
    transition: color 0.2s;
}



.icon-face:hover{
    color: #3b5998;

}

.icon-twit:hover{
    color: #00aced;

}

.icon-inst:hover{
    color: #8a3ab9;

}

.icon-tikt:hover{
    color:  #FE2C55;

}


footer p{
    color:#999;
    text-align: center;
    font-size: 90%;
    margin-top: 130px;

}