/* style.css */

body {
	font-size: 100%;
    background-color: #f9f9f9;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	font-size:1.8em;
  font-weight: 300;
}
h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4em;
}
h3 {
	font-family: 'Lora', serif;
	font-size: 1.1em;
}
h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1em;
}
p {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
}

.light {
  font-weight: 100!important;
}

.container {
	width:100%;
}

.top-wrapper {
    height: 100vh;
}
.top-content {
    margin-top: 150px;
}

/*/////////////// Top Styles ///////////////*/

.topTitle {
  background: url('../img/jungle.jpg')
}

.main-title {
  padding:24px;
}

.input-field {
    margin-top: 0.5rem!important;
    margin-bottom: 0.25rem!important;
}

.spacer-50 {
  padding-top: 50px;
}

.ldivider {
  width: 100%;
  padding:10px 0 0 0;
  background: url('../img/leaf-divider.jpg');
}


/*/////////////// Help Box Styles ///////////////*/

.helpHide {
  max-height:0px;
  overflow: hidden;
}



/*/////////////// Error Styles ///////////////*
.error {
	background-color: #440000;
	color: white;
	border-radius: 2px;
    display: inline-block;
} */

 /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) and (max-width: 767px) {
    	.titleSection {
    		width: 100%;
    		position: relative;
    		left: 50%;
    		margin-left: -25%;
    		text-align: center;
    	}

    	.infoCollect {
    		width: 100%;
   	 		position: relative;
    		left: 50%;
    		margin-left: -25%;
    		margin-top: 50px;
    		text-align: right;
    	}
    }



    /*/////////////// Results display styles ///////////////*/

.inline {
  display: inline-block!important;
}


#outputWrapper {
  	display: inline-block;
  	margin: 10px;
}

#output {
  	background: #fff;
	width: 350px;
	height: 175px;
 	border-radius: 10px;
 	text-align: center;
  	padding: 20px;  	
    -webkit-box-shadow: 4px 4px 17px 0 rgba(0,0,0,0.2);
    box-shadow: 4px 4px 17px 0 rgba(0,0,0,0.2);
}

.resultsSection {
  background: #ffffff;
  padding: 50px 0;
}

.resultsDiv {
	text-align: center;
}
#resultsTitle {
	margin-top: 60px;
}

.card.xsmall, .card.small, .card.medium, .card.large {
  position: relative;
}

.card.xsmall .card-image, .card.small .card-image, .card.medium .card-image, .card.large .card-image {
  max-height: 60%;
  overflow: hidden;
}

.card.xsmall .card-image + .card-content, .card.small .card-image + .card-content, .card.medium .card-image + .card-content, .card.large .card-image + .card-content {
  max-height: 40%;
}

.card.xsmall .card-content, .card.small .card-content, .card.medium .card-content, .card.large .card-content {
  max-height: 100%;
  overflow: hidden;
}

.card.xsmall .card-action, .card.small .card-action, .card.medium .card-action, .card.large .card-action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.card.xsmall {
  height: 200px;
}

.result {
  font-size: 2.3rem!important;
  color: #333;
	font-family: 'Poppins', sans-serif;
	margin: 0;
}
.big-result {
  font-size: 5rem!important;
  color: #333;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}
.currency-result {
  left:43px!important;
}

.widgetText {
	color: #000;
	font-family: 'Poppins', sans-serif;   	
}

#helpWrapper {
	text-align: center;
    background-image: linear-gradient( 135deg, #90F7EC30 10%, #32CCBC30 100%);
    padding: 20px;
    max-width: 700px;
    margin: auto;
    border-radius: 10px;
}
#howToClick:hover {
	cursor: pointer;
}
#revPerSes {
	background: #e8e8e8;
    padding: 5px;
}


/* Custom Card Image Size */
.card-image.full-img {
    max-height: 80%!important;
}


/*/////////////// MEDIA QUERIES ///////////////*/

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 380px) {
      p {
        font-size: 1.2em;
      }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    	.titleSection {
    		width: 50%;
    		position: relative;
    		left: 50%;
    		margin-left: -25%;
    		text-align: center;
    	}

    	.infoCollect {
    		width: 350px;
   	 		position: relative;
    		left: 50%;
    		margin-left: -175px;
    		margin-top: 50px;
    		text-align: right;
    	}
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
      p {
        font-size: 0.9em;
      }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }