/* 903px for clean transition from full screen to mobile*/
@media screen and (max-width: 903px) {
    
    /*alter the header properties for page indication*/
    #WebDesignPage .btn-draw2{
        border-bottom: 2px solid #227f8f;
    }

    #WebDesignPage .btn-draw2 > span:before{
        background: #227f8f;
    }

    #WebDesignPage .btn-draw2 > span:after{
        background: #227f8f;
    }
    #WebDesignPage .btn-draw2:after {
        background: #227f8f;
    }

/*top header*/
div#WebdevHeadBlox{
    margin: 120px 0% 4% 0%;
    width: 100%;
    Height: 25vw;
}

.WebdevHeadTxt{
    font-size: 5.8vw;
    margin:0 auto;
    padding: 0 5% 0% 5%;
    font-weight: 1000%;
    position: relative;
    top:25%;
}

/*Header Body Seperation Line*/
div#HeadBodySep{
    width: 90%;
    border-top: rgba(43, 42, 42, 0.233) 4px solid;
    margin: 0 Auto;
}

/*some page styling*/
div#BulbFadeInBox{
    width: 100%;
    height: 60vw;
    position: absolute;
    z-index: 0;
    background: linear-gradient(rgb(236, 237, 238),rgba(236, 237, 238, 0.007));
}


div#BulbBackground{
    background: url(bulb.png);
    background-position: right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 45%;	
    background-position-x: 90%;	
    width: 100%;
    height: 90%;
    position: absolute;
    opacity: .1;
    margin: 0% 0 0 0%;
    z-index: -5;
}

/*The Processessss*/
div#WebdevProcessBlox{
    width:100%;
    position: Relative;
    height: 265vw;
    margin: 2% 0% 0% 0%;
    padding: 0 0% 0% 0%;
}

div#ProcessHead{
    font-size: 4.5vw;
    margin:0 ;
    padding: 2% 0 0 0%;
    font-weight: 200%;
    position: relative;
}

.ProcessHeadtxt {
    text-align: center;
    font-style: italic;
}

/*What We Will Need From you*/
div#Process {
    width: 95%;
    height: 20%;
    margin: 0 auto;
}

.ProcessBody {
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    font-size: 3.5vw;
    padding: 2% 1% 0 1%;
    font-weight: 200%;
    position: relative;
    text-align: left;
    line-height: 150%;
}

/*What we Deliver / our Process*/
div#WhatWeDeliver{
    width: 98%;
    height: 73%;
    margin: 0% auto 0 Auto;
    position: relative;
}

/*Used to modify HTML on-scroll settings for the different layouts*/
div#LargeSteps{
    visibility: hidden;
    display: none;
    width:100%;
    height:100%;
    overflow: hidden;
}

div#SmallSteps{
    visibility: visible;
    width:auto;
    height:auto;
    width:100%;
    height:100%;
    overflow: hidden;
}

/*Step 1 Block*/
div#WebStep1 {
    Width:48%;
    height:42%;
    overflow: hidden;
    float: left;		
}

div#Step1Icon {
    background: url(Plan.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: contain;		
    width: 25%;
    height: 25%;
    position: relative;
    margin: 0 auto;
}

.Step1Head{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 4vw;
    padding: 0% 0 0 0%;
    font-weight: 200%;
    position: relative;
    margin-top: -1.5%;
}

.Step1Text{
    position: relative;
    width: 80%;
    margin: -58% 0 0 15%;
    font-size: 2.6vw;
    padding: 0% 0 0 0;
    font-weight: 200%;
    text-align: left;
    line-height: 170%;
}

/*Popup with preview of PDF Checklist and tips Sheet (checklist sheet)*/
button#CheckListButton2{
    font-size: 2.6vw;
    padding: 2%;
    font-weight: 200%;
    font-style: bold;
    text-align: center;
    color: #6FA369;
    border: #6FA369 2px solid;
    margin: 4% 0 0 28%;
    position: relative;
    float: left;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
}

Button#CheckListButton2:hover {
    background: #a3d6df85
}

/*Popup Covers the whole screen and displays PDF(checklist sheet)*/
div#CheckListPopup2{
    background-color:rgba(14, 17, 17, 0.67);
    height:100%;
    Width:100%;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
    overflow: hidden;
    animation: RevealPopup .5s ease-in-out;
}

    @keyframes RevealPopup {
        0% {opacity:0;}
        50% {opacity: 1}
        100% {opacity: 1;}
    }

Div#PopupBackground2{
    top: 50%;
    padding-top:1%;
    padding-left:1%;
    transform: translateY(-50%);
    position: relative;
    margin: 0 auto;
    min-height: 90%; 
    Height:48vw;
    Width:97vw;
    min-width: 500px;
    background: rgb(17, 17, 17);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
}

button#CloseButton2{
    float: right;
    background: transparent;
    position: relative;
    Margin: 0% 1% 0 0;
    width: 42px;
    height: 42px;
    opacity: 0.5;
    border: none;
}

button#CloseButton2:hover {
    opacity: 1;
}
    
button#CloseButton2:before, button#CloseButton2:after {
    position: absolute;
    content: ' ';
    height: 42px;
    width: 4px;
    background-color: #6FA369;
    -moz-border-radius: 5px;
    border-radius: 5px;
    bottom:5px;
}

button#CloseButton2:before {
    transform: rotate(45deg);
}

button#CloseButton2:after {
    transform: rotate(-45deg);
}

/*Step 2 Block*/
div#WebStep2 {
    Width:48%;
    height:42%;
    overflow: hidden;
    Margin: 24% 0% 0 0%;
    float:right;
    
}

div#Step2Icon {
    background: url(Design.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: contain;		
    width: 25%;
    height: 25%;
    position: relative;
    margin: 0 auto;
}

.Step2Head{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 4vw;
    padding: 0% 0 0 0%;
    font-weight: 200%;
    position: relative;
    margin-top: -1.5%;
}

.Step2Text{
    position: relative;
    width: 80%;
    margin: -58% 0 0 15%;
    font-size: 2.6vw;
    padding: 0% 0 0 0;
    font-weight: 200%;
    text-align: left;
    line-height: 170%;
}

/*Step 3 Block*/
div#WebStep3 {
    Width:48%;
    height:28%;
    overflow: hidden;
    Margin:0% 0% 0 0%;
    float:left;
}

div#Step3Icon {
    background: url(Develop.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: contain;		
    width: 25%;
    height: 25%;
    position: relative;
    margin: 0 auto;
}

.Step3Head{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 4vw;
    padding: -1% 0 0 0%;
    font-weight: 200%;
    position: relative;

}

.Step3Text{
    position: relative;
    width: 80%;
    margin: -35% 0 0 15%;
    font-size: 2.6vw;
    padding: 0% 0 0 0;
    font-weight: 200%;
    text-align: left;
    line-height: 170%;

}

/*Step 4 Block*/
div#WebStep4 {
    Width:48%;
    height: 28%;
    overflow: hidden;
    float:right;
    Margin: 0% 0% 0% 0%;            
}

div#Step4Icon {
    background: url(Review.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: contain;		
    width: 25%;
    height: 25%;
    position: relative;
    margin: 0 auto;
}

.Step4Head{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 4vw;
    padding: 0% 0 0 0%;
    font-weight: 200%;
    position: relative;
}

.Step4Text{
    position: relative;
    width: 80%;
    margin: -35% 0 0 15%;
    font-size: 2.6vw;
    padding: 0% 0 0 0;
    font-weight: 200%;
    text-align: left;
    line-height: 170%;
}

/*Step 5 Block*/
div#WebStep5 {
    Width:48%;
    height:28%;
    overflow: hidden;
    Margin: 0% 0 0 0;
    float:left;
    
}

div#Step5Icon {
    background: url(Launch.png);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-size: contain;		
    width: 25%;
    height: 25%;
    position: relative;
    margin: 0 auto;
    
}

.Step5Head{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 4vw;
    padding: 0% 0 0 0%;
    font-weight: 200%;
    position: relative;
    margin-top: -1.5%;
}

.Step5Text{
    position: relative;
    width: 80%;
    margin: -35% 0 0 15%;
    font-size: 2.6vw;
    padding: 0% 0 0 0;
    font-weight: 200%;
    text-align: left;
    line-height: 170%;
}

/* Line Decoration for Step box*/
div#TopLine {
    height:3px;
    Width:80%;
    background:linear-gradient(to right, rgb(34, 127, 143),rgba(34, 127, 143, 0.067));
    float:left;
}

div#LeftLine {
    height:40%;
    Width:3px;
    background:linear-gradient(hsl(189, 62%, 35%),rgba(34, 127, 143, 0.035));
    margin: -6% 0 0 6%;
}


    /*custom OSA for Top Line*/
    [data-aos="TopLine"] {
        -webkit-transform: translateX(600px);
                transform: translateX(600px);
    }
    [data-aos="TopLine"].aos-animate {
        -webkit-transform: translateX(0);
                transform: translateX(0);
                        
    }
    
    /*custom OSA for Left Line*/
    [data-aos="LeftLine"] {
        -webkit-transform: translateY(600px);
                transform: translateY(600px);
    }
    [data-aos="LeftLine"].aos-animate {
        -webkit-transform: translateY(0);
                transform: translateY(0);				
    }
    
    /*custom OSA for dot to display*/
    [data-aos="BounceIn"] {
        -webkit-transform:scale(0,0);
                transform: scale(0,0);
            }
    
    [data-aos="BounceIn"].aos-animate {
        -webkit-transform:scale(1,1);
                transform:scale(1,1);		
            } 		
            
    /*custom OSA for dot to not display*/
    [data-aos="BounceOut"] {
        -webkit-transform:scale(1,1);
                transform: scale(1,1);
            }
    
    [data-aos="BounceOut"].aos-animate {
        -webkit-transform:scale(0,0);
                transform:scale(0,0);		
            } 	

/*Pricing section*/
div#WebdevPricingBlox{
    width:100%;
    position: Relative;
    height: 270vw;
    margin: 5% 0% 0% 0%;
    padding: 0 0% 0% 0%;
}

div#PricingHead{
    font-size: 4.5vw;
    width: 100%;
    height:13vw;
    padding: 0% 1% 0 1%;
    font-weight: 200%;
    position: relative;
    
}

/*Build Pricing with general .classes for both build and contracts*/
.PricingHeadtxt {
    text-align: center;
    font-style: italic;
    margin:-3% 0% 0% 36%;
    position: absolute;
}

.BuildsTitle{
    text-align: left;
    font-size: 3.5vw;
    margin: 8% 0% 0% 0%;
    text-decoration: underline;
    position: absolute;
}

/*styling for price blocks*/

div#PricingHeadBox{
    width: 100%;
    height:auto;
    border-bottom: #2b2a2ac4 2px solid;
    padding: 0;
}

.PackageNameandPrice{
    font-size: 4.5vw;
    font-style: bold;
    text-align: center;
    font-weight: 1000%;
    padding: 3% 0 3% 0%;
    line-height: 150%;
    margin: 0% 0 0 0;
    background: #2b2a2a1c;
    position: relative;
}

.PricingSmall{
    font-size: 3vw;
}

.PackageFeatures{
    font-size: 2.6vw;
    text-align: left;
    line-height: 170%;
    padding: 0% 0 0 2%;
}

    /*Pricing 1 Block*/
div#Pricing1Box{	
    Height: 34%;
    Width:48.5%;
    margin: 0%; 
    left: 1%;
    position: relative;
    box-sizing: border-box;
    background:rgba(34, 127, 143, 0.549);
    border: rgba(43, 42, 42, 0.769) 3px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
    -moz-border-radius: 5px;
    border-radius: 6px;
    float:left;
}

    /*Pricing 2 Block*/
div#Pricing2Box {
    Height: 34%;
    Width:48.5%;
    margin: 0% 0% 0 0%;
    position:relative;
    box-sizing: border-box;
    background:rgba(34, 127, 143, 0.549);
    border: rgba(43, 42, 42, 0.769) 3px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
    border-radius: 6px;
    float:right;
    right:1%;
}


    /*Pricing 3 Block*/
div#Pricing3Box {
    Height: 30%;
    Width:98%;
    margin: 0%;
    position: relative;
    box-sizing: border-box;
    background:rgba(34, 127, 143, 0.549);
    border: rgba(43, 42, 42, 0.769) 3px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
    border-radius: 6px;
    float:left;
    left:1%;
    top:.5%;
} 

/*Contract Pricing*/
div#MonthlyMoney{
    width: 100%;
    Height: 32%;
    position: relative;
    float: left;
}

.ContractsTitle{
    text-align: left;
    font-size: 3.5vw;
    margin: 0% 0% 0% 1%;
    text-decoration: underline;
    position: relative;
    float:left;
    top:4.8%;
}

div#ContractPriceHead{
    font-size: 4.5vw;
    margin:0 ;
    padding: 0% 0 0 0%;
    font-weight: 200%;
    position: relative;
    float:left;
}

.ContractFeatures{
    font-size: 2.6vw;
    text-align: left;
    line-height: 170%;
    padding: 2% 0 0 2%;
}

/*Contract box # 1*/
div#ContractPricing1Box{
    Height: 90%;
    Width: 48.5%;
    margin: 0 0% 0 0%; 
    position: relative;
    float: left;
    box-sizing: border-box;
    background:rgba(111, 163, 105, 0.548) ;
    border: rgba(43, 42, 42, 0.769) 3px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
    border-radius: 6px;
    left:1%;
    top:6%;
}

/*Contract box # 2*/
div#ContractPricing2Box{
    Height: 90%;
    Width: 48.5%;
    margin: 0 0% 0 0%; 
    float: right;
    position: relative;
    box-sizing: border-box;
    background:rgba(111, 163, 105, 0.548);
    border: rgba(43, 42, 42, 0.769) 3px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
    border-radius: 6px;
    right: 1%;
    top:6%;
}


/*Pricing block with Add-On prices*/
div#PackageAddons{
    width: 100%;
    Height: 58%;
    position: relative;
    float: left;
}

.AddonsTitle{
    text-align: left;
    font-size: 3.5vw;
    margin: 0% 0% 0% 1%;
    text-decoration: underline;
    position: relative;
    float:left;
    top:2.7%;
}

div#AddonBox {
    Height:auto;
    Width: 98%;
    margin: 0 0% 0 1%; 
    position: relative;
    float: left;
    box-sizing: border-box;
    background:rgba(111, 163, 105, 0.548);
    border: rgba(43, 42, 42, 0.769) 3px solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
    border-radius: 6px;
    top: 3.2%;
}

div#AddonsText{
    width:100%;
    height: auto;
    position: relative;

}

.AddonName{
    text-align: left;
    font-size: 3.6vw;
    font-style: bold;
    font-weight: 800%;
    padding: 0% 18% 0% 1%;
    line-height: 100%;
}

.AddonPricing{
    font-size: 3VW;
    float: right;
    Padding: 0 0% 0 0;
    margin-right: -21%;
    font-style: italic;
}

.AddonInfo{
    text-align: left;
    font-size: 2.6vw;
    font-weight: 500%;
    padding: 0% 0 0% 2%;
    line-height: 150%;		
    margin-top:-2%;
}


/*Popup with preview of PDF Checklist and tips Sheet (Terms and Conditions)*/
button#ConditionsButton{
    font-size: 3vw;
    padding: 1%;
    font-weight: 200%;
    font-style: bold;
    text-align: center;
    color: #6FA369;
    border: #6FA369 2px solid;
    position: relative;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float:left;
    Margin: 10.5% 0 0% 5%;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
    
}

Button#ConditionsButton:hover {
    background: rgba(163, 214, 223, 0.522)
}

/*Popup Covers the whole screen and displays PDF (Terms and Conditions)*/
div#ConditionsPopup{
    background-color:rgba(14, 17, 17, 0.67);
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
    overflow: hidden;
    animation: RevealPopup .5s ease-in-out;
}

    @keyframes RevealPopup {
        0% {opacity:0;}
        50% {opacity: 1}
        100% {opacity: 1;}
        }

Div#PopupBackground3{
    top: 50%;
    transform: translateY(-50%);
    padding-top: 1%;
    padding-left:1%;
    position: relative;
    margin: 0 auto;
    min-height: 90%; 
    Height:48vw;
    Width:97vw;
    min-width: 500px;
    background: rgb(17, 17, 17);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
}

button#CloseButton3{
    float: right;
    background: transparent;
    position: relative;
    Margin: 0% 1% 0 0;
    width: 42px;
    height: 42px;
    opacity: 0.5;
    border: none;
}

button#CloseButton3:hover {
        opacity: 1;
    }
    
button#CloseButton3:before, button#CloseButton3:after {
    position: absolute;
    content: ' ';
    height: 42px;
    width: 4px;
    background-color: #6FA369;
    -moz-border-radius: 5px;
    border-radius: 5px;
    bottom:5px;
}

button#CloseButton3:before {
    transform: rotate(45deg);
}

button#CloseButton3:after {
    transform: rotate(-45deg);
}
}