* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

body {
    font-family: 'Catamaran', sans-serif;
    line-height: 1.6;
    color: #333;
    font-size: 1.1rem;
    height: 100%;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.container ol {
    padding: 0 3rem;
}

.container {
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
    padding: 0 2rem;
}

.navbar {
    font-size: 1.2rem;
    padding-top: 0.5rem;
	padding-bottom: 0.3rem;    
	background-color:rebeccapurple;
	border-bottom: double orange;
}

.navbar .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.navbar a {
    padding: 0 1rem;
}

.navbar ul {
    justify-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home .container {
    background: url('../images/background1280x900.jpg') no-repeat bottom center/cover;
    height: calc(100vh - 120px);
    color: white;
    max-width: 100%;
    position: relative;    
}

.home .container h2{
    font-size: calc(2px + 1.5vw);
}

.home .container ol {
    padding-left: calc(2rem + 1.5vw);
    padding-bottom: 5%;
}

.home .container div {
    float: right; 
    padding-right: 6rem;
    padding-top: 8rem;
}

.bottom-left {
    position: absolute;
    bottom: 8%;
    left: 15%;
    font-size: calc(5px + 0.8vw);
  }
  
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    margin: 5rem 0 0 5rem;
    font-size: calc(3px + 1vw);
}
  
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: calc(3px + 1vw);
}
  
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: calc(4px + 1vw);
}
  
.centered {
    position: absolute;
    top: 50%;
    left: 59%;
    transform: translate(-50%, -50%);
    font-size: calc(5px + 1.5vw);
}

.radial-gradient {
    background-image: radial-gradient(farthest-corner at 40px 40px,
        #f35 0%, #43e 100%);
}

#aboutSection {
    background-color: tomato;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: 2fr 1fr;
    //grid-gap: 1rem;
    justify-content: center;
}

.portraitImg { 
    width: 90%; 
    object-fit: contain; 
	border: 1px solid #ddd;
  	border-radius: 4px;
  	padding: 5px;
	background: white;
	margin: 15px 0 0 15px;
} 
  
#aboutSection h1 {
    font-size: 1.2rem;   
}
  
#aboutSection p {
    margin: 1rem 0;
}

.portraitSection {
	border-left: dotted; 
	border-left-color: #e74c3c; 	
	border-left-width: 5px; 
	margin: 30px 0; 
	background: burlywood; 
	border-top-right-radius: 15px; 
	border-bottom-right-radius: 15px; 
	width:80%
}

span.paper-clip:after {
    width: 11px;
    height: 20px;
    content: " ";
    background: transparent;
    display: block;
    position: absolute;
    right: 2px;
    top: 5px;
    border-radius: 10px;
    border: 2px solid black;
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

span.paper-clip {
    background: transparent;
    height: 40px;
    width: 15px;
    border-radius: 10px;
    border: 2px solid black;
    display: inline-block;
    position: absolute;
	transform: rotate(22deg);
}

.secretWord {
    display: none;
}

.contact {
	background: #333;
	background-image: linear-gradient(to right, grey , #333, grey);
}

#contactSection {
	text-align: center; 
	//margin: 30px auto;
	background: transparent;
}

#contactSection > h2 {
	padding: 15px 15px;
	color: white;
}

#contactSection > img {
	padding: 15px 15px;
}

#contactSection > div {
	padding: 15px 15px;
}

.certification {
	margin-right: 15px;
	margin-bottom: 15px;
}

@media screen and (max-width: 700px)  {
    .hideIfSmall {
      width:0;
      font-size:0;
    }

    .home .container h2 {
        width:0;
        font-size:0;
	}

	.showIfSmall {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 25px;
        color: gold;
    }

    .secretWord{
        display: inline;
	}	
	
	.portraitSection {
		border-left: none; 		
		background: transparent;
		width: 100%;
		height: 100%;
		margin: 0 0; 		
	}   
}




@media (max-width: 700px) {
    #aboutSection {
      grid-template-columns: 1fr;
      text-align: center;
    }
  
    #aboutSection div:first-child {
      order: 2;
    }
  
    #aboutSection div:nth-child(2) {
      order: 1;
    }
  
    #aboutSection img {
      width: 80%;
      //margin: auto;
    }
}

.clear {clear: both;}
#cv {
	width: 90%;
	max-width: 800px;
	background: #f3f3f3;
	margin: 30px 0 30px auto;
}

.mainDetails {
	padding: 25px 35px;
	border-bottom: 2px solid #cf8a05;
	background: #ededed;
}

#name h1 {
	font-size: 2.5em;
	font-weight: 700;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	margin-bottom: -6px;
}

#name h2 {
	font-size: 2em;
	margin-left: 2px;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}

#mainArea {
	padding: 0 40px;
}

#headshot {
	width: 12.5%;
	float: left;
	margin-right: 30px;
}

#headshot img {
	width: 100%;
	height: auto;	
}

#name {
	float: left;
}

#contactDetails {
	float: right;
}

#contactDetails ul {
	list-style-type: none;
	font-size: 0.9em;
	margin-top: 2px;
}

#contactDetails ul li {
	margin-bottom: 3px;
	color: #444;
}

#contactDetails ul li a, a[href^=tel] {
	color: #444; 
	text-decoration: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

#contactDetails ul li a:hover { 
	color: #cf8a05;
}


#cv section {
	border-top: 1px solid #dedede;
	padding: 20px 0 0;
}

#cv section:first-child {
	border-top: 0;
}

#cv section:last-child {
	padding: 20px 0 10px;
}

.sectionTitle {
	float: left;
	width: 25%;
}

.sectionContent {
	float: right;
	width: 72.5%;
}

.sectionTitle h1 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-style: italic;	
	color: #cf8a05;
}

.sectionContent h2 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	margin-bottom: -2px;
}

.subDetails {
	font-size: 0.8em;
	font-style: italic;
	margin-bottom: 3px;
}

.keySkills {
	list-style-type: none;
	-moz-column-count:3;
	-webkit-column-count:3;
	column-count:3;
	margin-bottom: 20px;
	font-size: 0.85rem;
	color: #444;
}

.keySkills ul li {
	margin-bottom: 3px;
}

@media all and (min-width: 702px) and (max-width: 800px) {
	#headshot {
		display: none;
	}
	
	.keySkills {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	}
}

@media all and (max-width: 601px) {
	#cv {
		width: 95%;
		margin: 10px auto;
		min-width: 280px;
	}
	
	#headshot {
		display: none;
	}
	
	#name, #contactDetails {
		float: none;
		width: 100%;
		text-align: center;
	}
	
	.sectionTitle, .sectionContent {
		float: none;
		width: 100%;
		font-size: 0.9rem;
	}
	
	.sectionTitle {
		margin-left: -2px;
		font-size: 1.25em;
	}
	
	.keySkills {
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
	}
}

@media all and (max-width: 480px) {
	.mainDetails {
		padding: 15px 15px;
	}
	
	section {
		padding: 15px 0 0;
	}
	
	#mainArea {
		padding: 0 25px;
	}

	
	.keySkills {
	-moz-column-count:1;
	-webkit-column-count:1;
	column-count:1;
	}
	
	#name h1 {
		line-height: .8em;
		margin-bottom: 4px;
	}
}

@media print {
    #cv {
        width: 100%;
    }
}

@-webkit-keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.instaFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
    -moz-animation-duration: 1.5s;
    -moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
}

.quickFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
}
 
.delayOne {
	-webkit-animation-delay: 0, .5s;
	-moz-animation-delay: 0, .5s;
	animation-delay: 0, .5s;
}

.delayTwo {
	-webkit-animation-delay: 0, 1s;
	-moz-animation-delay: 0, 1s;
	animation-delay: 0, 1s;
}

.delayThree {
	-webkit-animation-delay: 0, 1.5s;
	-moz-animation-delay: 0, 1.5s;
	animation-delay: 0, 1.5s;
}

.delayFour {
	-webkit-animation-delay: 0, 2s;
	-moz-animation-delay: 0, 2s;
	animation-delay: 0, 2s;
}

.delayFive {
	-webkit-animation-delay: 0, 2.5s;
	-moz-animation-delay: 0, 2.5s;
	animation-delay: 0, 2.5s;
}

.footer {
	width: 100%;
	background-color:rebeccapurple;
	border-top: double orange;
	//margin: 15px auto;
	font-size: 0.8rem;
	height: 80px;
}

.footerP {
	color: white;
	display: block;
	text-align: center;
	padding-top: 20px;
}

a.footerlink {
	color: white;
	font-size: 0.6rem;
	padding-top: 20px;
	padding-bottom: 20px;
}