/* Basic syntax
    selector {
            bla:bla
            }

    ; semicolons implies that the property is done.
    border-radius: 100%; fixar cirklar.
    .class to identify class
    "id (name) to identify the id name. If you want to style differently within one class.

  This is css block code    div {
                        height: 50px;
                        width: 100px;
                        border: 2px solid black;
                        border-radius: 5px; 

                        display: inline-block allows the divs (ex boxes) to sit on the same side. And below. 
                        use "inline" for html elements that are blocks by default. Pushes them on same line.
    
    float: leftrightetc is postion
    clear: steer clear of other floaters

    div id="inner"/"outer" 0> #inner / #outer för att justera ett element inom ett element. Relativt till det yttre. 
    position:fixed låter ett element på skärmen, t.ex. #inner, trots att annat scrollas förbi.

    z-index: 1,2,3,4, etc rankar ordningen på objekten. Typ så att headern hamnar längst fram på ett objekt. 

    IDs and Classes = IDs are unique, only use on one element. Classes or not unique (any styling that goes on multiple objects)
                        
*/

body { 
        background: url(images/bg-mobile.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

body.about { 
        background: url(images/about-web.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;}

.cv-header {
  float: right;
}
.cv-header-link {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: #000;
}

.cv-header-link a {
  text-decoration: none;
  font-size: 16px;
  color: black;
  opacity: 0.6;
}

.cv-header-link a:hover {
   opacity: 1;
}

.cv-header-link--white a {
   color: #fff;
}

.cv-header-image {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 100px; 
    border-radius: 50%;
    overflow: hidden;
}

.cv-content {
       margin: 0 auto;
       text-align: center;
       padding-top:200px;
}

.content-heading {
        color: black;
        /*font-family: 'Open Sans', sans-serif;*/
        padding-bottom: 20px; 
        font-size: 40px;
        opacity: 0.6;
        
}

.info-button {
        background-color: transparent;
        border: 2px solid;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size:18px;
        margin-top: 40px;
        margin-right: 20px;
        cursor: pointer;
        
}

/*LAYER TWO*/

.more-info {
        background-color: transparent;
        border: 2px solid;
        color: white;
        padding: 2px 30px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size:18px;
        margin-top: 40px;
        margin-right: 20px;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
}

.about-content {
        padding: 32px 42px 32px;
        text-align: center;
        display: inline-block;
        font-family: 'Open Sans', sans-serif;
        color: white;
        margin-top: 20px;
        margin-right: 20px;
        min-width: 75px;
        
}

.about-content p {
        font-size: 20px;
        text-shadow: 0 1px 0 black;
}

.text { opacity: 0.9;}



/*about*/