/* 
Project Name: Meu Grupo ZAP
Author: Renato Valladão (adaptado)
*/

/******************************************
/* Configuração inicial                   
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

.alignright {
	float: right; 
	padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
	float: left; 
	padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap');

/******************************************
/* Geral                   
/*******************************************/

html, body {
     margin: 0;
     min-height: 100%;
     scroll-behavior: smooth;
}

body {
     text-align: center;
     color: #5800a2;
     background-color:#f6f6f6;
}

#container {
     /* position: absolute; */
     display: block;
     width: 100%;
     margin: 0;
     text-align: center;
}

.header {
     background-color:#5800a2;
}

/******************************************
/* OPENING                   
/*******************************************/

#open {
     margin-top:20px;
}

#gzap-white {
     display: inline-block;
     vertical-align: top;
     width: 200px;
}

#gzap-white-footer {
     display: inline-block;
     vertical-align: top;
     margin-top: 50px;
     margin-bottom:20px;
     width: 147px;
}

#title {
     display: block;
     text-align: center;
     padding: 50px 0 20px 0;
     font-size: 26px;
     font-family:'Nunito Sans', sans-serif;
}


#bodycopy {
     display: block;
     text-align: center;
     margin: 0px auto 50px auto;
     font-size: 18px;
     font-family:'Nunito Sans', sans-serif;
     color:#626A6E;
}

#formcontainer {
     width: 100%;
     margin: 0 auto;
}

input, select, option {
     font-size: 16px;
     font-family: 'Nunito Sans', sans-serif;
     text-align: left;
     color: #626A6E;
     letter-spacing:1px;
     padding: 20px 20px 10px 20px;
     display: inline-block;
     width: 100%;
     margin: 10px auto;
     border: 2px solid #626A6E;
     border-radius: 10px;
     background-color: rgba(0,0,0,0);
}

select, option {
     padding: 15px 20px 15px 20px !important;
}

input:focus, button:focus {
     outline: none;
}

#btndownload {
     font-size: 16px;
     font-family: 'Nunito Sans', sans-serif;
     vertical-align: top;
     margin-top: 15px;
     letter-spacing: 2px;
     text-align: center;
     color: #5800a2;
     display: inline-block;
     height: 44px;
     padding-top: 4px;
     padding-left: 20px;
     padding-right: 20px;
     border: 2px solid #5800a2;
     border-radius: 10px;
     background-color: transparent;
}

a:hover {
     text-decoration:none !important;
}

#mobileinstructions{
     color:black;
     font-family:GothamBlack;
     margin-top:15px;
}

#mobileinstructions p{
     font-family:GothamMedium;
     color:black;
     font-size:12px;
     text-align:left;
     margin:10px 10%;
}

.home-video{
     width:100vw;
     height:50vh;
}


.controls {
     margin-top:50px;
     margin-bottom:50px;
}

.phoneform-outer {
     display:none;
}


/******************************************
/* DETAIL
/*******************************************/

.back-button-container{
     display:flex;
     align-items:center;
     height:20vh;
}

.back-button-container img{
     width:16px;
     height:33px;
}

.detail-grid-item img{
     display:block;
     width:100%;
}

.detail-image-container h1{
     text-align:right;
     font-size:14px;
}

.detail-text-container{
     width:100%;
     background-color:white;
     color:black;
     text-align:left;
     padding:10px 20px;
}

.detail-text-container h1{
     font-family:GothamBlack;
     font-size:22px;
}

.detail-text-container hr{
     width:100%;
     border:2px solid black;
     margin:0 0;
}

.detail-text-container p{
     font-family:GothamLight;
     line-height:20px;
     padding-top:25px;
     letter-spacing:0;
     font-size:14px;
}

.content-row{
     margin-bottom:20px;
}

.detail-video{
     display:block;
     margin:0 auto;
}

.detail-date-container{
     margin:0;
     background-color:white;
     position:absolute;
     padding:10px;
     width:80px;
     height:80px;
}

.detail-date-container h1{
     margin:0;
     color:black;
     font-family:'Nunito Sans';
     font-size:20px;
     text-align:left;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
}

.content-grid-image{
     width:100%;
}

.content-grid-container .row{
     margin-top:20px
}

.content-grid-container a{
     color:black;
}

.content-grid-title{
     margin:0;
     font-size:16px !important;
     letter-spacing:1 !important;
     padding-top:10px;
}

.content-grid-subtitle{
     margin:0;
     font-size:12px !important;
     padding-top:0px !important;
}

.blink{
     animation:blinking 1.2s infinite;
 }

 @keyframes blinking{
     0%{     opacity:1;    }
     49%{    opacity:0; }
     100% { opacity:1 }
 }

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


     input {
          width: 80%;
          font-size:10px;
          padding: 16px 15px 15px 15px;
     }

     #formcontainer{
          display:flex;
          align-items:center;
     }    

     #title{
          font-size:20px;
          /* padding:0px 20px; */
     }

     #bbdowhite{
          height:auto;
          width:15%;
          padding:20px;
          margin: 0
     }

     #go{
          letter-spacing: 0;
          margin: auto 10px;
          height: 40px;
     }

     #bodycopy{
          width: 100%;
          padding: 0;
          font-size: 16px;
          text-align: center;
     }

     #subhead-container{
          width:80%;
     }

     .detail-date-container{
          display:none;
     }
}

/******************************************
/* RESULT                   
/*******************************************/

#result {
     background-color:#ffffff;
     padding-top:60px;
     padding-bottom:60px;
     font-family:'Nunito Sans', sans-serif;
}

#formheader {
     display: block;
     text-align: left;
     font-family: 'Nunito Sans', sans-serif;
     color:#00A591;
     font-size: 30px;
}

span {
     font-family: 'Nunito Sans', sans-serif;
     color: #ef4023;
}

#congrats {
     color:#5800a2;
}

#disclaimer {
     font-family: 'Open Sans', sans-serif;
     margin: 24px 100px 24px 0;
     letter-spacing: 1px;
     color:#626A6E;
}

#thanks {
     margin: 10px auto 30px auto;
     letter-spacing: 1px;
     font-family: 'Open Sans', sans-serif;
     font-weight: bold;
     color: #626A6E;
}

#instructions {
     display: block;
     margin: 100px auto;
     padding-top: 40px;
     width: 100%;
}

#signature {
     letter-spacing: 1px;
}

#mobile-container{
     height:100vh;
}

#mobilesplash {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
}


.field-wrapper{
     position: relative;
 }

 .field-wrapper input, 
 .field-wrapper select {
     border: 1px solid #626A6E;
     border-radius: 4px;
     width: 100%;
     background:none;
 }

 .field-wrapper .field-placeholder{
     font-size: 16px;
     position: absolute;
     bottom: 24px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     color: #80868b;
     left: 8px;
     padding: 0 8px;
     -webkit-transition: transform 150ms cubic-bezier(0.5,0.6,1,0.2);
     transition: transform 150ms cubic-bezier(0.5,0.6,1,0.2);
     z-index: 1;
     text-align: left;
     width: 100%;
 }        

 .field-wrapper .field-placeholder span{
     padding: 0px 8px;
     color: #626A6E;
 }

 .field-wrapper input:not([disabled]):focus~.field-placeholder
 {
     color:#1A73E8;
 }
 .field-wrapper input:not([disabled]):focus~.field-placeholder,
 .field-wrapper.hasValue input:not([disabled])~.field-placeholder
 {
     -webkit-transform: scale(.75) translateY(-16px) translateX(-60px);
     transform: scale(.75) translateY(-16px) translateX(-60px);

 }


 .browser-mockup {
     border-top: 2em solid rgba(230, 230, 230, 0.7);
     box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
     position: relative;
     border-radius: 3px 3px 0 0;
     background-color:#ffffff;
     padding:30px;
   }
   .browser-mockup:before {
     display: block;
     position: absolute;
     content: '';
     top: -1.25em;
     left: 1em;
     width: 0.5em;
     height: 0.5em;
     border-radius: 50%;
     background-color: #f44;
     box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
   }
   .browser-mockup > * {
     display: block;
   }
   .browser-mockup {
     margin-left: 2em;
   }