/*STYLE GUIDE*/
/*
red:
blue:#047ff9
yellow/orange:#fec93d
green:#9fd733
*/

/*RESOLUTION GUIDE*/
/*
DESKTOP    960+

TABLET
(Landscape) 1024x768
(Portrait)  768x1024

SMARTPHONES 
(Landscape) 480x320
(Portrait)  320x480
*/

/* BASIC STYLES */
body                        {font-family: 'Roboto', sans-serif;font-size:1em;line-height:2em;background: black repeat-x;margin:0;}
main                        {width:960px;margin:0 auto;padding:0 10px;}

/* NAVIGATION */
figure                      {width:340px;height:180px;background:url('../images/ap_logo.svg') no-repeat; background-position: 40px 75px; float:left;display:block;margin:0 0 0 -10px; transform: scale(1.2);}
.mobilenav                  {display: none;}
nav                         {width:550px;height:180px;float:left;text-align:right; margin-left: 60px}
nav ul                      {list-style-type:none;margin-top:95px;}
nav ul li                   {display:inline;font-size:0.9em;margin-right:10px;}
nav ul li a                 {color:lightgray;text-decoration:none;letter-spacing:-0.01em; font-weight: bold;}
nav ul li a:hover           {color:#f3be33;}
#quote                      {color:#f3be33; font-weight: bold; font-size: 1.1em;}

/*JBAR / SLIDESHOW */
.jbar                       {width:100%;height:400px;background:#222;clear:both;}

/* CONTENT */
.content                    {width: 920px; height: auto; margin: 0 auto; padding: 0 20px 20px 20px;}
.content h3, .map h3        {text-align: center; color: white;}
.content p                  {font-size: 1em; color: white;}
.content .p2                {font-size: 1.1em; color: #fec93d;font-weight: bold;}
.p2 em                      {font-size: .9em; color: lightgray; font-weight: normal; padding-left: 15px;}

/* MOSAIC OF PRODUCTS */
.printmosaic                {display: none;}
.mosaic                     {display: grid; width: 100%; height: 100%;
                            grid-template-rows: repeat(3, 300px); 
                            grid-template-columns: repeat(3, 1fr);
                            grid-gap: 20px;padding-bottom: 30px;}

.mosaic-item.msone          {background: url(../images/Mesh-Banner.jpg); opacity: .2;}
.mosaic-item.mstwo          {background: url(../images/PaperProducts_Home_Thumbnail.jpg); opacity: .2;}
.mosaic-item.msthree        {background: url(../images/coroplast-1000x1000-product_popup.jpg); opacity: .2;}
.mosaic-item.msfour         {background: url(../images/Promo_Thumbnail.jpg); opacity: .2;}
.mosaic-item.msfive         {background: url(../images/T-shirt-Thumbnail.png); opacity: .2;}
.mosaic-item.mssix          {background: url(../images/Sticker_thumbnail.jpg); opacity: .2;}
.mosaic-item.msseven        {background: #111; opacity: .2;}

.mosaic-item                {background: #777;color:white;font-weight: bold;display: flex;justify-content: center;align-items: center;transition: all ease-in-out 500ms;}
.mosaic a                   {text-decoration: none; color: white; text-shadow: 5px 3px 20px black, -5px 0px 20px black; font-size: 1.3em; display: flex;}
.mosaic-item:hover          {color:#fec93d; opacity: 1;}
.mosaic-item.square         {grid-row: span 1;grid-column: span 1;}
.mosaic-item.wide           {grid-row: span 1;grid-column: 2/ span 2;}
.mosaic-item.tall           {grid-row: span 2;grid-column: span 1;}

/* GOOGLE MAP */
.mapouter                   {overflow:hidden;padding: 0 0 735px 0; position:relative; max-width: 960px; margin: 0 auto;}
.gmap_canvas iframe         {left:2%; top:0; height:96%; width:96%; max-width: 960px; max-height: 700px; position:absolute;} 

/* PRICING FORM*/
input:required              {border-left: 3px solid red;}
input:invalid               {background-color: salmon;}
input:valid                 {border: 3px solid palegreen;}

form                        {color: white; margin: auto;}
form select                 {width: 150px;}
form input:nth-child(n+2)   {width: 250px;}
form textarea               {width: 240px; height: 120px}
#button                     {background-color: #fec93d; color: black; padding: 5px 10px; border-radius: 5px; border-color: none; font-weight: bold;}

/* PRODUCT PAGES PRODUCT CARDS- Maria*/
.content h1                 {font-size:1.2em;font-weight:100;color:white;text-align:center;text-transform:uppercase;}
.scrolling-cards            {color:white;display:grid;grid-template-columns:1fr 1fr 1fr;margin:auto;}
.scrolling-cards2           {color:white;display:grid;grid-template-columns: 1fr; max-width: 300px;margin:auto;}

.scrolling-cards img:hover  {width:103%;height:auto;overflow:hidden;margin:0px;}
.card                       {background-color:#666;width:auto;margin:5px 10px; font-size:1em;line-height:1.75em;}
.card img                   {height:auto; width:100%;}
.card p                     {padding:5px;}
.card h4                    {text-align:center;text-transform:uppercase;font-weight:200;font-size:1.3em;}
.hidden                     {display:none;}

/*SERVICE PAGE  -Maria*/
.service                    {display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;color:white;width:100%;height: auto;}
.service img                {width:200px;height:auto; background-color:#666;}
.service-child              {padding: 5px;}

/*SPECIALS PAGE- Maria*/
.offer p                    {padding:10px;}
.offer img                  {width:100%;height:auto;}

/* GREEN BAR */
.greenbar                   {width:100%;height:90px;background:#9fd733;clear:both;padding-top:30px;}
.greenbar h1                 {font-size: 3em; color: black; text-align: center; padding: 18px; margin: 0;}

/* FOOTER */
footer                      {width:100%;height:120px;background:#333;text-align:center;color:#FFF;padding-top:20px;}
.socialmedia                {display: block;}
footer a                    {text-decoration: none; color: lightgray;}



/* MEDIA QUERIES */


/* TABLET */
@media screen and (max-width:959px) {
main 						{width:768px; padding: 0;}
figure						{width:300px;height:70px;float:none;background-position:center; margin: 30px auto;}
.jbar                       {height:350px;}
nav 						{width:inherit;height:50px;float:none;text-align:center; margin: 0;}
nav ul						{margin-top:0;}
nav ul li					{font-size:.9em;margin:0 10px;}
.content 					{width: inherit; height: inherit;padding: 0 20px;}
.mapouter                   {padding: 0 0 81% 0;}
.gmap_canvas iframe         {left:4%; height:92%; width:92%;} 

/*SERVICE PAGE  -Maria*/
.service                    {grid-template-columns:repeat(3,1fr);}
}


/* MOBILE */
@media screen and (max-width:767px) {
main 						{width:460px;}
nav ul li					{font-size:0.8em;margin:0 5px;}
select              		{width:60%;}
.jbar                       {height:240px;}    
.content                    {padding: 0 20px 10px 20px;}
.greenbar                   {height: 70px; margin: 0; padding: 5px 0 0 0;}   
.greenbar  h1               {font-size: 2em;}

.mosaic                     {width: 100%; margin: auto; grid-template-rows: repeat(5, 300px); grid-template-columns: repeat(2, 1fr);grid-gap: 20px;padding-bottom: 30px;}
.mosaic-item.square         {grid-row: span 1;grid-column: span 1;}
.mosaic-item.wide           {grid-row: span 1;grid-column: 1/span 2;}
.mosaic-item.tall           {grid-row: span 2;grid-column: span 1;}

/* PRODUCT PAGES PRODUCT CARDS- Maria*/
.scrolling-cards            {grid-template-columns: 1fr 1fr;}
.card h4                    {font-size: 1.3em;}
    
/*SERVICE PAGE  -Maria*/
.service                    {grid-template-columns:repeat(2,1fr);}
}


/* MOBILE PORTRAIT */
@media screen and (max-width:459px) {
main 						{width:320px; padding: 0;}
figure						{background-size:contain; height:100px; width: 300px; transform: scale(1); margin: 16px 0 16px 10px;}
nav							{margin-bottom:0px !important;}
select              		{width:80%; background: white;}
.jbar                       {width:240px; display: none;}
.greenbar            		{display:none;}
footer						{text-align:center; width: 100%}
footer p, footer img 		{float:none;margin:0;}
    
.mosaic                     {width: 100%; margin: auto; grid-template-rows: repeat(7, 100px); grid-template-columns: repeat(1, 1fr);grid-gap: 20px;padding-bottom: 30px;}
.mosaic-item.square, 
.mosaic-item.wide, 
.mosaic-item.tall           {grid-row: span 1;grid-column: span 1;}

.mosaic-item.msone,        
.mosaic-item.mstwo,          
.mosaic-item.msthree,        
.mosaic-item.msfour,        
.mosaic-item.msfive,         
.mosaic-item.mssix,          
.mosaic-item.msseven        {background: #222; opacity: 1;}    
    
/* PRODUCT PAGES PRODUCT CARDS- Maria*/
.scrolling-cards            {grid-template-columns: 1fr;}
.card h4                    {font-size: 1em;}
    
/*SERVICE PAGE  -Maria*/
.service                    {grid-template-columns:1fr;}
.service img                {width:200px;  display: block; margin: auto;;}

    
    
    
@media screen and (max-width:319px) {
main 						{width:220px; margin: ; padding: 0;}
figure						{background-size:contain; height:100px; width: 220px; transform: scale(1); margin: 16px 0 16px 0;}
select              		{width:90%; background: white;}
    }