:root{
    --colorBlue: #3b53a4;
    --hoverBlue: aqua;
    --lightGray: #ebedf3;
    
}
       

       *{
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }

        html, body{
            font-size: 1rem;
            font-family: 'Open Sans', sans-serif;
            width: 100%;
            margin: 0;
            padding: 0;
            
        }
        
        main{
			 min-height: 75vh;   
			 min-width: 100%;
			 max-width: 100%;
		 
        }
        
        nav, header, footer{
            width: 100%;
        }

        nav{
            border-bottom: 3px solid #ffffff;
            background-color: var(--colorBlue);
        }
        
        #mainContent p{
	        line-height: 2rem;
        }
        .ps_jumbtron{
            background-color: var(--colorBlue);
            color: #fff;
            font-size: 2rem;
            text-transform: capitalize;
            display: flex;
            align-items: center;
            justify-content: center;
        }
		.ps_jumbtron img{
			width: 100%;
			height: auto;
		}
		
        #ps_menu-box{
            display: none;
            width: 100%;
            flex-direction: column;
			color: #fff;
        }
        
        .ps_MenuWrap{
            background-color: var(--colorBlue);
            color: #fff;
            font-size: 1rem;
            min-height: 2.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 100%;

        }

        .ps_MenuWrap a{
            width: 100%;
            padding: 0.75rem 0.5rem;
            transition: all 1s ease-out;
			text-decoration: none;
        }

        .ps_MenuWrap a:hover{
            background-color: aqua;
            color: var(--colorBlue);
        }

        .ps_navAide{
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .ps_logo{
                position: relative;
                float: left;
                display: block;
                width: 45%;
                margin-right: auto;
                margin-left: 20px;
        }

        .ps_logo img{
                width: 200px;
                height: auto;
        }


        .ps_ListItem{
            color: #ebebeb;
            text-decoration: none;
            border-bottom: 1px solid #fff;
            width: 100%;

        }
        .ps_burgers{
            display: block;
            position: relative;
            float: right;
			top: 12px;
        }

        .ps_icon{
            margin-right: 10px;
        }
        a.ps_icon:hover{
            background-color: transparent;
        }
        .ps_icon33 {
            position: relative;
            float: left;
            left: 0;
            --sizeW: 50px;
            --sizeH: 42px;
            display: inline-block;
            width: var(--sizeW);
            height: var(--sizeH);
            transition: .12s;
            -webkit-mask-size: cover;
            mask-size: cover;
        }

        .ps_icon-burger {
            background: rgba(255,255,255, 1);
            animation: 4s frames infinite linear;
            
            -webkit-mask-image: url('https://www.virginiagutter.com/images/hamburger-menu.svg');
            mask-image: url('https://www.virginiagutter.com/images/hamburger-menu.svg');
            }

        .ps_icon-burger:hover {
            background: var(--hoverBlue);
            animation: 4s frames infinite linear;
            
            -webkit-mask-image: url('https://www.virginiagutter.com/images/hamburger-menu.svg');
            mask-image: url('https://www.virginiagutter.com/images/hamburger-menu.svg');
        }
        .ps_dropTop{
            display: flex;
            position: relative;
            float: left;
            width: 100%;
            flex-wrap: wrap;
        }
        .ps_dropTop a{
            transition: all 1s ease-out;
        }
        .ps_dropTop a:hover{
            transition: all 1s ease-out;
        }
        .ps_dropDown{
            display: flex;
            flex-direction: column;
            position: relative;
            top: 100%;
            width: 100%;
        }

       .ps_dropDown a{
            display: flex;
            color: #fff;
            text-decoration: none;
            width: 100%;
            border-bottom: 1px #fff solid;   
            transition: all 1s ease-out;
            padding-left: 50px;
        }

        .ps_flex{
            display: flex;
        }
        .ps_flexWay{
	        flex-direction: row;
        }
        
        .ps_flexCenter{
            align-items: center;
            justify-content: center;
        }
        .ps_flexAround{
            align-items: center;
            justify-content: space-around;
        }
        .ps_flexBetween{
            align-items: center;
            justify-content: space-around;
        }
        .ps_flexWrap{
            flex-wrap: wrap;
        }
        .ps_h100{
            height: 100px;
        }
        .ps_h200{
            height: 200px;
        }
        .ps_h300{
            height: 300px;
        }
        .ps_hauto{
            height: auto;
        }
        .ps_borderBlue{
            border: 1px solid var(--colorBlue);
        }
        .ps_borderRounded1rem{
            border-radius: 1rem;
        }

        .ps_w25, .ps_w33, .ps_w50, .ps_w75, .ps_w90, .ps_w100{
            width: 85%;
            margin: 0 auto;
        }
        .ps_wAuto{
            width: auto;
        }
        .ps_mAuto{
            margin: 0;
            margin: auto;
        }
        .ps_mt10{
        	margin-top: 10px;
	    }
        .ps_img25{
            width: 25%;
            height: auto;
        }
        .ps_img50{
            width: 50%;
            height: auto;
        }
        .ps_img75{
            width: 75%;
            height: auto;
        }
        .ps_img100{
            width: 100%;
            height: auto;
        }

        .ps_gap2vh{
            --elGap: 2vh;
            margin: var(--elGap);
            gap: var(--elGap);
        }
        .ps_gap4vh{
            --elGap: 4vh;
            margin: var(--elGap);
            gap: var(--elGap);
        }
        .border1G{
	        border: 1px var(--lightGray) solid;
	        border-radius: 10px;
        }
        
        .p2{
	        padding: 2%;
        }
		        
        .tickerTape{
            width: 100%;
            display: flex;
            min-height: 75px;
            align-items: center;
            justify-content: center;
            background-color: var(--colorBlue);
            color: #fff;
            border-top: 3px solid aqua;
            border-bottom: 3px solid aqua;
            margin-bottom: 2vh;
        }
        
        .tickerTapeText{
	     	text-align: center;   
        }
        
        #footer{
	        display: flex;
	     	max-width: 100%;
	     	padding: 2vh;
	     	background-color: var(--colorBlue);
	     	color: #fff; 
	     	align-items: center;
	     	justify-content: center;
	     	border-top: 3px solid var(--hoverBlue);
	     	text-align: center;
	     	line-height: 2rem;
	     	margin-top: 2vh;
        }
        
        #footer a{
	        color:#fff;
	        text-decoration: none;
        }
        
        #footer a:hover{
	        color: var(--hoverBlue);
        }
        
        .formWrap{
	        position: relative;
	     	display: flex;   
	     	flex-direction: column;
	     	align-items: center;
	     	justify-content: center;
	     	padding: 5px;
	     	width: auto;
        }
        .formWrapper25{
	     	width: 85%;
	     	padding: 10px 0 3px 0;
	     	margin: auto;
        }

        .formWrapper75{
	     	width: 85%;
	     	padding: 5px;
	     	margin: auto;
        }
        button, input{
	        width: 90%;
	        font-weight: bold;
	        padding: 5px;
	        margin: auto;
        }
		
		.gutter-box{
			display: flex;
			flex-direction: column;
			width: 100%;
			border: 1px var(--lightGray) solid;
	        border-radius: 10px;
			padding: 2%;
		}
		.gutter-box a{
			text-decoration: none;
			margin-bottom: 1.25rem;
		}
		.gutter-box a:hover{
			color: red;
		}

		.gutter-box-wrap{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			gap: 2vh;
		}
/***************************************************************************************************************************************************************/
/***************************************************************************************************************************************************************/
/********************************************************* Media Queries - Larger Screens **********************************************************************/
/***************************************************************************************************************************************************************/
/***************************************************************************************************************************************************************/


        @media (min-width: 1190px) {

        *, html, body{
            font-size: 16pt;

        }
        
            .ps_MenuWrap{
                flex-direction: row;
                align-items: center;
				margin-left: auto;
            }
            .ps_MenuWrap a{
                width: auto;
                display: flex;
                white-space: nowrap;
				color: #ffffff;
            }
            #ps_menu-box{
                display: flex;
                flex-direction: row;
				justify-content: flex-end;
                content:'';
				margin-top: 32px;
				margin-left: auto;
            }
            .ps_navAide{
                width: auto;
            }

            .ps_logo{
                margin: 0 20px;
            }
            .ps_logo img{
                width: 200px;
                height: auto;
            }

            .ps_ListItem,
            .ps_LastItem{
                width: auto;
                border: none;
                position: relative;
            }
          
            .ps_ListItem{
                margin-right: .25%;
            }

            .ps_LastItem{
                margin-left: auto;
            }
            .ps_flexWrap{
                flex-wrap: nowrap;
            }

            .ps_w25{
                width: 25%;
            }
            .ps_w33{
                width: 33%;
            }
            .ps_w50{
                width: 50%;
            }
            .ps_w75{
                width: 75%;
            }
            .ps_w100{
                width: 100%;
            }
            .ps_w90{
            	width: 90%;
            }
            /*** FLEX DROP DOWN MENU ***/
            .ps_dropTop{
                position: relative;
                display: flex;
                width:150px;
            }
            .ps_dropDown{
                display: none;
                /*display: flex;*/
                position: absolute;
                top: 100%;
                left: 0;
                flex-direction: column;
                z-index: 100;
                border: 1px solid white;
                background-color: var(--colorBlue);
                width: auto;
                margin-left: 0;
            }
            .ps_dropDown a:hover{
                background-color: var(--hoverBlue);
            }
            .ps_dropDown a{
                display: flex;
                color: #fff;
                text-decoration: none;
                border-bottom: 1px solid #fff;
                width: auto;
                padding: 10px 10px;
            }

            .ps_dropTop:hover .ps_dropDown{
                display: flex;
                
            }
            /*** END - FLEX DROP DOWN MENU ***/
            
            .formWrap{
	            display: flex;
	            flex-direction: row;
	            min-width: 600px;          
            }
	        .formWrapper25{
		     	display: flex;
		     	width: 24%;
	        }
	
	        .formWrapper75{
		     	display: flex;
		     	width:75%;
		     	
	        }

			.ps_burgers{
                display: none;
            }
	        
        }

/******************************************* End of Media Query **************************************************/

/* GUTTER-FLEX.css ************/


		.jumbotron{
			display: flex;
			max-width: 100%;
			width: 100%;
			height: auto;
			border-bottom: 6px solid var(--colorBlue);
			margin-bottom: 4vh;
		}

		.header-image{
			width: 100%;
			max-width: 100%;
			height: auto;
		}
		.main-content{
			display: flex;
			flex-direction: column;
			width: 90%;
			margin: auto;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			padding: 4vh;
			margin-bottom: 4vh;
		}

			  
		h1,h2,h3,h4,h5,h6{
			color: var(--colorBlue);
			font-weight: bold;
			display: block;
			width: 98%;
			max-width: 100%;
			text-align: center;
		}

		h1{
			font-size: 1.25rem;
			line-height: 2.5rem;
		}

		h1.gutter-h1{
			font-size: 1.75rem;
			line-height: 3rem;
			margin-bottom: 1vh;
		}
		
		h3{
			text-align: center;
			font-size: 1.5rem;
			margin-bottom: 1rem;
		}

		p{
			margin: auto;
			max-width: 100%;
			padding: 1.5vh;
			font-size: 1.25rem;
			line-height: 2rem;
		}
		
		p.lefty{
			margin-left: 0;
			text-align: left;
		}

		.sub-content{
			display: flex;
			flex: 1;
			flex-direction: column;
			flex-wrap: wrap;
			max-width: 98%;
			margin: auto;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			padding: 1vh;
			align-items: flex-start;
			justify-content: space-between;
		}

		.subL{
			max-width: 100%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding:1vh;
			gap: 2vh;
			
		}

		.subR{
			width: 96%;
			max-width: 96%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			margin-top: 3vh;
			margin: 3vh auto;
			padding: 2vh;
		}

		.gutter-wrapperC{
			display: flex;
			flex-direction: column;
			width: 96%;
			max-width: 96%;
			margin: auto;
			align-items: center;
			justify-content: center;
			border: 1px solid gray;
			border-radius: 10px;
			margin-bottom: 2vh;
			padding: 2vh;
			background-color: var(--lightGray);
		}

		.gutter-wrapperR{
			display: flex;
			flex-direction: row;
			width: 98%;
			margin: auto;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
		}

		.wrapper{
			display: flex;
			flex-direction: column;
			margin: auto;
			padding: .5vh;
			width: 100%;
			max-width: 100%;
		}


		.wrapper img{
			border: 1px #000 solid;
			border-radius: 10px;
			width: 200px;
			height: auto;
			margin-left:auto;
			margin-right:auto;
		}
		.gutters{
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			line-height: 2rem;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			width: 100%;
			max-width: 100%;
			height: 100%;
			margin-top: 1vh;
		}

		a.readmore{	
			width: 250px;
			font-size: .8em;
			margin: 1.5vh .1vh .25vh 0;
			padding: 0.5%;
			border: 1px solid gray;
			border-radius: 10px;
			background-color: var(--colorBlue);
			color: #fff;
			font-weight: bold;
			text-decoration:none;
			text-align: center;
		}

		a.readmore:hover{
			background-color: red;
			color: #fff;
		}	
		
		.gutter-color-palette{
			display: flex;
			flex-direction: column;
			margin-top: 6vh;
			width: 100%;
			max-width: 100%;
		}
		
		.header-image{
			width: 100%;
			max-width: 100%;
			height: auto;
		}
		
		ul{
			display: flex;
			flex-direction: column;
			width: auto;
			align-items: flex-start;
			justify-content: center;
			font-size: 1rem;
			line-height: 2rem;
			margin: auto;
		
		}

/*****************REQUEST QUOTE ***********************************************/

		.quote_wrapper{
			display: flex;
			flex-direction: column;
			width: 90%;
			margin: 0;
			margin: auto;
		}
		
		.quote_headline{
			border: 1px solid gray;
			border-radius: 10px;
			background-color: var(--colorBlue);
			text-align: center;
			padding: 6px;
			color: #fff;
			font-weight: bold;
			text-transform: capitalize;
		}
		
		.form_wrapper{
			display: flex;
			flex-direction: column;
			flex: 1;
			max-width: 100%;
		}
		.form_names{			
			max-width: 100%;
			font-size: .75rem;
			font-weight: bold;
			margin-top: 10px;
			margin-bottom: 3px;
			white-space: nowrap;
		}

		.form_inputs{
			display: flex;
			flex: 1;
			max-width: 100%;
		}
		
		.form_inputs input,
		.form_inputs select{
			border: 1px solid gray;
			background-color: #fff;
			padding: 4px;
			font-size: .75rem;
			font-weight: normal;
			width: 100%;
		}

	
		.hide_error{
			display: none;
		}
		
		.show_error{
			display: flex;
			width: 100%;
			flex-direction: column;
			color: red;
			font-size: .8rem;
		}
		input.errors, select.errors, textarea.errors{
			background-color: yellow;
			color: red;
			border: 1px dashed red;
		}
		.form_contact{
			padding: 10px;
		}
		
		
		
		textarea{
			width: 100%;
			max-width: 100%;
			border: 1px solid gray;
		}
		
		button.btn_submit,
		button.btn_submit2
		{
			padding: 6px;
			font-weight: bold;
			border: 1px solid gray;
			border-radius: 10px;
			background-color: var(--colorBlue);
			color: #fff;
			margin: 1.5vw auto;
		}
		
		button.btn_submit:hover,
		button.btn_submit2:hover{
			background-color: red;
			color: #fff;
		}
		
		button.btn_submit2{
			padding: 20px 10px;
		}
/*******************************************************************************/



/***************************************************************************************************************************************************************/
/***************************************************************************************************************************************************************/
/********************************************************* Media Queries - Larger Screens **********************************************************************/
/***************************************************************************************************************************************************************/
/***************************************************************************************************************************************************************/


@media (min-width: 1050px) {

        *, html, body{
            font-size: 16pt;

        }
		.subL{
			width: 62%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding:1vh;
			gap: 2vh;
			
		}

		.subR{
			width: 36%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding: 2vh;
			margin-top:0;
		}
		
		.sub-content{
			display: flex;
			flex-direction: row;
			max-width: 90%;
		}
		.gutter-box{
			display: flex;
			flex-direction: column;
			width: 45%;
		}

		.gutter-box-wrap{
			display: flex;
			flex-direction: row;
			justify-content: space-around
		}
		.wrapper{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: flex-start;
			justify-content: space-between;
			padding: .1vh;
			width: 100%;
			max-width: 100%;
		}
		
		.wrapper img{
			width: 175px;
		}
		
		.gutters{
			width: 60%;
			max-width: 100%;
			margin-top: 0;
			padding-top: 0;
		}

		
		h1{
			font-size: 2rem;
			line-height: 3rem;
		}
		h2{
			text-align: left;
			font-size: 1.5rem;
			
		}
		h3{
			text-align: left;
			font-size: 1.5rem;
			
		}
		
		.show_error{
			display: flex;
			width: 100%;
			flex-direction: column;
			color: red;
			font-size: .5rem;
		}
		
}

@media (min-width: 1200px) {

		.gutters{
			width: 65%;
			max-width: 100%;
			margin-top: 0;
			padding-top: 0;
		}
}

@media (min-width: 1400px) {

        *, html, body{
            font-size: 16pt;

        }
		.subL{
			width: 67%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding:1vh;
			gap: 2vh;
			
		}

		.subR{
			width: 30%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding: 2vh;
			margin-top:0;
		}
		
		.sub-content{
			display: flex;
			flex-direction: row;
			max-width: 90%;
		}
		
		h1{
			font-size: 2rem;
			line-height: 3rem;
		}

		
}


@media (min-width: 1500px) {

        *, html, body{
            font-size: 16pt;

        }
		.subL{
			width: 73%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding:1vh;
			gap: 2vh;
			
		}

		.subR{
			width: 25%;
			border: 1px solid var(--lightGray);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			padding: 2vh;
			margin-top:0;
		}
		
		.sub-content{
			display: flex;
			flex-direction: row;
			max-width: 90%;
		}
		
		h1{
			font-size: 2rem;
			line-height: 3rem;
		}
		
	
		.gutters{
			width: 75%;
			max-width: 100%;
			margin-top: 0;
			padding-top: 0;
		}
		
}