/*----------------------------START OF MAIN CONTENT---------------------------*/

* {
    padding: 0;
    margin: 0;
}

body, html {
    height: 100%;
    overflow: auto;
    font-family: "fira-sans",Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    font-size: 1rem;
}

body {
    background-image: url('../imagez/7013517_xl1437x958_2x.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

#maincontainer {
    min-height: 100%;
}

#logo {
    display: block;
    background-image: url(../imagez/logo.png);
    height: 80px;
    width: 132px;
    background-repeat: no-repeat;
    margin: auto;
}


#container {
    padding-bottom: 300px;
}

header {
    height: 100px;
    line-height: 100px;
    background-color: rgba(255,255,255,0.6);
}

footer {

    min-height: 200px;
    background-color: #2b9ebb;
    color: #F3FFFF;
    font-weight: 300;
    opacity: 0.9;
    padding:50px;
}

/*----------------------------END OF MAIN CONTENT---------------------------*/


/*----------------------------START OF NAVIGATION---------------------------*/


nav {
    display: none;
}

    nav ul {
        list-style: none;
        margin-left: 200px;
    }

        nav ul li {
            float: left;
            margin-right: 60px;
        }

            nav ul li a {
                text-decoration: none !important;
                color: black;
            }

                nav ul li a:hover {
                    color: #2b9ebb;
                    border-bottom: 1px solid #2b9ebb;
                }




#navicon {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1;
}

    #navicon ul {
        display: none;
        list-style: none;
        position: fixed;
        top: 55px;
        right: 32px;
        background-color: #2b9ebb;
        width: 150px;
        padding: 15px;
        z-index: 1;
    }

        #navicon ul li {
            text-align: center;
            margin-bottom: 5px;
            border-bottom: 1px solid white;

        }

            #navicon ul li a {
                text-decoration: none;
                color: #F3FFFF;
                font-weight: 400;

            }
                #navicon ul li a:hover {
            
                  
                }

    #navicon .bar1, #navicon .bar2, #navicon .bar3 {
        width: 25px;
        height: 5px;
        background-color: #2b9ebb;
        margin: 3px 0;
        transition: 0.4s;
    }

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-3px, 3px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/*----------------------------END OF NAVIGATION---------------------------*/



/*----------------------------START OF FOOTER---------------------------*/



.col1, .col2, .col3 {
    text-align: left;
    padding: 0;
    margin: 0;
    padding-left: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    padding-bottom: 20px;
    text-align: left;
    float: left;
}

.col2,col1 {
    margin-left: 100px;
   
}

.col3 {
    
    width: 100%;
}

.clear {
    clear: both;
}

.footerul {
    list-style: none;
}

    .footerul li {
        font-size: 17px;
        padding-bottom: 13px;
    }

        .footerul li a {
            color: #F3FFFF;
            font-weight: 300;
            text-decoration: none !important;
        }

            .footerul li a:hover {
                border-bottom: 1px solid #ADD0F6;
            }





.footerlogo {
    display: block;
    background-image: url(../imagez/fortiawhite.png);
    height: 150px;
    width:200px;
    background-size:contain;
    background-repeat: no-repeat;
}

.automargin {
    margin: auto;
}


footer::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}


/*----------------------------END OF FOOTER---------------------------*/




/*----------------------------START OF MAIN CONTENT---------------------------*/



#Keybenefits h1 {
    border-bottom: 1px solid #2b9ebb;
}

h2 {
    font-size: 27px;
    color: #2b9ebb;

    width: 69%;

}
#Keybenefits h2 {
    margin-left: 10px;
}

.bolder {
    font-weight: 300;
    color: #F3FFFF;
}



#Keybenefits {
    background-color: rgba(255,255,255,0.9);
  
  
    border-radius: 5px;

    margin-top: 150px;
}


    #Keybenefits ul {
        list-style: none;
        padding-top: 15px;
    }

    #Keybenefits li {
        list-style: none;
        background: url("../imagez/bullet.svg") no-repeat 0 3px;
        padding-left: 20px;
        margin-bottom: 10px;
    }

#contactcontent, #ourservicescontent, #yourbenefitscontent, #Keybenefits {
  
    padding: 50px;
    min-height: 100%;
    background-color: rgba(255,255,255,1);
    padding: 10px;
    border-radius: 5px;
    margin-top: 50px;
    margin-left:10px;
    margin-right:10px;
    
 
}

#yourbenefitscontent {
    min-width: 350px;
}

.largettext {
    font-size: 24px;
    padding-bottom: 4px;
    font-weight: 400;
    margin-top: 15px;

    width:50%;
}

    .largettext span {
        font-size: 16px;
        display: block;
        font-weight: 200;
    }

.largettext {
    color: #2b9ebb;
}

span {
    color: black;
}

.servicesul, .contactul {
    list-style: none;
}

    .servicesul h3 {
        margin-top: 10px;
        padding-left: 20px;
        margin-bottom: 10px;
        background: url("../imagez/bullet.svg") no-repeat 0 3px;
    }

    .contactul li {
        padding-bottom: 20px;
        font-size: 21px;
    }

.col3 {
    border-right: none;

}
.col2{
    margin:0px;
}


/*----------------------------END OF MAIN CONTENT---------------------------*/



/*----------------------------MEDIA QUERIES START---------------------------*/

@media screen and (min-width: 1079px) {


    nav {
        display: block;
    }

    #navicon {
        display: none;
    }

    header {
        background-color: rgba(255,255,255,0.6);

      
    }

    #logo {
        margin-left: 50px;
        margin-top: 12px;
        display: block;
        background-image: url(../imagez/logo.png);
        height: 80px;
        width: 132px;
        background-repeat: no-repeat;
        float: left;
    }

    #contactcontent, #ourservicescontent, #yourbenefitscontent, #Keybenefits {
        margin-left: 50%;
        opacity: 0.9;
        margin-bottom: 10px;
        opacity: 0.8;
        font-weight: 300;
        min-width: 600px;
        box-sizing: border-box;
        border-radius: 20px 0 20px 0;
        -webkit-box-shadow: 0 2px 0px #777;
        -moz-box-shadow: 0 2px 10px #777;
        box-shadow: 0px 1px 2px #777;
        padding: 35px;
        max-width: 325px;
       
    }
  
.content{
    padding:10px;
}
        
        .col1, .col2 {
            min-width: 32%;
            padding: 0px;
            margin-left: 20px;
        }
    .col2{
        margin-left:60px;
    }

    .col3 {
        border: none;
        width: 150px;
        
    
    }
    .footercontainer{
        max-width:980px;
        margin:auto;
    }
}


    @media screen and (max-width: 200px) {

        header {
            height: 120px;
            background-color: rgba(255,255,255,0.6);
        }

        #logo {
            width: 200px;
            height: 110px;
            display: block;
            background-image: url(../imagez/fortiacareresponsive.png);
            background-repeat: no-repeat;
            background-size: 200px 100px;
            background-position: center;
        }
        #contactcontent, #ourservicescontent, #yourbenefitscontent, #Keybenefits {
            margin: auto;
            margin-right: 10px;
            margin-left:10px;
        }
    }

    @media screen and (max-width: 1080px) {
        #contactcontent, #ourservicescontent, #yourbenefitscontent, #Keybenefits {
            margin: auto;
            margin-top: 80px;
            margin-left:10px;
            margin-right:10px;
           
        }
      

        #navicon {
            margin-right: 10px;
        }

        .col3 {
            width: 190px;
            margin-left:50px;
       
        }

        .col1, .col2 {
            margin-left: 50px;
        }
    }