/* #### Defaults #### */
nav, header, footer {
    display: block;   
}

body {
    line-height: 1;
    margin: 0;
}

#tabicon {
    border-radius: 10px;
}
label {
    font-size: 35px;
    font-weight: 600;
}


p {
    font-size: 25px;
    line-height: 1.2;
}

article p {
    font-size: 35px;
    padding: 20px;
}
.container {
    width: 100%;
    margin: auto;
    padding-top: 4%;
    padding-bottom: 4%;
}

link #tabicon {
    background-color: blue;
    border-radius: 60px;
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

* {
    box-sizing: border-box;
    
}

.row::after {
    display: table;
    clear: both;
    content: "";
}

/* #### Nav bar #### */
nav {
    width: 100%;
    margin: 0;
    position: fixed;
}

nav ul {
    background-color: #eee;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

 ul.topnav li {
    list-style:none;                                 
    float: left;
}

ul.topnav li.topnav-right {
    float: right;
}

ul.topnav li a {
    display: block;
    text-decoration: none;
    min-height: 16px;
    text-align: center;
    padding: 14px;
    text-transform: uppercase;
    color: #666;
}

ul.topnav li a:hover {
    background-color: #0080ff;
    color: #fff;
}

ul.topnav li.dropdownIcon a {
  display: none;  
}

/* #### Custom styles #### */
#section-1-gradient {
    background: #076dff;
    background: linear-gradient(#076dff, #65a5ff);
}

div.box {
    text-align: center;
    margin: 24px;
    padding: 36px 24px 40px 24px;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15),
    0 2px 3px 0 rgba(0,0,0,.1);
}

div.slopeIcon img{
    display: block;
    margin: auto;
    box-shadow: -2px -2px 20px 2px rgba(0,0,0,.15), 2px 2px 17px 2px rgba(0,0,0,1)
}

button {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    background-color: #0069ff;
    padding: 15px 60px;
    display: block;
    text-align: center;
    margin: 5px;
    border-radius: 7px;
}button.learnMore {
    display: block;
    margin: auto;
}

button:hover {
    background-color: #fff;
    color:brown;
    border-radius: 100px;
}

div.icon {
    width: 100%;
}

div.leftSide-col {
    margin-left: 30%;
}

div.rightSide-col {
    margin-left: 15%;
}

h1.large {
    color: #fff;
    font-size: 50px;
    margin: 0;
    line-height: 70px;
}

h1.section2Header {
    font-size: 65px;
    text-align: center;
}

input[type="text"] {
    font-size: 20px;
    width: 350px;
    min-width: 100px;
    padding: 5px;
}

input {
    border-radius: 15px;
    border-color:maroon;
    border-width: 3px;
}

form h2 {
    color: #fff;
}

footer.footsy {
    background-color: #666;
    padding-left: 10%;
}

footer.footsy h1 {
    color: #fff;
    font-size: 35px;
}

footer.footsy ul {
    list-style: none;
    text-align: left;
    padding-left: 0;
}

footer.footsy ul li {
    color: #fff;
    font-size: 22px;
    line-height: 1.5;
}


/* #### Mobile #### */
@media screen and (max-width: 768px) and (orientation: portrait) {
    ul.topnav li:not(:nth-child(1)) {
        display: none;
    }

    body {
        font-size: 14px;
    }


    ul.topnav li.dropdownIcon {
        display: block;
        float: right;
        background-color:#f5f5f5;;
        border:2px solid rgb(200, 200, 200);
        border-radius: 5px;
    }
 
    ul.topnav li.dropdownIcon a {
        display: block;
      font-weight:bolder;
      font-size: 20px;
      line-height: 10px;
      padding: 15px;
      color: black;
      
    }

    ul.topnav li.dropdownIcon a::before {
        content: "\2630"; /* Hamburger icon (☰) */
        font-size: 20px;
        color: black;
    }

    ul.topnav li.dropdownIcon.open a::before {
        content: "\2715"; /*Close icon (X) */
        Font-size: 20px;
        color: red;
    }

    ul.topnav li a:hover {
        background-color: #0080ff;
        color: #fff;
        width: 80%;
    }
    ul.topnav li.dropdownIcon a:hover {
       width: 100%;
       border-radius: 5px;
      
    }
    ul.topnav.responsive li.dropdownIcon {
        position: absolute;
        top: 0;
        right: 0;
    }

    ul.topnav.responsive {
        position: relative;
    }

    ul.topnav.responsive li {
        display:inline;
        float: none;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }

    h1.section2Header {
        font-size: 50px;
    }

    article p {
        font-size: 25px;
    }
    .col-6, .col-4, .col-5, .col-7 {
        width: 100%;
        margin: 0;
    }

    div.mobileStack {
        width: 50%;
        display: block;
    }

    div.box {
        padding: 5px;
        display: block;
    }

    div.slopeIcon {
        margin: 10px;
    }

    div.slopeIcon img {
        width: 100%
    }
    
    div.leftSide-col, div.rightSide-col {
        margin: 15px;
    }
    
    input[type="text"] {
        width: 350px;
    }

    .videoContainer iframe {
        position: relative;
        width: 100%;
        margin: 0;
        overflow: hidden;
    }
    
}

.videoContainer {
    margin-left: 15px;

}