*{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body {
        background: #EDF0F7;
        font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 15px;
        line-height: 1.42857143;
        color: #505c73;
        height: 100vh;
    }
    
    .container{
        width: 80%;
        max-width: 1200px;
        padding: 0;
        margin: 0 auto;
    }
    
    #grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        margin-bottom: 3rem;
    }
    
   .h-2{
      grid-row-end: span 2; 
    } 

    .widget{
        background-color: #fff;
        border: 1px solid #d3dae2;
        box-shadow: 0px 5px 10px rgba(178,178,178,0.3);
        font-size: 15px;

    }
    
     .center{
        display: block;
        margin: 0 auto;
       text-align: center; 
   }
   .widget img{
       width: auto;
       max-width: 300px;
       max-height:300px;
       height: auto;
   }
    .widget.inner{
        height:400px;
        text-align: left;
    }

    .title {
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 600;
        font-size: inherit;
        margin: 0.5em 1em;
        
        text-transform: uppercase;
        padding: 10px 0px;
    }
    
    .ss-icon{
        font-size: 20px;
        position: relative;
        padding: 5px;
        top: 4px;
    }

    .widget-grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
    }
    .block{
        grid-column-end: span 1;
        overflow:hidden;
    }
    .message {
        /*height: 100%;*/
        min-height: 250px;
        overflow-y: auto;
        padding: 23px 30px;
        font-family: 'Source Sans Pro', sans-serif;
        border-top: 1px solid #d3dae2;
    }
    .widget footer{
        position: relative;
        padding: 23px 30px;
    }
    #logo {
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 20px;
        
    }
    .bg-img {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    }
    .widget.bg-img{
        border: 1px solid #343c4a;

    }
    .bg-img .message {
        border-top: 1px solid #343c4a;

    }
    .ssl {
        background-image: 
        -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/heart.jpg');
        background-image: 
        -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/heart.jpg');            
        background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/heart.jpg');            
        background-position: center;
        background-size: cover;
        color: #fff;
    }
    .domain {
        background-image: 
        -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/server.jpg');
        background-image: 
        -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/server.jpg');
        background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/server.jpg');
        background-position: center;
        background-size: cover;
        color: #fff;
    }
    .mageboost {
        background-image: 
        -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/space-shuttle.jpg');
        background-image: 
        -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/space-shuttle.jpg');
        background-image: 
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/space-shuttle.jpg');
        background-position: center;
        background-size: cover;
        color: #fff;
    }
    .hosting {
        background-image:
        -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/globe.jpg');
        background-image:
        -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/globe.jpg');
        background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../img/globe.jpg');
        background-position: center;
        background-size: cover;
        color: #fff;
    }

    .optimization {
        background-image:
        -webkit-linear-gradient(rgba(53,64,82,.75),rgba(53,64,82,.75)),
        url('../img/scissors-widget.jpg');
        background-image:
        -o-linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/scissors-widget.jpg');
        background-image:
        linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/scissors-widget.jpg');
        background-position: center;
        background-size: cover;

        color: #fff;
    }

    .ecommerce {
        background-image:
        -webkit-linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75))
        url('../img/business-computer-device-widget.jpg');
        background-image:
        -o-linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/business-computer-device-widget.jpg');
        background-image:
        linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/business-computer-device-widget.jpg');
        background-position: center;
        background-size: cover;
        color: #fff;
    }

    .devops {
        background-image:
        -webkit-linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/code-widget.jpg');
        background-image:
        -o-linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/code-widget.jpg');
        background-image:
        linear-gradient(rgba(53,64,82,.75), rgba(53,64,82,.75)),
        url('../img/code-widget.jpg');
        background-position: center;
        background-size: cover;
        color: #fff;
    }
    button {
        text-transform: uppercase;
    }
    .readon {
        margin-bottom: 0;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        display: block;
        font-family: 'Montserrat',sans-serif;
        font-size: .8em;
        min-width: 100px;
        padding: 11px 10px 9px 10px;
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
        background: #2ecc71;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 2px 0 0 #32b060;
        text-shadow: 0 2px rgba(0,0,0,.2);
        top: 0;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -ms-transition: all .4s;
        transition: all .2s;
    }
    a.readon:hover {
        background: #3fdf79;
        color: #fff;
        text-decoration: none;
    }
    .check{
        font-weight: 700;
        background-color: #2ecc71; 
        color: #fff;
        text-decoration: none;
    }
    .check:hover{
        background-color: #3fdf79;
        color: #fff;
    }
    #social{
        
    }
    #social ul{
        display: inline-block;
        list-style: none;
        margin-left: 0px;
        padding: 20px 20px 0px 0px;
    }
    #social ul li{
        float: left;
        list-style: none;
        padding-left: 10px;
    }
    
    #social ul li:first-child{
        padding-left: 0px;
    }
 
    .h1, .h2, .h3,  h1, h2, h3{
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.1;
        color: #262c37;
    }
    
    
    .copyright{
        text-align: center;
    }
    
    
    .copyright a{
        color: #50a1ee;
        text-decoration: none;
        text-transform: none
    }
   
    
    @media only screen and (max-width: 992px) and (min-width: 767px){
        #grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 1rem;
        }
        .widget.w-4, .widget.w-2{
            grid-column-end: span 2;
        }
        .widget.w-4 .title{
            font-size: 18px;
            line-height: 18px;
        }
        .widget-grid{
            grid-template-columns: 1fr;
        }

        .widget img{
            padding: 20px;
            max-width: 300px;
        }
    }
   
    @media only screen and (max-width: 1200px) and (min-width: 992px){
        #grid {
            grid-template-columns: 1fr 1fr;
        }
            .widget.w-4{
                grid-column-end: span 2;
            }
            .widget.w-4 .title{
                font-size: 20px;
                line-height: 20px;
            }

            .widget.w-3{
                grid-column-end: span 2;
            }
            .widget.w-3 .title{
                font-size: 20px;
                line-height: 20px;
            }

            .widget.w-2{
                grid-column-end: span 1;
            }
            .widget.w-2 .title{
                font-size: 20px;
                line-height: 20px;
            }
            .widget-grid{
                grid-template-columns: 1fr 1fr;
            }
            .widget img{
                max-width: 100%;
            }
    }

    @media only screen and (min-width: 1200px){
        #grid {

            grid-template-columns: 1fr 1fr 1fr ;
        }
            .widget.w-4{
                grid-column-end: span 4;
            }
            .widget.w-4 .title{
                font-size: 20px;
                line-height: 20px;
            }

            .widget.w-3{
                grid-column-end: span 3;
            }
            .widget.w-3 .title{
                font-size: 20px;
                line-height: 20px;
            }

            .widget.w-2{
                grid-column-end: span 2;
            }
            .widget.w-2 .title{
                font-size: 20px;
                line-height: 20px;
            }


            .widget-small{
                min-height: 150px;
            }
            .widget-small .message{
                height: auto;
                max-height: 50px;
            }
            .widget-grid{
                grid-template-columns: 1fr 1fr ;
            }

            .widget img {

                max-height: 200px;
                height: auto;


            }

    }