﻿#travel-smart{color:#525252;}
#travel-smart p{font-size:1.2em;}

img, video, object {
    max-width: 100%;
}

.header-wrapper {
z-index: 999 !important;
position: absolute;
top: 2%;
width: 100%;
}
header .social-list {
    text-align: right;
}
.screen-reader {
display: block !important;
left: -9999px !important;
position: absolute !important;
}

p.small-info {
    margin-bottom: 0;
    text-align: right;
    color: #ffffff;
}

.logo-main {
    width: 80px;
    display: block;
    margin: 0 auto;
}

#logo_wrapper_juntas.logo-main{
	width: 180px;
    -webkit-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3);	
}

h1.corp-logo {
    margin: 0;
}

.social-list a img {
    width: 30px;
    transition: 200ms ease-in-out;
}

.social-list a img:hover{width:35px;}

.video-outer-wrapper {
background:#0060a9;
border-bottom: 13px solid #0060a9;
height: 100%;
overflow: hidden;
width: 100%;
}

.video-outer-wrapper .poster{
  width: 100%;
}

.video-outer-wrapper .container{
    height: 100%;
    position: relative;
}

.celular{
  position: absolute;
  transition: all 200ms ease-in-out;
}

  .celular.iphone7{
    bottom: -98px;
    max-width: 300px;
    right: 200px;
    z-index: 2;
  }

  .celular.samsungS7{
    bottom: -90px;
    max-width: 280px;
    right: 10px;
    z-index: 1;
  }

  .container-store p{
    font-size: 1.2em;
  }

  .container-store h1,
  .container-store p{
    color: #ffffff;
    text-shadow: 1px 1px 10px #000000
  }

  .button-store{
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    max-width: 200px;
    transition: all 200ms ease-in-out;
  }

    .button-store:hover{
      opacity: 0.8;
    }

	.button-store.google-play{
		margin-left: 20px;
	}

.section{padding-top:20px;padding-bottom:20px;}
.section-intro{background: rgba(0,96,169,0.08);}
.section-break{border-top:1px solid #cccccc;}

.sec-nav-inner-wrapper{
padding-top:30px;
padding-bottom:40px;
float:none;
margin:0 auto;
}
.stuck .sec-nav-inner-wrapper{padding-top:20px;padding-bottom:20px;float:left;}

.sec-nav-inner-wrapper > ul > li > a{font-size:1.3em;color: #5ab0b3;transition: 200ms ease-in-out;}
.sec-nav-inner-wrapper > ul > li > a:hover, .sec-nav-inner-wrapper > ul > li > a:focus{color: #478f92;}

.icone{
  display: block;
  max-width: 40%;
}

.logo-sticky {
    display: none;
}
.logo-sticky img {
    width: 90px;
    display: block;
    margin: 0 auto;
}
.stuck {
position: fixed;
top: 0;
width: 100%;
display: block;
background: rgba(255,255,255,0.95);
z-index: 100;
box-shadow: 1px 1px 5px lightgrey;
padding-top:20px;
padding-bottom:15px;
}
.stuck .logo-sticky {display: inline-block;}

.highlight{color:#5ab0b3;}
.highlight > a {color:#5ab0b3;}

.cta-button{
background: #5ab0b3;
padding: 10px;
color: #fff;
display: block;
border-radius: 4px;
margin: 20px 0;
transition: 200ms ease-in-out;
text-align: center;
font-size: 1.25em;
width: 80%;
}
.cta-button:hover {background: #478f92;color: #fff;text-decoration: none;}

footer {
background-color: #666666;
color: #ffffff;
padding: 3% 0%;
line-height: 1.2;
}

footer .terms {
display: block;
font-size: 0.8em;
color: #ffffff;
margin: 0;
}

@media screen and (max-width: 760px){
  .section-break h2{font-size:1.8em;}
  .sec-nav-inner-wrapper > ul > li{padding-left:5px;padding-right:5px;}
  .sec-nav-inner-wrapper > ul > li > a{font-size:1em;}
  .cta-button{width:100%;}
}

@media (min-width: 320px){
  .video-outer-wrapper{
    background-image: url(../images/travelsmart/travel-smart-poster.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .video-outer-wrapper .poster{
    display: none;
  }

  .container-store{
    bottom: auto;
    margin-bottom: 20px;
    margin-top: 80px;
    position: relative;
    text-align: center;
    width: 100%;
  }

  .section{
    text-align: center;
  }

  .icone{
    margin: 0 auto;
    max-width: 20%;
  }

	.button-store.google-play{
		margin-left: 0;
		margin-top: 20px;
	}
}

@media (min-width: 768px){
  .video-outer-wrapper{
    background-image: none;
  }

  .video-outer-wrapper .poster{
    display: block;
  }

  .video-outer-wrapper .container{
    width: 100%;
  }

  .container-store{
    bottom: 30px;
    position: absolute;
    text-align: left;
    width: 350px;
  }

  .celular.iphone7{
      max-width: 200px;
      right: 140px;
  }

  .celular.samsungS7{
    max-width: 180px;
  }

  .section{
    text-align: left;
  }
  .icone{
    margin: 0;
  }
	
	.button-store{
		max-width: 165px;
	}
	
	.button-store.google-play{
		margin-left: 20px;
		margin-top: 0;		
	}
}

@media (min-width: 992px){
  .container-store{
    bottom: 100px;
    left: 40px;
    margin-bottom: auto;
    margin-top: auto;
    width: 500px;
  }

  .celular.iphone7{
      bottom: -82px;
      max-width: 250px;
      right: 180px;
  }

    .celular.iphone7:hover{
      bottom: -72px;
    }

  .celular.samsungS7{
    bottom: -74px;
    max-width: 230px;
  }

    .celular.samsungS7:hover{
      bottom: -64px;
    }

  .icone{
    max-width: 30%;
  }
	
	.button-store{
		max-width: 200px;
	}	
}

@media screen and (min-width: 1280px){

  .container {width: 800px;}

  .video-outer-wrapper{
    background-image: url(../images/travelsmart/travel-smart-poster.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    position: relative;
  }

  .video-outer-wrapper .container{
    width: 85%;
  }

  .container-store{
    bottom: 30px;
  }

  .video-outer-wrapper .poster{
    display: none;
  }

  .celular.iphone7{
      max-width: 250px;
  }

  .celular.samsungS7{
    max-width: 230px;
  }

  .icone{
    max-width: 40%;
  }
}

@media screen and (min-width: 1920px){
    .video-outer-wrapper{
      height: 650px;
    }

    .video-outer-wrapper .container{
      width: 60%;
    }

    .celular.iphone7{
        max-width: 300px;
    }

    .celular.samsungS7{
      max-width: 280px;
    }
}
